/* ============================================================================
   Compass & Cove — design system  ·  "deep-sea research instrument"
   Charcoal-navy depths · brushed-platinum structure · warm lighthouse-beam
   accent (drawn from the brand mark). Editorial serif display + technical
   sans body + mono for receipts. Restraint over glow.
   ========================================================================== */

:root{
  /* --- depths (neutral near-black — no colour cast) --- */
  --ink:        #0A0A0B;   /* page ground                                     */
  --ink-1:      #0E0E10;
  --ink-2:      #141416;   /* raised surfaces                                 */
  --ink-3:      #1A1A1D;   /* panels / cards                                  */
  --navy:       #202024;   /* elevated neutral                                */
  --navy-line:  #2A2A2F;

  /* --- text (off-white on near-black) --- */
  --fog:        #F5F5F6;   /* primary text                                    */
  --silver:     #B2B2BA;   /* secondary text                                  */
  --muted:      #74747E;   /* tertiary / captions                             */
  --platinum:   #DADADE;

  /* --- accent: white is the single emphasis colour --- */
  --beam:       #FFFFFF;
  --beam-bright:#FFFFFF;
  --beam-deep:  #C7C7CD;
  --beam-glow:  rgba(255,255,255,.06);

  /* --- evidence semantics (desaturated — functional, never decorative) --- */
  --ev-verified:   #93B3A4;
  --ev-unconfirmed:#8A8A93;
  --ev-disputed:   #C6AB78;
  --ev-refuted:    #C98F86;
  --ev-derivation: #9AA4BC;

  /* --- lines & structure --- */
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.15);
  --hair:       linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);

  /* --- type --- */
  --serif: "Fraunces", "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", "Public Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- rhythm --- */
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 56px);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s28:112px;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --shadow: 0 30px 80px -50px rgba(0,0,0,.85);
  --inset-top: inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- reset / base ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--silver);
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(255,255,255,.035), transparent 62%),
    var(--ink);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* fine grain overlay — kills the flat, plasticky look */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body > *{ position:relative; z-index:1; }

img{ max-width:100%; height:auto; display:block; }
::selection{ background:rgba(247,224,168,.22); color:var(--fog); }

a{ color:var(--fog); text-decoration:none; }
:focus-visible{ outline:2px solid var(--beam-bright); outline-offset:3px; border-radius:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:10px; left:50%; transform:translate(-50%,-160%);
  background:var(--ink-3); color:var(--fog); padding:10px 18px; border-radius:999px;
  border:1px solid var(--line-2); font-size:.85rem; z-index:100; transition:transform .2s;
}
.skip-link:focus{ transform:translate(-50%,0); }

/* ---------- typography --------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--fog);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
  font-optical-sizing:auto;
}
h1{ font-size:clamp(2.5rem, 1.6rem + 3.9vw, 4.35rem); letter-spacing:-.028em; }
h2{ font-size:clamp(1.9rem, 1.35rem + 2.3vw, 2.9rem); }
h3{ font-size:clamp(1.2rem, 1rem + .8vw, 1.5rem); letter-spacing:-.01em; }
p{ margin:0; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--silver);
  margin:0 0 var(--s5);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:linear-gradient(90deg,var(--beam-deep),transparent);
}
.register-label,.field-label{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.18em; color:var(--muted); margin:0 0 var(--s3);
}

/* ---------- layout ------------------------------------------------------- */
.shell{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
main{ display:block; }
section{ padding-block:clamp(64px, 8vw, 128px); position:relative; }
section + section{ border-top:1px solid var(--line); }
.section-heading{ max-width:760px; margin-bottom:var(--s12); }
.section-heading h2{ margin-bottom:var(--s4); }
.section-heading p{ color:var(--silver); font-size:1.05rem; }
.section-heading.trust-heading{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s8); align-items:end; max-width:none;
}

/* ---------- navigation --------------------------------------------------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
  padding-block:var(--s4);
  background:rgba(7,10,15,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
  max-width:none;
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
.brand-lockup{ display:inline-flex; align-items:center; gap:var(--s3); }
.brand-lockup img{ width:34px; height:34px; border-radius:8px; }
.brand-lockup span{
  font-family:var(--serif); font-size:1.12rem; font-weight:500; color:var(--fog);
  letter-spacing:.01em;
}
.brand-lockup b{ color:var(--beam); font-weight:500; }

.nav-menu{ display:flex; align-items:center; gap:var(--s2); }
.nav-menu a:not(.button){
  color:var(--silver); font-size:.92rem; padding:8px 12px; border-radius:8px;
  transition:color .18s, background .18s;
}
.nav-menu a:not(.button):hover{ color:var(--fog); background:rgba(190,204,224,.05); }
.nav-toggle{ display:none; }

/* ---------- buttons ------------------------------------------------------ */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.005em;
  padding:13px 22px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .22s ease, background .2s, border-color .2s, color .2s;
  white-space:nowrap; text-align:center;
}
.button-primary{
  color:#0A0A0B;
  background:#FFFFFF;
  box-shadow: 0 1px 0 rgba(0,0,0,.15) inset, 0 8px 22px -14px rgba(0,0,0,.6);
}
.button-primary:hover{ transform:translateY(-1px); background:#EDEDEF; box-shadow: 0 12px 28px -14px rgba(0,0,0,.7); }
.button-secondary,.button-ghost{
  color:var(--fog); background:transparent; border-color:rgba(215,222,232,.22);
}
.button-secondary:hover{ border-color:rgba(215,222,232,.5); background:rgba(190,204,224,.05); }
.button-small{ padding:9px 16px; font-size:.86rem; }
.text-link{
  color:var(--fog); font-weight:500; display:inline-flex; gap:.4em; align-items:center;
  border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color .2s, color .2s;
}
.text-link span{ color:var(--beam); transition:transform .2s; }
.text-link:hover{ border-color:var(--beam-deep); }
.text-link:hover span{ transform:translateX(3px); }

/* ---------- hero --------------------------------------------------------- */
.hero{ padding-top:clamp(56px,7vw,104px); }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero-copy .eyebrow{ animation:fadeUp .7s .05s both; }
#hero-title{ margin-bottom:var(--s6); max-width:14ch; animation:fadeUp .8s .12s both; }
.hero-lede{ font-size:clamp(1.05rem,1rem + .5vw,1.28rem); color:var(--silver); max-width:52ch; animation:fadeUp .8s .2s both; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); margin:var(--s8) 0 var(--s5); animation:fadeUp .8s .28s both; }
.trust-line{ font-family:var(--mono); font-size:.8rem; color:var(--muted); letter-spacing:.02em; animation:fadeUp .8s .36s both; }

.hero-principle{
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:clamp(22px,3vw,34px); box-shadow:var(--shadow), var(--inset-top);
  position:relative; overflow:hidden; animation:fadeUp .9s .3s both;
}
.hero-principle::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%, var(--beam-glow), transparent 55%);
}
.principle-statement{
  font-family:var(--serif); font-size:1.32rem; line-height:1.35; color:var(--fog);
  margin:var(--s2) 0 var(--s6);
}
.evidence-register{ display:grid; gap:var(--s3); margin:0; }
.evidence-register > div{
  display:flex; align-items:baseline; gap:var(--s4);
  padding-top:var(--s3); border-top:1px solid var(--line);
}
.evidence-register dt{ display:flex; align-items:center; gap:.6em; color:var(--fog); font-weight:500; min-width:118px; font-size:.95rem; }
.evidence-register dd{ margin:0; color:var(--muted); font-size:.9rem; }
.evidence-mark{ width:9px; height:9px; border-radius:2px; box-shadow:0 0 10px currentColor; }
.evidence-mark.verified{ background:var(--ev-verified); color:var(--ev-verified); }
.evidence-mark.unconfirmed{ background:var(--ev-unconfirmed); color:transparent; box-shadow:none; }
.evidence-mark.refuted{ background:var(--ev-refuted); color:var(--ev-refuted); }

/* ---------- trust console (the instrument) ------------------------------- */
.trust-console{
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow);
}
.console-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) clamp(18px,2.4vw,26px); border-bottom:1px solid var(--line);
  background:rgba(18,26,38,.5);
}
.console-header strong{ color:var(--fog); font-weight:500; font-family:var(--serif); font-size:1.1rem; margin-left:.5em; }
.console-index{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.18em; color:var(--beam); }
.console-mode{ font-family:var(--mono); font-size:.7rem; color:var(--muted); letter-spacing:.04em; }

.console-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.console-cell{ background:var(--ink-2); padding:clamp(18px,2.2vw,26px); }
.console-question blockquote{
  font-family:var(--serif); font-size:1.18rem; line-height:1.4; color:var(--fog);
  margin:var(--s2) 0 var(--s4); border-left:2px solid var(--beam-deep); padding-left:var(--s4);
}
.field-note{ font-family:var(--mono); font-size:.78rem; color:var(--muted); line-height:1.5; }
.root-claim{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--s3) var(--s4); margin-bottom:var(--s4); }
.root-claim span{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); }
.root-claim p{ color:var(--fog); font-size:.95rem; margin-top:4px; line-height:1.45; }
.claim-map{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.claim-map li{
  display:grid; grid-template-columns:1fr auto; gap:2px var(--s3); align-items:center;
  padding:var(--s3) 0; border-top:1px solid var(--line);
}
.claim-map li small{ grid-column:1/-1; color:var(--muted); font-size:.78rem; }
.claim-name{ color:var(--fog); font-size:.9rem; }
.claim-state{
  font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.1em;
  padding:3px 9px; border-radius:999px; border:1px solid currentColor; justify-self:end;
}
.claim-state.derivation{ color:var(--ev-derivation); }
.claim-state.verified{ color:var(--ev-verified); }
.claim-state.unconfirmed{ color:var(--ev-unconfirmed); }
.claim-state.refuted{ color:var(--ev-refuted); }

.verdict-mark{
  display:flex; flex-direction:column; gap:2px; padding:var(--s4);
  border-radius:var(--r-md); margin-bottom:var(--s4); border:1px solid;
}
.verdict-mark span{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; opacity:.8; }
.verdict-mark strong{ font-family:var(--serif); font-size:1.55rem; font-weight:500; }
.verdict-mark.refuted{ color:var(--ev-refuted); background:rgba(206,122,110,.08); border-color:rgba(206,122,110,.3); }
.verdict-ledger{ display:grid; gap:0; margin:0 0 var(--s4); }
.verdict-ledger > div{ display:flex; justify-content:space-between; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--line); }
.verdict-ledger dt{ color:var(--silver); font-size:.85rem; }
.verdict-ledger dd{ margin:0; font-family:var(--mono); font-size:.78rem; }
.verdict-ledger dd.derivation{ color:var(--ev-derivation); }
.verdict-ledger dd.refuted{ color:var(--ev-refuted); }
.receipt-disclosure{ border-top:1px solid var(--line); padding-top:var(--s3); }
.receipt-disclosure summary{ cursor:pointer; color:var(--beam); font-size:.82rem; font-family:var(--mono); letter-spacing:.03em; }
.receipt-disclosure p{ color:var(--muted); font-size:.82rem; margin-top:var(--s3); line-height:1.55; }

.live-station{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s6); align-items:center;
  padding:clamp(20px,2.6vw,30px); border-top:1px solid var(--line); background:rgba(18,26,38,.35);
}
.live-station h3{ font-family:var(--serif); margin:var(--s2) 0; color:var(--fog); }
.live-station p{ font-size:.9rem; color:var(--muted); }
.live-form label{ display:block; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin-bottom:var(--s2); }
.query-control{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.query-control input{
  flex:1 1 240px; min-width:0; background:var(--ink); color:var(--fog);
  border:1px solid var(--line-2); border-radius:999px; padding:12px 18px; font:inherit; font-size:.92rem;
}
.query-control input:focus{ outline:none; border-color:var(--beam-deep); box-shadow:0 0 0 3px var(--beam-glow); }
.form-help{ font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-top:var(--s3); }

.live-result{ padding:clamp(20px,2.6vw,30px); border-top:1px solid var(--line); }
.live-result-head{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); }
.result-state{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; color:var(--beam); padding:4px 10px; border:1px solid var(--line-2); border-radius:999px; }
.receipt-line{ font-family:var(--mono); font-size:.76rem; color:var(--ev-verified); }
.live-answer{ color:var(--silver); font-size:.98rem; line-height:1.6; }
.live-access{ margin-top:var(--s3); font-size:.85rem; color:var(--muted); }
.live-access a{ color:var(--beam); border-bottom:1px solid var(--beam-deep); }

/* ---------- system card / loop instrument -------------------------------- */
.system-card-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:start; }
.loop-instrument{ display:grid; gap:var(--s5); }
.loop-track{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.loop-node{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--silver);
  background:var(--ink-2); border:1px solid var(--line); border-radius:999px;
  padding:9px 15px; cursor:pointer; transition:all .18s;
}
.loop-node:hover{ color:var(--fog); border-color:var(--line-2); }
.loop-node.active{ color:#0A0A0B; background:#FFFFFF; border-color:transparent; }
.loop-detail{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:clamp(22px,3vw,32px); box-shadow:var(--inset-top);
}
.loop-detail h3{ font-family:var(--serif); margin:var(--s2) 0; color:var(--fog); }
.loop-detail p{ color:var(--silver); }

/* ---------- proof / evaluation ledger ------------------------------------ */
.proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
.proof-copy p{ color:var(--silver); margin-bottom:var(--s6); font-size:1.02rem; }
.proof-register{ background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(22px,3vw,30px); }
.proof-register header{ display:flex; flex-direction:column; gap:2px; margin-bottom:var(--s5); }
.proof-register header strong{ font-family:var(--serif); color:var(--fog); font-weight:500; font-size:1.15rem; }
.proof-register dl{ display:grid; gap:0; margin:0 0 var(--s5); }
.proof-register dl > div{ display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--line); }
.proof-register dt{ color:var(--silver); font-size:.92rem; }
.proof-register dd{ margin:0; font-family:var(--mono); font-size:.76rem; color:var(--beam); text-align:right; }
.proof-register > p{ color:var(--muted); font-size:.84rem; line-height:1.55; }

/* ---------- access strip ------------------------------------------------- */
.access-strip{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s8); flex-wrap:wrap;
  background:linear-gradient(120deg,var(--navy),var(--ink-2)); border:1px solid var(--line-2);
  border-radius:var(--r-xl); padding:clamp(28px,4vw,48px); box-shadow:var(--shadow), var(--inset-top);
  position:relative; overflow:hidden;
}
.access-strip::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 100% 0, var(--beam-glow), transparent 55%); pointer-events:none; }
.access-strip h2{ margin:var(--s3) 0; }
.access-strip p{ color:var(--silver); max-width:44ch; }
.access-actions{ display:flex; gap:var(--s3); flex-wrap:wrap; position:relative; }

/* ---------- footer ------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); padding-block:var(--s16) var(--s10); margin-top:var(--s8); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s10); align-items:start; }
.footer-brand .brand-lockup{ margin-bottom:var(--s4); }
.footer-brand p{ color:var(--muted); font-size:.9rem; max-width:44ch; }
.footer-links{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); align-items:flex-start; }
.footer-links a{ color:var(--silver); font-size:.9rem; }
.footer-links a:hover{ color:var(--beam); }
.footer-fine{ display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s12); padding-top:var(--s5); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.03em; }

/* ---------- reveal / motion ---------------------------------------------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.will-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.will-reveal.is-revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .hero-copy .eyebrow,#hero-title,.hero-lede,.hero-actions,.trust-line,.hero-principle{ animation:none !important; }
  .will-reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 960px){
  .hero-grid,.system-card-grid,.proof-grid,.section-heading.trust-heading,.live-station,.footer-grid{ grid-template-columns:1fr; }
  .console-grid{ grid-template-columns:1fr; }
  .console-cell{ border-top:1px solid var(--line); }
}
@media (max-width: 720px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
    background:var(--ink-2); border:1px solid var(--line-2); border-radius:10px; cursor:pointer;
  }
  .nav-toggle::before{ content:"\2261"; color:var(--fog); font-size:1.4rem; line-height:1; }
  .nav-menu{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:rgb(10,15,22); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-2); padding:var(--s4) var(--gutter) var(--s6);
  }
  .nav-menu.open{ display:flex; }
  .nav-menu a:not(.button){ padding:12px 8px; border-bottom:1px solid var(--line); }
  .nav-menu .button{ margin-top:var(--s3); }
  .site-nav{ flex-wrap:wrap; }
  .access-strip{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================================
   MOBILE POLISH — additive only; no desktop (>=1024px) rules touched
   Defects: 1,2(JS),3,4,5,6(HTML),7,8,9,10,11,14,15,16
   ========================================================================== */

/* --- D3: sticky header on mobile so nav persists on scroll --- */
/* --- D1: raise nav-menu z-index above main content (body>* is z:1) --- */
@media (max-width: 768px), (max-height: 520px) {
  /* D3 — sticky site-header on mobile; header was position:relative */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 200;
  }
  /* D1 — nav-menu must clear .site-header's stacking context and the hero */
  .site-nav{
    position: relative;
    z-index: 200;
  }
  .nav-menu{
    z-index: 300;
  }

  /* D4 — landscape: show hamburger even when width > 768px but height <= 520px */
  .nav-toggle{
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle::before{ content: "\2261"; color: var(--fog); font-size: 1.4rem; line-height: 1; }
  /* hide desktop horizontal nav links */
  .site-nav > .nav-menu:not(.open){
    display: none;
  }

  /* Open menu is ALWAYS the vertical dropdown in this arm — without this,
     landscape (wide but short) fell back to the desktop horizontal row.
     Scrollable when taller than the viewport (landscape safe). */
  .nav-menu.open{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:rgb(10,15,22); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-2); padding:var(--s4) var(--gutter) var(--s6);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-menu.open a:not(.button){ padding:12px 8px; border-bottom:1px solid var(--line); }
  .nav-menu.open .button{ margin-top:var(--s3); }

  /* D8 / D16 — inputs ≥16px to prevent iOS focus-zoom */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{
    font-size: 16px !important;
  }

  /* D10 — footer links: expand tap target with padding */
  .footer-links a{
    padding: 8px 0;
    display: inline-block;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* D11 — brand lockup: min-height 40px */
  .brand-lockup{
    min-height: 40px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* D14 — loop-node buttons: min-height 40px */
  .loop-node{
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* general touch polish on nav links */
  .nav-menu a{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* --- D5: landscape hero height cap — prevent hero filling the entire thin viewport --- */
@media (max-height: 520px) and (orientation: landscape){
  .hero{
    padding-top: clamp(16px, 3vh, 32px);
    padding-bottom: clamp(16px, 3vh, 32px);
  }
  /* cap section vertical padding in landscape */
  section{
    padding-block: clamp(24px, 4vh, 48px);
  }
  /* D9 — auth: reduce vertical whitespace so submit stays visible */
  .auth-page main,
  .auth-wrap{
    padding-top: 12px;
    padding-bottom: 12px;
  }
}