@font-face {
  font-family: 'Calling Card Serif';
  src: url('./assets/title.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
}
@font-face {
  font-family: 'Calling Card Sans';
  src: url('./assets/body.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ivory: #f0e8d8;
  --muted: #ded7cc;
  --night: #111c26;
  --serif: 'Calling Card Serif', 'Baskerville', 'Georgia', serif;
  --sans: 'Calling Card Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; min-height: 100%; }
body { background: var(--night); color: var(--ivory); }
.calling-card { position: relative; min-height: 100svh; height: 100svh; overflow: hidden; isolation: isolate; }
.landscape { position: absolute; inset: 0; z-index: -1; }
.landscape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.identity {
  position: absolute;
  top: 28.5%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 48px);
  text-align: center;
}
.bart .identity { top: 50%; transform: translate(-50%, -50%); text-shadow: 0 2px 18px #0009; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 3.91vw, 84px); font-weight: 300; line-height: 1.12; letter-spacing: -.018em; }
.themes { display: flex; justify-content: center; align-items: baseline; gap: .82em; margin: 17px 0 0; padding: 0; list-style: none; font-family: var(--sans); font-size: clamp(13px, .96vw, 19px); font-weight: 300; line-height: 1.5; letter-spacing: .29em; color: var(--muted); }
.themes li + li::before { content: '·'; margin-right: .82em; }
.contact { position: absolute; top: max(32px, env(safe-area-inset-top)); right: max(40px, env(safe-area-inset-right)); z-index: 1; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: .035em; }
.contact-toggle { display: flex; align-items: center; justify-content: center; list-style: none; min-height: 44px; padding: 11px 22px; border: 1px solid #f0e8d852; border-radius: 999px; color: var(--ivory); background: #111c261f; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.contact-toggle::-webkit-details-marker { display: none; }
.contact-toggle:hover, .contact[open] .contact-toggle { border-color: #f0e8d8a6; background: #111c2666; }
.bart .contact-toggle { border-color: #f0e8d8a6; background: #111c2699; }
.bart .contact-toggle:hover, .bart .contact[open] .contact-toggle { background: #111c26cc; }
.contact-panel { position: absolute; top: calc(100% + 10px); right: 0; width: max-content; min-width: 230px; max-width: calc(100vw - 32px); padding: 7px; border: 1px solid #f0e8d82e; border-radius: 14px; background: #111c26f2; box-shadow: 0 12px 32px #0003; }
.contact-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.email { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 12px 16px; border-radius: 7px; color: var(--ivory); font: inherit; letter-spacing: .025em; white-space: nowrap; text-underline-offset: .23em; text-decoration-thickness: 1px; text-decoration-color: #b9b1a2; transition: background-color 160ms ease; }
.email:hover { background: #f0e8d80d; }
.contact-toggle:focus-visible, .email:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.tek { --night: #18212a; }
.tek .identity { top: 30.4%; left: 40.8%; }
.tek h1 { font-size: clamp(54px, 4.97vw, 108px); font-weight: 300; line-height: 1.04; letter-spacing: .005em; }
.tek .themes { margin-top: 3px; font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.2vw, 24px); letter-spacing: .28em; gap: .65em; }
.tek .themes li + li::before { margin-right: .65em; }
@media (max-width: 700px) {
  .identity, .tek .identity { left: 50%; top: max(17%, 148px); max-width: calc(100% - 28px); }
  h1 { font-size: clamp(36px, 9.8vw, 62px); }
  .tek h1 { font-size: clamp(44px, 12.3vw, 74px); }
  .themes { margin-top: 18px; gap: .6em; font-size: clamp(10px, 2.68vw, 14px); letter-spacing: .13em; }
  .themes li + li::before { margin-right: .6em; }
  .tek .themes { font-size: clamp(12px, 3.45vw, 19px); letter-spacing: .14em; gap: .55em; margin-top: 12px; }
  .tek .themes li + li::before { margin-right: .55em; }
  .contact { top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); }
  .contact-toggle { padding: 11px 18px; }
  .tek .landscape img { object-position: 72% center; }
}
@media (max-height: 480px) and (min-width: 701px) {
  .identity, .tek .identity { top: 15%; }
  h1, .tek h1 { font-size: 42px; }
  .themes, .tek .themes { margin-top: 8px; font-size: 12px; }
  .contact { top: 18px; right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .contact-toggle, .email { transition: none; } }