/* ============ CursedForge - shared sub-page shell ============ */
/* Terms, Privacy and the press kit all load this. It carries the same
   identity as the landing page (tokens, chiselled basalt ground, rune
   header, ember field, amber-once buttons) but lays out as a document
   rather than a snap slider, because legal text is read, not scrolled
   past. Tokens are copied verbatim from section 9 of
   docs/planning/Color Palette & Mood Board.md, which governs this file. */
:root {
  /* surfaces */
  --cf-obsidian:      #16181D;
  --cf-slate:         #282D37;
  --cf-cavern:        #1A0B2E;
  --cf-forge-ambient: #3D1B0B;
  --cf-bronze:        #A86838;
  --cf-brass:         #D49B35;
  --cf-leather:       #3A2A20;

  /* signal */
  --cf-cyan:          #00FFCC;
  --cf-turquoise:     #00C6FF;
  --cf-amber:         #FF5500;
  --cf-yellow:        #FFA500;
  --cf-violet:        #9D00FF;

  /* status */
  --cf-good:          #8CC773;
  --cf-warn:          #D9B847;
  --cf-bad:           #DB4A38;

  /* text */
  --cf-text:          #E6FFFF;
  --cf-text-body:     #DED4BF;
  --cf-text-dim:      #555C66;

  /* type */
  --cf-display: "Metamorphous", serif;
  --cf-body:    "Gemunu Libre", system-ui, sans-serif;

  /* type scale, 1.25 ratio on a 16px base */
  --t-0: 16px; --t-1: 20px; --t-2: 25px; --t-3: 31px;
  --t-4: 39px; --t-5: 49px; --t-6: 61px;

  --rule: rgba(168,104,56,.35);
  --rule-strong: rgba(168,104,56,.55);
}

*, *::before, *::after { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0;
  color:var(--cf-text-body);
  font:400 18px/1.7 var(--cf-body);
  background:
    radial-gradient(ellipse 60% 40% at 78% -6%, rgba(61,27,11,.55), transparent 70%),
    radial-gradient(ellipse 55% 45% at 4% 22%, rgba(26,11,46,.75), transparent 70%),
    var(--cf-obsidian);
  background-attachment:fixed;
  overflow-x:hidden;
}
/* The same faint chiselled basalt tooth the landing sections carry. */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(168,104,56,.035) 22px 23px);
}
::selection { background:var(--cf-cyan); color:var(--cf-obsidian) }
a { color:var(--cf-cyan); text-underline-offset:3px; transition:color .25s ease-out }
a:hover { color:var(--cf-text) }
strong, b { color:var(--cf-text); font-weight:600 }

/* ---------- ambient ember field ---------- */
.ember-field { position:fixed; inset:0; z-index:1; pointer-events:none }
.ember-field i {
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--cf-amber); opacity:0; animation:rise 22s linear infinite;
}
.ember-field i:nth-child(1) { left:9%;  animation-delay:0s;  animation-duration:26s }
.ember-field i:nth-child(2) { left:24%; animation-delay:6s;  animation-duration:31s; background:var(--cf-yellow) }
.ember-field i:nth-child(3) { left:41%; animation-delay:13s; animation-duration:27s }
.ember-field i:nth-child(4) { left:63%; animation-delay:3s;  animation-duration:34s }
.ember-field i:nth-child(5) { left:81%; animation-delay:17s; animation-duration:29s; background:var(--cf-yellow) }
.ember-field i:nth-child(6) { left:93%; animation-delay:9s;  animation-duration:24s }

@keyframes rise {
  0%   { transform:translateY(0) translateX(0); opacity:0 }
  10%  { opacity:.45 }
  70%  { opacity:.3 }
  100% { transform:translateY(-104vh) translateX(18px); opacity:0 }
}
@keyframes runePulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }

/* ---------- header ---------- */
.skip-link {
  position:absolute; left:-100rem; top:8px; z-index:120; padding:9px 14px;
  background:var(--cf-cyan); color:var(--cf-obsidian); font-weight:600;
  text-decoration:none;
}
.skip-link:focus { left:8px }

.site-header {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px 26px; flex-wrap:wrap;
  /* The header runs full bleed, but its contents sit on the same column as
     the document below it, so the brand lines up with the title. */
  padding:16px max(26px, calc((100% - 848px) / 2));
  background:rgba(22,24,29,.94);
  border-bottom:1px solid var(--rule);
  backdrop-filter:blur(8px);
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none }
.brand-mark {
  width:14px; height:14px; background:var(--cf-cyan);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  animation:runePulse 2s ease-in-out infinite;
}
.brand-name {
  font-family:var(--cf-display); font-size:var(--t-1);
  letter-spacing:.1em; color:var(--cf-text);
}
.brand-name em { font-style:normal; color:var(--cf-amber) }

.site-nav { display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.site-nav a {
  font-weight:600; font-size:14px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--cf-cyan); padding-bottom:3px;
  border-bottom:1px solid var(--rule-strong);
  transition:color .25s ease-out, border-color .25s ease-out;
}
.site-nav a:hover { color:var(--cf-text); border-color:var(--cf-brass) }
.site-nav a[aria-current="page"] { color:var(--cf-text); border-color:var(--cf-amber) }

/* ---------- page head ---------- */
main { position:relative; z-index:2; max-width:900px; margin:0 auto; padding:0 26px 40px }
.page-head { padding:64px 0 34px; border-bottom:1px solid var(--rule) }
.rune { display:flex; gap:9px; height:22px; margin-bottom:12px }
.rune i {
  width:4px; height:100%; background:var(--cf-cyan); border-radius:2px;
  opacity:.85; animation:runePulse 2s ease-in-out infinite;
}
.rune i:nth-child(2) { height:130%; animation-delay:.18s }
.rune i:nth-child(3) { animation-delay:.36s }
.eyebrow {
  margin:0 0 10px; color:var(--cf-cyan);
  font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
}
h1, h2, h3 {
  margin:0; color:var(--cf-text);
  font-family:var(--cf-display); font-weight:400; line-height:1.15; letter-spacing:.01em;
}
h1 { font-size:clamp(var(--t-4), 6vw, var(--t-6)); animation:fadeUp .3s ease-out both }
.updated {
  margin:16px 0 0; color:var(--cf-text-dim); font-size:15px;
  letter-spacing:.06em; text-transform:uppercase;
}
.updated strong { color:var(--cf-brass); font-weight:600 }
.status-chip {
  display:inline-block; margin:0 0 18px; padding:6px 14px;
  border:1px solid var(--rule-strong); border-radius:3px;
  font-weight:600; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cf-brass);
}

/* ---------- document body ---------- */
p { max-width:68ch; margin:0 0 16px }
h2 { margin:0 0 16px; font-size:var(--t-3) }
h3 { margin:26px 0 8px; font-size:var(--t-1); color:var(--cf-brass) }
/* The header is sticky, so a contents link must stop clear of it rather than
   parking its heading underneath. */
main section, main [id] { scroll-margin-top:90px }
main section { padding:40px 0; border-bottom:1px solid var(--rule) }
main section:last-of-type { border-bottom:0 }
ul, ol { max-width:68ch; margin:0 0 16px; padding-left:24px }
li { margin:0 0 8px }
li::marker { color:var(--cf-bronze) }
code {
  padding:1px 6px; border:1px solid var(--rule); border-radius:3px;
  background:rgba(40,45,55,.6); color:var(--cf-cyan); font-size:.9em;
}
address {
  display:block; max-width:34ch; margin:0 0 16px; padding:16px 18px;
  border:1px solid var(--rule); border-left:2px solid var(--cf-bronze);
  border-radius:3px; background:rgba(40,45,55,.45);
  font-style:normal; line-height:1.6;
}
address strong { display:block; margin-bottom:4px }

/* The opening plain-language summary, and the conduit that marks it. */
.legal-summary {
  margin:28px 0 0; padding:22px 24px;
  border:1px solid var(--rule); border-left:2px solid var(--cf-cyan);
  border-radius:3px; background:rgba(40,45,55,.55);
}
.legal-summary p:last-child { margin-bottom:0 }
.legal-summary p { font-size:var(--t-0) }

/* A ghost control, the only button shape the sub-pages use in the flow of
   text. Amber is reserved for the one affirmative in the consent banner. */
.button {
  display:inline-block; padding:12px 24px;
  border:1px solid var(--rule-strong); border-radius:3px;
  background:transparent; color:var(--cf-cyan);
  font:600 14px/1 var(--cf-body); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:color .25s ease-out, border-color .25s ease-out, background .25s ease-out;
}
.button:hover { color:var(--cf-text); border-color:var(--cf-brass); background:rgba(212,155,53,.12) }
.choice-control { margin-top:22px }

/* ---------- contents ---------- */
.toc {
  margin:28px 0 0; padding:22px 24px;
  border:1px solid var(--rule); border-radius:3px;
  background:rgba(40,45,55,.35);
}
.toc h2 { margin:0 0 12px; font-size:var(--t-2) }
.toc ol {
  max-width:none; margin:0; padding-left:22px;
  columns:2; column-gap:36px;
}
.toc li { break-inside:avoid; margin:0 0 7px; font-size:var(--t-0) }
.toc a { text-decoration:none; border-bottom:1px solid transparent }
.toc a:hover { border-bottom-color:var(--cf-brass) }

/* ---------- footer ---------- */
.site-foot {
  position:relative; z-index:2; max-width:900px; margin:0 auto;
  padding:32px 26px 64px; border-top:1px solid var(--rule);
  color:var(--cf-text-dim); font-size:14px;
}
.site-foot p { margin:0 0 6px }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; margin-top:16px }
.footer-links a,
.footer-links button {
  font:600 13px/1 var(--cf-body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--cf-cyan); text-decoration:none; padding:0 0 3px;
  background:transparent; border:0; border-bottom:1px solid var(--rule-strong);
  cursor:pointer; transition:color .25s ease-out, border-color .25s ease-out;
}
.footer-links a:hover,
.footer-links button:hover { color:var(--cf-text); border-color:var(--cf-brass) }

/* ---------- optional analytics consent ---------- */
/* Styled as a landing-page card: slate ground, bronze edge, a cyan conduit
   down the leading edge, and amber used once for the single affirmative. */
.consent-banner {
  position:fixed; left:auto; right:20px; bottom:20px; z-index:100;
  width:min(430px, calc(100vw - 40px)); padding:22px 24px;
  border:1px solid var(--rule-strong); border-radius:3px;
  background:rgba(22,24,29,.97);
  color:var(--cf-text-body);
  animation:consentIn .3s ease-out both;
}
.consent-banner::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--cf-cyan);
}
.consent-banner h2 {
  margin:0 0 10px; font-size:var(--t-2); line-height:1.2;
}
.consent-banner p { max-width:none; margin:0 0 18px; font-size:15px; line-height:1.55 }
.consent-actions { display:flex; gap:12px; flex-wrap:wrap }
.consent-actions button {
  flex:1 1 auto; padding:12px 20px; border:1px solid transparent; border-radius:3px;
  font:600 14px/1 var(--cf-body); letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:background .25s ease-out, color .25s ease-out,
    border-color .25s ease-out, transform .2s ease-out;
}
.consent-actions .consent-allow { background:var(--cf-amber); color:var(--cf-obsidian) }
.consent-actions .consent-allow:hover { background:var(--cf-yellow); transform:translateY(-2px) }
.consent-actions .consent-decline { background:transparent; border-color:var(--rule-strong); color:var(--cf-cyan) }
.consent-actions .consent-decline:hover { border-color:var(--cf-brass); background:rgba(212,155,53,.12) }
.consent-banner[hidden] { display:none }

@keyframes consentIn { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, .consent-banner:focus-visible {
  outline:2px solid var(--cf-cyan); outline-offset:3px; border-radius:3px;
}

/* ---------- responsive ---------- */
@media (max-width:760px) {
  body { font-size:17px }
  .site-header { padding:14px 18px; gap:12px }
  .site-header .brand-name { font-size:var(--t-0) }
  .site-nav { gap:16px }
  .site-nav a { font-size:13px; letter-spacing:.14em }
  main { padding:0 18px 32px }
  .page-head { padding:40px 0 28px }
  main section { padding:32px 0 }
  .toc ol { columns:1 }
  .site-foot { padding:26px 18px 48px }
  .consent-banner {
    right:12px; left:12px; bottom:12px; width:auto; padding:20px;
  }
  .consent-actions button { flex:1 1 100% }
}

/* ---------- reduced motion ---------- */
/* A glow loop is exactly the sort of thing that hurts people. Drop all of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html { scroll-behavior:auto }
  .ember-field { display:none }
}

/* ---------- print ---------- */
/* Legal text gets printed and filed. Give it the page, not the furniture. */
@media print {
  body { background:var(--cf-obsidian) }
  body::before, .ember-field, .site-header, .consent-banner, .footer-links { display:none }
  main, .site-foot { max-width:none; padding:0 }
  main section { break-inside:auto; padding:20px 0 }
  .toc ol { columns:1 }
}