/* ============================================================
   CARTER SOCIETY — THE FINAL ARCHIVE · homepage
   Two pinned stages driven by scroll (the vault into the archive,
   then THE LINE UP), then the table of papers and this week's archive.
   ============================================================ */
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--bone);color:var(--ink);padding:12px 16px;font:700 12px var(--ui);letter-spacing:.14em}
.skip:focus{top:12px}
.track{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
.layer{position:absolute;inset:0}
#vaultCanvas,#panoCanvas{width:100%;height:100%;display:block}
#panoCanvas{opacity:0}

/* intro */
#dark{background:#000;pointer-events:none}
#intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;pointer-events:none;padding:0 16px}
#intro .name{margin:0;font:600 clamp(48px,10vw,140px)/.9 var(--display);letter-spacing:.06em}
#intro .yrs{font:400 clamp(12px,1.4vw,16px)/1 var(--mono);letter-spacing:.5em;color:var(--dim);margin-top:6px}
#intro .go{margin-top:30px;font:400 10px/1 var(--mono);letter-spacing:.3em;color:var(--dim)}
#intro .go::after{content:"";display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(var(--orange),rgba(242,84,27,0));animation:stem 1.8s ease-in-out infinite}
@keyframes stem{0%,100%{opacity:.3}50%{opacity:1}}
#loader{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);width:120px;height:1px;margin-left:-60px;background:rgba(239,232,220,.12);transition:opacity .6s}
#loader i{display:block;height:100%;width:0;background:var(--orange);transition:width .3s}
#loader.done{opacity:0}

#hudfade{pointer-events:none;opacity:0;background:linear-gradient(rgba(10,9,8,0) 62%,rgba(10,9,8,.78) 100%)}
.vignette{background:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);pointer-events:none}
#flash{pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 48%, #fff4e0 0%, #ffcf8f 40%, rgba(242,120,40,.6) 100%)}

/* the combination */
#counter{position:absolute;right:max(16px,4vw);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;opacity:0;padding:16px 18px;background:rgba(10,9,8,.72);border:1px solid #3a352f;pointer-events:none}
.clabel{font:400 10px/1 var(--mono);letter-spacing:.26em;color:var(--dim)}
.digits{display:flex;gap:6px}
.dg{--h:clamp(44px,5vw,74px);position:relative;width:calc(var(--h)*.7);height:var(--h);overflow:hidden;border:1px solid #5a544c;background:var(--ink-2);font:700 calc(var(--h)*.66)/1 var(--mono);font-variant-numeric:tabular-nums}
.dg>span,.reel>span{height:var(--h);display:flex;align-items:center;justify-content:center}
.reel{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.dg.last.done{border-color:var(--orange);color:var(--orange);box-shadow:0 0 18px rgba(242,84,27,.35)}
.csub{font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--orange)}
.csub.blink{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
#stamp{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%) rotate(-5deg) scale(var(--st,1.4));opacity:0;white-space:nowrap;pointer-events:none;
  border:3px solid var(--orange);color:var(--orange);background:rgba(10,9,8,.72);padding:.35em .8em;font:700 clamp(16px,2.6vw,32px)/1 var(--mono);letter-spacing:.22em}

/* year tiles under the dial */
#years{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);display:flex;gap:clamp(6px,.8vw,12px);opacity:0;pointer-events:none}
.yr{position:relative;width:clamp(46px,6.2vw,100px);aspect-ratio:4/5;overflow:hidden;border:1px solid #4a453e;background:#141210;box-shadow:0 14px 30px rgba(0,0,0,.65);transition:border-color .4s}
.yr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.18);filter:brightness(1.9);transition:opacity .6s,transform 1s cubic-bezier(.2,.8,.2,1),filter 1s}
.yr .shutter{position:absolute;inset:0;transform-origin:50% 0;background:repeating-linear-gradient(0deg,#2e3033 0 5px,#1f2023 5px 6px);transition:transform .75s cubic-bezier(.7,0,.2,1)}
.yr .shutter svg{position:absolute;left:50%;top:40%;width:34%;height:auto;transform:translate(-50%,-50%);opacity:.75}
.yr .y{position:absolute;left:0;right:0;bottom:0;padding:6px 7px;font:700 clamp(9px,.95vw,12px)/1 var(--mono);letter-spacing:.14em;color:var(--dim);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8))}
.yr.open{border-color:var(--orange)}
.yr.open img{opacity:1;transform:none;filter:none}
.yr.open .shutter{transform:scaleY(0)}
.yr.open .y{color:var(--bone)}
.yr.last.open{background:var(--orange)}
.yr.last.open .y{color:var(--ink);background:none}
.yr.last .opentxt{opacity:0;transition:opacity .4s .3s;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(9px,1vw,13px)/1.2 var(--mono);letter-spacing:.16em;color:var(--ink);text-align:center}
.yr.last.open .opentxt{opacity:1}
.yr.noimg .shutter{background:repeating-linear-gradient(0deg,#2e3033 0 5px,#1f2023 5px 6px)}

@media (max-aspect-ratio:1/1){
  #counter{right:auto;left:50%;top:calc(env(safe-area-inset-top,0px) + var(--header) + 16px);transform:translateX(-50%);align-items:center;padding:12px 14px}
  #counter .dg{--h:44px}
  .csub{white-space:nowrap;letter-spacing:.14em}
  #years{bottom:calc(env(safe-area-inset-bottom,0px) + 86px)}
  #stamp{top:50%}
}

/* ============ the archive: deposit boxes on a curve ============ */
#archive{--Pp:1300px;--R:1500px;--cw:236px;perspective:var(--Pp);perspective-origin:50% 50%;overflow:hidden;opacity:0;visibility:hidden}
@media (max-width:640px){#archive{--Pp:700px;--R:800px;--cw:176px}}
#ring{position:absolute;inset:0;transform-style:preserve-3d}
.ar-title{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--header) + 14px);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 16px;pointer-events:none}
.ar-title h2{margin:0;font:600 clamp(34px,5.2vw,80px)/.9 var(--display);letter-spacing:.03em;text-shadow:0 0 40px rgba(255,140,60,.25),0 2px 24px rgba(0,0,0,.85)}
.vs{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
.vs span{font:400 9px/1 var(--mono);letter-spacing:.24em;color:var(--bone);text-shadow:0 1px 8px #000}
.ar-nav{position:absolute;left:max(16px,4vw);bottom:calc(env(safe-area-inset-bottom,0px) + 26px);font:400 11px/1 var(--mono);letter-spacing:.24em;color:var(--bone-2);text-shadow:0 1px 6px #000}
.rc{position:absolute;left:50%;top:58%;width:var(--cw);margin-left:calc(var(--cw)/-2);display:flex;flex-direction:column;align-items:center;gap:12px;transform-style:preserve-3d;will-change:transform}
.dcol{width:100%;display:flex;flex-direction:column;gap:6px;padding:8px;background:linear-gradient(90deg,#141416,#26272a 50%,#141416);border:1px solid #3a3b3f;box-shadow:0 30px 60px rgba(0,0,0,.6);transform-style:preserve-3d;transition:border-color .4s,box-shadow .4s}
.sbox,.door .df{position:relative;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(160deg,#6a6d72,#44474c 45%,#35373b);border:1px solid #1b1c1f;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 4px rgba(0,0,0,.4)}
.sbox{height:calc(var(--cw)*.2)}
.pl{position:absolute;left:8px;top:8px;background:linear-gradient(#d6bd84,#a78850);color:#2a2112;font:700 9px/1 var(--mono);letter-spacing:.12em;padding:3px 6px;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.kh{position:absolute;bottom:9px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#050505 40%,#2a2b2e 45%,#7d8085 70%)}
.kh.a{right:26px}.kh.b{right:10px}
.mbox{position:relative;height:calc(var(--cw)*1.18);background:#070605;border:1px solid #1b1c1f;box-shadow:inset 0 0 30px rgba(0,0,0,.9);perspective:900px;transform-style:preserve-3d;display:block}
.inner{position:absolute;inset:6px;overflow:hidden;background:#0e0b08;transition:transform .7s .35s cubic-bezier(.2,.8,.2,1),filter .7s .35s;filter:brightness(.4);transform:translateZ(-20px)}
.inner img{width:100%;height:100%;object-fit:cover;filter:sepia(.12) contrast(1.05)}
.inner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(255,200,140,.32),rgba(255,200,140,0) 40%);mix-blend-mode:screen}
.rc.on .inner{transform:translateZ(26px);filter:none}
.door{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.6,0,.2,1)}
.door .df,.door .db{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.door .db{transform:rotateY(180deg);background:linear-gradient(90deg,#1c1d20,#2c2d31);border:1px solid #111}
.rc.on .door{transform:rotateY(-112deg)}
.door .nm2{position:absolute;left:6px;right:6px;top:44%;text-align:center;font:700 calc(var(--cw)*.066)/1.15 var(--mono);letter-spacing:.2em;color:#101113;text-shadow:0 1px 0 rgba(255,255,255,.4),0 -1px 0 rgba(0,0,0,.5)}
.door .hd{position:absolute;right:14px;top:50%;width:14px;height:34%;transform:translateY(-50%);border-radius:7px;background:linear-gradient(90deg,#8a8e93,#d7dadd 45%,#6b6f74);box-shadow:-3px 0 6px rgba(0,0,0,.45)}
.door .rv{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9ccd0,#55585c)}
.rc.gone .inner img{display:none}
.rc .cl{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%) rotate(-8deg);z-index:2;border:2px solid var(--orange);color:var(--orange);background:rgba(10,9,8,.55);padding:4px 9px;font:700 12px/1 var(--mono);letter-spacing:.2em;white-space:nowrap}
.stat{height:auto!important;padding:10px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.stat .lf{font:700 10px/1.3 var(--mono);letter-spacing:.14em;color:var(--bone);text-shadow:0 1px 3px #000;text-align:center}
.stat .lf small{display:block;font-weight:400;font-size:9px;color:var(--bone-2)}
.rc.on .dcol{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 0 40px rgba(242,84,27,.3),0 30px 60px rgba(0,0,0,.6)}
.rc .go{min-height:44px;padding:0 14px;display:inline-flex;align-items:center;background:var(--orange);color:var(--ink);font:700 10px/1 var(--ui);letter-spacing:.16em;visibility:hidden;white-space:nowrap}
.rc .go:hover{color:var(--ink);background:#ff6a33}
.rc.on .go{visibility:visible}
.rc.gone .go{display:none}
.flp{display:flex;gap:2px;justify-content:center;perspective:200px}
.flp i{font-style:normal;display:block;width:var(--fw,14px);height:calc(var(--fw,14px)*1.6);border-radius:2px;background:linear-gradient(#232326 0 48%,#0b0b0c 48% 52%,#1c1c1f 52%);color:var(--bone);font:700 calc(var(--fw,14px)*.9)/calc(var(--fw,14px)*1.6) var(--mono);text-align:center}
.flp.hot i{color:#ff7a3d}
.flp i.f{animation:flip .08s linear}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-80deg)}100%{transform:rotateX(0)}}
@media (max-width:640px){.rc .flp{--fw:11px}#statusFlap{--fw:12px}}

/* ============ Final Days ============ */
#finaldays{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:120px;padding-inline:var(--gutter);overflow:hidden;border-top:1px solid var(--line)}
#finaldays>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(1) brightness(.42)}
.fd{position:relative;display:flex;flex-direction:column;gap:22px;max-width:680px}
.fd .rule{width:48px;height:2px;background:var(--bone)}
.fd h2{margin:0;font:600 clamp(60px,10vw,128px)/.88 var(--display);letter-spacing:.02em}
.fd p{margin:0;font-size:17px;line-height:1.5;letter-spacing:.03em}
.count{display:flex;gap:clamp(18px,4vw,40px)}
.count div{display:flex;flex-direction:column;gap:6px}
.count b{font:600 clamp(44px,6vw,68px)/1 var(--display);font-variant-numeric:tabular-nums}
.count div:first-child b{color:var(--orange)}
.count span{font:400 10px/1 var(--mono);letter-spacing:.24em}
.fd .btn{align-self:flex-start}
.fd small{font:400 11px/1.5 var(--mono);letter-spacing:.2em;color:var(--bone-2)}
.fd-note{position:absolute;right:var(--gutter);bottom:clamp(40px,10vh,100px);font-size:clamp(28px,3vw,42px);transform:rotate(-6deg)}
@media (max-width:640px){.fd-note{display:none}}
.fd-vault{display:none;align-self:flex-start;font:700 11px/1 var(--mono);letter-spacing:.2em;color:var(--bone);border-bottom:1px solid var(--orange);padding:6px 0 4px}
.fd-vault:hover{color:var(--orange)}

/* ============ ad visitors: no vault film, straight to the shop ============ */
html.fast #track1,html.fast .skip,html.fast #soundBtn{display:none}
html.fast #finaldays{border-top:0;padding-top:calc(var(--header) + env(safe-area-inset-top,0px) + 56px)}
html.fast .fd-vault{display:inline-block}
@media (max-width:640px){html.fast #finaldays{min-height:88svh;padding-bottom:72px}}

/* ============ THE LINE UP ============ */
#stage2{background:#0c0b0a}
.lampglow{position:absolute;left:50%;top:0;width:min(150vw,1500px);height:92%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%, rgba(255,236,205,.24), rgba(255,236,205,0) 62%);pointer-events:none}
.shade{position:absolute;left:50%;top:0;transform:translateX(-50%);width:70px;height:auto}
.floor2{position:absolute;left:0;right:0;bottom:0;height:21%;background:linear-gradient(#1c1a16,#0e0d0b);border-top:1px solid #2a2723}
.floor2::after{content:"";position:absolute;left:50%;top:0;width:70vw;height:70%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%, rgba(255,236,205,.16), rgba(0,0,0,0) 70%)}
.strip{position:absolute;left:0;display:flex;will-change:transform}
#lineStrip{bottom:21%;align-items:flex-end;gap:clamp(14px,3vw,48px)}
.person{position:relative;width:clamp(150px,18vw,270px);height:min(54svh,580px);display:block;color:var(--ink)}
.person img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.22) brightness(.5) contrast(1.1);transition:filter .7s,transform .7s;transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
.person.on img{filter:none;transform:scale(1.03)}
.ptag{position:absolute;left:50%;top:calc(100% + 16px);transform:translateX(-50%) rotate(var(--r,-2deg));display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  background:var(--paper);color:var(--ink);padding:8px 10px;font:400 10px/1.35 var(--mono);letter-spacing:.06em;white-space:nowrap;box-shadow:0 8px 16px rgba(0,0,0,.4)}
.ptag::before{content:"";position:absolute;left:50%;top:-16px;width:1px;height:16px;background:#8a8378}
.ptag b{font-weight:700;font-size:12px}
.ptag s{color:#6d665b}
.ptag .shop{margin-top:4px;min-height:40px;padding:0 12px;display:inline-flex;align-items:center;background:var(--orange);color:var(--ink);font:700 10px/1 var(--ui);letter-spacing:.18em;visibility:hidden}
.person.on .shop{visibility:visible}
.person:hover{color:var(--ink)}
.lu-title{position:absolute;left:var(--gutter);top:calc(env(safe-area-inset-top,0px) + var(--header) + 24px);display:flex;flex-direction:column;gap:10px;max-width:300px}
.lu-title h2{margin:0;font:600 clamp(44px,5.4vw,80px)/.9 var(--display);letter-spacing:.03em}
.lu-title p{margin:0;font-size:14px;line-height:1.55;color:var(--bone-2)}
@media (max-aspect-ratio:4/5){#lineStrip{bottom:27%}.floor2{height:27%}.person{height:42svh}.lu-title p{display:none}}

/* ============ the papers on the table ============ */
.concrete{position:relative;overflow:hidden;background-color:#2C2A27;background-image:radial-gradient(ellipse at 18% 28%, rgba(239,232,220,.05), rgba(239,232,220,0) 42%),radial-gradient(ellipse at 78% 72%, rgba(0,0,0,.28), rgba(0,0,0,0) 48%),radial-gradient(ellipse at 55% 15%, rgba(0,0,0,.18), rgba(0,0,0,0) 35%)}
#legacy{padding:clamp(48px,7vw,80px) var(--gutter) clamp(56px,8vw,100px);border-top:1px solid var(--line)}
.lg-head{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.lg-head h2{margin:8px 0 0;font:600 clamp(38px,4.4vw,60px)/.95 var(--display)}
.table{position:relative;height:640px;margin-top:20px}
.tp{position:absolute;display:flex;flex-direction:column;gap:8px;width:clamp(250px,24.5vw,360px);aspect-ratio:400/520;padding:16px 20px 18px;background:#E6DDC8;color:#1B1915;border:0;text-align:left;cursor:pointer;
  box-shadow:0 18px 34px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4),inset 0 0 90px rgba(110,80,30,.3);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;transform:rotate(var(--r)) translateY(0)}
.tp::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),repeating-linear-gradient(0deg,rgba(60,45,20,.035) 0 1px,rgba(0,0,0,0) 1px 3px)}
.tp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;background:linear-gradient(rgba(60,45,20,0),rgba(60,45,20,.22))}
.tp:hover,.tp:focus-visible{transform:rotate(calc(var(--r) * .4)) translateY(-18px) scale(1.02);box-shadow:0 44px 70px rgba(0,0,0,.65),0 4px 8px rgba(0,0,0,.4),inset 0 0 90px rgba(110,80,30,.3);z-index:9!important}
.tp .mast{font:400 clamp(24px,2.4vw,34px)/1 'UnifrakturMaguntia',serif;text-align:center}
.tp .date{display:flex;justify-content:space-between;border-top:1px solid #1B1915;border-bottom:3px double #1B1915;padding:3px 0;font:400 9.5px/1.4 'Old Standard TT',Georgia,serif;letter-spacing:.14em}
.tp .hl{margin:0;font:700 clamp(22px,2.3vw,34px)/.95 'Old Standard TT',Georgia,serif;text-wrap:balance;text-transform:uppercase}
.tp .ht{position:relative;overflow:hidden;background:#D6CCB5;flex:1;min-height:0}
.tp .ht img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.35) brightness(1.05);mix-blend-mode:multiply}
.tp .ht::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(27,25,21,.55) .9px,transparent 1.4px);background-size:3.5px 3.5px;mix-blend-mode:multiply;opacity:.55}
.tp .teaser{margin:0;font:400 12px/1.4 'Old Standard TT',Georgia,serif;column-count:2;column-gap:14px;max-height:5.6em;overflow:hidden}
.tp .read{position:absolute;right:-14px;top:36%;background:var(--orange);color:var(--ink);padding:7px 11px;font:700 11px/1 var(--mono);letter-spacing:.16em;transform:rotate(4deg);box-shadow:0 8px 16px rgba(0,0,0,.35);z-index:2;opacity:0;transition:opacity .3s}
.tp:hover .read,.tp:focus-visible .read,.tp.front .read{opacity:1}
.lg-foot{position:relative;z-index:5;display:flex;justify-content:space-between;gap:16px;border-top:1px solid #45413B;padding-top:14px;margin-top:10px}
@media (max-width:900px){
  .table{height:auto;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 4px 40px;margin:10px calc(var(--gutter) * -1) 0;padding-inline:var(--gutter);scrollbar-width:none}
  .table::-webkit-scrollbar{display:none}
  .tp{position:relative;left:auto!important;top:auto!important;flex:0 0 min(78vw,340px);scroll-snap-align:center}
  .lg-hint{display:none}
}

/* the opened story */
.story{position:fixed;inset:0;z-index:92;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 70px) 16px 60px}
.story[hidden]{display:none}
.story-bg{position:fixed;inset:0;background:rgba(10,9,8,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.story-paper{position:relative;width:min(860px,100%);background:#E6DDC8;color:#1B1915;padding:clamp(22px,4vw,48px);box-shadow:0 40px 90px rgba(0,0,0,.7),inset 0 0 140px rgba(110,80,30,.3);transform-origin:50% 0;animation:unfold .6s cubic-bezier(.2,.8,.2,1)}
@keyframes unfold{0%{transform:perspective(1200px) rotateX(-70deg) scale(.9);opacity:0}100%{transform:none;opacity:1}}
.story-paper .mast{font:400 clamp(34px,6vw,64px)/1 'UnifrakturMaguntia',serif;text-align:center}
.story-paper .date{display:flex;justify-content:space-between;border-top:1px solid #1B1915;border-bottom:3px double #1B1915;padding:4px 0;margin:10px 0 18px;font:400 11px/1.4 'Old Standard TT',Georgia,serif;letter-spacing:.14em}
.story-paper .kick{font:700 11px/1 var(--mono);letter-spacing:.22em;color:#8a3a14}
.story-paper h3{margin:8px 0 18px;font:700 clamp(34px,5.4vw,62px)/.95 'Old Standard TT',Georgia,serif;text-transform:uppercase;text-wrap:balance}
.story-paper figure{margin:0 0 20px;position:relative;background:#D6CCB5}
.story-paper figure img{width:100%;max-height:440px;object-fit:cover;filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply}
.story-paper figcaption{font:italic 400 12px/1.4 'Old Standard TT',Georgia,serif;margin-top:6px;color:#4a443a}
.story-paper .body{column-count:2;column-gap:28px;font:400 16px/1.6 'Old Standard TT',Georgia,serif}
.story-paper .body p{margin:0 0 12px}
.story-paper .body p:first-child::first-letter{float:left;font-size:3.4em;line-height:.85;padding:4px 6px 0 0;font-weight:700}
@media (max-width:640px){.story-paper .body{column-count:1}}
.story-buy{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:2px solid #1B1915}
.story-buy img{width:88px;height:110px;object-fit:cover;background:#cfc5ae}
.story-buy .nm{font:700 16px/1.2 'Old Standard TT',Georgia,serif}
.story-buy .pr{font:400 13px/1.4 var(--mono)}
.story-buy .pr s{color:#6d665b}
.story-buy .btn{margin-left:auto}
.story-paper .deck{margin:-6px 0 18px;font:italic 400 clamp(17px,2vw,21px)/1.4 'Old Standard TT',Georgia,serif;color:#3a342c;max-width:60ch}
.story-paper .pull{column-span:all;margin:14px 0 18px;padding:12px 0;border-top:1px solid #1B1915;border-bottom:1px solid #1B1915;font:italic 700 clamp(22px,3vw,30px)/1.2 'Old Standard TT',Georgia,serif;text-align:center}
.story-shop{margin-top:26px;border-top:3px double #1B1915;padding-top:14px}
.ss-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:700 11px/1.2 var(--mono);letter-spacing:.2em}
.ss-head span:last-child{font-weight:400;color:#5a5347}
.ss-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:14px}
.ss-item{display:flex;flex-direction:column;gap:4px;color:#1B1915}
.ss-item:hover{color:#1B1915}
.ss-item .im{display:block;aspect-ratio:4/5;overflow:hidden;background:#d6ccb5;margin-bottom:6px;border:1px solid rgba(27,25,21,.25)}
.ss-item .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;transition:filter .45s,transform .6s}
.ss-item:hover .im img,.ss-item:focus-visible .im img{filter:none;mix-blend-mode:normal;transform:scale(1.03)}
.ss-item .nm{font:700 14px/1.2 'Old Standard TT',Georgia,serif}
.ss-item .cl{font:400 10px/1.3 var(--mono);letter-spacing:.14em;color:#5a5347;text-transform:uppercase}
.ss-item .pr{font:700 13px/1.3 var(--mono)}
.ss-item .pr s{font-weight:400;color:#6d665b}
.ss-item .low{font:700 10px/1.3 var(--mono);letter-spacing:.1em;color:#b33a0e}
.ss-item .ok{font:400 10px/1.3 var(--mono);letter-spacing:.1em;color:#5a5347}
.ss-item .go{margin-top:4px;align-self:flex-start;font:700 10px/1.4 var(--mono);letter-spacing:.16em;border-bottom:1px solid currentColor}
.ss-item:hover .go{color:#b33a0e}
.ss-item.gone .im img{opacity:.5}
.ss-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.ss-foot .ss-next{border-color:#1B1915;color:#1B1915;margin-left:auto}
.ss-foot .ss-next:hover{background:#1B1915;color:var(--paper)}
.ss-wait{grid-column:1/-1;font:italic 400 14px 'Old Standard TT',Georgia,serif}
@media (max-width:640px){.ss-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ss-foot .ss-next{margin-left:0}}
.story-close{position:fixed;right:16px;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:3;width:48px;height:48px;border-radius:50%;background:var(--bone);color:var(--ink);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ============ this week's archive ============ */
#weekly{padding:clamp(56px,7vw,80px) var(--gutter);display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px 40px;border-top:1px solid var(--line)}
.wk-intro{display:flex;flex-direction:column;gap:16px}
.wk-intro h2{margin:0;font:600 clamp(40px,4vw,54px)/.95 var(--display)}
.wk-intro .eyebrow{line-height:1.8}
.wk-intro .btn{align-self:flex-start}
.wk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;min-height:240px}
.deal{position:relative;overflow:hidden;border:1px solid var(--line);display:block;min-height:240px;color:var(--bone)}
.deal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.deal:hover img{transform:scale(1.04);filter:brightness(.7)}
.deal>span{position:absolute;left:16px;right:16px;bottom:14px;display:flex;flex-direction:column;gap:3px}
.deal b{font-size:13px;letter-spacing:.14em;font-weight:600;text-transform:uppercase}
.deal .t{font-size:13px;letter-spacing:.1em;color:var(--orange);text-transform:uppercase;font-weight:600}
.deal small{font-size:12px;color:var(--bone-2);line-height:1.4}
.deal:hover{color:var(--bone)}
.wk-picks{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:28px}
.wk-picks .pcard .ph{aspect-ratio:4/5}
@media (max-width:1000px){#weekly{grid-template-columns:1fr}.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-picks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* closing band */
#closing{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);border-top:1px solid var(--line);min-height:260px}
#closing img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
#closing>div{padding:40px var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:14px}
#closing h2{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.1;font-weight:400;transform:rotate(-3deg);transform-origin:left}
#closing p{margin:0;color:var(--bone-2);max-width:48ch}
@media (max-width:760px){#closing{grid-template-columns:1fr}#closing img{height:260px}}

/* sound toggle */
.sound{position:fixed;left:max(16px,2vw);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:70;min-height:44px;padding:0 14px;border:1px solid #4a453e;background:rgba(10,9,8,.6);color:var(--bone);font:400 10px/1 var(--mono);letter-spacing:.2em;cursor:pointer;transition:opacity .3s}
.sound[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}
.sound.hide{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  #intro .go::after,.csub.blink{animation:none}
  .yr img,.yr .shutter,.door,.inner{transition:none}
  .story-paper{animation:none}
}