/* =====================================================================
   Daisy: page-specific motion + reading-rhythm layer.
   Loaded after site.css via front matter (styles:). Everything here is
   scoped to this essay: the floating cutouts (drumhead, dog), the SVG tab
   sheets, the two listening figures, the clipping, the embers under the
   Close, and the typographic treatments that keep a 20 minute read from
   being the same shape twice. No rules: spacing and type do the breaking.
   Motion values are driven by /albums/daisy/daisy.js through CSS custom
   properties so the JS never touches layout, only transforms.
   ===================================================================== */

/* ========== chapter textures: one photograph per chapter, riding the viewport ==========
   site.css paints each chapter's image into an absolutely positioned ::before.
   A photo is far shorter than its chapter, so on a tall chapter its own edges
   showed as hard seams. Here those are switched off and each chapter carries a
   .tex rail instead: an absolute layer the full height of the chapter, with a
   sticky picture inside it that is one viewport tall and covers. The picture
   rides under the reader for exactly the length of its chapter (the rail is
   the sticky constraint, so it can never overhang the next chapter) and the
   next chapter's picture slides up over it with a soft top fade. ========== */
#thesis::before,#gaze::before,#noise::before,#weight::before,#meet::before,#close::before,#sessions::before,#paper::before,.bgspan::before{content:none!important}
#paper{position:relative;isolation:isolate}
.tex{position:absolute;inset:0;z-index:-1;pointer-events:none}
.tex .texi{position:sticky;top:0;height:100vh;height:100svh;
  background-repeat:no-repeat;background-size:cover;background-position:center;
  opacity:var(--img-op);filter:blur(4px) saturate(.8);will-change:opacity;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22vh,#000 100%);mask-image:linear-gradient(180deg,transparent,#000 22vh,#000 100%)}
#gaze .texi{background-image:var(--bg4);background-position:50% 30%}
#noise .texi{background-image:var(--bg1);background-position:22% 62%}
#weight .texi{background-image:var(--bg2);background-position:28% 42%}
#meet .texi{background-image:var(--bg3);background-position:60% 50%}
#paper .texi{background-image:var(--bg7);background-position:50% 50%}
#sessions .texi{background-image:var(--bg8);background-position:50% 32%}
/* the fox under the Close: opacity and blur driven from scroll by daisy.js (--fox-op, --fox-blur) */
#close .texi{background-image:var(--bg5);background-position:58% 62%;opacity:var(--fox-op,var(--img-op));filter:blur(var(--fox-blur,4px)) saturate(.8)}
@media (max-width:700px){
  #noise .texi{background-position:30% 60%}
  #weight .texi{background-position:40% 45%}
  #close .texi{background-position:60% 60%}
}
/* the interlude texture in site.css bleeds 20px past the viewport; keep it inside so nothing can scroll sideways */
.interlude::before{inset:-20px 0}
/* chapters that run straight into a dark opener don't need a hairline */
#thesis,#gaze,#noise,#weight,#meet,#theory{border-bottom:0}
/* the hairline along the glass edges is one more line the page does not need */
.glass::after{content:none}
#close{border-bottom:0;padding-bottom:0}

/* ========== generic drift: anything with data-drift moves by --dy ========== */
[data-drift]{will-change:transform;transform:translate3d(0,var(--dy,0px),0)}

/* ========== sticky "tracks": a full-height absolute rail inside a chapter
   with one sticky child. The child rides the viewport while its chapter is
   on screen; JS pushes progress in via custom properties. ========== */
.track{position:absolute;inset:0;z-index:0;pointer-events:none}
.track>.stick{will-change:transform,opacity,filter}
.noise-span{position:relative}
#noise{position:relative;z-index:1}
#noise .bigcompare{margin-top:44px}

/* ========== drumhead: rolls in from the left edge, passes behind the copy
   as a soft, far layer, then surfaces and rests just off the right edge of
   the prose column, its rim tucked a few px under the last words. ========== */
.disc-track>.stick{position:absolute;top:0;left:0;width:var(--disc-w);--disc-w:min(360px,28vw);
  transform:translate3d(var(--x,-120vw),var(--y,0px),0) rotate(var(--r,0deg)) scale(calc(1 - .16*var(--far,0)));
  opacity:calc(1 - .7*var(--far,0));
  filter:blur(calc(4px*var(--far,0))) drop-shadow(0 26px 44px rgba(0,0,0,calc(.42 - .3*var(--far,0))))}
.disc-track img{display:block;width:100%;height:auto;border-radius:50%}
@media (max-width:1100px){
  .disc-track{position:static;inset:auto;display:flex;justify-content:center;margin:40px 0 8px;overflow:hidden}
  .disc-track>.stick{position:static;--disc-w:min(340px,68vw);top:auto;transform:translate3d(calc(-40% * (1 - var(--in,0))),0,0) rotate(calc(-140deg * (1 - var(--in,0))));opacity:1;filter:drop-shadow(0 22px 40px rgba(0,0,0,.4))}
}

/* ========== dog: peeks up from the bottom-right of the viewport while the
   rescue story is on screen. ========== */
.dogtrack{position:relative}
.dog-track{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dog{position:absolute;width:min(380px,26vw);will-change:transform;filter:drop-shadow(0 18px 34px rgba(0,0,0,.42))}
.dog img{display:block;width:100%;height:auto}
.dog.a{right:clamp(8px,2.2vw,40px);bottom:-2px;transform-origin:50% 100%;
  transform:translate3d(0,calc(100% - 94% * var(--up,0)),0) rotate(calc(-9deg + 7deg*var(--up,0) + var(--tilt,0deg)))}
.dog.b{display:none;left:4px;bottom:-2px;transform-origin:50% 100%;width:min(300px,calc(50vw - 525px));
  transform:translate3d(0,calc(100% - 82% * var(--up,0)),0) rotate(calc(10deg - 8deg*var(--up,0) + var(--tilt,0deg))) scaleX(-1)}
@media (min-width:1300px){.dog.b{display:block}}
.dog.c{right:0;top:46vh;transform-origin:100% 50%;width:min(340px,24vw);
  transform:translate3d(calc(104% - 72% * var(--up,0)),0,0) rotate(calc(-24deg + 10deg*var(--up,0) + var(--tilt,0deg)))}
@media (max-width:900px){
  .dog-track{position:relative;inset:auto;height:min(46vh,320px);margin:18px 0 6px}
  .dog.b,.dog.c{display:none}
  .dog.a{right:auto;left:50%;margin-left:min(-39vw,-190px);width:min(78vw,380px)}
}

/* ========== tab sheets: rebuilt as SVG so they set in the site's ink, run
   edge to edge, and can be touched. Each measure is a layer: hover lifts
   it and warms it to the Noise color. ========== */
.tabsheet{position:relative;width:100vw;margin:8px 0 8px calc(50% - 50vw);padding:72px 0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tabsheet .move{position:relative;width:min(1360px,96vw);margin:0 auto;will-change:transform;
  transform:translate3d(calc(var(--p,0)*var(--sx,0)*var(--kx,1)),calc(var(--p,0)*var(--sy,0)),0)}
.tabsheet svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--fb)}
.tabsheet .live{position:relative;pointer-events:auto}
.tabsheet .live .hit{pointer-events:all}
@media (max-width:700px){.tabsheet{padding:40px 0}.tabsheet .move{width:1100px;margin-left:calc(50vw - 550px);--kx:2.6}}

.sheet .staff line{stroke:var(--rule-2);stroke-width:1.2}
.sheet .barline{stroke:var(--ink-3);stroke-width:1.6}
.sheet .barline.thick{stroke-width:5}
.sheet .fret{fill:var(--ink);font-weight:600;font-size:26px;text-anchor:middle;paint-order:stroke;stroke:var(--paper);stroke-width:12px;stroke-linejoin:round}
.sheet .fret.paren{font-weight:500;fill:var(--ink-2)}
.sheet .fret.x{font-weight:700}
.sheet .mnum{fill:var(--ink-3);font-size:19px;font-weight:500}
.sheet .restn{fill:var(--ink);font-size:27px;font-weight:600;text-anchor:middle}
.sheet .rest{stroke:var(--ink);stroke-width:5}
.sheet .rest.cap{stroke-width:2.4}
.sheet .stem{stroke:var(--ink-3);stroke-width:2.2}
.sheet .beam{stroke:var(--ink-3);stroke-width:5}
.sheet .flag{stroke:var(--ink-3);stroke-width:4}
.sheet .dot{fill:var(--ink-3)}
.sheet .tie{fill:none;stroke:var(--ink-2);stroke-width:2}
.sheet .accent{fill:none;stroke:var(--ink-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sheet .pm{fill:var(--ink-3);font-size:18px;letter-spacing:.06em}
.sheet .pmline{stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:8 7}
.sheet .vib{fill:none;stroke:var(--ink-3);stroke-width:2}
.sheet .annot{font-family:var(--fd);font-style:italic;font-size:31px;fill:var(--noise)}
.sheet .hit{fill:transparent;cursor:crosshair}
.sheet .hl{fill:var(--noise-soft);opacity:0;transition:opacity .35s ease}
.sheet .m{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sheet .m.on{transform:translateY(-4px)}
.sheet .m.on .fret{fill:var(--noise)}
.sheet .m.on .stem,.sheet .m.on .beam,.sheet .m.on .flag,.sheet .m.on .rest,.sheet .m.on .tie,.sheet .m.on .accent{stroke:var(--noise)}
.sheet .m.on .dot,.sheet .m.on .restn{fill:var(--noise)}
.sheet .m.on .mnum{fill:var(--noise)}
.sheet .m.on .hl{opacity:1}
.sheet .m.on .staff line{stroke:var(--noise-line)}
.sheet .fret,.sheet .stem,.sheet .beam,.sheet .flag,.sheet .rest,.sheet .tie,.sheet .accent,.sheet .dot,.sheet .restn,.sheet .mnum,.sheet .staff line{transition:fill .35s ease,stroke .35s ease}

/* ========== reading rhythm ==========
   No rules, no ornaments, no hairlines between blocks. The page breaks itself
   up with space, size and face: drop caps at chapter starts, display-face
   beats with air around them, italic fragments, and the margin pulls. The
   shared site.css draws hairlines under chapters, over figures and around
   pickers; they are switched off here and replaced with spacing. ========== */
.ch,.interlude{border-bottom:0}
.fig{border-top:0;padding-top:0;margin:34px 0 10px}
.fig .t{margin-bottom:14px}
.fig .t b{font-family:var(--fd);font-weight:400;font-style:italic;font-size:clamp(18px,1.6vw,22px);letter-spacing:0}
.figs{border-top:0;border-bottom:0}
.figs .f{border-right:0}
.sm{border-top:0}
.picker{border-top:0;border-bottom:0;gap:2px 6px;margin:0 0 16px}
.picker button{border-bottom:2px solid transparent;padding:8px 8px}
.tblwrap{border-top:0}
details{border-top:0;padding:18px 0}
details summary::after{content:none}
details+details{margin-top:6px}
.chhead{margin-bottom:46px}
/* chapter drop cap on the first paragraph of each chapter */
.dropcap>p:first-of-type::first-letter,p.dropcap::first-letter{font-family:var(--fd);font-weight:400;float:left;font-size:3.9em;line-height:.78;padding:.08em .1em 0 0;margin-bottom:-.08em;color:var(--ink)}
.ch.n .dropcap>p:first-of-type::first-letter,.ch.n p.dropcap::first-letter{color:var(--noise)}
.ch.w .dropcap>p:first-of-type::first-letter,.ch.w p.dropcap::first-letter{color:var(--weight)}
/* a single line that deserves air: set in the display face */
p.beat,.prose p.beat,p.prose.beat{font-family:var(--fd);font-style:italic;font-size:clamp(23px,2.3vw,33px);line-height:1.25;letter-spacing:-.005em;color:var(--ink);max-width:30ch;margin:1.1em 0 1em;font-weight:400}
.prose.big p.beat,p.prose.big.beat{font-size:clamp(26px,2.6vw,38px)}
/* margin pull: a line lifted from the paragraph beside it, drifting slower than the page. No rule beside it. */
.withpull{display:grid;grid-template-columns:minmax(0,62ch) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.pull{margin:.4em 0 0;padding:0;border:0;font-family:var(--fd);font-style:italic;font-size:clamp(21px,1.9vw,29px);line-height:1.3;color:var(--ink-2);max-width:20ch;text-wrap:balance}
.pull p{margin:0}
.pull.up{padding-top:16px}
.pull.n{color:var(--noise);font-size:clamp(26px,2.4vw,38px);max-width:14ch;padding-top:26px}
@media (max-width:900px){.withpull{grid-template-columns:1fr}.pull{display:none}}

/* the two pillars, one at a time.
   The stage pins a full viewport while a few screens of scroll pass under it.
   daisy.js hands each pillar three values -- --o (opacity), --y (drift) and
   --b (blur) -- from one continuous timeline that starts before the stage
   pins, so the Noise fades up as it rises into frame rather than appearing out
   of blank paper, hands over to the Weight in a single move, and the Weight
   then rides out of the top with the page instead of blinking off in place.
   No box, no rules: the name in its colour and the words under it, on paper. */
.pillstage{position:relative;height:210vh;margin:8px 0 0}
.pstage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.pstage .pillar{grid-area:1/1;width:min(62ch,100%);padding:0;background:transparent;border:0;
  opacity:var(--o,0);
  transform:translate3d(0,var(--y,30px),0);
  filter:blur(var(--b,3px));
  will-change:opacity,transform,filter;pointer-events:none}
.pstage .pillar .pn{font-size:clamp(44px,7vw,96px);line-height:.95;letter-spacing:-.015em;
  font-variation-settings:"opsz" 96;margin-bottom:22px;opacity:1}
.pstage .pillar.n .pn{color:var(--noise)} .pstage .pillar.w .pn{color:var(--weight)}
.pstage .pillar p{font-size:clamp(17px,1.45vw,21px);line-height:1.55;color:var(--ink);max-width:56ch;margin:0}
@media (max-width:700px){.pillstage{height:195vh}.pstage .pillar p{font-size:16.5px}
  .pstage .pillar .pn{margin-bottom:16px}}
/* a short viewport can't hold the longer pillar, so let the sequence lie flat */
@media (max-height:560px){
  .pillstage{height:auto}
  .pstage{position:static;height:auto;display:grid;gap:40px;place-items:start;padding:24px 0 8px}
  .pstage .pillar{grid-area:auto;opacity:1!important;transform:none!important;filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  .pillstage{height:auto}
  .pstage{position:static;height:auto;display:grid;gap:40px;place-items:start;padding:24px 0 8px}
  .pstage .pillar{grid-area:auto;opacity:1!important;transform:none!important;filter:none!important}
}

/* the hero's listen row */
#hero .listen-row{margin-top:18px;display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;font-family:var(--fm);font-size:12px;letter-spacing:.08em;color:#c9c7bf}
#hero .listen-row span{opacity:.75}
#hero .listen-row a{color:#f4f2ec;text-decoration-color:rgba(244,242,236,.45)}
#hero .listen-row a:hover{text-decoration-color:#f4f2ec}

/* session stills link out; the label sits in the corner and warms on hover */
.scrollpic a{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.scrollpic a img{position:absolute;top:-18%;left:0;width:100%;height:136%}
.scrollpic .yt{position:absolute;right:14px;bottom:12px;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#f4f2ec;
  background:rgba(10,10,10,.55);padding:7px 10px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:.85;transition:opacity .25s,background .25s}
.scrollpic a:hover .yt,.scrollpic a:focus-visible .yt{opacity:1;background:var(--noise)}
.scrollpic a:focus-visible{outline:2px solid #f4f2ec;outline-offset:-4px}

/* openers on phones: the photographs matter, so show the whole frame instead of a centre crop.
   The picture sits as a full-width band in the upper part of the stage and the words below it. */
@media (max-width:700px){
  .opener{height:120vh}
  .opener .art{inset:0;background-size:100% auto;background-position:center 14vh;background-repeat:no-repeat;background-color:#0a0a0a}
  .opener .art.bw{filter:grayscale(1) contrast(1.1)}
  .opener .shade{background:linear-gradient(180deg,rgba(10,10,10,.1) 0%,rgba(10,10,10,.1) 45%,rgba(10,10,10,.92) 70%)}
  .opener .box{bottom:9vh;max-width:88vw}
  .opener .box h2{font-size:clamp(30px,9vw,40px)}
  .opener .box p{font-size:15.5px}
}

/* the 2002 show: stepped in from the left of the column, slower than the page */
.room{margin:6px 0 10px clamp(0px,8vw,7ch)}
.room .prose{max-width:56ch}
.room p.beat{margin-top:.6em}

/* the clock paragraph: the display face, air between the lines */
.clock p:first-child{font-family:var(--fd);font-size:clamp(19px,1.7vw,24px);line-height:1.6;max-width:52ch;color:var(--ink)}
/* a coda: a closing line set in the display face, with space above it instead of a rule */
p.coda{margin-top:34px;font-family:var(--fd);font-style:italic;font-size:clamp(19px,1.7vw,24px);line-height:1.35;color:var(--ink-2)}
/* the table bar in the appendix */
.tblbar{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
#tracks .lede{font-family:var(--fd);font-style:italic;font-size:clamp(18px,1.6vw,22px);color:var(--ink-2);margin:0 0 12px}

/* ========== arrivals: figures draw themselves in as they reach the reading line ========== */
.arrive{--in:0}

/* ========== session stills: full-width images set into the reading flow, each
   drifting at its own rate (daisy.js pushes --shift in px). ========== */
.scrollpic{position:relative;width:100%;margin:clamp(30px,5vw,66px) 0;overflow:hidden}
.scrollpic img{position:absolute;top:-18%;left:0;width:100%;height:136%;object-fit:cover;
  display:block;will-change:transform;transform:translate3d(0,var(--shift,0px),0)}
.scrollpic:not(.quote){height:clamp(240px,42vw,520px)}

/* ========== the clipping: the exec quote pasted in like a strip torn out of the page it came from.
   Light: white multiplied into the paper so only the ink stays. Dark: negative. ========== */
.clipping{position:relative;margin:clamp(24px,4vw,48px) 0 clamp(28px,4vw,52px) auto;max-width:900px;
  transform:translate3d(0,var(--dy,0px),0) rotate(-.6deg);opacity:calc(.35 + .65*var(--in,1))}
.clipping::before{content:"";position:absolute;inset:-14px -18px;background:var(--paper-2);opacity:.9;z-index:0;
  clip-path:polygon(0 3%,3% 0,97% 1%,100% 4%,99% 96%,96% 100%,2% 99%,0 97%)}
.clipping img{position:relative;z-index:1;display:block;width:100%;height:auto;mix-blend-mode:multiply;filter:grayscale(.15) contrast(1.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .clipping img{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) contrast(.95)}}
:root[data-theme="dark"] .clipping img{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) contrast(.95)}
/* on a phone the clipping fills the column and drifts like the other figures */
@media (max-width:640px){
  .clipping{margin-left:0}
  .clipping img{width:100%;max-width:100%}
}

/* ========== embers under the last two blocks of the Close ========== */
.embers{position:relative;isolation:isolate}
.embers canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 100%);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 100%)}

/* ========== the listening test and the swing: one waveform, a play glyph in a
   hairline ring, a mono clock, and the track marks under their halves of the clip.
   The waveform is NOT split into two colours: the seam is meant to be inaudible.
   Played bars warm to the Noise colour as they pass. ========== */
.listen{margin:36px 0 12px}
.listen .cue{font-family:var(--fd);font-style:italic;font-size:clamp(19px,2vw,26px);line-height:1.28;
  letter-spacing:-.005em;color:var(--ink);max-width:42ch;margin:14px 0 20px;min-height:2.56em;text-wrap:balance}
.listen .cue span.noise{font-style:italic}
@media (max-width:700px){.listen .cue{min-height:3.84em;margin:12px 0 14px}}
.listen .cue.swap{animation:cuein .5s cubic-bezier(.2,.7,.2,1)}
@keyframes cuein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.listen .deck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(13px,2.2vw,24px);align-items:center}
.listen .pp{grid-area:1/1;width:40px;height:40px;padding:0;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:50%;background:transparent;color:var(--ink);
  display:grid;place-items:center;transition:color .3s ease,border-color .3s ease}
.listen .pp:hover{color:var(--noise);border-color:var(--noise-line)}
.listen .pp:disabled{cursor:not-allowed;color:var(--ink-3);border-color:var(--rule);opacity:.6}
.listen .pp:disabled:hover{color:var(--ink-3);border-color:var(--rule)}
.listen .pp svg{width:24px;height:24px;display:block}
.listen .pp svg path{fill:currentColor}
.listen .pp .i-pause{display:none}
.listen.playing .pp .i-play{display:none}
.listen.playing .pp .i-pause{display:block}

.listen .wave{grid-area:1/2;position:relative;height:clamp(54px,7.5vw,82px);cursor:pointer;touch-action:none}
.listen.missing .wave{cursor:default;opacity:.7}
.listen .wave .lyr{position:absolute;inset:0}
.listen .wave .lyr svg{display:block;width:100%;height:100%}
.listen .wave .bg rect{fill:var(--g2)}
.listen .wave .fg{clip-path:inset(0 calc(100% - var(--p,0) * 100%) 0 0)}
.listen .wave .fg rect{fill:var(--noise)}
.listen .wave .seam{position:absolute;top:0;bottom:0;left:var(--seam,51%);width:1px;
  background:linear-gradient(180deg,var(--ink-3) 0 6px,transparent 6px calc(100% - 6px),var(--ink-3) calc(100% - 6px) 100%);
  opacity:.55;pointer-events:none}
.listen .wave .head{position:absolute;top:-3px;bottom:-3px;left:calc(var(--p,0) * 100%);width:1px;
  background:var(--ink);pointer-events:none;opacity:0;transition:opacity .3s ease}
.listen .wave.tip .head{opacity:1}
.listen .wave:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

.listen .time{grid-area:1/3;font-family:var(--fm);font-size:12px;letter-spacing:.02em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.listen .time .cur{color:var(--ink-2)}
.listen.missing .time .cur{color:var(--ink-3);font-style:italic}
.listen .time .sep{margin:0 5px;opacity:.45}
@media (max-width:520px){.listen .time{font-size:11px}.listen .pp{width:36px;height:36px}}

.listen .marks{grid-area:2/2;display:grid;grid-template-columns:var(--seam,51%) minmax(0,1fr);gap:14px;margin-top:13px}
.listen .marks.one{grid-template-columns:minmax(0,1fr);justify-items:end}
.listen .mk{font-family:var(--fm);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);transition:color .5s ease}
.listen .mk i{font-family:var(--fd);font-style:italic;font-size:13.5px;letter-spacing:0}
.listen .mk:last-child{text-align:right}
.listen .mk.on{color:var(--noise)}
@media (max-width:700px){
  .listen .marks{grid-template-columns:minmax(0,1fr);gap:5px}
  .listen .marks:not(.one) .mk:last-child{text-align:left}
}

/* ========== reduced motion: everything sits where it ends up ========== */
@media (prefers-reduced-motion:reduce){
  .track>.stick,.tabsheet .move,.pull,.dog,.scrollpic img,[data-drift]{transform:none!important;filter:none!important;opacity:1!important}
  .clipping{transform:rotate(-.6deg)!important;opacity:1!important}
  .tex{opacity:var(--img-op)!important;filter:blur(4px) saturate(.8)!important}
  #close .texi{opacity:.14!important;filter:blur(1.5px) saturate(.8)!important}
  .disc-track{position:static;display:flex;justify-content:center;margin:40px 0 8px}
  .disc-track>.stick{position:static;--disc-w:min(340px,68vw)}
  .dog-track{position:relative;inset:auto;height:auto;display:flex;justify-content:center}
  .dog.b,.dog.c{display:none} .dog.a{position:static;width:min(78vw,380px)}
  .sheet .m{transition:none}
  .arrive{--in:1}
  .listen .cue.swap{animation:none}
  .listen .wave .head{transition:none}
  .listen .mk,.listen .wave .fg,.listen .wave .head,.listen .pp{transition:none}
}