:root{
  --cream:#FFFCF2; --ink:#171310; --tangerine:#F2551F; --marigold:#FFC42E; --teal:#0FA3A3;
  --ink-soft:#5C544A; --cream-dim:#FFE2C4; --apricot:#FFD7AE;
  --display:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --pad:clamp(20px,4.4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;height:100svh;overflow:hidden}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* controls that move between pages are links, and must look like the buttons they
   replaced. Do NOT set color on a.card: a.card (0,1,1) would beat .c-ink (0,1,0)
   and every card would lose the cream text its color class gives it. */
a.card,a.nav,a.back,a.t-enter{font:inherit;text-decoration:none;cursor:pointer}
/* no font:inherit here: a.panelBtn (0,1,1) would outrank .panelBtn (0,1,0)
   and undo its 11px mono, which is what makes it match the other buttons */
a.panelBtn{text-decoration:none;cursor:pointer}
a.nav{display:grid;color:inherit}
a.back{display:inline-flex;align-items:center;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:999;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:6px}

/* ── view system ───────────────────────────────────────── */
.view{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;z-index:1}
.view.on{opacity:1;visibility:visible;z-index:2}

/* ── 1. threshold ──────────────────────────────────────── */
#threshold{background:var(--tangerine);color:var(--cream);display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:var(--pad);overflow:hidden}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
/* Each disc runs a closed circuit — it returns to its start by a different
   route, so it never retraces and never reads as a pendulum. Negative delays
   drop each one in at a different point in its cycle so they don't set off
   together. Linear timing keeps them drifting rather than pulsing.
   The two light discs circuit the top and bottom bands; the two dark ones
   roam freely, so nothing pale ever parks behind the name. */
/* Floating, properly. Each disc is a transparent box that eases left-right,
   holding an inner disc that eases up-down on a DIFFERENT period. Two smooth
   perpendicular oscillations trace a Lissajous curve: no waypoints, no
   corners, no reversals against an invisible wall. The mismatched periods
   mean the path never visibly repeats. */
.blob{position:absolute;pointer-events:none;z-index:0;will-change:transform}
.blob>i{display:block;width:100%;height:100%;border-radius:50%;will-change:transform}
.b1{width:min(54vw,640px);aspect-ratio:1;right:-16vw;bottom:-22vw;
  animation:sweepX1 37s ease-in-out infinite alternate;animation-delay:-11s}
.b1>i{background:var(--marigold);animation:sweepY1 23s ease-in-out infinite alternate;animation-delay:-5s}
.b2{width:min(23vw,250px);aspect-ratio:1;left:-8vw;top:9vh;
  animation:sweepX2 41s ease-in-out infinite alternate;animation-delay:-19s}
.b2>i{background:var(--cream);animation:sweepY2 27s ease-in-out infinite alternate;animation-delay:-13s}
.b3{width:min(18vw,190px);aspect-ratio:1;left:11vw;bottom:9vh;
  animation:sweepX3 33s ease-in-out infinite alternate;animation-delay:-7s}
.b3>i{background:var(--teal);animation:sweepY3 19s ease-in-out infinite alternate;animation-delay:-3s}
.b4{width:min(13vw,132px);aspect-ratio:1;right:17vw;top:10vh;
  animation:sweepX4 29s ease-in-out infinite alternate;animation-delay:-23s}
.b4>i{background:var(--ink);animation:sweepY4 43s ease-in-out infinite alternate;animation-delay:-31s}
@keyframes sweepX1{to{transform:translateX(-78vw)}}
@keyframes sweepY1{to{transform:translateY(-21vh)}}
@keyframes sweepX2{to{transform:translateX(86vw)}}
@keyframes sweepY2{to{transform:translateY(46vh)}}
@keyframes sweepX3{to{transform:translateX(73vw)}}
@keyframes sweepY3{to{transform:translateY(-53vh)}}
@keyframes sweepX4{to{transform:translateX(-79vw)}}
@keyframes sweepY4{to{transform:translateY(51vh)}}

#threshold>:not(.blob){position:relative;z-index:1}
.t-eyebrow{color:var(--cream-dim);opacity:0;transform:translateY(10px)}
.t-name{font-family:var(--display);font-weight:400;letter-spacing:-.004em;line-height:1.0;
  font-size:min(13vw,24vh,170px);white-space:nowrap;margin-top:clamp(8px,1.8vh,18px);opacity:0;transform:scale(.94)}
.t-sub{margin-top:clamp(26px,5vh,52px);font-family:var(--mono);font-size:clamp(11px,1.5vw,14px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--cream-dim);opacity:0;transform:translateY(10px)}
.t-enter{margin-top:clamp(20px,4.4vh,46px);display:inline-flex;align-items:center;gap:14px;background:var(--cream);color:#8A2B0A;
  font-family:var(--mono);font-size:13px;letter-spacing:.28em;text-transform:uppercase;padding:clamp(13px,1.9vh,18px) clamp(30px,4vw,46px);
  border-radius:999px;opacity:0;transform:translateY(10px);transition:letter-spacing .35s ease,transform .35s ease}
.t-enter:hover{letter-spacing:.4em;transform:translateY(-3px)}
.in-1{animation:rise .9s .35s ease-out forwards}
.in-2{animation:pop 1.5s .55s cubic-bezier(.2,.7,.3,1) forwards}
.in-3{animation:rise .9s 1.5s ease-out forwards}
.in-4{animation:rise .9s 1.9s ease-out forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}

/* ── 2. hall ───────────────────────────────────────────── */
#gallery{display:grid;grid-template-columns:minmax(260px,26.5%) 1fr;background:var(--cream)}
.hero{padding:var(--pad);display:flex;flex-direction:column;justify-content:center;border-right:3px solid var(--ink);position:relative;overflow:hidden}
.hero h1{font-family:var(--display);font-weight:400;letter-spacing:-.003em;line-height:1.1;
  font-size:clamp(33px,4vw,66px)}
.hero .motto{margin-top:18px;max-width:30ch;color:var(--ink-soft);font-size:clamp(14px,1.15vw,17px)}
.hero .sig{margin-top:auto;padding-top:24px;color:var(--ink-soft)}
.heroBtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,5vh,58px)}
.hero .back{align-self:flex-start;border:2px solid var(--ink);border-radius:999px;padding:9px 20px}
.hero .back:hover{background:var(--ink);color:var(--cream)}
.cards{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cards::-webkit-scrollbar{height:0}
.card{flex:1 1 0;min-width:0;scroll-snap-align:start;border-right:3px solid var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(15px,1.5vw,25px);position:relative;
  overflow:hidden;text-align:left;transition:flex-grow .55s cubic-bezier(.2,.7,.3,1)}
.card:last-child{border-right:0}
/* hovering one card expands it across the whole card field; the hero stays put */
.cards:hover .card,.cards:focus-within .card{flex-grow:.1}
.cards .card:hover,.cards .card:focus-visible{flex-grow:9}
.card h2,.card p,.card .go,.card .call{transition:opacity .3s ease}
.cards:hover .card:not(:hover) h2,.cards:hover .card:not(:hover) p,
.cards:hover .card:not(:hover) .go,.cards:hover .card:not(:hover) .call{opacity:0}
.card .call{display:block;margin-bottom:10px;opacity:.62;position:relative}
.c-mar .call{color:#9A7B14;opacity:1}
.card .n{position:absolute;top:clamp(15px,1.5vw,25px);left:clamp(15px,1.5vw,25px);opacity:.5}
.card h2{font-family:var(--display);font-weight:400;letter-spacing:-.003em;line-height:1.04;
  font-size:clamp(24px,2.5vw,41px);position:relative}
.card p{margin-top:10px;font-size:14px;max-width:26ch;position:relative;opacity:.86}
.card .go{margin-top:16px;position:relative}
.card i{position:absolute;border-radius:50%;pointer-events:none;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
/* Dots drift gently at rest and widen out when a card opens. Amplitude is a
   custom property so hover changes the reach without swapping keyframes. */
.card .dot{position:absolute;pointer-events:none;--ax:34%;
  animation:dotX 27s ease-in-out infinite alternate}
.card .dot>i{display:block;width:100%;height:100%;border-radius:50%;--ay:-26%;
  animation:dotY 19s ease-in-out infinite alternate}
.card .dot:nth-of-type(2){--ax:-58%;animation-duration:23s;animation-delay:-9s}
.card .dot:nth-of-type(2)>i{--ay:44%;animation-duration:31s;animation-delay:-4s}
.cards .card:hover .dot:nth-of-type(1),.cards .card:focus-visible .dot:nth-of-type(1){
  --ax:180%;animation-duration:15s}
.cards .card:hover .dot:nth-of-type(1)>i,.cards .card:focus-visible .dot:nth-of-type(1)>i{
  --ay:-115%;animation-duration:11s}
.cards .card:hover .dot:nth-of-type(2),.cards .card:focus-visible .dot:nth-of-type(2){
  --ax:-320%;animation-duration:13s}
.cards .card:hover .dot:nth-of-type(2)>i,.cards .card:focus-visible .dot:nth-of-type(2)>i{
  --ay:230%;animation-duration:17s}
@keyframes dotX{to{transform:translateX(var(--ax))}}
@keyframes dotY{to{transform:translateY(var(--ay))}}

.c-tan{background:var(--tangerine);color:var(--cream)}
.c-mar{background:var(--marigold);color:#4A3204}
.c-ink{background:var(--ink);color:var(--cream)}
.c-tea{background:var(--teal);color:#04302F}
.c-cre{background:var(--apricot);color:var(--ink)}
.c-apr{background:var(--apricot);color:var(--ink)}
.room.c-apr{--rbg:var(--apricot);--rfg:var(--ink)}

/* ── 3. rooms ──────────────────────────────────────────── */
.room{--rbg:var(--cream);--rfg:var(--ink);
  display:flex;flex-direction:column;background:var(--rbg);color:var(--rfg)}
/* a themed room paints the whole track; segments carry the accents */
.room.c-tan{--rbg:var(--tangerine);--rfg:#FFF6EC}
.room.c-mar{--rbg:var(--marigold);--rfg:#4A3204}
.room.c-ink{--rbg:var(--ink);--rfg:var(--cream)}
.room.c-tea{--rbg:var(--teal);--rfg:#04302F}
.room.c-cre{--rbg:var(--cream);--rfg:var(--ink)}
.room .bar{border-bottom-color:var(--rfg)}
.room .panel{border-right-color:var(--rfg)}
.room .nav{border-color:var(--rfg)}
.room .nav:hover{background:var(--rfg);color:var(--rbg)}
.room .bar .dot{background:var(--rfg)}
.room .panel .acc{color:inherit;opacity:.68}
.room .panel cite,.room .statlab{opacity:.72}
.room .mailto{background:var(--rfg);color:var(--rbg)}
.bar{display:flex;align-items:center;gap:14px;padding:14px var(--pad);border-bottom:3px solid var(--ink);flex:0 0 auto}
.bar .rname{font-family:var(--display);font-weight:400;letter-spacing:0;font-size:22px}
.bar .rcall{margin-right:auto;opacity:.5;font-size:10px}
.bar .dots{display:flex;gap:6px}
.bar .dot{width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.2;transition:opacity .3s,transform .3s}
.bar .dot.on{opacity:1;transform:scale(1.35)}
.nav{border:2px solid var(--ink);border-radius:999px;width:42px;height:42px;display:grid;place-items:center;font-size:17px}
.nav:hover{background:var(--ink);color:var(--cream)}
.nav[disabled]{opacity:.25;pointer-events:none}
.track{flex:1 1 auto;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.track::-webkit-scrollbar{height:0}
.panel{flex:0 0 min(560px,86vw);scroll-snap-align:start;border-right:3px solid var(--ink);padding:var(--pad);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.panel.wide{flex-basis:min(880px,94vw)}
.panel.pic{flex-basis:min(820px,92vw);padding:0;position:relative;background:var(--ink);cursor:zoom-in}
.panel.pic.full{flex-basis:min(615px,88vw)}
.panel.pic.full img{object-fit:cover}
.panel.pic img{width:100%;height:100%;object-fit:contain;background:var(--ink)}
.panel.flat{display:grid;place-items:center;text-align:center}
.panel h3{font-family:var(--display);font-weight:400;letter-spacing:-.003em;line-height:1.08;
  font-size:clamp(31px,3.7vw,61px)}
.panel .acc{color:var(--tangerine);margin-bottom:12px}
.panel p{margin-top:14px;font-size:clamp(14px,1.15vw,17px);max-width:44ch}
.panel .tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid currentColor;border-radius:999px;padding:5px 11px;opacity:.75}
.panel blockquote{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.4vw,34px);
  line-height:1.34;letter-spacing:0;max-width:24ch}
.panel cite{display:block;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  font-style:normal;opacity:.7}
.stat{font-family:var(--display);font-weight:400;font-size:clamp(48px,7.2vw,113px);letter-spacing:-.004em;line-height:1.02}
.statlab{margin-top:10px}
.mailto{display:inline-block;margin-top:26px;background:var(--ink);color:var(--cream);font-family:var(--mono);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:16px 32px;border-radius:999px}
.mailto:hover{transform:translateY(-2px)}

.panel{position:relative}
.headPanel,.panel.indexed{position:relative}
/* a section boundary inside a room: a heavy black rule you cannot miss */
/* a block edge: same 3px divider, black instead of cream */
.room .panel.blockEdge{border-right-color:var(--ink);border-right-width:6px}

.panelTitle{font-family:var(--display);font-weight:400;letter-spacing:-.008em;line-height:1;
  font-size:clamp(44px,5.4vw,82px);margin-bottom:6px}
.headPanel p{margin-top:16px;max-width:46ch}
.titleOnly,.ledeOnly{text-align:center;align-items:center}
/* title centres in the free space, index stays pinned to the foot */
.titleOnly .panelTitle{margin-top:auto;margin-bottom:auto}
/* the title card has no body copy, so the index can leave the flow and let the
   title centre in the full panel rather than in the space above it */
.titleOnly .panelIndex{position:absolute;left:var(--pad);right:var(--pad);
  bottom:var(--pad);margin:0;padding-top:0}
.titleOnly .panelTitle{font-size:clamp(56px,7.4vw,116px);line-height:.94}
.titleOnly .panelIndex,.ledeOnly .panelIndex{text-align:center}
.panel .panelLede,.ledeTitle .panelTitle{font-family:var(--display);font-weight:600;
  letter-spacing:-.006em;font-size:clamp(25px,2.7vw,40px);line-height:1.2;
  text-align:center;max-width:22ch;margin-inline:auto}
.panel .panelLede{margin-top:26px}
/* a quote set exactly as a lede, with the attribution plain beneath */
.quoteLede cite{font-style:normal;font-weight:400;text-align:center;
  margin-top:26px;font-size:clamp(12px,1.05vw,14px);letter-spacing:.1em;opacity:.8}
.statement{justify-content:center}
.statement p{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(14px,1.05vw,16px);line-height:1.6;max-width:50ch;margin-top:15px}
.statement p:first-child{margin-top:0}
.panel .panelIndex{margin-top:auto;padding-top:22px;
  font-size:10.5px;letter-spacing:.2em;opacity:.5}

/* the mark carries its own weight, so it sits a little left of centre */
.logoPanel{flex-basis:min(560px,86vw);align-items:center;justify-content:center}
.logoPanel img{max-width:96%;max-height:82%;height:auto;object-fit:contain;
  transform:translateX(-5%)}

/* ── catalogue drawer ─────────────────────────────────────
   A drawer seen from above: cards stacked front to back, each showing only
   its tab. Hovering one pushes everything behind it down, the way a thumb
   opens a gap in a real drawer. Clicking opens the full record. */
.stackPanel{flex-basis:min(560px,86vw);justify-content:center}
.stackPanel>h3{text-align:center}
.stack{position:relative;height:calc(var(--n,12) * 28px);
  margin:clamp(16px,3vh,34px) calc(var(--pad) * -1) 0}
/* past twelve records the tabs have to give up 4px each to keep the riffle
   inside a viewport-height panel */
.stack.dense{height:calc(var(--n) * 24px)}
.stack.dense .ccard{top:calc(var(--i) * 24px)}
.stack.dense .ctab{height:24px}
.stack.dense .ctitle{font-size:15px}
.stack.dense .cacc{font-size:9px}
.ccard{position:absolute;left:0;right:0;top:calc(var(--i) * 28px);
  height:118px;overflow:hidden;text-align:left;cursor:pointer;
  background:var(--tone,var(--cream));color:var(--ttype,var(--ink));
  border:0;padding:0 var(--pad);display:flex;flex-direction:column;
  transition:transform .38s cubic-bezier(.2,.7,.3,1);
  z-index:var(--i)}
.ccard:hover ~ .ccard{transform:translateY(90px)}
.ccard:focus-visible ~ .ccard{transform:translateY(90px)}
.ctab{position:relative;display:flex;align-items:center;height:28px;
  margin:0 calc(var(--pad) * -1);padding:0 var(--pad);
  border-top:2px solid currentColor}
/* one shared rule between cards: the line under a title is the line above the next */
.ccard:last-of-type .ctab{border-bottom:2px solid currentColor}
.ccard:hover .ctab,.ccard:focus-visible .ctab{border-bottom:2px solid currentColor}
.cacc{position:absolute;left:var(--pad);font-size:10px;letter-spacing:.16em;opacity:.55}
.ctitle{flex:1 1 auto;text-align:center;font-family:var(--display);font-weight:400;font-size:16.5px;line-height:1}
.cbody{margin-top:9px;opacity:0;transition:opacity .3s ease .06s}
.ccard:hover .cbody,.ccard:focus-visible .cbody{opacity:1}
.cnote{display:block;font-size:12px;line-height:1.4;opacity:.82;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmore{display:block;margin-top:8px;font-size:10px;letter-spacing:.16em;
  color:inherit;opacity:.75;text-decoration:underline;text-underline-offset:3px}

/* a panel can open a modal of its own */
.panelBtn{display:inline-flex;align-items:center;align-self:flex-start;margin-top:26px;
  border:2px solid currentColor;border-radius:999px;padding:10px 21px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.panelBtn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
/* filled variant: black button, apricot type, centred in a lede panel */
.panelBtn.solid{background:var(--ink);color:var(--apricot);border-color:var(--ink)}
/* on the teal block the filled button takes cream, not the apricot block's accent */
.c-tea .panelBtn.solid{color:var(--cream)}
/* on ink the fill inverts: cream by default, going to black on hover */
.c-ink .panelBtn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.c-ink .panelBtn.solid:hover{background:var(--ink);color:var(--cream);border-color:var(--cream)}
.c-tea .panelBtn.solid:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.ledeOnly .panelBtn{align-self:center;margin-top:32px}
.panelBtn.solid:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.panelModal{position:fixed;inset:0;background:rgba(10,8,7,.72);display:none;z-index:60;
  padding:clamp(10px,1.8vh,22px) clamp(14px,3vw,44px)}
.panelModal.on{display:grid;place-items:center}
/* .recBox comes later in this file than the colour classes, so set grounds by id */
.panelModal .recBox{color:var(--ink);
  width:min(1080px,96vw);text-align:center;
  padding:clamp(18px,2.2vw,30px) clamp(22px,3vw,40px) clamp(20px,2.4vw,32px)}
#pitchModal .recBox{background:var(--apricot)}
#miniModal  .recBox{background:#CEEEED}
.pitchMark{width:clamp(46px,4.2vw,58px);height:auto;display:block;margin:0 auto 11px}
/* both modals lead with a mark. The monogram is the narrower of the two
   (1751x2522 against the e's 331x420), so it takes less width to stand the
   same height. */
#miniModal .pitchMark{width:clamp(38px,3.6vw,50px)}
.panelModal .recBox h3{margin-top:5px;font-size:clamp(26px,2.8vw,40px)}
.panelModal .recSub{margin-inline:auto;max-width:34ch}
/* the grid area already bounds this; 92svh capped it ~90px short of the space */
.panelModal .recBox{max-height:100%}
.pitchLead,.pitchOut{max-width:78ch;margin-inline:auto;
  font-size:clamp(15px,1.12vw,17px);line-height:1.55}
.pitchLead{margin-top:15px;padding-bottom:clamp(15px,1.9vh,21px);
  border-bottom:2px solid var(--ink)}
.pitchOut{margin-top:clamp(20px,2.4vh,28px);padding-top:clamp(15px,1.9vh,21px);
  border-top:2px solid var(--ink)}
/* balanced columns, not a grid: a short point next to a long one would
   otherwise leave a hole the height of the longer one */
.pitchCols{column-count:2;column-gap:clamp(24px,3.2vw,44px);
  margin-top:clamp(20px,2.6vh,30px);text-align:left}
.pitchCols section{break-inside:avoid;margin-bottom:clamp(14px,1.8vh,20px)}
.pitchCols section:last-child{margin-bottom:0}
.pitchCols h4{font-family:var(--body);font-weight:500;font-size:clamp(14px,1.1vw,16px);
  line-height:1.35;margin:0 0 8px}
.pitchCols p{margin:0;font-size:clamp(14px,1.02vw,16px);line-height:1.55;opacity:.92}
@media (max-width:780px){.pitchCols{column-count:1}}

/* ── record modal ── */
#rec{position:fixed;inset:0;background:rgba(10,8,7,.72);display:none;z-index:60;
  padding:clamp(14px,3vw,44px)}
#rec.on{display:grid;place-items:center}
.recBox{background:var(--cream);color:var(--ink);width:min(1080px,96vw);
  max-height:92svh;overflow:auto;border:2px solid var(--ink);border-radius:6px;
  padding:clamp(22px,3vw,40px);position:relative}
.recBox .x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:999px;
  border:2px solid var(--ink);display:grid;place-items:center;font-size:19px;background:transparent}
.recBox .x:hover{background:var(--ink);color:var(--cream)}
/* a record on a dark tone takes its type colour inline, graduated by how dark
   the tone is; every rule follows that same colour */
.recBox.onDark .x{border-color:currentColor;color:currentColor}
.recBox.onDark .x:hover{background:currentColor}
.recBox.onDark .x:hover span{color:var(--ink)}
.recBox.onDark .recGal img,
.recBox.onDark .recPoster img,
.recBox.onDark .recPoster model-viewer{border-color:currentColor}
.recBox.onDark .recSlot{border-color:currentColor}
.recLink{display:inline-block;margin-top:22px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:inherit;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px;opacity:.8}
.recLink:hover{opacity:1}
.recCols{display:grid;grid-template-columns:minmax(220px,34%) 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.recPoster{margin:0;display:grid;gap:12px;align-self:center}
.recPoster model-viewer{display:block;width:100%;aspect-ratio:1;
  background:var(--ink);border:2px solid var(--ink);border-radius:4px;
  --poster-color:var(--ink);cursor:grab}
.recPoster model-viewer:active{cursor:grabbing}
.recModelHint{margin-top:9px;text-align:center;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.recBox.onDark .recPoster model-viewer{border-color:var(--cream)}
.recPoster img{display:block;width:100%;height:auto;
  border:2px solid var(--ink);border-radius:4px;background:var(--ink)}
.recText{padding-right:44px}
.recHeadRow{display:flex;align-items:center;gap:clamp(13px,1.7vw,22px)}
.recHead{min-width:0;flex:1 1 auto}
.recMark{width:54px;height:auto;display:block;flex:0 0 auto;opacity:.9}
.recAcc{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.62}
.recBox h3{margin-top:5px;font-family:var(--display);font-weight:400;letter-spacing:-.004em;
  font-size:clamp(28px,3.4vw,50px);line-height:1.04}
.recSub{margin-top:9px;font-family:var(--display);font-weight:400;
  font-size:clamp(17px,1.6vw,23px);line-height:1.22;opacity:.7;max-width:38ch}
.recBody{margin-top:18px;font-size:clamp(15px,1.15vw,18px);line-height:1.6;max-width:52ch}
.recBody p{margin:0 0 13px}
.recBody p:last-child{margin-bottom:0}
.recBody b{font-weight:500}
/* Instrument Sans loads 400/500 only: never let <b> synthesise a 700 */
.panel p b{font-weight:500}
.recVideo:not(:empty){margin-top:22px}
.recVideo video{width:100%;height:auto;display:block;background:var(--ink);
  border:2px solid var(--ink);border-radius:4px}
.recGal{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.recGal img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1.5px solid var(--ink);border-radius:3px;cursor:zoom-in}
.recGal img.isPoster{aspect-ratio:3/4;object-fit:contain;background:var(--ink);
  max-width:190px;justify-self:start}
.recSlot{margin-top:26px;border:2px dashed rgba(23,19,16,.32);border-radius:4px;
  min-height:clamp(120px,18vh,180px);display:grid;place-items:center}
.recSlot span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
@media (max-width:820px){
  .recCols{grid-template-columns:1fr}
  .recText{padding-right:0}
  .recMark{width:42px}
  .recHeadRow{gap:13px}
}

@media (max-width:820px){
  /* No hover on a phone, so the drawer stops being a riffle and becomes a
     ruled list: one tap goes straight to the record. Rows keep their shared
     rules and their tone, and are tall enough to hit reliably. */
  .stackPanel{padding-top:clamp(26px,5vh,44px)}
  /* both drawers read the same on a phone: the dense rules are more specific
     than these, so they have to be named or a 13-row list and an 11-row list
     end up with different rows */
  .stack,.stack.dense{height:auto;display:block;
    margin:clamp(24px,5vh,52px) calc(var(--pad) * -1) 0}
  .stackCol{position:static}
  .ccard{position:static;display:block;width:100%;height:auto;
    padding:0;border-radius:0;
    -webkit-tap-highlight-color:transparent}
  .ccard:hover ~ .ccard,.ccard:focus-visible ~ .ccard{transform:none}
  .ccard:active{filter:brightness(.94)}
  .stack .ctab,.stack.dense .ctab{height:34px;padding:0 var(--pad)}
  .stack .ctitle,.stack.dense .ctitle{text-align:left;padding-left:66px;font-size:15px}
  .stack .cacc,.stack.dense .cacc{font-size:9.5px}
  .cbody{display:none}
  .ccard:hover .ctab,.ccard:focus-visible .ctab{border-bottom:0}
  .ccard:last-of-type .ctab{border-bottom:2px solid currentColor}
  /* record modal stacks, and the poster must not eat the screen */
  .recBox{padding:20px 18px 24px}
  .recPoster{max-width:min(320px,72vw);margin-inline:auto}
  .recBox h3{font-size:clamp(26px,7vw,34px)}
  .recSlot{min-height:110px}
}

/* ── lightbox ──────────────────────────────────────────── */
#lb{position:fixed;inset:0;background:rgba(10,8,7,.97);display:none;z-index:70;
  grid-template-rows:1fr auto;place-items:center;padding:clamp(16px,3vw,48px)}
#lb.on{display:grid}
#lb img{max-width:92vw;max-height:78vh;object-fit:contain;width:auto;height:auto}
#lb .cap{color:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-align:center;padding-top:18px;max-width:60ch}
#lb .x{position:absolute;top:18px;right:18px;color:var(--cream);border:2px solid rgba(255,252,242,.4);
  border-radius:999px;width:46px;height:46px;display:grid;place-items:center;font-size:20px}
#lb .x:hover{border-color:var(--cream)}
#lb .lnav{position:absolute;top:50%;transform:translateY(-50%);color:var(--cream);
  border:2px solid rgba(255,252,242,.4);border-radius:999px;width:52px;height:52px;display:grid;place-items:center;font-size:20px}
#lb .lnav:hover{border-color:var(--cream)}
#lb .lprev{left:18px}#lb .lnext{right:18px}

@media (min-width:821px){
  /* equal reserved height so all four titles sit on one line */
  .card p{min-height:10.4em}
}
@media (max-width:820px){
  #gallery{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .hero{border-right:0;border-bottom:3px solid var(--ink);
    padding:18px var(--pad) 20px;max-height:46svh;overflow:hidden}
  .hero h1{font-size:clamp(26px,7.4vw,36px);line-height:1.06}
  .hero .motto{font-size:13.5px;line-height:1.5;margin-top:11px;max-width:none}
  .heroBtns{margin-top:14px}
  .hero .sig{display:none}
  .card{flex:0 0 82vw}
  .cards:hover .card,.cards:focus-within .card{flex-grow:0}
  .cards .card:hover,.cards .card:focus-visible{flex-grow:0}
  .cards:hover .card:not(:hover) h2,.cards:hover .card:not(:hover) p,
  .cards:hover .card:not(:hover) .go,.cards:hover .card:not(:hover) .call{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .blob,.blob>i,.card .dot,.card .dot>i{animation:none!important;transform:none!important}
  *{transition:none!important;animation-duration:.01ms!important;animation-delay:0s!important}
  .track{scroll-behavior:auto}
  .in-1,.in-2,.in-3,.in-4{opacity:1!important;transform:none!important}
}

/* Prata has a single weight — never let a heading synthesise a bold */
.t-name,.hero h1,.card h2,.panel h3,.panel blockquote,.stat,.bar .rname{font-synthesis-weight:none}