/* =====================================================================
   TALLOWMERE, THE CANDLE KINGDOM
   The shared design system. Every page links this file.
   Page-specific styles live in each page, never here.

   Contents
   01 Tokens            09 Wax seal, vellum, redaction
   02 Base              10 Page head, scenes, portraits
   03 Type              11 Chapter card, the Crier
   04 Layout            12 The Year-Candle
   05 Environment       13 Candle sheet and index
   06 Masthead, nav     14 Footer
   07 Drawer            15 Entrances
   08 Actions           16 Pause, pointers, reduced motion
   00 Fallback faces (before the tokens)
   ===================================================================== */

/* 00 FALLBACK FACES ----------------------------------------------------
   Local faces sized and spaced to match Grenze Gotisch, Alegreya and IM Fell, so the
   words keep their place when the web fonts arrive. The first family in each pair is
   tuned on Palatino (Windows and Apple) and Book Antiqua, the second on Georgia.
   A face whose local font is missing is skipped and the next one is tried. */
@font-face{font-family:"Grenze Fallback";font-weight:600 800;src:local("Palatino Linotype Bold"),local("PalatinoLinotype-Bold"),local("Palatino Bold"),local("Palatino-Bold"),local("Book Antiqua Bold"),local("BookAntiqua-Bold");size-adjust:81.8%;ascent-override:134.47%;descent-override:46.45%;line-gap-override:0%}
@font-face{font-family:"Grenze Fallback G";font-weight:600 800;src:local("Georgia Bold"),local("Georgia-Bold");size-adjust:72.75%;ascent-override:151.2%;descent-override:52.23%;line-gap-override:0%}
@font-face{font-family:"Alegreya Fallback";font-weight:400 600;src:local("Palatino Linotype"),local("PalatinoLinotype-Roman"),local("Palatino"),local("Palatino-Roman"),local("Book Antiqua"),local("BookAntiqua");size-adjust:91.16%;ascent-override:111.89%;descent-override:38.39%;line-gap-override:0%}
@font-face{font-family:"Alegreya Fallback";font-weight:700 800;src:local("Palatino Linotype Bold"),local("PalatinoLinotype-Bold"),local("Palatino Bold"),local("Palatino-Bold"),local("Book Antiqua Bold"),local("BookAntiqua-Bold");size-adjust:89.89%;ascent-override:113.47%;descent-override:38.94%;line-gap-override:0%}
@font-face{font-family:"Alegreya Fallback";font-style:italic;font-weight:400 600;src:local("Palatino Linotype Italic"),local("PalatinoLinotype-Italic"),local("Palatino Italic"),local("Palatino-Italic"),local("Book Antiqua Italic"),local("BookAntiqua-Italic");size-adjust:88.82%;ascent-override:114.84%;descent-override:39.41%;line-gap-override:0%}
@font-face{font-family:"Alegreya Fallback G";font-weight:400 600;src:local("Georgia");size-adjust:91.58%;ascent-override:111.38%;descent-override:38.22%;line-gap-override:0%}
@font-face{font-family:"Alegreya Fallback G";font-weight:700 800;src:local("Georgia Bold"),local("Georgia-Bold");size-adjust:79.81%;ascent-override:127.8%;descent-override:43.85%;line-gap-override:0%}
@font-face{font-family:"Alegreya Fallback G";font-style:italic;font-weight:400 600;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:79.49%;ascent-override:128.32%;descent-override:44.03%;line-gap-override:0%}
@font-face{font-family:"Fell Fallback";src:local("Palatino Linotype"),local("PalatinoLinotype-Roman"),local("Palatino"),local("Palatino-Roman"),local("Book Antiqua"),local("BookAntiqua");size-adjust:98.25%;ascent-override:92.62%;descent-override:36.64%;line-gap-override:0%}
@font-face{font-family:"Fell Fallback G";src:local("Georgia");size-adjust:99.17%;ascent-override:91.76%;descent-override:36.3%;line-gap-override:0%}

/* 01 TOKENS ---------------------------------------------------------- */
:root{
  --night:#0D0A08;
  --night-2:#15100C;
  --night-3:#1E1711;
  --vellum:#E7D8B8;
  --vellum-dim:rgba(231,216,184,.66);
  --vellum-faint:rgba(231,216,184,.56);   /* the dimmest tier that still reads at 4.5:1 on night */
  --vellum-ghost:rgba(231,216,184,.12);
  --sauce:#F0861F;
  --sauce-hot:#FFA247;
  --gilt:#C79A3A;
  --gules:#A3231B;
  --vert:#3E8A4F;
  --rime:#A8C1CB;
  --ink:#2A1D13;
  --ink-dim:rgba(42,29,19,.76);
  --wax-black:#120D0B;

  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-s:.35s;
  --dur-m:.7s;
  --dur-l:1.1s;

  --f-display:"Grenze Gotisch","Grenze Fallback","Grenze Fallback G","Palatino Linotype","Book Antiqua",Georgia,serif;
  --f-body:"Alegreya","Alegreya Fallback","Alegreya Fallback G","Palatino Linotype","Book Antiqua",Georgia,serif;
  --f-label:"IM Fell English SC","Fell Fallback","Fell Fallback G","Palatino Linotype","Book Antiqua",Georgia,serif;

  --bar-h:72px;    /* the main nav bar */
  --sub-h:0px;     /* the lore sub-nav row, on lore pages only */
  --nav-h:calc(var(--bar-h) + var(--sub-h));   /* everything the fixed masthead covers */
  --gutter:clamp(16px,4vw,56px);
  --rail:0px;
  --wrap:1180px;
  --wrap-narrow:760px;
  --section-y:clamp(96px,15vh,176px);

  --tshadow:0 1px 2px rgba(8,6,5,.95),0 3px 12px rgba(8,6,5,.78),0 10px 44px rgba(8,6,5,.8);
  --scrim:rgba(13,10,8,.9);

  --grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .85 0 0 0 0 .72 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7 .9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .18 0 0 0 0 .09 0 0 0 .55 -.08'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23v)'/%3E%3C/svg%3E");

  color-scheme:dark;
}
@media (min-width:1100px){:root{--rail:60px}}
@media (max-width:999px){:root{--bar-h:62px}}
/* Phones: a little more room on both sides so words never run under the slim candle.
   Keyed to .js (set in the head before first paint), not to .has-candle (set later by
   site.js), so the column never narrows after the words are drawn. */
@media (max-width:1099px){html.js,html.has-candle{--rail:8px}}

/* 02 BASE ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:hidden;overflow-x:clip;
  background:var(--night);
  scroll-padding-top:calc(var(--nav-h) + 16px);
  scrollbar-color:#3A2B1F var(--night);
}
body{
  margin:0;min-height:100vh;
  overflow-x:hidden;overflow-x:clip;
  background:var(--night);color:var(--vellum);
  font:400 1.125rem/1.62 var(--f-body);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  animation:page-in .9s var(--ease-out);
}
@keyframes page-in{from{opacity:0}to{opacity:1}}
html.is-locked{overflow:hidden}
html.is-locked body{position:fixed;left:0;right:0;overflow:hidden}

img,svg,video,canvas,picture{display:block;max-width:100%}
img,video{height:auto;background-color:var(--night)}
img.is-missing{opacity:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol[role="list"],ul[role="list"]{list-style:none;padding:0}
hr{display:none}
[hidden]{display:none!important}
::selection{background:rgba(240,134,31,.38);color:#FFF6E6}

:focus-visible{outline:2px solid var(--sauce);outline-offset:3px}
[tabindex="-1"]:focus{outline:0}
main{display:block;position:relative;padding-top:var(--nav-h)}

.skip{
  position:fixed;z-index:100;left:16px;top:12px;
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--sauce);color:var(--night);
  font:700 16px/1 var(--f-body);text-decoration:none;
  transform:translate3d(0,-160%,0);
  transition:transform var(--dur-s) var(--ease-out);
}
.skip:focus,.skip:focus-visible{transform:none}

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;
}

/* 03 TYPE ------------------------------------------------------------
   Measures are set in em, not ch. A ch is the width of the "0" in whatever face is showing,
   so it shrinks while a fallback face stands in and the words rewrap when the web font lands.
   Each em value here is the old ch value in its web face (Alegreya 0 = .533em, 500 = .519em,
   italic = .51em), so nothing moves once the fonts are in. */
h1,h2,.display{
  font-family:var(--f-display);font-weight:700;
  line-height:.94;letter-spacing:.004em;
  color:var(--vellum);
  text-wrap:balance;
  font-feature-settings:"liga" 1,"dlig" 0;
}
h1{font-size:clamp(52px,8.2vw,124px)}
h2{font-size:clamp(40px,5.4vw,78px)}
h3{font:700 clamp(22px,1.9vw,28px)/1.18 var(--f-body);color:var(--vellum);text-wrap:balance}
h4{font:400 17px/1.3 var(--f-label);letter-spacing:.06em;color:var(--gilt)}
.display-xl{font-size:clamp(60px,10vw,148px)}
.display-l{font-size:clamp(48px,7vw,104px)}
.display-m{font-size:clamp(38px,4.6vw,64px)}
.display-s{font-size:clamp(32px,3.2vw,44px)}
.display-heavy{font-weight:800}
.glow{text-shadow:0 0 34px rgba(240,134,31,.16),0 0 2px rgba(255,190,120,.12)}

.kicker{
  display:block;
  font:400 14px/1.25 var(--f-label);
  letter-spacing:.14em;
  color:var(--gilt);
}
.kicker + h1,.kicker + h2,.kicker + .display{margin-top:.28em}

.lede{
  font-size:clamp(19px,1.45vw,22px);line-height:1.55;
  color:var(--vellum-dim);max-width:27.72em;
}
.prose{
  font-size:clamp(18px,1.22vw,20px);line-height:1.72;
  max-width:33.05em;
  font-variant-numeric:oldstyle-nums proportional-nums;
}
.prose > * + *{margin-top:1.05em}
.prose a{color:var(--vellum);text-decoration:underline;text-decoration-color:rgba(240,134,31,.7)}
.prose em,.prose i{font-style:italic}
.prose.initial > p:first-of-type::first-letter{
  float:left;
  font:700 4.4em/.78 var(--f-display);
  color:var(--gilt);
  margin:.06em .1em 0 -.02em;
  text-shadow:0 0 24px rgba(199,154,58,.25);
}
.seed{
  font-style:italic;color:var(--vellum);
  max-width:23.46em;
}
.small{font-size:15px;line-height:1.5;color:var(--vellum-dim)}
.tnum{font-variant-numeric:tabular-nums lining-nums}
/* Roman numerals: blackletter I reads as D, so numerals are always set in the label face. */
.numeral{font-family:var(--f-label);font-weight:400;letter-spacing:.06em;color:var(--gilt)}
.label{font:400 15px/1.3 var(--f-label);letter-spacing:.08em}

/* The Kitchen's plain voice, set beside any in-world warning. */
.plain{
  font-family:var(--f-body);font-style:normal;font-weight:500;
  color:var(--vellum);
  max-width:31.14em;
}
.plain::before{
  content:"";display:inline-block;
  width:.42em;height:.42em;margin:0 .6em .12em 0;
  background:var(--gilt);
  transform:rotate(45deg);
  vertical-align:middle;
}

/* 04 LAYOUT ---------------------------------------------------------- */
.wrap{
  width:min(100% - 2*var(--gutter) - 2*var(--rail), var(--wrap));
  margin-inline:auto;
}
.wrap-narrow{
  width:min(100% - 2*var(--gutter) - 2*var(--rail), var(--wrap-narrow));
  margin-inline:auto;
}
.section{position:relative;padding-block:var(--section-y)}
.section-tight{padding-block:calc(var(--section-y) * .6)}
.under-nav{margin-top:calc(var(--nav-h) * -1)}
.stack > * + *{margin-top:var(--stack,1rem)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.center{text-align:center}
.center .lede,.center .prose,.center .plain{margin-inline:auto}

/* A drawn tally-notch ornament between passages. Decoration only. */
.ornament{
  display:block;width:180px;height:18px;margin:0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 18'%3E%3Cg fill='%23C79A3A'%3E%3Cpath d='M20 3h2v12h-2zM30 5h2v8h-2zM40 5h2v8h-2zM50 5h2v8h-2zM60 3h2v12h-2zM118 3h2v12h-2zM128 5h2v8h-2zM138 5h2v8h-2zM148 5h2v8h-2zM158 3h2v12h-2z' opacity='.6'/%3E%3Cpath d='M90 3l6 6-6 6-6-6z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

/* 05 ENVIRONMENT (fixed, behind everything, whisper level) ----------- */
.env{
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;overflow:hidden;
  contain:strict;
}
.env::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 85% 55% at 50% 116%,rgba(240,134,31,.13),rgba(240,134,31,.045) 42%,transparent 70%),
    radial-gradient(ellipse 55% 40% at 8% -6%,rgba(199,154,58,.07),transparent 70%),
    radial-gradient(ellipse 45% 45% at 96% 10%,rgba(163,35,27,.045),transparent 70%);
}
.env::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 125% 105% at 50% 45%,transparent 52%,rgba(5,4,3,.6) 100%);
}
.env i{position:absolute;display:block;will-change:transform}
.env-smoke{
  inset:-30%;
  background:
    radial-gradient(ellipse 38% 26% at 28% 38%,rgba(150,118,84,.075),transparent 70%),
    radial-gradient(ellipse 32% 24% at 74% 64%,rgba(120,92,64,.065),transparent 70%),
    radial-gradient(ellipse 26% 18% at 56% 18%,rgba(170,138,100,.045),transparent 70%);
  animation:env-smoke 150s var(--ease-io) -40s infinite alternate;
}
.env-smoke.s2{
  background:
    radial-gradient(ellipse 30% 22% at 64% 34%,rgba(140,108,76,.06),transparent 70%),
    radial-gradient(ellipse 36% 26% at 22% 76%,rgba(110,84,58,.055),transparent 70%);
  animation-duration:205s;animation-delay:-120s;animation-direction:alternate-reverse;
}
.env-sway{
  inset:0;
  animation:env-sway 41s var(--ease-io) -13s infinite alternate,env-breathe 17s ease-in-out -6s infinite alternate;
}
.env-sway.far{animation-duration:67s,23s;animation-delay:-31s,-9s;opacity:.6}
.env-embers{
  left:0;right:0;top:0;height:calc(100% + 1100px);
  background-image:
    radial-gradient(circle at 9% 12%,rgba(255,205,140,.95) 0,rgba(255,162,71,.5) 1.2px,rgba(240,134,31,0) 4.5px),
    radial-gradient(circle at 31% 41%,rgba(255,196,128,.8) 0,rgba(255,162,71,.42) 1px,rgba(240,134,31,0) 3.6px),
    radial-gradient(circle at 57% 8%,rgba(255,210,150,.9) 0,rgba(255,162,71,.45) 1.1px,rgba(240,134,31,0) 4px),
    radial-gradient(circle at 82% 29%,rgba(255,190,120,.7) 0,rgba(240,134,31,.35) 1px,rgba(240,134,31,0) 3.2px),
    radial-gradient(circle at 18% 71%,rgba(255,200,140,.85) 0,rgba(255,162,71,.4) 1.2px,rgba(240,134,31,0) 4.2px),
    radial-gradient(circle at 66% 57%,rgba(255,214,160,.95) 0,rgba(255,162,71,.5) 1.3px,rgba(240,134,31,0) 5px),
    radial-gradient(circle at 44% 88%,rgba(255,190,120,.75) 0,rgba(240,134,31,.35) 1px,rgba(240,134,31,0) 3.4px),
    radial-gradient(circle at 92% 81%,rgba(255,200,140,.8) 0,rgba(255,162,71,.4) 1.1px,rgba(240,134,31,0) 3.8px);
  background-size:740px 1100px;
  opacity:.55;
  animation:env-rise 104s linear -37s infinite;
}
.env-embers.far{
  height:calc(100% + 820px);
  background-image:
    radial-gradient(circle at 14% 22%,rgba(255,200,140,.8) 0,rgba(240,134,31,0) 2.4px),
    radial-gradient(circle at 39% 64%,rgba(255,190,120,.7) 0,rgba(240,134,31,0) 2px),
    radial-gradient(circle at 61% 33%,rgba(255,206,150,.75) 0,rgba(240,134,31,0) 2.2px),
    radial-gradient(circle at 86% 74%,rgba(255,196,130,.7) 0,rgba(240,134,31,0) 2px),
    radial-gradient(circle at 72% 6%,rgba(255,190,120,.6) 0,rgba(240,134,31,0) 1.8px),
    radial-gradient(circle at 27% 93%,rgba(255,200,140,.65) 0,rgba(240,134,31,0) 2px);
  background-size:530px 820px;
  opacity:.42;
  animation:env-rise-far 158s linear -71s infinite;
}
.env-grain{
  inset:0;
  background:var(--grain-light) 0 0/220px 220px;
  opacity:.05;
  will-change:auto!important;
}
@keyframes env-smoke{
  0%{transform:translate3d(-4%,2%,0) scale(1)}
  50%{transform:translate3d(3%,-3%,0) scale(1.08)}
  100%{transform:translate3d(5%,1.5%,0) scale(1.02)}
}
@keyframes env-sway{from{transform:translate3d(-16px,0,0)}to{transform:translate3d(18px,0,0)}}
@keyframes env-breathe{from{opacity:.7}to{opacity:1}}
@keyframes env-rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-1100px,0)}}
@keyframes env-rise-far{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-820px,0)}}

/* 06 MASTHEAD AND NAV ------------------------------------------------
   Plain words, the same on every page: Home, Play, Join, Lore, The Crew, Shop, Socials.
   Right side: the account chip ([data-account-chip], drawn by js/account.js) and Follow on X.
   Lore pages add a second row, the lore sub-nav (.subnav), inside the same fixed masthead. */
.masthead{
  position:fixed;z-index:50;top:0;left:0;right:0;
  height:calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg,rgba(13,10,8,.86),rgba(13,10,8,.5) 70%,rgba(13,10,8,0));
  transition:transform .6s var(--ease-out);
}
.masthead::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(13,10,8,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
  backdrop-filter:blur(16px) saturate(1.12);
  opacity:0;
  transition:opacity .5s var(--ease-out);
}
.masthead::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:34px;
  background:linear-gradient(180deg,rgba(13,10,8,.55),rgba(13,10,8,.18) 50%,rgba(13,10,8,0));
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease-out);
}
.masthead.is-scrolled::before,.masthead.is-scrolled::after{opacity:1}
.masthead.is-tucked{transform:translate3d(0,calc(-100% - 40px),0)}

.nav{
  height:var(--bar-h);
  display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.nav-badge{
  position:relative;flex:none;display:block;width:46px;height:46px;
  text-decoration:none;
}
.nav-badge::before{
  content:"";position:absolute;inset:-40%;
  background:radial-gradient(closest-side,rgba(240,134,31,.28),rgba(240,134,31,0));
  opacity:.55;
  transition:opacity var(--dur-m) var(--ease-out);
}
.nav-badge:hover::before{opacity:1}
.nav-badge img{
  position:relative;width:46px;height:46px;background:none;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 95%,transparent 100%);
  mask-image:radial-gradient(circle closest-side,#000 95%,transparent 100%);
  transition:transform var(--dur-m) var(--ease-out);
}
.nav-badge:hover img{transform:rotate(-8deg) scale(1.04)}

.nav-links{
  display:flex;align-items:center;
  gap:clamp(16px,1.7vw,30px);
  margin:0 auto 0 clamp(4px,1.4vw,24px);padding:0;list-style:none;
  min-width:0;
}
.nav-links a{
  position:relative;
  display:flex;align-items:center;min-height:44px;
  padding:0 1px;
  font:400 17px/1 var(--f-label);letter-spacing:.04em;
  text-decoration:none;color:var(--vellum);
  white-space:nowrap;
  opacity:.86;
  transition:opacity var(--dur-s) var(--ease-out),color var(--dur-s) var(--ease-out);
}
/* the lit wick under the current page (and under Lore on every lore page) */
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:4px;
  width:26px;height:6px;margin-left:-13px;
  background:radial-gradient(closest-side,rgba(255,190,120,.95),rgba(240,134,31,.45) 45%,rgba(240,134,31,0));
  opacity:0;transform:scaleX(.3);
  transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-m) var(--ease-out);
}
.nav-links a:hover,.nav-links a:focus-visible{opacity:1}
.nav-links a:hover::after{opacity:.45;transform:scaleX(.7)}
.nav-links a[aria-current]{opacity:1;color:#FFF3DC}
.nav-links a[aria-current]::after{opacity:1;transform:none}

.nav-account{flex:none;display:flex;align-items:center;min-width:0}
.nav-follow{flex:none}
.btn.nav-follow{gap:0}
.nav-menu{
  display:none;flex:none;align-items:center;gap:10px;
  min-height:44px;min-width:44px;padding:0 4px 0 10px;
  font:400 17px/1 var(--f-label);letter-spacing:.06em;color:var(--vellum);
}
.nav-menu svg{width:22px;height:14px;flex:none}
.nav-menu svg path{transition:transform var(--dur-m) var(--ease-out);transform-origin:center}
.nav-menu:hover svg path:last-child{transform:translateX(3px)}

@media (max-width:1179px){
  .nav{gap:14px}
  .nav-links{gap:15px;margin-left:8px}
  .nav-links a{font-size:16px;letter-spacing:.02em}
}
@media (max-width:999px){
  .nav{gap:12px}
  .nav-links,.nav-account{display:none}
  .js .nav-menu{display:inline-flex}
  .nav-follow{margin-left:auto}
  /* Without scripts the links stay reachable as a scrolling row. */
  html:not(.js) .masthead{position:absolute;height:auto}
  html:not(.js) .nav{flex-wrap:wrap;height:auto;padding-block:10px}
  html:not(.js) .nav-links{display:flex;order:3;width:100%;margin:0;overflow-x:auto;gap:22px}
}

/* The lore sub-nav: Story, Map, World below, The villain. A quiet second row under the main bar. */
html.has-subnav,html:has(.masthead .subnav){--sub-h:44px}
.subnav{
  height:var(--sub-h);
  display:flex;align-items:center;gap:6px 18px;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
  overflow-x:auto;scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subnav-label{
  flex:none;
  font:400 13px/1 var(--f-label);letter-spacing:.16em;color:var(--gilt);
}
.subnav-label::after{content:"";display:inline-block;width:18px;height:1px;margin-left:12px;vertical-align:middle;background:rgba(199,154,58,.55)}
.subnav ul{display:flex;align-items:center;gap:4px clamp(2px,1vw,14px);margin:0 0 0 -6px;padding:0;list-style:none}
/* every link is at least 44 by 44 (Map is a short word), with the space between links inside the target */
.subnav a{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:6px;
  font:400 15.5px/1 var(--f-label);letter-spacing:.05em;white-space:nowrap;
  color:var(--vellum);opacity:.8;text-decoration:none;
  text-shadow:0 1px 2px rgba(8,6,5,.95),0 2px 10px rgba(8,6,5,.8);
  transition:opacity var(--dur-s) var(--ease-out);
}
.subnav a:hover{opacity:1}
.subnav a[aria-current="page"]{
  opacity:1;color:#FFF3DC;
  text-decoration:underline;text-decoration-color:var(--sauce);
  text-decoration-thickness:2px;text-underline-offset:.5em;
}
@media (max-width:520px){.subnav-label{display:none}}

/* 07 DRAWER (phones and small windows) -------------------------------
   site.js builds it from the nav: the account chip on top, the pages in plain words,
   each with a short line saying what it is, then Follow on X. */
.drawer{
  position:fixed;inset:0;z-index:70;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
  background:
    radial-gradient(ellipse 90% 50% at 50% 112%,rgba(240,134,31,.14),transparent 70%),
    #0B0806;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;
  transition:opacity .45s var(--ease-out);
}
.drawer.open{opacity:1}
.drawer-top{
  flex:none;height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;
}
.drawer-close{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;min-width:44px;padding:0 4px 0 10px;
  font:400 17px/1 var(--f-label);letter-spacing:.06em;color:var(--vellum);
}
.drawer-close svg{width:16px;height:16px}
.drawer-account{flex:none;padding:6px 0 4px;min-height:52px}
.drawer-nav{flex:1 0 auto;display:flex;align-items:flex-start;padding-block:clamp(8px,2.4vh,24px)}
.drawer-list{list-style:none;margin:0;padding:0;width:100%}
.drawer-list li{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .55s var(--ease-out),transform .65s var(--ease-out);
}
.drawer.open .drawer-list li{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 45ms + 40ms)}
.drawer.open.settled .drawer-list li{transition-delay:0s}
.drawer-list a{
  position:relative;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;
  min-height:52px;padding:7px 0 7px 22px;
  text-decoration:none;color:var(--vellum);
}
.drawer-place{font:700 clamp(26px,7.4vw,34px)/1.1 var(--f-body);letter-spacing:-.005em}
.drawer-plain{font:400 15px/1.3 var(--f-body);color:var(--vellum-dim)}
.drawer-list a::before{
  content:"";position:absolute;left:0;top:50%;
  width:10px;height:10px;margin-top:-5px;
  background:radial-gradient(closest-side,var(--sauce-hot),rgba(240,134,31,.4) 50%,rgba(240,134,31,0));
  opacity:0;transform:scale(.4);
  transition:opacity var(--dur-s),transform var(--dur-m) var(--ease-out);
}
.drawer-list a:hover .drawer-place{color:#FFF3DC}
.drawer-list a[aria-current] .drawer-place{color:var(--sauce-hot)}
.drawer-list a[aria-current]::before{opacity:1;transform:none}
.drawer-foot{flex:none;display:grid;justify-items:start;gap:12px;padding-top:14px}
.drawer-note{font-size:15px;line-height:1.45;color:var(--vellum-dim);max-width:21em}
.drawer-small{display:flex;flex-wrap:wrap;gap:0 22px;margin:0;padding:0;list-style:none}
.drawer-small a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--vellum-dim);text-underline-offset:.3em}

/* 08 ACTIONS: buttons and arrow links -------------------------------- */
.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:0 30px;
  font:700 17px/1.1 var(--f-body);letter-spacing:.012em;
  color:var(--night);text-decoration:none;text-align:center;
  white-space:nowrap;
  transition:transform var(--dur-s) var(--ease-out);
}
.btn::before,.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
}
.btn::before{background:linear-gradient(180deg,#F49434,var(--sauce) 55%,#E27A15)}
.btn::after{
  background:linear-gradient(180deg,#FFB766,var(--sauce-hot));
  opacity:0;
  transition:opacity var(--dur-s) var(--ease-out);
}
.btn:hover{transform:translate3d(0,-1px,0)}
.btn:hover::after{opacity:1}
.btn:active{transform:translate3d(0,1px,0)}
.btn-sm{min-height:40px;padding:0 18px;font-size:15px}
.btn-block{display:flex;width:100%}

.link-arrow{
  display:inline-flex;align-items:baseline;gap:.5em;
  padding-block:.3em;
  font-weight:500;color:var(--vellum);
  text-decoration:underline;
  text-decoration-color:rgba(231,216,184,.38);
  text-decoration-thickness:1px;text-underline-offset:.3em;
}
.link-arrow::after{
  content:"\2192";
  display:inline-block;color:var(--sauce);
  transition:transform .45s var(--ease-out);
}
.link-arrow:hover::after{transform:translate3d(5px,0,0)}

/* 09 WAX SEAL, VELLUM, REDACTION ------------------------------------- */
.wax-seal{
  --seal:120px;
  position:relative;isolation:isolate;
  display:inline-block;flex:none;
  width:var(--seal);height:var(--seal);
  vertical-align:middle;
}
.wax-seal::before{
  content:"";position:absolute;inset:-34%;z-index:-1;
  background:radial-gradient(closest-side,rgba(163,35,27,.2),rgba(240,134,31,.06) 52%,rgba(240,134,31,0));
  pointer-events:none;
}
.wax-seal:empty{background:radial-gradient(circle closest-side,#211816 0,#0B0807 82%,transparent 88%)}
.wax-seal svg{width:100%;height:100%;overflow:visible}
.ws-halves{opacity:0}
.ws-half-a,.ws-half-b{transform-box:fill-box;transform-origin:50% 50%;transition:transform 1.4s var(--ease-out)}
.ws-crack{opacity:0;transition:opacity 1.6s var(--ease-out)}
.wax-seal[data-stage="1"] .c1,
.wax-seal[data-stage="2"] .c1,.wax-seal[data-stage="2"] .c2,
.wax-seal[data-stage="3"] .ws-crack,
.wax-seal[data-stage="4"] .ws-crack{opacity:1}
.wax-seal[data-stage="4"] .ws-whole{opacity:0}
.wax-seal[data-stage="4"] .ws-halves{opacity:1}
.wax-seal[data-stage="4"] .ws-half-a{transform:translate(-6px,3px) rotate(-7deg)}
.wax-seal[data-stage="4"] .ws-half-b{transform:translate(5px,1px) rotate(5deg)}

.vellum{
  --ink:#2A1D13;
  --deckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='30' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3Crect x='24' y='24' width='952' height='952' fill='%23fff' filter='url(%23d)'/%3E%3C/svg%3E");
  position:relative;
  color:var(--ink);
  padding:clamp(48px,7vw,104px) clamp(28px,7.5vw,112px);
  background-color:#D8C49B;
  background-image:
    var(--grain-dark),
    radial-gradient(ellipse 70% 52% at 30% 20%,rgba(255,248,228,.5),rgba(255,248,228,0) 70%),
    radial-gradient(ellipse 24% 18% at 82% 30%,rgba(150,104,52,.14),rgba(150,104,52,0) 70%),
    radial-gradient(ellipse 30% 22% at 16% 78%,rgba(140,96,46,.16),rgba(140,96,46,0) 70%),
    radial-gradient(ellipse 64% 50% at 78% 86%,rgba(120,80,36,.26),rgba(120,80,36,0) 72%),
    radial-gradient(ellipse 104% 100% at 50% 50%,rgba(92,58,24,0) 52%,rgba(92,58,24,.45) 82%,rgba(70,42,16,.78) 100%);
  background-size:260px 260px,auto,auto,auto,auto,auto;
  -webkit-mask-image:var(--deckle),linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 1.6%,#000 98.4%,transparent);
  -webkit-mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;
  mask-image:var(--deckle),linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 1.6%,#000 98.4%,transparent);
  mask-size:100% 100%;
  mask-repeat:no-repeat;
  mask-composite:intersect;
}
.vellum h1,.vellum h2,.vellum h3,.vellum .display{color:#3B1611}
.vellum .kicker{color:#7A4E16}
.vellum .small,.vellum .lede{color:var(--ink-dim)}
.vellum a{color:var(--ink);text-decoration-color:rgba(163,35,27,.6)}
.vellum ::selection{background:rgba(163,35,27,.28);color:var(--ink)}
.vellum :focus-visible{outline-color:#9A4C08}
.vellum .plain{color:var(--ink)}
.vellum .plain::before{background:#7A4E16}

.redact{
  --len:6;
  display:inline-block;
  width:calc(var(--len) * .58em);height:.98em;
  margin-inline:.08em;
  vertical-align:-.14em;
  background:var(--redact-ink,rgba(231,216,184,.16));
  transform:rotate(-.35deg);
}
.vellum .redact{--redact-ink:#140E0B}

/* Tally notches: stats cut into a stick. Set --n (and --max, default 10). */
.tally{display:flex;align-items:baseline;gap:12px}
.tally-label{font:400 14px/1 var(--f-label);letter-spacing:.1em;color:var(--vellum-dim);min-width:4.6em}
.tally-num{font:400 15px/1 var(--f-label);color:var(--gilt);font-variant-numeric:tabular-nums}
.tally-notches{
  --n:5;--max:10;--step:9px;
  display:inline-block;flex:none;
  width:calc(var(--max) * var(--step));height:16px;
  vertical-align:-2px;
  background:
    repeating-linear-gradient(90deg,var(--gilt) 0 2px,transparent 2px calc(var(--step) * 5)) 0 0/calc(var(--n) * var(--step)) 16px no-repeat,
    repeating-linear-gradient(90deg,var(--vellum) 0 2px,transparent 2px var(--step)) 0 100%/calc(var(--n) * var(--step)) 12px no-repeat,
    repeating-linear-gradient(90deg,rgba(231,216,184,.16) 0 2px,transparent 2px var(--step)) 0 100%/100% 12px no-repeat;
}

/* 10 PAGE HEAD, SCENES, PORTRAITS ------------------------------------ */
/* Scene art fades into the night: linear top and bottom, vignette at the sides. */
.fade-scene{
  --fade-y:18%;--fade-x:11%;
  background-color:var(--night);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--fade-y),#000 calc(100% - var(--fade-y)),transparent),linear-gradient(90deg,transparent,#000 var(--fade-x),#000 calc(100% - var(--fade-x)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 var(--fade-y),#000 calc(100% - var(--fade-y)),transparent),linear-gradient(90deg,transparent,#000 var(--fade-x),#000 calc(100% - var(--fade-x)),transparent);
  mask-composite:intersect;
}
.fade-portrait{
  background-color:var(--night);
  -webkit-mask-image:radial-gradient(ellipse 50% 52% at 50% 46%,#000 60%,transparent 99%);
  mask-image:radial-gradient(ellipse 50% 52% at 50% 46%,#000 60%,transparent 99%);
}
.scrim-top,.scrim-bottom{
  position:absolute;left:0;right:0;z-index:0;
  pointer-events:none;
}
.scrim-top{top:0;height:var(--scrim-h,55%);background:linear-gradient(180deg,rgba(13,10,8,.9),rgba(13,10,8,.55) 42%,rgba(13,10,8,0))}
.scrim-bottom{bottom:0;height:var(--scrim-h,65%);background:linear-gradient(0deg,rgba(13,10,8,.94),rgba(13,10,8,.62) 40%,rgba(13,10,8,0))}
.scrim-left{
  position:absolute;top:0;bottom:0;left:0;z-index:0;width:var(--scrim-w,80%);
  background:linear-gradient(90deg,rgba(13,10,8,.86),rgba(13,10,8,.66) 40%,rgba(13,10,8,.44) 72%,rgba(13,10,8,.12) 92%,rgba(13,10,8,0));
  pointer-events:none;
}
.soft-scrim{
  position:relative;isolation:isolate;
}
.soft-scrim::before{
  content:"";position:absolute;inset:-28% -18%;z-index:-1;
  background:radial-gradient(closest-side,rgba(13,10,8,.78),rgba(13,10,8,.42) 60%,rgba(13,10,8,0));
  pointer-events:none;
}
.over-art{text-shadow:var(--tshadow)}
.over-art .btn{text-shadow:none}

.page-head{
  position:relative;isolation:isolate;
  margin-top:calc(var(--nav-h) * -1);
  min-height:min(94vh,940px);
  display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 72px) 0 clamp(64px,11vh,120px);
}
.page-head-art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.page-head-art img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  --fade-y:16%;--fade-x:6%;
}
.page-head .wrap{position:relative;z-index:1}
.page-head .lede{margin-top:22px;color:var(--vellum)}
@media (max-width:720px){
  /* Phones: the art takes the upper part and fades out; the words sit on night below it. */
  .page-head{min-height:min(100vh,880px);padding-bottom:52px}
  .page-head-art{bottom:auto;height:66%}
  .page-head-art img{--fade-y:22%;--fade-x:0%}
  .page-head .scrim-bottom{height:76%;background:linear-gradient(0deg,rgba(13,10,8,.96),rgba(13,10,8,.8) 45%,rgba(13,10,8,.45) 80%,rgba(13,10,8,0))}
  .page-head .scrim-left{width:100%;background:linear-gradient(90deg,rgba(13,10,8,.6),rgba(13,10,8,.3))}
}

.scene{position:relative;margin:0}
.scene img{width:100%}
.scene figcaption,.scene-caption{
  position:relative;z-index:1;
  font-style:italic;color:var(--vellum);
  text-shadow:var(--tshadow);
}
.scene-caption-over{position:absolute;left:0;right:0;bottom:clamp(20px,6%,64px)}

.portrait{position:relative;isolation:isolate;margin:0}
.portrait::before{
  content:"";position:absolute;inset:6% 10% 0;z-index:-1;
  background:radial-gradient(ellipse 60% 55% at 50% 58%,rgba(240,134,31,.12),rgba(240,134,31,0) 70%);
  pointer-events:none;
}
.portrait img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* 11 CHAPTER CARD AND THE CRIER -------------------------------------- */
.chapter-card{display:grid;justify-items:start;gap:14px}
.chapter-card-num{display:flex;align-items:baseline;gap:.6em}
.chapter-card-num .numeral{font:400 30px/1 var(--f-label);color:var(--gilt);letter-spacing:.06em}
.chapter-card-title{font-size:clamp(36px,4vw,56px)}
.chapter-card-date{color:var(--vellum-dim);letter-spacing:.12em}
.chapter-card-open{max-width:29.85em;color:var(--vellum-dim);font-size:clamp(18px,1.3vw,20px);line-height:1.66}
.chapter-card-seal{display:flex;align-items:center;gap:22px;margin-top:4px}
.chapter-card-holds{font:700 clamp(32px,3vw,40px)/1 var(--f-display);color:var(--vellum)}
.chapter-card[data-status="sealed"] .chapter-card-title{color:var(--vellum-dim)}

.crier{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3vw,34px)}
.crier-item{
  display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr);
  column-gap:clamp(18px,3vw,40px);row-gap:6px;
  align-items:baseline;
}
.crier-meta{display:grid;gap:6px;align-content:start}
.crier-date{font:400 15px/1.2 var(--f-label);letter-spacing:.08em;color:var(--vellum-dim)}
.crier-kind{font:400 13px/1 var(--f-label);letter-spacing:.18em;color:var(--gilt)}
.crier-item[data-kind="official"] .crier-kind{color:var(--sauce)}
.crier-text{max-width:31.98em;line-height:1.55}
.crier-item[data-kind="official"] .crier-text{font-weight:500;max-width:31.14em}
.crier-text a{color:var(--vellum)}
@media (max-width:640px){
  .crier-item{grid-template-columns:1fr}
  .crier-meta{display:flex;gap:14px;align-items:baseline}
}

/* 12 THE YEAR-CANDLE -------------------------------------------------- */
.year-candle{
  --yc-top:34px;   /* room for the flame above the uncut wax */
  --yc-bot:24px;   /* room for the dish */
  --yc-w:12px;     /* wax width */
  --yc-cx:26px;    /* wax centre */
  position:fixed;z-index:40;
  top:calc(var(--nav-h) + 40px);bottom:30px;
  right:max(22px,env(safe-area-inset-right));
  width:52px;
  pointer-events:none;
  opacity:0;
  transition:opacity .9s var(--ease-out);
}
.year-candle.is-ready{opacity:1}
.year-candle.is-away{opacity:0!important}
.year-candle.is-away *{pointer-events:none!important}
.year-candle svg{display:block;overflow:visible}

.yc-trace{
  position:absolute;top:var(--yc-top);bottom:var(--yc-bot);
  left:calc(var(--yc-cx) - 1px);width:2px;
  background:repeating-linear-gradient(180deg,rgba(231,216,184,.2) 0 2px,rgba(231,216,184,0) 2px 8px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%);
  mask-image:linear-gradient(180deg,transparent,#000 6%);
}
.yc-clip{
  position:absolute;top:var(--yc-top);bottom:var(--yc-bot);
  left:calc(var(--yc-cx) - var(--yc-w) / 2);width:var(--yc-w);
  overflow:hidden;
  will-change:transform;
}
.yc-clip::before{
  content:"";position:absolute;left:0;right:0;top:0;height:60px;z-index:2;
  background:linear-gradient(180deg,rgba(255,184,100,.78),rgba(255,150,60,.22) 45%,rgba(255,150,60,0));
}
.yc-clip::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;
  background:linear-gradient(90deg,rgba(255,236,200,.2),rgba(255,244,220,.95) 50%,rgba(255,236,200,.2));
}
.yc-shade{
  position:absolute;left:0;right:0;top:0;height:200%;z-index:1;
  background:linear-gradient(180deg,rgba(13,10,8,0) 0,rgba(13,10,8,.12) 120px,rgba(13,10,8,.42) 420px,rgba(13,10,8,.58) 760px,rgba(13,10,8,.62));
}
.yc-wax{
  position:absolute;left:0;right:0;top:0;height:100%;
  --yc-mark:60px;
  background:
    repeating-linear-gradient(180deg,rgba(120,80,40,0) 0 calc(var(--yc-mark) - 1px),rgba(120,80,40,.38) calc(var(--yc-mark) - 1px) var(--yc-mark)),
    linear-gradient(90deg,#8A7450 0%,#D3C095 20%,#F1E5C6 46%,#E4D3AA 68%,#9F875F 100%);
  will-change:transform;
}
.yc-rime{
  position:absolute;left:0;right:0;bottom:0;height:100%;
  transform-origin:50% 100%;
  transform:scaleY(0);
  transition:transform 2.6s var(--ease-out);
  background:
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 1.4px) 0 0/7px 11px,
    radial-gradient(circle at 70% 60%,rgba(232,244,250,.85) 0,rgba(232,244,250,0) 1.2px) 0 0/9px 13px,
    linear-gradient(0deg,rgba(222,238,246,.96),rgba(168,193,203,.78) 32%,rgba(168,193,203,.36) 78%,rgba(168,193,203,0));
}
.year-candle[data-stage="1"] .yc-rime{transform:scaleY(.14)}
.year-candle[data-stage="2"] .yc-rime{transform:scaleY(.36)}
.year-candle[data-stage="3"] .yc-rime{transform:scaleY(.68)}
.year-candle[data-stage="4"] .yc-rime{transform:scaleY(1)}

.yc-flame{position:absolute;top:var(--yc-top);left:var(--yc-cx);width:0;height:0;will-change:transform}
.yc-lean{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.yc-halo{
  position:absolute;left:-64px;top:-92px;width:128px;height:128px;
  background:radial-gradient(closest-side,rgba(255,176,90,.32),rgba(240,134,31,.12) 42%,rgba(240,134,31,0));
  animation:yc-halo 3.7s ease-in-out -1.2s infinite alternate;
}
.yc-wick{position:absolute;left:-1px;top:-8px;width:2px;height:9px;background:linear-gradient(180deg,#FFB766,#2A1B10 40%,#1A110A)}
.yc-fire{
  position:absolute;left:-7px;top:-36px;width:14px;height:31px;
  transform-origin:50% 92%;
  animation:yc-flicker 2.3s ease-in-out -.7s infinite;
}
.yc-fire svg{width:100%;height:100%}
.yc-core{animation:yc-core 1.7s ease-in-out -.4s infinite alternate}
.year-candle.is-guttering .yc-lean{animation:yc-lean 3.4s var(--ease-io) both}

@keyframes yc-flicker{
  0%{transform:scale(1,1) skewX(0)}
  18%{transform:scale(.95,1.05) skewX(1.6deg)}
  37%{transform:scale(1.04,.96) skewX(-1.1deg)}
  55%{transform:scale(.97,1.07) skewX(.6deg)}
  74%{transform:scale(1.03,.97) skewX(-1.7deg)}
  100%{transform:scale(1,1) skewX(0)}
}
@keyframes yc-core{from{opacity:.75}to{opacity:1}}
@keyframes yc-halo{from{opacity:.72;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
@keyframes yc-lean{
  0%{transform:none;opacity:1}
  14%{transform:rotate(-22deg) scale(.92,.84);opacity:.9}
  27%{transform:rotate(-31deg) scale(.72,.56);opacity:.42}
  39%{transform:rotate(-17deg) scale(.96,.86);opacity:.88}
  52%{transform:rotate(-27deg) scale(.62,.5);opacity:.3}
  67%{transform:rotate(-9deg) scale(.92,.9);opacity:.82}
  82%{transform:rotate(-3deg) scale(1.04,1.03);opacity:1}
  100%{transform:none;opacity:1}
}

.yc-drips{position:absolute;top:var(--yc-top);left:0;right:0;height:0}
.yc-drip{
  position:absolute;left:0;top:-9px;width:100%;height:28px;
  pointer-events:auto;cursor:pointer;
  will-change:transform;
}
.yc-drip .g{
  position:absolute;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.yc-drip .g-run{left:calc(var(--yc-cx) - var(--yc-w) / 2 - 4px);top:8px;width:8px;height:20px}
.yc-drip .g-bead{left:calc(var(--yc-cx) - 4px);top:5px;width:8px;height:8px;opacity:0;transform:scale(.6)}
.yc-drip .g-glow{
  left:calc(var(--yc-cx) - 18px);top:-4px;width:36px;height:36px;
  background:radial-gradient(closest-side,rgba(255,170,80,.5),rgba(240,134,31,0));
  opacity:0;
}
.yc-drip.is-past .g-run{opacity:0;transform:translate3d(0,-4px,0)}
.yc-drip.is-past .g-bead{opacity:.7;transform:none}
.yc-drip.is-here .g-glow{opacity:1}
.yc-drip.is-here.is-past .g-bead{opacity:1}
.yc-drip:hover .g-glow,.yc-drip.is-tip .g-glow{opacity:.85}
.g-run path{fill:url(#yc-wax-g);stroke:rgba(70,44,20,.55);stroke-width:.7}
.g-bead circle{fill:#D9C59A}
.yc-drip.is-sealed .g-run path{fill:url(#yc-black-g);stroke:rgba(168,193,203,.5)}
.yc-drip.is-sealed .g-bead circle{fill:#1A1310}

.yc-nail{
  position:absolute;top:var(--yc-top);
  left:calc(var(--yc-cx) - var(--yc-w) * 1.4167);
  width:calc(var(--yc-w) * 2.8333);height:calc(var(--yc-w) * .8333);
  margin-top:calc(var(--yc-w) * -.4167);
  will-change:transform;
}
.yc-nail svg{width:100%;height:100%;transform-origin:30% 50%}
.year-candle[data-stage="4"] .yc-nail svg{animation:yc-nail-fall 1.6s var(--ease-io) .9s both}
@keyframes yc-nail-fall{
  0%{transform:none;opacity:1}
  30%{transform:translate3d(-2px,4px,0) rotate(-12deg);opacity:1}
  100%{transform:translate3d(-16px,180px,0) rotate(-84deg);opacity:0}
}

.yc-base{
  position:absolute;bottom:-4px;
  left:calc(var(--yc-cx) - 22px);width:44px;height:30px;
}
.yc-base svg{width:100%;height:100%}
.yc-pool{transform-box:fill-box;transform-origin:50% 50%;transition:transform .8s var(--ease-out)}

.yc-tip{
  position:absolute;top:var(--yc-top);right:calc(100% - 6px);
  margin-top:-.62em;
  padding:6px 4px 6px 18px;
  font:400 15px/1.2 var(--f-label);letter-spacing:.06em;
  color:var(--vellum);white-space:nowrap;
  text-shadow:var(--tshadow);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s var(--ease-out),transform .5s var(--ease-out);
}
.yc-tip::before{
  content:"";position:absolute;inset:-10px -16px -10px -26px;z-index:-1;
  background:radial-gradient(closest-side,rgba(13,10,8,.82),rgba(13,10,8,.5) 55%,rgba(13,10,8,0));
}
.yc-tip,.yc-tip.show{display:none}   /* the label never prints over the page */
.yc-tip .yc-tip-sealed{color:var(--rime);margin-left:.5em;font-size:12px;letter-spacing:.18em}

.yc-hit{
  display:none;position:absolute;top:-14px;bottom:-14px;right:-6px;width:44px;
  pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;
}

/* Phones, tablets and narrow windows: the candle steps out of the way. Only a small flame
   waits at the right edge, in the empty margin; tapping it opens the list of this page's parts.
   Nothing is drawn over the words. */
@media (max-width:1099px){
  .year-candle{
    --yc-top:24px;--yc-cx:24px;
    top:auto;bottom:calc(15% + env(safe-area-inset-bottom));
    right:max(0px,env(safe-area-inset-right));
    width:44px;height:50px;
  }
  .year-candle::before{
    content:"";position:absolute;left:calc(var(--yc-cx) - 3px);top:var(--yc-top);width:6px;height:15px;
    background:linear-gradient(90deg,#8A7450,#F1E5C6 46%,#9F875F);
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);
  }
  .yc-trace,.yc-clip,.yc-drips,.yc-nail,.yc-base{display:none}
  .yc-flame{transform:none!important}
  .yc-lean{scale:.62}
  .yc-halo{opacity:.6}
  .yc-hit{display:block;top:0;bottom:0;right:0;width:44px}
  .year-candle.is-ready{opacity:.8}
  .year-candle.is-shy{opacity:.18}
  .year-candle.is-shy .yc-hit{pointer-events:none}
}
@media (max-height:520px){.year-candle{display:none}}
@media print{.year-candle,.candle-index,.candle-sheet,.env,.masthead{display:none!important}}
/* Pages that switch the candle off (the game pages) */
html.no-candle .year-candle,html.no-candle .candle-index,html.no-candle .candle-sheet{display:none!important}

/* 13 CANDLE SHEET AND THE HIDDEN INDEX ------------------------------- */
.candle-sheet{position:fixed;inset:0;z-index:60}
.cs-backdrop{
  position:absolute;inset:0;
  background:rgba(7,5,4,.66);
  opacity:0;transition:opacity .45s var(--ease-out);
}
.cs-panel{
  position:absolute;left:0;right:0;bottom:0;
  max-height:min(80vh,640px);overflow-y:auto;overscroll-behavior:contain;
  padding:76px max(var(--gutter),env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(21,16,12,0),rgba(21,16,12,.97) 70px,var(--night-2));
  opacity:0;transform:translate3d(0,44px,0);
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-out);
}
.candle-sheet.open .cs-backdrop{opacity:1}
.candle-sheet.open .cs-panel{opacity:1;transform:none}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cs-close{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 2px 0 10px;
  font:400 15px/1 var(--f-label);letter-spacing:.08em;color:var(--vellum);
}
.cs-close svg{width:14px;height:14px}
.cs-sub{margin-top:4px;font-size:15px;color:var(--vellum-dim)}
.cs-list{list-style:none;margin:18px 0 0;padding:0}
.cs-list a{
  display:flex;align-items:center;gap:16px;
  min-height:50px;padding:4px 0;
  text-decoration:none;color:var(--vellum);
}
.cs-drip{flex:none;width:10px;height:22px}
.cs-drip path{fill:url(#yc-wax-g)}
.cs-list .is-sealed .cs-drip path{fill:url(#yc-black-g);stroke:rgba(168,193,203,.55);stroke-width:.8}
.cs-label{flex:1 1 auto;font-size:21px;line-height:1.2}
.cs-tag{flex:none;font:400 13px/1 var(--f-label);letter-spacing:.16em;color:var(--gilt)}
.cs-list .is-sealed .cs-tag{color:var(--rime)}
.cs-list a[aria-current="location"] .cs-label{color:var(--sauce-hot)}

.candle-index{
  position:fixed!important;z-index:66;
  top:calc(var(--nav-h) + 12px);right:16px;
}
.candle-index:not(:focus-within){
  width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.candle-index:focus-within{
  padding:30px 40px 32px;
  background:rgba(13,10,8,.95);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent),linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent),linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  mask-composite:intersect;
}
.ci-title{font:400 14px/1.2 var(--f-label);letter-spacing:.14em;color:var(--gilt);margin-bottom:8px}
.candle-index ol{list-style:none;margin:0;padding:0}
.candle-index a{display:inline-flex;align-items:center;min-height:36px;color:var(--vellum);text-decoration:none}
.candle-index a[aria-current="location"]{color:var(--sauce-hot)}

/* 14 FOOTER -----------------------------------------------------------
   Every page: Launch alerts form, Follow on X, the small links (Official links, Socials,
   Terms, Privacy), then the plain disclaimers. No boxes: space, type and one warm glow. */
.footer{
  position:relative;isolation:isolate;
  padding:clamp(80px,13vh,140px) 0 calc(36px + env(safe-area-inset-bottom));
  overflow:hidden;
}
.footer::before{
  content:"";position:absolute;left:50%;top:0;
  width:min(1200px,140%);height:100%;transform:translateX(-50%);
  background:radial-gradient(ellipse 60% 40% at 50% 26%,rgba(240,134,31,.075),rgba(240,134,31,0) 72%);
  pointer-events:none;z-index:-1;
}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(48px,7vw,120px);align-items:start;
}
.footer-alerts{min-width:0}
.footer-alerts > p{font-size:16px;color:var(--vellum-dim)}
.footer-follow{display:grid;justify-items:start;gap:16px;align-content:start}
.footer-sign{font:700 clamp(44px,5vw,68px)/.95 var(--f-display);color:var(--vellum);text-shadow:0 0 40px rgba(240,134,31,.14)}
.footer-note{font-size:16px;line-height:1.5;color:var(--vellum-dim);max-width:22em}
/* kept for older page blocks that borrow it (a centered button with its note) */
.footer-cta{display:grid;justify-items:center;gap:14px;margin-top:clamp(34px,5vh,52px)}
.footer-links{margin-top:clamp(56px,9vh,96px)}
.footer-links ul{display:flex;flex-wrap:wrap;gap:4px clamp(22px,3vw,40px);margin:0;padding:0;list-style:none}
.footer-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font:500 17px/1.2 var(--f-body);color:var(--vellum);
  text-decoration:underline;text-decoration-color:rgba(231,216,184,.32);
  text-decoration-thickness:1px;text-underline-offset:.32em;
  transition:text-decoration-color var(--dur-s) var(--ease-out);
}
.footer-links a:hover{text-decoration-color:var(--sauce)}
.footer-links a[aria-current="page"]{color:var(--sauce-hot)}
.footer-plain{
  display:grid;gap:10px;margin-top:22px;
  font-size:15px;line-height:1.55;color:var(--vellum-dim);
}
.footer-plain p{max-width:46em}
.footer-plain p:first-child{color:var(--vellum)}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr;gap:56px}
}

/* 15 ENTRANCES -------------------------------------------------------- */
/* .reveal arrives when it scrolls into view (site.js adds .in).
   .reveal.stagger arrives child by child. Delays retire after (.settled). */
.js .reveal{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .95s var(--ease-out),transform 1.15s var(--ease-out);
  transition-delay:var(--reveal-delay,0s);
}
.js .reveal.r-fade{transform:none}
.js .reveal.r-drift{transform:translate3d(-28px,0,0)}
.js .reveal.r-sink{transform:translate3d(0,-20px,0)}
.js .reveal.r-near{transform:scale(.965)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.in.settled{transition-delay:0s}

.js .reveal.stagger{opacity:1;transform:none}
.js .reveal.stagger > *{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .85s var(--ease-out),transform 1.05s var(--ease-out);
}
.js .reveal.stagger.in > *{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * var(--stagger,90ms) + var(--reveal-delay,0s));
}
.js .reveal.stagger.in.settled > *{transition-delay:0s}

/* The page head (the first screen) never waits for a script. Its words enter by CSS from the
   first paint, with the same delays; site.js marks them done and leaves them alone. */
@keyframes head-in{
  from{opacity:0;transform:var(--head-from,translate3d(0,22px,0))}
  to{opacity:1;transform:none}
}
.js .page-head .reveal:not(.stagger),
.js main > :first-child header .reveal:not(.stagger),
.js .page-head .reveal.stagger > *,
.js main > :first-child header .reveal.stagger > *{
  opacity:1;transform:none;
  animation:head-in .95s var(--ease-out) both;
  animation-delay:calc(var(--reveal-delay,0s) + .06s);
}
.js .page-head .reveal.r-fade,.js main > :first-child header .reveal.r-fade{--head-from:none}
.js .page-head .reveal.r-drift,.js main > :first-child header .reveal.r-drift{--head-from:translate3d(-28px,0,0)}
.js .page-head .reveal.r-sink,.js main > :first-child header .reveal.r-sink{--head-from:translate3d(0,-20px,0)}
.js .page-head .reveal.r-near,.js main > :first-child header .reveal.r-near{--head-from:scale(.965)}

/* 16 PAUSE, POINTERS, REDUCED MOTION --------------------------------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (pointer:coarse){
  .btn{min-height:52px}
  .btn-sm{min-height:44px}
  .link-arrow{min-height:44px;align-items:center}
  .nav-links a,.footer-links a,.subnav a,.candle-index a{min-height:44px}
  .yc-drip::before{content:"";position:absolute;inset:-8px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
  }
  body{animation:none}
  .env i,.yc-fire,.yc-core,.yc-halo,.yc-lean{animation:none!important}
  .js .reveal,.js .reveal.stagger > *{opacity:1!important;transform:none!important}
  .drawer-list li{opacity:1;transform:none}
  .masthead{transition:none}
}

/* Netlify injects a "Powered by Netlify" badge on free-plan sites. The real fix is the switch in
   Netlify: Project configuration > General > Powered by Netlify badge. This is the fallback. */
#nl-badge-frame { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* Sign in with X switched off (xSignIn: false in js/config.js): hide the X parts of the pages */
html.no-x .jn-s1,html.no-x .jn-steps [data-step="1"],html.no-x .jn-x-soon,html.no-x .jn-x,html.no-x #jn-acct-out,html.no-x #jn-fine,html.no-x #mr-account,html.no-x .jn-steps,html.no-x #jn-s2-k{display:none!important}