/* ============================================================
   THE COLLECTIVE - shared stylesheet
   Design language: an open grimoire on a dark desk.
   The content IS the page: aged vellum with deckled edges,
   ruled manuscript margins, ink-brown text, gold leaf and
   sealing wax. Text is burned into the page letter by letter.
   ============================================================ */

:root{
  /* the dark study around the book */
  --void:        #120c06;
  --void-2:      #1c130a;
  --velvet:      #2a1c0e;
  --velvet-2:    #3a2812;
  /* default (dark-surface) values; the page redefines these */
  --brass:       #9c7226;
  --brass-hi:    #e6c26a;
  --opal:        #efe0bd;
  --opal-dim:    #c4ad82;
  --wine:        #5e1512;
  --wine-hi:     #a93b26;
  --chrome-1:    #d9cdb6;
  --chrome-2:    #8b7c62;
  --chrome-3:    #4a3d2c;
  --glass:       rgba(239,224,189,0.05);
  --ember:       #ff8c2e;
  --ember-deep:  #c1440e;
  --pagepad:     clamp(26px, 6vw, 92px);
  --font-display: 'Cinzel Decorative', serif;
  --font-ui:      'IM Fell English SC', serif;
  --font-body:    'IM Fell English', serif;
  --font-mono:    'IM Fell DW Pica', serif;
}

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

body{
  margin:0;
  background:var(--void);
  color:var(--opal);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M2 28 L5 20 C8 12 16 4 27 2 C22 6 20 8 19 12 L15 11 L18 13 C16 17 12 21 8 23 L6 20 L7 24 Z" fill="%23e6c26a" stroke="%235e4416" stroke-width="1.2"/></svg>') 2 27, auto;
}

::selection{ background:var(--wine-hi); color:#f4e6c3; }

a{ color:var(--brass-hi); text-decoration:none; }

/* ---------------- the dark study behind the book ----------------
   Layer order matters here for performance, not just looks:
   mix-blend-mode forces the browser to recompute the blend against
   whatever's directly beneath it, every time that content changes.
   The wood-grain (.scanlines) blend used to sit ON TOP of the ember
   canvas, which redraws ~60 times a second - so the browser was
   re-blending the ENTIRE viewport every single frame, forever, on
   every page. Now the grain blends once with the static void-bg
   only, and the (still-animating) embers draw on top of that
   already-settled composite with ordinary alpha compositing, which
   costs the browser nothing extra per frame. Same look, no more
   whole-page repaint tax. */
.void-bg{
  position:fixed; inset:0; z-index:-4;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(230,170,70,0.16), transparent 60%),
    radial-gradient(ellipse at 15% 100%, rgba(94,21,18,0.22), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(58,40,18,0.35), transparent 60%),
    linear-gradient(180deg, var(--void-2), var(--void) 60%);
}
/* faint wood grain of the desk (was CRT scanlines) */
.scanlines{
  position:fixed; inset:0; z-index:-3; pointer-events:none; opacity:0.5;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="p"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed="7"/><feColorMatrix type="matrix" values="0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.22  0 0 0 0.05 0"/></filter><rect width="220" height="220" filter="url(%23p)"/></svg>');
  mix-blend-mode:overlay;
}
#ember-canvas{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  box-shadow: inset 0 0 240px 70px rgba(6,3,0,0.9);
}

#cursor-dot, #cursor-ring{ display:none !important; }

/* ---------------- page-turn transition ----------------
   a scorch spreads outward from where you touched the page.
   there's no separate "opening" keyframe - main.js keeps the overlay
   fully closed while it swaps in the next page's content, then removes
   .closing, which runs this exact same clip-path transition backwards
   as the fade-in. */
#iris{
  position:fixed; inset:0; z-index:99999; pointer-events:none;
  background:
    radial-gradient(circle at var(--ix,50%) var(--iy,50%), rgba(255,140,46,0.25), transparent 22%),
    radial-gradient(circle at var(--ix,50%) var(--iy,50%), #000 0%, #0d0703 40%, var(--void) 100%);
  clip-path:circle(0% at var(--ix,50%) var(--iy,50%));
  transition:clip-path .55s cubic-bezier(.77,0,.18,1);
}
#iris.closing{ clip-path:circle(150% at var(--ix,50%) var(--iy,50%)); }

/* ---------------- nav (the shelf above the book) ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 5vw;
  background:linear-gradient(180deg, rgba(18,12,6,0.97), rgba(18,12,6,0.78));
  border-bottom:1px solid rgba(156,114,38,0.45);
  box-shadow:0 1px 0 rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.45);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg, transparent, rgba(230,194,106,.35) 20%, rgba(230,194,106,.55) 50%, rgba(230,194,106,.35) 80%, transparent);
  pointer-events:none;
}
.brand{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2vw,1.6rem);
  letter-spacing:.12em;
  background:linear-gradient(100deg,#9c7226 0%,#f4dfa0 22%,#9c7226 45%,#e6c26a 62%,#9c7226 82%,#f4dfa0 100%);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gold-shimmer 9s linear infinite;
  white-space:nowrap;
}
@keyframes gold-shimmer{ to{ background-position:300% center; } }

.brand-group{ display:flex; align-items:center; gap:12px; }

.yt-bg-player{
  position:absolute; width:1px; height:1px; overflow:hidden;
  opacity:0; pointer-events:none;
}

.nav-toggle{
  display:none; background:linear-gradient(180deg,#33240f,#22170a);
  border:1px solid var(--brass); color:var(--brass-hi);
  font-family:var(--font-ui); font-size:.95rem; padding:8px 14px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(230,194,106,.2), 0 2px 4px rgba(0,0,0,.6);
}

.site-nav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* leather bookmarks nailed to the shelf with iron studs */
.tag-link{
  position:relative;
  font-family:var(--font-ui);
  font-size:.92rem;
  letter-spacing:.08em;
  color:var(--chrome-1);
  padding:10px 16px 9px;
  background:linear-gradient(160deg,#3a2812 0%, #241708 65%, #1a1005 100%);
  border:1px solid #5c451e;
  border-radius:0 0 6px 6px;
  box-shadow:
    0 3px 0 rgba(0,0,0,.65),
    inset 0 1px 0 rgba(230,194,106,.18),
    inset 0 -6px 10px rgba(0,0,0,.4);
  transform-origin:top center;
  transition:transform .25s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.tag-link::before{
  content:""; position:absolute; top:-5px; left:50%; margin-left:-3px;
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #b8a888, #4a3d2c 70%);
  box-shadow:0 1px 2px rgba(0,0,0,.8);
}
.tag-link:hover, .tag-link[aria-current="page"]{
  transform:rotate(-2deg) translateY(-2px);
  color:var(--brass-hi);
  border-color:var(--brass);
  box-shadow:
    0 5px 0 rgba(0,0,0,.65),
    0 0 16px rgba(230,194,106,.35),
    inset 0 1px 0 rgba(230,194,106,.3),
    inset 0 -6px 10px rgba(0,0,0,.4);
}

.nav-group{ display:flex; align-items:center; gap:16px; }

.discord-link{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--chrome-2);
  transition:color .2s ease, transform .2s ease, filter .2s ease;
}
.discord-link svg{ width:22px; height:22px; fill:currentColor; }
.discord-link:hover{
  color:var(--brass-hi);
  transform:translateY(-2px);
  filter:drop-shadow(0 0 6px rgba(230,194,106,.6));
}

@media (max-width:880px){
  .nav-toggle{ display:inline-block; }
  .site-nav{
    position:absolute; top:100%; right:5vw; left:5vw; flex-direction:column;
    background:rgba(18,12,6,0.98); border:1px solid rgba(156,114,38,0.45);
    padding:14px; display:none; gap:12px;
    box-shadow:0 20px 40px rgba(0,0,0,.7);
  }
  .site-nav.open{ display:flex; }
  .tag-link{ text-align:center; }
}

/* ============================================================
   THE PAGE. Everything inside <main> is written on vellum.
   ============================================================ */
main{
  position:relative;
  isolation:isolate;
  max-width:1180px;
  margin:112px auto 70px;
  padding:64px var(--pagepad) 96px;
  min-height:70vh;

  /* ink values: everything on the page uses these */
  --opal:      #271805;               /* iron-gall ink */
  --opal-dim:  #4a3517;               /* faded ink */
  --brass:     #6f5218;               /* old gold on vellum */
  --brass-hi:  #5f3e06;               /* gold leaf, shadowed side */
  --wine:      #5e1512;
  --wine-hi:   #7c2110;               /* sealing wax */
  --chrome-1:  #4a3d2c;
  --chrome-2:  #7a6a4e;
  --chrome-3:  #a08a5e;
  --glass:     rgba(59,42,22,0.05);

  color:var(--opal);
}
/* the sheet itself: vellum with deckled, torn edges */
main::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    /* vellum grain */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="1" seed="3"/><feColorMatrix type="matrix" values="0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.06 0"/></filter><rect width="240" height="240" filter="url(%23g)"/></svg>'),
    /* candlelight falling on the sheet from above */
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255,240,205,.1) 0%, rgba(90,60,25,.05) 45%, rgba(60,35,12,.12) 82%, rgba(45,26,9,.22) 100%),
    /* the parchment itself: tiled near its native resolution so long
       pages don't force it to stretch (and blur) to cover the whole
       sheet — the deckled mask below crops whatever overhangs */
    url('img/parchment-tile.jpg') top center / 1180px auto repeat-y,
    /* fallback while the texture loads */
    radial-gradient(ellipse 120% 90% at 50% 0%, #e3c99b 0%, #d3b483 55%, #b8945f 100%);
  /* toasted, handled edges */
  box-shadow:
    inset 0 0 55px rgba(60,35,12,.3),
    inset 0 0 8px rgba(50,28,10,.4);
  /* deckled edge: the rectangle is roughened by turbulence */
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1000" preserveAspectRatio="none"><filter id="d" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.013 0.021" numOctaves="2" seed="11" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="16"/></filter><rect x="12" y="12" width="776" height="976" fill="white" filter="url(%23d)"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1000" preserveAspectRatio="none"><filter id="d" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.013 0.021" numOctaves="2" seed="11" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="16"/></filter><rect x="12" y="12" width="776" height="976" fill="white" filter="url(%23d)"/></svg>');
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.7)) drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
/* the scribe's ruled margin, a double gold line around the text block */
main::after{
  content:""; position:absolute; inset:30px; z-index:-1; pointer-events:none;
  border:1px solid rgba(95,62,6,.5);
  outline:1px solid rgba(95,62,6,.3);
  outline-offset:5px;
}
@media (max-width:700px){
  main{ margin:96px 8px 44px; }
  main::after{ inset:16px; outline-offset:3px; }
}

/* ---------------- layout helpers ---------------- */
.wrap{ max-width:920px; margin:0 auto; padding:0; }
.section{ padding:52px 0; }
.center{ text-align:center; }

h1,h2,h3{ font-family:var(--font-display); color:var(--opal); font-weight:400; margin:0 0 .5em; }
h1{ font-size:clamp(2.2rem,6vw,4rem); }
h2{
  font-size:clamp(1.6rem,4vw,2.4rem); color:var(--brass-hi);
  text-shadow:0 1px 0 rgba(255,245,220,.25);
}
h3{ font-size:1.3rem; color:var(--opal); }
p{ margin:0 0 1em; }
.lede{ font-size:1.18rem; color:var(--opal-dim); max-width:60ch; margin:0 auto 1.5em; }
em{ color:var(--wine-hi); }
main a{ color:var(--brass-hi); border-bottom:1px solid rgba(90,60,20,.5); }
main a.btn, main a.tag-card, main a.discord-link{ border-bottom:none; }

/* buttons: gold leaf pressed into the page, or a wax seal */
.btn{
  font-family:var(--font-ui); font-size:1rem; letter-spacing:.08em;
  padding:13px 28px; border:1px solid #6e5220; color:#241708;
  background:linear-gradient(180deg,#f0d488 0%, #cfa64d 45%, #a87e2c 100%);
  box-shadow:
    0 3px 0 #4a3510,
    0 6px 14px rgba(60,35,10,.45),
    inset 0 1px 0 rgba(255,244,210,.75),
    inset 0 -2px 4px rgba(74,53,16,.45);
  display:inline-block; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  border-radius:3px;
  text-shadow:0 1px 0 rgba(255,244,210,.4);
}
.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 5px 0 #4a3510, 0 0 20px rgba(193,68,14,.35), inset 0 1px 0 rgba(255,244,210,.75), inset 0 -2px 4px rgba(74,53,16,.45);
}
.btn:active{ transform:translateY(1px); box-shadow:0 1px 0 #4a3510, inset 0 2px 6px rgba(74,53,16,.5); }
.btn[disabled]{ opacity:.5; cursor:default; transform:none; }
.btn.ghost{
  background:transparent; color:var(--opal); border:1px solid rgba(70,48,20,.7);
  box-shadow:none; text-shadow:none;
}
.btn.ghost:hover{ color:var(--wine-hi); border-color:var(--wine-hi); box-shadow:0 0 14px rgba(140,44,26,.2); }
.btn.wine{
  background:radial-gradient(circle at 35% 25%, #c65a3c, #8c2c1a 40%, var(--wine) 85%);
  color:#f4dfc0; border-color:#3d0d0b;
  box-shadow:0 3px 0 #2c0907, 0 6px 14px rgba(60,20,10,.5), inset 0 1px 0 rgba(255,200,160,.3), inset 0 -3px 6px rgba(44,9,7,.6);
  border-radius:4px;
  text-shadow:0 1px 2px rgba(44,9,7,.6);
}
.btn.wine:hover{ box-shadow:0 5px 0 #2c0907, 0 0 20px rgba(140,44,26,.5), inset 0 1px 0 rgba(255,200,160,.3), inset 0 -3px 6px rgba(44,9,7,.6); }

/* card: a smaller scrap of vellum pinned onto the page */
.tag-card{
  position:relative;
  background:
    linear-gradient(165deg, rgba(255,240,208,.42), rgba(206,172,120,.28)),
    rgba(232,206,158,.3);
  border:1px solid rgba(90,60,20,.55);
  padding:26px 22px 22px; border-radius:2px;
  box-shadow:
    0 3px 10px rgba(70,42,14,.3),
    inset 0 0 26px rgba(150,110,55,.15);
}
.tag-card::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:44px; height:44px;
  background:radial-gradient(circle at 100% 100%, rgba(43,22,6,.75), rgba(120,52,14,.3) 55%, transparent 72%);
  pointer-events:none;
}
.tag-card::before{
  content:""; position:absolute; top:8px; left:24px; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c9b68c, #4a3d2c 70%);
  box-shadow:0 1px 3px rgba(60,35,10,.7);
}
a.tag-card{ transition:transform .25s ease, box-shadow .25s ease; }
a.tag-card:hover{
  transform:translateY(-3px) rotate(-.4deg);
  box-shadow:0 8px 18px rgba(70,42,14,.4), 0 0 16px rgba(193,68,14,.18), inset 0 0 26px rgba(150,110,55,.15);
}
/* proclamation ribbon stitched across the page (bleeds toward the edges,
   but stays inside the deckled parchment silhouette with a safety buffer,
   since the torn-edge mask can dip inward past the padding edge) */
.ticker{
  margin:0 calc(-1 * var(--pagepad) + 30px);
  border-top:1px solid rgba(61,13,11,.6); border-bottom:1px solid rgba(61,13,11,.6);
  background:linear-gradient(180deg, #6d1c14, #521210 55%, #440f0d);
  box-shadow:0 3px 8px rgba(60,20,10,.4), inset 0 1px 0 rgba(255,200,160,.18), inset 0 -4px 10px rgba(30,6,4,.5);
  overflow:hidden; white-space:nowrap; padding:10px 0;
  position:relative;
}
.ticker::before, .ticker::after{
  content:""; position:absolute; top:3px; bottom:3px; width:0;
  border-left:1px dashed rgba(240,207,150,.4);
}
.ticker::before{ left:8px; } .ticker::after{ right:8px; border-left:none; border-right:1px dashed rgba(240,207,150,.4); }
.ticker span{
  display:inline-block; padding-left:100%;
  font-family:var(--font-ui); font-size:.95rem; letter-spacing:.1em; color:#f0cf96;
  animation:ticker-scroll 26s linear infinite;
  text-shadow:0 1px 2px rgba(44,9,7,.7);
}
@keyframes ticker-scroll{ to{ transform:translateX(-100%); } }

/* grid */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* forms: entries inked onto the ledger */
.field{ margin-bottom:26px; }
.field label{
  display:block; font-family:var(--font-ui); font-size:.98rem; letter-spacing:.06em;
  color:var(--brass-hi); margin-bottom:8px;
}
.field .hint{ display:block; font-family:var(--font-body); font-style:italic; font-size:.88rem; color:var(--opal-dim); margin-top:6px; }
input[type="text"], input[type="date"], select, textarea{
  width:100%;
  background:rgba(255,240,208,.42);
  border:1px solid rgba(90,60,20,.55);
  border-bottom:1px solid rgba(70,48,20,.75);
  color:var(--opal); font-family:var(--font-body); font-size:1.05rem; padding:12px 14px;
  border-radius:2px; transition:border-color .2s, box-shadow .2s;
  box-shadow:inset 0 2px 6px rgba(120,84,40,.18);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--wine-hi);
  box-shadow:inset 0 2px 6px rgba(120,84,40,.18), 0 0 0 3px rgba(140,44,26,.12);
}
input::placeholder, textarea::placeholder{ color:rgba(74,53,23,.65); font-style:italic; }
textarea{ min-height:160px; resize:vertical; font-family:var(--font-body); }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--brass-hi) 50%),linear-gradient(135deg,var(--brass-hi) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center; background-size:6px 6px; background-repeat:no-repeat; }
/* the word meter: a line of wax burning toward the required mark */
.wordmeter{ height:7px; background:rgba(90,64,30,.18); border-radius:4px; overflow:hidden; margin-top:8px; box-shadow:inset 0 1px 3px rgba(70,42,14,.4); }
.wordmeter i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--wine-hi),var(--ember),#c79b3e); transition:width .25s ease; box-shadow:0 0 8px rgba(255,140,46,.5); }
.wordcount{ font-family:var(--font-mono); font-style:italic; font-size:.85rem; color:var(--opal-dim); margin-top:4px; display:block; }
.wordcount.ok{ color:var(--wine-hi); }

fieldset{ border:1px solid rgba(90,60,20,.55); padding:16px; border-radius:2px; margin:0; }
legend{ font-family:var(--font-ui); font-size:.98rem; color:var(--brass-hi); padding:0 8px; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-row label{
  font-family:var(--font-body); font-size:.95rem; color:var(--opal); display:flex; align-items:center; gap:8px;
  padding:8px 14px; border:1px solid rgba(90,60,20,.5); border-radius:2px; cursor:pointer;
  background:rgba(255,240,208,.3);
  transition:border-color .2s, box-shadow .2s;
}
.radio-row label:hover{ border-color:var(--wine-hi); box-shadow:0 0 8px rgba(140,44,26,.15); }
.radio-row input{ accent-color:var(--wine-hi); }

.form-note{
  font-family:var(--font-mono); font-style:italic; font-size:.92rem; color:var(--opal-dim);
  border-left:3px solid var(--wine-hi); padding-left:14px; margin:20px 0;
  background:linear-gradient(90deg, rgba(140,44,26,.08), transparent 60%);
}

/* footer: the desk below the book */
.site-footer{
  border-top:1px solid rgba(156,114,38,0.35); padding:34px 6vw 46px;
  font-family:var(--font-ui); font-size:.85rem; letter-spacing:.08em; color:#c4ad82;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ============================================================
   BURN-IN. The magic. Each letter ignites, glows like a coal,
   and cools into ink. The frame of a block settles softly.
   (spans are added by main.js; [data-burn] hides them until lit)
   ============================================================ */
.reveal{ opacity:0; }
.reveal.in{ animation:frame-in 1s ease forwards; }
@keyframes frame-in{
  0%{ opacity:0; transform:translateY(10px); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:none; }
}

.burn-word{ display:inline-block; }
[data-burn] .burn-ch{ opacity:0; }
.burn-run .burn-ch{
  display:inline-block;
  animation:ch-burn-in .75s cubic-bezier(.5,0,.75,0) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes ch-burn-in{
  /* filter:blur() used to run through every step of this keyframe.
     It's the single most expensive thing a browser can animate -
     each blurred frame has to be re-rasterized from scratch, and
     this keyframe fires on every letter/word, continuously, on the
     homepage typewriter for as long as it's open. Dropping the blur
     and leaning on opacity + color + text-shadow + transform keeps
     the "catching light, cooling to ink" look while letting the
     browser paint each character cheaply. */
  0%{
    opacity:0;
    color:#140803;
    text-shadow:none;
    transform:translateY(7px) scale(.6) rotate(6deg);
  }
  25%{
    opacity:.55;
    color:#2a1206;
    text-shadow:0 0 4px rgba(255,90,20,.35);
    transform:translateY(3px) scale(.85) rotate(3deg);
  }
  55%{
    color:#ff5a1a;
    text-shadow:
      0 0 10px rgba(255,90,20,.9),
      0 0 26px rgba(193,68,14,.7);
    transform:translateY(1px) scale(.97) rotate(-2deg);
  }
  80%{
    color:#ffcf87;
    text-shadow:
      0 0 8px rgba(255,200,120,.95),
      0 0 20px rgba(255,140,46,.8);
    transform:translateY(0) scale(1.05) rotate(0deg);
  }
  100%{
    opacity:1;
    color:inherit;
    text-shadow:none;
    transform:translateY(0) scale(1) rotate(0deg);
  }
}
/* while a line burns, a faint heat-haze hangs over it */
.burn-run{ position:relative; }

/* ============================================================
   BURN-OUT. Before the next line is written, the old one
   catches, flares, chars, and crumbles to ash in sequence.
   (main.js sets --od per-char to stagger the sweep)
   ============================================================ */
.burn-out .burn-ch{
  display:inline-block;
  animation:ch-burn-out .75s cubic-bezier(.5,0,.75,0) forwards;
  animation-delay:var(--od, 0ms);
}
@keyframes ch-burn-out{
  0%{
    opacity:1;
    color:inherit;
    text-shadow:none;
    transform:translateY(0) scale(1) rotate(0deg);
  }
  20%{
    color:#ffcf87;
    text-shadow:
      0 0 8px rgba(255,200,120,.95),
      0 0 20px rgba(255,140,46,.8);
    transform:translateY(0) scale(1.05) rotate(0deg);
  }
  45%{
    color:#ff5a1a;
    text-shadow:
      0 0 10px rgba(255,90,20,.9),
      0 0 26px rgba(193,68,14,.7);
    transform:translateY(1px) scale(.97) rotate(-2deg);
  }
  75%{
    opacity:.55;
    color:#2a1206;
    text-shadow:0 0 4px rgba(255,90,20,.35);
    transform:translateY(3px) scale(.85) rotate(3deg);
  }
  100%{
    opacity:0;
    color:#140803;
    text-shadow:none;
    transform:translateY(7px) scale(.6) rotate(6deg);
  }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal, .intake-line, .next-btn{ opacity:1 !important; }
  [data-burn] .burn-ch{ opacity:1; }
  .burn-out .burn-ch{ opacity:0 !important; }
}

/* hidden util */
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------------- hero title (illuminated gold leaf on vellum) ---------------- */
.glitch-title{
  position:relative;
  font-family:var(--font-display);
  letter-spacing:.06em;
  background:linear-gradient(100deg,#54390a 0%,#a67c22 18%,#6b4c0c 36%,#96721a 52%,#54390a 68%,#a67c22 86%,#54390a 100%);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gold-shimmer 11s linear infinite;
  filter:drop-shadow(0 1px 0 rgba(255,245,220,.3)) drop-shadow(0 2px 3px rgba(70,42,14,.35));
}
.glitch-title::before, .glitch-title::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background:linear-gradient(100deg, var(--ember), #ffd27a, var(--ember-deep));
  opacity:0; pointer-events:none;
}
/* the candle gutters, and for a breath the gold burns like coals */
@media (prefers-reduced-motion:no-preference){
  .glitch-title::before{ animation:flame-gutter-1 7.5s ease-in-out infinite; }
  .glitch-title::after{ animation:flame-gutter-2 9.5s ease-in-out infinite; }
}
/* opacity-only: these two loop forever for as long as the hero title
   is on screen, so keeping them to a compositor-only property (no
   filter:blur) means the browser can run them without repainting
   the title at all. */
@keyframes flame-gutter-1{
  0%,88%,100%{ opacity:0; }
  91%{ opacity:.4; }
  94%{ opacity:.12; }
  96%{ opacity:.3; }
}
@keyframes flame-gutter-2{
  0%,92%,100%{ opacity:0; }
  95%{ opacity:.25; }
  97%{ opacity:.08; }
}

/* the hero title plus its recording-replay button, sitting together
   as one centered unit */
.hero-title-row{
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap;
}
/* a small gold-leaf disc pressed into the page next to the title -
   same material as .btn, just round and icon-sized */
.recording-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid #6e5220; color:#241708;
  background:linear-gradient(180deg,#f0d488 0%, #cfa64d 45%, #a87e2c 100%);
  box-shadow:
    0 3px 0 #4a3510,
    0 6px 14px rgba(60,35,10,.45),
    inset 0 1px 0 rgba(255,244,210,.75),
    inset 0 -2px 4px rgba(74,53,16,.45);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.recording-toggle svg{ width:18px; height:18px; fill:currentColor; }
.recording-toggle .icon-play{ margin-left:2px; } /* optical centering of the triangle */
.recording-toggle .icon-pause{ display:none; }
.recording-toggle.is-playing .icon-play{ display:none; }
.recording-toggle.is-playing .icon-pause{ display:inline-flex; }
.recording-toggle:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 5px 0 #4a3510, 0 0 20px rgba(193,68,14,.35), inset 0 1px 0 rgba(255,244,210,.75), inset 0 -2px 4px rgba(74,53,16,.45);
}
.recording-toggle:active{ transform:translateY(1px); box-shadow:0 1px 0 #4a3510, inset 0 2px 6px rgba(74,53,16,.5); }
.recording-toggle.is-playing{ filter:brightness(1.1); }

/* ---------------- lore: intake sequence ---------------- */
.intake-screen{
  min-height:72vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:40px 0;
}
.intake-line{
  font-family:var(--font-body); font-size:clamp(1.05rem,2.4vw,1.4rem); color:var(--opal);
  max-width:52ch; margin:0 auto 1.1em; opacity:0;
}
.intake-line.show{ opacity:1; }
.next-btn{ opacity:0; }
.next-btn.show{ animation:frame-in .9s ease forwards; }
.collector-voice{
  font-family:var(--font-display); font-size:clamp(1.15rem,2.6vw,1.7rem); color:var(--wine-hi);
  text-shadow:0 1px 0 rgba(255,248,220,.5);
  max-width:56ch; margin:0.4em auto 1.1em; line-height:1.5;
}

.choice-wrap{
  display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:36px;
}
.choice-box{
  width:220px; padding:30px 18px;
  border:1px solid rgba(90,60,20,.6);
  background:
    linear-gradient(165deg, rgba(255,240,208,.42), rgba(206,172,120,.28)),
    rgba(232,206,158,.3);
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  font-family:var(--font-ui); font-size:1.05rem; letter-spacing:.08em; color:var(--opal);
  box-shadow:0 3px 10px rgba(70,42,14,.3), inset 0 0 26px rgba(150,110,55,.12);
}
.choice-box:hover{
  transform:translateY(-6px) scale(1.03); border-color:var(--wine-hi);
  box-shadow:0 10px 24px rgba(70,42,14,.4), 0 0 18px rgba(193,68,14,.22), inset 0 0 26px rgba(150,110,55,.12);
}
.choice-box .glyph{ font-size:2.2rem; display:block; margin-bottom:14px; color:var(--wine-hi); }

/* the flash of the brand: firelight */
.screen-flash{
  position:fixed; inset:0; z-index:9998; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 55%, #ffdf9e, var(--ember) 40%, var(--ember-deep) 70%, #2c0907 100%);
}
.screen-flash.go{ animation:flash-go .6s ease; }
@keyframes flash-go{ 0%{opacity:0;} 12%{opacity:.85;} 100%{opacity:0;} }

/* ---------------- caste cards ---------------- */
.caste-card{
  position:relative;
  background:
    linear-gradient(165deg, rgba(255,240,208,.42), rgba(206,172,120,.28)),
    rgba(232,206,158,.3);
  border:1px solid rgba(90,60,20,.55); padding:24px 20px; text-align:left;
  box-shadow:0 3px 10px rgba(70,42,14,.3), inset 0 0 26px rgba(150,110,55,.12);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.caste-card:hover{
  transform:translateY(-4px); border-color:var(--brass);
  box-shadow:0 10px 22px rgba(70,42,14,.4), 0 0 16px rgba(193,68,14,.18), inset 0 0 26px rgba(150,110,55,.12);
}
.caste-card .glyph{ font-size:1.8rem; display:block; margin-bottom:10px; }
.caste-card .glyph-img{
  width:56px; height:56px; object-fit:contain; display:block; margin-bottom:12px;
  filter:sepia(.3) saturate(.85) drop-shadow(0 2px 5px rgba(70,42,14,.45));
  transition:filter .25s ease, transform .25s ease;
}
.caste-card:hover .glyph-img{ filter:sepia(.1) drop-shadow(0 2px 10px rgba(193,68,14,.4)); transform:scale(1.06); }

@keyframes icon-wave{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
.wave-icon{ animation:icon-wave 2.6s ease-in-out infinite; }
.caste-card:nth-child(1) .wave-icon{ animation-delay:0s; }
.caste-card:nth-child(2) .wave-icon{ animation-delay:.22s; }
.caste-card:nth-child(3) .wave-icon{ animation-delay:.44s; }
.caste-card:hover .wave-icon{ animation-play-state:paused; }
.caste-card h3{ margin-bottom:6px; }
.caste-card .flavor{ color:var(--opal-dim); font-size:.92rem; margin:0; font-style:italic; }
.caste-card .jar-label{
  font-family:var(--font-ui); font-size:.8rem; letter-spacing:.14em; color:var(--wine-hi);
  text-transform:uppercase; display:block; margin-bottom:8px;
}

/* ---------------- rules page ---------------- */
.rule-section{ margin-bottom:44px; }
.rule-section h3{
  font-family:var(--font-ui); font-size:1.25rem; color:var(--brass-hi); letter-spacing:.06em;
  border-bottom:1px solid rgba(90,60,20,.55); padding-bottom:10px; margin-bottom:16px;
}
.rule-section ol{ padding-left:1.2em; }
.rule-section li{ margin-bottom:.7em; color:var(--opal); }
.rule-section li::marker{ color:var(--wine-hi); font-family:var(--font-ui); }
.rule-section li b{ color:var(--wine-hi); }
/* pressed red wax, slightly askew */
.seal{
  display:inline-block; position:relative;
  border:2px solid #6d1c14; color:#f0cfa8;
  background:radial-gradient(circle at 35% 25%, #c65a3c, #8c2c1a 45%, #5e1512 85%);
  font-family:var(--font-ui); font-size:.9rem; padding:12px 18px; transform:rotate(-3deg);
  letter-spacing:.1em; margin:18px 0;
  border-radius:4px;
  box-shadow:0 3px 8px rgba(70,42,14,.45), inset 0 1px 0 rgba(255,200,160,.25), inset 0 -3px 8px rgba(44,9,7,.6);
  text-shadow:0 1px 2px rgba(44,9,7,.7);
}

/* empty reliquary shelf (business page) */
.cabinet{
  width:min(420px,80vw); margin:0 auto; aspect-ratio:3/4; border:2px solid var(--brass);
  position:relative;
  background:linear-gradient(180deg, rgba(255,240,208,.3), rgba(150,110,55,.18));
  box-shadow:inset 0 0 40px rgba(120,84,40,.3), 0 6px 18px rgba(70,42,14,.35);
}
.cabinet::before{
  content:""; position:absolute; inset:14px; border:1px solid rgba(90,60,20,.55);
}
.cabinet .shelf{ position:absolute; left:14px; right:14px; height:2px; background:linear-gradient(90deg, transparent, rgba(90,60,20,.6), transparent); }
.cabinet .shelf.s1{ top:33%; } .cabinet .shelf.s2{ top:66%; }
.cabinet .dust{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:.9rem; color:var(--opal-dim); text-align:center; letter-spacing:.1em;
  font-style:italic;
}

/* success / error panels for forms */
.panel-result{
  border:1px solid rgba(90,60,20,.6); padding:26px; text-align:center; margin-top:10px;
  background:linear-gradient(165deg, rgba(255,240,208,.4), rgba(206,172,120,.25));
  box-shadow:0 3px 10px rgba(70,42,14,.25);
}
.panel-result.error{ border-color:var(--wine-hi); color:var(--wine-hi); }