@font-face { font-family: Outfit; src: url('../fonts/Outfit.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
:root { color-scheme: dark; --ink: #e8e4dc; --silver: #bdbbb7; --muted: #85837f; --line: #292929; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: #080808; color: var(--ink); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.contact-header, main, footer { width: min(1240px, 100%); margin-inline: auto; padding-inline: clamp(24px, 6vw, 72px); }
.contact-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 26px; }
.wordmark { position: relative; width: 165px; height: 48px; overflow: hidden; flex-shrink: 0; }
.wordmark img { position: absolute; width: 170.666667%; max-width: none; height: auto; left: -38.666667%; top: 50%; transform: translateY(-50%); }
.back-link { display: flex; align-items: center; min-height: 44px; gap: 12px; font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.back-link:hover { color: var(--ink); }
main { flex: 1; padding-top: clamp(60px, 9vh, 110px); padding-bottom: 72px; }
.eyebrow { margin: 0 0 24px; color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 0; font-family: Outfit, sans-serif; font-size: clamp(46px, 7vw, 86px); line-height: 1.06; letter-spacing: -.045em; font-weight: 350; }
h1 span { color: var(--silver); }
.intro { margin: 28px 0 52px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.contact-channels { display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--line); }
.contact-channel { display: flex; flex-direction: column; align-items: stretch; text-align: left; min-width: 0; padding: 30px 28px; border: 0; background: transparent; color: var(--ink); font: inherit; transition: background 180ms ease; }
.contact-channel + .contact-channel { border-left: 1px solid var(--line); }
a.contact-channel:hover { background: #121212; }
.contact-channel:disabled { opacity: 1; cursor: default; }
.channel-icon { width: 30px; height: 30px; margin-bottom: 32px; color: var(--silver); }
.channel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: Outfit, sans-serif; font-size: 25px; font-weight: 350; }
.channel-arrow { font: 18px Helvetica, sans-serif; color: var(--muted); transition: transform 180ms ease; }
a.contact-channel:hover .channel-arrow { transform: translate(2px, -2px); color: var(--ink); }
.channel-description { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.channel-detail { margin-top: 28px; font-size: 11px; letter-spacing: .025em; color: var(--silver); overflow-wrap: anywhere; }
.contact-channel:disabled .channel-detail { color: var(--muted); }
footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: max(22px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 10px; letter-spacing: .04em; }
footer p { margin: 0; } footer a { min-height: 44px; display: flex; align-items: center; }
a:focus-visible { outline: 1px solid var(--silver); outline-offset: 5px; }
@media(max-width: 640px) {
  .contact-header { padding-top: 16px; }
  .wordmark { width: 125px; height: 42px; }
  .back-link { font-size: 10px; gap: 6px; }
  main { padding-top: 52px; padding-bottom: 42px; }
  .intro { margin-bottom: 34px; }
  .contact-channels { grid-template-columns: 1fr; }
  .contact-channel { padding: 24px 12px; }
  .contact-channel + .contact-channel { border-left: 0; border-top: 1px solid var(--line); }
  .channel-icon { margin-bottom: 18px; width: 25px; height: 25px; }
  .channel-detail { margin-top: 18px; }
  footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media(prefers-reduced-motion: reduce) { * { transition: none !important; } }