/* Wildlight Ink: shared styles for the theme ("world") pages.
   Each page sets --c1, --c2, --c3 (its three theme colors) and --tfont (its title font) inline. */
:root{
  color-scheme:dark;
  --night:#050a14;--dusk:#0b1424;--dusk-2:#111d31;
  --rule:rgba(168,188,214,.14);
  --etch:#dfe5ee;--mist:#93a1b7;--fog:#7d8ba3;--paper:#eef1f5;
  --scrim:rgba(3,7,14,.94);
  --c1:#ff5cb0;--c2:#4ee4ff;--c3:#c6ff5c;
  --tgrad:linear-gradient(90deg,var(--c1),var(--c2) 55%,var(--c3));
  --display:"IM Fell English","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Commissioner","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --tfont:var(--display);
  --step--1:clamp(12px,.74rem,13px);
  --step-0:clamp(15px,.96rem + .1vw,17px);
  --step-1:clamp(18px,1.1rem + .3vw,22px);
  --step-2:clamp(24px,1.3rem + 1vw,34px);
  --step-3:clamp(34px,1.6rem + 2.6vw,62px);
  --step-4:clamp(52px,1.6rem + 7.4vw,150px);
  --gutter:clamp(16px,4vw,56px);--max:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--etch);font-family:var(--body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 18%,rgba(223,229,238,.55) 50%,transparent 51%),radial-gradient(1px 1px at 68% 42%,rgba(223,229,238,.4) 50%,transparent 51%),radial-gradient(1.4px 1.4px at 38% 76%,var(--c2) 50%,transparent 51%),radial-gradient(1px 1px at 84% 86%,rgba(223,229,238,.35) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 92% 12%,var(--c1) 50%,transparent 51%);
  background-size:420px 380px,530px 470px,610px 560px,380px 340px,700px 620px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c2);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.eyebrow{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin:0;display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--tgrad);flex:none}
.h2{font-family:var(--display);font-weight:400;font-size:var(--step-3);line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
.h2 em{font-style:italic;color:var(--paper)}
.lede{color:var(--mist);max-width:56ch;margin:0;text-wrap:pretty}
.plate-no{white-space:nowrap;font-family:var(--mono);font-size:var(--step--1);letter-spacing:.08em;color:var(--fog);font-variant-numeric:tabular-nums}
.section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end;gap:18px 48px;margin-bottom:clamp(28px,4vw,52px)}
.section-head > *{min-width:0}
.band{padding-block:clamp(64px,8vw,120px)}
section{scroll-margin-top:72px}

/* buttons */
.btn{--bh:50px;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--bh);padding:0 26px;border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;letter-spacing:.01em;cursor:pointer;border:0;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{color:var(--night);background:var(--paper);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 26px -4px var(--c1),0 0 46px -10px var(--c2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 34px -2px var(--c1),0 0 60px -6px var(--c2)}
.btn-ghost{color:var(--etch);background:rgba(11,20,36,.45);box-shadow:inset 0 0 0 1px rgba(223,229,238,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--c2),0 0 22px -6px var(--c2)}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background-color .35s,box-shadow .35s}
.bar.is-solid{background:rgba(5,10,20,.84);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--rule)}
.bar-in{display:flex;align-items:center;gap:24px;height:68px}
.mark{font-family:var(--display);font-size:24px;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.mark i{font-style:italic}
.mark-dot{width:9px;height:9px;border-radius:50%;background:var(--tgrad);box-shadow:0 0 12px var(--c1),0 0 18px var(--c2)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-size:14px;color:var(--mist);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--etch)}
.bar .btn{--bh:40px;padding:0 18px;font-size:14px}

/* hero */
.whero{position:relative;min-height:clamp(560px,86vh,900px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.whero-media{position:absolute;inset:-4% 0 0 0;z-index:-3;background:var(--night);overflow:hidden;will-change:transform}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;transform:scale(1.04);transition:opacity 1.8s var(--ease)}
.slide.on{opacity:1;animation:kenburns 9s linear both}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.whero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,10,20,.6) 0%,rgba(5,10,20,0) 20%),radial-gradient(ellipse 64% 64% at 12% 84%,rgba(5,10,20,.82) 0%,rgba(5,10,20,.5) 45%,rgba(5,10,20,0) 100%),linear-gradient(0deg,var(--night) 0%,rgba(5,10,20,.88) 16%,rgba(5,10,20,.4) 42%,rgba(5,10,20,0) 66%)}
.whero-fx{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.whero-copy{position:relative;width:100%;padding-block:120px clamp(40px,7vh,80px)}
.whero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:end;gap:32px}
.whero-grid > *{min-width:0}
.crumbs{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:0 0 14px;display:flex;gap:10px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--mist)}.crumbs a:hover{color:var(--etch)}
.wtitle{font-family:var(--tfont);font-weight:400;font-size:var(--step-4);line-height:.92;letter-spacing:-.01em;margin:0;
  background:var(--tgrad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--c1) 45%,transparent)) drop-shadow(0 2px 30px rgba(5,10,20,.7));padding-bottom:.08em}
.wtag{font-size:var(--step-1);line-height:1.45;color:var(--etch);max-width:32ch;margin:18px 0 28px;text-wrap:balance;text-shadow:0 2px 14px rgba(5,10,20,.9)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-label{text-align:right;display:grid;gap:4px;padding-bottom:6px;font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em;color:var(--mist);transition:opacity .5s var(--ease)}
.hero-label.swap{opacity:0}
.hero-label b{font-weight:400;color:var(--etch);font-family:var(--display);font-size:18px;letter-spacing:0;text-wrap:balance}

/* facts strip */
.wfacts{border-block:1px solid var(--rule);background:linear-gradient(180deg,rgba(11,20,36,.6),rgba(5,10,20,0))}
.wfacts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.wfacts li{padding:20px 0;display:flex;align-items:center;gap:12px;color:var(--mist);font-size:14px}
.wfacts li + li{padding-left:24px;border-left:1px solid var(--rule)}
.wfacts b{font-weight:500;color:var(--etch)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--tgrad);box-shadow:0 0 12px var(--c1);flex:none}

/* intro */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.intro > *{min-width:0}
.intro p.big{font-family:var(--display);font-size:var(--step-2);line-height:1.25;margin:0;color:var(--etch);text-wrap:pretty}
.palette{display:flex;gap:10px;margin-top:22px}
.palette i{display:block;width:44px;height:44px;border-radius:50%;box-shadow:0 0 22px -4px currentColor}

/* frames, grids */
.frame-btn{display:block;width:100%;padding:0;border:0;background:var(--dusk);cursor:zoom-in;position:relative;border-radius:3px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(168,188,214,.10);transition:box-shadow .5s var(--ease)}
.frame-btn img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.frame-btn:hover img{transform:scale(1.035)}
.frame-btn:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px var(--glow,var(--c1)),0 0 44px -10px var(--glow,var(--c1))}
.loved-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(16px,2vw,28px)}
.lg{margin:0;min-width:0}
.lg:nth-child(1){grid-column:1 / span 7}
.lg:nth-child(2){grid-column:8 / span 5;margin-top:clamp(30px,8vw,120px)}
.lg:nth-child(3){grid-column:2 / span 5}
.lg:nth-child(4){grid-column:7 / span 6;margin-top:clamp(20px,5vw,70px)}
.lg figcaption,.tile figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;min-width:0}
.lg .t{font-family:var(--display);font-size:var(--step-1);line-height:1.25;color:var(--etch);text-wrap:balance}
.love{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--night);background:var(--tgrad);padding:3px 9px;border-radius:99px;position:absolute;top:12px;left:12px;z-index:2}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,36px) clamp(14px,1.8vw,26px)}
.tile{margin:0;min-width:0;position:relative}
.tile .t{font-size:14.5px;line-height:1.4;color:var(--etch);min-width:0}
.tile .plate-no{flex:none}

/* wear it */
.wear{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding:28px 32px;border-radius:6px;background:linear-gradient(120deg,color-mix(in srgb,var(--c1) 14%,transparent),color-mix(in srgb,var(--c2) 10%,transparent) 60%,transparent);box-shadow:inset 0 0 0 1px var(--rule)}
.wear p{margin:0;color:var(--etch);font-size:var(--step-1);max-width:46ch}
.wear .chips-p{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wear .chips-p span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mist);padding:4px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--rule)}

/* other worlds */
.others{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.other{position:relative;display:flex;align-items:flex-end;min-height:clamp(150px,15vw,210px);border-radius:3px;overflow:hidden;text-decoration:none;isolation:isolate;box-shadow:0 0 0 1px rgba(168,188,214,.10);transition:box-shadow .4s var(--ease)}
.other img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.other::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,10,20,.95) 0%,rgba(5,10,20,.55) 40%,rgba(5,10,20,.05) 75%)}
.other:hover img{transform:scale(1.05)}
.others.no-haunt > :first-child,html.season-halloween .others.has-haunt > :first-child{grid-column:span 2}
html:not(.season-halloween) .others.has-haunt{grid-template-columns:repeat(3,minmax(0,1fr))}
.other:hover{box-shadow:0 0 0 1px var(--oc1),0 0 40px -12px var(--oc1)}
.other span{padding:14px 16px;display:grid;gap:2px}
.other b{font-family:var(--display);font-weight:400;font-size:var(--step-1);color:var(--paper)}
.other small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(90deg,var(--oc1),var(--oc2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* closer + footer */
.closer{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(90px,12vw,180px);text-align:center}
.closer-bg{position:absolute;inset:0;z-index:-2;background-position:50% 50%;background-size:cover;opacity:.5}
.closer::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 50%,rgba(5,10,20,.35),var(--night) 92%)}
.closer .h2{max-width:18ch;margin-inline:auto}
.closer p{color:var(--etch);margin:18px auto 30px;max-width:44ch}
.spectrum-rule{height:2px;background:var(--tgrad);opacity:.85;box-shadow:0 0 14px var(--c1)}
footer{border-top:1px solid var(--rule);padding-block:44px 36px}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:32px}
.foot > *{min-width:0}
.foot .mark{font-size:28px}
.foot p{color:var(--fog);font-size:14px;margin:12px 0 0;max-width:40ch}
.foot h2,.foot h4{font-family:var(--mono);font-weight:400;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--fog);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot ul a{color:var(--mist);text-decoration:none;font-size:14.5px}
.foot ul a:hover{color:var(--etch)}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--fog);font-size:13px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:var(--scrim);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lb-top{display:flex;justify-content:space-between;align-items:center;height:52px}
.lb-count{font-family:var(--mono);font-size:13px;color:var(--mist);letter-spacing:.06em}
.icon-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(223,229,238,.25);background:rgba(11,20,36,.6);display:grid;place-items:center;cursor:pointer;color:var(--etch);transition:border-color .2s,box-shadow .2s}
.icon-btn:hover{border-color:var(--c2);box-shadow:0 0 18px -4px var(--c2)}
.icon-btn svg{width:20px;height:20px}
.lb-stage{position:relative;display:grid;place-items:center;min-height:0;touch-action:pan-y}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:0 30px 80px -20px rgba(0,0,0,.9);user-select:none;transition:opacity .25s}
.lb-stage img.is-loading{opacity:.35}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:0}.lb-next{right:0}
.lb-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding-top:16px;max-width:1200px;width:100%;margin-inline:auto}
.lb-title{font-family:var(--display);font-size:var(--step-2);line-height:1.15;margin:4px 0 0}
.lb-meta{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.08em;color:var(--mist)}
.lb .btn{--bh:44px}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.whero-copy .crumbs,.wtitle,.wtag,.cta-row,.hero-label{animation:rise 1s var(--ease) both}
.wtitle{animation-delay:.08s}.wtag{animation-delay:.2s}.cta-row{animation-delay:.3s}.hero-label{animation-delay:.45s}
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.pre{opacity:0;transform:translateY(32px)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .fx-anim{display:none!important}
}

/* responsive */
@media (max-width:1080px){.nav{display:none}.bar .btn{margin-left:auto}.others,html:not(.season-halloween) .others.has-haunt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .section-head,.intro{grid-template-columns:minmax(0,1fr)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loved-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lg:nth-child(n){grid-column:auto;margin-top:0}
  .lg:nth-child(1){grid-column:1 / -1}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot > :first-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .bar-in{height:60px}.mark{font-size:21px}
  .whero{min-height:0;display:block;padding-top:clamp(280px,78vw,380px)}
  .whero-media{inset:0 0 auto 0;height:clamp(360px,104vw,480px)}
  .whero::after{background:linear-gradient(180deg,rgba(5,10,20,.55) 0%,rgba(5,10,20,0) 14%,rgba(5,10,20,0) clamp(160px,44vw,230px),var(--night) clamp(350px,100vw,470px))}
  .whero-fx{height:clamp(360px,104vw,480px);bottom:auto}
  .whero-copy{padding-block:0 32px}
  .whero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-label{text-align:left}
  .cta-row .btn{flex:1 1 auto}
  .wfacts ul{grid-template-columns:minmax(0,1fr)}
  .wfacts li + li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .loved-grid{grid-template-columns:minmax(0,1fr)}
  .grid{gap:22px 12px}
  .tile figcaption{flex-direction:column;gap:2px;margin-top:8px}
  .tile .t{font-size:13.5px}
  .others{gap:10px}
  .wear{padding:22px 20px}
  .lb-prev,.lb-next{top:auto;bottom:4px;transform:none}
  .lb-stage img{max-height:calc(100% - 64px)}
}
.legal a{color:var(--mist);text-underline-offset:3px}.legal a:hover{color:var(--paper)}

.lb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lb-share svg{width:17px;height:17px}
.lb-share.done{border-color:var(--c3);color:var(--c3)}
.next-world{display:inline-flex;align-items:baseline;gap:12px;margin-top:34px;padding:12px 22px;border-radius:999px;text-decoration:none;border:1px solid transparent;background:linear-gradient(rgba(5,10,20,.7),rgba(5,10,20,.7)) padding-box,linear-gradient(90deg,var(--nc1),var(--nc2)) border-box;transition:box-shadow .25s,transform .25s}
.next-world small{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.next-world b{font-family:var(--display);font-weight:400;font-size:var(--step-1);background:linear-gradient(90deg,var(--nc1),var(--nc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.next-world span{color:var(--nc2)}
.next-world:hover{box-shadow:0 0 26px -6px var(--nc1);transform:translateY(-2px)}