/* ==========================================================================
   GENERATION 3 ACADEMY — the public site.
   Deliberately NOT the game's deep-ocean theme. This is warm, light and
   architectural: parchment, antique gold, tilework teal.

   All ornament is geometry, arch and pattern — the Islamic visual tradition —
   drawn as SVG. No depiction of any living being anywhere, which is a hard
   project rule and also why nothing here is a photograph.
   ========================================================================== */
/* Self-hosted. Was fonts.googleapis.com, which handed Google an IP address on
   every page load. Same typefaces, no third-party request. See
   assets/fonts/LICENSES.md. */
@import url('assets/fonts/site.css');

:root {
  --parchment:  #faf7f0;
  --sand:       #f3ede1;
  --sand-deep:  #e8dfcc;
  --ink:        #1b1a16;
  --ink-soft:   #4f4838;
  --ink-faint:  #6f6a5a;   /* was #8b8471 -- 3.5:1, below AA for the small print it is used on */
  --gold:       #a8822a;
  --gold-light: #d6b25a;
  /* The brand gold reads at 3.3:1 on parchment -- fine for a rule, a border or
     a 36px numeral, but below the 4.5:1 that WCAG AA asks of body-sized text.
     --gold-ink is the same hue taken down to 5.2:1 on the darkest background it
     is ever set on, and is what every piece of GOLD TEXT uses. --gold stays
     what it always was and is now only ever ornament. */
  --gold-ink:   #795e1e;
  --gold-glow:  rgba(168,130,42,.16);
  --teal:       #1d5a56;
  --teal-light: #2a736d;   /* was #2f8079 -- 4.4:1, just under AA */
  --line:       rgba(168,130,42,.22);
  --shadow:     0 18px 50px rgba(40,32,12,.10);
  --font-head:  'Amiri', Georgia, serif;
  --font-body:  'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- the ornament ----------
   An eight-point khatim star, the most common motif in Islamic tiling. Drawn
   once as an SVG data URI and tiled, so it costs about a kilobyte at any size. */
.pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23a8822a' stroke-width='1' opacity='.5'%3E%3Cpath d='M40 4 48 20 66 14 60 32 76 40 60 48 66 66 48 60 40 76 32 60 14 66 20 48 4 40 20 32 14 14 32 20Z'/%3E%3Ccircle cx='40' cy='40' r='11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ==========================================================================
   Keyboard access.

   The reset at the top of this file zeroes margin and padding on everything,
   and several controls are custom-painted <button>s and <a>s. Between them the
   site had no focus indicator it could rely on: a person navigating by Tab had
   to guess where they were. These two rules are the whole fix.

   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind but a Tab key always does.
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On the dark band the teal ring disappears into the background. */
.band-dark :focus-visible, .cta :focus-visible, .quote-band :focus-visible {
  outline-color: var(--gold-light);
}

/* Available to screen readers, invisible on screen. Used for <caption> on the
   policy tables: a caption announces what a table is before a screen-reader
   user commits to reading it, but the heading above already says so visually. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Skip link. First thing in the tab order on every page, invisible until it is
   focused. Without it, reaching the main content past a nav with four dropdowns
   and fourteen links costs a keyboard or switch user fifteen presses on every
   single page. */
.skip-link {
  position: absolute; left: 1rem; top: -100vh; z-index: 200;
  background: var(--teal); color: #fff; padding: .8rem 1.3rem;
  font-size: .9rem; font-weight: 600; text-decoration: none; border-radius: 3px;
  box-shadow: 0 8px 24px rgba(40,32,12,.28);
}
.skip-link:focus { top: 1rem; }

/* A target for it. Never draw a focus ring around the whole page. */
#main:focus { outline: none; }

/* prefers-reduced-motion is honoured in site.js for the reveals, but the CSS
   carries its own transitions and one infinite animation. Nothing here should
   move for someone who has asked the OS for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.6rem; }
.wrap-narrow { max-width: 760px; }

section { position: relative; padding: 7rem 0; }
@media (max-width: 700px) { section { padding: 4.5rem 0; } }

.eyebrow {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold-ink);
  margin-bottom: 1rem;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--ink); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 1.4rem; letter-spacing: -.01em; }
h3 { font-size: 1.4rem; margin-bottom: .5rem; }
p  { color: var(--ink-soft); margin-bottom: 1.1rem; }
p.lede { font-size: clamp(1.08rem, 2vw, 1.3rem); color: var(--ink); line-height: 1.7; }
strong { color: var(--ink); font-weight: 600; }

/* a hairline rule with a diamond at its centre — a common manuscript device */
.rule { display: flex; align-items: center; gap: .8rem; margin: 2.4rem 0; }
.rule::before, .rule::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.rule i { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .95rem 1.9rem; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all .25s cubic-bezier(.4,0,.2,1);
  letter-spacing: .01em;
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #fff; box-shadow: 0 8px 24px var(--gold-glow);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(168,130,42,.3); }
.btn-line { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--gold); background: rgba(168,130,42,.06); }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.06); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.75); }

/* ---------- header ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.8rem;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.is-stuck {
  background: rgba(250,247,240,.94); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line); padding: .7rem 1.8rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: 0 0 auto; }
.brand-text {
  font-family: var(--font-head); font-weight: 700; font-size: 1.06rem;
  color: var(--ink); letter-spacing: .01em; white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
  font-size: .87rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; transition: color .2s;
}
.nav-links a:hover { color: var(--gold-ink); }

/* ---- dropdown menus ---- */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .5rem 0;
}
.nav-dropdown-btn {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: none; border: none; font-family: inherit; font-size: .87rem;
  font-weight: 500; color: var(--ink-soft); padding: .2rem 0;
  text-decoration: none; transition: color .2s;
}
.nav-dropdown-btn:hover, .nav-dropdown:hover .nav-dropdown-btn { color: var(--gold-ink); }
.nav-arrow { font-size: .65rem; transition: transform .25s ease; display: inline-block; opacity: .7; }
.nav-dropdown:hover .nav-arrow { transform: rotate(180deg); color: var(--gold); opacity: 1; }

.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(0);
  min-width: 220px; background: rgba(250,247,240,.98); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 6px; padding: .6rem .4rem;
  box-shadow: 0 16px 36px rgba(40,32,12,.14); opacity: 0; pointer-events: none;
  visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 100;
}

/* Invisible hover bridge spanning between the trigger and the menu box */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
  display: block;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-active .nav-dropdown-menu {
  opacity: 1; pointer-events: auto; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block; padding: .55rem .9rem; font-size: .84rem; font-weight: 500;
  color: var(--ink-soft); border-radius: 4px; transition: all .16s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: rgba(168,130,42,.08); color: var(--gold-ink); transform: translateX(3px);
}
.nav-dropdown-menu a.is-active {
  background: rgba(168,130,42,.12); color: var(--gold-ink); font-weight: 600;
}
.nav-dropdown-divider { height: 1px; background: var(--line); margin: .4rem 0; }


/* ---------- hero ---------- */
.hero {
  min-height: 100vh; display: grid; place-items: center; text-align: center;
  padding: 8rem 0 5rem; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(214,178,90,.20), transparent 62%),
    linear-gradient(180deg, var(--sand) 0%, var(--parchment) 62%);
}
/* the pattern drifts upward behind the arch — the only motion on first paint */
.hero-pattern {
  position: absolute; inset: -10% 0 0; opacity: .16; pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 34%, #000 12%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 34%, #000 12%, transparent 72%);
  animation: drift 34s linear infinite;
}
@keyframes drift { to { background-position: 80px 160px; } }

.hero-inner { position: relative; z-index: 2; }
.hero-arch { width: min(300px, 62vw); margin: 0 auto 1.6rem; display: block; }
.hero h1 {
  font-size: clamp(2.6rem, 7.6vw, 5.2rem); line-height: 1.02;
  letter-spacing: -.015em; margin-bottom: .5rem;
}
/* Gold, but --gold-ink: at the small end of the clamp this is 20px, and 20px
   non-bold is "normal" text to WCAG, not "large" -- so the ornament gold would
   have failed on a phone and passed on a desktop. */
.hero-sub {
  font-family: var(--font-head); font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.85rem); color: var(--gold-ink); margin-bottom: 1.6rem;
}
.hero p { max-width: 60ch; margin: 0 auto 1rem; }
.hero-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

.scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); display: flex; flex-direction: column;
  align-items: center; gap: .6rem; z-index: 2;
}
.scroll-cue span { width: 1px; height: 42px; background: linear-gradient(180deg, var(--gold), transparent); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .10s; }
.reveal-d2 { transition-delay: .20s; }
.reveal-d3 { transition-delay: .30s; }
.reveal-d4 { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-pattern, .scroll-cue span { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- bands ---------- */
.band-sand { background: var(--sand); }
.band-sand::before, .band-sand::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line);
}
.band-sand::before { top: 0; } .band-sand::after { bottom: 0; }

.band-dark {
  background: linear-gradient(165deg, #16403d 0%, #0f2c2a 60%, #0c2321 100%);
  color: #e8e2d2; overflow: hidden;
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: rgba(232,226,210,.82); }
.band-dark .eyebrow { color: var(--gold-light); }
.band-dark strong { color: #fff; }
.band-dark .pattern { opacity: .10; }

/* ---------- the gap / stats ---------- */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; gap: 4.5rem; } }

.stat-stack { display: grid; gap: 1rem; }
.stat {
  background: var(--parchment); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  padding: 1.4rem 1.6rem; box-shadow: var(--shadow);
}
.stat b { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--teal); line-height: 1.2; }
.stat span { font-size: .92rem; color: var(--ink-soft); }

/* ---------- pull quote ---------- */
.quote-band { text-align: center; }
.quote-band blockquote {
  font-family: var(--font-head); font-size: clamp(1.4rem, 3.6vw, 2.4rem);
  line-height: 1.45; color: #fff; max-width: 22ch; margin: 0 auto; position: relative; z-index: 2;
}
.quote-band .mark { font-size: 4rem; color: var(--gold-light); line-height: .4; display: block; margin-bottom: 1.4rem; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1.4rem; }
@media (min-width: 780px)  { .cards.c3 { grid-template-columns: repeat(3, 1fr); } .cards.c2 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--parchment); border: 1px solid var(--line);
  padding: 2rem 1.7rem; box-shadow: var(--shadow); position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(40,32,12,.14); }
.card-num {
  font-family: var(--font-head); font-size: .82rem; letter-spacing: .2em;
  color: var(--gold-ink); margin-bottom: .9rem; display: block;
}
.card p:last-child { margin-bottom: 0; }
.band-dark .card { background: rgba(255,255,255,.05); border-color: rgba(214,178,90,.25); box-shadow: none; }

/* ---------- the wisdom ladder ---------- */
.ladder { display: grid; gap: 0; margin-top: 2.5rem; }
.rung {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 1.4rem;
  padding: 1.7rem 0; border-top: 1px solid var(--line); align-items: start;
}
.rung:last-child { border-bottom: 1px solid var(--line); }
/* The step numeral is content, not decoration -- it is how a reader refers to
   "stage 3". At opacity .45 the gold fell to roughly 1.8:1, so before the reveal
   fired it was very nearly invisible. .7 is still clearly "not yet arrived". */
.rung-step {
  font-family: var(--font-head); font-size: 2.1rem; color: var(--gold-ink);
  line-height: 1; opacity: .7; transition: opacity .5s ease, transform .5s ease;
}
.rung.is-in .rung-step { opacity: 1; transform: translateX(3px); }
.rung-term { font-family: var(--font-head); font-size: 1.35rem; color: var(--ink); margin-bottom: .3rem; }
.rung-term em { font-style: normal; color: var(--gold-ink); }
.rung p { margin: 0; font-size: .97rem; }

/* ---------- grade progression ---------- */
.track { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
@media (min-width: 820px) { .track { grid-template-columns: repeat(3, 1fr); } }
.stage { padding: 1.8rem 1.6rem; background: var(--parchment); border: 1px solid var(--line); position: relative; }
.stage-grades { font-family: var(--font-head); font-size: 1.5rem; color: var(--teal); margin-bottom: .3rem; }
.stage-name { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .8rem; }
.arrow-line {
  margin-top: 2.2rem; text-align: center; font-family: var(--font-head);
  font-size: clamp(.9rem, 2.2vw, 1.15rem); color: var(--teal); line-height: 2;
}
.arrow-line span { color: var(--gold); margin: 0 .5rem; }

/* ---------- the vessels sequence (the pinned "movie" beat) ---------- */
.seq { display: grid; gap: 2.6rem; }
@media (min-width: 940px) { .seq { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.seq-step { text-align: center; }
.seq-art { width: 100%; max-width: 190px; margin: 0 auto 1.4rem; display: block; }
.seq-step h3 { color: #fff; margin-bottom: .6rem; }
.seq-ar { font-family: var(--font-head); font-size: 1.5rem; color: var(--gold-light); direction: rtl; margin-bottom: .8rem; }

.ayah {
  text-align: center; max-width: 820px; margin: 0 auto;
  padding: 2.2rem 1.6rem; border-top: 1px solid rgba(214,178,90,.3); border-bottom: 1px solid rgba(214,178,90,.3);
}
.ayah-ar {
  font-family: var(--font-head); direction: rtl; line-height: 2.1;
  font-size: clamp(1.15rem, 3vw, 1.7rem); color: #fff; margin-bottom: 1rem;
}
.ayah-ref { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }

/* ---------- narration / hadith block ---------- */
.narration {
  background: var(--sand); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  padding: 2rem 1.9rem; margin: 2rem 0;
}
.narration-ar { font-family: var(--font-head); direction: rtl; font-size: 1.35rem; line-height: 2.1; color: var(--ink); margin-bottom: 1rem; }
.narration-en { font-family: var(--font-head); font-style: italic; font-size: 1.08rem; color: var(--ink); margin-bottom: .8rem; }
.narration-src { font-size: .82rem; color: var(--ink-faint); }
.narration-note {
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: .89rem; color: var(--ink-faint); line-height: 1.65;
}

/* ---------- final call ---------- */
.cta { text-align: center; }
.cta h2 { color: #fff; }
.cta-lede { max-width: 54ch; margin: 0 auto 2.2rem; font-size: 1.1rem; }
.cta-tagline {
  font-family: var(--font-head); font-style: italic; color: var(--gold-light);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.9; margin-bottom: 2.4rem;
}

/* ---------- footer ---------- */
.foot {
  padding: 3rem 0; border-top: 1px solid var(--line); background: var(--sand);
  font-size: .86rem; color: var(--ink-faint); text-align: center;
}
.foot a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { text-decoration: underline; }
.foot-note { margin-top: .6rem; font-size: .8rem; }

/* ==========================================================================
   Multi-page shell — menu, page headers, link cards
   ========================================================================== */

/* Inner pages have no hero, so the fixed nav would sit on top of the heading. */
body.has-page-top .page-head { padding-top: 8.5rem; }

.nav-links a.is-current { color: var(--gold-ink); }
.nav-links a:not(.btn) { position: relative; padding: .3rem 0; }
.nav-links a.is-current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold);
}

/* ---- the hamburger ---- */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 34px; padding: 7px 6px; margin-left: auto;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav { flex-wrap: wrap; }
  .nav-links {
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .nav-links.is-open { max-height: 38rem; overflow-y: auto; }
  .nav-links a:not(.btn), .nav-dropdown-btn {
    display: flex; justify-content: space-between; align-items: center;
    padding: .9rem .2rem; border-bottom: 1px solid var(--line); font-size: .96rem;
    width: 100%;
  }
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown-menu {
    position: static; transform: none; box-shadow: none; border: none;
    border-left: 2px solid var(--gold); border-radius: 0; padding: .2rem 0 .4rem .8rem;
    margin: .2rem 0 .5rem; background: rgba(168,130,42,.03); opacity: 1; pointer-events: auto;
    visibility: visible; display: none;
  }
  .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
  .nav-dropdown.is-open .nav-arrow { transform: rotate(180deg); }
  .nav-dropdown-menu a { padding: .5rem .4rem; font-size: .88rem; border-bottom: none; }
  .nav-links .btn { margin: .9rem 0 .4rem; justify-content: center; }
  .nav.is-stuck, .nav-links.is-open { background: rgba(250,247,240,.98); backdrop-filter: blur(14px); }
}

/* ---- page header for inner pages ---- */
.page-head {
  position: relative; padding: 8.5rem 0 3.5rem; text-align: center; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 70% at 50% 0%, rgba(214,178,90,.20), transparent 62%),
    linear-gradient(180deg, var(--sand) 0%, var(--parchment) 78%);
  border-bottom: 1px solid var(--line);
}
.page-head-pattern {
  position: absolute; inset: 0; opacity: .13; pointer-events: none;
  mask-image: radial-gradient(ellipse 76% 70% at 50% 22%, #000 8%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 76% 70% at 50% 22%, #000 8%, transparent 74%);
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); margin-bottom: .8rem; letter-spacing: -.01em; }
.page-head .lede { margin: 0 auto; max-width: 58ch; }

/* ---- interactive section switcher (for About and single-section views) ---- */
.section-switcher-bar {
  background: var(--sand); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; position: sticky; top: 62px; z-index: 40;
  box-shadow: 0 4px 16px rgba(40,32,12,.05);
}
.section-switcher-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.section-switcher-label {
  font-size: .8rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-ink); display: flex; align-items: center; gap: .5rem;
}
.section-tabs {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.section-tab-btn {
  background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem 1.1rem; font-family: var(--font-body); font-size: .84rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; transition: all .2s ease;
  text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.section-tab-btn:hover {
  background: #fff; color: var(--gold-ink); border-color: var(--gold-ink); transform: translateY(-1px);
}
.section-tab-btn.is-active {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  /* Was #fff, which is 2.0:1 against the top of this gradient -- the SELECTED
     tab was the hardest text on the page to read. Ink is 8.6:1 there. */
  color: var(--ink); border-color: transparent; box-shadow: 0 4px 12px var(--gold-glow);
}
.section-dropdown-select {
  display: none; padding: .55rem 1.1rem; border-radius: 4px; border: 1px solid var(--line);
  background: #fff; font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  color: var(--ink); cursor: pointer; width: 100%; max-width: 320px;
}
@media (max-width: 780px) {
  .section-tabs { display: none; }
  .section-dropdown-select { display: block; }
}

/* ---- about section visibility and transition ---- */
.about-section {
  transition: opacity .35s ease, transform .35s ease;
}
.about-section.is-hidden {
  display: none !important;
}
.about-section-nav-footer {
  margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}

/* ---- cards that are links ---- */
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link h3 { transition: color .25s; }
.card-link:hover h3 { color: var(--gold-ink); }
.card-go {
  display: inline-block; margin-top: 1rem; font-size: .84rem; font-weight: 600;
  color: var(--gold-ink); letter-spacing: .01em;
}


/* ==========================================================================
   LEGAL PAGES — privacy, terms, cookies, refunds.

   A policy is read differently from a brochure: people arrive looking for one
   clause, not for a scroll-through experience. So these pages drop the reveal
   choreography and the 7rem section rhythm, number every section so a reader
   can cite "privacy §4", and set a 66ch measure.
   ========================================================================== */

.legal { padding: 3rem 0 5rem; }
.legal-wrap { max-width: 50rem; }

/* The status banner. These documents are drafts until a lawyer and the entity
   details land, and saying so at the top is both honest and the thing that
   stops them being relied on before they are ready. */
.legal-status {
  background: rgba(168,67,26,.07); border: 1px solid rgba(168,67,26,.4);
  border-left: 3px solid #a8431a; color: #7d3213;
  padding: 1rem 1.2rem; margin-bottom: 2.4rem; border-radius: 3px; font-size: .92rem;
}
.legal-status strong { color: #6b2a10; }
.legal-status p { color: inherit; margin-bottom: .6rem; }
.legal-status p:last-child { margin-bottom: 0; }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: .3rem 1.6rem;
  font-size: .78rem; color: var(--ink-faint);
  border-bottom: 2px solid var(--line); padding-bottom: 1.6rem; margin-bottom: 1rem;
}

/* Table of contents. A policy without one is a policy nobody reads twice. */
.legal-toc { background: var(--sand); border: 1px solid var(--line); padding: 1.4rem 1.6rem; margin: 2rem 0 1rem; }
.legal-toc h2 { font-size: .78rem; font-family: var(--font-body); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .9rem; }
.legal-toc ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal-toc li { font-size: .9rem; margin-bottom: .4rem; break-inside: avoid; }
.legal-toc a { color: var(--teal); text-decoration: none; text-underline-offset: 3px; }
.legal-toc a:hover { text-decoration: underline; }

.legal section { padding: 2.4rem 0; border-bottom: 1px solid var(--line); }
.legal section:last-of-type { border-bottom: 0; }
.legal h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom: 1rem;
  display: flex; gap: .9rem; align-items: baseline; scroll-margin-top: 6rem;
}
.legal h2 .sn { font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  color: var(--gold-ink); flex: none; }
.legal h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 1.6rem 0 .5rem; }
.legal p, .legal li { max-width: 66ch; }
.legal ul, .legal ol.legal-list { margin: 0 0 1.1rem 0; padding-left: 1.3rem; }
.legal li { margin-bottom: .45rem; color: var(--ink-soft); }
.legal a { color: var(--teal); text-underline-offset: 3px; }

/* Callouts: the paragraphs a parent must not skim past. */
.legal-note {
  background: var(--sand); border: 1px solid var(--line); border-left: 3px solid var(--teal);
  padding: 1.1rem 1.3rem; margin: 0 0 1.2rem;
}
.legal-note.warn { border-left-color: #a8431a; background: rgba(168,67,26,.06); }
.legal-note p:last-child { margin-bottom: 0; }
.legal-note .lbl {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .45rem;
}
.legal-note.warn .lbl { color: #a8431a; }

/* A wide table on a phone must scroll inside its own box, never make the page
   scroll sideways. */
.legal-table-scroll { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--line); background: var(--parchment); }
.legal table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 30rem; }
.legal th, .legal td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal thead th {
  font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom: 2px solid var(--line);
}
.legal tbody tr:last-child td { border-bottom: 0; }
.legal td:first-child { font-weight: 600; color: var(--ink); }

/* The two-column "we store / we do not store" pair. */
.legal-cols { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0 0 1.2rem; }
@media (min-width: 640px) { .legal-cols { grid-template-columns: 1fr 1fr; } }
.legal-cols > div { background: var(--parchment); border: 1px solid var(--line); padding: 1.1rem 1.2rem; }
.legal-cols h3 { margin-top: 0; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.legal-cols ul { margin-bottom: 0; }
.legal-cols li { font-size: .89rem; }

/* Cross-links between the four documents, at the foot of each. */
.legal-siblings { margin-top: 3rem; padding-top: 1.6rem; border-top: 2px solid var(--line); }
.legal-siblings h2 { font-size: .78rem; font-family: var(--font-body); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .9rem; }
.legal-siblings ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.legal-siblings li { margin: 0; }

/* Footer link row, added when the legal pages were. */
.foot-links {
  margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem 1.2rem; font-size: .8rem;
}