:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --paper:#EEE7DA; --paper-2:#E5DAC5; --paper-3:#F5F1E9;
  --ink:#221F1A; --green:#2F5D46; --oxblood:#6E2A24; --tomato:#C0412B;
  --tobacco:#7A5634; --butter:#E8C24A; --blue:#7B94AB; --red:#C0412B;
  --table:#DAD3C6; --on-table:#221F1A; --on-table-soft:#4E473D; --line-o:.16;
  --shadow:0 1px 1px rgba(40,28,15,.18), 0 10px 22px -10px rgba(40,28,15,.45);
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --hand:"Nothing You Could Do", "Bradley Hand", "Segoe Print", cursive;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .15  0 0 0 0 .1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-heavy:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --table:#1A1917; --on-table:#EFE6D4; --on-table-soft:#B5A790; --line-o:.13;
    --shadow:0 1px 1px rgba(0,0,0,.5), 0 18px 30px -12px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --table:#1A1917; --on-table:#EFE6D4; --on-table-soft:#B5A790; --line-o:.13;
  --shadow:0 1px 1px rgba(0,0,0,.5), 0 18px 30px -12px rgba(0,0,0,.75);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100vh;color:var(--on-table);font-family:var(--serif);-webkit-font-smoothing:antialiased;
  background:var(--grain-heavy),radial-gradient(ellipse 70% 50% at 30% 8%,rgba(255,220,170,.06),transparent 70%),var(--table);}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--butter);outline-offset:6px}
svg{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:28px 22px 60px}
html,body{overflow-x:clip}



/* Engraved world map, fixed behind the table */
.map{position:fixed;inset:0;width:100%;height:100%;color:var(--on-table);pointer-events:none;z-index:0}
.map .wash{fill:#2F5D46;opacity:var(--wash-o,.10);stroke:none}
.map .tints{opacity:var(--tint-o,.26)}
.map .t0{fill:#B8636F}.map .t1{fill:#D09A2C}.map .t2{fill:#7F9377}.map .t3{fill:#3A4656}.map .t4{fill:#C0412B}
.map .lines{opacity:var(--line-o,.16)}
.map .sphere{fill:none;stroke:currentColor;stroke-width:1.6}
.map .grat{fill:none;stroke:currentColor;stroke-width:.7;stroke-dasharray:1 5;stroke-linecap:round}
.map .trop{fill:none;stroke:currentColor;stroke-width:.7;stroke-dasharray:6 6}
.map .eq{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:12 5}
.map .land{fill:url(#hatch);stroke:currentColor;stroke-width:1.1;stroke-linejoin:round}
.map .routes path{fill:none;stroke:#C0412B;stroke-width:1.6;stroke-dasharray:2 6;stroke-linecap:round}
.map .dots circle{fill:#C0412B}
.map .labels text{font-family:var(--serif);font-style:italic;font-size:15px;fill:currentColor;letter-spacing:.02em}
.map .rose circle,.map .rose path{fill:none;stroke:currentColor;stroke-width:1}
.map .rose text{font-family:var(--serif);font-size:16px;fill:currentColor}
.wrap{position:relative;z-index:1}

/* ---------- The table ---------- */
.table{position:relative}
.head{max-width:560px}
.head h1{font-weight:300;font-size:clamp(2.9rem,8.4vw,5.6rem);line-height:.94;letter-spacing:-.03em;margin:0 0 22px;font-variation-settings:"opsz" 72}
.head p{font-size:1.2rem;line-height:1.5;margin:0;max-width:30ch;color:var(--on-table-soft)}
.head .aside{font-family:var(--hand);font-size:1.15rem;color:var(--on-table-soft);margin-top:16px;transform:rotate(-2deg);display:none}
@media (pointer:fine) and (min-width:1000px){.head .aside{display:block}}

.stamp{width:150px;color:#C0412B;border:2px solid currentColor;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:.7rem;line-height:1.5;letter-spacing:.08em;opacity:.95;transform:rotate(-12deg);background:color-mix(in srgb,var(--table) 55%,transparent);
  -webkit-mask:var(--grain-heavy),linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude}
.stamp b{font-family:var(--serif);font-weight:500;font-style:italic;font-size:1.35rem;letter-spacing:0;line-height:1.1;margin:2px 0}

.obj{position:relative;flex:0 0 auto;border:0;padding:0;background:none;text-align:left;color:var(--ink);transform:rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1);touch-action:auto;-webkit-tap-highlight-color:transparent}
.obj.click{cursor:pointer}
.obj.click:hover{transform:rotate(calc(var(--r,0deg) * .35)) translateY(-8px)}
.obj.lifted{transition:none;transform:rotate(calc(var(--r,0deg) * .5)) scale(1.03)}
.obj .sh{box-shadow:var(--shadow)}
.paper{background:var(--grain),var(--paper)}
.hand{font-family:var(--hand);font-weight:400;line-height:1.25}
.tape{position:absolute;width:86px;height:26px;background:rgba(232,221,190,.62);box-shadow:0 1px 2px rgba(0,0,0,.08);clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 96%,0 45%);z-index:3}


/* Sketched heart sign-off */
.signoff{position:relative;width:190px;margin:22px 0 0 auto;transform:rotate(-6deg);color:var(--on-table)}
.signoff svg{width:100%;height:auto;overflow:visible}
.signoff path{fill:none;stroke:#C0412B;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:620;stroke-dashoffset:620;animation:sketch 1.6s .5s cubic-bezier(.45,.1,.3,1) forwards}
.signoff path.p2{stroke-width:1.4;opacity:.7;animation-delay:1.5s;animation-duration:1.2s}
@keyframes sketch{to{stroke-dashoffset:0}}
.signoff .words{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:18px;font-family:var(--hand);line-height:1.05;opacity:0;animation:inkin .8s 1.3s ease forwards}
.signoff .words span:first-child{font-size:1.35rem}
.signoff .words span:last-child{font-size:2.1rem}
@keyframes inkin{to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .signoff path{stroke-dashoffset:0} .signoff .words{opacity:1} }


/* Found words: the team's inspiration pieces, scattered and rotated each visit */
.wp .wp-in{position:relative;display:block}
.wp-print .wp-in{background:var(--grain),var(--paper-3);padding:8px 8px 24px;box-shadow:var(--shadow)}
.wp-tape .wp-in,.wp-pin .wp-in{box-shadow:var(--shadow)}
.wp-tape .tape{top:-11px;left:50%;margin-left:-43px;transform:rotate(-3deg)}
.wp-pin .wp-in::after{content:"";position:absolute;top:-5px;left:50%;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E8705A,#A8321F 70%);box-shadow:1px 3px 4px rgba(0,0,0,.45)}
.wp-scrap,.wp-strip{filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.wp-scrap .wp-in{clip-path:polygon(1% 3%,12% 0,26% 2%,41% 0,57% 3%,72% 0,86% 2%,100% 0,98% 18%,100% 36%,97% 55%,100% 74%,98% 100%,82% 97%,66% 100%,49% 97%,33% 100%,17% 98%,0 100%,2% 80%,0 61%,3% 42%,0 22%)}
.wp-strip .wp-in{clip-path:polygon(0 12%,6% 0,20% 10%,35% 2%,52% 12%,68% 0,84% 9%,100% 3%,98% 90%,85% 100%,69% 91%,51% 100%,34% 90%,17% 100%,2% 92%)}
.fw{font-size:var(--fs,10px);position:relative;display:block;color:#1F1D1A;text-align:left}
.fw-groovy{width:calc(var(--fs) * 22);padding:calc(var(--fs) * 1.2) calc(var(--fs) * 1) calc(var(--fs) * 1.4);background:var(--grain),#F1EBDD;color:#C0412B;font-family:Shrikhand,var(--serif);text-align:center;line-height:.9}
.fw-groovy span{display:block;font-size:calc(var(--fs) * 3.2)}
.fw-groovy .sm{font-size:calc(var(--fs) * 2);margin:.1em 0}
.fw-dial,.fw-stop{width:calc(var(--fs) * 18)}
.fw-stop{width:calc(var(--fs) * 16)}
.fw-dial svg,.fw-stop svg{width:100%;height:auto}
.fw-wall{width:calc(var(--fs) * 15);padding:calc(var(--fs) * 2.2) calc(var(--fs) * 1.6);background:var(--grain),#EFECE6;box-shadow:inset 0 0 0 calc(var(--fs) * 0.5) #F7F5F1,inset 0 0 0 calc(var(--fs) * 0.8) #C0412B;color:#C0412B;font-family:"Permanent Marker",var(--hand)}
.fw-wall p{margin:0;font-size:calc(var(--fs) * 2.5);line-height:1.05;transform:rotate(-2deg)}
.fw-wall i{position:absolute;font-style:normal;font-size:calc(var(--fs) * 1.9)}
.fw-wall .h1{top:calc(var(--fs) * 1);right:calc(var(--fs) * 1.2);transform:rotate(12deg)}
.fw-wall .h2{bottom:calc(var(--fs) * 1);right:calc(var(--fs) * 2.6);transform:rotate(-8deg)}
.fw-marker{width:calc(var(--fs) * 15);padding:calc(var(--fs) * 1.2) calc(var(--fs) * 1.6) calc(var(--fs) * 1.6);background:var(--grain),#EEE9DD;color:#2F6B3A;font-family:"Reenie Beanie",var(--hand);font-size:calc(var(--fs) * 3.4);line-height:.92}
.fw-poster{width:calc(var(--fs) * 15);aspect-ratio:1;overflow:hidden;background:var(--grain-heavy),#E8C24A;display:flex;align-items:center;justify-content:center}
.fw-poster i{position:absolute;font-style:normal;font-family:"Archivo Black",sans-serif;font-size:calc(var(--fs) * 3);color:#000;opacity:.08;white-space:nowrap}
.fw-poster b{font-family:"Archivo Black","Arial Black",sans-serif;font-weight:400;font-size:calc(var(--fs) * 4.6);color:#141311;letter-spacing:-.02em;position:relative}
.fw-poster .crease{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.4);box-shadow:0 1px 0 rgba(0,0,0,.14);transform:rotate(-4deg)}
.fw-note{width:calc(var(--fs) * 15);padding:calc(var(--fs) * 1.6) calc(var(--fs) * 1.4) calc(var(--fs) * 1.2);background:var(--grain),#F2ECE0;color:#6E2A24;font-family:var(--hand);font-size:calc(var(--fs) * 2.5);line-height:1.15;text-align:center}
.fw-note small{display:block;font-size:.5em;text-align:right}
.fw-receipt{width:calc(var(--fs) * 13);padding:calc(var(--fs) * 1) calc(var(--fs) * 0.8) calc(var(--fs) * 1.8);background:var(--grain),#F4F2EC;clip-path:polygon(0 0,100% 0,100% 100%,95% 97%,90% 100%,85% 97%,80% 100%,75% 97%,70% 100%,65% 97%,60% 100%,55% 97%,50% 100%,45% 97%,40% 100%,35% 97%,30% 100%,25% 97%,20% 100%,15% 97%,10% 100%,5% 97%,0% 100%)}
.fw-receipt pre{margin:0;font-family:"Courier Prime",var(--mono);font-size:calc(var(--fs) * 0.6);line-height:1.5;color:#8C877D;white-space:pre;overflow:hidden}
.fw-receipt b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Permanent Marker",var(--hand);font-weight:400;font-size:calc(var(--fs) * 2.6);line-height:.95;color:#161412;transform:rotate(-7deg)}
.fw-strip{width:calc(var(--fs) * 27);padding:calc(var(--fs) * 0.6) calc(var(--fs) * 1.1);background:var(--grain),#F2EDE2;font-family:var(--serif);font-size:calc(var(--fs) * 1.3);color:#2A2723;white-space:nowrap;overflow:hidden}
.fw-strip mark{background:linear-gradient(transparent 16%,#EBE15B 16%,#EBE15B 90%,transparent 90%);color:inherit;padding:0 .1em}
.fw-type{width:calc(var(--fs) * 20);padding:calc(var(--fs) * 1.8) calc(var(--fs) * 1.8) calc(var(--fs) * 2);background:var(--grain),#E4DED0;color:#2A2723}
.fw-type h4{margin:0 0 calc(var(--fs) * 1);font-family:var(--serif);font-weight:400;font-size:calc(var(--fs) * 1.3);letter-spacing:.06em}
.fw-type p{margin:0 0 calc(var(--fs) * 1.2);font-family:"Courier Prime",var(--mono);font-size:calc(var(--fs) * 0.92);line-height:1.5;letter-spacing:.05em}
.fw-type ul{list-style:none;margin:0;padding:0 0 0 calc(var(--fs) * 1.2);font-family:var(--serif);font-style:italic;font-size:calc(var(--fs) * 1.1);line-height:1.7;letter-spacing:.03em}
.fw-dict{width:calc(var(--fs) * 21);padding:calc(var(--fs) * 1.6) calc(var(--fs) * 1.8) calc(var(--fs) * 1.8);background:#FBFAF6;color:#111}
.fw-dict h4{margin:0;font-family:var(--serif);font-weight:500;font-size:calc(var(--fs) * 3.4);line-height:1}
.fw-dict .pr{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:calc(var(--fs) * 0.85);margin:calc(var(--fs) * 0.8) 0}
.fw-dict .df{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-style:italic;font-size:calc(var(--fs) * 0.95);line-height:1.45;margin:0}
.fw-stamp{width:calc(var(--fs) * 14);padding:calc(var(--fs) * 0.9);background:#F7F4EE;border-radius:calc(var(--fs) * 0.9)}
.fw-stamp div{border:calc(var(--fs) * 0.35) solid #C0412B;padding:calc(var(--fs) * 0.9) calc(var(--fs) * 0.8);color:#C0412B;font-family:"Permanent Marker",var(--hand);font-size:calc(var(--fs) * 1.65);line-height:1.05;-webkit-mask:var(--grain-heavy),linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude}
.fw-stencil{width:calc(var(--fs) * 15);padding:calc(var(--fs) * 2) calc(var(--fs) * 1.4);background:var(--grain-heavy),var(--grain-heavy),#A19D96;background-size:90px,140px,auto}
.fw-stencil p{margin:0;font-family:"Big Shoulders Stencil Display",Impact,sans-serif;font-weight:800;font-size:calc(var(--fs) * 2.7);line-height:1;color:#1B1A18;opacity:.86}

.lb{position:fixed;inset:0;z-index:50;background:rgba(10,8,6,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px))}
.lb-in{display:flex;flex-direction:column;align-items:center;max-width:100%}
.lb-fig{margin:0;max-width:92vw;transform:rotate(-1.5deg);animation:settle3 .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes settle3{from{opacity:0;transform:translateY(30px) rotate(-6deg)}to{opacity:1;transform:rotate(-1.5deg)}}
.lb .actions{justify-content:center}
.lb .btn{background:#EEE7DA;color:#1A1917;border-color:#EEE7DA}
.lb .btn.ghost{background:transparent;color:#EEE7DA}


.signoff .thistle{position:absolute;width:40px;right:-28px;bottom:-16px;color:var(--on-table-soft);transform:rotate(14deg);opacity:0;animation:inkin .8s 2.2s ease forwards}
.signoff .thistle path{stroke-width:2.2}
.about-thistle{width:40px;color:var(--on-table-soft);margin:0 0 18px;transform:rotate(-8deg)}
.seal{position:absolute;right:-14px;bottom:-16px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#D2533B,#A0301F 70%);box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 0 0 4px rgba(0,0,0,.12);color:#F3E6D4;display:flex;align-items:center;justify-content:center;transform:rotate(-10deg);z-index:2}
.seal svg{width:22px}
.fw-warn{width:calc(var(--fs) * 17);background:var(--grain),#E8C24A;border:calc(var(--fs) * .3) solid #141311;color:#141311}
.fw-warn .band{height:calc(var(--fs) * 1);background:repeating-linear-gradient(45deg,#141311 0 calc(var(--fs) * .55),transparent calc(var(--fs) * .55) calc(var(--fs) * 1.1))}
.fw-warn .body{padding:calc(var(--fs) * 1.1) calc(var(--fs) * 1.3) calc(var(--fs) * 1.3)}
.fw-warn h4{margin:0 0 calc(var(--fs) * .7);font-family:"Archivo Black","Arial Black",sans-serif;font-weight:400;font-size:calc(var(--fs) * 1.45);line-height:1.05}
.fw-warn p{margin:0;font-family:"Courier Prime",var(--mono);font-size:calc(var(--fs) * .92);line-height:1.45}

/* Listen: record sleeve */
.o-listen{width:310px}
.o-listen .disc{position:absolute;top:4%;left:30%;width:92%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--oxblood) 0 15%,#0f0d0b 15.5% 17%,transparent 17.5%),repeating-radial-gradient(circle,#151311 0 1.2px,#1f1c19 1.2px 2.6px);box-shadow:var(--shadow);transition:left .6s cubic-bezier(.2,.8,.2,1)}
.o-listen:hover .disc,.o-listen:focus-visible .disc{left:44%}
.o-listen .jacket{position:relative;aspect-ratio:1;overflow:hidden;background:#15110E}
.o-listen .jacket svg{position:absolute;inset:0;width:100%;height:100%}
.o-listen .print{position:absolute;left:18px;right:18px;bottom:16px;color:#EFE7D7}
.o-listen .print .t{font-style:italic;font-weight:300;font-size:2.9rem;line-height:.9;letter-spacing:-.02em}
.o-listen .print .s{font-size:.9rem;line-height:1.35;margin-top:8px;opacity:.85;max-width:24ch}
.o-listen .sticker{position:absolute;top:14px;right:14px;width:84px;aspect-ratio:1;border-radius:50%;background:var(--grain),#E8C24A;color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.95rem;padding:10px;transform:rotate(9deg);z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.3)}

/* Look: polaroid */
.o-look{width:250px}
.o-look .frame{background:var(--grain),var(--paper-3);padding:12px 12px 16px}
.o-look .img{aspect-ratio:1;overflow:hidden;background:#2D5A60}
.o-look .img svg{width:100%;height:100%}
.o-look .cap{font-size:1.5rem;margin:12px 4px 2px}
.o-look .meta{font-family:var(--mono);font-size:.64rem;color:#6F665A;margin:0 4px;letter-spacing:.02em}
.o-look .tape{top:-12px;left:82px;transform:rotate(-4deg);background:rgba(232,221,190,.62)}

/* Read: folded note */
.o-read{width:290px}
.o-read .sheet{position:relative;padding:34px 28px 26px;background:var(--grain),repeating-linear-gradient(0deg,transparent 0 23px,rgba(123,148,171,.28) 23px 24px),var(--paper-3);background-position:0 0,0 18px,0 0}
.o-read .sheet::after{content:"";position:absolute;left:0;right:0;top:48%;height:1px;background:rgba(80,60,40,.14);box-shadow:0 1px 0 rgba(255,255,255,.5)}
.o-read .big{font-size:1.75rem;color:#1F2B3A;margin:0 0 14px}
.o-read .small{font-size:1.05rem;color:#3A4656;margin:0 0 12px}
.o-read .sig{font-size:1.2rem;text-align:right;color:#1F2B3A}
.o-read .tape{top:-10px;left:-18px;transform:rotate(-32deg);background:rgba(232,221,190,.62)}

/* Taste: recipe card */
/* Printed recipe card, filled in by hand (used on the table and in the card view) */
.rc{position:relative;display:block;font-size:var(--rc,11px);background:var(--grain),#F1EBDD;border:1em solid #C0412B;padding:1.4em 1.8em 1.9em;color:#1B1814;text-align:left}
.rc .lbl{font-family:var(--serif);font-size:.72em;letter-spacing:.2em;text-transform:uppercase;color:#C0412B;white-space:nowrap}
.rc .ink{font-family:var(--hand);color:#1B1814;line-height:1.3}
.rc .row{display:flex;align-items:flex-end;gap:.9em;border-bottom:1px solid rgba(192,65,43,.28);padding-bottom:.25em;margin-bottom:.95em}
.rc .word{font-family:"Instrument Serif",var(--serif);font-weight:400;font-size:5.4em;line-height:.8;color:#C0412B;letter-spacing:-.01em;transform:scaleY(1.12);transform-origin:bottom;margin-right:.1em}
.rc .title{font-size:2.3em;transform:rotate(-2.5deg) translateY(-.15em);transform-origin:left bottom}
.rc .name{font-size:1.9em;transform:rotate(-1deg)}
.rc .meta{display:flex;gap:1.6em;flex-wrap:wrap}
.rc .meta{gap:1.1em}
.rc .meta .row{flex:1 1 auto;min-width:0}
.rc .meta .ink{font-size:1.55em;white-space:nowrap}
.rc .meta .lbl{font-size:.64em}
.rc .cols{display:grid;grid-template-columns:38% 1fr;gap:1.6em;margin-top:.3em}
.rc .ruled{background:repeating-linear-gradient(to bottom,transparent 0 calc(2.2em - 1px),rgba(192,65,43,.18) calc(2.2em - 1px) 2.2em);background-position:0 .35em}
.rc .ruled .ink{font-size:1.55em;line-height:1.42em}
.rc .ing span{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip}
.rc .dir .ink{display:block;transform:rotate(-.6deg);transform-origin:left top}
.rc .col .lbl{display:block;margin-bottom:.5em}
.rc-light{position:absolute;inset:-1em;pointer-events:none;background:linear-gradient(118deg,transparent 46%,rgba(25,14,6,.26) 56%,rgba(25,14,6,.3) 74%,transparent 86%);filter:blur(6px);mix-blend-mode:multiply}

.o-taste{width:370px}
.o-taste .under{position:absolute;inset:0;display:block;background:var(--grain),#F1EBDD;border:11px solid #A8382A;box-shadow:var(--shadow)}
.o-taste .under.u1{transform:rotate(5deg) translate(12px,6px)}
.o-taste .under.u2{transform:rotate(-4deg) translate(-10px,14px)}
.o-taste .rc{--rc:9.5px;box-shadow:var(--shadow)}

/* Guest check */
.gc{position:relative;display:block;font-size:var(--gc,11px);background:var(--grain),#DCE5D4;color:#2F5D46;padding:1.3em 1.5em 0;text-align:left}
.gc .hdr{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #2F5D46;padding-bottom:.4em}
.gc .hdr .t{font-family:"Instrument Serif",var(--serif);font-size:2.9em;line-height:.9;transform:scaleY(1.1);transform-origin:bottom}
.gc .no{font-family:var(--mono);font-size:1em;color:#C0412B;letter-spacing:.04em}
.gc .boxes{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1.5px solid #2F5D46}
.gc .boxes span{border-right:1px solid rgba(47,93,70,.6);padding:.35em .5em .3em;font-family:var(--mono);font-size:.62em;letter-spacing:.12em}
.gc .boxes span:last-child{border-right:0}
.gc .boxes b{display:block;font-family:var(--hand);font-weight:400;font-size:2.2em;letter-spacing:0;color:#1F2B3A;line-height:1.2;min-height:1.2em}
.gc .lines{background:repeating-linear-gradient(to bottom,transparent 0 calc(2.6em - 1px),rgba(47,93,70,.35) calc(2.6em - 1px) 2.6em);min-height:10.4em;padding-top:.2em}
.gc .item{display:flex;align-items:baseline;gap:.8em;height:2.6em;font-family:var(--hand);color:#1F2B3A;font-size:1em}
.gc .item .h{font-size:1.55em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;font-family:inherit}
.gc .item .p{font-size:1.55em;white-space:nowrap}
.gc .item .g{font-family:var(--mono);font-size:.62em;letter-spacing:.12em;background:none;border:0;border-bottom:1px solid currentColor;padding:0;color:#2F5D46;cursor:pointer}
.gc .total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid #2F5D46;padding:.5em 0 .2em}
.gc .total .lbl{font-family:var(--mono);font-size:.7em;letter-spacing:.14em}
.gc .total .ink{font-family:var(--hand);font-size:1.9em;color:#1F2B3A;transform:rotate(-2deg)}
.gc .notes{font-family:var(--hand);color:#1F2B3A;font-size:1.5em;line-height:1.35;padding:.2em 0 .9em}
.gc .stub{margin:0 -1.5em;padding:1em 1.5em 1.2em;border-top:2px dashed rgba(47,93,70,.5);display:flex;justify-content:space-between;gap:1em;align-items:baseline}
.gc .stub .lbl{font-family:var(--mono);font-size:.62em;letter-spacing:.14em}
.gc .stub .ink{font-family:var(--hand);font-size:1.35em;color:#1F2B3A}
.o-check{width:210px}
.o-check .gc{--gc:8.5px;box-shadow:var(--shadow)}
.o-check .gc .lines{min-height:7.8em}
.o-check .item .h{font-size:2em}

/* decorative photo print */
.o-print{width:210px}
.o-print .frame{background:var(--grain),var(--paper-3);padding:9px 9px 30px}
.o-print .img{aspect-ratio:4/5;overflow:hidden}
.o-print .img svg{width:100%;height:100%}
.o-print .cap{position:absolute;bottom:4px;left:14px;font-size:1rem;color:#5A4E40}

/* Do: matchbook */
.o-do{width:176px}
.o-do .book{position:relative;height:240px;background:var(--grain-heavy),#2F5D46;color:#EFE3D1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 16px 0}
.o-do .book .t{font-style:italic;font-weight:300;font-size:3.4rem;line-height:.9}
.o-do .book .s{font-size:1.02rem;line-height:1.3;margin-top:14px;max-width:12ch}
.o-do .book .fold{position:absolute;left:0;right:0;bottom:30px;height:1px;background:rgba(0,0,0,.35);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.o-do .book .strike{position:absolute;left:0;right:0;bottom:0;height:26px;background:var(--grain-heavy),var(--grain-heavy),#4A3322;background-size:60px,90px}
.o-do .book .mark{position:absolute;bottom:40px;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;opacity:.7}

/* Shuffle: boarding pass */
.o-shuffle{width:450px}
.o-shuffle .pass{display:flex;min-height:172px}
.o-shuffle .main{flex:1;padding:16px 20px 16px;background:var(--grain),var(--paper-3)}
.o-shuffle .stub{width:118px;padding:16px 14px;color:#221F1A;background:var(--grain),#E8C24A;border-left:2px dashed rgba(34,31,26,.35);display:flex;flex-direction:column;justify-content:space-between}
.o-shuffle .air{font-style:italic;font-size:1.05rem;display:flex;justify-content:space-between;align-items:baseline}
.o-shuffle .air span:last-child{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.12em;color:#6F665A}
.o-shuffle .route{display:flex;align-items:baseline;gap:14px;margin:12px 0 12px}
.o-shuffle .route .p{font-size:1.9rem;font-weight:300;line-height:1;letter-spacing:-.01em}
.o-shuffle .route .arrow{flex:1;border-top:1px solid rgba(34,31,26,.35);transform:translateY(-6px)}
.o-shuffle .fields{display:grid;grid-template-columns:repeat(4,auto);gap:4px 16px;justify-content:start}
.o-shuffle .f small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;color:#6F665A}
.o-shuffle .f span{font-family:var(--mono);font-size:.86rem}
.o-shuffle .bar{height:44px;background:repeating-linear-gradient(90deg,#221F1A 0 2px,transparent 2px 4px,#221F1A 4px 5px,transparent 5px 8px,#221F1A 8px 11px,transparent 11px 12px)}
.o-shuffle .stub .hand{font-size:1.1rem;line-height:1.2}
.o-shuffle .stub .bar{background:repeating-linear-gradient(90deg,#221F1A 0 2px,transparent 2px 4px,#221F1A 4px 5px,transparent 5px 8px,#221F1A 8px 11px,transparent 11px 12px)}

/* who tag */
.o-who{width:190px}
.o-who .tag{position:relative;background:var(--grain),var(--paper-2);padding:16px 16px 14px 34px;clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%)}
.o-who .tag::before{content:"";position:absolute;left:12px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--table);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.o-who .tag .hand{font-size:1.3rem;color:var(--ink)}


/* ---------- Card view (reskinned; full redesign next) ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:4px 0 26px;color:var(--on-table)}
.back{background:none;border:0;padding:8px 0;font-size:1.05rem}
.back::before{content:"";display:inline-block;width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:10px;vertical-align:2px}
.count{color:var(--on-table-soft);font-style:italic}
.stage{max-width:600px;margin:0 auto}
.card{position:relative;background:var(--grain),var(--c);color:var(--ci);padding:40px 26px 26px;box-shadow:var(--shadow);transform:rotate(-.6deg)}
@media (min-width:600px){.card{padding:48px 44px 34px}}
.card .tape{top:-12px;left:50%;margin-left:-43px;transform:rotate(2deg)}
.card.enter{animation:settle .7s cubic-bezier(.2,.9,.25,1) both}
@keyframes settle{from{opacity:0;transform:translateY(40px) rotate(-5deg)}to{opacity:1;transform:rotate(-.6deg)}}
.card .stackname{font-style:italic;font-size:1rem;opacity:.7;margin:0 0 20px}
.card .hook{font-weight:300;font-size:clamp(2rem,6.4vw,2.9rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 24px}
.card .body{font-size:1.2rem;line-height:1.6}
.card .body p{margin:0 0 1em}
.poem{white-space:pre-line;font-size:1.15rem;line-height:1.7;margin:0 0 6px}
.poet{font-style:italic;opacity:.8;margin:0 0 4px}
.song{margin:4px 0 22px}
.song .t{font-size:1.8rem;line-height:1.2;font-style:italic}
.song .a{opacity:.8;margin-top:4px}
.play{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 6px}
.play a{text-underline-offset:4px;font-size:1.02rem}
.recipe-stage{margin:6px 0 0}
.recipe-stage .rc{--rc:clamp(9px,2.55vw,15px);box-shadow:var(--shadow);transform:rotate(-.8deg)}
.recipe-stage .rc.enter{animation:settle2 .7s cubic-bezier(.2,.9,.25,1) both}
@keyframes settle2{from{opacity:0;transform:translateY(40px) rotate(-5deg)}to{opacity:1;transform:rotate(-.8deg)}}
.taste-head{margin:0 0 26px}
.taste-head .stackname{font-style:italic;color:var(--on-table-soft);margin:0 0 12px}
.taste-head .hook{font-weight:300;font-size:clamp(2rem,6.4vw,2.9rem);line-height:1.02;letter-spacing:-.025em;margin:0}
.taste-foot{margin-top:30px;color:var(--on-table)}
.taste-foot p{font-style:italic;font-size:1.1rem;line-height:1.55;margin:0 0 14px;max-width:46ch}
.check-stage .gc{--gc:clamp(10px,2.9vw,15px);box-shadow:var(--shadow);transform:rotate(.6deg)}
.recipe h3{font-size:1rem;font-style:italic;font-weight:400;margin:22px 0 8px}
.recipe ul,.recipe ol{margin:0;padding-left:1.2em;font-size:1.08rem;line-height:1.55}
.recipe li{margin-bottom:6px}
.palette{display:flex;height:120px;overflow:hidden;margin:0 0 20px}
.palette span{flex:var(--w,1)}
.outlink{display:inline-block;margin-top:4px;text-underline-offset:4px}
.why{margin-top:28px;padding-top:20px;border-top:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.why p{font-style:italic;font-size:1.08rem;line-height:1.55;margin:0 0 14px}
.sig{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sig .who{font-family:var(--hand);font-size:1.6rem;line-height:1}
.sig .where{font-size:.95rem;opacity:.75}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 0}
.btn{padding:13px 22px;font-size:1.05rem;border:1px solid var(--on-table);background:var(--on-table);color:var(--table);border-radius:1px}
.btn.ghost{background:transparent;color:var(--on-table)}
.note{min-height:1.4em;color:var(--on-table-soft);margin-top:14px;font-style:italic}
.sharebox{display:none;margin-top:12px}
.sharebox.show{display:block}
.sharebox input{width:100%;padding:12px;border:1px solid var(--on-table-soft);background:transparent;color:var(--on-table);font:inherit}
.center{min-height:70vh;display:flex;flex-direction:column;justify-content:center;max-width:560px;margin:0 auto}
.center h2{font-weight:300;font-size:clamp(2.3rem,8vw,3.8rem);line-height:1;letter-spacing:-.03em;margin:0 0 18px}
.center p{font-size:1.2rem;line-height:1.6;margin:0 0 16px}
.center .small{font-size:1rem;color:var(--on-table-soft);font-style:italic}
.envelope{width:130px;height:86px;background:var(--grain),var(--paper);position:relative;margin-bottom:34px;transform:rotate(-4deg);box-shadow:var(--shadow)}
.envelope::after{content:"";position:absolute;inset:0 0 40% 0;background:linear-gradient(to bottom right,transparent 49.5%,rgba(0,0,0,.12) 50%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49.5%,rgba(0,0,0,.12) 50%) right/50% 100% no-repeat}

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }
/* ---------- Shared resets for the paper objects (now plain elements, not free-floating) ---------- */
.obj{display:block}
.o-listen .jacket,.o-listen .print .t,.o-listen .print .s,.o-read .sheet,.o-read .hand,.o-look .frame,.o-look .img,.o-look .cap,.o-look .meta{display:block}
.o-look .img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{cursor:pointer}
a.btn{display:inline-block;text-decoration:none}

/* ---------- Welcome ---------- */
.intro{position:fixed;inset:0;z-index:100;background:#0E0D0C;color:#EEE7DA;display:flex;flex-direction:column;justify-content:center;padding:calc(48px + env(safe-area-inset-top,0px)) 8vw calc(90px + env(safe-area-inset-bottom,0px));transition:opacity 1s ease,visibility 1s;cursor:pointer}
.intro::before{content:"";position:absolute;inset:0;background:var(--grain-heavy);opacity:.6;pointer-events:none}
.intro.out{opacity:0;visibility:hidden}
.intro:focus{outline:none}
.i-copy{position:relative;max-width:1000px;margin:0 auto;width:100%}
.i1{font-weight:300;font-size:clamp(2.5rem,7.2vw,6rem);line-height:1.22;letter-spacing:-.03em;margin:0;padding-top:.5em}
.i1 .w,.i2 .w{display:inline-block;opacity:0;transform:translateY(.28em);filter:blur(8px);animation:wordin 1.1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
.i2 .w{filter:blur(4px);animation-duration:.9s}
@keyframes wordin{to{opacity:1;transform:none;filter:blur(0)}}
.strike{position:relative;display:inline-block}
.strike .w{color:#8F877A;transition:color .6s 2.4s}
.strike svg{position:absolute;left:-3%;top:44%;width:106%;height:.32em;overflow:visible;pointer-events:none}
.strike path{fill:none;stroke:#C8472F;stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:300;stroke-dashoffset:300;animation:pen .45s var(--d) cubic-bezier(.5,0,.3,1) forwards}
@keyframes pen{to{stroke-dashoffset:0}}
.fix{position:absolute;left:4%;bottom:74%;font-family:var(--hand);font-size:.56em;letter-spacing:0;color:#E0694C;white-space:nowrap;transform:rotate(-6deg);clip-path:inset(-20% 100% -20% 0);animation:write 1.2s var(--d) cubic-bezier(.45,.05,.3,1) forwards}
@keyframes write{to{clip-path:inset(-20% -5% -20% 0)}}
.i2{margin:1.5em 0 0;font-weight:300;font-size:clamp(1.15rem,2.2vw,1.75rem);line-height:1.45;color:#CFC6B6;max-width:30ch}
.skip{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:none;border:0;border-bottom:1px solid currentColor;padding:4px 0;color:#A9A298;font-family:var(--serif);font-style:italic;font-size:1.05rem;animation:fadein 1s .8s both}
.skip:hover,.skip:focus-visible{color:#EEE7DA}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- Landing: four choices ---------- */
.land{min-height:calc(100vh - 88px);display:flex;flex-direction:column;justify-content:center;padding-bottom:10px}
.land-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:clamp(8px,3vh,36px) 0 clamp(26px,6vh,64px)}
.land-head h1{font-weight:300;font-size:clamp(2.5rem,5.6vw,5rem);line-height:.98;letter-spacing:-.035em;margin:0 0 16px;outline:none}
.land-head p{font-size:clamp(1.05rem,1.45vw,1.22rem);line-height:1.5;color:var(--on-table-soft);max-width:34ch;margin:0}
.land-head .signoff{width:118px;flex:0 0 auto;margin:6px 10px 0 0}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,40px);align-items:start}
.pick{display:flex;flex-direction:column;align-items:center;width:100%;background:none;border:0;padding:0;color:inherit;text-align:center;cursor:pointer}
.pick .obj-wrap{height:clamp(250px,34vh,300px);display:flex;align-items:flex-end;justify-content:center;width:100%}
.pick .o-listen{width:min(210px,100%);margin-right:26px}
.pick .o-read{width:min(215px,100%)}
.pick .o-read .big{font-size:1.5rem}
.pick .o-read .small{font-size:.98rem}
.pick .o-look{width:min(200px,100%)}
.pick .o-look .meta{font-size:.55rem}
.pick .o-taste{width:min(285px,100%)}
.pick .o-taste .rc{--rc:7.4px}
.pick:hover .obj,.pick:focus-visible .obj{transform:rotate(calc(var(--r,0deg) * .3)) translateY(-10px)}
.pick:hover .disc,.pick:focus-visible .disc{left:44%}
.pick .label{display:block;margin-top:24px;min-height:3.4em}
.pick .label .n{display:block;font-size:1.32rem;line-height:1.15;color:var(--on-table)}
.pick .label .h{display:block;font-family:var(--hand);font-size:.98rem;line-height:1.3;color:var(--on-table-soft);margin-top:6px}
.pick:hover .label .n,.pick:focus-visible .label .n{text-decoration:underline;text-decoration-color:#C0412B;text-underline-offset:5px;text-decoration-thickness:1.5px}
.pick:focus-visible{outline:none}
.pick:focus-visible .label .n{outline:2px solid var(--butter);outline-offset:4px}
.four.enter .pick-cell{animation:settleIn .9s cubic-bezier(.2,.85,.25,1) both;animation-delay:var(--d)}
@keyframes settleIn{from{opacity:0;transform:translateY(34px) rotate(-2deg)}to{opacity:1;transform:none}}
.swipe-hint{display:none}
.more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 30px;margin-top:clamp(30px,6vh,64px);padding-top:22px;border-top:1px solid color-mix(in srgb,var(--on-table) 12%,transparent);color:var(--on-table-soft)}
.more-lead{font-style:italic}
.mini{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;color:var(--on-table);font-family:var(--serif);font-size:1.05rem;border-bottom:1px solid transparent}
.mini:hover,.mini:focus-visible{border-bottom-color:#C0412B}
.mini span{display:inline-block;flex:0 0 auto;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.m-do{width:16px;height:22px;background:linear-gradient(transparent 76%,#4A3322 76%),#2F5D46;transform:rotate(6deg)}
.m-shuffle{width:28px;height:16px;background:linear-gradient(90deg,#F5F1E9 64%,#E8C24A 64%);transform:rotate(-5deg)}
.m-check{width:18px;height:24px;background:repeating-linear-gradient(transparent 0 4px,rgba(47,93,70,.35) 4px 5px),#DCE5D4;transform:rotate(4deg)}
.m-tag{width:24px;height:15px;background:#E5DAC5;clip-path:polygon(28% 0,100% 0,100% 100%,28% 100%,0 50%);transform:rotate(-8deg)}
@media (max-width:820px){
  .land{justify-content:flex-start;min-height:0}
  .land-head{padding-top:14px;padding-bottom:26px}
  .land-head .signoff{width:84px;margin:0}
  .four{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;margin:0 -22px;padding:14px 22px 10px;scrollbar-width:none;align-items:flex-end}
  .four::-webkit-scrollbar{display:none}
  .pick-cell{flex:0 0 68vw;scroll-snap-align:center}
  .pick .obj-wrap{height:262px}
  .pick .o-listen{width:200px}
  .pick .o-taste{width:min(270px,66vw)}
  .swipe-hint{display:block;text-align:right;margin:6px 4px 0 0;color:var(--on-table-soft);font-size:.95rem}
  .more{justify-content:flex-start;gap:14px 24px}
  .more-lead{flex-basis:100%}
}

/* ---------- Inside a collection ---------- */
.colbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;margin:-28px calc(50% - 50vw) 0;padding:calc(12px + env(safe-area-inset-top,0px)) max(22px,calc(50vw - 568px)) 12px;background:color-mix(in srgb,var(--table) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--on-table) 12%,transparent)}
.colbar .back{flex:0 0 auto;color:var(--on-table)}
.colbar nav{min-width:0;flex:1}
.colbar ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 24px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.colbar ul::-webkit-scrollbar{display:none}
.colbar ul button{background:none;border:0;padding:6px 0 4px;font-family:var(--serif);font-size:1.05rem;color:var(--on-table-soft);border-bottom:2px solid transparent}
.colbar ul button:hover{color:var(--on-table)}
.colbar ul button[aria-current]{color:var(--on-table);border-bottom-color:#C0412B}
.cview{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px 70px;align-items:center;padding:clamp(40px,8vh,80px) 0 40px}
.cview h1{font-weight:300;font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:1;letter-spacing:-.03em;margin:0 0 14px;outline:none}
.cview .note{font-family:var(--hand);font-size:1.25rem;line-height:1.35;color:var(--on-table-soft);margin:0 0 20px;transform:rotate(-1.2deg);transform-origin:left}
.cview .left{font-style:italic;color:var(--on-table-soft);margin:0 0 26px}
.hero{display:flex;justify-content:center;background:none;border:0;padding:20px 0;cursor:pointer}
.hero:hover .obj,.hero:focus-visible .obj{transform:rotate(calc(var(--r,0deg) * .3)) translateY(-10px)}
.hero:hover .disc,.hero:focus-visible .disc{left:44%}
.hero .o-listen{width:330px;margin-right:90px}
.hero .o-read{width:330px}
.hero .o-read .big{font-size:2rem}
.hero .o-read .small{font-size:1.2rem}
.hero .o-look{width:310px}
.hero .o-taste{width:470px}
.hero .o-taste .rc{--rc:11px}
.hero .o-do{width:210px}
.hero .o-do .book{height:290px}
.hero .o-shuffle{width:470px}
.also{padding:10px 0 70px}
.also h2{font-weight:400;font-style:italic;font-size:1.15rem;color:var(--on-table-soft);margin:0}
.shelf{display:flex;flex-wrap:nowrap;align-items:center;gap:44px;overflow-x:auto;overflow-y:visible;margin:-10px -22px 0 -8px;padding:40px 60px 44px 8px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--on-table) 25%,transparent) transparent;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent)}
.shelf > .obj{flex:0 0 auto;scroll-snap-align:start}
.shelf > .obj:nth-child(even){margin-top:14px}
@media (max-width:820px){
  .colbar{gap:16px}
  .cview{grid-template-columns:1fr;gap:10px;padding-top:34px}
  .cview .left{margin-bottom:18px}
  .hero{padding:26px 0 6px}
  .hero .o-listen{width:min(250px,64vw);margin-right:60px}
  .hero .o-read,.hero .o-look{width:min(290px,78vw)}
  .hero .o-taste{width:min(360px,86vw)}
  .hero .o-taste .rc{--rc:min(9.5px,2.35vw)}
  .hero .o-shuffle{width:min(420px,88vw)}
  .hero .o-shuffle .route .p{font-size:1.5rem}
  .hero .o-shuffle .stub{width:94px}
  .hero .o-shuffle .fields{grid-template-columns:repeat(2,auto)}
  .shelf{margin:0 -22px;padding:30px 22px 34px;gap:26px;-webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .shelf > .obj{scroll-snap-align:center;max-width:82vw}
}

/* ---------- The crate ---------- */
.crate{padding:10px 0 20px}
.crate-head{display:flex;align-items:baseline;gap:8px 22px;flex-wrap:wrap}
.crate-head h2,.also h2{font-weight:400;font-style:italic;font-size:1.15rem;color:var(--on-table-soft);margin:0}
.crate-head .hand{margin:0;font-size:1.02rem;color:var(--on-table-soft)}
.crate-row{gap:34px;align-items:flex-start}
.pl-pick{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:none;border:0;padding:0;color:var(--on-table);text-align:left;cursor:pointer;scroll-snap-align:start}
.pl-name{font-size:1.05rem;padding-left:4px}
.pl-pick:nth-child(odd) .cover{transform:rotate(-1.4deg)}.pl-pick:nth-child(even) .cover{transform:rotate(1.1deg)}
.plview .cover{transform:rotate(-1.5deg)}
.pl-pick:hover .pl-name,.pl-pick:focus-visible .pl-name{text-decoration:underline;text-decoration-color:#C0412B;text-underline-offset:4px}
.pl-pick:focus-visible{outline:none}
.pl-pick:focus-visible .cover{outline:2px solid var(--butter);outline-offset:4px}
.sleeve{position:relative;display:block;width:172px;margin-right:34px}
.sleeve.big{width:min(300px,70vw);margin-right:70px}
.sleeve .vinyl{position:absolute;top:4%;left:26%;width:92%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--lab,#C0412B) 0 15%,#0f0d0b 15.5% 17%,transparent 17.5%),repeating-radial-gradient(circle,#151311 0 1.2px,#1f1c19 1.2px 2.6px);box-shadow:var(--shadow);transition:left .6s cubic-bezier(.2,.8,.2,1)}
.pl-pick:hover .vinyl,.pl-pick:focus-visible .vinyl{left:40%}
.pl-pick:hover .cover{transform:rotate(-1deg) translateY(-6px)}
.sleeve .cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1;padding:12%;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1);background-blend-mode:multiply}
.sleeve .st{position:relative;display:block;line-height:.95}
.sleeve .sn{position:relative;display:block;font-family:var(--mono);font-size:.62em;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.sleeve{font-size:14px}.sleeve.big{font-size:24px}
/* eight sleeves, eight moods */
.s-dance{--lab:#E8C24A}.s-dance .cover{background:radial-gradient(circle at 70% 30%,rgba(255,230,160,.9) 0 1.5px,transparent 2px) 0 0/14px 14px,radial-gradient(circle at 72% 28%,#C9563A,#7E2418 70%);color:#F6EAD6}
.s-dance .st{font-family:Shrikhand,var(--serif);font-size:2.1em}
.s-feels{--lab:#EEE7DA}.s-feels .cover{background:var(--grain),repeating-linear-gradient(100deg,transparent 0 9px,rgba(255,255,255,.08) 9px 10px),#6F869C;color:#132033}
.s-feels .st{font-family:var(--hand);font-size:1.9em;transform:rotate(-4deg)}
.s-vibes{--lab:#C0412B}.s-vibes .cover{background:radial-gradient(circle at 68% 64%,#D9532F 0 22%,transparent 22.5%),var(--grain),#E8C24A;color:#171512}
.s-vibes .st{font-family:"Archivo Black",sans-serif;font-size:1.75em;letter-spacing:-.02em}
.s-back{--lab:#2F5D46}.s-back .cover{background:linear-gradient(transparent 52%,#C0412B 52% 60%,#E08A34 60% 68%,#E8C24A 68% 76%,#2F5D46 76% 84%,transparent 84%),var(--grain),#F1EBDD;color:#2A2016}
.s-back .st{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.9em}
.s-rock{--lab:#EEE7DA}.s-rock .cover{background:linear-gradient(118deg,transparent 58%,#C0412B 58% 66%,transparent 66%),var(--grain-heavy),#121110;color:#F3EEE4}
.s-rock .st{font-family:"Big Shoulders Stencil Display",Impact,sans-serif;font-weight:800;font-size:2.5em;text-transform:uppercase}
.s-rap{--lab:#E8C24A}.s-rap .cover{background:var(--grain-heavy),#2F5D46;color:#E8C24A}
.s-rap .st{font-family:"Permanent Marker",var(--hand);font-size:1.55em;transform:rotate(-3deg)}
.s-dark{--lab:#7B94AB}.s-dark .cover{background:repeating-radial-gradient(circle at 50% 120%,transparent 0 10px,rgba(123,148,171,.22) 10px 11px),#141B26;color:#DDE5EE}
.s-dark .st{font-family:var(--mono);font-size:1.3em;letter-spacing:.2em;text-transform:uppercase}
.s-oldies{--lab:#E5DAC5}.s-oldies .cover{background:radial-gradient(ellipse 64% 44% at 50% 44%,#F1E6CC 0 98%,transparent 100%),var(--grain-heavy),#7A5634;color:#4A3222;align-items:center;text-align:center}
.s-oldies .st{font-family:"Instrument Serif",var(--serif);font-size:2em;margin-top:18%}
/* playlist page */
.plview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px 60px;align-items:center;padding:clamp(40px,7vh,72px) 0 34px}
.pl-text .kicker{font-style:italic;color:var(--on-table-soft);margin:0 0 10px}
.pl-text h1{font-weight:300;font-size:clamp(2.4rem,4.6vw,4rem);line-height:1;letter-spacing:-.03em;margin:0 0 14px;outline:none}
.pl-text .note{font-family:var(--hand);font-size:1.25rem;color:var(--on-table-soft);margin:0 0 22px;max-width:26em}
.soon{font-style:italic;color:var(--on-table-soft);align-self:center}
.backcover{background:var(--grain),#EFE8DB;color:#221F1A;padding:clamp(24px,4vw,46px);display:grid;grid-template-columns:1fr 1fr;gap:10px 48px;box-shadow:var(--shadow);transform:rotate(-.4deg);margin:10px 0 40px}
.backcover h2{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;color:#8C4A3A}
.backcover ol{list-style:none;margin:0;padding:0}
.trk{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:9px 6px;border-bottom:1px solid rgba(34,31,26,.12)}
.trk .no{font-family:var(--mono);font-size:.72rem;color:#8C877D;grid-row:span 2}
.trk .tt{font-size:1.06rem;line-height:1.25}
.trk .ar{grid-column:2;font-style:italic;font-size:.92rem;color:#5E574C}
.trk .pl{grid-column:3;grid-row:1 / span 2;align-self:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#221F1A;text-decoration:none;border-bottom:1px solid #C0412B;padding:2px 0}
.trk .links{grid-column:3;grid-row:1 / span 2;align-self:center;display:flex;gap:12px}
.trk .pl{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#221F1A;text-decoration:none;border-bottom:1px solid #C0412B;padding:2px 0}
.alt-note{margin:14px 0 0;font-style:italic;font-size:.95rem;color:var(--on-table-soft)}
@media (max-width:1000px) and (min-width:821px){ .backcover{grid-template-columns:1fr} }
@media (max-width:820px){ .trk .links{grid-column:2;grid-row:auto;margin-top:6px} .trk.picked::after{right:4px} }
.trk .pl:hover,.trk .pl:focus-visible{color:#C0412B}
.trk.picked{background:linear-gradient(transparent 8%,rgba(232,194,74,.55) 8% 92%,transparent 92%)}
.trk.picked::after{content:"try this one";position:absolute;right:62px;top:-12px;font-family:var(--hand);font-size:1rem;color:#C0412B;transform:rotate(-4deg)}
.liner{grid-column:1 / -1;margin:18px 0 0;font-style:italic;font-size:.92rem;color:#6F665A}
.pl-more{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:0 0 60px;color:var(--on-table-soft)}
.pl-more span{font-style:italic}
@media (max-width:820px){
  .plview{grid-template-columns:1fr;gap:26px;padding-top:32px}
  .pl-cover{display:flex;justify-content:center}
  .backcover{grid-template-columns:1fr;transform:none;margin:6px -8px 34px}
  .trk.picked::after{right:4px;top:-14px}
  .crate-row .sleeve{width:150px}
}

/* ---------- Card view extras ---------- */
.stage-count{margin:26px 0 18px;text-align:right}
.card .hook,.taste-head .hook{outline:none}
.shot{margin:0 0 22px;background:var(--grain),#F7F4EE;padding:10px 10px 12px;box-shadow:0 10px 24px -14px rgba(0,0,0,.6);transform:rotate(-1deg)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{margin:10px 4px 0;color:#3A332A;font-size:1.25rem}
.palette span{flex:1}
.swcap{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;opacity:.75;margin:-8px 0 16px}
.fw-photo{width:calc(var(--fs) * 16);background:var(--grain),#F7F4EE;padding:calc(var(--fs) * .8) calc(var(--fs) * .8) calc(var(--fs) * 2.4)}
.fw-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.fw-photo .cap{position:absolute;left:calc(var(--fs) * 1.1);bottom:calc(var(--fs) * .5);font-size:calc(var(--fs) * 1.5);color:#3A332A}
.center.gift{align-items:flex-start}
.center h1{font-weight:300;font-size:clamp(2.3rem,8vw,3.8rem);line-height:1;letter-spacing:-.03em;margin:0 0 18px;outline:none}
.linkbtn{font:inherit;font-style:italic;background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-decoration-color:#C0412B;text-underline-offset:4px;cursor:pointer}
.top{padding-top:calc(4px + env(safe-area-inset-top,0px))}

@media (prefers-reduced-motion: reduce){
  .intro .w{opacity:1!important;transform:none!important;filter:none!important}
  .strike path{stroke-dashoffset:0!important}
  .fix{clip-path:none!important}
  .four.enter .pick-cell{opacity:1!important;transform:none!important}
  .skip{opacity:1!important}
}


/* --- "Did this make you feel something?" --- */
.felt{margin:30px 0 4px;padding-top:22px;border-top:1px dashed color-mix(in srgb,var(--on-table) 25%,transparent)}
.felt-q{margin:0 0 14px;font-family:var(--hand);font-size:1.45rem;line-height:1.2;color:var(--on-table);transform:rotate(-1deg);transform-origin:left}
.felt-opts{display:flex;flex-wrap:wrap;gap:10px}
.felt-o{background:transparent;border:1px solid color-mix(in srgb,var(--on-table) 35%,transparent);color:var(--on-table);font-family:var(--serif);font-size:1rem;padding:9px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.felt-o:hover{border-color:var(--on-table);transform:translateY(-2px)}
.felt-o[aria-pressed="true"]{background:var(--on-table);color:var(--table);border-color:var(--on-table)}
.felt-o[data-felt="not"]{font-style:italic;color:var(--on-table-soft)}
.felt-o[data-felt="not"][aria-pressed="true"]{color:var(--table)}
.felt-a{min-height:1.5em;margin:14px 0 0;font-style:italic;font-size:1.08rem;color:var(--on-table-soft)}
.felt-a.in{animation:feltin .6s ease both}
@keyframes feltin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .felt-a.in{animation:none} }
/* =========================================================
   WARM ANALOG PASS — velvet, tartan, tungsten, hands-on paper
   ========================================================= */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"]{
  --table:#4A1410 !important; --on-table:#F4E8D4 !important; --on-table-soft:#DDBFA0 !important;
  --shadow:0 2px 2px rgba(20,4,2,.35), 0 22px 30px -14px rgba(15,2,0,.85) !important;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --table:#4A1410 !important; --on-table:#F4E8D4 !important; --on-table-soft:#DDBFA0 !important; } }
/* red velvet under a tungsten lamp */
body{background:
  radial-gradient(ellipse 60% 48% at 28% 18%,rgba(255,176,96,.24),transparent 70%),
  radial-gradient(ellipse 90% 70% at 50% 120%,rgba(0,0,0,.55),transparent 70%),
  radial-gradient(ellipse 140% 100% at 50% 50%,transparent 55%,rgba(10,0,0,.55)),
  repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,.025) 2px 4px),
  var(--grain-heavy),var(--grain-heavy),
  #5A1813 !important;background-size:auto,auto,auto,auto,180px,260px,auto !important;background-attachment:fixed !important}
.map{opacity:.10;color:#F4E8D4}
.map .dots circle,.map .routes path{opacity:.0}
/* chapter surfaces: tartan wool for reading, warm walnut for listening */
body[data-view="card"],body[data-view="read"]{background:
  radial-gradient(ellipse 60% 50% at 30% 15%,rgba(255,190,120,.16),transparent 70%),
  radial-gradient(ellipse 140% 100% at 50% 50%,rgba(20,12,6,.28) 30%,rgba(8,4,0,.72)),
  repeating-linear-gradient(45deg,rgba(255,240,220,.05) 0 1px,transparent 1px 2px,rgba(0,0,0,.08) 2px 3px),
  repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(0deg,transparent 0 22px,rgba(150,84,46,.26) 22px 38px,transparent 38px 44px,rgba(220,196,150,.10) 44px 46px,transparent 46px 70px),
  repeating-linear-gradient(90deg,transparent 0 22px,rgba(150,84,46,.26) 22px 38px,transparent 38px 44px,rgba(220,196,150,.10) 44px 46px,transparent 46px 70px),
  var(--grain-heavy),var(--grain-heavy),
  #3A2C22 !important;background-size:auto,auto,auto,auto,auto,auto,150px,230px,auto !important;background-attachment:fixed !important}
body[data-view="listen"]{background:
  radial-gradient(ellipse 55% 45% at 72% 22%,rgba(255,160,70,.30),transparent 70%),
  radial-gradient(ellipse 140% 100% at 50% 50%,transparent 50%,rgba(8,3,0,.7)),
  repeating-linear-gradient(92deg,rgba(0,0,0,.10) 0 2px,transparent 2px 9px,rgba(255,200,140,.035) 9px 10px,transparent 10px 23px),
  var(--grain-heavy),#3A2114 !important;background-attachment:fixed !important}
body[data-view="taste"]{background:radial-gradient(ellipse 130% 100% at 50% 45%,transparent 45%,rgba(20,6,2,.55)),linear-gradient(rgba(25,8,3,.18),rgba(25,8,3,.18)),url("images/background-taste.jpg") center/cover no-repeat,#3A140A !important;background-attachment:fixed !important}
body[data-view="taste"]{--on-table:#F7EBDA !important;--on-table-soft:#E6CDAF !important;color:#F7EBDA}
body[data-view="taste"] .cview h1{font-weight:400;text-shadow:0 2px 14px rgba(0,0,0,.5)}
body[data-view="taste"] .cview .note,body[data-view="taste"] .cview .left,body[data-view="taste"] .also h2,body[data-view="taste"] .stage-count{color:#F0DCC0 !important;text-shadow:0 1px 8px rgba(0,0,0,.55)}
body[data-view="taste"] .btn{background:#F7EBDA !important;color:#3A140A !important;border-color:#F7EBDA !important}
body[data-view="taste"] .btn.ghost{background:transparent !important;color:#F7EBDA !important;border-color:#F7EBDA !important}
body[data-view="taste"] .taste-foot,body[data-view="taste"] .felt-q,body[data-view="taste"] .felt-o{color:#F7EBDA}
body[data-view="taste"] .felt-o{border-color:rgba(247,235,218,.6)}
body[data-view="taste"] .felt-o[aria-pressed="true"]{background:#F7EBDA;color:#3A140A}
body[data-view="look"]{background:radial-gradient(ellipse 130% 100% at 50% 45%,rgba(0,10,4,.08) 30%,rgba(0,10,4,.55)),linear-gradient(rgba(6,16,8,.28),rgba(6,16,8,.28)),url("images/background-look.jpg") center/cover no-repeat,#22301A !important;background-attachment:fixed !important}

/* headline & labels read warmer */
.land-head h1,.cview h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.land-head p{color:#EBD3B6 !important}
.pick .label .h{color:#E7C79F !important}
.signoff path{stroke:#F4D9B0 !important}
.signoff .words{color:#F4E8D4}
.colbar{background:color-mix(in srgb,#3A0F0B 82%,transparent) !important;border-bottom-color:rgba(244,232,212,.18) !important}
.btn{background:#F4E8D4 !important;color:#3A0F0B !important;border-color:#F4E8D4 !important}
.btn.ghost{background:transparent !important;color:#F4E8D4 !important}

/* harder, warmer shadows: objects lying on fabric under one lamp */
.sh,.card,.rc,.o-taste .under,.wp-in{box-shadow:var(--shadow) !important}

/* Words: kraft lined paper, written in marker */
.o-read .sheet{background:var(--grain),repeating-linear-gradient(0deg,transparent 0 23px,rgba(70,50,30,.30) 23px 24px),#D6BC90 !important;background-position:0 0,0 18px,0 0 !important;clip-path:polygon(0 1%,4% 0,9% 1.5%,14% 0,20% 1.2%,26% 0,33% 1.4%,40% 0,47% 1.2%,54% 0,61% 1.5%,68% 0,75% 1.2%,82% 0,89% 1.4%,95% 0,100% 1%,100% 100%,0 100%)}
.o-read .hand{font-family:"Permanent Marker",var(--hand) !important;color:#1E1712 !important;letter-spacing:.02em}
.o-read .big{text-transform:uppercase;line-height:1.15}
.o-read .small{font-family:"Covered By Your Grace",var(--hand) !important}

/* The world: a Polaroid paper-clipped into a journal page */
.o-look .journal{position:absolute;inset:-14% -18% -10% -6%;background:var(--grain),repeating-linear-gradient(0deg,transparent 0 21px,rgba(60,80,110,.22) 21px 22px),#F2ECDF;box-shadow:var(--shadow);transform:rotate(4deg);z-index:0;padding:14% 0 0 8%}
.o-look .journal i{display:block;font-style:normal;font-family:"Nothing You Could Do",var(--hand);font-size:.7rem;line-height:22px;color:#24314A;width:24%;opacity:.85;word-break:break-word}
.o-look .frame{position:relative;z-index:1;margin-left:24%;transform:rotate(-4deg)}
.o-look .clip{position:absolute;z-index:3;top:-16px;right:14%;width:18px;height:46px;border:2.5px solid #B7B9BC;border-radius:10px;box-shadow:1px 2px 2px rgba(0,0,0,.35)}
.o-look .clip::after{content:"";position:absolute;inset:6px 3px 10px 3px;border:2px solid #A7A9AC;border-radius:8px}
.o-look .tape{display:none}

/* Card view: a notebook page held by brass bulldog clips */
.card .tape{display:none}
.bclip{position:absolute;top:-18px;width:62px;height:44px;z-index:4;pointer-events:none}
.bclip.l{left:16%}.bclip.r{right:16%}
.bclip svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.45))}
.card{border-radius:2px}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(rgba(0,0,0,.10),transparent)}

body[data-view="taste"] .colbar{--on-table:#F4E8D4 !important;--on-table-soft:#DDBFA0 !important;color:#F4E8D4}

.fw-img{width:calc(var(--fs) * 17);aspect-ratio:var(--ar);overflow:hidden;background:#111}
.fw-img img{display:block;width:100%;height:100%;object-fit:cover}

/* Album covers: the team's photographs */
.sleeve.photo .cover{aspect-ratio:.82 !important;padding:0 !important;background:#111 !important;border-radius:3px;overflow:hidden}
.sleeve.photo .cover img{display:block;width:100%;height:100%;object-fit:cover}
.sleeve.photo .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 35%);pointer-events:none}
.sleeve.photo .vinyl{top:12% !important;width:88% !important}
.sleeve.photo{width:168px}
.sleeve.photo.big{width:min(300px,70vw)}
@media (max-width:820px){ .crate-row .sleeve.photo{width:146px} }

/* Listen: records on green book cloth */
body[data-view="listen"]{--on-table:#FFFDF6 !important;--on-table-soft:#E9E2CC !important;color:#FFFDF6;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 2px,rgba(255,255,220,.035) 2px 3px,transparent 3px 4px),
  var(--grain-heavy),
  radial-gradient(ellipse 85% 95% at 40% 45%,#46511F 0%,#3B4518 40%,#2C3414 70%,#1B210C 100%) !important;background-size:auto,200px,auto !important;background-attachment:fixed !important}
body[data-view="listen"]::before{content:"";position:fixed;top:0;bottom:0;right:0;width:calc(100vh * .554);z-index:0;pointer-events:none;
  background:url("images/background-listen.jpg") right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 30%,#000 62%)}
body[data-view="listen"]::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 120% 100% at 40% 45%,transparent 55%,rgba(5,8,2,.45))}
body[data-view="listen"] .map{opacity:0}
body[data-view="listen"] .colbar{--on-table:#F4E8D4 !important;--on-table-soft:#DDBFA0 !important;color:#F4E8D4}
body[data-view="listen"] .btn{background:#FFFDF6 !important;color:#1F2510 !important;border-color:#FFFDF6 !important}
body[data-view="listen"] .btn.ghost{background:transparent !important;color:#FFFDF6 !important}
body[data-view="listen"] h1,body[data-view="listen"] .note,body[data-view="listen"] .left,body[data-view="listen"] .crate-head *,body[data-view="listen"] .pl-name,body[data-view="listen"] .kicker,body[data-view="listen"] .alt-note,body[data-view="listen"] .also h2,body[data-view="listen"] .soon,body[data-view="listen"] .pl-more{color:#FFFDF6 !important;text-shadow:0 1px 10px rgba(0,0,0,.55)}
body[data-view="listen"] .pl-more .linkbtn{color:#FFFDF6}
@media (max-width:820px){ body[data-view="listen"]::before{width:34vw;background-size:auto 100%;background-position:right center;opacity:.9} }

/* Crate as a 4 x 2 grid: everything visible at once */
.shelf.crate-row{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px !important;overflow:visible !important;margin:0 !important;padding:28px 0 10px !important;-webkit-mask-image:none !important;mask-image:none !important}
.crate-row .pl-pick{min-width:0}
.crate-row .sleeve.photo{width:calc(100% - 34px) !important;margin-right:34px}
.crate-row .pl-pick:nth-child(even){margin-top:0 !important}
@media (max-width:820px){
  .shelf.crate-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px !important}
  .crate-row .sleeve.photo{width:calc(100% - 22px) !important;margin-right:22px}
}
@media (min-width:821px){ .shelf.crate-row{grid-template-columns:repeat(4,minmax(0,236px));justify-content:start;gap:30px 40px !important} }
.o-listen .jacket .jk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* The surface always fills the whole screen, however far you scroll */
html{background:#2A0E0A}
#surface{position:fixed;inset:0;z-index:0;pointer-events:none;background:inherit;background-attachment:scroll !important}
body{min-height:100vh}
body::before,body::after{z-index:1 !important}
.wrap{z-index:2 !important}

/* Home: the red globe map */
body[data-view="home"]{background:url("images/background-home.jpg") 62% 40%/cover no-repeat,#6E1410 !important;background-attachment:fixed !important}
body[data-view="home"] .map{opacity:0}
@media (max-width:820px){ body[data-view="home"]{background-position:78% 30% !important} }
body[data-view="listen"] .card{background:var(--grain-heavy),radial-gradient(120% 90% at 25% 10%,#24301A,#18210E 60%,#121A0A) !important;color:#F3EBD6;box-shadow:0 2px 2px rgba(0,0,0,.4),0 30px 50px -18px rgba(0,0,0,.85) !important}
body[data-view="listen"] .card h1,body[data-view="listen"] .card .hook{color:#FFFDF6 !important}
body[data-view="listen"] .card .why{border-top-color:rgba(243,235,214,.25)}
body[data-view="listen"] .stage-count{color:#E9E2CC !important;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.bclip{display:none !important}
.o-read .sheet.note-img{padding:0 !important;background:none !important;clip-path:none !important;aspect-ratio:840/1024;overflow:hidden}
.o-read .sheet.note-img::after{display:none}
.o-read .sheet.note-img img{display:block;width:100%;height:100%;object-fit:cover}

/* Landing: more breathing room between the four */
@media (min-width:821px){
  .four{gap:clamp(36px,4.4vw,72px) !important}
  .pick .obj-wrap > .obj{zoom:.84}
}
@media (max-width:820px){ .four{gap:30px !important} }

/* Words we love: burgundy velvet with little gold stars */
body[data-view="read"]{background:url("images/background-read.jpg") center/cover no-repeat,#3A1418 !important;background-attachment:fixed !important}
body[data-view="read"] .map{opacity:0}
.wordcard{margin:6px 0 24px;box-shadow:0 14px 28px -16px rgba(0,0,0,.6);transform:rotate(-.8deg)}
.wordcard{display:flex;justify-content:center;box-shadow:none !important}
.wordcard img{display:block;max-width:100%;max-height:min(58vh,520px);width:auto;height:auto;box-shadow:0 14px 28px -16px rgba(0,0,0,.6)}

/* Do something small: gold leaf with hummingbirds */
body[data-view="do"]{--on-table:#13301F !important;--on-table-soft:#1F4A31 !important;color:#13301F;background:radial-gradient(ellipse 130% 100% at 50% 40%,transparent 55%,rgba(70,40,0,.30)),url("images/background-do.jpg") center/cover no-repeat,#B88A2E !important;background-attachment:fixed !important}
body[data-view="do"] .map{opacity:0}
body[data-view="do"] .colbar{--on-table:#F4E8D4 !important;--on-table-soft:#DDBFA0 !important;color:#F4E8D4}
body[data-view="do"] .cview h1,body[data-view="do"] h1{text-shadow:none}
body[data-view="do"] .btn{background:#1E4A33 !important;color:#F4EBD6 !important;border-color:#1E4A33 !important}
body[data-view="do"] .btn.ghost{background:rgba(255,240,200,.35) !important;color:#13301F !important;border-color:#1E4A33 !important}
body[data-view="do"] .felt-o[aria-pressed="true"]{background:#1E4A33;color:#F4EBD6}
body[data-view="do"] .cview .note,body[data-view="do"] .cview .left,body[data-view="do"] .also h2,body[data-view="do"] .stage-count,body[data-view="do"] .felt-q,body[data-view="do"] .felt-a,body[data-view="do"] .note{color:#13301F !important;text-shadow:0 0 6px rgba(255,236,170,.85),0 0 14px rgba(255,230,150,.6)}
body[data-view="do"] .cview .note{font-size:1.4rem}
body[data-view="do"] .felt-o{color:#13301F;border-color:rgba(19,48,31,.5);background:rgba(255,240,190,.55)}
body[data-view="do"] .felt-o[aria-pressed="true"]{background:#1E4A33;color:#F4EBD6}
@media (min-width:821px){ body[data-view="do"]{background-size:auto,max(115vw,172vh) auto,auto !important;background-position:center,right 30%,center !important} }

.o-do .book-img{display:block;filter:drop-shadow(0 18px 22px rgba(40,20,0,.45))}
.o-do .book-img img{display:block;width:100%;height:auto}
.hero .o-do{width:300px !important;transform:rotate(-1.5deg)}
@media (max-width:820px){ .hero .o-do{width:min(240px,64vw) !important} }
body[data-view="do"] .cview h1{color:#13301F}

/* Do: bronze-gold type, bolder; matchbook and copy centred together */
body[data-view="do"]{--do-ink:#5A3A06;--do-ink2:#7A520E}
body[data-view="do"] .cview h1{color:var(--do-ink) !important;font-weight:500 !important;letter-spacing:-.02em;text-shadow:0 1px 0 rgba(255,236,170,.55),0 0 18px rgba(255,226,140,.45) !important}
body[data-view="do"] .cview .note,body[data-view="do"] .cview .left,body[data-view="do"] .stage-count,body[data-view="do"] .felt-q,body[data-view="do"] .felt-a{color:var(--do-ink) !important;font-weight:600;text-shadow:0 0 1px rgba(90,58,6,.6),0 0 10px rgba(255,232,160,.75) !important}
body[data-view="do"] .cview .note{-webkit-text-stroke:.35px var(--do-ink)}
body[data-view="do"] .btn{background:var(--do-ink) !important;color:#F7E7B4 !important;border-color:var(--do-ink) !important;font-weight:500}
body[data-view="do"] .btn.ghost{background:rgba(255,240,200,.35) !important;color:var(--do-ink) !important;border-color:var(--do-ink) !important}
body[data-view="do"] .felt-o{color:var(--do-ink);border-color:rgba(90,58,6,.55);font-weight:500}
body[data-view="do"] .felt-o[aria-pressed="true"]{background:var(--do-ink);color:#F7E7B4}
@media (min-width:821px){
  body[data-view="do"] .cview{grid-template-columns:auto auto !important;justify-content:center !important;align-items:center !important;gap:0 96px !important;min-height:calc(100vh - 140px);padding:24px 0 !important}
  body[data-view="do"] .cview .col-text{max-width:460px}
  body[data-view="do"] .hero .o-do{width:340px !important}
  body[data-view="do"] .hero{padding:0 !important}
}
@media (max-width:820px){
  body[data-view="do"] .cview{justify-items:center;text-align:center}
  body[data-view="do"] .cview .note{transform:none}
}

/* Do cards: bronze-gold to match the page */
body[data-view="do"] .card{background:var(--grain-heavy),radial-gradient(120% 90% at 25% 10%,#7E5610,#5A3A06 60%,#432B04) !important;color:#F7E7B4 !important;box-shadow:0 2px 2px rgba(40,20,0,.35),0 30px 50px -18px rgba(40,20,0,.75) !important}
body[data-view="do"] .card .hook{color:#FFF1C6 !important;font-weight:500 !important}
body[data-view="do"] .card .stackname,body[data-view="do"] .card .body,body[data-view="do"] .card .why p,body[data-view="do"] .card .sig .where{color:#F2DFA6 !important}
body[data-view="do"] .card .body{font-weight:500}
body[data-view="do"] .card .why{border-top-color:rgba(247,231,180,.3) !important}
body[data-view="do"] .card .sig .who{color:#FFF1C6 !important}

/* --- Strike the match --- */
.hero .o-do{position:relative;overflow:visible}
.match{position:absolute;left:52%;top:calc(100% + 8px);width:150px;height:16px;z-index:6;touch-action:none;cursor:grab;transform:translate(var(--mx,0px),var(--my,0px)) rotate(-7deg);transform-origin:0 50%}
.match.held{cursor:grabbing}
.match.moving{transition:transform .45s cubic-bezier(.4,.1,.25,1)}
.match.swipe{transition:transform .26s cubic-bezier(.5,0,.75,.5)}
.match .stick{position:absolute;left:12px;right:0;top:5px;height:6px;border-radius:1px 3px 3px 1px;background:linear-gradient(#F2DCA8,#D6B57A 55%,#B8955A);box-shadow:0 3px 4px rgba(40,20,0,.4)}
.match .head{position:absolute;left:0;top:1px;width:19px;height:14px;border-radius:55% 45% 45% 55%/55% 50% 50% 45%;background:radial-gradient(circle at 38% 32%,#F07A5E,#B7301F 45%,#7C170D 80%);box-shadow:0 2px 3px rgba(40,10,0,.45)}
.match .flame{position:absolute;left:-4px;bottom:9px;width:26px;height:46px;opacity:0;transform:rotate(7deg) scale(.2);transform-origin:50% 100%;pointer-events:none}
.match .flame::before,.match .flame i{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%}
.match .flame::before{background:radial-gradient(ellipse at 50% 78%,#fffbe6 0 14%,#ffe08a 26%,#ffad3b 46%,#ff6a1f 62%,rgba(255,80,20,0) 74%);filter:blur(.7px)}
.match .flame i{inset:42% 30% 6% 30%;background:radial-gradient(ellipse at 50% 70%,rgba(120,170,255,.75),rgba(120,170,255,0) 70%)}
.match.lit .flame{opacity:1;transform:rotate(7deg) scale(1);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .1s;animation:flicker .11s infinite alternate}
.match.lit .head{background:radial-gradient(circle at 40% 35%,#4a2a1a,#1a0e08 70%)}
@keyframes flicker{0%{transform:rotate(7deg) scale(1,1) skewX(0)}50%{transform:rotate(5deg) scale(.96,1.05) skewX(2deg)}100%{transform:rotate(9deg) scale(1.03,.97) skewX(-2deg)}}
.spark{position:fixed;z-index:60;width:4px;height:4px;border-radius:50%;background:#ffe39a;box-shadow:0 0 6px 2px rgba(255,170,60,.8);pointer-events:none}
.strike-glow{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,214,140,.55),rgba(255,160,60,.22) 12%,rgba(255,120,40,.08) 28%,transparent 45%);mix-blend-mode:screen}
.strike-glow.on{opacity:1;animation:glowflick .18s infinite alternate}
@keyframes glowflick{from{filter:brightness(1)}to{filter:brightness(1.18)}}
.strike-hint{position:absolute;left:0;right:0;top:calc(100% + 46px);text-align:center;font-size:1.15rem;color:var(--do-ink,#5A3A06);text-shadow:0 0 8px rgba(255,232,160,.8);pointer-events:none}
.o-do.struck .strike-hint{font-size:1.3rem}
#app.strike-out .cview{transition:opacity .4s ease;opacity:0}
.hero .o-do .book-img{transition:filter .4s}
.hero .o-do.struck .book-img{filter:drop-shadow(0 18px 22px rgba(40,20,0,.45)) brightness(1.08)}
body[data-view="do"] .hero{padding-bottom:90px !important}
@media (prefers-reduced-motion: reduce){ .match.lit .flame{animation:none} .strike-glow.on{animation:none} }
.match::before{content:"";position:absolute;inset:-18px -10px -18px -14px}

/* love, Valor: small heart, words beside it, links to Valor */
.sig2{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;align-self:flex-start;margin:8px 4px 0 0;color:var(--on-table);text-decoration:none;transform:rotate(-4deg);transition:transform .3s ease}
.sig2 svg{width:56px;height:auto;overflow:visible}
.sig2 path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:620;stroke-dashoffset:620;animation:sketch 1.4s .4s cubic-bezier(.45,.1,.3,1) forwards}
.sig2 path.p2{stroke-width:3.5;opacity:.7;animation-delay:1.2s;animation-duration:1s}
.sig2 .w{display:flex;flex-direction:column;font-family:var(--hand);line-height:1;opacity:0;animation:inkin .8s 1.1s ease forwards}
.sig2 .w span:first-child{font-size:1.15rem}
.sig2 .w span:last-child{font-size:2rem}
.sig2:hover,.sig2:focus-visible{transform:rotate(-4deg) translateY(-2px)}
.sig2:hover .w span:last-child,.sig2:focus-visible .w span:last-child{text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:4px;text-decoration-thickness:1.5px}
@media (max-width:820px){ .sig2 svg{width:34px} .sig2 .w span:last-child{font-size:1.3rem} .sig2 .w span:first-child{font-size:.85rem} }
@media (prefers-reduced-motion: reduce){ .sig2 path{stroke-dashoffset:0;animation:none} .sig2 .w{opacity:1;animation:none} }
.mini .m-do-img{width:20px;height:auto;flex:0 0 auto;transform:rotate(6deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.mini:hover .m-do-img{transform:rotate(0deg) translateY(-2px)}
.mini .m-do-img{transition:transform .25s ease}


/* Who left this — pinned top right */
.whotag{position:absolute;z-index:25;top:calc(var(--wt-top,14px) + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--on-table) 28%,transparent);background:color-mix(in srgb,var(--table) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--on-table);font-family:var(--serif);font-size:.98rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .2s ease,background .2s ease}
.whotag:hover,.whotag:focus-visible{transform:translateY(-1px);background:color-mix(in srgb,var(--table) 88%,transparent)}
.whotag .m-tag{box-shadow:0 2px 4px rgba(0,0,0,.35)}
.whotag[aria-current]{opacity:.55;pointer-events:none}
body[data-view="do"] .whotag{color:#F6E3A6;border-color:rgba(246,227,166,.4);background:rgba(58,38,6,.62)}
@media (max-width:600px){.colbar{margin-bottom:46px !important}.whotag{font-size:.88rem;padding:7px 12px 7px 10px;gap:7px}.whotag .m-tag{width:19px;height:12px}}
.from-pl{margin:12px 0 22px;font-style:italic;font-size:.95rem;opacity:.85}
.from-pl a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.o-listen{position:relative}
.o-listen .sticker{top:-18px !important;right:-18px !important;z-index:3}
@media (max-width:600px){.o-listen .sticker{width:66px !important;font-size:.78rem !important;padding:8px !important;top:-14px !important;right:-14px !important}}
/* The world: bolder type on water */
body[data-view="look"]{--on-table:#FFF8EA !important;--on-table-soft:#F1E3C2 !important}
body[data-view="look"] .cview h1{font-weight:500 !important;letter-spacing:-.02em;color:#FFF8EA !important;text-shadow:0 2px 14px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.35) !important}
body[data-view="look"] .cview .note{color:#F6E7C4 !important;font-weight:600;-webkit-text-stroke:.4px #F6E7C4;text-shadow:0 1px 8px rgba(0,0,0,.6)}
body[data-view="look"] .cview .left,body[data-view="look"] .also h2,body[data-view="look"] .stage-count,body[data-view="look"] .felt-q{color:#F6E7C4 !important;font-weight:500 !important;text-shadow:0 1px 8px rgba(0,0,0,.6)}
body[data-view="look"] .btn{font-weight:500}
@media (min-width:821px){body[data-view="look"] .cview h1{font-size:clamp(2.4rem,3.7vw,3.4rem) !important}}
.o-look.o-look-photo{width:270px}
.o-look-photo .look-img{display:block;aspect-ratio:860/1053;overflow:hidden;background:#E8DFCF}
.o-look-photo .look-img img{display:block;width:100%;height:100%;object-fit:cover}
.pick .o-look.o-look-photo{width:min(215px,100%)}
.hero .o-look.o-look-photo{width:340px}
@media (max-width:600px){.hero .o-look.o-look-photo{width:min(300px,78vw)}}
/* Recipe cards: classic index card (thin red frame, tape, card behind) */
.rc{border:0 !important;background:var(--grain),linear-gradient(170deg,#F6F1E6,#EFE8DA) !important;padding:2.3em 2.6em 2.4em !important;color:#17171C}
.rc::before{content:"";position:absolute;inset:1.05em;border:1.5px solid rgba(181,69,47,.85);pointer-events:none}
.rc-tape{position:absolute;z-index:3;top:-1.3em;left:50%;width:9.5em;height:3.6em;transform:translateX(-30%) rotate(-3deg);background:linear-gradient(180deg,rgba(236,228,206,.82),rgba(222,212,186,.78));box-shadow:0 1px 3px rgba(0,0,0,.18);clip-path:polygon(2% 6%,98% 0,100% 94%,1% 100%);pointer-events:none}
.rc .row{border-bottom:1.5px solid rgba(181,69,47,.55) !important;margin-bottom:1.05em !important;padding-bottom:.35em !important}
.rc .lbl{font-family:var(--serif);font-weight:500;font-size:.78em !important;letter-spacing:.16em;color:#B5452F !important}
.rc .word{font-family:"Instrument Serif",var(--serif);font-size:4.9em !important;color:#B5452F !important;transform:scaleY(1.22) scaleX(.94) !important;transform-origin:left bottom;letter-spacing:-.02em;margin-right:.35em !important}
.rc .ink{color:#17171C !important}
.rc .title{font-size:2.6em !important}
.rc .meta{display:grid !important;grid-template-columns:1.25fr 1fr;column-gap:0}
.rc .meta .row:nth-child(2){border-left:1.5px solid rgba(181,69,47,.55);padding-left:1.4em}
.rc .meta .row:nth-child(3){grid-column:1 / -1}
.rc .cols{grid-template-columns:44% 1fr !important;gap:0 !important;margin-top:.2em}
.rc .cols .col + .col{border-left:1.5px solid rgba(181,69,47,.55);padding-left:1.8em}
.rc .cols .col:first-child{padding-right:1.4em}
.rc .ruled{background:none !important}
.rc .ruled .ink{line-height:1.55em}
.rc-light{display:none !important}
.o-taste .under{border:0 !important;background:var(--grain),#EFE8DA !important}
.o-taste .under::before{content:"";position:absolute;inset:9px;border:1.5px solid rgba(181,69,47,.8)}
.o-taste .under.u2{display:none !important}
.o-taste .under.u1{transform:rotate(4deg) translate(14px,8px) !important}
.recipe-stage{position:relative}
.recipe-stage::before{content:"";position:absolute;inset:0;background:var(--grain),#EFE8DA;transform:rotate(3deg) translate(10px,6px);box-shadow:var(--shadow)}
.recipe-stage::after{content:"";position:absolute;inset:0;transform:rotate(3deg) translate(10px,6px);margin:clamp(9px,2.55vw,15px);border:1.5px solid rgba(181,69,47,.75);pointer-events:none;z-index:0}
.recipe-stage .rc{z-index:1}
.rc > .row:nth-child(2){margin-top:.7em}
.rc .meta{align-items:end;row-gap:0 !important}
@media (max-width:600px){.recipe-stage .rc .ing span{white-space:normal !important}.recipe-stage .rc .cols{grid-template-columns:48% 1fr !important}.recipe-stage .rc .meta{grid-template-columns:1fr}.recipe-stage .rc .meta .row:nth-child(2){border-left:0;padding-left:0}}
/* Recipe card v2: single card, open layout, window light */
.rc{padding:2.6em 2.9em 2.7em !important;background:var(--grain),linear-gradient(165deg,#F5EFE3 0%,#EFE7D7 100%) !important}
.rc::before{inset:1.25em !important;border:1.2px solid rgba(181,69,47,.8) !important}
.rc::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:multiply;opacity:.55;
  background:radial-gradient(ellipse 38% 60% at 88% 12%,rgba(70,45,25,.28),transparent 70%),linear-gradient(118deg,transparent 52%,rgba(80,52,28,.16) 60%,transparent 68%,rgba(80,52,28,.12) 76%,transparent 84%),radial-gradient(ellipse 60% 45% at 20% 100%,rgba(70,45,25,.12),transparent 70%)}
.rc .row{border-bottom:0 !important;margin-bottom:.9em !important}
.rc > .row:nth-child(2){border-bottom:1.2px solid rgba(181,69,47,.45) !important;padding-bottom:.7em !important;margin-bottom:1.5em !important}
.rc .meta{border-bottom:1.2px solid rgba(181,69,47,.45);padding-bottom:.4em;margin-bottom:1.3em}
.rc .meta .row:nth-child(2){border-left:0 !important;padding-left:1.4em}
.rc .lbl{font-weight:600 !important;font-size:.86em !important;letter-spacing:.13em !important;color:#B14A33 !important}
.rc .meta .lbl{font-size:.82em !important}
.rc .row{gap:1.4em !important}
.rc .cols .col + .col{border-left:1px solid rgba(181,69,47,.38) !important}
.rc .col{position:relative}
.rc .ruled .ink{line-height:1.75em !important}
.rc .col .lbl{margin-bottom:.8em !important}
.rc .rc-note{position:absolute;right:.4em;bottom:.2em;font-size:1.4em;line-height:1.15;transform:rotate(-9deg);text-align:left;max-width:7em;padding-bottom:.35em}
.rc .rc-note::after{content:"";position:absolute;left:1.2em;right:0;bottom:0;height:.5em;border-bottom:1.5px solid #17171C;border-radius:0 0 40% 60%;transform:rotate(-2deg)}
.rc .cols{min-height:12em}
.o-taste .under{display:none !important}
.recipe-stage::before,.recipe-stage::after{display:none !important}
.recipe-stage .rc{transform:rotate(-1.2deg)}
.rc-tape{left:42% !important;transform:translateX(-50%) rotate(-2deg) !important;top:-1.5em !important;height:4.2em !important}
.recipe-stage .rc .rc-note{position:relative;display:block;right:auto;bottom:auto;width:fit-content;margin:1.1em 0 0 auto}
.recipe-stage .rc .ing span{white-space:normal !important}
/* Shuffle: luggage tag + sky */
.o-shuffle.o-tag{width:520px}
.o-tag img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(20,30,50,.28)) drop-shadow(0 2px 3px rgba(20,30,50,.25))}
.hero .o-shuffle.o-tag{width:560px}
@media (max-width:820px){.hero .o-shuffle.o-tag{width:min(440px,92vw)}}
body[data-view="shuffle"]{background:linear-gradient(rgba(255,250,240,.06),rgba(255,250,240,.06)),url("images/background-shuffle.jpg") 30% center/cover no-repeat,#9FB7C8 !important;background-attachment:fixed !important}
body[data-view="shuffle"]{--on-table:#1D2A3B !important;--on-table-soft:#34465C !important;color:#1D2A3B}
body[data-view="shuffle"] .cview h1{font-weight:400;text-shadow:0 1px 12px rgba(255,255,255,.35)}
body[data-view="shuffle"] .cview .note,body[data-view="shuffle"] .cview .left,body[data-view="shuffle"] .also h2{color:#22324A !important;text-shadow:0 1px 8px rgba(255,255,255,.35)}
body[data-view="shuffle"] .btn{background:#1D2A3B !important;color:#F4EEE2 !important;border-color:#1D2A3B !important}
body[data-view="shuffle"] .map{opacity:0}
body[data-view="shuffle"] .colbar{--on-table:#F4E8D4 !important;--on-table-soft:#DDBFA0 !important;color:#F4E8D4}
body[data-view="shuffle"] .sitefoot{color:#1D2A3B}
/* mini recipe (home + landing hero): tidy fit */
.pick .rc .rc-note{display:none}
.hero .o-taste .rc .rc-note{position:relative;display:block;right:auto;bottom:auto;width:fit-content;margin:.4em 0 0 auto}
.o-taste .rc .ing span{white-space:normal !important}
.o-taste .rc .cols{min-height:0 !important}
.o-taste .rc{padding:2.2em 2.4em 2.2em !important}
.o-taste .rc .meta .row:nth-child(2){padding-left:.8em}
.o-taste .rc .row{gap:.9em !important}
@media (max-width:820px){ .pick .obj-wrap{height:300px !important} .pick .o-taste{width:min(250px,64vw) !important} .pick .o-taste .rc{--rc:6.6px !important} }
.pair-lbl{font-style:italic;font-size:.92rem;opacity:.8;margin:18px 0 6px}
/* Footer on every page */
.sitefoot{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:22px 22px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid color-mix(in srgb,var(--on-table) 16%,transparent);color:var(--on-table)}
.sitefoot .ft{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:6px 2px;color:inherit;font-family:var(--serif);font-size:1rem;cursor:pointer;border-bottom:1px solid transparent}
.sitefoot .ft:hover,.sitefoot .ft:focus-visible{border-bottom-color:currentColor}
.sitefoot .ft span[aria-hidden]{box-shadow:0 2px 4px rgba(0,0,0,.35)}
.sitefoot .ft-n{box-shadow:none !important;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;min-width:1.6em;padding:1px 6px;border:1px solid currentColor;border-radius:999px;opacity:.75}
.sitefoot .ft-n:empty{display:none}
.sitefoot .ft-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4}
.more:empty,.more:has(> .more-lead:only-child){display:none}
body[data-view="do"] .sitefoot{color:var(--do-ink)}
@media (max-width:820px){ body[data-view="do"]{background:radial-gradient(ellipse 130% 100% at 50% 40%,transparent 60%,rgba(70,40,0,.25)),url("images/background-do-mobile.jpg") center top/cover no-repeat,#B88A2E !important;background-attachment:fixed !important} }