/* ===========================================================================
   RIVAESA - shared chrome for /privacy.html, /terms.html and /404.html
   ---------------------------------------------------------------------------
   Rewritten 2026-08-17. The landing page no longer lives here.

   index.html is a self-contained static page: one inline <style> block and
   inline element styles, delivered that way and kept that way. It links this
   sheet for exactly two reasons, and uses none of its selectors:

     1. the three pages above are plain HTML with no styling of their own, and
     2. playtest/live-site.mjs fails the deploy unless the landing links at
        least one SAME-ORIGIN stylesheet (it scans the served CSS for em
        dashes, so an all-inline page would give it nothing to scan).

   The landing's own <style> block sits AFTER that <link>, so where the two
   overlap (body, a, box-sizing) the page's own rules win on order. Nothing
   here targets a class the landing markup actually carries.

   Palette matches the landing so the legal pages do not read as another site.
   playtest/route-split.mjs asserts /404.html renders on rgb(13, 10, 32) and
   that a.btn.primary is clickable, so those two are load bearing.

   No em dashes anywhere, comments included: build/check-landing-text.mjs
   fails the whole web build on one. Use a comma, a colon, or an en dash.
   =========================================================================== */

@font-face{
  font-family:'Cinzel';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('/fonts/cinzel-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Alegreya';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('/fonts/alegreya-latin.woff2') format('woff2');
}
/* Declared and never fetched until a glyph needs it. The legal pages are long
   prose that will grow an <em> sooner or later. Delete this rule AND
   landing/fonts/alegreya-italic-latin.woff2 together if that stops being true. */
@font-face{
  font-family:'Alegreya';
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  src:url('/fonts/alegreya-italic-latin.woff2') format('woff2');
}

:root{
  --void:#0d0a20;
  --deep:#120e2b;
  --edge:#2a2148;

  --gold:#ffc45c;
  --gold-hi:#ffd873;

  --violet:#c58bff;
  --violet-hi:#e2cbff;

  --text:#cfc7e6;
  /* Cleared 4.5:1 against --void before it was written down (6.7:1). Do not
     darken it without re-measuring. */
  --text-dim:#9d92bd;

  --serif:'Alegreya','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --display:'Cinzel','Trajan Pro','Iowan Old Style',Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --shell:1200px;
  --pad:clamp(20px,5vw,40px);
  --r:6px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--serif);
  font-size:clamp(17px,.5vw + 15.6px,19px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.14; margin:0; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:2px; }

/* -- The sticky bar on the legal and 404 pages ---------------------------- */
nav.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:12px;
  padding-inline:max(var(--pad), calc((100% - var(--shell)) / 2 + var(--pad)));
  background:rgba(13,10,32,.86);
  backdrop-filter:blur(12px) saturate(120%);
  border-bottom:1px solid var(--edge);
}
nav.top .brand{
  font-family:var(--display); font-size:20px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet); text-decoration:none; white-space:nowrap;
}
nav.top .brand:hover{ color:var(--violet-hi); }
nav.top .links{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
nav.top .links a{
  font-family:var(--sans); font-size:14px; color:var(--text-dim); text-decoration:none;
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 10px; border-radius:var(--r);
}
nav.top .links a:hover{ color:var(--violet-hi); background:rgba(197,139,255,.1); }

/* -- Buttons. a.btn.primary is clicked by playtest/route-split.mjs on /404. -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:52px; padding:0 26px;
  font-family:var(--sans); font-weight:700; font-size:15px;
  letter-spacing:.055em; text-transform:uppercase; text-decoration:none;
  border-radius:var(--r); border:1px solid transparent;
  transition:filter .16s ease, background .16s ease, border-color .16s ease;
}
.btn.primary{
  color:#1d1206;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 52%,#d99a34);
  border-color:#8a6524;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #6b4c19, 0 10px 22px rgba(6,4,16,.6);
}
.btn.primary:hover{ filter:brightness(1.08); color:#1d1206; }

/* -- Long prose: /privacy.html and /terms.html ---------------------------- */
.prose{ max-width:780px; margin:0 auto; padding:clamp(44px,7vw,72px) var(--pad) clamp(64px,9vw,96px); }
.prose h1{ color:var(--violet-hi); font-size:clamp(31px,4vw,42px); margin:0 0 10px; }
.prose .updated{
  font-family:var(--sans); font-size:13px; letter-spacing:.06em;
  color:var(--text-dim); margin:0 0 36px;
}
.prose h2{ color:var(--violet-hi); font-size:clamp(20px,1.8vw,24px); margin:38px 0 12px; }
.prose p{ color:var(--text); margin:0 0 1em; }
.prose ul{ margin:0 0 1em; padding-left:22px; }
.prose li{ color:var(--text); margin:8px 0; }
.prose li strong, .prose p strong{ color:var(--gold-hi); font-weight:600; }
.prose a{ color:var(--violet); text-underline-offset:.2em; }
.prose a:hover{ color:var(--violet-hi); }

/* -- /404.html ------------------------------------------------------------ */
.notfound{ text-align:center; padding:clamp(72px,12vw,140px) var(--pad); }
.notfound h1{ color:var(--violet-hi); font-size:clamp(64px,12vw,104px); margin:0; letter-spacing:.02em; }
.notfound p{ color:var(--text-dim); font-size:clamp(17px,1.6vw,20px); margin:14px 0 28px; }
.notfound .btn{ margin-bottom:24px; }

/* -- The bare <footer> those three pages share. The landing's own footer
      carries class="site-footer" and is styled inline, so it is excluded. --- */
footer:not(.site-footer){
  padding:40px var(--pad) 64px;
  text-align:center;
  color:var(--text-dim);
  font-family:var(--sans);
  font-size:14px;
  border-top:1px solid var(--edge);
}
footer:not(.site-footer) a{ color:var(--violet); text-decoration:none; }
footer:not(.site-footer) a:hover{ color:var(--violet-hi); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}