/* ============================================================
   OVERSERVED · site.css — single source of truth
   Shared by index.html, privacy.html, restore.html, 404.html.
   Pages keep only page-specific rules inline.
   Palette: near-black ground + last-call amber. Cream on ground
   is ~9:1+ contrast; keep it that way.
   ============================================================ */

/* Font copyrights and full SIL OFL notices: /fonts/LICENSES.txt. */
/* ---------- self-hosted fonts (latin subsets, variable) ---------- */
@font-face{
  font-family:"Oswald";
  src:url("../fonts/oswald-var.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --ground:#120D0A; --surface:#1E1611; --surface2:#2A201A;
  --amber:#F0A32B; --amber-dim:#B87A1E;
  --cream:#F3E9DA; --cream-dim:#C4B29B;
  --safe:#3EA06F; --danger:#E14B4B;
  --line:rgba(240,163,43,0.20);
  --line-strong:rgba(240,163,43,0.42);
  /* radius scale — the only radii allowed on the site */
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --disp:"Oswald",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--cream);
  font-family:var(--body); font-size:16px; line-height:1.6;
  overflow-x:hidden;
}
img,svg{max-width:100%; height:auto}
a{color:var(--amber); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--cream)}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}

.shell{width:100%; max-width:1060px; margin:0 auto; padding:0 24px}
.shell-narrow{max-width:760px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--amber); color:#171006; padding:12px 18px;
  font-weight:800; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}
.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;
}

/* ---------- shared type utilities ---------- */
.eyebrow{
  font:600 12px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber);
}
.section-label{
  display:flex; align-items:center; gap:14px;
  font:600 12px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-dim); margin-bottom:20px;
}
.section-label::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid var(--line)}
.topbar .shell{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cream)}
.brand .mark{width:26px; height:26px; flex:none}
.brand b{
  font-family:var(--disp); font-weight:600; font-size:18px;
  letter-spacing:.04em; text-transform:uppercase;
}
.brand b i{font-style:normal; color:var(--amber)}
.topnav{display:flex; gap:4px 20px; flex-wrap:wrap}
.topnav a{
  display:inline-flex; align-items:center; min-height:32px;
  font:600 12px/1 var(--body); letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none;
}
.topnav a:hover{color:var(--amber)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; border-radius:var(--r-md); padding:15px 26px; cursor:pointer;
  font:700 13px/1 var(--body); letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent;
  transition:filter .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--amber); color:#171006}
.btn-primary:hover{filter:brightness(1.1); color:#171006}
.btn-ghost{background:none; border-color:var(--line); color:var(--cream-dim)}
.btn-ghost:hover{border-color:var(--amber-dim); color:var(--cream)}
.btn:disabled{cursor:wait; filter:saturate(.45); opacity:.72}

/* ---------- footer ---------- */
.foot{padding:44px 0 52px; font-size:13.5px; color:var(--cream-dim)}
.foot-links{display:flex; gap:8px 24px; flex-wrap:wrap; margin-bottom:20px}
.foot-links a{font-weight:700; text-decoration:none; color:var(--cream)}
.foot-links a:hover{color:var(--amber)}
.foot .fine{max-width:70ch}
.foot .fine + .fine{margin-top:10px}
.foot b{color:var(--amber)}

/* ---------- menu furniture (index; defined here so pages stay lean) ---------- */
.rule-double{height:9px; border-top:3px solid var(--line-strong); border-bottom:1px solid var(--line-strong)}
.stamp{
  width:52px; height:52px; flex:none; position:relative;
  border:1.5px solid var(--amber-dim); border-radius:50%;
  display:grid; place-items:center; transform:rotate(-8deg); opacity:.85;
}
.stamp::before{
  content:""; position:absolute; inset:4px;
  border:1px solid rgba(184,122,30,.55); border-radius:50%;
}
.stamp svg{width:22px; height:22px}
.divider{display:flex; align-items:center; gap:20px; padding:8px 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- atmosphere: film grain + the one neon sign (index only) ---------- */
body.atmosphere::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.032; background-image:url("grain.svg"); background-size:180px 180px;
}
/* Glow budget: exactly ONE element site-wide — the SERVED half of the
   index hero wordmark. The flicker animates glow layers only, never
   opacity, so the wordmark can never render invisible. */
.neon{
  color:var(--amber);
  text-shadow:
    0 0 2px  rgba(240,163,43,.9),
    0 0 10px rgba(240,163,43,.55),
    0 0 26px rgba(240,163,43,.38),
    0 0 64px rgba(240,163,43,.22),
    0 0 120px rgba(240,163,43,.12);
  animation:neon-flick .2s linear 1 .15s backwards;
}
@keyframes neon-flick{
  0%  {text-shadow:none}
  30% {text-shadow:0 0 2px rgba(240,163,43,.9),0 0 10px rgba(240,163,43,.55),0 0 26px rgba(240,163,43,.38),0 0 64px rgba(240,163,43,.22),0 0 120px rgba(240,163,43,.12)}
  55% {text-shadow:0 0 2px rgba(240,163,43,.5),0 0 8px rgba(240,163,43,.25)}
  100%{text-shadow:0 0 2px rgba(240,163,43,.9),0 0 10px rgba(240,163,43,.55),0 0 26px rgba(240,163,43,.38),0 0 64px rgba(240,163,43,.22),0 0 120px rgba(240,163,43,.12)}
}

@media (max-width:600px){
  .btn{width:100%; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
  .neon{animation:none}
}