/* ==========================================================================
   50 for 50 — a standalone presentation of the year.
   Paper and ink, one serif for voice (Newsreader), one mono for data.
   Colour carries meaning only: each kind of goal owns one hue.
   ========================================================================== */

@property --ring { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --p    { syntax: '<number>'; inherits: true;  initial-value: 0; }

:root{
  --paper:#f4efe6; --paper-2:#ece5d7; --paper-3:#e0d7c4;
  --ink:#1c1915; --ink-2:#4f493f; --ink-3:#8b8373; --line:#d6ccb9;
  --night:#15130f; --night-2:#1f1c17; --night-3:#2c2821; --night-ink:#efe8da; --night-ink-2:#bdb4a2; --night-ink-3:#857c6b;

  /* one hue per kind of goal */
  --food:#c8412b; --media:#2c5289; --music:#7c3c6f; --learning:#b98519; --body:#3f7b3f;
  --habit:#1d7a77; --making:#b3602b; --travel:#4f86b8; --experience:#cf5f86; --personal:#8b8373;

  --serif:'Newsreader',ui-serif,Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:99;background:var(--ink);color:var(--paper);padding:8px 12px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
[hidden]{display:none!important}

.kicker{font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance}
h2{font-size:clamp(40px,6.4vw,84px);line-height:.98;letter-spacing:-.025em;font-variation-settings:'opsz' 72}
h3{font-size:22px;letter-spacing:-.01em}
.dek{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:60ch;margin:18px 0 0;text-wrap:pretty}
.chip{font:500 12px/1 var(--mono);letter-spacing:.03em;padding:8px 12px;border:1px solid var(--line);background:transparent;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c)}
.chip .n{opacity:.6}

/* ---------------------------------------------------------------- top bar */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;height:56px;padding-inline:var(--gutter);
  background:color-mix(in oklab,var(--paper) 86%,transparent);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid color-mix(in oklab,var(--line) 70%,transparent);font:500 12px/1 var(--mono);letter-spacing:.03em;transition:background .3s,color .3s,border-color .3s}
.bar .home{text-decoration:none;color:var(--ink-3);white-space:nowrap}
.bar .home:hover{color:var(--ink)}
.bar .mark{font:600 20px/1 var(--serif);text-decoration:none;letter-spacing:-.02em}
.bar .mark i{font-weight:400;margin:0 .12em;color:var(--food)}
.chapters{display:flex;gap:16px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.chapters a{text-decoration:none;color:var(--ink-3);white-space:nowrap;padding:6px 0;position:relative}
.chapters a:hover,.chapters a[aria-current]{color:var(--ink)}
.chapters a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
.menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:transparent;padding:7px 12px;border-radius:99px;cursor:pointer;font:500 12px/1 var(--mono)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;background:var(--food);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@supports (animation-timeline: scroll()){
  .progress span{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
body.on-night .bar{background:color-mix(in oklab,var(--night) 82%,transparent);color:var(--night-ink);border-color:var(--night-3)}
body.on-night .bar .home,body.on-night .chapters a{color:var(--night-ink-3)}
body.on-night .chapters a:hover,body.on-night .chapters a[aria-current]{color:var(--night-ink)}
#menu{margin:60px 12px auto auto;border:1px solid var(--line);background:var(--paper);padding:10px;border-radius:14px;width:min(280px,calc(100vw - 24px));box-shadow:0 18px 50px -20px rgba(28,25,21,.35)}
#menu a{display:block;padding:9px 10px;border-radius:8px;text-decoration:none;font:500 14px/1.2 var(--mono)}
#menu a:hover{background:var(--paper-2)}
#menu::backdrop{background:rgba(28,25,21,.15)}
@media (max-width:980px){.chapters{display:none}.menu-btn{display:block}.bar .home{font-size:0}.bar .home span{font-size:16px}}

/* ---------------------------------------------------------------- hero */
/* The opening: a dark band with the year as a mosaic of fifty tiles. */
.hero{position:relative;background:var(--night);color:var(--night-ink);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 70% at 78% 45%,color-mix(in oklab,var(--food) 16%,transparent),transparent 70%),radial-gradient(40% 50% at 10% 90%,color-mix(in oklab,var(--media) 18%,transparent),transparent 70%)}
.hero-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.24fr);gap:clamp(28px,4.5vw,72px);align-items:center;min-height:calc(100svh - 56px);padding-block:clamp(40px,7vh,88px) clamp(80px,12vh,128px)}
.hero .kicker{color:var(--night-ink-3)}
.hero h1{font-size:clamp(46px,5.7vw,100px);line-height:.93;letter-spacing:-.038em;font-weight:450;font-variation-settings:'opsz' 72;color:var(--night-ink)}
.hero h1 .l{display:block;opacity:0;transform:translateY(.35em);animation:rise .9s var(--ease) forwards;animation-delay:calc(var(--d) * 120ms + 100ms)}
.hero h1 em{display:block;font-style:italic;font-weight:350;color:#e1563c;margin-top:.1em;opacity:0;transform:translateY(.35em);animation:rise .9s var(--ease) forwards;animation-delay:2.1s}
@keyframes rise{to{opacity:1;transform:none}}
.hero .lede{font-size:clamp(17px,1.4vw,20px);color:var(--night-ink-2);max-width:50ch;margin:28px 0 0;text-wrap:pretty}
.counts{display:flex;flex-wrap:wrap;gap:14px clamp(22px,3.4vw,44px);margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--night-3)}
.counts div{margin:0}
.counts dt{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-3);margin-bottom:8px}
.counts dd{margin:0;font:500 clamp(26px,2.6vw,38px)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--night-ink)}
.counts small{font-size:.5em;color:var(--night-ink-3)}

.board-fig{margin:0;position:relative}
.board{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(3px,.45vw,6px);perspective:900px}
.tile{--c:var(--personal);position:relative;aspect-ratio:1;border:0;border-radius:clamp(3px,.4vw,6px);background:var(--c);cursor:pointer;padding:0;overflow:hidden;
  font:600 clamp(8px,.75vw,10.5px)/1 var(--mono);color:#fff;text-align:left;
  opacity:0;transform:rotateY(-90deg);animation:tile-in .75s var(--ease) forwards;animation-delay:calc(var(--o) * 32ms + 350ms);
  transition:transform .3s var(--ease),box-shadow .3s,filter .3s,opacity .3s}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05);transition:filter .3s,transform .5s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;background:var(--c);mix-blend-mode:multiply;opacity:.62;transition:opacity .3s}
.tile.noimg::after{display:none}
.tile span{position:absolute;left:.45em;top:.45em;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tile:is(:hover,:focus-visible){transform:scale(1.35);z-index:4;outline:none;box-shadow:0 18px 30px -12px rgba(0,0,0,.8),0 0 0 2px var(--night-ink)}
.tile:is(:hover,:focus-visible)::after{opacity:0}
.tile:is(:hover,:focus-visible) img{filter:none}
.tile.private{background:repeating-linear-gradient(135deg,var(--night-3) 0 5px,var(--night-2) 5px 10px);color:var(--night-ink-3);cursor:default}
.tile.private::after{display:none}
.tile.private:hover{transform:none;box-shadow:none}
@keyframes tile-in{to{opacity:1;transform:none}}
.board-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.tally{font:500 clamp(30px,3.4vw,48px)/1 var(--serif);letter-spacing:-.03em;color:var(--night-ink);white-space:nowrap}
.tally small{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-3);margin-left:8px}
.tally b{font-weight:500;color:#e1563c}
.board-fig figcaption{margin-top:16px}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.hero .legend .chip{border-color:var(--night-3);color:var(--night-ink-2)}
.hero .legend .chip:hover{border-color:var(--night-ink-3);color:var(--night-ink)}
.hint{font:400 12.5px/1.5 var(--mono);color:var(--night-ink-3);margin:12px 0 0;max-width:60ch}
/* :has() — hovering a legend chip lifts that kind and fades the rest */
.hero:has(.legend .chip:hover) .tile{opacity:.14;filter:saturate(.2)}
.hero:has(.legend [data-k="food"]:hover) .tile[data-k="food"],
.hero:has(.legend [data-k="media"]:hover) .tile[data-k="media"],
.hero:has(.legend [data-k="music"]:hover) .tile[data-k="music"],
.hero:has(.legend [data-k="learning"]:hover) .tile[data-k="learning"],
.hero:has(.legend [data-k="body"]:hover) .tile[data-k="body"],
.hero:has(.legend [data-k="habit"]:hover) .tile[data-k="habit"],
.hero:has(.legend [data-k="making"]:hover) .tile[data-k="making"],
.hero:has(.legend [data-k="travel"]:hover) .tile[data-k="travel"],
.hero:has(.legend [data-k="experience"]:hover) .tile[data-k="experience"],
.hero:has(.legend [data-k="personal"]:hover) .tile[data-k="personal"]{opacity:1;filter:none}
.cue{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));translate:-50% 0;z-index:30;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:var(--night-ink);background:color-mix(in oklab,var(--night) 55%,transparent);border:1px solid color-mix(in oklab,var(--night-ink) 22%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;animation:cue-in .8s var(--ease) 2.6s forwards;transition:opacity .4s,visibility .4s}
.cue svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.8s ease-in-out 3.2s infinite}
.cue::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--night-ink);opacity:0;animation:halo 1.8s ease-out 3.2s infinite}
.cue:hover{background:color-mix(in oklab,var(--night) 80%,transparent)}
.cue.gone{opacity:0!important;visibility:hidden;animation:none}
@keyframes cue-in{to{opacity:.85}}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes halo{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;min-height:0;padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){.hero h1 .l,.hero h1 em,.tile{opacity:1;transform:none;animation:none}.cue{opacity:.85;animation:none}.cue svg,.cue::after{animation:none}}

/* ---------------------------------------------------------------- chapter frame */
.ch{padding-block:clamp(88px,14vh,160px) 0}
.ch-h{margin-bottom:clamp(32px,5vh,56px);max-width:900px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- pizza */
.pies{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(92px,11vw,132px),1fr));gap:clamp(10px,1.6vw,22px)}
.pie{display:block;aspect-ratio:1;text-decoration:none;outline:none;opacity:0;transform:scale(.6) rotate(-30deg)}
.pies.in .pie{opacity:1;transform:none;transition:transform .8s var(--ease),opacity .6s;transition-delay:calc(var(--i) * 18ms)}
.pie img,.pie svg{display:block;width:100%;height:100%;object-fit:contain}
.pie img{filter:drop-shadow(0 8px 10px rgba(60,35,10,.22))}   /* icons arrive with the white cut away (scripts/build-50for50.py) */
.pie svg{filter:drop-shadow(0 8px 10px rgba(60,35,10,.22))}
.pies.in .pie:is(:hover,:focus-visible){animation:pie-pulse 1.1s var(--ease) infinite;transition-delay:0s}
@keyframes pie-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.12)}70%{transform:scale(1.04)}}
.tour{margin-top:clamp(56px,8vh,88px);border-top:1px solid var(--line);padding-top:28px}
.tour h3{font-weight:400;font-size:clamp(20px,2vw,26px);max-width:40ch}
.tour h3 b{font-weight:600;color:var(--food)}
.tour-cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:24px;border-radius:14px;overflow:hidden}
.city{background:var(--paper);padding:20px 20px 22px}
.city b{display:block;font:500 46px/1 var(--serif);letter-spacing:-.03em;color:var(--food)}
.city h4{margin:8px 0 10px;font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.city ul{list-style:none;margin:0;padding:0;font-size:16px;line-height:1.5}

/* ---------------------------------------------------------------- world */
.world{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(20px,3vw,40px);align-items:start}
.map{position:relative;aspect-ratio:1.9;background:var(--paper-2);border-radius:18px;overflow:hidden}
.map-wait{position:absolute;inset:0;display:grid;place-items:center;font:500 12px var(--mono);color:var(--ink-3);margin:0}
.map svg{display:block;width:100%;height:100%}
.map .sphere{fill:var(--paper-2)}
.map .grat{fill:none;stroke:var(--paper-3);stroke-width:.6}
.map .land{fill:#ddd3bf;stroke:var(--paper-2);stroke-width:.5}
.map .land.cooked{fill:color-mix(in oklab,var(--food) 72%,var(--paper));cursor:pointer;transition:fill .2s}
.map .land.cooked:hover,.map .land.cooked.hot{fill:var(--food)}
.map{touch-action:pan-y}
.map.zoomed{touch-action:none;cursor:grab}
.map.zoomed:active{cursor:grabbing}
.map .land.cooked{transform-box:fill-box;transform-origin:center}
.map .land.cooked.hot{fill:var(--food);stroke:var(--paper);stroke-width:1.5;animation:pulse 1.3s var(--ease) infinite;filter:drop-shadow(0 0 0 transparent)}
@keyframes pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(200,65,43,0))}50%{transform:scale(1.07);filter:drop-shadow(0 0 6px rgba(200,65,43,.7))}}
.map .lands .land{vector-effect:non-scaling-stroke}
.map-ctl{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px}
.map-ctl button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:color-mix(in oklab,var(--paper) 90%,transparent);font:500 18px/1 var(--mono);cursor:pointer;box-shadow:0 4px 12px -6px rgba(40,25,10,.3)}
.map-ctl button:hover{border-color:var(--ink)}
.map-hint{position:absolute;left:14px;bottom:10px;margin:0;font:400 11px var(--mono);color:var(--ink-3);letter-spacing:.03em;transition:color .2s,background .2s;padding:4px 8px;border-radius:6px}
.map-card{position:absolute;left:14px;top:14px;display:flex;gap:12px;align-items:stretch;max-width:min(360px,calc(100% - 80px));background:var(--paper);border-radius:14px;padding:10px;box-shadow:0 18px 40px -18px rgba(40,25,10,.55);animation:tick-in .35s var(--ease)}
.map-card img{width:96px;height:96px;object-fit:cover;border-radius:9px;flex:none}
.map-card div{display:flex;flex-direction:column;gap:3px;min-width:0;padding-right:20px}
.map-card b{font:600 19px/1.1 var(--serif)}
.map-card span{font-size:14px;color:var(--ink-2);line-height:1.3}
.map-card a{margin-top:auto;font:500 12px var(--mono);color:var(--ink)}
.map-card .x{position:absolute;top:6px;right:6px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--ink-3)}
@media (max-width:640px){.map{aspect-ratio:1.5}.map-hint{display:none}.map-card img{width:64px;height:64px}}
.dishes{list-style:none;margin:0;padding:0 6px 0 0;max-height:min(66vh,560px);overflow:auto;font-size:15px;counter-reset:d;scrollbar-width:thin;
  mask-image:linear-gradient(to bottom,black 88%,transparent)}
.dishes li{counter-increment:d;padding:8px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:2.2em 1fr;gap:0 8px;cursor:pointer}
.dishes li::before{content:counter(d,decimal-leading-zero);font:500 11px/1.9 var(--mono);color:var(--ink-3);grid-row:span 2}
.dishes li b{font-weight:600}
.dishes li span{color:var(--ink-2);font-size:14px;line-height:1.35}
.dishes li:hover,.dishes li.hot{background:linear-gradient(90deg,color-mix(in oklab,var(--food) 12%,transparent),transparent)}
.dishes a{text-decoration:none}
@media (max-width:900px){.world{grid-template-columns:1fr}.dishes{max-height:360px}}

/* ---------------------------------------------------------------- film */
.ch-film{padding-bottom:0}
.ch-film .ch-h{max-width:1240px}
.ch-film .ch-h{margin-bottom:48px}
.strip-wrap{background:var(--night);padding-bottom:clamp(40px,6vh,72px)}
.strip{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gutter);outline:none;
  background:#0d0c0a;border-block:18px solid #0d0c0a;
  --holes:radial-gradient(circle at 50% 50%,transparent 0 0),repeating-linear-gradient(90deg,transparent 0 10px,var(--night-3) 10px 22px,transparent 22px 32px)}
.strip::-webkit-scrollbar{display:none}
.frame{flex:none;width:clamp(260px,30vw,360px);scroll-snap-align:start;position:relative;padding:34px 22px 34px;background:#0d0c0a;border-inline:3px solid #0d0c0a}
.frame::before,.frame::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 8px,#3a352c 8px 20px,transparent 20px 28px);border-radius:2px}
.frame::before{top:8px}.frame::after{bottom:8px}
.frame-in{background:linear-gradient(160deg,#2a261f,#191713);border-radius:6px;padding:22px 22px 20px;min-height:320px;display:flex;flex-direction:column;color:var(--night-ink);transition:transform .4s var(--ease)}
.frame:hover .frame-in{transform:translateY(-4px)}
.frame h3{font:300 64px/1 var(--serif);letter-spacing:-.04em;color:var(--night-ink)}
.frame h3 i{font-style:italic;color:var(--media);filter:brightness(1.8)}
.frame ol{list-style:none;margin:auto 0 0;padding:18px 0 0;counter-reset:f}
.frame li{counter-increment:f;padding:6px 0;border-top:1px solid #3a352c;font-size:16px;line-height:1.3;display:flex;gap:10px}
.frame li::before{content:counter(f);font:500 10.5px/2 var(--mono);color:var(--night-ink-3)}
.frame a{text-decoration:none}
.frame a:hover{text-decoration:underline;text-underline-offset:3px}
.strip-nav{display:flex;align-items:center;gap:14px;margin-top:20px;color:var(--night-ink-3);font:500 12px var(--mono)}
.strip-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--night-3);background:transparent;color:var(--night-ink);cursor:pointer;font-size:16px}
.strip-nav button:hover{background:var(--night-3)}

/* ---------------------------------------------------------------- albums */
.swarm{position:relative;height:340px;margin-top:20px;border-bottom:1px solid var(--line)}
.disc{position:absolute;width:var(--d);height:var(--d);margin-left:calc(var(--d) / -2);bottom:calc(var(--y) * 1px + 8px);left:calc(var(--x) * 100%);border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle,#0e0d0b 0 6%,var(--c) 7% 30%,#141210 31%),#141210;
  box-shadow:inset 0 0 0 1px #000,0 6px 10px -6px rgba(0,0,0,.5);opacity:0;translate:0 -40px;transition:translate .8s var(--ease),opacity .5s,scale .25s var(--ease)}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,rgba(255,255,255,.05) 2px 3px);mask:radial-gradient(circle,transparent 31%,black 32%)}
.swarm.in .disc{opacity:1;translate:0 0;transition-delay:calc(var(--i) * 22ms)}
.swarm.in .disc:hover,.disc:focus-visible{scale:1.35;z-index:3;outline:none;transition-delay:0s}
.axis{position:absolute;left:0;right:0;bottom:-28px;height:20px;font:500 11px var(--mono);color:var(--ink-3)}
.axis span{position:absolute;translate:-50% 0}
.swarm-note{font:400 13px/1.5 var(--mono);color:var(--ink-3);margin:44px 0 0;max-width:70ch}

/* ---------------------------------------------------------------- songs (songs.js) */
.songs-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.songs-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 12px var(--mono);color:var(--ink-2)}
.songs-legend span{display:inline-flex;align-items:center;gap:7px}
.songs-legend i{width:12px;height:14px;background:var(--c);clip-path:path('M6 0C10 0 12 2 12 5C12 9 8 12 6 14C4 12 0 9 0 5C0 2 2 0 6 0Z')}
.songs-legend b{font-weight:600;color:var(--ink)}
.chip.sound i{font-style:normal}
.chip.sound[aria-pressed="true"]{background:var(--music);border-color:var(--music);color:#fff}
.songs-main{min-width:0}
.songs-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(20px,3vw,40px);align-items:start}
.neck-box{overflow-x:auto;padding:6px 0 4px;margin-inline:-6px}
.neck{display:block;width:100%;min-width:680px;height:auto;touch-action:pan-x pan-y;filter:drop-shadow(0 16px 20px rgba(40,22,8,.28))}
.neck .yr{fill:var(--ink-3);font:500 11px var(--mono)}
.neck .pick{cursor:pointer;outline:none}
.neck .pick .pk{transition:transform .3s var(--ease)}
.neck .pick .pb{fill:var(--c);stroke:rgba(0,0,0,.25);stroke-width:1}
.neck .pick .ps{fill:#fff;opacity:.16}
.neck .pick text{fill:#fff;font:700 11px var(--mono);pointer-events:none}
.neck .pick:is(:hover,:focus-visible,.hot) .pk{transform:translateY(-6px) scale(1.18) rotate(-8deg)}
.neck .pick.on .pk{transform:scale(1.3)}
.neck .pick.on .pb{stroke:#fff;stroke-width:2.2}
.neck .str.twang{animation:twang .5s ease-out}
@keyframes twang{0%,100%{transform:translateY(0)}15%{transform:translateY(1.6px)}30%{transform:translateY(-1.3px)}45%{transform:translateY(1px)}60%{transform:translateY(-.6px)}75%{transform:translateY(.3px)}}
.song-card{--c:var(--music);margin-top:22px;padding:22px 24px 20px;border-radius:16px;background:var(--paper-2);border-left:6px solid var(--c);view-transition-name:songcard;animation:tick-in .4s var(--ease)}
.song-card .kicker{margin-bottom:8px;color:var(--c);filter:brightness(.85)}
.song-card h3{font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.02em}
.song-card .by{margin:4px 0 16px;font:400 14px var(--mono);color:var(--ink-3)}
.song-card dl{display:flex;flex-wrap:wrap;gap:12px 36px;margin:0 0 14px}
.song-card dl div{margin:0}
.song-card dt{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.song-card dd{margin:0;font-size:17px}
.song-card blockquote{margin:0;padding:0 0 0 16px;border-left:2px solid var(--line);font:italic 400 20px/1.4 var(--serif);color:var(--ink);max-width:56ch}
.song-card .nav{display:flex;align-items:center;gap:8px;margin-top:18px}
.song-card .nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.song-card .nav button:hover{border-color:var(--ink)}
.song-card .nav a{margin-left:auto;font:500 12.5px var(--mono);color:var(--ink)}
.setlist{position:relative;background:#fbf8f1;padding:30px 24px 22px;rotate:1.6deg;box-shadow:0 14px 30px -16px rgba(40,25,10,.45);
  background-image:repeating-linear-gradient(transparent 0 43px,rgba(44,82,137,.14) 43px 44px);background-position:0 86px}
.setlist::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;translate:-50% 0;rotate:-3deg;background:rgba(236,222,180,.8);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.setlist h3{font:italic 600 30px/1 var(--serif);letter-spacing:-.01em}
.setlist .sub{margin:4px 0 12px;font:400 11.5px var(--mono);color:var(--ink-3)}
.setlist ol{list-style:none;margin:0;padding:0;counter-reset:s}
.setlist li{counter-increment:s;display:flex;align-items:center;gap:8px;min-height:44px}
.setlist li::before{content:counter(s);width:22px;font:600 12px var(--mono);color:var(--c);flex:none}
.setlist li button{all:unset;cursor:pointer;flex:1;min-width:0;line-height:1.15}
.setlist li .t{display:block;font:500 17px/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setlist li .a{display:block;margin-top:3px;font:400 10.5px var(--mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setlist li .ck{color:var(--food);font:700 16px var(--serif);rotate:-8deg}
.setlist li:hover .t,.setlist li.on .t{color:var(--c)}
.setlist li.on{background:linear-gradient(90deg,color-mix(in oklab,var(--c) 14%,transparent),transparent)}
.setlist .foot{margin:14px 0 0;font:italic 400 14px var(--serif);color:var(--ink-3)}
@media (max-width:900px){.songs-grid{grid-template-columns:1fr}.setlist{rotate:0deg;max-width:420px}}

/* ---------------------------------------------------------------- books */
.shelf-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.shelf{display:flex;flex-wrap:wrap;align-items:flex-end;row-gap:0;padding:0 6px;
  background:repeating-linear-gradient(to bottom,transparent 0 222px,#8c6a47 222px 232px,#6f5237 232px 236px,transparent 236px 260px)}
.book{height:236px;display:flex;align-items:flex-end;padding-bottom:14px;margin-bottom:24px}
.spine{--w:20px;text-decoration:none;width:var(--w);height:var(--h);background:var(--c);color:var(--t,#f6efe2);border:0;padding:0;margin-right:2px;cursor:pointer;border-radius:2px 2px 1px 1px;position:relative;
  box-shadow:inset -3px 0 0 rgba(0,0,0,.14),inset 2px 0 0 rgba(255,255,255,.12);transition:transform .25s var(--ease);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.spine span{writing-mode:vertical-rl;rotate:180deg;font:500 10.5px/1 var(--mono);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:calc(100% - 16px);padding:0 2px}
.spine::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;background:rgba(255,255,255,.22)}
.spine:hover,.spine:focus-visible{transform:translateY(-10px);outline:none}
.spine.nf{background:#e8dec8;--t:var(--ink);color:var(--ink)}
.spine.nf::before{background:var(--food)}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--ease)}

/* ---------------------------------------------------------------- hours (hours.js) */
:root{--ai0:#2c5289;--ai1:#c8412b;--ai2:#7c3c6f;--ai3:#1d7a77;--ai4:#b98519;--ai5:#8b8373}
.dek b{font-weight:600;color:var(--ink)}
.ledger{display:flex;gap:4px;height:74px;margin-bottom:26px}
.seg{--c:var(--ink);flex-basis:0;min-width:min(9em,18%);border:0;border-radius:10px;background:var(--c);color:#fff;text-align:left;padding:10px 12px;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .3s var(--ease),filter .3s,opacity .3s;opacity:.55}
.seg b{font:600 14px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg span{font:500 12px var(--mono);opacity:.85}
.seg:hover{opacity:.85;transform:translateY(-2px)}
.seg.on{opacity:1;transform:translateY(-4px);box-shadow:0 12px 22px -12px var(--c)}
.htabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);margin-bottom:26px}
.htabs [role=tab]{border:0;background:none;padding:12px 14px 13px;font:500 13px var(--mono);color:var(--ink-3);cursor:pointer;position:relative;display:flex;gap:8px;align-items:baseline}
.htabs [role=tab] span{font-size:11px;opacity:.7}
.htabs [role=tab]:hover{color:var(--ink)}
.htabs [role=tab][aria-selected="true"]{color:var(--ink)}
.htabs [role=tab][aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--c)}
.hpanel{min-height:420px;view-transition-name:hpanel}
.hstats{display:flex;flex-wrap:wrap;gap:14px 40px;margin:0 0 18px}
.hstats div{margin:0}
.hstats dt{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.hstats dd{margin:0;font:500 32px/1 var(--serif);letter-spacing:-.02em;color:var(--c)}
.hnote{margin:0 0 18px;color:var(--ink-2);max-width:64ch;font-size:17px}
.hfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.hfilter .search input{padding:8px 14px;font-size:14px;width:min(260px,70vw)}

/* Italian climb */
.chart-box{overflow-x:auto}
.climb{display:block;width:100%;min-width:620px;height:auto;font-family:var(--mono)}
.climb .gl{stroke:var(--line);stroke-width:1}
.climb .ax{fill:var(--ink-3);font-size:11px}
.climb .mbar{fill:color-mix(in oklab,var(--c) 28%,var(--paper));transition:fill .2s}
.climb .mbar:hover{fill:var(--c)}
.climb .area{fill:color-mix(in oklab,var(--c) 14%,transparent)}
.climb .line{fill:none;stroke:var(--c);stroke-width:2.2}
.climb .dot{fill:var(--paper);stroke:var(--c);stroke-width:1.6;transition:r .2s,fill .2s;cursor:pointer}
.climb .dot:hover{fill:var(--c)}
.climb .dot.hit{fill:var(--c)}
.climb .goal{stroke:var(--ink);stroke-dasharray:4 4;stroke-width:1}
.climb .goal-t,.climb .trip-t{fill:var(--ink-2);font-size:11.5px}
.climb .trip{stroke:var(--ink-3);stroke-dasharray:2 4}
.climb .hit-t{fill:var(--ink);font:600 13px var(--serif)}

/* Courses: subject bars made of sessions */
.subjects{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.subj{display:grid;grid-template-columns:230px 1fr;gap:6px 18px;align-items:center}
.subj-h{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:17px}
.subj-h .st{font:500 12px var(--mono);color:var(--ink-3)}
.subj-h::after{content:"+";font:500 13px var(--mono);color:var(--ink-3);margin-left:4px}
.subj-h[aria-expanded="true"]::after{content:"−"}
.segs{display:flex;gap:2px;height:26px;min-width:4px;transition:width .6s var(--ease)}
.segs i{min-width:3px;border-radius:3px;cursor:pointer;transition:opacity .25s,transform .2s}
.segs i.p{background:var(--c)}
.segs i.w{background:var(--ink-2)}
.segs i:hover{transform:scaleY(1.25)}
.hpanel[data-f="personal"] .segs i.w,.hpanel[data-f="work"] .segs i.p,.hpanel[data-f="personal"] .sess li.w,.hpanel[data-f="work"] .sess li.p{opacity:.15}
.sess{grid-column:2;list-style:none;margin:4px 0 8px;padding:0;font-size:15px}
.sess li{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-bottom:1px dotted var(--line)}
.sess li span:last-child{font:400 12px var(--mono);color:var(--ink-3);white-space:nowrap}
.hkey{margin:18px 0 0;font:400 12px var(--mono);color:var(--ink-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hkey i{width:12px;height:12px;border-radius:3px;display:inline-block}
.hkey i.p{background:var(--c)}.hkey i.w{background:var(--ink-2);margin-left:10px}
@media (max-width:700px){.subj{grid-template-columns:1fr}.sess{grid-column:1}}

/* Podcasts: ranked covers + episode list */
.pods{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
.covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:16px 14px}
.cover{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;cursor:pointer;border-radius:12px;padding:6px;transition:background .2s}
.cover .art{position:relative;display:block;aspect-ratio:1;border-radius:9px;overflow:hidden;box-shadow:0 10px 20px -12px rgba(40,25,10,.55);transition:transform .3s var(--ease),box-shadow .3s;
  background:linear-gradient(150deg,oklch(.55 .12 var(--h)),oklch(.34 .09 calc(var(--h) + 40)))}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .noart{position:absolute;inset:0;display:grid;place-items:center;padding:10px;text-align:center;color:#fff;font:600 16px/1.15 var(--serif)}
.cover .rk{position:absolute;left:6px;top:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:rgba(21,19,15,.78);color:#fff;font:600 11px/22px var(--mono);text-align:center}
.cover .cn{margin-top:9px;font:500 15px/1.15 var(--serif);color:var(--ink)}
.cover .cm{margin-top:3px;font:400 11px var(--mono);color:var(--ink-3)}
.cover .cb{margin-top:7px;height:4px;border-radius:2px;background:var(--paper-2);overflow:hidden}
.cover .cb i{display:block;height:100%;background:var(--c)}
.cover:hover .art{transform:translateY(-3px)}
.cover.on{background:var(--paper-2)}
.cover.on .art{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--c),0 14px 24px -12px rgba(40,25,10,.6)}
.cover:focus-visible{outline:2px solid var(--ink)}
.eps{position:sticky;top:76px;background:var(--paper-2);border-radius:16px;padding:18px 20px}
.eps .eh{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.eps .eh img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:none}
.eps h4{margin:0;font:600 22px/1.1 var(--serif)}
.eps p{margin:4px 0 0;font:400 12px var(--mono);color:var(--ink-3)}
.eps ol{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.eps li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dotted var(--line);font-size:15px;line-height:1.3;animation:tick-in .35s var(--ease) both}
.eps .eb{height:6px;background:var(--paper);border-radius:3px;overflow:hidden}
.eps .eb i{display:block;height:100%;background:var(--c)}
.eps .em{font:400 11.5px var(--mono);color:var(--ink-3);text-align:right}
@media (max-width:860px){.pods{grid-template-columns:1fr}.eps{position:static}.covers{grid-template-columns:repeat(3,1fr);gap:10px}.cover .cn{font-size:13.5px}}

/* AI: the mix + columns by kind */
.mix{display:flex;gap:3px;height:62px;margin:4px 0 22px}
.mseg{--c:var(--ink);flex-basis:0;min-width:min(8.5em,22%);border:0;border-radius:8px;background:var(--c);color:#fff;text-align:left;padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:filter .25s,transform .25s var(--ease)}
.mseg b{font:600 13px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mseg span{font:500 11.5px var(--mono);opacity:.9}
.mseg:hover{transform:translateY(-2px)}
.mix:has(.mseg.on) .mseg:not(.on){filter:saturate(.3) opacity(.45)}
.aicols{columns:3 300px;column-gap:28px}
.aicol{break-inside:avoid;margin:0 0 26px;transition:opacity .3s}
.aicols[data-k]:not([data-k=""]) .aicol{opacity:.25}
.aicols[data-k="training"] .aicol[data-k="training"],.aicols[data-k="evaluation"] .aicol[data-k="evaluation"],.aicols[data-k="youtube"] .aicol[data-k="youtube"],
.aicols[data-k="book"] .aicol[data-k="book"],.aicols[data-k="podcast"] .aicol[data-k="podcast"],.aicols[data-k="documentary"] .aicol[data-k="documentary"]{opacity:1}
.aicol h4{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 6px;padding-bottom:6px;border-bottom:2px solid var(--c);font:600 17px var(--serif)}
.aicol h4 small{font:400 11.5px var(--mono);color:var(--ink-3)}
.aicol ol{list-style:none;margin:0;padding:0}
.aicol li{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px dotted var(--line);font-size:14.5px;line-height:1.25}
.aicol .ab{height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden}
.aicol .ab i{display:block;height:100%;min-width:2px;background:var(--c)}
.aicol .am{font:400 11px var(--mono);color:var(--ink-3);text-align:right;white-space:nowrap}
@media (max-width:640px){.mix{height:46px}.mseg{min-width:3.4em;padding:6px 7px}.mseg b{display:none}}

/* TED playlist */
.playlist{list-style:none;margin:0;padding:0;columns:2 440px;column-gap:36px}
.playlist li{break-inside:avoid;display:grid;grid-template-columns:2.2em 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.playlist .k{font:500 11px var(--mono);color:var(--ink-3)}
.playlist .tt{font-size:16px;line-height:1.25}
.playlist .tt a{text-decoration:none}
.playlist .tt a:hover{text-decoration:underline;text-underline-offset:3px}
.playlist .tt small{display:block;font:400 12px var(--mono);color:var(--ink-3);margin-top:2px}
.playlist .tb{height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden}
.playlist .tb i{display:block;height:100%;background:var(--c)}
.playlist .tm{font:400 12px var(--mono);color:var(--ink-3);text-align:right}
.playlist .none{display:block;color:var(--ink-3)}

/* Meditation months */
.medi{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:8px;align-items:end;min-height:300px;border-bottom:1px solid var(--line);padding-top:10px;overflow-x:auto}
.mcol{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:34px}
.mcol .stack{display:flex;flex-direction:column-reverse;align-items:center;gap:3px}
.mcol .stack i{width:var(--s);height:var(--s);border-radius:50%;background:var(--c);opacity:.85;cursor:pointer;animation:pop .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms);transition:transform .2s}
.mcol .stack i:hover{transform:scale(1.3);opacity:1}
.mcol .ml{font:500 11px var(--mono);color:var(--ink-3)}
.mcol .mc{font:600 13px var(--serif);min-height:1em}

/* ---------------------------------------------------------------- health (health.js) */
.health-block{padding:clamp(28px,4vh,44px) 0;border-top:1px solid var(--line)}
.health-block:first-of-type{border-top:0;padding-top:0}
.health-block h3{font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-.02em}
.health-block .hikes{margin-top:0}
.race-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-bottom:22px}
.race-h .hnote{margin:12px 0 0}
.clock{background:var(--night);color:var(--night-ink);border-radius:16px;padding:18px 24px 16px;text-align:right;min-width:240px}
.clock .t{display:block;font:500 clamp(46px,5.4vw,68px)/1 var(--mono);letter-spacing:-.03em;color:#f3d2a6}
.clock .c{display:block;margin-top:6px;font:400 12px var(--mono);color:var(--night-ink-3)}
.course-box{overflow-x:auto}
.course{display:block;width:100%;min-width:620px;height:auto}
.course .lane{fill:var(--paper-2)}
.course .seg{opacity:.92}
.course .sl{fill:#fff;font:600 13px var(--mono)}
.course .sl[y="116"]{fill:var(--food)}
.course .tick{stroke:var(--ink-3);stroke-dasharray:2 3}
.course .ml{fill:var(--ink-3);font:500 11.5px var(--mono)}
.course .cheer{fill:var(--ink-2);font:italic 400 15px var(--serif)}
.course .runner{fill:var(--ink);stroke:var(--paper);stroke-width:3}
.sub-h{margin:26px 0 12px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.sub-h small{margin-left:8px;letter-spacing:.02em;text-transform:none;color:var(--ink-3);font-weight:400}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ladder li{display:grid;grid-template-columns:160px minmax(120px,340px) 54px 1fr;gap:14px;align-items:center;font-size:15px}
.ladder .rk{font:500 12.5px var(--mono);color:var(--ink-2)}
.ladder .rb{height:14px;background:var(--paper-2);border-radius:7px;overflow:hidden}
.ladder .rb i{display:block;height:100%;border-radius:7px}
.ladder .gapbar{background:repeating-linear-gradient(135deg,var(--paper-3) 0 6px,var(--paper-2) 6px 12px)}
.ladder .rp{font:600 13px var(--mono);text-align:right}
.ladder .rn{color:var(--ink-3);font-style:italic}
.health-block .more{margin:18px 0 0;font:500 13px var(--mono)}
.stamps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px 26px;padding:10px 4px}
.stamp{margin:0;outline:none}
.stamp .sm{--r:0deg;aspect-ratio:1;max-width:190px;margin:0 auto 14px;border-radius:50%;border:4px double var(--ink);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:18px;
  rotate:var(--r);opacity:0;scale:1.6;transition:opacity .25s,scale .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * 220ms);
  mask-image:radial-gradient(circle at 30% 40%,black 60%,rgba(0,0,0,.75) 61%,black 75%)}
.stamps.in .stamp .sm{opacity:.9;scale:1}
.stamp .sn{font:700 clamp(18px,2vw,22px)/1.05 var(--serif);letter-spacing:.02em;text-transform:uppercase}
.stamp .sw{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.stamp .ok,.stamp .void{margin-top:6px;font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;border-block:2px solid;padding:2px 8px}
.stamp.closed .sm{border-style:dashed}
.stamp .void{color:var(--food);rotate:-14deg;font-size:15px;border-color:var(--food)}
.stamp .sm{position:relative}
.stamp .times{margin-left:4px;padding:0 4px;background:var(--ink);color:var(--paper);border-radius:3px;font-weight:700}
.stamp figcaption{font-size:15px;line-height:1.45;color:var(--ink-2);text-align:center;max-width:30ch;margin:0 auto}
.stamp:is(:hover,:focus-visible) .sm{rotate:0deg;opacity:1}
@media (max-width:760px){
  .race-h{grid-template-columns:1fr}
  .clock{text-align:left;min-width:0}
  .ladder li{grid-template-columns:1fr 50px;gap:4px 10px}
  .ladder .rb{grid-column:1/-1;grid-row:2}
  .ladder .rn{grid-column:1/-1;font-size:14px}
}

/* ---------------------------------------------------------------- streaks */
.streaks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.streak{background:var(--paper-2);border-radius:14px;padding:18px 18px 16px;text-decoration:none;display:block;transition:background .2s,transform .3s var(--ease)}
a.streak:hover{background:var(--paper-3);transform:translateY(-2px)}
.streak h3{font-size:18px;font-weight:500;line-height:1.2;min-height:2.4em}
.streak .dots{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:14px 0 10px}
.streak .dots i{aspect-ratio:1;border-radius:50%;background:var(--c);opacity:.15;transition:opacity .3s;transition-delay:calc(var(--i) * 22ms)}
.streak.in .dots i{opacity:1}
.streak .meta{font:500 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em;display:flex;justify-content:space-between}
.streak .dots.week{grid-template-columns:repeat(7,1fr);max-width:70%}
.streak .dots i.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c);opacity:.35}
.streak.in .dots i.off{opacity:.35}
.hikes{margin-top:clamp(48px,7vh,80px)}
.hikes h3{font-weight:400;font-size:clamp(20px,2vw,26px)}
.hikes h3 b{font-weight:600;color:var(--body)}
.hike-bars{margin-top:18px;display:grid;gap:8px}
.hike{display:grid;grid-template-columns:minmax(0,280px) 1fr 60px;gap:14px;align-items:center;font-size:15px}
.hike .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hike .b{height:12px;border-radius:6px;background:var(--paper-2);overflow:hidden}
.hike .b i{display:block;height:100%;width:calc(var(--w) * 1%);background:var(--body);border-radius:6px;transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 60ms)}
.hike-bars.in .b i{transform:none}
.hike .mi{font:500 12px var(--mono);color:var(--ink-3);text-align:right}
@media (max-width:640px){.hike{grid-template-columns:1fr 52px}.hike .b{grid-column:1/-1;grid-row:2}}

/* ---------------------------------------------------------------- tickets */
.tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.ticket{--bg:#222;--fg:#fff;--ac:#fff;--ac2:var(--ac);position:relative;display:grid;grid-template-columns:1fr 58px;min-height:150px;text-decoration:none;color:var(--fg);
  background:var(--bg);border-radius:10px;rotate:var(--r,0deg);overflow:hidden;
  mask:radial-gradient(circle at calc(100% - 58px) 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat,radial-gradient(circle at calc(100% - 58px) 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat;
  filter:drop-shadow(0 10px 14px rgba(20,15,5,.22));transition:transform .3s var(--ease)}
.ticket::before{content:"";position:absolute;left:0;right:58px;bottom:0;height:8px;background:linear-gradient(90deg,var(--ac) 0 70%,var(--ac2) 70%)}
.ticket::after{content:"";position:absolute;inset:0 58px 0 0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px);pointer-events:none}
a.ticket:hover{transform:translateY(-4px) rotate(-1deg)}
.ticket .main{position:relative;z-index:1;padding:16px 16px 20px 18px;display:flex;flex-direction:column}
.ticket .adm{font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.ticket h3{font:700 22px/1.05 var(--serif);margin:8px 0 6px;letter-spacing:-.01em;color:var(--fg)}
.ticket .vs{font-size:15px;opacity:.9}
.ticket .venue{margin-top:auto;padding-top:10px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);opacity:.8}
.ticket .stub{border-left:2px dashed color-mix(in oklab,var(--fg) 40%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0;background:color-mix(in oklab,var(--bg) 82%,#000)}
.ticket .bc{width:24px;flex:1;margin-bottom:10px;background:repeating-linear-gradient(to bottom,var(--fg) 0 2px,transparent 2px 4px,var(--fg) 4px 5px,transparent 5px 8px,var(--fg) 8px 11px,transparent 11px 13px);opacity:.8}
.ticket .st{writing-mode:vertical-rl;rotate:180deg;font:700 10.5px var(--mono);letter-spacing:.2em;opacity:.8}
/* ---------------------------------------------------------------- art card in the streaks grid (art.js) */
.hero .lede strong{color:var(--night-ink);font-weight:600}
.art-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:stretch}
.art-card h3 a{text-decoration:none}
.art-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.ac-note{margin:6px 0 14px;color:var(--ink-2);font-size:15.5px;line-height:1.45}
.ac-grid{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(25,1fr);gap:4px}
.ac-grid li{aspect-ratio:1;border-radius:3px;background:var(--c);cursor:default;outline:none;opacity:.2;transition:opacity .3s,transform .2s;transition-delay:calc(var(--i) * 18ms)}
.streak.in .ac-grid li{opacity:1}
.ac-grid li:is(:hover,:focus-visible){transform:scale(1.5);transition-delay:0s;box-shadow:0 0 0 2px var(--paper)}
.ac-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:12px;font:400 11.5px var(--mono);color:var(--ink-2)}
.ac-key span{display:inline-flex;align-items:center;gap:6px}
.ac-key i{width:9px;height:9px;border-radius:2px;background:var(--c)}
.ac-book{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ac-book p{margin:0 0 6px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ac-book .spreads{position:relative;flex:1;min-height:170px}
.ac-book .spreads img{position:absolute;left:calc(var(--i) * 10%);top:calc(6% + var(--i) * 4%);width:54%;aspect-ratio:16/10;object-fit:cover;border-radius:5px;border:4px solid #fff;
  box-shadow:0 12px 20px -12px rgba(40,25,10,.5);rotate:calc((var(--i) - 2) * 4deg);transition:transform .35s var(--ease),rotate .35s var(--ease)}
.ac-book .spreads img:hover{transform:translateY(-8px) scale(1.3);rotate:0deg;z-index:5}
@media (max-width:760px){.art-card{grid-template-columns:1fr}.ac-grid{grid-template-columns:repeat(10,1fr)}}

/* ---------------------------------------------------------------- one-offs (#made) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;grid-auto-flow:dense}
.card{--c:var(--making);border-radius:16px;background:var(--paper-2);padding:20px;text-decoration:none;display:flex;flex-direction:column;min-height:190px;position:relative;overflow:hidden;transition:transform .3s var(--ease),background .2s}
a.card:hover{transform:translateY(-3px);background:var(--paper-3)}
.card.wide{grid-column:span 2}
.card .kind{font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.card h3{font-size:24px;line-height:1.1;margin:10px 0 8px}
.card p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.45}
.card .fig{margin-top:auto;padding-top:16px;font:400 64px/1 var(--serif);letter-spacing:-.04em;color:var(--c)}
.card .fig small{font:500 12px var(--mono);letter-spacing:.06em;color:var(--ink-3);margin-left:6px}
.card .rows{margin-top:auto;padding-top:14px;display:grid;gap:6px}
.card .row{display:grid;grid-template-columns:1fr auto;gap:10px;font:400 13px var(--mono);color:var(--ink-2);align-items:center}
.card .row .b{grid-column:1/-1;height:6px;background:var(--paper);border-radius:3px;overflow:hidden}
.card .row .b i{display:block;height:100%;background:var(--c);width:calc(var(--w) * 1%)}
.card.photo{--c:var(--travel);color:var(--paper);background:var(--night);min-height:260px}
.card.photo p{color:var(--night-ink-2)}
@media (max-width:620px){.card.wide{grid-column:auto}}

/* ---------------------------------------------------------------- index */
.index-tools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-bottom:22px}
.search input{font:400 16px var(--mono);padding:11px 16px;border:1px solid var(--line);background:var(--paper);border-radius:99px;width:min(320px,80vw);outline:none}
.search input:focus{border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.index{list-style:none;margin:0;padding:0;columns:2 460px;column-gap:40px}
.index li{break-inside:avoid}
.index button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:2.4em 10px 1fr auto;gap:12px;align-items:baseline;padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.index button:hover,.index button:focus-visible{background:var(--paper-2)}
.index .k{font:500 11px var(--mono);color:var(--ink-3)}
.index .d{width:10px;height:10px;border-radius:50%;background:var(--c);align-self:center}
.index .n{font-size:17px;line-height:1.3}
.index .v{font:500 12px var(--mono);color:var(--ink-3);white-space:nowrap}
.index li.private .n{color:var(--ink-3);font-style:italic}
.index .empty{padding:18px 0;color:var(--ink-3);font:400 14px var(--mono)}

/* ---------------------------------------------------------------- fine print */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.two h2{font-size:clamp(34px,4vw,54px)}
.diff{display:grid;gap:22px}
.diff h4{margin:0 0 8px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.diff ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.diff li{font-size:15px;padding:5px 11px;border-radius:99px;background:var(--paper-2)}
.diff .gone li{text-decoration:line-through;text-decoration-color:var(--food);color:var(--ink-3)}
.diff .new li{background:color-mix(in oklab,var(--body) 14%,var(--paper))}
.diff .tight li s{color:var(--ink-3);text-decoration-color:var(--food)}
.stretch{list-style:none;margin:0;padding:0}
.stretch li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:4px}
.stretch b{font-weight:500;font-size:19px}
.stretch span{font-style:italic;color:var(--ink-2);font-size:16px}
@media (max-width:860px){.two{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- finish STRONG */
.strong{list-style:none;margin:0;padding:0;display:flex;gap:10px;height:clamp(300px,42vh,400px)}
.strong li{--c:var(--ink);flex:1;min-width:0;position:relative;overflow:hidden;border-radius:18px;background:var(--c);color:#fff;padding:22px;cursor:pointer;outline:none;
  transition:flex-grow .6s var(--ease),filter .3s;display:flex;flex-direction:column;justify-content:space-between}
.strong li b{font:300 clamp(72px,9vw,128px)/.8 var(--serif);letter-spacing:-.04em}
.strong li div{opacity:0;transform:translateY(12px);transition:opacity .3s,transform .5s var(--ease);min-width:260px}
.strong li h3{font:600 26px/1.1 var(--serif);margin-bottom:10px}
.strong li p{margin:0;font-size:17px;line-height:1.45;color:rgba(255,255,255,.92);max-width:36ch}
.strong:has(li:is(:hover,:focus-visible,.on)) li:not(:is(:hover,:focus-visible,.on)){filter:saturate(.6) brightness(.9)}
.strong li:is(:hover,:focus-visible,.on){flex-grow:4.5}
.strong li:is(:hover,:focus-visible,.on) div{opacity:1;transform:none;transition-delay:.18s}
.strong-link{margin:16px 0 0;font:500 13px var(--mono)}
@media (max-width:760px){
  .strong{flex-direction:column;height:auto}
  .strong li{flex:none;flex-direction:row;align-items:flex-start;gap:18px;padding:16px 18px}
  .strong li b{font-size:56px;width:44px;flex:none}
  .strong li div{opacity:1;transform:none;min-width:0}
  .strong li h3{font-size:21px;margin-bottom:6px}
  .strong li p{font-size:15.5px}
}

/* ---------------------------------------------------------------- outro */
.outro{background:var(--night);color:var(--night-ink);margin-top:clamp(96px,14vh,160px);padding-block:clamp(72px,12vh,140px) 48px}
.outro .kicker{color:var(--night-ink-3)}
.outro blockquote{margin:0;font:300 clamp(32px,4.6vw,64px)/1.08 var(--serif);letter-spacing:-.025em;max-width:22ch;text-wrap:balance}
.outro-p{font-size:19px;color:var(--night-ink-2);max-width:62ch;margin:28px 0 0}
.outro a{color:var(--night-ink);text-underline-offset:3px;text-decoration-color:var(--night-ink-3)}
.built{margin:72px 0 0;font:400 12px var(--mono);color:var(--night-ink-3)}

/* ---------------------------------------------------------------- goal sheet */
.sheet{width:min(560px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0 0 0 auto;border:0;padding:0;background:var(--paper);color:var(--ink);
  box-shadow:-30px 0 80px -30px rgba(28,25,21,.4);overflow:auto;overscroll-behavior:contain;
  translate:100% 0;transition:translate .45s var(--ease),overlay .45s allow-discrete,display .45s allow-discrete}
.sheet[open]{translate:0 0}
@starting-style{.sheet[open]{translate:100% 0}}
.sheet::backdrop{background:rgba(21,19,15,0);transition:background .45s,overlay .45s allow-discrete,display .45s allow-discrete}
.sheet[open]::backdrop{background:rgba(21,19,15,.38)}
@starting-style{.sheet[open]::backdrop{background:rgba(21,19,15,0)}}
.sheet .x{position:sticky;top:14px;display:block;margin:14px 14px -54px auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:22px;line-height:1;cursor:pointer;z-index:2}
.sheet-body{padding:28px clamp(20px,4vw,40px) 48px}
.sheet .swatch{width:64px;height:64px;border-radius:12px;background:var(--c);display:grid;place-items:center;color:#fff;font:600 18px var(--mono);margin-bottom:22px}
.sheet h2{font-size:clamp(32px,5vw,46px);line-height:1.02}
.sheet .facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0;font:500 12px var(--mono);color:var(--ink-3);letter-spacing:.04em}
.sheet .facts b{color:var(--ink);font-weight:600}
.sheet .go{display:inline-flex;gap:8px;align-items:center;margin-top:22px;background:var(--ink);color:var(--paper);text-decoration:none;padding:11px 18px;border-radius:99px;font:600 13px var(--mono)}
.sheet .go:hover{background:var(--c)}
.sheet .jump{margin-left:10px;font:500 13px var(--mono);color:var(--ink-2)}
.sheet .sub{margin-top:34px;border-top:1px solid var(--line);padding-top:18px}
.sheet .sub h4{margin:0 0 10px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sheet .sub ul{list-style:none;margin:0;padding:0;font-size:15.5px}
.sheet .sub li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dotted var(--line);line-height:1.3}
.sheet .sub li span:last-child{font:400 12px var(--mono);color:var(--ink-3);white-space:nowrap}
.sheet .sub a{text-underline-offset:3px;text-decoration-color:var(--line)}
.sheet .prev-next{display:flex;justify-content:space-between;margin-top:36px;gap:12px}
.sheet .prev-next button{border:1px solid var(--line);background:transparent;border-radius:99px;padding:9px 14px;cursor:pointer;font:500 12px var(--mono)}
.sheet .prev-next button:hover{border-color:var(--ink)}

/* ---------------------------------------------------------------- tooltip */
.tip{position:fixed;left:0;top:0;z-index:60;pointer-events:none;background:var(--ink);color:var(--paper);padding:8px 11px;border-radius:9px;font:400 14px/1.3 var(--serif);max-width:280px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);translate:var(--tx,0) var(--ty,0);transition:opacity .12s}
.tip small{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;color:#bdb4a2;margin-top:3px;text-transform:uppercase}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none}
}


/* ================================================================ images */
.tip img{display:block;width:220px;max-width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover;border-radius:6px;margin:-2px -3px 8px;background:#2c2821}

/* world: map full width, then the plates */
.map{aspect-ratio:1.9;max-width:100%}
.plates-h{margin:clamp(40px,6vh,64px) 0 18px;font-weight:400;font-size:clamp(20px,2vw,26px)}
.plates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.plate{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--paper-2);transition:transform .35s var(--ease),box-shadow .35s}
.plate a{position:absolute;inset:0;display:block;text-decoration:none;color:#fff}
.plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.plate .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;background:linear-gradient(transparent,rgba(15,12,8,.78));font:600 14px/1.2 var(--serif)}
.plate .cap small{display:block;font:400 11px/1.3 var(--mono);opacity:.8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate.none a{color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:12px;background:repeating-linear-gradient(135deg,var(--paper-2) 0 8px,var(--paper-3) 8px 16px)}
.plate.none .cap{position:static;background:none;padding:0}
.plate:hover,.plate.hot{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(40,25,10,.55);z-index:1}
.plate:hover img,.plate.hot img{transform:scale(1.07)}
.plate.hot{outline:3px solid var(--food);outline-offset:2px}

/* film: one poster per frame */
.frame{width:auto;padding:30px 10px}
.frame-in{min-height:0;padding:0;background:none;display:block}
.poster{display:block;width:clamp(150px,15vw,200px);text-decoration:none;color:var(--night-ink)}
.poster .pimg{display:block;aspect-ratio:2/3;border-radius:4px;overflow:hidden;background:#2a261f;position:relative;box-shadow:0 12px 26px -12px #000}
.poster img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.02);transition:transform .6s var(--ease),filter .4s}
.poster:hover img{transform:scale(1.05);filter:none}
.poster .none{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;font:italic 400 20px/1.15 var(--serif);color:var(--night-ink-2)}
.poster .t{display:block;margin-top:10px;font-size:15px;line-height:1.25;min-height:2.5em}
.poster .dec{display:inline-block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-3);margin-bottom:8px}
.frame.first .dec{color:#8fb2e6}
.frame.first{margin-left:22px;border-left:1px solid #3a352c;padding-left:22px}
.frame.first:first-child{margin-left:0;border-left:0}
.decades-nav{display:flex;flex-wrap:wrap;gap:4px;margin-left:12px}
.decades-nav button{width:auto;height:auto;border-radius:99px;padding:5px 9px;font:500 11px var(--mono)}
.decades-nav button[aria-current]{background:var(--night-ink);color:var(--night)}

/* albums: covers with a record behind them */
.sleeve{position:absolute;width:var(--d);height:var(--d);margin-left:calc(var(--d) / -2);bottom:calc(var(--y) * 1px + 8px);left:calc(var(--x) * 100%);display:block;text-decoration:none;
  opacity:0;translate:0 -40px;transition:translate .8s var(--ease),opacity .5s,scale .3s var(--ease)}
.swarm.in .sleeve{opacity:1;translate:0 0;transition-delay:calc(var(--i) * 22ms)}
.sleeve img,.sleeve .blank{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;border-radius:2px;box-shadow:0 6px 12px -6px rgba(0,0,0,.55);background:#222}
.sleeve .blank{display:grid;place-items:center;font:500 9px/1.1 var(--mono);color:#ddd;text-align:center;padding:4px}
.sleeve::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,#0e0d0b 0 5%,var(--c) 6% 28%,#141210 29%),#141210;transition:translate .45s var(--ease)}
.swarm.in .sleeve:is(:hover,:focus-visible){scale:1.9;z-index:5;outline:none;transition-delay:0s}
.sleeve:is(:hover,:focus-visible)::before{translate:38% 0}
.swarm.wall{height:auto!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;border:0}
.swarm.wall .sleeve{position:relative;left:auto;bottom:auto;margin:0;width:auto;height:auto;aspect-ratio:1;opacity:1;translate:none}
.swarm.wall .sleeve:is(:hover,:focus-visible){scale:1.04}
.swarm.wall .axis{display:none}

/* books: reviewed books stand face-out */
.faceout{height:var(--h);width:calc(var(--h) * .66);margin:0 6px 0 4px;display:block;text-decoration:none;position:relative;transition:transform .25s var(--ease)}
.faceout img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px 4px 4px 2px;box-shadow:inset 4px 0 0 rgba(0,0,0,.15),4px 6px 12px -6px rgba(0,0,0,.45)}
.faceout::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent);border-radius:2px 0 0 2px}
.faceout:is(:hover,:focus-visible){transform:translateY(-10px) rotate(-2deg);outline:none}

/* books: a cover pulled off the shelf */
.spine.out{transform:translateY(-14px);box-shadow:inset -3px 0 0 rgba(0,0,0,.14),0 10px 14px -8px rgba(0,0,0,.45)}
.peek{position:fixed;z-index:55;width:168px;pointer-events:none;background:var(--paper);border-radius:6px;padding:8px 8px 10px;
  box-shadow:0 24px 50px -18px rgba(28,20,10,.55),0 0 0 1px rgba(0,0,0,.05);transform-origin:var(--ax,50%) 100%;
  opacity:0;transform:translateY(18px) scale(.7) rotateX(18deg);transition:opacity .18s,transform .35s var(--ease)}
.peek.below{transform-origin:var(--ax,50%) 0}
.peek.show{opacity:1;transform:none}
.peek img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:2px 4px 4px 2px;background:var(--paper-2);box-shadow:inset 4px 0 0 rgba(0,0,0,.12)}
.peek b{display:block;margin-top:8px;font:600 14px/1.2 var(--serif)}
.peek span{display:block;margin-top:3px;font:400 11px/1.35 var(--mono);color:var(--ink-3)}
.peek::after{content:"";position:absolute;left:calc(var(--ax,50%) - 7px);bottom:-7px;width:14px;height:14px;background:var(--paper);transform:rotate(45deg);box-shadow:3px 3px 6px -3px rgba(0,0,0,.2)}
.peek.below::after{bottom:auto;top:-7px;box-shadow:-3px -3px 6px -3px rgba(0,0,0,.15)}

/* goal sheet: photo header */
.sheet .hero-img{margin:-28px calc(-1 * clamp(20px,4vw,40px)) 26px;border-bottom:1px solid var(--line);aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.sheet .hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.sheet .sub li .th{width:34px;height:34px;object-fit:cover;border-radius:4px;flex:none;margin-right:10px;background:var(--paper-2)}
.sheet .sub li > span:first-child{display:flex;align-items:center}

/* made: photo cards */
.card.pic{color:#fff;background:#1a1712;min-height:280px;justify-content:flex-end}
.card.pic .fig{margin-top:6px;padding-top:0}
.card.pic img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);z-index:0}
.card.pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,9,.94) 0%,rgba(14,12,9,.78) 45%,rgba(14,12,9,.35) 70%,rgba(14,12,9,.1) 100%);z-index:0}
.card.pic > *:not(img){position:relative;z-index:1}
.card.pic p{color:#e8e0d0}
.card.pic .kind{color:#f3d2a6}
.card.pic .fig{color:#fff}
.card.pic .fig small{color:#d8cfbe}
a.card.pic:hover img.bg{transform:scale(1.05)}
.card.tall{grid-row:span 2}
.tour-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px;margin-top:24px}
.tour-photo figure{margin:0;border-radius:14px;overflow:hidden;background:var(--paper-2)}
.tour-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tour-photo .tour-cities{margin-top:0}
@media (max-width:760px){.tour-photo{grid-template-columns:1fr}.tour-photo figure{aspect-ratio:4/3}.card.tall{grid-row:auto}.plates{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
@keyframes pop{from{transform:scale(0)}}
@media (max-width:640px){
  .ledger{height:46px;gap:3px}
  .seg{padding:6px 7px;justify-content:flex-end;min-width:3.2em}
  .seg b{display:none}
  .htabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .htabs::-webkit-scrollbar{display:none}
  .htabs [role=tab]{white-space:nowrap;padding:10px 10px 11px}
  .hstats{gap:12px 26px}
  .hstats dd{font-size:26px}
}
.stamp .sn.long{font-size:clamp(15px,1.6vw,18px);letter-spacing:0}
.card.pic h3,.card.pic p,.card.pic .kind{text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 18px rgba(0,0,0,.5)}

/* ---------------------------------------------------------------- albums: a crate by decade */
.crate{display:grid;gap:4px;margin-top:10px}
.decade{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.decade header b{display:block;font:400 54px/1 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.decade header span{font:400 11.5px var(--mono);color:var(--ink-3)}
.decade ol{list-style:none;margin:0;padding:6px 0 38px;display:flex;flex-wrap:wrap;gap:44px 14px}
.sleeve2{position:relative;display:block;width:96px;aspect-ratio:1;text-decoration:none;color:var(--ink)}
.sleeve2 img,.sleeve2 .blank{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;box-shadow:0 8px 14px -8px rgba(0,0,0,.5);background:#222;transition:transform .35s var(--ease)}
.sleeve2 .blank{display:grid;place-items:center;padding:6px;color:#ddd;font:500 10px/1.2 var(--mono);text-align:center}
.sleeve2 .vinyl{position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle,#0e0d0b 0 5%,var(--c) 6% 28%,#141210 29%),#141210;transition:transform .45s var(--ease)}
.sleeve2 .cap{position:absolute;left:0;top:calc(100% + 6px);width:170px;z-index:3;font:400 10.5px/1.3 var(--mono);color:var(--ink-3);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.sleeve2 .cap b{display:block;font:600 13.5px/1.2 var(--serif);color:var(--ink)}
.sleeve2:is(:hover,:focus-visible){outline:none;z-index:4}
.sleeve2:is(:hover,:focus-visible) img,.sleeve2:is(:hover,:focus-visible) .blank{transform:translateY(-6px)}
.sleeve2:is(:hover,:focus-visible) .vinyl{transform:translate(42%,-6px) rotate(40deg)}
.sleeve2:is(:hover,:focus-visible) .cap{opacity:1;transform:none}
.decade ol:has(.sleeve2:hover) .sleeve2:not(:hover) img{filter:saturate(.4) brightness(.92)}
@media (max-width:640px){.decade{grid-template-columns:1fr;gap:6px}.decade header{display:flex;align-items:baseline;gap:10px}.decade header b{font-size:40px}
  .decade ol{gap:10px;padding-bottom:6px}.sleeve2{width:72px}.sleeve2 .cap{display:none}}

/* ---------------------------------------------------------------- pizza tour scorecards */
.tour-dek{margin:8px 0 0;color:var(--ink-2);font-size:17px;max-width:60ch}
#tour.tour-cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;background:none;border:0;border-radius:0;overflow:visible;margin-top:26px}
.pz{position:relative;border-radius:14px;overflow:hidden;background:#1a1712;color:#fff;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 14px 26px -18px rgba(40,25,10,.6)}
.pz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pz:hover img{transform:scale(1.06)}
.pz::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,9,.95) 0%,rgba(14,12,9,.7) 38%,rgba(14,12,9,0) 65%)}
.pz.first{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.pz .score{position:absolute;top:12px;right:12px;z-index:2;width:66px;height:66px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--sc);color:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.6);rotate:-8deg}
.pz .score b{font:700 24px/1 var(--serif);letter-spacing:-.02em}
.pz .score small{font:600 9.5px/1.15 var(--mono);opacity:.85}
.pz[data-b="top"]{--sc:#c8412b}.pz[data-b="good"]{--sc:#b98519}.pz[data-b="ok"]{--sc:#6b7a3a}.pz[data-b="low"]{--sc:#4f493f}.pz[data-b="none"]{--sc:#8b8373}
.pz.first .score{width:92px;height:92px}.pz.first .score b{font-size:34px}
.pzt{position:relative;z-index:1;padding:16px 16px 18px}
.pz .rank{font:600 11px var(--mono);letter-spacing:.12em;color:#f3d2a6}
.pz h4{margin:4px 0 2px;font:600 21px/1.1 var(--serif)}
.pz.first h4{font-size:clamp(28px,3vw,40px)}
.pz .where{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#d8cfbe}
.pz p{margin:10px 0 0;font:italic 400 15px/1.4 var(--serif);color:#efe8da}
.pz.first p{font-size:clamp(17px,1.6vw,21px);max-width:34ch}
.pz.noimg{background:repeating-linear-gradient(135deg,var(--paper-2) 0 10px,var(--paper-3) 10px 20px);color:var(--ink)}
.pz.noimg::after{display:none}
.pz.noimg .where{color:var(--ink-3)}.pz.noimg .rank{color:var(--ink-3)}
.tour-more{grid-column:1/-1;margin:4px 0 0;font:500 13px var(--mono)}
@media (max-width:620px){.pz.first{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}#tour.tour-cities{grid-template-columns:1fr 1fr;gap:10px}.pz h4{font-size:17px}.pz p{display:none}.pz.first p{display:block;font-size:15px}.pz .score{width:52px;height:52px}.pz .score b{font-size:19px}}

/* ---------------------------------------------------------------- all fifty: folded */
.all-fold{border:1px solid var(--line);border-radius:16px;background:var(--paper-2);overflow:hidden}
.all-fold summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t i" "n i";gap:4px 18px;align-items:center;padding:22px 26px;transition:background .2s}
.all-fold summary::-webkit-details-marker{display:none}
.all-fold summary:hover{background:var(--paper-3)}
.all-fold summary:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.af-t{grid-area:t;font:500 clamp(20px,2vw,26px)/1.2 var(--serif)}
.af-n{grid-area:n;font:400 12px var(--mono);color:var(--ink-3)}
.af-i{grid-area:i;width:48px;height:48px;border-radius:50%;background:var(--ink);position:relative;transition:transform .35s var(--ease)}
.af-i::before,.af-i::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--paper);translate:-50% -50%;border-radius:1px}
.af-i::after{rotate:90deg;transition:rotate .35s var(--ease)}
.all-fold[open] .af-i::after{rotate:0deg}
.all-fold[open] summary{border-bottom:1px solid var(--line)}
.all-fold > .index-tools{padding:20px 26px 0}
.all-fold > .index{padding:0 26px 22px}
.all-fold::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.all-fold[open]::details-content{block-size:auto}

/* ---------------------------------------------------------------- rulebook */
.outro h2{font-size:clamp(38px,5vw,68px);color:var(--night-ink);margin-bottom:6px}
.rb-h{margin:clamp(40px,6vh,64px) 0 18px;font:500 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--night-ink-2);display:flex;gap:12px;align-items:baseline}
.rb-h small{font-size:11px;letter-spacing:.06em;text-transform:none;color:var(--night-ink-3)}
.rules{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.rules li{counter-increment:r;position:relative;background:var(--night-2);border:1px solid var(--night-3);border-radius:14px;padding:20px 20px 20px 64px;display:flex;flex-direction:column;gap:6px}
.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:18px;top:18px;font:600 15px var(--mono);color:#e1563c}
.rules.alt li::before{color:#f3d2a6}
.rules b{font:600 20px/1.15 var(--serif);color:var(--night-ink)}
.rules span{font-size:16px;line-height:1.45;color:var(--night-ink-2)}
.outro .outro-p:last-of-type{margin-top:clamp(36px,5vh,56px)}
@media (max-width:640px){.rules li{padding:18px 18px 18px 54px}.rules li::before{left:16px}}

.ai-note{margin:48px 0 0;max-width:70ch;font:400 13px/1.55 var(--mono);color:var(--night-ink-3);border-top:1px solid var(--night-3);padding-top:18px}
.ai-note + .built{margin-top:14px}