/* Shared shell for the secondary pages (404, privacy, terms).
   index.html keeps its CSS inline so the landing page renders in one request;
   these pages are not on the critical path, so they share this sheet.
   Design tokens come from assets/tokens.css, generated from index.html. */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html,body{background:var(--ink);color:var(--paper);}
body{
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100dvh;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--gold);color:var(--ink);}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm);
}
.skip{
  position:fixed;top:10px;left:10px;z-index:90;transform:translateY(-200%);
  padding:11px 18px;background:var(--paper);color:var(--ink);border-radius:var(--r-pill);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:transform var(--t-mid) var(--ease);
}
.skip:focus-visible{transform:translateY(0);}

/* ───────── ATMOSPHERE ─────────
   Same three fixed layers as the landing page: dot grid, ambient glow, grain.
   All fixed and pointer-events:none, so none of them repaint during scroll. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:32px 32px;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 45% at 85% 0%, var(--glow-a), transparent 60%),
    radial-gradient(45% 55% at 0% 100%, var(--glow-b), transparent 60%),
    radial-gradient(60% 50% at 50% 60%, var(--wash), transparent 70%);
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-size:180px 180px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.app{position:relative;z-index:2;}
.wrap{width:min(860px, 92vw);margin:0 auto;}

/* ───────── MASTHEAD ───────── */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:26px 0 0;
}
.logo{display:inline-flex;align-items:center;line-height:1;color:var(--paper);}
.logo .za{
  font-family:var(--serif);font-weight:500;
  font-variation-settings:"opsz" 144, "wght" 500, "SOFT" 0;
  letter-spacing:-.06em;fill:currentColor;
}
.logo .nm{font-family:var(--sans);font-weight:500;letter-spacing:.42em;fill:currentColor;}
.back{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 8px 9px 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-dim);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.back:hover{color:var(--gold);border-color:var(--gold);}
.back:active{transform:scale(.975);}

/* Trailing glyphs sit in their own well rather than naked beside the label. */
.chip{
  width:24px;height:24px;flex:none;border-radius:var(--r-pill);
  display:inline-grid;place-items:center;background:var(--gold-soft);
  font-family:var(--serif);font-style:italic;font-size:13px;line-height:1;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.back:hover .chip,.links a:hover .chip{transform:translate(2px,-2px) scale(1.06);}

/* ───────── DOCUMENT SHELL (double-bezel) ───────── */
.sheet{
  position:relative;margin:var(--bay) 0;
  padding:52px 54px 46px;
  background:
    radial-gradient(55% 60% at 100% 0%, var(--glow-a), transparent 60%),
    linear-gradient(180deg, var(--surf-a) 0%, var(--surf-b) 100%);
  border:1px solid var(--line);border-radius:var(--r-shell);
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--bezel-hi), 0 0 0 1px var(--bezel-ring);
}
.sheet::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);border-radius:var(--r-shell) 0 0 var(--r-shell);
}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--paper-mute);
  text-transform:uppercase;display:flex;align-items:center;gap:12px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

h1{
  font-family:var(--serif);font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 40;
  font-size:clamp(42px, 7vw, 76px);line-height:.92;letter-spacing:-.04em;
  margin:24px 0 14px;text-wrap:balance;
}
h1 em{font-style:italic;color:var(--gold);font-variation-settings:"opsz" 144, "wght" 300, "SOFT" 100;}
.lede{
  font-family:var(--serif);font-weight:300;font-size:18.5px;line-height:1.5;
  color:var(--paper-dim);max-width:60ch;letter-spacing:-.005em;text-wrap:pretty;
}
.stamp{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--paper-mute);
  text-transform:uppercase;margin-top:18px;
}
.rule{height:1px;background:var(--line);margin:34px 0 30px;}

/* ───────── PROSE ─────────
   Measure is capped near 68 characters; section headings use the mono label
   voice so the serif stays reserved for display sizes. */
.prose{max-width:68ch;}
.prose h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin:38px 0 12px;
}
.prose h2:first-child{margin-top:0;}
.prose h3{
  font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;
  letter-spacing:-.012em;color:var(--paper);margin:24px 0 8px;
}
.prose p{color:var(--paper-dim);margin-bottom:14px;text-wrap:pretty;}
.prose strong{color:var(--paper);font-weight:500;}
.prose em{font-style:italic;color:var(--gold);}
.prose a{color:var(--gold);border-bottom:1px solid var(--gold-soft);transition:border-color var(--t-fast) var(--ease);}
.prose a:hover{border-bottom-color:var(--gold);}
.prose ul{list-style:none;margin:0 0 16px;}
.prose li{
  position:relative;padding-left:22px;margin-bottom:9px;color:var(--paper-dim);
  text-wrap:pretty;
}
.prose li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.75;
}
.prose li strong{color:var(--paper);}

/* Inset block for the things people actually need to act on. */
.note{
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-core);
  box-shadow:inset 0 1px 0 var(--bezel-hi), inset 0 0 0 1px var(--bezel-ring);
  padding:22px 24px;margin:22px 0;
}
.note .l{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--paper-mute);
  text-transform:uppercase;margin-bottom:10px;
}
.note p:last-child{margin-bottom:0;}

/* ───────── LINK ROW ───────── */
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;}
.links a{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 8px 10px 16px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-dim);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.links a:hover{color:var(--gold);border-color:var(--gold);}
.links a:active{transform:scale(.975);}
.links a.primary{border-color:var(--gold);color:var(--gold);}

/* ───────── FOOT ───────── */
.foot{
  padding:0 0 46px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;color:var(--paper-mute);
  letter-spacing:.12em;text-transform:uppercase;
}
.foot strong{color:var(--gold);font-weight:500;}
.foot a{transition:color var(--t-fast) var(--ease);}
.foot a:hover{color:var(--gold);}

/* ───────── 404 ─────────
   The error page centres a single card instead of running the document shell. */
.is-404 body{display:grid;place-items:center;padding:24px;}
.is-404 .sheet{margin:0;width:min(640px,100%);}

@media(max-width:680px){
  .sheet{padding:34px 24px 30px;}
  .masthead{padding-top:20px;}
  .foot{flex-direction:column;align-items:flex-start;gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}