/* ==========================================================================
   home.css — the front page only.

   Adapted from the approved BicoGuide prototype. Three changes were made
   for the live site:

   1. Type. The prototype used Georgia. The site already loads Cinzel and
      Alegreya on every page, so the front page uses the same faces at no
      extra network cost - and it matches the concept art better than
      Georgia did.
   2. Bilingual. Same [data-lang] convention and the same 'bicoLang'
      storage key as the rest of the site, so a choice made here survives
      into the codex, the map and the feed.
   3. A records band. The prototype's four generic "feature" tiles become
      the six real tools, which is the thing the front page exists to
      show off.

   Art is not baked into the layout. Any SVG or the hero plate can be
   replaced without touching this file, as long as filenames hold.
   ========================================================================== */

:root {
  --ink: #07111b;
  --ink-2: #0b1723;
  --ink-3: #112335;
  --gold: #c99645;
  --gold-bright: #f0c875;
  --gold-soft: #aa7b36;
  --paper: #d9bc83;
  --paper-light: #ebd4a5;
  --paper-dark: #9f7744;
  --text: #f4ead7;
  --text-dim: #c8baa0;
  --shadow: 0 18px 50px rgba(0,0,0,.42);
  --max: 1510px;

  --display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --body: 'Alegreya', Georgia, 'Times New Roman', serif;
  --ui: 'Alegreya Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -20%, rgba(35,75,105,.28), transparent 42rem),
    #040b12;
  font-family: var(--body);
}

/* ==========================================================================
   THE SKY BESIDE THE PAGE

   The frame is centred and capped at 1600px, so on a wide screen there is
   a band of empty background down each side. This fills it with a drifting
   starfield.

   Three fixed layers, each with its own tile size, its own drift speed and
   its own twinkle period, so the repeat never reads and the layers fall out
   of sync with each other. Each drift moves by exactly one tile, which makes
   the loop seamless.

   No canvas and no JavaScript: these are CSS animations on background
   position and opacity, which the compositor handles, so nothing runs on
   the main thread. The reduced-motion block at the foot of this file stops
   them dead - the stars stay, they simply hold still.

   The layers are fixed and full-bleed; the frame sits above them on
   z-index 1 and hides the middle. What you see is the sides.
   ========================================================================== */
body::before,
body::after,
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
}

/* fine dust, drifting up */
body::before {
  background-image:
    radial-gradient(1.4px 1.4px at 40px 60px,   rgba(226,238,255,.95) 50%, transparent 51%),
    radial-gradient(1px 1px     at 190px 130px, rgba(255,244,220,.75) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 100px 230px, rgba(226,238,255,.80) 50%, transparent 51%),
    radial-gradient(.9px .9px   at 250px 40px,  rgba(248,192,226,.70) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 20px 165px,  rgba(226,238,255,.72) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 275px 195px, rgba(255,244,220,.68) 50%, transparent 51%),
    radial-gradient(.9px .9px   at 150px 285px, rgba(226,238,255,.62) 50%, transparent 51%);
  background-size:
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px;
  animation: sky-drift-a 240s linear infinite, sky-twinkle-a 6.5s ease-in-out infinite;
}

/* brighter, sparser, drifting diagonally */
body::after {
  background-image:
    radial-gradient(2px 2px     at 90px 140px,  rgba(255,248,230,1)   50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 380px 300px, rgba(214,232,255,.90) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 240px 470px, rgba(248,192,226,.85) 50%, transparent 51%);
  background-size: 520px 520px, 520px 520px, 520px 520px;
  animation: sky-drift-b 420s linear infinite, sky-twinkle-b 9.5s ease-in-out infinite;
}

/* far haze, barely moving */
html::before {
  background-image:
    radial-gradient(.8px .8px at 70px 190px,  rgba(200,220,255,.55) 50%, transparent 51%),
    radial-gradient(.8px .8px at 300px 90px,  rgba(200,220,255,.45) 50%, transparent 51%),
    radial-gradient(.7px .7px at 180px 340px, rgba(226,238,255,.40) 50%, transparent 51%),
    radial-gradient(.9px .9px at 390px 260px, rgba(255,244,220,.42) 50%, transparent 51%);
  background-size: 420px 420px, 420px 420px, 420px 420px, 420px 420px;
  animation: sky-drift-c 620s linear infinite, sky-twinkle-c 13s ease-in-out infinite;
}

@keyframes sky-drift-a {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 -300px, 0 -300px, 0 -300px, 0 -300px,
                              0 -300px, 0 -300px, 0 -300px; }
}
@keyframes sky-drift-b {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -520px -520px, -520px -520px, -520px -520px; }
}
@keyframes sky-drift-c {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 420px -420px, 420px -420px, 420px -420px, 420px -420px; }
}
@keyframes sky-twinkle-a { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sky-twinkle-b { 0%, 100% { opacity: .40; } 50% { opacity: .95; } }
@keyframes sky-twinkle-c { 0%, 100% { opacity: .70; } 45% { opacity: 1; } }

a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

/* the site-wide bilingual convention */
.bico-lang-fr [data-lang='en'],
.bico-lang-en [data-lang='fr'] { display: none; }

.page-shell {
  width: min(calc(100% - 24px), 1600px);
  z-index: 1;
  margin: 12px auto;
  background:
    /* near stars */
    radial-gradient(1.7px 1.7px at 24px 38px,   rgba(226,238,255,.95) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 268px 22px,  rgba(226,238,255,.88) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 380px 268px, rgba(255,244,220,.80) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 60px 240px,  rgba(248,192,226,.75) 50%, transparent 51%),
    /* mid stars */
    radial-gradient(1.1px 1.1px at 140px 92px,  rgba(220,235,255,.72) 50%, transparent 51%),
    radial-gradient(1px 1px   at 322px 176px,   rgba(255,242,216,.62) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 196px 300px, rgba(220,235,255,.66) 50%, transparent 51%),
    /* far dust */
    radial-gradient(.9px .9px at 88px 150px,    rgba(200,220,255,.52) 50%, transparent 51%),
    radial-gradient(.9px .9px at 240px 214px,   rgba(200,220,255,.46) 50%, transparent 51%),
    /* nebula */
    radial-gradient(62% 40% at 14% 10%,  rgba(70,120,210,.13) 0%, transparent 64%),
    radial-gradient(52% 36% at 88% 34%,  rgba(150,90,220,.10) 0%, transparent 62%),
    radial-gradient(48% 34% at 46% 86%,  rgba(60,180,200,.07) 0%, transparent 64%),
    var(--ink);
  background-size:
    420px 420px, 420px 420px, 420px 420px, 420px 420px,
    260px 260px, 260px 260px, 260px 260px,
    170px 170px, 170px 170px,
    100% 100%, 100% 100%, 100% 100%,
    auto;
  border: 1px solid rgba(201,150,69,.42);
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), var(--shadow);
  position: relative;
  overflow: hidden;
}
.page-shell::before,
.page-shell::after {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 50;
  width: 92px;
  height: 92px;
  background: url('/assets/img/home/corner.svg') center / contain no-repeat;
  opacity: .85;
}
.page-shell::before { inset: 0 auto auto 0; }
.page-shell::after { inset: auto 0 0 auto; transform: rotate(180deg); }

/* ---------------------------------------------------------------- header */
.site-header {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 0 clamp(22px, 4vw, 70px);
  border-bottom: 1px solid rgba(201,150,69,.45);
  background: rgba(4,11,18,.95);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw, 2.05rem);
  color: #f1d28e;
  white-space: nowrap;
}
.brand__crest { width: 34px; height: 34px; }
/* The logo slot. The mark's black line work has been recoloured to the
   site gold in the asset itself, so it reads on the near-black header
   with no backing plate behind it. Kept as a positioned box only so the
   glint sweep further down has something to be clipped to. */
.brand__shield {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.24,1.2,.42,1), filter .3s ease;
}
.brand:hover .brand__shield {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 12px rgba(244,114,196,.45));
}

.primary-nav {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 46px);
  align-items: center;
}
.primary-nav a {
  position: relative;
  padding: 34px 0 30px;
  text-decoration: none;
  color: #e7d4ac;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 20px;
  height: 1px;
  background: var(--gold-bright);
  box-shadow: 0 0 10px var(--gold-bright);
  transition: .2s ease;
}
.primary-nav a:hover::after,
.primary-nav a.active::after { left: 0; right: 0; }
.primary-nav a:hover { color: #fff3d6; }

.header-actions { display: inline-flex; align-items: center; gap: 12px; }

.lang-toggle {
  min-height: 44px;
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  cursor: pointer;
  font-family: var(--ui);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--gold-bright);
  background: rgba(8,16,26,.6);
  border: 1px solid rgba(201,150,69,.5);
  transition: background .2s ease, border-color .2s ease;
}
.lang-toggle:hover { background: rgba(201,150,69,.14); border-color: var(--gold); }

.discord-button,
.button {
  text-decoration: none;
  border: 1px solid rgba(201,150,69,.75);
  background: linear-gradient(180deg, #102237, #071522);
  color: #f1d9a8;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.discord-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 19px;
  font-size: .78rem;
  white-space: nowrap;
}
.discord-button svg { width: 17px; height: 17px; fill: var(--gold-bright); flex: none; }
.menu-button { display: none; }

/* ------------------------------------------------------------------ hero */
.hero {
  min-height: 510px;
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  border-bottom: 1px solid rgba(201,150,69,.28);
  overflow: hidden;
}
/* The plate is a photograph of Jinx at the desk. Full bleed rather than
   inset, because the headline needs the black table on the left and the
   veil below handles the falloff. Positioned to keep her face and the
   quill in frame and to push the lantern under the darkest part of the
   veil, where it reads as a glow rather than competing with the type. */
.hero__art {
  position: absolute;
  z-index: -3;
  inset: 0;
  background-image: url('/assets/img/home/jinx-hero.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 58% 38%;
  filter: saturate(.92) contrast(1.04) brightness(.97);
}
.hero__veil {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,9,14,1) 0%, rgba(3,9,14,.97) 26%, rgba(3,9,14,.74) 48%, rgba(3,9,14,.08) 73%, rgba(3,9,14,.14) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.24));
}
.hero__content {
  width: min(710px, 56%);
  padding: 64px 0 66px clamp(36px, 8vw, 150px);
}
/* Jinx's — her name above the wordmark, in her colour rather than the
   site gold, and with no flanking rules. inline-block so the gradient
   is clipped to the letters and not to the full column width. */
.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 1rem;
  margin-bottom: 10px;
  background: linear-gradient(102deg, #ffe0f4 0%, #f9a8dc 24%, #f472c4 50%, #d9539f 74%, #ffc9ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(244,114,196,.38));
}
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  width: max-content;
  font-size: clamp(4rem, 6.6vw, 7.2rem);
  line-height: .95;
  margin: 0;
  letter-spacing: -.01em;
  background: linear-gradient(178deg, #fffbef 0%, #f8e9bd 20%, #e3c072 40%, #bd9340 58%, #f4e2b0 76%, #cba24d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 5px 18px rgba(0,0,0,.75));
}
.divider { width: 420px; max-width: 78%; margin: 17px 0 16px; }
.hero__lead { margin: 0; max-width: 590px; font-size: 1.25rem; line-height: 1.55; color: #e8ddc7; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 28px;
  font-size: .92rem;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.button--primary { border-color: #d8ad60; box-shadow: inset 0 0 0 2px rgba(201,150,69,.14); }
.button--ghost { background: rgba(8,16,26,.52); }

/* ----------------------------------------------------------- guide cards */
.guides {
  padding: 48px clamp(24px, 5vw, 80px) 58px;
  background:
    linear-gradient(rgba(7,17,27,.80), rgba(7,17,27,.85)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.013) 0 2px, transparent 2px 6px);
}
.section-heading { text-align: center; max-width: 700px; margin: 0 auto 30px; }
.section-heading__eyebrow {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .24em;
  color: #b78c4d; font-size: .74rem; margin: 0 0 9px;
}
.section-heading h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 2.8vw, 2.7rem); color: #edca84; font-weight: 600; margin: 0 0 9px;
}
.section-heading p:last-child { margin: 0; color: #bfb198; line-height: 1.55; }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--max);
  margin: 0 auto;
}
.guide-card {
  position: relative;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  padding: 25px 22px 22px;
  color: #251a10;
  text-decoration: none;
  background:
    linear-gradient(rgba(229,202,149,.96), rgba(211,179,119,.96)),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.5), transparent 30%);
  border: 1px solid #8e6736;
  box-shadow:
    inset 0 0 0 4px rgba(91,61,27,.16),
    inset 0 0 50px rgba(94,59,20,.18),
    0 14px 30px rgba(0,0,0,.24);
  transition: transform .2s ease, box-shadow .2s ease;
}
.guide-card::before,
.guide-card::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-color: rgba(83,52,22,.48);
}
.guide-card::before { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; }
.guide-card::after { right: 8px; bottom: 8px; border-right: 1px solid; border-bottom: 1px solid; }
.guide-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px rgba(0,0,0,.35); }
.guide-card__icon {
  width: 126px;
  height: 126px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #192838 0 55%, #0c1620 56% 100%);
  border: 1px solid rgba(104,70,34,.72);
  box-shadow: inset 0 0 0 5px rgba(202,160,91,.12);
}
.guide-card__icon img { width: 93px; height: 93px; }
.guide-card__body { text-align: center; display: flex; flex-direction: column; flex: 1; }
.guide-card h3 {
  font-family: var(--display);
  font-size: 1.32rem; line-height: 1.1; margin: 0 0 12px; font-weight: 700;
}
.guide-card p { margin: 0 0 20px; line-height: 1.42; font-size: 1rem; }
.guide-card__go {
  margin-top: auto;
  align-self: center;
  min-width: 128px;
  padding: 10px 18px;
  border: 1px solid rgba(83,52,22,.5);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .76rem;
  transition: .2s ease;
}
.guide-card:hover .guide-card__go { background: rgba(42,25,12,.1); }
.guide-card__go span { margin-left: 10px; }

/* ------------------------------------------------------- the records band */
.records {
  padding: 44px clamp(24px, 5vw, 80px) 52px;
  border-top: 1px solid rgba(201,150,69,.3);
  background: rgba(8,19,30,.72);
}
.record-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  max-width: var(--max);
  margin: 0 auto;
}
.record {
  display: block;
  padding: 22px 20px 20px;
  text-decoration: none;
  background: linear-gradient(180deg, #0d1c2b, #0a1622);
  border: 1px solid rgba(201,150,69,.28);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.record:hover {
  transform: translateY(-4px);
  border-color: rgba(201,150,69,.7);
  box-shadow: 0 16px 32px rgba(0,0,0,.42);
}
.record__glyph { color: var(--gold-bright); font-size: 1.5rem; line-height: 1; }
.record h3 {
  font-family: var(--display);
  color: #e6c67a; margin: 12px 0 7px; font-weight: 600; font-size: 1.05rem;
}
.record p { color: #a89a82; line-height: 1.42; margin: 0; font-size: .92rem; }
.record__count {
  display: inline-block; margin-top: 11px;
  font-family: var(--ui); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: #7f7460;
}

/* ------------------------------------------------------------- the mirror */
.watch {
  padding: 10px clamp(24px, 5vw, 80px) 58px;
  background: rgba(8,19,30,.72);
}
.watch__frame {
  max-width: 1000px; margin: 0 auto; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid rgba(201,150,69,.4);
  box-shadow: 0 24px 56px rgba(0,0,0,.6);
  background: #060d16;
}
.watch__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -------------------------------------------------------------- the foot */
.site-footer {
  min-height: 130px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 26px;
  color: #c79a53;
  font-family: var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(6,16,26,.78);
}
.site-footer p { margin: 8px 0 5px; }
.site-footer strong { font-weight: 600; color: #e2c687; }
.footer__ornament { color: #ffd57d; text-shadow: 0 0 12px #ffb943; }
.footer__links {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  margin-top: 16px; font-size: .72rem; letter-spacing: .14em;
}
.footer__links a { color: #9c8156; text-decoration: none; transition: color .2s ease; }
.footer__links a:hover { color: var(--gold-bright); }
.footer__fine {
  margin-top: 16px; max-width: 62ch;
  font-family: var(--body); font-size: .86rem; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: #6f6858;
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 1320px) {
  .record-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1180px) {
  .site-header { grid-template-columns: auto auto 1fr auto; gap: 16px; }
  .primary-nav { gap: 20px; }
  .primary-nav a { font-size: .74rem; letter-spacing: .08em; }
  .guide-grid { grid-template-columns: repeat(3, 1fr); }
  .guide-card:nth-child(4), .guide-card:nth-child(5) { min-height: 330px; }
}

@media (max-width: 860px) {
  .page-shell { width: min(calc(100% - 12px), 720px); margin: 6px auto; }
  .site-header {
    min-height: 74px;
    grid-template-columns: auto 1fr auto;
    padding: 0 18px;
  }
  .brand { font-size: 1.5rem; }
  .brand__shield { width: 40px; height: 40px; }
  .brand__crest { width: 29px; height: 29px; }
  .discord-button { display: none; }
  .menu-button {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    justify-self: end;
    background: #0b1824;
    border: 1px solid rgba(201,150,69,.65);
    padding: 0 11px;
    cursor: pointer;
  }
  .menu-button span { height: 2px; background: #edc26d; width: 100%; transition: .2s ease; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .primary-nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    padding: 10px 18px 18px;
    background: rgba(4,11,18,.98);
    border-bottom: 1px solid rgba(201,150,69,.45);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 45;
  }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 15px 2px; border-bottom: 1px solid rgba(201,150,69,.12); }
  .primary-nav a::after { display: none; }

  .hero { min-height: 660px; align-items: flex-end; }
  .hero__art {
    inset: 0;
    background-image: url('/assets/img/home/jinx-hero.webp');
    background-position: 62% 22%;
  }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(3,9,14,.12) 0%, rgba(3,9,14,.28) 35%, rgba(3,9,14,.92) 68%, rgba(3,9,14,1) 100%),
      linear-gradient(90deg, rgba(3,9,14,.58), rgba(3,9,14,.08));
  }
  .hero__content {
    width: 100%;
    padding: 240px 28px 42px;
    text-align: left;
  }
  .hero h1 { font-size: clamp(3.6rem, 15vw, 5.6rem); }
  .divider { width: 320px; }
  .hero__lead { font-size: 1.08rem; max-width: 540px; }
  .guides { padding: 34px 18px 42px; }
  .guide-grid { grid-template-columns: 1fr; gap: 14px; }
  .guide-card {
    min-height: 0 !important;
    display: grid;
    grid-template-columns: 118px 1fr;
    align-items: center;
    gap: 18px;
    padding: 17px 18px;
  }
  .guide-card__icon { width: 104px; height: 104px; margin: 0; }
  .guide-card__icon img { width: 80px; height: 80px; }
  .guide-card__body { text-align: left; display: grid; grid-template-columns: 1fr auto; column-gap: 18px; align-items: center; }
  .guide-card h3 { grid-column: 1 / -1; margin: 0 0 8px; font-size: 1.22rem; }
  .guide-card p { margin: 0; font-size: .94rem; }
  .guide-card__go { margin: 0; align-self: center; min-width: 112px; text-align: center; }
  .records { padding: 34px 18px 40px; }
  .record-grid { grid-template-columns: repeat(2, 1fr); }
  .watch { padding: 6px 18px 42px; }
}

@media (max-width: 560px) {
  .page-shell { width: calc(100% - 8px); margin: 4px auto; }
  .brand { font-size: 1.3rem; gap: 9px; }
  .brand__shield { width: 36px; height: 36px; }
  .brand__crest { width: 26px; height: 26px; }
  .hero { min-height: 620px; }
  .hero__content { padding: 230px 20px 34px; }
  .eyebrow { font-size: .72rem; letter-spacing: .18em; }
  .hero h1 { font-size: clamp(2.8rem, 14.5vw, 4.8rem); }
  .hero__actions { gap: 10px; }
  .button { min-height: 52px; padding: 0 18px; font-size: .8rem; }
  .button--ghost { display: none; }
  .section-heading { margin-bottom: 22px; }
  .section-heading h2 { font-size: 1.8rem; }
  .guide-card { grid-template-columns: 86px 1fr; gap: 13px; padding: 14px; }
  .guide-card__icon { width: 78px; height: 78px; }
  .guide-card__icon img { width: 61px; height: 61px; }
  .guide-card__body { grid-template-columns: 1fr; }
  .guide-card h3 { font-size: 1.1rem; }
  .guide-card p { font-size: .89rem; }
  .guide-card__go {
    margin-top: 10px;
    justify-self: start;
    min-width: 0;
    padding: 8px 11px;
    font-size: .7rem;
  }
  .record-grid { grid-template-columns: 1fr; }
  .site-footer { min-height: 118px; font-size: .74rem; }
}


/* ==========================================================================
   MOTION

   House rule: nothing loops. Every animation here fires once - on load,
   on hover, or the first time a section is scrolled into view - and then
   the page is still. No frame loop runs while the page sits idle.

   Nothing in this file hides content. Entrances are played by JS over
   elements that are already visible, so JS off or broken still renders
   the complete page.

/* --- 2. one light sweep across the wordmark, on load --------------------- */
.hero h1 {
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.5) 47%, transparent 60%),
    linear-gradient(178deg, #fffbef 0%, #f8e9bd 20%, #e3c072 40%, #bd9340 58%, #f4e2b0 76%, #cba24d 100%);
  background-size: 280% 100%, 100% 100%;
  background-position: 210% 0, 0 0;
  animation: wordmark-sheen 1.7s cubic-bezier(.35, 0, .2, 1) .45s 1 both;
}
@keyframes wordmark-sheen {
  from { background-position: 210% 0, 0 0; }
  to   { background-position: -110% 0, 0 0; }
}

/* --- 3. the card icon answers the hover, not just the card -------------- */
.guide-card__icon {
  transition: transform .32s cubic-bezier(.24,1.2,.42,1),
              box-shadow .32s ease, border-color .32s ease;
}
.guide-card__icon img { transition: transform .32s cubic-bezier(.24,1.2,.42,1); }
.guide-card:hover .guide-card__icon {
  transform: translateY(-5px);
  border-color: rgba(202,160,91,.95);
  box-shadow: inset 0 0 0 5px rgba(202,160,91,.22), 0 0 28px rgba(240,200,117,.24);
}
.guide-card:hover .guide-card__icon img { transform: scale(1.07); }

/* --- 4. a glint crossing the crest ------------------------------------- */
.brand__shield::after {
  content: '';
  position: absolute; top: -60%; left: 0; width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,242,205,.6), transparent);
  transform: translateX(-220%) rotate(14deg);
  pointer-events: none;
}
.brand:hover .brand__shield::after,
.brand:focus-visible .brand__shield::after { animation: crest-glint .62s ease-out 1; }
@keyframes crest-glint {
  from { transform: translateX(-220%) rotate(14deg); }
  to   { transform: translateX(320%) rotate(14deg); }
}

/* --- 5. the footer line answers back ----------------------------------- */
.site-footer strong { transition: color .35s ease, text-shadow .35s ease; }
.site-footer strong:hover {
  color: #f9a8dc;
  text-shadow: 0 0 20px rgba(244,114,196,.55);
}

/* --- 6. the record tiles arrive when the band does ---------------------- */
/* Nothing here hides a tile. The entrance is driven from JS through the
   Web Animations API plus an inline opacity that JS both sets and clears,
   so the resting state in this stylesheet is always visible. A tile can
   never be stranded invisible by a stalled observer or a script error -
   the worst case is that it appears without animating. */

/* --- 7. the tally ------------------------------------------------------- */
.tally { font-weight: inherit; font-variant-numeric: tabular-nums; }

/* --- 8. Jinx mode ------------------------------------------------------- */
/* One filter on the shell shifts every gold in the page toward her pink -
   ornaments, borders, gradients and the SVGs alike - because filter is
   animatable and custom properties are not. The hero photo counter-rotates
   by the same amount so she does not turn blue in her own easter egg. */
.page-shell { transition: filter 1.1s ease; }
body.jinx-mode .page-shell { filter: hue-rotate(-72deg) saturate(1.22); }
body.jinx-mode .hero__art {
  filter: saturate(.92) contrast(1.04) brightness(.97) hue-rotate(72deg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}