/* DIG! photo look: the shop as a photograph. Built by design/photo-revamp/build/gen_site.py; edit the layer there, not this file. */
:root{
  --ph-crate:url(img/crate-s.jpg); --ph-wear:url(img/wear-s.jpg); --ph-tag:url(img/tag.jpg); --ph-kraft:url(img/kraft.jpg);
  --ph-tape:url(img/tape.jpg); --ph-paper:url(img/paper-s.webp); --ph-orange:url(img/sign-orange-s.webp); --ph-green:url(img/sign-green-s.webp);
  --ph-ink:#211A14; --ph-cream:#F1E6CC; --ph-twine:#B49A6E;
}
/* the photograph replaces the drawn room, its window, lamps, neon and tint */
html.ph #crateStage > svg.scene:not(.scene-fx), html.ph #crateStage > .window-wall, html.ph #crateStage > .shop-window,
html.ph #crateStage > .lamps, html.ph #crateStage > .wx-tag, html.ph #crateTint, html.ph .scene-fx .neon,
html.ph .floor-cat, html.ph .record-cat{display:none !important}
html.ph #crateStage{background:#1b140f}
.ph-room{position:absolute;left:0;top:0;width:1440px;height:900px;display:block;pointer-events:none;z-index:0;user-select:none}
html:not(.ph) .ph-room, html:not(.ph) .ph-vignette, html:not(.ph) .ph-film{display:none}
.ph-vignette{position:absolute;inset:0;pointer-events:none;z-index:60;
  background:radial-gradient(ellipse 72% 68% at 50% 46%, rgba(30,14,4,0) 50%, rgba(30,14,4,.5) 100%),
    radial-gradient(ellipse 40% 45% at 0% 0%, rgba(255,150,70,.12), rgba(255,150,70,0) 70%),
    radial-gradient(ellipse 30% 40% at 100% 100%, rgba(255,120,60,.12), rgba(255,120,60,0) 70%),
    linear-gradient(180deg, rgba(255,200,140,.06), rgba(60,25,5,.10))}
/* 80s home-video feel: warm haze, a slow breathing of the light (the moving film grain was removed Oct 8) */
.ph-film{position:absolute;inset:0;pointer-events:none;z-index:61;overflow:hidden}
.ph-film .haze{position:absolute;inset:0;background:rgba(255,214,160,.045);animation:phBreath 7s ease-in-out infinite alternate}
.ph-film .lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, rgba(0,0,0,0) 1px 3px)}
@keyframes phBreath{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.ph-film .haze{animation:none}}
/* covers get the same faded, warm print as the room */
html.ph .face img, html.ph .ph-nb .cv{filter:sepia(.14) saturate(.88) contrast(.94) brightness(1.01)}
html.ph #crateView .grain{opacity:.22}
html.ph #crateView{background:#1b140f}

/* the shop sign: lettering painted on the photo's empty board (the real sign comes later) */
html.ph .sign{left:38px;top:62px;width:210px;height:112px;background:none !important;border:0 !important;box-shadow:none !important}
html.ph .sign h1{color:#5E2A12;text-shadow:0 1px 0 rgba(255,235,200,.3);opacity:1;font-size:52px}
html.ph .sign p{color:#3E2410;opacity:1;font-size:10.5px}

/* the week's drop: a kraft-paper notice taped inside the window */
html.ph .drop-sign{left:58px;top:238px;width:166px;padding:16px 12px 12px;background:var(--ph-kraft) center/cover !important;border:0 !important;border-radius:0;
  box-shadow:0 6px 12px rgba(0,0,0,.45) !important;transform:rotate(-2deg);color:var(--ph-ink)}
html.ph .drop-sign::before{content:"";position:absolute;left:50%;top:-10px;width:92px;height:22px;margin-left:-46px;background:var(--ph-tape) center/cover;opacity:.9;transform:rotate(3deg)}
html.ph .drop-sign *{opacity:1 !important;text-shadow:none !important}
html.ph .drop-sign b{color:var(--ph-ink) !important;font-size:23px}
html.ph .drop-sign span, html.ph .drop-sign u{color:var(--ph-ink) !important;font-weight:700}
html.ph .drop-sign .countdown{color:#7A2E18 !important}
html.ph .drop-sign .chalk-ring{display:none}

/* the store directory: a tag pinned to the cork board; the hint: a scrap of paper below it */
html.ph .dir-card{left:290px;top:300px;width:106px;padding:14px 8px 10px;background:var(--ph-tag) center/100% 100% !important;border:0 !important;
  box-shadow:0 5px 10px rgba(0,0,0,.5) !important;transform:rotate(-3deg)}
html.ph .dir-card b{color:#8A3A1E}
html.ph .dir-card span{color:var(--ph-ink)}
html.ph .hint-card{left:1096px;top:414px;width:158px;z-index:7;padding:16px 14px 12px 26px;font-size:12.5px;line-height:1.3;background:var(--ph-paper) center/100% 100% !important;border:0 !important;
  box-shadow:none !important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));color:var(--ph-ink);transform:rotate(2deg)}
html.ph .hint-card::before{content:"";position:absolute;left:30px;top:-8px;width:70px;height:18px;background:var(--ph-tape) center/cover;opacity:.85;transform:rotate(-4deg)}
/* Dig blind: a yellow note pinned to the door's board */
html.ph .blind-sticky{left:80px;top:424px;width:146px;padding:10px 10px 12px;font-size:15px;transform:rotate(-2deg);background:var(--ph-paper) center/100% 100%, #E7C35F !important;background-blend-mode:multiply;border:0 !important;
  box-shadow:none !important;filter:drop-shadow(0 5px 7px rgba(0,0,0,.5));color:var(--ph-ink)}

/* the counter signs: painted boards on twine */
html.ph .counter-sign{border:0 !important;box-shadow:none !important;background-color:transparent !important;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));
  display:flex;align-items:center;justify-content:center;text-align:center}
html.ph .counter-sign.pick-sign{left:1196px;top:36px;width:104px;height:148px;background:var(--ph-orange) center/100% 100% !important}
html.ph .counter-sign.ask-sign{left:1308px;top:62px;width:126px;height:103px;background:var(--ph-green) center/100% 100% !important}
html.ph .counter-sign b{color:#F3E7CC;font-size:22px;text-shadow:0 1px 1px rgba(0,0,0,.35);margin-top:10px}
html.ph .counter-sign::before, html.ph .counter-sign::after{background:var(--ph-twine);width:2px;top:-200px;height:204px;left:50%;right:auto;transform:none}
html.ph .counter-sign::after{display:none}

/* sleeves: real covers on worn card, lit and shadowed like objects */
html.ph .sleeve button{border:0 !important;border-radius:2px;background:#d9cfbb !important;box-shadow:0 -3px 8px rgba(0,0,0,.55) !important;overflow:hidden}
html.ph .sleeve.front button{box-shadow:0 14px 24px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.4) !important}
html.ph .sleeve.front button:hover, html.ph .sleeve.front button:focus-visible{box-shadow:0 22px 30px rgba(0,0,0,.6),0 0 0 2px #E7C35F !important}
html.ph .face::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ph-wear) center/100% 100%;mix-blend-mode:multiply;opacity:.6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 18px rgba(0,0,0,.25)}
html.ph .face::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(115deg, rgba(255,230,190,.10), rgba(255,230,190,0) 40%, rgba(0,0,0,.12))}

/* the centre crate: the photographed crate front */
html.ph .crate-front{background:var(--ph-crate) center/100% 100% no-repeat;filter:drop-shadow(0 14px 14px rgba(0,0,0,.6))}
html.ph .crate-front > *{visibility:hidden}
html.ph .crate-label{background:var(--ph-paper) center/100% 100% !important;border:0 !important;box-shadow:none !important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));color:var(--ph-ink)}
html.ph .crate-label::before{content:"";position:absolute;left:50%;top:-9px;width:96px;height:20px;margin-left:-48px;background:var(--ph-tape) center/cover;opacity:.9;transform:rotate(-2deg)}
html.ph .crate-label > *{position:relative}
html.ph .crate-label b, html.ph .crate-label span{color:var(--ph-ink) !important}
html.ph .guest-sticker{filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}

/* side crates: real covers in a photographed crate, standing on the floor */
html.ph #aisle{transform:translateY(100px)}
html.ph .nb > svg{visibility:hidden}
.ph-nb{position:absolute;left:0;top:0;width:480px;height:330px;pointer-events:none}
.ph-nb .cv{position:absolute;width:250px;height:250px;background:#2a2118 center/cover;box-shadow:0 -3px 8px rgba(0,0,0,.55)}
.ph-nb .cv::after{content:"";position:absolute;inset:0;background:var(--ph-wear) center/100% 100%;mix-blend-mode:multiply;opacity:.6}
.ph-nb .cr{position:absolute;left:14px;top:132px;width:452px;height:198px;background:var(--ph-crate) center/100% 100%;filter:drop-shadow(0 14px 12px rgba(0,0,0,.6))}
.ph-nb .kraft{background:var(--ph-kraft) center/cover}
html.ph .nb .tab{background:var(--ph-tag) center/100% 100% !important;border:0 !important;box-shadow:0 4px 8px rgba(0,0,0,.45) !important;color:var(--ph-ink) !important}

/* the flip controls: paper discs and a kraft strip */
html.ph #crateView .round{background:var(--ph-tag) center/cover !important;border:0 !important;box-shadow:0 5px 10px rgba(0,0,0,.55) !important;color:var(--ph-ink)}
html.ph #crateView .ticks{background:var(--ph-kraft) center/cover !important;border:0 !important;box-shadow:0 5px 10px rgba(0,0,0,.5) !important;color:var(--ph-ink)}
html.ph #crateView .ticks .count{color:var(--ph-ink);opacity:1}
html.ph #crateView .ticks .bar{background:rgba(255,245,225,.45);border:1px solid rgba(33,26,20,.6)}
:root{--ph-sheet:url(img/sheet.jpg); --ph-sticker:url(img/sticker.webp); --ph-plate:url(img/plate-btn.webp); --ph-sign:url(img/dig-sign.webp); --ph-woofer:url(img/woofer.webp); --ph-disc:url(img/disc.webp); --ph-mid:url(img/mid.webp); --ph-mwin:url(img/mask-win.webp); --ph-mdoor:url(img/mask-door.webp); --ph-mdoorev:url(img/mask-door-ev.webp); --ph-tdrops:url(img/tex-drops.webp); --ph-train:url(img/tex-rain.webp); --ph-tsnowf:url(img/tex-snow-far.webp); --ph-tsnown:url(img/tex-snow-near.webp)}

/* time of day: the same room photographed in the evening and at night */
.ph-room{transition:opacity 1.2s ease}
.ph-room.alt{opacity:0}
html.ph.tod-evening .ph-room.alt[data-tod="evening"], html.ph.tod-night .ph-room.alt[data-tod="night"]{opacity:1}

/* the shop sign: the painted DIG! board hung over the door, tagline lettered underneath */
html.ph .sign{left:30px;top:52px;width:226px;height:126px;justify-content:flex-end;padding-bottom:4px;
  background:var(--ph-sign) top center/226px 85px no-repeat !important;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
html.ph .sign h1{color:transparent;text-shadow:none;font-size:1px;position:absolute;left:0;top:0;width:226px;height:85px;margin:0}
html.ph .sign p{color:#3E2410;font-size:11.5px;letter-spacing:.02em}

/* round controls and the guest sticker: worn cream stickers */
html.ph .round{background:var(--ph-sticker) center/cover !important;border:0 !important;box-shadow:0 5px 10px rgba(0,0,0,.5) !important;color:var(--ph-ink)}
html.ph .round:hover{filter:brightness(1.06)}
html.ph .guest-sticker{background:var(--ph-sticker) center/cover !important;border:0 !important;box-shadow:none !important}
html.ph .guest-sticker::before{inset:9px;border:1.5px dashed rgba(138,46,24,.55)}
html.ph .guest-sticker::after{display:none}
html.ph .guest-sticker span{color:#8A2E18}

/* paper: every card and panel is a sheet of old cream paper */
html.ph .paper{background:var(--ph-sheet) center/cover !important;border:0 !important;box-shadow:0 14px 30px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important;color:var(--ph-ink)}
html.ph .pill{background:var(--ph-sheet) center/cover !important;border:0 !important;box-shadow:0 4px 10px rgba(0,0,0,.45) !important;color:var(--ph-ink)}
html.ph .pill:hover{filter:brightness(1.07)}
html.ph .pill-main{background:var(--ph-plate) center/100% 100% !important;color:#F6E9CF !important;text-shadow:0 1px 1px rgba(0,0,0,.4)}
html.ph .needle-btn{background:var(--ph-plate) center/100% 100% #7A2E1C !important;border:0 !important;border-radius:6px;box-shadow:0 8px 16px rgba(0,0,0,.5) !important;color:#F6E9CF;text-shadow:0 1px 1px rgba(0,0,0,.45)}
html.ph .needle-btn:hover{filter:brightness(1.08)}
html.ph .chip{background:var(--ph-tag) center/100% 100% !important;border:0 !important;box-shadow:0 3px 6px rgba(0,0,0,.35);color:var(--ph-ink)}
html.ph .dir-overlay{background:rgba(20,12,6,.6)}

html.ph .paper h2, html.ph .paper h3{color:#8A2E18;text-shadow:none}
html.ph .listen-opt{background:rgba(255,248,230,.45);border:1px solid rgba(33,26,20,.3);box-shadow:0 3px 8px rgba(0,0,0,.18)}
html.ph .listen-opt:hover{background:rgba(255,248,230,.75)}
html.ph .listen-opt b{color:#8A2E18}
html.ph .sign p{color:#EAD7B0;text-shadow:0 1px 2px rgba(0,0,0,.6)}
html.ph .big-sleeve{border:0;border-radius:2px;box-shadow:0 18px 30px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4)}
html.ph .big-sleeve::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ph-wear) center/100% 100%;mix-blend-mode:multiply;opacity:.5}

/* album view: standing at the counter */
html.ph #albumView{background:#1b140f}
html.ph #albumView .album-bg, html.ph #albumView .counter-band{display:none}
html.ph #albumView .album-shade{background:linear-gradient(180deg, rgba(20,10,4,.15), rgba(20,10,4,.35))}
.ph-counter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;pointer-events:none;transition:filter 1.2s ease}
html:not(.ph) .ph-counter{display:none}
html.ph.tod-evening .ph-counter{filter:brightness(.82) saturate(.9) hue-rotate(-6deg)}
html.ph.tod-night .ph-counter{filter:brightness(.6) saturate(.8)}
html.ph .album-card h2{color:#8A2E18;text-shadow:none}
html.ph .album-card .artist, html.ph .album-card .meta{color:var(--ph-ink)}
/* the record sliding out of the sleeve is the photographed record */
html.ph .vinyl{background:var(--ph-disc) center/100% 100% no-repeat;border-radius:50%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
html.ph .vinyl svg > circle:not(#vinylLabel), html.ph .vinyl svg > g, html.ph .vinyl svg > path{display:none}

html.ph .vinyl svg > text{opacity:.85}


/* the turntable: a photographed deck on the counter */
html.ph #needleStage > svg.scene, html.ph #needleStage > .lamps, html.ph #needleTint{display:none !important}
html.ph #needleView{background:#1b140f}
.ph-nroom{position:absolute;left:0;top:0;width:1440px;height:900px;pointer-events:none;z-index:0;transition:filter 1.2s ease}
html:not(.ph) .ph-nroom, html:not(.ph) .ph-speaker{display:none}
html.ph.tod-evening .ph-nroom, html.ph.tod-evening .ph-speaker, html.ph.tod-evening .ph-mid, html.ph.tod-evening .woofer-layer{filter:brightness(.84) saturate(.9)}
html.ph.tod-night .ph-nroom, html.ph.tod-night .ph-speaker, html.ph.tod-night .ph-mid, html.ph.tod-night .woofer-layer{filter:brightness(.66) saturate(.85)}
.ph-speaker{position:absolute;left:1100px;top:196px;width:190px;height:auto;z-index:1;pointer-events:none}
.ph-spk-shadow{position:absolute;left:1078px;top:574px;width:236px;height:44px;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 40%, rgba(12,6,2,.75), rgba(12,6,2,.35) 55%, rgba(12,6,2,0) 100%)}
html:not(.ph) .ph-spk-shadow, html:not(.ph) .ph-mid{display:none}
.ph-mid{position:absolute;left:1169.1px;top:253.3px;width:55px;height:55px;z-index:2;pointer-events:none;border-radius:50%;background:var(--ph-mid) center/100% 100%;will-change:transform}
html.ph .woofer-layer{left:1128.2px;top:327.9px;width:138.2px;height:138.2px;z-index:2;background:var(--ph-woofer) center/100% 100%;border-radius:50%}
html.ph .woofer-layer > *{display:none}
html.ph .deck-wrap{top:214px}
html.ph .deck3d > svg:first-of-type > :not(image){display:none}
html.ph .deck3d > svg:first-of-type{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
html.ph .deck-front{left:5.2%;width:92.5%;top:94.6%;height:34px;border:0;
  background:linear-gradient(180deg, #4a2214, #2a130b 80%, #1d0d07);box-shadow:0 30px 40px rgba(0,0,0,.55)}
html.ph #record > :not(image):not(#recLabel):not(text){display:none}

html.ph .deck3d > .rec-glint path{display:none}
html.ph .ph-sheen{position:absolute;left:14%;top:18.571%;width:58.667%;height:62.857%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from -20deg, rgba(255,236,200,0) 0deg, rgba(255,236,200,.16) 22deg, rgba(255,236,200,0) 48deg, rgba(255,236,200,0) 180deg, rgba(255,236,200,.11) 202deg, rgba(255,236,200,0) 228deg, rgba(255,236,200,0) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 32%, #000 33%, #000 70%);mask:radial-gradient(circle, transparent 32%, #000 33%, #000 70%)}
html:not(.ph) .ph-sheen{display:none}
html.ph #arm > :not(.ph-armimg), html.ph #armShadow > :not(.ph-armimg){display:none}
html.ph .wall-cover{box-shadow:0 12px 22px rgba(0,0,0,.55)}
html.ph .np-card, html.ph .tip{background:var(--ph-sheet) center/cover !important;border:0 !important;box-shadow:0 10px 20px rgba(0,0,0,.5) !important;color:var(--ph-ink)}
html.ph .np-card .mini{border:0;box-shadow:0 2px 4px rgba(0,0,0,.4)}
html.ph .np-card .what{color:#8A2E18}
html.ph .mini-btn, html.ph .tip button{background:var(--ph-sheet) center/cover !important;border:1px solid rgba(33,26,20,.35) !important;box-shadow:0 3px 7px rgba(0,0,0,.35) !important;color:var(--ph-ink)}
html.ph .tip::after{background:#E6D8BA;border:0;box-shadow:3px 3px 4px rgba(0,0,0,.18)}

/* the same film over every view */
.ph-film.v, .ph-vignette.v{position:absolute}
#albumView > .ph-vignette, #albumView > .ph-film{z-index:1}
/* panels: cards inside the paper are thinner paper, no drawn outlines */
html.ph .dir-panel h2, html.ph .pick-meta h3, html.ph .nv-caption .ct, html.ph .tabs .logo{color:#8A2E18;text-shadow:none}
html.ph .remind-opt, html.ph .dir-item, html.ph .ask-rec, html.ph .tile, html.ph .pick-note, html.ph .ask-quote, html.ph .talker{
  background:rgba(255,249,234,.5) !important;border:1px solid rgba(40,26,16,.22) !important;box-shadow:0 2px 6px rgba(40,22,10,.16) !important;border-radius:2px}
html.ph .remind-opt h3{color:#8A2E18}
html.ph .dir-item:hover, html.ph .tile:hover{background:rgba(255,249,234,.85) !important}
html.ph .dir-item.guest{background:rgba(242,206,120,.45) !important}
html.ph .dir-item.blind{background:rgba(196,160,110,.4) !important}
html.ph .dir-item .num{color:#6B4A30}
html.ph .dir-item em{background:#8A2E18;border:0}
html.ph .tile[aria-pressed="true"], html.ph .chip-era[aria-pressed="true"]{background:#3A2416 !important;color:#F3E6C8}
html.ph .remind-input{border:1px solid rgba(40,26,16,.45);border-radius:2px;background:rgba(255,252,242,.8);box-shadow:inset 0 1px 3px rgba(0,0,0,.18)}
html.ph .remind-input:focus{outline:2px solid #8A2E18}
html.ph .chip-era, html.ph .walk-lbl, html.ph .toast, html.ph .flip-tab, html.ph .tabs button{
  background:var(--ph-sheet) center/cover !important;border:0 !important;box-shadow:0 3px 8px rgba(0,0,0,.35) !important;color:var(--ph-ink)}
html.ph .tabs{background:var(--ph-sheet) center/cover;border-bottom:0;box-shadow:0 4px 12px rgba(0,0,0,.45)}
html.ph .tabs .logo{background:transparent}
html.ph .tabs button[aria-pressed="true"]{background:#3A2416 !important;color:#F3E6C8}
html.ph .np-chip{background:#2A1A10;border:0;box-shadow:0 6px 14px rgba(0,0,0,.5)}
html.ph .pk-card, html.ph .rec-sleeve{border:0;box-shadow:0 10px 18px rgba(0,0,0,.45)}
html.ph .sleeve-back{border:0;box-shadow:0 18px 30px rgba(0,0,0,.55);background:var(--ph-sheet) center/cover}
html.ph .sb-head{border-bottom-color:rgba(40,26,16,.5)}
html.ph #embedHost{border:0;border-radius:10px;box-shadow:0 12px 24px rgba(0,0,0,.5);background:#1d140e}
html.ph .pending-note{background:var(--ph-paper) center/100% 100%, #E7C35F !important;background-blend-mode:multiply;border:0;box-shadow:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
html.ph .talker .clip{background:#6b6f74;border:0}

/* notes on the walls: written by hand in ink, large enough to read */
html.ph .sign p{font:16px/1 var(--f-marker);color:#EAD7B0;letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,.7)}
html.ph .drop-sign, html.ph .dir-card, html.ph .hint-card, html.ph .blind-sticky, html.ph .crate-label{text-shadow:0 0 1px rgba(36,22,12,.35) !important}
html.ph .drop-sign{height:auto;justify-content:flex-start;gap:4px;padding:20px 12px 14px !important;width:176px}
html.ph .drop-sign b{font:25px/1 var(--f-marker) !important;color:#24160D !important}
html.ph .drop-sign span{font:700 13.5px/1.25 var(--f-type) !important;color:#24160D !important;margin-top:6px}
html.ph .drop-sign .countdown{font:18px/1.1 var(--f-marker) !important;font-style:normal;color:#5E1A0A !important;text-shadow:none !important}
html.ph .drop-sign u{font:700 13px/1.2 var(--f-type) !important;color:#24160D !important}
html.ph .dir-card b{font:22px/1.05 var(--f-marker);color:#7A2410}
html.ph .dir-card span{font:700 13px/1.2 var(--f-type);color:#24160D}
html.ph .hint-card{font:17px/1.2 var(--f-marker) !important;color:#24160D;width:204px;left:1080px;padding:18px 14px 16px 32px}
html.ph .blind-sticky{font:18px/1.2 var(--f-marker) !important;color:#24160D}
html.ph .crate-label b{color:#24160D !important}

/* the crates, a size smaller */
html.ph #center{transform:scale(.86);transform-origin:720px 812px}
html.ph #aisle{transform:translateY(100px) scale(.86);transform-origin:720px 722px}

/* wide and tall screens: the room carries on past the frame, soft and darker */
.ph-ext{position:absolute;left:-720px;top:-600px;width:2880px;height:2100px;z-index:-1;pointer-events:none;transition:opacity 1.2s ease, filter 1.2s ease}
html:not(.ph) .ph-ext{display:none}
.ph-ext.alt{opacity:0}
html.ph.tod-evening .ph-ext.alt[data-tod="evening"], html.ph.tod-night .ph-ext.alt[data-tod="night"]{opacity:1}
html.ph.tod-evening .ph-ext.nr{filter:brightness(.84) saturate(.9)}
html.ph.tod-night .ph-ext.nr{filter:brightness(.66) saturate(.85)}
#crateView > .ph-vignette, #crateView > .ph-film, #needleView > .ph-vignette, #needleView > .ph-film{position:absolute;inset:0;pointer-events:none}
#crateView > .ph-vignette, #needleView > .ph-vignette{z-index:5}
#crateView > .ph-film, #needleView > .ph-film{z-index:6}

/* printed labels: cream paper with the crate's colour printed as a band, ink lettering */
html.ph #recLabel, html.ph #vinylLabel{fill:none !important;mix-blend-mode:multiply;stroke-opacity:.82}
html.ph #record text, html.ph .vinyl svg > text{fill:#24160D;opacity:.82}
/* this week's drop: lettered in cream paint on the kraft, the paper's fibres showing through */
html.ph .drop-sign b, html.ph .drop-sign span, html.ph .drop-sign u{
  color:transparent !important;background:linear-gradient(rgba(250,238,212,.9),rgba(242,226,192,.9)), var(--ph-sheet) center/260px;background-blend-mode:multiply;
  -webkit-background-clip:text;background-clip:text;text-shadow:none !important}
html.ph .drop-sign .countdown{color:transparent !important;background:linear-gradient(#F0C566,#DDA040);-webkit-background-clip:text;background-clip:text;text-shadow:none !important}
html.ph .drop-sign b{font:27px/1 var(--f-marker) !important}
html.ph .drop-sign span{font:700 14px/1.3 var(--f-type) !important}
html.ph .drop-sign .countdown{font:17px/1.1 var(--f-marker) !important;white-space:nowrap}
html.ph .blind-sticky{top:458px}
html.ph .sleeve-back h3, html.ph .sleeve-back h4, html.ph .sleeve-back b{color:#8A2E18}
html.ph .drop-sign u{text-decoration-color:rgba(242,226,192,.7)}
html.ph .drop-sign{background:linear-gradient(rgba(40,22,10,.28),rgba(40,22,10,.28)), var(--ph-kraft) center/cover !important}

/* the speaker moves air: the woofer pumps on the beat, the midrange flutters, the cabinet hums */
@keyframes phWoof{0%,100%{transform:scale(1)}10%{transform:scale(1.04)}26%{transform:scale(.992)}44%{transform:scale(1.006)}}
@keyframes phMid{0%,100%{transform:scale(1)}20%{transform:scale(1.03)}55%{transform:scale(.996)}}
@keyframes phHum{0%,100%{transform:translate(0,0)}25%{transform:translate(.4px,-.3px)}50%{transform:translate(-.3px,.2px)}75%{transform:translate(.2px,.4px)}}
html.ph #needleView.thumping .woofer-layer{animation:phWoof .625s cubic-bezier(.2,.7,.3,1) infinite}
html.ph #needleView.thumping .ph-mid{animation:phMid .3125s ease-out infinite}
html.ph #needleView.thumping .ph-speaker{animation:phHum .156s linear infinite}
@media (prefers-reduced-motion: reduce){html.ph #needleView.thumping .woofer-layer, html.ph #needleView.thumping .ph-mid, html.ph #needleView.thumping .ph-speaker{animation:none}}

/* weather: seen through the glass, behind the window bars; the plant on the sill stays in front */
.ph-wx{position:absolute;left:0;top:0;width:1440px;height:900px;pointer-events:none;z-index:0}
html:not(.ph) .ph-wx, html:not(.ph) .ph-dim, html:not(.ph) .ph-lampdim{display:none}
.ph-wx .room{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease, background 1.2s ease}
.ph-wx .sun{position:absolute;left:600px;top:190px;width:680px;height:640px;opacity:0;transition:opacity 1.5s ease;filter:blur(10px);
  clip-path:polygon(78% 0, 96% 0, 46% 100%, 6% 100%);background:linear-gradient(200deg, rgba(255,214,140,.30), rgba(255,200,120,.08) 70%, rgba(255,200,120,0))}
html.tod-morning.wx-clear .ph-wx .sun{opacity:1}
html.tod-morning .ph-wx .room{opacity:1;background:linear-gradient(160deg, rgba(255,196,120,.14), rgba(255,170,90,.04) 60%, rgba(60,30,10,.06))}
.ph-wx .g{position:absolute;overflow:hidden;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ph-wx .g-win{left:1084px;top:184px;width:180px;height:222px;-webkit-mask-image:var(--ph-mwin);mask-image:var(--ph-mwin);--h:222px}
.ph-wx .g-door{left:60px;top:224px;width:180px;height:406px;-webkit-mask-image:var(--ph-mdoor);mask-image:var(--ph-mdoor);--h:406px}
.ph-wx .g > *{position:absolute;opacity:0;transition:opacity 1.4s ease}
.ph-wx .sky, .ph-wx .shade{inset:0}
.ph-wx .shade{background:rgba(6,8,16,.72)}
html.tod-evening .ph-wx .shade{opacity:.55}
html.tod-night .ph-wx .shade{opacity:1}
html.wx-clear .ph-wx .shade{opacity:0 !important}
html.tod-morning .ph-wx .sky{opacity:1;background:linear-gradient(rgba(255,226,170,.26), rgba(255,210,150,.1))}
/* cloudy: a flat white-grey sky, the garden flattened */
html.wx-cloudy .ph-wx .sky{opacity:1;background:linear-gradient(rgba(196,200,206,.5), rgba(160,166,172,.28));-webkit-backdrop-filter:saturate(.6) brightness(.95);backdrop-filter:saturate(.6) brightness(.95)}
/* rain: the garden smeared by wet glass, rain falling outside, drops sitting on and running down the pane */
html.wx-rain .ph-wx .sky{opacity:1;background:linear-gradient(rgba(150,160,172,.42), rgba(120,130,142,.3));-webkit-backdrop-filter:blur(1.8px) saturate(.55) brightness(.86);backdrop-filter:blur(1.8px) saturate(.55) brightness(.86)}
.ph-wx .rain-far, .ph-wx .rain-near{left:0;width:100%;top:-512px;height:calc(var(--h) + 1024px)}
.ph-wx .rain-far{background:var(--ph-train) 0 0/128px 256px;animation:phFall256 .5s linear infinite}
.ph-wx .rain-near{background:var(--ph-train) 40px 0/200px 400px;animation:phFall400 .42s linear infinite}
html.wx-rain .ph-wx .rain-far{opacity:.8} html.wx-rain .ph-wx .rain-near{opacity:.6}
.ph-wx .drops{inset:0;background:var(--ph-tdrops) 0 0/128px 128px, var(--ph-tdrops) 70px 40px/84px 84px}
html.wx-rain .ph-wx .drops{opacity:.95}
.ph-wx .run{top:0;width:3px;height:46px;border-radius:2px;background:linear-gradient(rgba(235,240,246,0), rgba(235,240,246,.22) 70%, rgba(250,252,255,.7));animation:phRun 7s cubic-bezier(.5,0,.8,.6) infinite}
.ph-wx .run::after{content:"";position:absolute;left:-1.5px;bottom:-3px;width:6px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #fff 0 18%, rgba(235,240,246,.45) 40%, rgba(60,70,80,.25) 100%)}
html.wx-rain .ph-wx .run{opacity:1}
.ph-wx .r1{left:22%;animation-duration:6.2s;animation-delay:-1s}.ph-wx .r2{left:47%;animation-duration:8.4s;animation-delay:-4s}
.ph-wx .r3{left:68%;animation-duration:5.6s;animation-delay:-2.6s}.ph-wx .r4{left:86%;animation-duration:9.1s;animation-delay:-6s}
/* rain and snow only move in rain and snow: in clear weather their layers sit still and cost nothing (Oct 9) */
html:not(.wx-rain) .ph-wx .rain-far, html:not(.wx-rain) .ph-wx .rain-near, html:not(.wx-rain) .ph-wx .run,
html:not(.wx-snow) .ph-wx .snow-far, html:not(.wx-snow) .ph-wx .snow-near{animation:none}
@keyframes phFall256{to{transform:translate(-46px,256px)}}
@keyframes phFall400{to{transform:translate(-72px,400px)}}
@keyframes phRun{0%{transform:translateY(-60px)}18%{transform:translateY(calc(var(--h) * .18))}30%{transform:translateY(calc(var(--h) * .2))}62%{transform:translateY(calc(var(--h) * .55))}70%{transform:translateY(calc(var(--h) * .56))}100%{transform:translateY(calc(var(--h) + 20px))}}
/* fog: outside only, the garden fading into milk */
html.wx-fog .ph-wx .sky{opacity:1;background:linear-gradient(rgba(234,232,226,.7), rgba(222,220,214,.55));-webkit-backdrop-filter:blur(5px) saturate(.35) brightness(1.06);backdrop-filter:blur(5px) saturate(.35) brightness(1.06)}
html.tod-evening.wx-fog .ph-wx .shade, html.tod-night.wx-fog .ph-wx .shade{background:rgba(26,28,34,.7)}
/* snow: a pale sky, flakes near and far drifting down, a little settled on the sills */
html.wx-snow .ph-wx .sky{opacity:1;background:linear-gradient(rgba(150,158,170,.62), rgba(190,196,204,.46));-webkit-backdrop-filter:blur(1.2px) saturate(.3) brightness(.68);backdrop-filter:blur(1.2px) saturate(.3) brightness(.68)}
.ph-wx .snow-far, .ph-wx .snow-near{left:-40px;width:calc(100% + 80px);top:-460px;height:calc(var(--h) + 920px)}
.ph-wx .snow-far{background:var(--ph-tsnowf) 0 0/128px 128px;animation:phSnowF 13s linear infinite}
.ph-wx .snow-near{background:var(--ph-tsnown) 0 0/260px 260px;animation:phSnowN 7.5s linear infinite}
html.wx-snow .ph-wx .snow-far{opacity:1} html.wx-snow .ph-wx .snow-near{opacity:.95}
@keyframes phSnowF{0%{transform:translate(0,0)}50%{transform:translate(14px,128px)}100%{transform:translate(0,256px)}}
@keyframes phSnowN{0%{transform:translate(0,0)}50%{transform:translate(-22px,230px)}100%{transform:translate(0,460px)}}
.ph-wx .sill{left:0;width:100%;height:12px;background:linear-gradient(rgba(250,250,252,0), rgba(246,247,250,.85) 60%, rgba(236,238,242,.95));border-radius:50% 50% 0 0/100% 100% 0 0}
html.wx-snow .ph-wx .sill{opacity:1}
html.tod-evening .ph-wx .g-door{height:440px;--h:440px;-webkit-mask-image:var(--ph-mdoorev);mask-image:var(--ph-mdoorev)}
html.tod-evening .ph-wx .g-door .s1{top:211px}html.tod-evening .ph-wx .g-door .s2{top:417px}
html.tod-night .ph-wx .g-door{display:none}
.ph-wx .g-win .s1{top:98px}.ph-wx .g-win .s2{top:204px}.ph-wx .g-door .s1{top:214px}.ph-wx .g-door .s2{top:385px}
html.tod-night .ph-wx .snow-far, html.tod-night .ph-wx .snow-near, html.tod-night .ph-wx .sill{filter:brightness(.55) sepia(.3)}
html.tod-night .ph-wx .drops, html.tod-night .ph-wx .run{filter:sepia(.6) brightness(.8)}
@media (prefers-reduced-motion: reduce){.ph-wx .g *{animation:none !important}}

/* evening and night: the light falls off away from the lamps, in every view */
.ph-lampdim{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
#crateStage > .ph-lampdim{left:0;top:0;width:1440px;height:900px;z-index:45;
  background:radial-gradient(ellipse 700px 560px at 720px 420px, rgba(10,5,2,0) 0, rgba(10,5,2,.05) 38%, rgba(10,5,2,.42) 78%, rgba(8,4,1,.62) 100%)}
html.ph.tod-evening #crateStage > .ph-lampdim{opacity:.7}
html.ph.tod-night #crateStage > .ph-lampdim{opacity:1}
#needleStage > .ph-lampdim{left:0;top:0;width:1440px;height:900px;z-index:2;
  background:radial-gradient(ellipse 620px 480px at 620px 480px, rgba(10,5,2,0) 0, rgba(10,5,2,.06) 40%, rgba(10,5,2,.45) 80%, rgba(8,4,1,.64) 100%)}
html.ph.tod-evening #needleStage > .ph-lampdim{opacity:.7}
html.ph.tod-night #needleStage > .ph-lampdim{opacity:1}
#albumView > .ph-lampdim{inset:0;z-index:1;background:radial-gradient(ellipse 60% 62% at 50% 45%, rgba(10,5,2,0) 0, rgba(10,5,2,.08) 45%, rgba(10,5,2,.45) 85%, rgba(8,4,1,.6) 100%)}
html.ph.tod-evening #albumView > .ph-lampdim{opacity:.7}
html.ph.tod-night #albumView > .ph-lampdim{opacity:1}
/* paper and buttons pick up the hour: warmer and dimmer after dark */
html.ph.tod-evening{--ph-tone:linear-gradient(rgba(70,38,12,.12), rgba(40,20,6,.2))}
html.ph.tod-night{--ph-tone:linear-gradient(rgba(40,22,8,.24), rgba(20,10,3,.34))}
html.ph.tod-morning{--ph-tone:linear-gradient(rgba(255,214,150,.06), rgba(255,200,130,.04))}
html.ph.tod-evening .paper, html.ph.tod-night .paper, html.ph.tod-evening .pill, html.ph.tod-night .pill, html.ph.tod-evening .np-card, html.ph.tod-night .np-card,
html.ph.tod-evening .tip, html.ph.tod-night .tip, html.ph.tod-evening .mini-btn, html.ph.tod-night .mini-btn, html.ph.tod-evening .chip-era, html.ph.tod-night .chip-era,
html.ph.tod-evening .walk-lbl, html.ph.tod-night .walk-lbl, html.ph.tod-evening .toast, html.ph.tod-night .toast, html.ph.tod-evening .flip-tab, html.ph.tod-night .flip-tab,
html.ph.tod-evening .tabs, html.ph.tod-night .tabs{background:var(--ph-tone), var(--ph-sheet) center/cover !important}
html.ph.tod-evening .round, html.ph.tod-night .round{background:var(--ph-tone), var(--ph-sticker) center/cover !important}
html.ph.tod-evening .needle-btn, html.ph.tod-night .needle-btn, html.ph.tod-evening .pill-main, html.ph.tod-night .pill-main{background:var(--ph-tone), var(--ph-plate) center/100% 100% !important}
html.ph.tod-evening .dir-overlay{background:rgba(14,7,3,.66)}
html.ph.tod-night .dir-overlay{background:rgba(8,4,2,.74)}

/* "On the platter": a real record and sleeve on a little wooden shelf */
html.ph .np-stand .disc{background:radial-gradient(circle closest-side, transparent 0 21%, var(--disc-label, #8A2E18) 22% 29%, transparent 30%), var(--ph-disc) center/100% 100% !important;border:0 !important;box-shadow:0 6px 10px rgba(0,0,0,.45)}
html.ph .np-stand .disc::after{display:none}
html.ph .np-stand .cover{border:0;border-radius:2px;box-shadow:0 8px 14px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4)}
html.ph .np-stand .cover::after{content:"";position:absolute;inset:0;background:var(--ph-wear) center/100% 100%;mix-blend-mode:multiply;opacity:.55;pointer-events:none}
html.ph .np-stand .ledge{border:0;border-radius:1px;background:linear-gradient(rgba(255,220,170,.12), rgba(0,0,0,.25)), var(--ph-crate) 30% 50%/400% 400%;box-shadow:0 8px 12px rgba(0,0,0,.5)}
html.ph .np-stand .legs{border-left:5px solid #3E2414;border-right:5px solid #3E2414;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
html.ph .np-stand .tag{background:var(--ph-paper) center/100% 100% !important;border:0;box-shadow:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));color:var(--ph-ink);padding:6px 14px 4px}
html.ph.tod-evening .np-stand, html.ph.tod-night .np-stand{filter:brightness(.88)}
/* album and turntable views: just the light */
.ph-dim{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity 1.2s ease, background 1.2s ease}
#needleStage > .ph-dim{position:absolute;left:-720px;top:-600px;width:2880px;height:2100px;inset:auto}
html.wx-cloudy .ph-dim, html.wx-rain .ph-dim{opacity:1;background:rgba(30,38,50,.14)}

html.wx-snow .ph-dim{opacity:1;background:rgba(40,50,66,.08)}
html.tod-morning .ph-dim{opacity:1;background:rgba(255,190,110,.08)}

/* simulator */
.ph-sim{position:fixed;left:max(14px, env(safe-area-inset-left, 0px));bottom:calc(64px + env(safe-area-inset-bottom, 0px));z-index:9999;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  font:700 12.5px/1 'Courier Prime','Courier New',monospace;color:#1F202B}
.ph-sim > button, .ph-sim .row{border:1.6px solid #1F202B;border-radius:20px;background:#F7EEDA;box-shadow:2px 2px 0 rgba(62,74,102,.55)}
.ph-sim > button{all:unset;cursor:pointer;padding:8px 13px;border:1.6px solid #1F202B;border-radius:20px;background:#F7EEDA;box-shadow:2px 2px 0 rgba(62,74,102,.55)}
.ph-sim .rows{display:none;flex-direction:column;gap:6px}
.ph-sim.open .rows{display:flex}
.ph-sim .row{display:flex;align-items:center;padding:3px;flex-wrap:wrap}
.ph-sim .row span{padding:0 6px 0 9px;font-weight:400;opacity:.75}
.ph-sim .row button{all:unset;cursor:pointer;padding:6px 9px;border-radius:16px;white-space:nowrap}
.ph-sim .row button[aria-pressed="true"]{background:#D2583A;color:#FBF4E2}
.ph-sim button:focus-visible{outline:2px solid #3E4A66;outline-offset:2px}
html.vibe:not(.vibe-awake):not(.vibe-reveal) .ph-sim{opacity:0;pointer-events:none}
@media (max-width:560px){.ph-sim{left:8px;right:8px;bottom:calc(52px + env(safe-area-inset-bottom, 0px));font-size:11px}.ph-sim .row button{padding:5px 7px}}
.ph-room.wxp, .ph-ext.wxp{opacity:0}
html.ph.tod-evening.wx-rain .wxp[data-k="evening-rain"], html.ph.tod-evening.wx-snow .wxp[data-k="evening-snow"],
html.ph.tod-night.wx-rain .wxp[data-k="night-rain"], html.ph.tod-night.wx-snow .wxp[data-k="night-snow"]{opacity:1}
/* the photograph carries the weather; only a light fall stays in the window to keep it moving */
html.ph.tod-evening.wx-rain .ph-wx .g-door, html.ph.tod-evening.wx-snow .ph-wx .g-door,
html.ph.tod-night.wx-rain .ph-wx .g-door, html.ph.tod-night.wx-snow .ph-wx .g-door{display:none}
html.ph.tod-evening.wx-rain .ph-wx .g-win > :not(.rain-far), html.ph.tod-night.wx-rain .ph-wx .g-win > :not(.rain-far),
html.ph.tod-evening.wx-snow .ph-wx .g-win > :not(.snow-far), html.ph.tod-night.wx-snow .ph-wx .g-win > :not(.snow-far){opacity:0 !important}
html.ph.tod-evening.wx-rain .ph-wx .rain-far, html.ph.tod-night.wx-rain .ph-wx .rain-far{opacity:.35 !important}
html.ph.tod-evening.wx-rain .ph-wx .g-win > :not(.rain-far), html.ph.tod-night.wx-rain .ph-wx .g-win > :not(.rain-far),
html.ph.tod-evening.wx-snow .ph-wx .g-win > :not(.snow-far), html.ph.tod-night.wx-snow .ph-wx .g-win > :not(.snow-far){animation:none}
html.ph.tod-evening.wx-snow .ph-wx .snow-far, html.ph.tod-night.wx-snow .ph-wx .snow-far{opacity:.5 !important;filter:none}
:root{--fw:url(img/fog-day-win.jpg);--fd:url(img/fog-day-door.jpg);--cw:url(img/cld-day-win.jpg);--cd:url(img/cld-day-door.jpg)}
html.tod-evening{--fw:url(img/fog-evening-win.jpg);--fd:url(img/fog-evening-door.jpg);--cw:url(img/cld-evening-win.jpg);--cd:url(img/cld-evening-door.jpg)}
html.tod-night{--fw:url(img/fog-night-win.jpg);--cw:url(img/cld-night-win.jpg)}
html.wx-fog .ph-wx .sky, html.wx-cloudy .ph-wx .sky{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;opacity:1}
html.wx-fog .ph-wx .g-win .sky{background:var(--fw) center/100% 100% !important}
html.wx-fog .ph-wx .g-door .sky{background:var(--fd) center/100% 100% !important}
html.wx-cloudy .ph-wx .g-win .sky{background:var(--cw) center/100% 100% !important}
html.wx-cloudy .ph-wx .g-door .sky{background:var(--cd) center/100% 100% !important}
html.wx-fog .ph-wx .shade, html.wx-cloudy .ph-wx .shade{opacity:0 !important}
html.wx-fog .ph-wx .g, html.wx-cloudy .ph-wx .g{filter:none !important}
/* fog drifts slowly past */
html.wx-fog .ph-wx .g::after{content:"";position:absolute;inset:-20% -60%;background:radial-gradient(ellipse 30% 40% at 30% 50%, rgba(240,238,232,.22), transparent 70%), radial-gradient(ellipse 25% 35% at 75% 40%, rgba(240,238,232,.16), transparent 70%);animation:phFog 28s ease-in-out infinite alternate}
html.tod-evening.wx-fog .ph-wx .g::after, html.tod-night.wx-fog .ph-wx .g::after{opacity:.35}
@keyframes phFog{from{transform:translateX(-14%)}to{transform:translateX(14%)}}
@media (prefers-reduced-motion: reduce){html.wx-fog .ph-wx .g::after{animation:none}}

/* morning sun: softer, fading in from the window with no hard top edge */
.ph-wx .sun{left:560px;top:150px;width:760px;height:700px;filter:blur(18px);
  clip-path:polygon(76% 0, 98% 0, 48% 100%, 2% 100%);
  background:linear-gradient(200deg, rgba(255,218,150,.16), rgba(255,205,130,.06) 55%, rgba(255,200,120,0) 85%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 7%, #000 22%, #000 70%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, transparent 7%, #000 22%, #000 70%, transparent 100%)}
html.tod-morning .ph-wx .room{background:linear-gradient(160deg, rgba(255,196,120,.08), rgba(255,170,90,.02) 60%, rgba(60,30,10,.03))}

/* dust: finer and quieter */
html.ph .dust{opacity:.3}
html.ph .dust circle{r:.9px}
html.ph .mote{width:1.3px !important;height:1.3px !important;filter:blur(.3px)}
html.ph.vibe .motes{opacity:.5}
/* DIG! hangs on the wall between the lamp cords, lit from below by the spill off the lamp shades */
html.ph .sign{left:614px;top:34px;width:212px;height:118px;background-size:212px 80px !important;z-index:5;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.55)) brightness(.9)}
html.ph .sign h1{width:212px;height:80px}
html.ph .sign p{font-size:14.5px;color:#E9D3A6;opacity:.92}
html.ph .sign::after{content:"";position:absolute;left:-40px;right:-40px;top:58px;height:90px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255,200,130,.16), rgba(255,200,130,0) 70%)}
html.ph.tod-evening .sign{filter:drop-shadow(0 5px 7px rgba(0,0,0,.55)) brightness(.8)}
html.ph.tod-night .sign{filter:drop-shadow(0 5px 7px rgba(0,0,0,.6)) brightness(.68)}
html.ph.tod-evening .sign::after, html.ph.tod-night .sign::after{background:radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255,190,110,.22), rgba(255,190,110,0) 70%)}

/* notes on the door glass: notice-sized, not poster-sized */
html.ph .drop-sign{left:84px;top:252px;width:128px;padding:16px 9px 11px !important;gap:3px}
html.ph .drop-sign b{font:18.5px/1 var(--f-marker) !important}
html.ph .drop-sign span{font:700 10.5px/1.3 var(--f-type) !important;margin-top:3px}
html.ph .drop-sign .countdown{font:13.5px/1.1 var(--f-marker) !important}
html.ph .drop-sign u{font:700 10px/1.2 var(--f-type) !important}
html.ph .drop-sign::before{width:66px;height:16px;margin-left:-33px;top:-7px}
html.ph .blind-sticky{left:96px;top:466px;width:112px;padding:8px 8px 9px;font:13.5px/1.2 var(--f-marker) !important}

/* fog and cloudy: no sun on the door's lower panel either */
.ph-wx .kick{position:absolute;left:66px;top:622px;width:168px;height:70px;opacity:0;transition:opacity 1.2s ease;background:linear-gradient(rgba(70,60,52,.32), rgba(60,50,42,.24))}
html.ph.tod-day.wx-fog .ph-wx .kick, html.ph.tod-day.wx-cloudy .ph-wx .kick, html.ph.tod-morning.wx-fog .ph-wx .kick, html.ph.tod-morning.wx-cloudy .ph-wx .kick,
html.ph.tod-day.wx-rain .ph-wx .kick, html.ph.tod-day.wx-snow .ph-wx .kick, html.ph.tod-morning.wx-rain .ph-wx .kick, html.ph.tod-morning.wx-snow .ph-wx .kick{opacity:1}
/* the tagline gets its own small plank, hung just under the DIG! board; the lamp spill no longer ends in a hard line */
html.ph .sign::after{display:none}
html.ph .sign::before{content:"";position:absolute;left:-60px;right:-60px;top:-20px;height:170px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 48% 42% at 50% 62%, rgba(255,196,120,.10), rgba(255,196,120,0) 100%)}
html.ph .sign p{position:absolute;left:0;right:0;top:88px;height:22px;white-space:nowrap;display:flex;align-items:center;justify-content:center;
  font:13px/1 var(--f-marker) !important;letter-spacing:.01em;color:transparent !important;
  background:linear-gradient(rgba(246,230,198,.95),rgba(232,212,176,.95)), var(--ph-sheet) center/220px;-webkit-background-clip:text;background-clip:text;text-shadow:none !important}
html.ph .sign .ph-plank{position:absolute;left:6px;right:6px;top:86px;height:26px;z-index:-1;border-radius:1px;
  background:linear-gradient(rgba(40,20,8,.35),rgba(20,10,4,.5)), var(--ph-crate) 40% 30%/360px 210px;box-shadow:0 4px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,170,.12)}
html.ph .sign .ph-plank::before, html.ph .sign .ph-plank::after{content:"";position:absolute;top:-8px;width:2px;height:8px;background:linear-gradient(#5a4a3a,#2a2018)}
html.ph .sign .ph-plank::before{left:18px} html.ph .sign .ph-plank::after{right:18px}

/* album view: the counter at the visitor's hour */
.ph-counter.t{opacity:0;transition:opacity 1.2s ease}
html.ph.tod-evening .ph-counter.t[data-tod="evening"], html.ph.tod-night .ph-counter.t[data-tod="night"]{opacity:1}
html.ph.tod-evening .ph-counter, html.ph.tod-night .ph-counter{filter:none !important}

/* "On the platter": a sleeve on a small wall shelf, the record half out of it, a luggage tag hanging below */
html.ph .np-stand{width:176px;height:200px}
html.ph .np-stand .disc{left:58px;right:auto;top:4px;width:112px;height:112px}
html.ph .np-stand .cover{left:8px;top:22px;width:116px;height:116px;transform:rotate(-1.5deg);border-radius:1px;
  box-shadow:0 1px 0 rgba(255,235,200,.15) inset, 6px 10px 14px rgba(0,0,0,.55), 1px 2px 3px rgba(0,0,0,.45) !important}
html.ph .np-stand:hover .cover, html.ph .np-stand:focus-visible .cover{transform:rotate(-.5deg) translateY(-3px)}
html.ph .np-stand .ledge{left:0;right:0;top:136px;height:9px;border-radius:1px;
  background:linear-gradient(rgba(255,226,180,.28), rgba(255,226,180,0) 30%, rgba(0,0,0,.2)), var(--ph-crate) 30% 60%/300px 175px !important;
  box-shadow:0 1px 0 rgba(255,230,190,.25) inset, 0 9px 0 -2px #2e1a0e, 0 14px 14px rgba(0,0,0,.55) !important}
html.ph .np-stand .legs{left:10px;right:10px;top:150px;height:18px;border:0 !important;filter:none;
  background:radial-gradient(ellipse 50% 50% at 50% 0, rgba(0,0,0,.35), rgba(0,0,0,0) 70%)}
html.ph .np-stand .tag{left:auto;right:18px;bottom:6px;padding:9px 12px 6px 20px;font:15px/1 var(--f-marker);
  background:var(--ph-tag) center/100% 100% !important;transform:rotate(4deg);transform-origin:80% 0;filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}
html.ph .np-stand .tag::before{content:"";position:absolute;right:30px;top:-22px;width:1.5px;height:24px;background:var(--ph-twine);transform:rotate(-8deg)}
@keyframes phTag{0%,100%{transform:rotate(4deg)}50%{transform:rotate(1.5deg)}}
html.ph .np-stand.spinning .tag{animation:phTag 5s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){html.ph .np-stand.spinning .tag{animation:none}}
/* the photo's edges dissolve evenly into the glow around it */
html.ph .ph-room, html.ph .ph-nroom{
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 50%, #000 70%, rgba(0,0,0,.6) 86%, transparent 100%);
  mask-image:radial-gradient(ellipse 62% 66% at 50% 50%, #000 70%, rgba(0,0,0,.6) 86%, transparent 100%);
  -webkit-mask-composite:source-over;mask-composite:add}
html.ph #crateView, html.ph #needleView{background:#16100b}
.ph-side{position:absolute;inset:0;pointer-events:none;z-index:5;display:none}
html.ph .ph-side.on{display:block;
  background:
    linear-gradient(90deg, rgba(20,13,8,.97) 0, rgba(20,13,8,.97) calc(var(--pl) - 60px), rgba(20,13,8,.55) calc(var(--pl) + 30px), rgba(20,13,8,0) calc(var(--pl) + 170px)),
    linear-gradient(270deg, rgba(20,13,8,.97) 0, rgba(20,13,8,.97) calc(var(--pr) - 60px), rgba(20,13,8,.55) calc(var(--pr) + 30px), rgba(20,13,8,0) calc(var(--pr) + 170px))}
html.ph .ph-side.on.tb{background:
    linear-gradient(180deg, rgba(20,13,8,.97) 0, rgba(20,13,8,.97) calc(var(--pt) - 50px), rgba(20,13,8,0) calc(var(--pt) + 120px)),
    linear-gradient(0deg, rgba(20,13,8,.97) 0, rgba(20,13,8,.97) calc(var(--pb) - 50px), rgba(20,13,8,0) calc(var(--pb) + 120px))}
/* The out-of-focus surround lives in a still backdrop outside the stage: the stage is a GPU layer that
   zooms in vibe mode, and a 2880x2100 picture inside it made a texture too big for the graphics card. */
.ph-back{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;pointer-events:none;z-index:0}
html:not(.ph) .ph-back{display:none}
.ph-back .ph-ext{z-index:auto}
#crateView > .stage, #needleView > .stage{z-index:1}
html.ph #crateStage, html.ph #needleStage{background:transparent !important}
/* the light layers stay inside the stage, at the stage's own size */
#needleStage > .ph-dim{left:0;top:0;width:1440px;height:900px}
/* vibe mode: the cover-coloured room lights were made for the drawn shop; on a photograph they read as a colour cast */
html.ph.vibe .room-lights{opacity:.22}
html.ph.vibe:not(.music-on) .room-lights{opacity:.12}
html.ph.vibe.ambient-on #needleView .ambient-wash{opacity:.14}
html.ph.vibe.ambient-on .vibe-vignette{background:radial-gradient(ellipse 58% 62% at 50% 50%, rgba(10,6,3,0) 34%, rgba(10,6,3,.5) 72%, rgba(8,5,2,.85) 100%)}
html.ph .spk-glow{display:none}
html.ph .dim-layer{background:radial-gradient(ellipse 52% 58% at var(--cx,50%) var(--cy,60%), rgba(14,8,4,0) 0%, rgba(14,8,4,.12) 38%, rgba(12,7,3,.7) 88%)}
html.ph.vibe #needleView .ambient-wash{display:none}
/* the staff-pick note: solid paper, clipped beside the stack instead of over the cover */
html.ph .talker{
  background:var(--ph-sheet) center/cover !important;border:0 !important;border-radius:1px;
  box-shadow:0 8px 16px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35) !important;color:var(--ph-ink)}
html.ph .talker small{color:#8A2E18}
html.ph .talker .clip{left:62px;top:-12px;width:44px;height:18px;border-radius:3px;background:linear-gradient(#9a9ea3,#5f6368);box-shadow:0 2px 3px rgba(0,0,0,.4)}

/* "On the platter": a slow, steady turn */
html.ph .np-stand .disc{animation-duration:5.4s !important}

/* the incense: a thin dark stick in a small wooden holder, its smoke soft and pale */
html.ph .np-stand .incense .smoke{stroke:#E8E2D6;stroke-width:1.3;filter:blur(1.3px)}
html.ph .np-stand .incense .wisp{filter:none}
html.ph .np-stand .incense path[d^="M18 216"]{stroke:#6b4a32;stroke-width:2}
html.ph .np-stand .incense path[d^="M29 184"]{stroke:#3a2416;stroke-width:2.4}
html.ph .np-stand .incense path[d^="M6 214"]{fill:#5a341d;stroke:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
html.ph .np-stand .incense circle[cx="48"], html.ph .np-stand .incense circle[cx="53"]{fill:#9b9387;opacity:.7}
html.ph .np-stand .incense .glow{fill:#ff8a4a;opacity:.25}
html.ph .np-stand .incense .ember{fill:#ff6a2a;filter:drop-shadow(0 0 2px #ff9a5c)}

/* Ask the counter: the moment and feeling tiles are paper, like the record buttons */
html.ph .tile{background:var(--ph-sheet) center/cover !important;border:0 !important;border-radius:14px;
  box-shadow:0 4px 10px rgba(0,0,0,.4) !important;color:var(--ph-ink)}
html.ph .tile:hover, html.ph .tile:focus-visible{background:var(--ph-sheet) center/cover !important;filter:brightness(1.06);transform:translateY(-2px)}
html.ph .tile b{color:#8A2E18}
html.ph .tile[aria-pressed="true"]{background:linear-gradient(rgba(58,36,22,.88),rgba(58,36,22,.88)), var(--ph-sheet) center/cover !important;color:#F3E6C8}
html.ph .tile[aria-pressed="true"] b{color:#F2D27A}
html.ph.tod-evening .tile, html.ph.tod-night .tile{background:var(--ph-tone), var(--ph-sheet) center/cover !important}
/* vibe mode has its own dark edges; the wide-screen side fade measured the stage mid-zoom and darkened half the scene */
html.vibe #needleView > .ph-side{display:none !important}
/* the cover's colour in the room: a faint tint, not a haze */
html.ph.ambient-on #crateView .ambient-wash, html.ph.ambient-on #albumView .ambient-wash{opacity:.32}
@media (hover: none){html.ph.ambient-on #crateView .ambient-wash, html.ph.ambient-on #albumView .ambient-wash{opacity:.12}}
html.ph .dir-item{background:var(--ph-sheet) center/cover !important;border:0 !important;border-radius:12px;
  box-shadow:0 3px 8px rgba(40,22,10,.32) !important;min-height:46px;padding:8px 14px;transition:transform .15s ease, filter .15s ease}
html.ph .dir-item:hover{background:var(--ph-sheet) center/cover !important;filter:brightness(1.05);transform:translateY(-1px)}
html.ph .dir-item:focus-visible{outline:2px solid #8A2E18;outline-offset:2px}
html.ph .dir-item.guest{background:linear-gradient(rgba(214,168,72,.28), rgba(214,168,72,.28)), var(--ph-sheet) center/cover !important}
html.ph .dir-item.blind{background:linear-gradient(rgba(150,104,58,.34), rgba(150,104,58,.34)), var(--ph-sheet) center/cover !important}
html.ph .dir-item .num{font:17px/1 var(--f-display);color:#7a5a3e}
html.ph .dir-item .nm{color:var(--ph-ink)}
html.ph .dir-item .ct{color:#6b5040}
html.ph .dir-item em{background:none;border:0;padding:3px 9px 2px;font:14px/1 var(--f-marker);color:#F3E6C8;
  background:#8A2E18;border-radius:3px;transform:rotate(-3deg);box-shadow:0 2px 3px rgba(0,0,0,.3)}
html.ph .dir-panel h3{color:#8A2E18}
html.ph.tod-evening .dir-item, html.ph.tod-night .dir-item{background:var(--ph-tone), var(--ph-sheet) center/cover !important}
html.ph.tod-evening .dir-item.blind, html.ph.tod-night .dir-item.blind{background:var(--ph-tone), linear-gradient(rgba(150,104,58,.34), rgba(150,104,58,.34)), var(--ph-sheet) center/cover !important}
/* 1. Spotlight: the two lamps pool their light on the centre crate; the room around falls a little darker */
.ix-dim{position:absolute;left:0;top:0;width:1440px;height:900px;z-index:5;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(ellipse 470px 400px at 720px 560px, rgba(12,6,2,0) 0, rgba(12,6,2,0) 38%, rgba(12,6,2,.32) 72%, rgba(10,5,1,.55) 100%)}
.ix-beam{position:absolute;left:0;top:0;width:1440px;height:900px;z-index:11;pointer-events:none;opacity:0;transition:opacity .8s ease;mix-blend-mode:screen;filter:blur(16px)}
.ix-beam i{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,214,150,.36) 0, rgba(255,200,130,.14) 40%, rgba(255,190,120,.05) 80%, rgba(255,190,120,0) 100%)}
.ix-beam i:nth-child(1){clip-path:polygon(552px 196px, 596px 196px, 790px 840px, 470px 840px)}
.ix-beam i:nth-child(2){clip-path:polygon(846px 196px, 890px 196px, 970px 840px, 650px 840px)}
.ix-pool{position:absolute;left:470px;top:760px;width:500px;height:120px;z-index:4;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,205,140,.28), rgba(255,205,140,0) 70%);mix-blend-mode:screen}
html.ixon-spot .ix-dim, html.ixon-spot .ix-beam, html.ixon-spot .ix-pool{opacity:1}
html.ixon-spot.tod-evening .ix-beam, html.ixon-spot.tod-night .ix-beam{opacity:1.0;filter:blur(14px) brightness(1.15)}
@media (hover: none){
  .ix-beam, html.ixon-spot.tod-evening .ix-beam, html.ixon-spot.tod-night .ix-beam{mix-blend-mode:normal}   /* the blur stays: the layer is still, so it's drawn once */
  .ix-beam i{opacity:.5}
  .ix-pool{mix-blend-mode:normal;opacity:0} html.ixon-spot .ix-pool{opacity:.6}
}
html.ixon-spot.tod-night .ix-dim{background:radial-gradient(ellipse 470px 400px at 720px 560px, rgba(12,6,2,0) 0, rgba(12,6,2,0) 36%, rgba(12,6,2,.4) 70%, rgba(8,4,1,.66) 100%)}

/* 3. Neon: one small sign hung inside the window, humming, with a rare flicker */
.ix-neon{position:absolute;left:1102px;top:214px;width:144px;height:66px;z-index:46;pointer-events:none;opacity:0;transition:opacity .8s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-2deg)}
.ix-neon b{font:400 32px/0.9 'Mansalva', cursive;color:#ffb08a;letter-spacing:.5px;-webkit-text-stroke:.8px #ff5a2a;
  text-shadow:0 0 2px #fff4ee, 0 0 6px #ff5a2a, 0 0 12px #ff3d10, 0 0 24px #ff3d10, 0 0 44px #e8300a, 0 0 70px rgba(232,48,10,.85)}
.ix-neon small{margin-top:2px;font:700 10px/1 'Courier Prime', monospace;letter-spacing:3px;color:#ffe2d4;text-transform:uppercase;
  text-shadow:0 0 4px #ff7a4d, 0 0 10px #ff5a2a}
.ix-neon::before{content:"";position:absolute;left:-50px;right:-50px;top:-40px;bottom:-40px;z-index:-1;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,80,30,.4), rgba(255,80,30,0) 70%)}
.ix-neon::after{content:"";position:absolute;left:18px;right:18px;top:-22px;height:22px;border-left:1px solid rgba(40,30,25,.7);border-right:1px solid rgba(40,30,25,.7)}
html.ixon-neon .ix-neon{opacity:1;animation:ixFlicker 11s linear infinite}
html.ixon-neon.tod-evening .ix-neon, html.ixon-neon.tod-night .ix-neon{opacity:1}
@keyframes ixFlicker{0%,61%,63.5%,64.5%,100%{filter:none}62%,64%{filter:brightness(.45)}}
@media (prefers-reduced-motion: reduce){html.ixon-neon .ix-neon{animation:none}}

/* 5. Entrance: from the very first frame the shop is dark and a little close (this sheet loads before anything is drawn);
   as soon as the room picture is ready, the lamps warm up and it pulls back. A safety net reveals it by 2.5 s. */
html.ph::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;background:#140b05;opacity:0}
html.ph:not(.ix-go)::after{opacity:.85;animation:ixSafe 0s 2.5s forwards}
html.ph:not(.ix-go) #crateView{transform:scale(1.09);filter:brightness(.55) saturate(.8);animation:ixSafeV 0s 2.5s forwards}
html.ix-enter #crateView{animation:ixPush 1.9s cubic-bezier(.2,.65,.25,1) both}
html.ix-enter::after{animation:ixWarm 1.9s ease-out both}
@keyframes ixPush{from{transform:scale(1.09);filter:brightness(.55) saturate(.8)}to{transform:none;filter:none}}
@keyframes ixWarm{0%{opacity:.85}35%{opacity:.5}100%{opacity:0}}
@keyframes ixSafe{to{opacity:0}}
@keyframes ixSafeV{to{transform:none;filter:none}}
@media (prefers-reduced-motion: reduce){html.ph:not(.ix-go)::after, html.ix-enter::after{opacity:0;animation:none} html.ph:not(.ix-go) #crateView, html.ix-enter #crateView{transform:none;filter:none;animation:none}}


/* Depth: the room stays still; only the crates slide sideways with the pointer, the front crate most */
html.ixon-depth #aisle, html.ixon-depth #center{transition:translate .9s cubic-bezier(.2,.7,.25,1)}
@media (prefers-reduced-motion: reduce){html.ixon-depth #aisle, html.ixon-depth #center{translate:none !important}}

/* Cover light: a faint glow on the back wall leans toward the front record's colours.
   Two layers crossfade (gradients can't blend colour to colour), and only once a record stays at the front. */
.ix-tint{position:absolute;left:0;top:0;width:1440px;height:900px;z-index:4;pointer-events:none;opacity:0;transition:opacity 2.4s ease;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 520px 380px at 720px 430px, var(--c, #FFD9A0) 0%, transparent 72%)}
html.ixon-tint .ix-tint.on{opacity:.38}
@media (hover: none){ .ix-tint{mix-blend-mode:normal} html.ixon-tint .ix-tint.on{opacity:.12} }
@media (prefers-reduced-motion: reduce){.ix-tint{transition:none}}

/* Stickers: a few true facts, in the corner of the sleeve like a shop's price sticker */
.ix-stk{position:absolute;right:14px;top:16px;z-index:5;width:66px;height:66px;border-radius:50%;display:none;align-items:center;justify-content:center;text-align:center;
  background:var(--ph-sticker) center/cover;box-shadow:0 2px 4px rgba(0,0,0,.4);transform:rotate(9deg);pointer-events:none;
  font:15px/0.95 'Mansalva', cursive;color:#8A2E18;padding:4px}
.ix-stk.gold{background:linear-gradient(rgba(231,195,95,.55), rgba(231,195,95,.55)), var(--ph-sticker) center/cover;background-blend-mode:multiply}
html.ixon-stick .ix-stk{display:flex}
/* the note is taped to the front sleeve's lower corner, hanging a little off its edge, instead of floating beside the stack */
html.ph #talker{left:752px;top:434px;width:136px;padding:12px 10px 9px;transform:rotate(-3.5deg);transform-origin:50% 0;
  box-shadow:0 5px 10px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35) !important}
html.ph .talker small{font-size:10.5px}
html.ph .talker p{font-size:15.5px;line-height:1.22;margin-top:5px}
html.ph .talker .clip{left:38px;top:-10px;width:62px;height:20px;border:0;border-radius:1px;background:var(--ph-tape) center/cover;opacity:.92;
  transform:rotate(4deg);box-shadow:0 1px 2px rgba(0,0,0,.25)}
/* the note says "Staff pick" already, so the record under it drops its round sticker */
html.ph #center .sleeve.front .ix-stk.gold{display:none}
/* a neon tube around each hanging sign (blue on "Pick one for me", yellow on "Ask the counter"); a few stretches of tube have burned out */
.ph-neonf{position:absolute;pointer-events:none;overflow:visible;z-index:-1}
.ph-neonf .glass{fill:none;stroke:rgba(205,215,225,.16);stroke-width:3.4}
.ph-neonf .lit{fill:none;stroke:var(--nc);stroke-width:3.4;stroke-linecap:round}
.ph-neonf .core{fill:none;stroke:var(--ncore);stroke-width:1.3;stroke-linecap:round}
.ph-neonf .lit, .ph-neonf .core{filter:drop-shadow(0 0 2px var(--nc)) drop-shadow(0 0 7px var(--nc))}
.ph-neonf{filter:drop-shadow(0 0 14px var(--nglow))}
/* the lamps' night falloff darkens the corner the signs hang in; a lit tube shouldn't dim with it */
html.tod-evening .ph-neonf{filter:brightness(1.35) drop-shadow(0 0 14px var(--nglow))}
html.tod-night .ph-neonf{filter:brightness(1.8) drop-shadow(0 0 18px var(--nglow))}
.ph-neonf .flick{animation:phNeonFlick 9s steps(1) infinite}
@keyframes phNeonFlick{0%,58%,61%,63%,100%{opacity:1}59%,62%{opacity:.15}}
@media (prefers-reduced-motion: reduce){.ph-neonf .flick{animation:none}}
#pickCardBtn .ph-neonf{--nc:#56b9ff;--ncore:#e4f4ff;--nglow:rgba(70,160,255,.55)}
/* the two tubes flicker on their own clocks, never together */
#askCardBtn .ph-neonf .flick{animation-duration:13.7s;animation-delay:-5.2s}
#askCardBtn .ph-neonf{--nc:#ffd23f;--ncore:#fff6d2;--nglow:rgba(255,200,40,.5)}
/* 1. Dim while digging: once you flip, the room, notes, signs and neon step back and the centre crate keeps its light; 15 s without a flip brings it back */
.dz-room{position:absolute;left:0;top:0;width:1440px;height:900px;z-index:27;pointer-events:none;opacity:0;transition:opacity 1.6s ease-in-out;
  background:radial-gradient(ellipse 330px 390px at 725px 515px, rgba(10,5,1,0) 0, rgba(10,5,1,0) 68%, rgba(10,5,1,.38) 88%, rgba(8,4,1,.55) 100%)}
html.dz-dig .dz-room{opacity:1}
html.ph .ix-neon{transition:opacity 1.6s ease-in-out}
html.dz-dig .ix-neon{opacity:.45 !important}

/* 2. "Lean in": the same crate and record, seen from just above the crate, the cover running past the screen's edges */
.cz{position:absolute;inset:0;z-index:55;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .45s ease, visibility 0s .45s;background:#120c08;--S:104vw}
@media (orientation: portrait){.cz{--S:108vw}}
html.cz-on .cz{opacity:1;visibility:visible;transition:opacity .45s ease}
html.cz-on.cz-leaving .cz{opacity:0;transition:opacity .5s ease .12s}
html.cz-on #crateView .flip{z-index:70}
.cz-room{position:absolute;left:0;top:0;background-position:0 0;background-size:100% 100%}
html.cz-ready .cz-room{background-image:url(img/crate-closeup.jpg)}
.cz-wallimg{z-index:4;clip-path:polygon(0 39.6%, 14.77% 47.55%, 14.77% 57.11%, 100% 57.11%, 100% 100%, 0 100%)}
.cz-light{position:absolute;inset:0;pointer-events:none;z-index:6;background:radial-gradient(ellipse 120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%)}
.cz-scene{position:absolute;left:50%;top:0;width:var(--S);height:100%;transform:translateX(-50%)}
.cz-edge{position:absolute;left:0;right:0;height:calc(1.6vw + 4px);border-radius:3px 3px 0 0;background-size:cover;background-position:50% 0;
  box-shadow:0 -1px 0 rgba(255,236,205,.28) inset, 0 3px 6px rgba(0,0,0,.55)}
.cz-edge::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ph-wear) center/cover;mix-blend-mode:multiply;opacity:.55}
.cz-div{position:absolute;background:#e9dfc8;border-radius:calc(var(--S) * .03) calc(var(--S) * .03) 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.5) inset, 0 4px 10px rgba(0,0,0,.5)}
.cz-div::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ph-paper) center/cover;mix-blend-mode:multiply;opacity:.5}
.cz-div b{position:absolute;left:9%;right:6%;display:flex;align-items:center;justify-content:center;background:#5f9aa0;
  font-family:'Alfa Slab One', serif;font-weight:400;line-height:1;color:#1f202b;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4%}
.cz-front{position:absolute;left:0;width:var(--S);height:var(--S);cursor:pointer;border:0;padding:0;background:#222 center/cover;
  box-shadow:0 -1px 0 rgba(255,240,215,.35) inset, 0 18px 40px rgba(0,0,0,.6);transform-origin:50% 100%}
.cz-front::after{content:"";position:absolute;inset:0;background:var(--ph-wear) center/cover;mix-blend-mode:multiply;opacity:.42;pointer-events:none}
.cz-front:focus-visible{outline:3px solid #C99A45;outline-offset:3px}
/* a wrapped Dig blind record: brown paper at its real grain, folds, twine, the record's hint on a tag, a stamp */
.cz-front.blind{background:
    linear-gradient(112deg, rgba(0,0,0,0) 47%, rgba(255,236,200,.16) 48.6%, rgba(40,20,5,.22) 49.4%, rgba(0,0,0,0) 51%),
    linear-gradient(64deg, rgba(0,0,0,0) 62%, rgba(255,236,200,.12) 63.2%, rgba(40,20,5,.18) 63.9%, rgba(0,0,0,0) 65.5%),
    radial-gradient(ellipse 80% 70% at 45% 40%, rgba(255,226,180,.10), rgba(30,15,4,.28) 100%),
    var(--ph-kraft) 0 0/810px 320px}
.cz-front.blind::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,0) calc(62% - 3px), rgba(30,16,6,.35) calc(62% - 2px), #c9b48e calc(62% - 1px), #a8916a calc(62% + 2px), rgba(30,16,6,.35) calc(62% + 3px), rgba(0,0,0,0) calc(62% + 4px)),
    linear-gradient(0deg, rgba(0,0,0,0) calc(var(--tw, 30%) - 3px), rgba(30,16,6,.35) calc(var(--tw, 30%) - 2px), #c9b48e calc(var(--tw, 30%) - 1px), #a8916a calc(var(--tw, 30%) + 2px), rgba(30,16,6,.35) calc(var(--tw, 30%) + 3px), rgba(0,0,0,0) calc(var(--tw, 30%) + 4px))}
.cz-front.blind::after{opacity:.25}
.cz-hint{position:absolute;left:calc(62% - 2px);top:calc(var(--tw, 30%) + 14px);width:min(34%, 300px);padding:16px 14px 12px;transform:rotate(4deg);transform-origin:0 0;pointer-events:none;
  background:var(--ph-tag) center/cover;box-shadow:0 6px 12px rgba(0,0,0,.45);font:clamp(14px, 1.35vw, 21px)/1.25 'Mansalva', cursive;color:#2a1a0e;text-align:left}
.cz-hint::before{content:"";position:absolute;left:14px;top:-16px;width:2px;height:22px;background:#b39d76}
.cz-stamp{position:absolute;left:9%;top:calc(var(--tw, 30%) + 4%);padding:8px 14px 6px;border:3px solid rgba(160,40,25,.72);border-radius:4px;transform:rotate(-8deg);pointer-events:none;
  font:400 clamp(16px, 2vw, 30px)/1 'Alfa Slab One', serif;color:rgba(160,40,25,.72);letter-spacing:2px;mix-blend-mode:multiply;text-align:center}
.cz-stamp small{display:block;margin-top:4px;font:700 .45em/1 'Courier Prime', monospace;letter-spacing:3px}
.cz-stk{position:absolute;right:4%;top:5%;width:calc(var(--S) * .15);height:calc(var(--S) * .15);border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-align:center;background:linear-gradient(rgba(231,195,95,.55), rgba(231,195,95,.55)), var(--ph-sticker) center/cover;background-blend-mode:multiply;
  font:calc(var(--S) * .03)/0.95 'Mansalva', cursive;color:#8A2E18;transform:rotate(9deg);box-shadow:0 2px 4px rgba(0,0,0,.4);pointer-events:none}
.cz-wall{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none}
.cz-wall::before{content:"";position:absolute;left:0;right:0;top:-34px;height:34px;background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5))}
.cz-tag{position:absolute;left:50%;top:22%;transform:translateX(-50%) rotate(-1.2deg);background:var(--ph-tag) center/cover;padding:10px 22px 9px;
  font:700 clamp(12px, 1.35vw, 17px)/1.25 'Courier Prime', monospace;color:#2a1d12;text-align:center;box-shadow:0 3px 8px rgba(0,0,0,.45);max-width:80vw}
.cz-tag small{display:block;font-weight:400;opacity:.8}
.dz-lean{position:absolute;z-index:61;left:14px;bottom:calc(14px + env(safe-area-inset-bottom, 0px));cursor:pointer;border:0;border-radius:20px;padding:8px 14px 8px 12px;
  background:var(--ph-sheet) center/cover;color:#2a1d12;font:700 13px/1 'Courier Prime', monospace;box-shadow:0 3px 8px rgba(0,0,0,.45)}
.dz-lean:focus-visible{outline:2px solid #C99A45;outline-offset:2px}
html.dz-strip .dz-lean, html:not(.dz-strip) .dz-lean-pill{display:none}
/* on phones it joins the two counter pills as a small round magnifier, so the row still fits */
.counter-strip .dz-lean-pill{width:40px;min-width:40px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center}
.dz-lean-pill svg{width:20px;height:20px}
@media (prefers-reduced-motion: reduce){.cz, .dz-room{transition:none}}

/* 3. Close-up in vibe mode: the same turntable; the view moves in until the deck fills the screen */
html.vibe.vibe-close #needleStage{animation:none}
.ph-cu-btn{display:none}
html.vibe.vibe-awake .ph-cu-btn, html.vibe.vibe-reveal .ph-cu-btn{display:inline-flex;align-items:center}
.ph-zoomback{position:absolute;left:max(18px, env(safe-area-inset-left));top:calc(18px + env(safe-area-inset-top, 0px));z-index:71;display:none;align-items:center;gap:8px;
  min-height:40px;padding:0 16px 0 12px;border-radius:20px;border:1.5px solid rgba(244,236,214,.55);background:rgba(20,20,28,.55);color:#F4ECD6;font:700 14px 'Courier Prime', monospace;
  cursor:pointer;opacity:.55;transition:opacity .4s}
html.vibe.vibe-close .ph-zoomback{display:inline-flex}
html.vibe.vibe-close.vibe-awake .ph-zoomback, .ph-zoomback:hover, .ph-zoomback:focus-visible{opacity:1}
.ph-zoomback:focus-visible{outline:2px solid #C99A45;outline-offset:2px}
/* the player sits in a brushed, warm-silver faceplate (like the deck), screwed to the counter, with an engraved plate and a pilot light.
   Spotify's player itself is untouched: only what's around it changes. */
html.ph .player-slot{width:min(440px, 100%);height:auto;padding:9px 10px 25px;border-radius:6px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,.035) 1px 2px, rgba(255,255,255,0) 2px 4px),
    linear-gradient(180deg, #d6d0c4 0%, #b5afa3 18%, #a39d91 55%, #bdb7ab 100%);
  box-shadow:0 12px 24px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 0 0 1px #5a554c}
html.ph .player-slot .tape{display:none}
/* Spotify's compact player (80 px: cover, title, play, progress), in every mode */
html.ph .player-slot #embedHost, html.ph .player-slot iframe{height:80px !important}
html.ph .player-slot #embedHost, html.ph .player-slot .app-card, html.ph .player-slot .pending-note{border-radius:5px;
  box-shadow:0 0 0 1.5px #2a2724, 0 0 0 2.5px rgba(255,255,255,.35), inset 0 2px 5px rgba(0,0,0,.6)}
html.ph .player-slot #embedHost{background:#121212}
.ph-screw{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 32%, #f1ece2, #a8a296 55%, #6c675e 100%);box-shadow:0 1px 1px rgba(0,0,0,.4), inset 0 -1px 1px rgba(0,0,0,.25)}
.ph-screw::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1.2px;margin-top:-.6px;background:#5e5950;transform:rotate(var(--r, 30deg));border-radius:1px}
.ph-screw.tl{left:2px;top:2px;--r:24deg}.ph-screw.tr{right:2px;top:2px;--r:-38deg}.ph-screw.bl{left:2px;bottom:2px;--r:62deg}.ph-screw.br{right:2px;bottom:2px;--r:-12deg}
/* the bottom strip: an engraved plate in the middle, the pilot light at the right */
.ph-plate{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);padding:1px 10px 0;border-radius:2px;pointer-events:none;
  background:linear-gradient(#9f998d, #b9b3a7);box-shadow:inset 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.45);
  font:700 8px/1.5 'Courier Prime', monospace;letter-spacing:3px;color:#3b3731;text-shadow:0 1px 0 rgba(255,255,255,.45);white-space:nowrap}
.ph-pilot{position:absolute;right:16px;bottom:9px;width:6px;height:6px;border-radius:50%;pointer-events:none;background:#5a3a12;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);transition:background .5s, box-shadow .5s}
html.music-on .ph-pilot{background:radial-gradient(circle at 40% 35%, #ffe4a6, #f0a020 55%, #8a5208);box-shadow:0 0 5px #f5a623, 0 0 12px rgba(245,166,35,.45)}
/* the turntable view's bottom row: the caption card and the player, bottoms lined up, with room between them */
/* on computers the card goes to the far left and the player to the right, so the turntable stays clear between them */
html.ph:not(.vibe) #needleView .nv-bottom{gap:56px;align-items:flex-end;justify-content:space-between}
html.ph:not(.vibe) #needleView .nv-caption{width:330px;margin-bottom:-4px}
/* vibe mode: the same faceplate, the compact player inside it */
/* on computers it sits bottom left, on the same line as the vibe controls bottom right, clear of the turntable */
html.ph.vibe #needleView .player-slot{left:28px;bottom:max(24px, env(safe-area-inset-bottom));width:min(380px, max(300px, calc(100vw - 480px)));height:auto;transform:translateY(16px);transform-origin:0 100%}
html.ph.vibe.vibe-reveal #needleView .player-slot.open{transform:none}
/* stacked under the caption card (tablets, phones): the same width as the card */
@media (max-width: 900px), (max-aspect-ratio: 1/1){
  html.ph:not(.vibe) #needleView .player-slot{width:auto}
  html.ph:not(.vibe) #needleView .nv-bottom{gap:22px;align-items:stretch}
  html.ph:not(.vibe) #needleView .nv-caption{width:auto;margin-bottom:0}
}
@media (max-width: 700px){
  html.ph .player-slot{width:100%;padding:8px 8px 23px}
  html.ph.vibe #needleView .player-slot{left:14px;right:14px;width:auto;bottom:calc(max(24px, env(safe-area-inset-bottom)) + 64px)}
}
/* ?sim=1 shows the time-and-weather panel */
html:not(.ph-simon) .ph-sim{display:none !important}