/* =====================================================================
   ICHNEUMON — holding page. Dependency-free, no external requests,
   no trackers, no fonts fetched over the wire. Theme-aware (light/dark).
   Palette + type mirror identity/tokens.css (system-font fallbacks so the
   page is instant and private; self-host Spectral/JetBrains Mono later).
   ===================================================================== */

/* Self-hosted brand fonts — same-origin woff2 (Latin subset). No external requests, no trackers. */
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/spectral-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/spectral-italic-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/spectral-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/jetbrains-mono-400.woff2') format('woff2'); }

:root {
  --bg:#F4F6F8; --surface:#FBFCFD; --fg:#14181F; --muted:#5B6472;
  --border:#DDE2E8; --accent:#D8323C; --accent-strong:#B4242F; --metal:#8695A8;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular","SF Mono",Consolas,Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0E1217; --surface:#171C23; --fg:#E7EBF1; --muted:#8A94A4;
    --border:#232A33; --accent:#E5484D; --accent-strong:#C2313B; --metal:#5F6E82;
  }
}
:root[data-theme="dark"] {
  --bg:#0E1217; --surface:#171C23; --fg:#E7EBF1; --muted:#8A94A4;
  --border:#232A33; --accent:#E5484D; --accent-strong:#C2313B; --metal:#5F6E82;
}

* { box-sizing:border-box; }
::selection { background:var(--accent-strong); color:#FFFFFF; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh;
}

main {
  flex:1 0 auto; width:100%; max-width:620px;
  margin:0 auto; padding:14vh 28px 8vh;
  display:flex; flex-direction:column; gap:34px;
}

/* mark */
.mark { width:66px; height:auto; color:var(--fg); }
.mark .band { fill:var(--accent); }

/* wordmark */
.wordmark {
  font-family:var(--serif); font-weight:600;
  /* floor lowered so the 9-letter word fits ~320px viewports without horizontal overflow */
  font-size:clamp(44px,13vw,92px); line-height:1; letter-spacing:.02em;
  margin:0; color:var(--fg);
}
.phon {
  font-family:var(--mono); font-size:14px; letter-spacing:.28em;
  color:var(--muted); margin-top:14px;
}
.phon .s { color:var(--accent); }

.descriptor {
  font-family:var(--mono); font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
  padding-top:22px; border-top:1px solid var(--border); max-width:44ch;
}

.origin {
  font-family:var(--serif); font-size:clamp(19px,2.6vw,22px);
  line-height:1.5; color:var(--fg); max-width:40ch; margin:0;
}
.origin em { color:var(--accent); font-style:italic; }

/* contact / newsletter */
.contact { display:flex; flex-direction:column; gap:14px; max-width:42ch; }
.contact .label {
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.row { display:flex; gap:10px; flex-wrap:wrap; }
.field {
  flex:1 1 220px; min-width:0; background:var(--surface);
  border:1px solid var(--border); color:var(--fg);
  font-family:var(--mono); font-size:14px; padding:13px 15px; border-radius:3px;
}
.field::placeholder { color:var(--muted); opacity:.8; }
.field:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.btn {
  display:inline-block; align-self:flex-start; text-decoration:none;
  /* accent-strong (deeper red) so white label clears AA 4.5:1 — bright --accent fails at this size */
  background:var(--accent-strong); color:#FFFFFF; border:1px solid var(--accent-strong);
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 20px; border-radius:3px; cursor:pointer; white-space:nowrap;
  transition:filter .15s ease;
}
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn:hover { filter:brightness(1.1); }
.mailto {
  font-family:var(--mono); font-size:13px; color:var(--muted); letter-spacing:.04em;
}
/* link text in --fg for AA contrast; the red underline carries the accent + affordance */
.mailto a { color:var(--fg); text-decoration:none; border-bottom:1px solid var(--accent); }
.mailto a:hover { border-bottom-width:2px; }
.mailto a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:1px; }

footer {
  flex-shrink:0; border-top:1px solid var(--border);
  padding:22px 28px; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
footer .dot { color:var(--metal); padding:0 8px; }

/* tighten side padding on small screens for more line width */
@media (max-width:420px) {
  main { padding-left:22px; padding-right:22px; }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}