/* ==========================================================================
   Personal side: the diary shelf (Writings), the camera shelf (Photographs) and the header boombox.
   Built by assets/personal.js and assets/boombox.js. Same pattern as the Work devices (see "Devices" in styles.css):
   a flat HTML copy sits exactly over a pixel object in the park scene, then grows into something you can use.
   Colours inside the diary pages and the camera are deliberately independent of the site theme (they are objects, not UI).
   ========================================================================== */

/* ---------- hero cue under the Writings / Photographs headline ---------- */
.hero-cue{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--fg)}
.hero-cue .ic{width:1rem;height:1rem;color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.hero-cue .ic{animation:cueBob 1.8s ease-in-out infinite}}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(.25rem)}}
.seq:not(.seq-live) .hero-cue{display:none}

/* ---------- the overlay ---------- */
.ps{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.seq-live .ps{display:block}
.ps-dim{position:absolute;inset:0;display:none;opacity:0;background:radial-gradient(120% 90% at 50% 45%,rgba(8,10,20,.5),rgba(4,5,12,.9))}
.ps-shelf{position:absolute;left:0;top:0;transform-origin:0 0;visibility:hidden;will-change:transform,opacity}
.ps-sheet{position:absolute;inset:0;border-radius:18px}
.ps-sb{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* invisible copy of the layout: the slots tell personal.js where each tile belongs */
.ps-grid{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;display:grid;justify-items:center;align-content:start;grid-template-columns:repeat(3,1fr)}
.ps-photos .ps-grid{grid-template-columns:repeat(5,1fr)}
.seq-narrow .ps-photos .ps-grid{grid-template-columns:repeat(2,1fr)}
.ps-slot{flex:none}

.ps-cap{position:absolute;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 12px;border-radius:999px;opacity:0;white-space:nowrap;
  background:rgba(10,14,28,.62);border:1px solid rgba(255,255,255,.18);color:#e9eefc;font-size:13px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ps-cap::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.ps.is-open .ps-cap{opacity:0!important;transition:opacity .2s}
.ps-cap span{font:600 11.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#ffb596}

/* ---------- one tile: a diary or a camera ---------- */
.pit{position:absolute;left:0;top:0;visibility:hidden;color:#f6efe3;-webkit-tap-highlight-color:transparent}
.pit.is-front{z-index:20;pointer-events:auto}
.pit-open{position:absolute;inset:-6px -6px -2px;z-index:6;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer;pointer-events:none}
.ps.is-live .pit-open{pointer-events:auto}
.pit.is-front .pit-open{pointer-events:none}
.pit-open:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pit-lab{position:absolute;left:-10%;right:-10%;top:100%;margin-top:12px;text-align:center;line-height:1.25;pointer-events:none}
.pit-lab b{display:block;font:650 1.0625rem/1.2 var(--serif);letter-spacing:-.01em}
.pit-lab span{display:block;margin-top:3px;font:500 .75rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:rgba(246,239,227,.68)}
.pit canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
/* the lift on hover / on the ghost pointer's visit is the independent `translate` property, so it never fights the scroll tweens on `transform` */
.bk-3d,.cm-3d{translate:0 0;transition:translate .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.pit.is-hint .bk-3d,.pit.is-hint .cm-3d{translate:0 -8px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
@media (hover:hover){.ps.is-live .pit:not(.is-front):hover .bk-3d,.ps.is-live .pit:not(.is-front):hover .cm-3d{translate:0 -8px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}}
.pit.is-front .bk-3d,.pit.is-front .cm-3d{translate:0 0;filter:none}

/* ---------- diary ---------- */
.bk-3d{position:absolute;inset:0;perspective:1800px;transform-style:preserve-3d}
.bk-cover{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform,opacity}
.cf{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:2px 6px 6px 2px;overflow:hidden}
.cf-f canvas{border-radius:inherit}
.cf-b{transform:rotateY(180deg);background:linear-gradient(90deg,var(--bkd),var(--bk) 14%,var(--bk));box-shadow:inset 0 0 0 3px var(--bkt)}
.bk-full{position:absolute;inset:0;opacity:0;will-change:opacity}
.bk-frame{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:4px 14px 14px 4px;overflow:hidden;background:#f4ead6;color:#2a2118;
  box-shadow:0 0 0 clamp(5px,1.1vw,9px) var(--bk),0 0 0 clamp(6px,1.2vw,10px) var(--bkd),0 40px 80px -24px rgba(0,0,0,.7)}
.bk-frame::before{content:"";position:absolute;left:0;top:0;bottom:0;width:clamp(14px,2.4vw,24px);z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(60,38,14,.34),rgba(60,38,14,0))}
.bk-bar{position:relative;z-index:5;flex:none;display:flex;align-items:center;gap:.75rem;padding:.625rem .875rem .625rem clamp(1.25rem,3vw,2rem);border-bottom:1px solid rgba(60,38,14,.16);background:linear-gradient(#efe2c8,#f4ead6)}
.bk-ttl{margin-right:auto;font:650 .9375rem/1 var(--serif);letter-spacing:-.01em;color:#2a2118}
.bk-pos{font:600 .75rem var(--mono);letter-spacing:.06em;color:#6b5a44}
.bk-x,.cm-x{position:relative;flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid rgba(60,38,14,.28);border-radius:50%;background:#fbf6ea;color:#2a2118;cursor:pointer;transition:transform .2s,background .2s}
.bk-x::after,.cm-x::after{content:"";position:absolute;inset:-.4rem}
.bk-x i,.cm-x i{position:relative;width:.875rem;height:.875rem;display:block}
.bk-x i::before,.bk-x i::after,.cm-x i::before,.cm-x i::after{content:"";position:absolute;left:50%;top:50%;width:1rem;height:2px;margin:-1px 0 0 -.5rem;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.bk-x i::after,.cm-x i::after{transform:rotate(-45deg)}
.bk-x:hover,.cm-x:hover{background:#fff}
.bk-x:active,.cm-x:active{transform:scale(.92)}
.bk-x:focus-visible,.cm-x:focus-visible,.bk-btn:focus-visible,.pg-in:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bk-stage{position:relative;flex:1;min-height:0;perspective:2000px;overflow:hidden;background:#f4ead6}
.pg{position:absolute;inset:0;transform-origin:0 50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#f4ead6;will-change:transform,opacity}
.pg-b{opacity:0}
.pg-in{position:absolute;inset:0 0 2rem 0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.25rem,3vw,2rem) clamp(1.25rem,4vw,2.5rem) 1rem clamp(1.75rem,4.5vw,3rem);
  background-image:repeating-linear-gradient(transparent 0 1.6em,rgba(110,80,40,.07) 1.6em calc(1.6em + 1px))}
.pg-meta{display:flex;gap:.75rem;margin-bottom:.875rem;font:600 .6875rem var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#8a6f4c}
.pg-meta span+span::before{content:"";display:inline-block;width:.3125rem;height:.3125rem;margin-right:.75rem;vertical-align:middle;border-radius:50%;background:var(--accent)}
.pg-h{margin:0 0 1rem;font:700 clamp(1.375rem,3.2vw,2rem)/1.15 var(--serif);letter-spacing:-.02em;color:#1d150d}
.pg-verse{font:400 clamp(1rem,1.9vw,1.1875rem)/1.75 var(--serif);color:#2a2118;white-space:normal}
.pg-verse p{margin:0}
.pg-verse .gap{height:1.1em}
.pg-in[lang="te"] .pg-verse,.pg-in[lang="hi"] .pg-verse{line-height:1.9}
.pg-fo{position:absolute;left:0;right:0;bottom:.5rem;text-align:center;font:600 .75rem var(--mono);color:#8a6f4c;pointer-events:none}
.pg-sh{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(40,24,6,.55),rgba(40,24,6,0) 70%)}
.bk-nav{position:relative;z-index:5;flex:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.625rem .875rem .625rem clamp(1.25rem,3vw,2rem);border-top:1px solid rgba(60,38,14,.16);background:linear-gradient(#f4ead6,#efe2c8)}
.bk-hint{font:500 .6875rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a6f4c}
.bk-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.125rem;border:1px solid rgba(60,38,14,.3);border-radius:999px;background:#fbf6ea;color:#2a2118;font:600 .9375rem var(--sans);cursor:pointer;transition:transform .15s,background .2s,opacity .2s}
.bk-btn .ic{width:1.0625rem;height:1.0625rem}
.bk-btn:hover:not(:disabled){background:#fff}
.bk-btn:active:not(:disabled){transform:scale(.95)}
.bk-btn:disabled{opacity:.35;cursor:default}
.bk-btn[data-next]{background:var(--bk);border-color:var(--bkd);color:#fff}
.bk-btn[data-next]:hover:not(:disabled){background:var(--bkl)}
@media (max-width:40rem){.bk-hint{display:none}.bk-btn{padding:0 1rem}}

/* ---------- camera ---------- */
.cm-3d{position:absolute;inset:0;perspective:1600px;transform:translateY(var(--lift,0))}
.cm-flip{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cm-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cm-bk{transform:rotateY(180deg)}
.cm-lcd{position:absolute;overflow:hidden;background:#05070a;container-type:size}
.cm-scr{position:absolute;inset:0;opacity:0}
.cm-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;will-change:transform,opacity,filter;user-select:none;-webkit-user-drag:none}
.cm-grid{position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:linear-gradient(90deg,transparent calc(33.33% - .5px),#fff calc(33.33% - .5px) calc(33.33% + .5px),transparent calc(33.33% + .5px) calc(66.66% - .5px),#fff calc(66.66% - .5px) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(transparent calc(33.33% - .5px),#fff calc(33.33% - .5px) calc(33.33% + .5px),transparent calc(33.33% + .5px) calc(66.66% - .5px),#fff calc(66.66% - .5px) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.cm-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cm-osd{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:.5em;padding:1.6em .6em .4em;font:600 clamp(7px,4.4cqw,12px)/1 var(--mono);letter-spacing:.06em;color:#fff;text-transform:uppercase;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.65));text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cm-g{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cm-b{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cm-b::after{content:"";position:absolute;inset:-.5rem -.2rem}
.cm-b i{position:absolute;inset:-2px;border-radius:2px;transition:background .15s,box-shadow .15s}
.cm-b:hover i{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.cm-b.dn i{background:rgba(0,0,0,.4)}
.cm-b:disabled{cursor:default;opacity:.4}
.cm-b:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cm-x{position:absolute;left:50%;top:100%;margin:1rem 0 0 -1.125rem;width:2.5rem;height:2.5rem;opacity:0;pointer-events:none;border-color:rgba(255,255,255,.4);background:rgba(251,246,234,.96)}

/* ---------- reduced transparency / contrast ---------- */
@media (prefers-reduced-transparency:reduce){.ps-sb{-webkit-backdrop-filter:none;backdrop-filter:none}.ps-cap{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0a0e1c}}
@media (prefers-contrast:more){.ps-cap{background:#0a0e1c;border-color:#fff}.pit-lab span{color:#fff}}
@media (prefers-reduced-motion:reduce){.bk-3d,.cm-3d{transition:none}}

/* ==========================================================================
   Boombox (header). The canvas is 72x34 pixels drawn by boombox.js; the HTML buttons sit exactly over the pixel buttons.
   ========================================================================== */
.bb{--k:2;position:relative;flex:none;display:flex;align-items:center;gap:.625rem;margin-left:.5rem;margin-right:auto}
.bb[hidden]{display:none}
body.has-bb .hdr-row .brand{margin-right:0}
.bb-box{position:relative;width:calc(72px*var(--k));height:calc(34px*var(--k));flex:none;margin-top:2px}
#bbCv{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.bb-b{position:absolute;top:calc(24px*var(--k));width:calc(6px*var(--k));height:calc(5px*var(--k));padding:0;border:0;border-radius:1px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bb-prev{left:calc(27px*var(--k))}.bb-play{left:calc(34px*var(--k))}.bb-next{left:calc(41px*var(--k))}
.bb-b::after{content:"";position:absolute;inset:-.4rem -1px}
.bb-b:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 80%,#fff)}
.bb-b:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bb-np{position:absolute;left:0;top:calc(100% - 2px);z-index:3;max-width:min(20rem,70vw);margin:0;padding:.3125rem .75rem;border-radius:var(--pill);border:.0625rem solid var(--line-2);
  background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);color:var(--fg);font:500 .8125rem/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(-.25rem);pointer-events:none;transition:opacity .25s,transform .25s}
.bb.np-on .bb-np,.bb[data-state="blocked"] .bb-np,.bb[data-state="error"] .bb-np,.bb:hover .bb-np:not(:empty),.bb:focus-within .bb-np:not(:empty){opacity:1;transform:none}
.bb[data-state="loading"] .bb-np:empty{display:none}
@media (prefers-reduced-motion:no-preference){
  .bb[data-state="blocked"] .bb-box{animation:bbNudge 2.4s ease-in-out infinite}
}
@keyframes bbNudge{0%,86%,100%{transform:none}90%{transform:translateY(-3px)}94%{transform:translateY(0)}97%{transform:translateY(-1.5px)}}

/* the cassette: a pixel tape that is plainly a button */
.bb-tape{position:relative;z-index:4;flex:none;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.1875rem .875rem .1875rem .375rem;border-radius:var(--pill);
  border:.09375rem dashed color-mix(in srgb,var(--fg) 45%,transparent);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);color:var(--fg);
  transition:border-color .2s,background .2s,translate .25s cubic-bezier(.2,.8,.2,1)}
.bb-tape canvas{display:block;width:calc(26px*var(--k));height:calc(18px*var(--k));image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.bb-tl{display:inline-flex;align-items:center;gap:.3125rem;font:600 .8125rem/1.1 var(--sans);white-space:nowrap}
.bb-tip{position:absolute;right:0;top:calc(100% + .375rem);z-index:5;padding:.3125rem .75rem;border-radius:var(--pill);background:var(--blk);color:var(--on-blk);font:500 .8125rem/1.3 var(--sans);white-space:nowrap;
  opacity:0;transform:translateY(-.25rem);pointer-events:none;transition:opacity .2s,transform .2s}
.bb.tape-on .bb-tip{opacity:1;transform:none}
/* the tooltip owns the space under the header while the cassette is hovered: the now-playing pill steps aside so the two never overlap */
.bb.tape-on .bb-np{opacity:0!important;transform:translateY(-.25rem)!important}
.bb-tape:hover,.bb-tape:focus-visible{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--bg) 94%,transparent);translate:0 -1px}
.bb-tape:active{translate:0 1px;transition-duration:.08s}
.bb-tape:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bb-yt{position:absolute;left:-400px;top:0;width:200px;height:200px;overflow:hidden;opacity:.01;pointer-events:none}

/* ---------- boombox controls ---------- */
.bb-shuffle{top:calc(15px*var(--k));left:calc(59px*var(--k))}
.bb-tip{translate:var(--tip-dx,0) 0}
.bb:has(.bb-volume.is-show) .bb-np{opacity:0!important}

/* volume: a speaker button (mute) and a slim slider. The thumb is a chunky pixel block to match the boombox. */
.bb-volume{position:relative;flex:none;display:flex;align-items:center;gap:.125rem;height:2.5rem}
.bb-vol-ic{display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:var(--pill);background:transparent;color:var(--fg);cursor:pointer;transition:background .15s,transform .12s;-webkit-tap-highlight-color:transparent}
.bb-vol-ic .ic{width:1.25rem;height:1.25rem}
.bb-vol-ic:hover{background:color-mix(in srgb,var(--fg) 9%,transparent)}
.bb-vol-ic:active{transform:scale(.9)}
.bb-vol-ic:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.bb-volume.is-mute .bb-vol-ic{color:#e0573c}
.bb-vol-range{--fill:80%;appearance:none;-webkit-appearance:none;width:5.5rem;height:2.25rem;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.bb-vol-range::-webkit-slider-runnable-track{height:.5rem;border:2px solid #171c27;border-radius:2px;background:linear-gradient(90deg,#e7a84e var(--fill),color-mix(in srgb,var(--fg) 14%,transparent) var(--fill))}
.bb-vol-range::-moz-range-track{height:.5rem;border:2px solid #171c27;border-radius:2px;background:color-mix(in srgb,var(--fg) 14%,transparent)}
.bb-vol-range::-moz-range-progress{height:.5rem;border-radius:0;background:#e7a84e}
.bb-vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:.875rem;height:1.375rem;margin-top:-.5625rem;border:3px solid #171c27;border-radius:2px;background:#f5e8c8;box-shadow:inset 0 0 0 2px #d7ceb2,2px 2px 0 #171c27;transition:transform .12s}
.bb-vol-range::-moz-range-thumb{box-sizing:border-box;width:.875rem;height:1.375rem;border:3px solid #171c27;border-radius:2px;background:#f5e8c8;box-shadow:inset 0 0 0 2px #d7ceb2,2px 2px 0 #171c27}
.bb-volume.is-drag .bb-vol-range::-webkit-slider-thumb{transform:translate(2px,2px);box-shadow:inset 0 0 0 2px #d7ceb2,0 0 0 #171c27}
.bb-vol-range:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
.bb-volume-value{position:absolute;right:0;top:calc(100% + .125rem);z-index:6;transform:translateY(-.25rem);padding:.1875rem .5rem;border-radius:var(--pill);background:var(--blk);color:var(--on-blk);font:700 .6875rem/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.bb-volume:hover .bb-volume-value,.bb-volume:focus-within .bb-volume-value,.bb-volume.is-show .bb-volume-value{opacity:1;transform:none}

/* zen button */
.bb-zen{position:relative;z-index:4;flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;min-width:2.75rem;padding:0 .875rem;justify-content:center;border:.0625rem solid var(--line-2);border-radius:var(--pill);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);color:var(--fg);font:600 .8125rem/1 var(--sans);white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.bb-zen .ic{width:1.0625rem;height:1.0625rem}
.bb-zen:hover{border-color:var(--fg)}
.bb-zen:active{transform:scale(.95)}
.bb-zen:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bb-zen-tip{position:absolute;top:calc(100% + .375rem);right:0;z-index:80;translate:var(--tip-dx,0) 0;width:max-content;max-width:min(17rem,calc(100vw - 1.5rem));padding:.5rem .875rem;border-radius:.875rem;background:var(--blk);color:var(--on-blk);font:500 .8125rem/1.4 var(--sans);white-space:normal;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(-.25rem);pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s}
.bb-zen:hover .bb-zen-tip,.bb-zen:focus-visible .bb-zen-tip{opacity:1;visibility:visible;transform:none}

/* ---------- header fit: the cluster gives way in steps so the nav, the Work / Personal switch and the menu button always have room ---------- */
body.has-bb .hdr-row{gap:1rem}
body.has-bb .brand-name,body.has-bb .nav a{white-space:nowrap}
@media (max-width:90rem){.bb-zen-label{display:none}.bb-zen{padding:0}}
@media (max-width:88rem){body.has-bb .brand-name{display:none}body.landing.has-bb .brand{padding:.25rem}}
@media (max-width:80rem){.bb-tl{display:none}.bb-tape{padding:.1875rem .375rem}}
@media (max-width:68.75rem){.bb{--k:1.5;gap:.5rem}.bb-vol-range{width:4.5rem}body.has-bb .nav a{padding:0 .625rem}.bb-tape canvas{width:calc(26px*1.5);height:calc(18px*1.5)}}
@media (max-width:62rem){.bb-vol-range{width:3.25rem}.bb-vol-ic{width:2rem}.bb-volume{gap:0}}
@media (max-width:58rem){.bb-volume{display:none}}
@media (max-width:53.75rem){.bb{--k:2;margin-left:.25rem}.bb-tape canvas{width:calc(26px*var(--k));height:calc(18px*var(--k))}}
@media (max-width:30rem){.bb{--k:1.5;gap:.375rem}body.has-bb .hdr-row{gap:.5rem}.bb-tape{padding:.125rem .25rem;min-width:2.75rem;justify-content:center}.bb-tape canvas{width:calc(26px*var(--k));height:calc(18px*var(--k))}}
@media (max-width:26.25rem){
  body.has-bb .hdr-tools{gap:.25rem}
  body.has-bb .hdr-tools .icon-btn{width:2.5rem;height:2.5rem}
  .bb-tape,.bb-zen{min-width:2.5rem;min-height:2.5rem}
  .bb-tape{padding:.125rem}
  body.has-bb .brand-mark{width:2rem;height:2rem}
}
@media (max-width:23.75rem){.bb{--k:1.25}}
@media (max-width:21.25rem){.bb{--k:1}body.has-bb .brand{display:none}}
.bb-tip{right:0;left:auto}
@media (max-width:53.75rem){.bb-tip{right:auto;left:0}}

/* ==========================================================================
   Zen mode: a full-screen listening room. Pixel display, cassette deck, big controls; the sound comes from the hidden player.
   ========================================================================== */
:root:has(body.zen-mode-open){overflow:hidden;scrollbar-gutter:auto}
.bb-zen-mode{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:radial-gradient(ellipse at 50% 35%,#26251f,#111 58%,#080808);color:#f5e8c8;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;overflow-y:auto;overscroll-behavior:contain;text-align:center}
.bb-zen-mode.is-open{opacity:1;visibility:visible;pointer-events:auto}
.bb-zen-mode.zen-anim{transition:none}
.bb-zen-close{position:absolute;right:clamp(1rem,3vw,2rem);top:clamp(1rem,2.5vh,1.5rem);z-index:2;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1rem 0 .75rem;border:1px solid #5b5545;border-radius:var(--pill);background:#171713;color:#f5e8c8;font:600 .875rem/1 var(--sans);cursor:pointer;transition:background .2s,transform .15s}
.bb-zen-close .ic{width:1rem;height:1rem}
.bb-zen-close:hover{background:#26251f}.bb-zen-close:active{transform:scale(.96)}
.bb-zen-close:focus-visible,.bb-zen-controls>button:focus-visible,.bb-zen-volume input:focus-visible{outline:3px solid #e7a84e;outline-offset:3px}
.bb-zen-content{width:min(100%,56rem);display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,3vh,1.75rem);padding:3.5rem 0 1rem;margin:auto}
.bb-zen-eyebrow{margin:0;font:700 .72rem var(--mono);letter-spacing:.2em;color:#e7a84e}
.bb-zen-content h2{margin:0;font:600 clamp(2rem,5vw,4rem)/1.05 var(--serif);letter-spacing:-.03em;color:#f5e8c8}
.bb-pixel-display{width:min(100%,40rem);min-height:4.5rem;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1rem;background:#101b16;border:4px solid #5d604b;box-shadow:inset 0 0 0 3px #252e24,0 8px 0 #070807;color:#a7f58a;font:700 clamp(.7rem,2vw,1.15rem)/1.5 var(--mono);letter-spacing:.08em;text-shadow:0 0 9px #6bff9b;overflow-wrap:anywhere}
.bb-pixel-led{flex:none;width:.6rem;height:.6rem;background:#8ff17b;box-shadow:0 0 8px #8ff17b;animation:zenLed 1.6s steps(2,end) infinite}
.bb-zen-deck{width:min(100%,36rem);display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,3vw,2rem);padding:clamp(1rem,3vw,2rem);border:4px solid #3e3b32;border-radius:1rem;background:linear-gradient(145deg,#a8a28d,#5d5a4d 55%,#38372f);box-shadow:inset 0 3px 0 #d6ceb5,0 14px 0 #090909,0 25px 40px #0008}
.bb-zen-speaker{width:clamp(4rem,15vw,8rem);aspect-ratio:1;border-radius:50%;border:5px solid #25251f;background:repeating-radial-gradient(circle,#33342d 0 3px,#20211d 4px 6px);box-shadow:inset 0 0 0 5px #716c5a;flex:none}
.bb-zen-cassette{position:relative;width:min(38%,12rem);aspect-ratio:1.55;border:4px solid #28271f;border-radius:.35rem;background:linear-gradient(160deg,#d6bd84,#a58c59);box-shadow:inset 0 0 0 3px #e8d4a6,0 6px 0 #333126;display:flex;align-items:center;justify-content:space-evenly;transform-style:preserve-3d}
.bb-zen-reel{width:23%;aspect-ratio:1;border-radius:50%;border:4px solid #423d2c;background:repeating-conic-gradient(#574d37 0 12deg,#d7c28f 12deg 24deg)}
.bb-zen-tape-label{position:absolute;bottom:10%;left:18%;right:18%;padding:.2rem;background:#e8d9b3;color:#302a1d;font:800 .65rem var(--mono)}
.bb-zen-cassette.is-spinning .bb-zen-reel{animation:zenReel .7s linear infinite}
.bb-zen-cassette.is-flipping{animation:zenFlip .65s ease-in-out}
.bb-zen-controls{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,1.25rem);flex-wrap:wrap}
.bb-zen-controls>button{display:grid;place-items:center;width:3.25rem;height:3.25rem;padding:0;border:1px solid #625b48;border-radius:50%;background:#1b1a16;color:#f5e8c8;cursor:pointer;transition:background .2s,transform .15s}
.bb-zen-controls>button:active{transform:scale(.92)}
.bb-zen-controls>button .ic{width:1.25rem;height:1.25rem}
.bb-zen-controls>#bbZenPlay{width:4rem;height:4rem;background:#e7a84e;border-color:#e7a84e;color:#17140e}
.bb-zen-controls>#bbZenPlay .ic{width:1.5rem;height:1.5rem}
.bb-zen-controls>.bb-zen-shuffle{display:inline-flex;gap:.5rem;width:auto;min-width:5.6rem;height:2.8rem;padding:0 .875rem;border-radius:2px;font:700 .7rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.bb-zen-controls>.bb-zen-shuffle .ic{width:1rem;height:1rem}
.bb-zen-controls>.bb-zen-shuffle[aria-pressed="true"]{background:#e7a84e;color:#17140e;border-color:#e7a84e;box-shadow:inset 0 0 0 2px #17140e}
.bb-zen-volume{display:flex;align-items:center;gap:.65rem;color:#d8c9a7;font:700 .65rem var(--mono);letter-spacing:.06em}
.bb-zen-volume input{--fill:80%;appearance:none;-webkit-appearance:none;width:clamp(6rem,15vw,10rem);height:1.5rem;margin:0;background:transparent;cursor:pointer}
.bb-zen-volume input::-webkit-slider-runnable-track{height:.375rem;border-radius:99px;background:linear-gradient(90deg,#e7a84e var(--fill),#3d392d var(--fill))}
.bb-zen-volume input::-moz-range-track{height:.375rem;border-radius:99px;background:#3d392d}
.bb-zen-volume input::-moz-range-progress{height:.375rem;border-radius:99px;background:#e7a84e}
.bb-zen-volume input::-webkit-slider-thumb{-webkit-appearance:none;width:1.125rem;height:1.125rem;margin-top:-.375rem;border-radius:50%;border:2px solid #17140e;background:#f5e8c8}
.bb-zen-volume input::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:50%;border:2px solid #17140e;background:#f5e8c8}
.bb-zen-note{margin:0;max-width:38rem;color:#b7ad96;font:.75rem/1.6 var(--sans)}
@keyframes zenLed{50%{opacity:.35}}@keyframes zenReel{to{transform:rotate(360deg)}}@keyframes zenFlip{0%{transform:rotateY(0)}45%{transform:rotateY(90deg) translateY(-1rem)}100%{transform:rotateY(360deg)}}
@media (max-width:48rem){.bb-zen-deck{gap:.5rem;padding:.75rem}.bb-zen-speaker{width:25vw;max-width:6rem}.bb-zen-controls>button{width:2.8rem;height:2.8rem}.bb-zen-controls>#bbZenPlay{width:3.5rem;height:3.5rem}.bb-zen-volume{width:100%;justify-content:center}.bb-zen-close span{display:none}.bb-zen-close{padding:0 .75rem}}
@media (prefers-reduced-motion:reduce){.bb-pixel-led,.bb-zen-reel{animation:none!important}.bb-zen-mode{transition:opacity .2s}}
@media (prefers-reduced-transparency:reduce){.bb-zen,.bb-tape{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- full-screen photograph viewer (on <body>, so it sits above the header) ---------- */
.photo-lightbox{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,3vw,2rem);padding:clamp(1rem,4vw,3rem);background:rgba(8,9,12,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;touch-action:pan-y pinch-zoom}
.photo-lightbox.is-visible{visibility:visible;pointer-events:auto}
.photo-lightbox.is-visible:not(.lb-anim){opacity:1}
.photo-lightbox figure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:min(84vw,1100px);height:100%;margin:0;min-width:0}
.photo-lightbox figure img{display:block;max-width:100%;max-height:calc(100dvh - 7rem);width:auto;height:auto;object-fit:contain;box-shadow:0 1rem 4rem rgba(0,0,0,.4);border-radius:2px;user-select:none;-webkit-user-drag:none;will-change:transform,opacity}
.photo-lightbox figcaption{color:#f8f5ed;font:500 .8rem/1.4 var(--mono);letter-spacing:.04em}
.photo-lightbox-count{position:absolute;bottom:1.125rem;left:50%;transform:translateX(-50%);color:rgba(248,245,237,.8);font:500 .75rem/1.4 var(--mono);letter-spacing:.06em}
.photo-lightbox button{position:relative;display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(12,12,14,.5);color:#fff;cursor:pointer;transition:background .18s,transform .15s,opacity .2s}
.photo-lightbox button::after{content:"";position:absolute;inset:-.25rem}
.photo-lightbox button .ic{width:1.25rem;height:1.25rem}
.photo-lightbox button:hover:not(:disabled){background:rgba(255,255,255,.16)}
.photo-lightbox button:active:not(:disabled){transform:scale(.92)}
.photo-lightbox button:disabled{opacity:.28;cursor:default}
.photo-lightbox button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.photo-lightbox .photo-lightbox-x{position:absolute;top:1.125rem;right:1.125rem}
.cm-lcd[role=button]{cursor:zoom-in}
.cm-lcd:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.ps.has-lightbox .ps-dim{opacity:.12!important}
@media (max-width:37.5rem){
 .photo-lightbox{gap:.25rem;padding:3.5rem .25rem 2.75rem}
 .photo-lightbox figure{width:calc(100vw - 5.5rem)}
 .photo-lightbox figure img{max-height:calc(100dvh - 8rem)}
 .photo-lightbox button{width:2.5rem;height:2.5rem}
 .photo-lightbox .photo-lightbox-x{top:.625rem;right:.625rem}
}
@media (prefers-reduced-transparency:reduce){.photo-lightbox{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0a0b0e}}
@media (prefers-reduced-motion:reduce){.photo-lightbox{transition:none}}