/* ═══════════════════════════════════════════════════════════
   ESCHER — a broadsheet that thinks it's a piece of hardware
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ink set — process colours, because the whole site is a print screen */
  --paper:#E6E3DA;
  --paper-2:#DCD8CD;
  --ink:#14120F;
  --cyan:#0047F0;
  --magenta:#FF0090;
  --yellow:#FFD400;

  --rule:1px solid var(--ink);
  --gut:clamp(16px,3vw,34px);
  --bar:64px;                       /* transport height */

  --f-display:"Archivo",system-ui,sans-serif;
  --f-read:"Newsreader",Georgia,serif;
  --f-util:"Martian Mono",ui-monospace,monospace;
}

html[data-edition="night"]{
  --paper:#0E0D0C;
  --paper-2:#181614;
  --ink:#EDEAE1;
  --cyan:#3D7BFF;
  --magenta:#FF3FAE;
  --yellow:#FFE04D;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-bottom:var(--bar);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-read);
  font-size:17px;
  line-height:1.5;
  transition:background .3s,color .3s;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:var(--gut);top:8px;z-index:99;background:var(--ink);color:var(--paper);
  padding:8px 14px;font:600 12px/1 var(--f-util);
}
:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}

/* ── utility type ─────────────────────────────────────────── */
.eyebrow,.folio,.sheet__meta,.rail,.specs dt{
  font-family:var(--f-util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.deck{
  font-family:var(--f-read);
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.45;
  max-width:34ch;
  margin:0 0 1.4rem;
}

/* ═══ MASTHEAD ════════════════════════════════════════════ */
.masthead{padding:14px var(--gut) 0}

.folio{
  display:flex;gap:1.5rem;align-items:baseline;
  padding-bottom:10px;
}
.folio__spacer{flex:1}
.folio--rule{
  border-top:var(--rule);padding-top:10px;margin-top:2px;
}

/* the flag: one word, stretched to the full measure of the page */
.flag{margin:0;line-height:.74}
.flag__word{
  display:inline-block;white-space:nowrap;
  font-family:var(--f-display);
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:16.2vw;  /* JS refits this exactly to the measure */
  letter-spacing:-.035em;
  text-transform:uppercase;
  /* optical trim so the glyphs sit flush to both rules */
  margin-left:-.02em;
}

.rail{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:var(--rule);border-bottom:3px solid var(--ink);
  margin-top:12px;
}
.rail a{
  flex:1 1 auto;
  padding:11px 14px;
  text-decoration:none;
  border-right:var(--rule);
  transition:background .15s,color .15s;
}
.rail a:last-child{border-right:0}
.rail a b{color:var(--magenta);font-weight:800;margin-right:.5em}
.rail a:hover{background:var(--ink);color:var(--paper)}
.rail a:hover b{color:var(--yellow)}

/* the edition switch — a lamp, not a toggle */
.edition{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font:600 11px/1 var(--f-util);letter-spacing:.09em;text-transform:uppercase;
}
.edition__lamp{
  width:9px;height:9px;border:1px solid var(--ink);border-radius:50%;
  background:transparent;transition:background .2s,box-shadow .2s;
}
.edition[aria-pressed="true"] .edition__lamp{
  background:var(--yellow);box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 30%,transparent);
}

/* ═══ THE RECORD ══════════════════════════════════════════
   The tracklist is the headline. Scher's stack, except every block
   is a track and a play key — the type is the interface. Blocks cycle
   through the plates; whichever track is loaded takes the yellow.  */
.record{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(24px,4vw,64px);
  padding:clamp(28px,4vw,56px) var(--gut) clamp(40px,6vw,72px);
  align-items:start;
}
.record__label{
  margin:0 0 14px;
  font:600 11px/1 var(--f-util);letter-spacing:.09em;text-transform:uppercase;
  display:flex;gap:1em;align-items:baseline;
}
.record__label b{color:var(--magenta);font-weight:800}
.record__label span{opacity:.62;font-weight:400}

.setlist{
  list-style:none;margin:0 0 1.8rem;padding:0;
  font-size:clamp(38px,6vw,104px);   /* fallback — fitSetlist() sets the real size */
}
.setlist li{line-height:0}
.cut{
  display:inline-flex;align-items:stretch;gap:.22em;
  margin:0;border:0;cursor:pointer;
  padding:.07em .2em .1em;
  font-family:var(--f-display);font-size:1em;line-height:.88;
  text-transform:uppercase;letter-spacing:-.03em;text-align:left;
  color:var(--paper);white-space:nowrap;
  transition:background .15s,color .15s,transform .2s cubic-bezier(.2,.7,.3,1);
}
.cut--a{background:var(--ink);    font-variation-settings:"wdth" 125,"wght" 900}
.cut--b{background:var(--cyan);   font-variation-settings:"wdth" 64,"wght" 900; font-size:1.1em}
.cut--c{background:var(--magenta);font-variation-settings:"wdth" 125,"wght" 500; font-style:italic; font-size:1.2em}
/* the part code rides in the block, the way a label sits on a panel */
.cut__meta{
  display:flex;flex-direction:column;justify-content:space-between;
  font:600 max(9px,.1em)/1.2 var(--f-util);font-style:normal;
  letter-spacing:.06em;
  padding:.35em 0 .1em;opacity:.8;
}
.cut__key{font-size:1.1em}
.cut:hover{transform:translateX(.12em)}
.cut:focus-visible{outline-offset:4px}
.cut.is-current,.cut.is-current:hover{background:var(--yellow);color:#14120F;transform:translateX(.12em)}

.record__art{margin:0;position:sticky;top:24px}
.record__art figcaption{
  font-family:var(--f-util);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding-top:10px;opacity:.7;
}

/* the readout: a strip of labelled cells under the cover */
.readout{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  align-items:stretch;border:1px solid var(--ink);border-top:0;
}
.readout__key{
  background:var(--yellow);color:#14120F;border:0;border-right:1px solid var(--ink);
  font-size:14px;cursor:pointer;min-height:56px;
}
.readout__key:hover{background:var(--magenta);color:#fff}
.readout__id{padding:9px 14px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.readout__id b{font:600 9px/1.6 var(--f-util);letter-spacing:.14em;color:var(--yellow)}
.readout__id span{
  font-family:var(--f-display);font-variation-settings:"wdth" 88,"wght" 650;font-size:17px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.readout__clock{
  display:flex;align-items:center;gap:5px;padding:0 14px;
  border-left:1px solid var(--ink);
  font:400 11px/1 var(--f-util);letter-spacing:.05em;font-variant-numeric:tabular-nums;
}
.readout__clock i{opacity:.4;font-style:normal}

.lede__acts{display:flex;flex-wrap:wrap;gap:10px}

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font:600 12px/1 var(--f-util);letter-spacing:.08em;text-transform:uppercase;
  padding:13px 18px;border:2px solid var(--ink);background:transparent;color:var(--ink);
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn__glyph{font-size:10px}

/* ═══ THE HALFTONE ════════════════════════════════════════
   Three process screens, rotated to the classic angles, multiplied
   into a rosette. No image assets — real artwork drops in behind
   the same screen later.                                         */
.cover{
  --cell:9px;
  --dot:2.9px;
  position:relative;
  aspect-ratio:1;
  width:100%;
  overflow:hidden;
  background-color:var(--paper-2);
  /* yellow screen, 0° */
  background-image:
    radial-gradient(78% 62% at 74% 22%,var(--paper-2) 0 22%,transparent 76%),
    radial-gradient(circle at 50% 50%,var(--yellow) var(--dot),transparent calc(var(--dot) + .6px));
  background-size:100% 100%,var(--cell) var(--cell);
  background-blend-mode:lighten,normal;
  border:var(--rule);
  isolation:isolate;
}
.cover::before,.cover::after{
  content:"";position:absolute;
  inset:-60%;
  mix-blend-mode:multiply;
  background-size:var(--cell) var(--cell);
}
.cover::before{               /* cyan, 15° */
  transform:rotate(15deg);
  background-image:radial-gradient(circle at 50% 50%,var(--cyan) calc(var(--dot) * .78),transparent calc(var(--dot) * .78 + .6px));
  -webkit-mask-image:radial-gradient(60% 55% at 32% 30%,#000 8%,transparent 78%);
          mask-image:radial-gradient(60% 55% at 32% 30%,#000 8%,transparent 78%);
}
.cover::after{                /* magenta, 75° */
  transform:rotate(75deg);
  background-image:radial-gradient(circle at 50% 50%,var(--magenta) calc(var(--dot) * .92),transparent calc(var(--dot) * .92 + .6px));
  -webkit-mask-image:radial-gradient(72% 68% at 68% 74%,#000 4%,transparent 82%);
          mask-image:radial-gradient(72% 68% at 68% 74%,#000 4%,transparent 82%);
}
html[data-edition="night"] .cover::before,
html[data-edition="night"] .cover::after{mix-blend-mode:screen}

.cover--xl{--cell:11px;--dot:3.6px}
.cover--sm{--cell:6px;--dot:2px}

/* the screen resolves as the track plays */
.cover{transition:--dot .4s}
.cover.is-playing{--dot:4.4px}

/* ═══ SHEET (a section of the paper) ══════════════════════ */
.sheet{padding:0 var(--gut) clamp(40px,6vw,72px)}
.sheet__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem;
  border-top:3px solid var(--ink);padding-top:10px;margin-bottom:6px;
}
.sheet__title{
  margin:0;font-family:var(--f-display);
  font-variation-settings:"wdth" 78,"wght" 800;
  font-size:clamp(30px,4.4vw,58px);text-transform:uppercase;letter-spacing:-.02em;
  line-height:1;
}
.sheet__meta{margin:0;opacity:.62}
.sheet__foot{
  font-family:var(--f-util);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border-top:var(--rule);padding-top:12px;margin:0;
}
.sheet__foot a{color:var(--magenta);text-decoration:none}
.sheet__foot a:hover{text-decoration:underline}

/* ═══ FOOT ════════════════════════════════════════════════ */
.foot{padding:0 var(--gut) 26px}
.foot__rule{
  display:flex;flex-wrap:wrap;gap:1.4rem;
  border-top:3px solid var(--ink);padding-top:12px;margin:0;
  font-family:var(--f-util);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.foot__rule a{color:var(--magenta);text-decoration:none}

/* ═══ TRANSPORT — an instrument panel, not a media player ═ */
.transport{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:var(--bar);
  display:grid;
  grid-template-columns:var(--bar) minmax(0,220px) minmax(0,1fr) auto var(--bar);
  align-items:center;
  background:var(--ink);color:var(--paper);
  border-top:3px solid var(--ink);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.transport.is-up{transform:none}

.transport__key{
  height:var(--bar);width:100%;
  background:var(--yellow);color:var(--ink);
  border:0;border-right:1px solid var(--ink);
  font-size:15px;cursor:pointer;
}
.transport__key--ghost{
  background:transparent;color:var(--paper);
  border:0;border-left:1px solid color-mix(in srgb,var(--paper) 26%,transparent);
  font-size:11px;
}
.transport__key--ghost:hover{background:var(--magenta);color:#fff}

.transport__id{padding:0 16px;min-width:0}
.transport__id b{
  display:block;font:600 9px/1.6 var(--f-util);letter-spacing:.14em;color:var(--yellow);
}
.transport__id span{
  display:block;font-family:var(--f-display);
  font-variation-settings:"wdth" 88,"wght" 600;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.transport__scrub{padding:0 16px}
/* the scrubber is a dot screen too — the halftone runs all the way down */
.scrub{
  position:relative;height:22px;cursor:pointer;
  display:flex;align-items:center;
}
.scrub::before{
  content:"";position:absolute;inset:auto 0;height:9px;
  background-image:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--paper) 34%,transparent) 1.4px,transparent 2px);
  background-size:7px 9px;
}
.scrub__fill{
  position:absolute;left:0;height:9px;width:0;
  background-image:radial-gradient(circle at 50% 50%,var(--yellow) 2.2px,transparent 2.8px);
  background-size:7px 9px;
}
.scrub__head{
  position:absolute;left:0;width:3px;height:22px;background:var(--magenta);
  transform:translateX(-1px);
}

.transport__clock{
  padding:0 14px;font:400 11px/1 var(--f-util);letter-spacing:.05em;
  display:flex;gap:5px;
}
.transport__slash{opacity:.4}

/* ═══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width:900px){
  .record{grid-template-columns:minmax(0,1fr)}
  .record__art{position:static;max-width:440px}
  .rail a{flex:1 1 40%}
}
@media (max-width:620px){
  .folio{gap:.9rem;flex-wrap:wrap}
  .reels{grid-template-columns:1fr}
  .rail{flex-direction:column}
  .rail a{border-right:0;border-bottom:var(--rule);padding:12px 4px}
  .rail a:last-child{border-bottom:0}
  .transport{grid-template-columns:52px minmax(0,1fr) auto 52px;--bar:56px}
  .transport__scrub{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* the dot is animatable, so the screen can resolve rather than snap */
@property --dot{syntax:"<length>";inherits:true;initial-value:2.9px}

/* night edition corrections: the yellow plate stays yellow, so its type
   stays dark; and the tonal knockout has to subtract, not add. */
html[data-edition="night"] .cover{background-blend-mode:darken,normal}
html[data-edition="night"] .transport__key{background:var(--yellow);color:#14120F}

/* ═══ REAL ARTWORK BEHIND THE SCREEN ══════════════════════
   The placeholder cover invents its own image out of gradients.
   When there is real art, it goes in as the bottom plate and the
   same three process screens multiply over it — so a photograph
   and a generated cover are the same object on the page.        */
.cover--art{
  /* A generated cover IS its screen, so it can carry a full separation.
     A photograph already has the image in it — run the same separation
     over the top and you get mud. So here the art is the plate and the
     rosette is texture over it: you read the picture, then the dots. */
  --cell:5px;
  --dot:1.6px;
  /* the image itself is set inline by app.js — a relative url() inside a
     custom property resolves against THIS stylesheet, not the document,
     which silently points it at css/assets/. Set it on the element. */
  background-image:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-blend-mode:normal;
}
.cover--art::before,.cover--art::after{
  inset:-60%;
  -webkit-mask-image:none;mask-image:none;
  opacity:.3;
}
.cover--xl.cover--art{--cell:6px;--dot:1.9px}
.cover--sm.cover--art{--cell:3px;--dot:1px}
.cover--sm.cover--art::before,.cover--sm.cover--art::after{opacity:.22}
/* the screen still resolves as the track plays — just not into mud */
.cover--art.is-playing{--dot:2.5px}
.cover--art.is-playing::before,.cover--art.is-playing::after{opacity:.42}
html[data-edition="night"] .cover--art{filter:brightness(.9) contrast(1.04)}

/* ═══ PLATE — the looping studio footage under the flag ═══ */
.plate{
  position:relative;margin:0;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  overflow:hidden;background:var(--paper-2);
  height:clamp(150px,26vh,260px);
}
.plate__vid{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15) blur(1.5px);
  transform:scale(1.02);   /* hides the soft edge the blur leaves at the frame */
}
.plate__screen{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,var(--cyan) 1.7px,transparent 2.3px);
  background-size:6px 6px;
  mix-blend-mode:multiply;opacity:.7;
}
html[data-edition="night"] .plate__screen{mix-blend-mode:screen;opacity:.5}
.plate__cap{
  position:absolute;left:0;bottom:0;
  font:600 10px/1 var(--f-util);letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:7px 12px;
}
.plate__cap b{color:var(--yellow);margin-right:.7em}

/* ═══ REELS — sound for picture ═══════════════════════════ */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--gut)}
.reel{margin:0;border:var(--rule);background:var(--paper-2)}
.reel__frame{
  position:relative;display:block;width:100%;padding:0;border:0;
  background:var(--ink);cursor:pointer;overflow:hidden;line-height:0;
}
.reel__vid{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink);
  filter:blur(2px);transform:scale(1.02);transition:filter .35s;
}
.reel.is-live .reel__vid{filter:none}   /* sharp once you press play */
.reel__screen{
  position:absolute;inset:0;pointer-events:none;transition:opacity .35s;
  background-image:radial-gradient(circle at 50% 50%,var(--magenta) 1.6px,transparent 2.2px);
  background-size:5px 5px;mix-blend-mode:multiply;opacity:.55;
}
html[data-edition="night"] .reel__screen{mix-blend-mode:screen;opacity:.4}
.reel.is-live .reel__screen{opacity:0}
.reel__key{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:var(--yellow);color:var(--ink);border:2px solid var(--ink);
  display:grid;place-items:center;font-size:20px;
  transition:transform .18s,background .18s;
}
.reel__frame:hover .reel__key{transform:translate(-50%,-50%) scale(1.08);background:var(--magenta);color:#fff}
.reel.is-live .reel__key{opacity:0;pointer-events:none}
.reel__bar{
  display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap;
  border-top:var(--rule);padding:10px 12px 4px;
}
.reel__code{font:800 11px/1 var(--f-util);letter-spacing:.1em;color:var(--magenta)}
.reel__title{font-family:var(--f-display);font-variation-settings:"wdth" 115,"wght" 800;
  font-size:22px;text-transform:uppercase;letter-spacing:-.01em}
.reel__role{font:400 10px/1.3 var(--f-util);letter-spacing:.07em;text-transform:uppercase;opacity:.75}
.reel__credit{
  font:300 9px/1.5 var(--f-util);letter-spacing:.04em;
  padding:6px 12px 11px;margin:0;opacity:.6;
}

/* ═══ COLOPHON ════════════════════════════════════════════ */
.colo__grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:var(--gut);align-items:start}
.colo__portrait{margin:0}
.colo__portrait figcaption{
  font-family:var(--f-util);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding-top:8px;border-top:var(--rule);margin-top:10px;
}
.portrait{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border:var(--rule);
  background-color:var(--paper-2);background-size:cover;background-position:center 22%;
  filter:grayscale(1) contrast(1.12);
}
.portrait::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 50% 50%,var(--cyan) 1.8px,transparent 2.4px);
  background-size:6px 6px;mix-blend-mode:multiply;opacity:.75;
}
html[data-edition="night"] .portrait::after{mix-blend-mode:screen;opacity:.5}
.colo__line{
  font:600 11px/1 var(--f-util);letter-spacing:.12em;text-transform:uppercase;
  color:var(--magenta);margin:0 0 1rem;
}
.colo__bio{
  font-family:var(--f-read);font-size:clamp(16px,1.5vw,19px);line-height:1.55;
  margin:0 0 1.6rem;max-width:60ch;
}
.colo__part{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;
  padding:.9rem 0;border-top:var(--rule);
}
.colo__part:first-child{border-top:0;padding-top:0}
.colo__part dt{
  font:600 11px/1.5 var(--f-util);letter-spacing:.12em;text-transform:uppercase;
  padding-top:.3em;
}
.colo__part dt b{display:block;font-weight:400;opacity:.6}
.colo__part dd{margin:0}
@media (max-width:600px){
  .colo__part{grid-template-columns:1fr;gap:.35rem}
}
.colo__links{
  display:flex;flex-wrap:wrap;gap:0;list-style:none;padding:0;margin:1.6rem 0 0;
  border-top:var(--rule);
}
.colo__links a{
  display:block;padding:11px 16px 11px 0;margin-right:16px;
  font:600 11px/1 var(--f-util);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.colo__links a:hover{color:var(--magenta)}
.colo__links a::after{content:" ↗";opacity:.5}

@media (max-width:820px){
  .colo__grid{grid-template-columns:1fr}
  .colo__portrait{max-width:280px}
}

/* ═══════════════════════════════════════════════════════════
   MASTHEAD MODES
   plate — the word is ink, the plate is a band below it (original)
   mask  — the word is a window onto the plate
   bleed — the plate runs full width behind the whole masthead
   Set with ?masthead=… ; persisted like the edition.
   ═══════════════════════════════════════════════════════════ */

/* ── process red ──────────────────────────────────────────
   There is no red ink here. On press, red is magenta overprinted
   on yellow — so the red screen is two of the existing plates
   multiplied, not a fourth colour bolted onto the palette.     */
:root{
  --red-screen:
    radial-gradient(circle at 50% 50%,var(--magenta) 2.1px,transparent 2.7px),
    radial-gradient(circle at 50% 50%,var(--yellow) 2.6px,transparent 3.2px);
  --red-cell:5.5px;
}

.masthead{position:relative;isolation:isolate}
.masthead__bg,.masthead__veil{display:none}

/* the film-in-letters window */
.flag__film{display:none;position:relative;width:100%;overflow:hidden}
.flag__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.3) brightness(1.05);
}
.flag__screen{
  position:absolute;inset:0;
  background-image:var(--red-screen);
  background-size:var(--red-cell) var(--red-cell);
  background-position:0 0,1.6px 1.6px;      /* offset = the rosette */
  background-blend-mode:multiply;
  mix-blend-mode:multiply;opacity:.85;
}
.flag__knock{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ── MASK MODE ────────────────────────────────────────────── */
html[data-masthead="mask"] .flag__word{display:none}
html[data-masthead="mask"] .flag__film{display:block}

/* ── BLEED MODE ───────────────────────────────────────────── */
html[data-masthead="bleed"] .masthead{padding-top:10px;padding-bottom:12px}
html[data-masthead="bleed"] .masthead__bg{
  display:block;position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.35) brightness(.62);
}
html[data-masthead="bleed"] .masthead__veil{
  display:block;position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(circle at 50% 50%,var(--cyan) 1.7px,transparent 2.3px);
  background-size:6px 6px;mix-blend-mode:screen;opacity:.32;
}
/* the word, filled with the red overprint screen */
html[data-masthead="bleed"] .flag__word{
  color:transparent;
  background-color:#FF2E4D;                         /* fallback if no bg-clip */
  background-image:var(--red-screen);
  background-size:var(--red-cell) var(--red-cell);
  background-position:0 0,1.6px 1.6px;
  background-blend-mode:multiply;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1.5px rgba(255,255,255,.22);
}
/* everything else in the masthead has to survive over video */
html[data-masthead="bleed"] .masthead .folio,
html[data-masthead="bleed"] .masthead .rail a{color:#F2EFE6}
html[data-masthead="bleed"] .masthead .folio--rule,
html[data-masthead="bleed"] .masthead .rail,
html[data-masthead="bleed"] .masthead .rail a{border-color:rgba(242,239,230,.45)}
html[data-masthead="bleed"] .masthead .rail a:hover{background:#F2EFE6;color:var(--ink)}
html[data-masthead="bleed"] .masthead .edition{color:#F2EFE6;border-color:rgba(242,239,230,.5)}
html[data-masthead="bleed"] .masthead .edition__lamp{border-color:#F2EFE6}
/* in bleed the plate band below would be the same footage twice */
html[data-masthead="bleed"] .plate,
html[data-masthead="mask"]  .plate{display:none}

/* ═══ DUO — both plates at once ═══════════════════════════
   The footage runs full width behind the masthead in a cool
   separation, and the same footage runs hot inside the letters.
   One image, two screens — which is what a press actually does
   when you pull a colour. The word stops being a window onto a
   different thing and becomes the same thing, overprinted. */
.flag__plate{position:absolute;inset:0;display:block}

html[data-masthead="duo"] .flag__word{display:none}
html[data-masthead="duo"] .flag__film{display:block}
html[data-masthead="duo"] [data-knock-paper]{display:none}
html[data-masthead="duo"] .flag__plate{
  -webkit-mask:url(#letters);
          mask:url(#letters);
}
/* hot plate: the red overprint, and bright enough to hold the letterform
   against the cool field behind it */
html[data-masthead="duo"] .flag__vid{filter:grayscale(1) contrast(1.5) brightness(1.5)}
html[data-masthead="duo"] .flag__screen{opacity:.95}
[data-flag-rule]{display:none}

/* cool plate: the same bleed backdrop, pushed further down and blue */
html[data-masthead="duo"] .masthead{padding-top:10px;padding-bottom:12px}
html[data-masthead="duo"] .masthead__bg{
  display:block;position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(.34);
}
html[data-masthead="duo"] .masthead__veil{
  display:block;position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(circle at 50% 50%,var(--cyan) 1.9px,transparent 2.5px);
  background-size:6px 6px;mix-blend-mode:screen;opacity:.5;
}
/* the rest of the masthead is over video, same as bleed */
html[data-masthead="duo"] .masthead .folio,
html[data-masthead="duo"] .masthead .rail a{color:#F2EFE6}
html[data-masthead="duo"] .masthead .folio--rule,
html[data-masthead="duo"] .masthead .rail,
html[data-masthead="duo"] .masthead .rail a{border-color:rgba(242,239,230,.45)}
html[data-masthead="duo"] .masthead .rail a:hover{background:#F2EFE6;color:var(--ink)}
html[data-masthead="duo"] .masthead .edition{color:#F2EFE6;border-color:rgba(242,239,230,.5)}
html[data-masthead="duo"] .masthead .edition__lamp{border-color:#F2EFE6}
html[data-masthead="duo"] .plate{display:none}

/* ═══ FIELD — a section head as a printed band ════════════
   Carries the masthead's language down the page. Same reasoning
   as the process red up top, run the other way: cyan overprinted
   with magenta is process blue/violet, so the gradient is mixed
   out of inks already in the box rather than adding new ones.
   The red stays unique to the hero.                            */
.sheet__head--field{
  --violet:color-mix(in srgb,var(--cyan) 62%,var(--magenta));
  --deep:#080C26;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  align-items:flex-end;
  /* full bleed out of the sheet's gutter */
  margin-inline:calc(var(--gut) * -1);
  padding:clamp(20px,3vw,34px) var(--gut) clamp(16px,2.2vw,26px);
  margin-bottom:18px;
  border-top:3px solid var(--ink);
  /* No ground of its own any more. The section's footage runs straight
     through the head so the page reads as one continuous plate. */
  background:transparent;
  min-height:clamp(96px,11vw,148px);
}
/* the screen, over the gradient but under the type — negative z-index
   paints above the parent's background and below its content */
.sheet__head--field::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,var(--cyan) 1.9px,transparent 2.5px);
  background-size:6px 6px;
  mix-blend-mode:screen;opacity:.45;
}
.sheet__head--field .sheet__title{color:#F2EFE6}
.sheet__head--field .sheet__meta{color:#F2EFE6;opacity:.72}

@media (max-width:620px){
  .sheet__head--field{align-items:flex-start;flex-direction:column;gap:.4rem}
}

/* ═══ GROUND — the footage behind a block ═════════════════
   Same clip and same treatment as the masthead, used as the ground
   for blocks down the page. Sits under the block's own content:
   a negative z-index paints above the parent's background and below
   its in-flow children, so nothing else has to be repositioned. */
.has-ground{position:relative;isolation:isolate;overflow:hidden}
.ground__vid{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.35) brightness(.62);
  transform:scale(1.03);
}
.ground__screen{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,var(--cyan) 1.7px,transparent 2.3px);
  background-size:6px 6px;mix-blend-mode:screen;opacity:.32;   /* same as .masthead__veil */
}



/* ═══ REVERSED — a section standing on the footage ════════
   The blocks no longer sit on paper, so every component inside them
   has to flip. Rather than restyling each one, the section adopts the
   night ink set locally: everything already reads its colour from
   these tokens, so buttons, rules, covers and the ledger all reverse
   on their own. */
.has-ground{
  --paper:#0B0F26;
  --paper-2:#141A3A;
  --ink:#EDEAE1;
  --cyan:#5B8CFF;
  --magenta:#FF3FAE;
  --yellow:#FFE04D;
  color:var(--ink);
}

/* the yellow plate stays yellow wherever it lands, so its type stays dark */
.has-ground .transport__key{color:#14120F}
/* Artwork is not part of the reversal — a photograph carries its own
   light and stays exactly as it was screened. Only the GENERATED cover,
   which is built from the ink tokens, follows the flip. */
.has-ground .cover:not(.cover--art){background-blend-mode:darken,normal}

/* the paper ground is gone — anything showing between blocks is press blue */
body{background:#080C26}


/* ═══════════════════════════════════════════════════════════
   ONE BLUE
   The blue is the masthead's blue: its exposure on the footage
   and its one cyan screen over it, nothing else. Every section
   below now pulls the identical numbers, and the extra layers
   that were stacking on top of it — a second screen inside the
   section heads, a different flat blue under the video, the
   plate band's own grade — are gone, since each of those was
   shifting the colour a little further from the top bar.
   The masthead itself is untouched.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* lifted verbatim from html[data-masthead="bleed"] .masthead__bg / __veil */
  --plate-look:grayscale(1) contrast(1.35) brightness(.62);
  /* the literal masthead cyan, NOT var(--cyan): the reversed sections
     rebind --cyan to #5B8CFF, so a screen written against the token came
     out several stops lighter down the page than it does up top. */
  --screen-ink:#0047F0;
  --screen-cell:6px;
  --screen-dot:1.7px;
  --screen-gap:2.3px;
  --screen-op:.32;
  --ground:#080C26;                  /* the flat blue under everything */
}
html[data-edition="night"]{--screen-ink:#3D7BFF}   /* matches the veil at night */

/* one flat blue: the body colour, the section colour, the block colour */
body{background:var(--ground)}
.has-ground{--paper:var(--ground);--paper-2:var(--ground);background:var(--ground)}
.plate,.reel,.reel__frame,.reel__vid{background:var(--ground)}
.portrait{background-color:var(--ground)}
.sheet__head--field{--deep:var(--ground);--violet:transparent;background:transparent}

/* one exposure on the footage */
/* sections run darker than the masthead on purpose: the masthead only
   shows a thin, dark middle slice of the frame, the taller sections show
   whole panels of bright hardware. .44 matches their average to the top.
   No blur — the masthead is sharp, and blur read as a lighter haze. */
.ground__vid{filter:grayscale(1) contrast(1.35) brightness(.44)}
.plate__vid{filter:var(--plate-look) blur(1.5px)}

/* one screen over it — same ink, same rosette, same weight */
.ground__screen,
.plate__screen,
.reel__screen,
.portrait::after{
  background-image:radial-gradient(circle at 50% 50%,var(--screen-ink) var(--screen-dot),transparent var(--screen-gap));
  background-size:var(--screen-cell) var(--screen-cell);
  mix-blend-mode:screen;
  opacity:var(--screen-op);
}
html[data-edition="night"] .plate__screen,
html[data-edition="night"] .reel__screen,
html[data-edition="night"] .portrait::after{mix-blend-mode:screen;opacity:var(--screen-op)}
.reel.is-live .reel__screen{opacity:0}

/* the section head no longer lays a second screen over the ground's —
   two screens on the same pixels was the band of lighter blue */
.sheet__head--field::after{display:none}

/* the portrait is a photograph, not footage: it keeps its own light,
   and only takes the screen above */
.portrait{filter:none}

/* ── white separators out, everywhere but the masthead ────── */
.has-ground .sheet__head,
.has-ground .sheet__head--field,
.has-ground .sheet__foot,
.has-ground .colo__links,
.has-ground .colo__portrait figcaption,
.has-ground .reel,
.has-ground .reel__bar,
.has-ground .foot__rule,
.has-ground .foot__rule{border:0}
.plate{border-top:0;border-bottom:0}


/* ═══ NEON GROUND ═════════════════════════════════════════
   Below the masthead the page stands on light, not paper: a deep
   indigo with soft violet and electric-blue glows. The glows are
   fixed to the window, so they drift as you scroll instead of
   repeating per section; the sections themselves go transparent. */
:root{--ground:#07061A}
body{background:var(--ground)}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* kept as dark as the masthead: the glows are a tint, not a light source */
  background:
    radial-gradient(60% 55% at 12% 18%,rgba(124,58,255,.16),transparent 70%),
    radial-gradient(55% 60% at 92% 38%,rgba(40,96,255,.15),transparent 72%),
    radial-gradient(70% 50% at 50% 108%,rgba(214,60,255,.11),transparent 70%),
    linear-gradient(180deg,#07061A,#0B0822 60%,#07061A);
}
.has-ground{background:transparent}
/* the screen reads violet-blue on this ground, not press cyan */
:root{--screen-ink:#5A4BFF;--screen-op:.16}

/* ═══ THE COVER — the masthead as a full first screen ══════
   ESCHER takes the whole opening screen: dateline pinned top, the word
   centred, tagline and nav along the bottom. The footage fades into the
   ground at the foot, so scrolling reads as one plate running out into
   the page rather than a strip with a seam under it. */
html[data-masthead="bleed"] .masthead{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  padding-bottom:18px;border-bottom:0;
}
html[data-masthead="bleed"] .flag{
  flex:1;display:flex;align-items:center;
  padding-block:4vh;
}
/* the fade: the footage and its screen dissolve to nothing at the foot,
   so the ground's own glow shows through and there is no edge to find */
html[data-masthead="bleed"] .masthead__bg,
html[data-masthead="bleed"] .masthead__veil{
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 50%,transparent 100%);
}
/* the nav closes on a hairline, not a bar */
html[data-masthead="bleed"] .rail{border-bottom-width:1px}
/* and the first section's screen fades up out of it, so the dots don't start on a line */
html[data-masthead="bleed"] #music > .ground__screen{
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 160px);
          mask-image:linear-gradient(180deg,transparent,#000 160px);
}

/* ═══ THE STAGE — one screen, one thing at a time ══════════════
   The masthead is pinned to the window and never leaves. Its middle
   is the stage: ESCHER at home, or one section at a time, faded in
   where the name was. Outgoing things leave at once; the incoming
   scene waits for them, so the two never overlap on screen.       */
html[data-layout="stage"] body{overflow:hidden;height:100svh;padding-bottom:0}
html[data-layout="stage"] .masthead{position:fixed;inset:0;z-index:1;min-height:0}
html[data-layout="stage"]:has(.transport.is-up) .masthead{bottom:var(--bar)}
html[data-layout="stage"] .foot{display:none}

/* the footage runs the full height again, and dims when a scene is up */
html[data-layout="stage"] .masthead__bg,
html[data-layout="stage"] .masthead__veil{-webkit-mask-image:none;mask-image:none}
html[data-layout="stage"] .masthead__bg{transition:filter .7s ease}
html[data-layout="stage"]:not([data-scene="home"]) .masthead__bg{
  filter:grayscale(1) contrast(1.3) brightness(.3);
}

/* the name out… */
html[data-layout="stage"] .flag{transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
html[data-layout="stage"]:not([data-scene="home"]) .flag{
  opacity:0;transform:scale(.97);pointer-events:none;
}

/* …the scene in */
html[data-layout="stage"] main{
  position:fixed;left:0;right:0;z-index:2;
  top:var(--stage-top,60px);bottom:var(--stage-bottom,140px);
  pointer-events:none;
}
html[data-layout="stage"] main > section{
  position:absolute;inset:0;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
  padding-block:clamp(16px,3vh,40px);
}
html[data-layout="stage"][data-scene="music"]    #music,
html[data-layout="stage"][data-scene="picture"]  #picture,
html[data-layout="stage"][data-scene="about"]    #about{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .45s ease .3s,transform .6s cubic-bezier(.2,.7,.3,1) .3s,visibility 0s;
}
/* scenes sit in the middle of the stage, and scroll inside it only if they must */
html[data-layout="stage"] #music{align-content:safe center}
html[data-layout="stage"] .sheet{display:flex;flex-direction:column;justify-content:safe center}
/* the footage is the ground now; the sections bring no ground of their own */
html[data-layout="stage"] .ground__screen{display:none}
/* the cover can't be taller than the stage */
html[data-layout="stage"] .record__art{position:static;max-width:calc(100svh - var(--stage-top,60px) - var(--stage-bottom,140px) - 150px);justify-self:end;width:100%}
html[data-layout="stage"] .sheet__head--field{margin-inline:0;padding-inline:0;min-height:0}

/* the lit key on the rail */
html[data-layout="stage"] .rail a[aria-current]{background:#F2EFE6;color:#14120F}
/* the way home: only there when you're not */
.folio__home{display:none;text-decoration:none;color:var(--yellow)}
html[data-layout="stage"]:not([data-scene="home"]) .folio__home{display:inline}
.folio__home:hover{text-decoration:underline}

/* the rail keys carry a faint plate of their own, so they read over
   bright footage without waiting for a hover */
html[data-masthead="bleed"] .masthead .rail a{
  background:rgba(242,239,230,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
html[data-masthead="bleed"] .masthead .rail a:hover{background:#F2EFE6;color:var(--ink)}
html[data-layout="stage"] .rail a[aria-current]{background:#F2EFE6;color:#14120F}

/* ═══ THE MUSIC PANE ══════════════════════════════════════════
   The same frosted material as the rail keys, pulled up to the size of
   the stage: a sheet of glass the record sits on. Crop marks at the
   corners, because it's a proof on the press, not a card.         */
html[data-layout="stage"] #music{
  --mark:rgba(242,239,230,.55);
  inset:clamp(8px,1.6vh,18px) var(--gut);
  padding:clamp(20px,3.2vh,40px) clamp(20px,2.6vw,44px);
  background-color:rgba(242,239,230,.07);
  background-image:
    /* top-left */
    linear-gradient(var(--mark),var(--mark)),linear-gradient(var(--mark),var(--mark)),
    /* top-right */
    linear-gradient(var(--mark),var(--mark)),linear-gradient(var(--mark),var(--mark)),
    /* bottom-left */
    linear-gradient(var(--mark),var(--mark)),linear-gradient(var(--mark),var(--mark)),
    /* bottom-right */
    linear-gradient(var(--mark),var(--mark)),linear-gradient(var(--mark),var(--mark));
  background-size:16px 1px,1px 16px;
  background-position:
    8px 8px,8px 8px,
    calc(100% - 8px) 8px,calc(100% - 8px) 8px,
    8px calc(100% - 8px),8px calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px);
  background-repeat:no-repeat;
  border:1px solid rgba(242,239,230,.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
          backdrop-filter:blur(16px) saturate(1.25);
}
/* the cover gives back the room the pane's padding took */
html[data-layout="stage"] #music .record__art{
  max-width:calc(100svh - var(--stage-top,60px) - var(--stage-bottom,140px) - 220px);
}

/* ═══ ONE PLAYER ══════════════════════════════════════════════
   The bottom transport is gone; the readout under the cover is the
   player. Its scrubber runs the full width along the foot.        */
html[data-layout="stage"] body{padding-bottom:0}
.readout__scrub{grid-column:1 / -1;height:28px;margin:0 14px}
/* the rule between the controls and the scrubber */
.readout > :not(.readout__scrub){border-bottom:1px solid var(--ink)}
.readout__scrub::before{
  background-image:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ink) 30%,transparent) 1.4px,transparent 2px);
}
.readout__scrub .scrub__head{height:14px}

/* something's playing and you've walked away: the Music key says so */
html[data-playing="true"]:not([data-scene="music"]) .rail a[href="#music"] b{color:var(--yellow)}
html[data-playing="true"]:not([data-scene="music"]) .rail a[href="#music"] b::after{
  content:" ▶";font-size:.8em;
}

/* the readout stands a little off the cover, so it needs its own top edge */
.readout{margin-top:10px;border-top:1px solid var(--ink)}

/* ═══ CALM PASS — one sheet of glass ══════════════════════════
   The pane is the only frosted layer. Everything on it is plain
   type and hairlines: no colour blocks, no nested panels, no
   hardware. The loaded track is simply the brightest line.       */
#music{
  --glass-ink:#F2EFE6;
  --glass-dim:rgba(242,239,230,.55);
  --glass-line:rgba(242,239,230,.14);
}
#music:focus-visible,#music :focus-visible{outline-color:var(--glass-ink)}
#music .record__label b{color:var(--glass-dim)}

/* the setlist: rows, one voice, not Scher blocks */
#music .setlist{margin:0 0 1.6rem;border-top:1px solid var(--glass-line)}
#music .setlist li{line-height:normal}
#music .cut,
#music .cut--a,#music .cut--b,#music .cut--c{
  display:flex;justify-content:space-between;align-items:center;gap:1em;
  width:100%;padding:.32em 0;
  background:transparent;color:var(--glass-dim);
  border-bottom:1px solid var(--glass-line);
  font-size:clamp(26px,3.2vw,48px);font-style:normal;
  font-variation-settings:"wdth" 100,"wght" 650;
  letter-spacing:-.02em;text-transform:none;
  transition:color .2s;
}
#music .cut:hover{transform:none;color:var(--glass-ink)}
#music .cut.is-current,#music .cut.is-current:hover{
  background:transparent;color:var(--glass-ink);transform:none;
}
#music .cut__meta{
  flex-direction:row;align-items:center;gap:1.4em;padding:0;
  font:400 11px/1 var(--f-util);letter-spacing:.08em;opacity:.8;
}
#music .cut__key{font-size:10px}

/* buttons: hairline pills */
#music .btn{border:1px solid rgba(242,239,230,.3);border-radius:999px;color:var(--glass-ink)}
#music .btn:hover{background:rgba(242,239,230,.1);color:var(--glass-ink)}
#music .btn--solid{background:var(--glass-ink);border-color:var(--glass-ink);color:#14120F}
#music .btn--solid:hover{background:rgba(242,239,230,.82);border-color:transparent;color:#14120F}

/* the cover is just the photograph */
#music .cover{border:0;border-radius:10px}
#music .cover::before,#music .cover::after{display:none}

/* the readout: no cells, just a line of type and a thin scrubber */
#music .readout,
#music .readout > :not(.readout__scrub){border:0}
#music .readout{margin-top:14px;grid-template-columns:44px minmax(0,1fr) auto;align-items:center}
#music .readout .readout__key{
  width:44px;height:44px;min-height:0;border-radius:50%;
  background:transparent;color:var(--glass-ink);
  border:1px solid rgba(242,239,230,.3);font-size:12px;
}
#music .readout__key:hover{background:rgba(242,239,230,.1);color:var(--glass-ink)}
#music .readout__id b{color:var(--glass-dim)}
#music .readout__clock{color:var(--glass-dim)}
#music .readout__scrub{margin:6px 0 0;height:18px}
#music .readout__scrub::before{height:2px;border-radius:2px;background:var(--glass-line)}
#music .readout__scrub .scrub__fill{height:2px;border-radius:2px;background:var(--glass-ink)}
#music .readout__scrub .scrub__head{
  width:10px;height:10px;border-radius:50%;background:var(--glass-ink);transform:translateX(-5px);
}

/* ═══ FLAG MEASURE ════════════════════════════════════════════
   How much of the width the word takes; fitFlag() reads it. On the
   cover the word is a narrow heavy cut, pulled in from the sides and
   stretched a little taller, centred in the room that's left.     */
.flag__word{--flag-measure:1}
html[data-masthead="bleed"] .flag{justify-content:center}
html[data-masthead="bleed"] .flag__word{
  --flag-measure:.68;--stretch:1.2;
  font-variation-settings:"wdth" 70,"wght" 900;
  transform:scaleY(var(--stretch));transform-origin:center;
  margin-block:calc((var(--stretch) - 1) * .37em);
  -webkit-text-stroke-width:1px;
}
/* the way home, off the cover: the same word, small, in the corner —
   same cut, same stretch, same red screen as the big one */
html[data-layout="stage"]:not([data-scene="home"]) .folio__home{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 70,"wght" 900;
  font-size:26px;line-height:1;letter-spacing:-.02em;
  display:inline-block;transform:scaleY(1.2);transform-origin:left center;
  color:transparent;
  background-color:#FF2E4D;
  /* the big screen at half pitch — at full pitch the dots are as big as
     the strokes and it reads as yellow speckle, not red */
  background-image:
    radial-gradient(circle at 50% 50%,var(--magenta) 1.05px,transparent 1.35px),
    radial-gradient(circle at 50% 50%,var(--yellow) 1.3px,transparent 1.6px);
  background-size:2.75px 2.75px;
  background-position:0 0,.8px .8px;
  background-blend-mode:multiply;
  -webkit-background-clip:text;background-clip:text;
  margin-right:.3rem;
}
html[data-layout="stage"] .folio__home:hover{text-decoration:none;opacity:.85}
/* it arrives as the big word leaves: a short settle into the corner,
   timed to the flag's own fade-out */
html[data-layout="stage"]:not([data-scene="home"]) .folio__home{
  animation:mark-in .45s cubic-bezier(.2,.7,.3,1) .15s both;
}
@keyframes mark-in{
  from{opacity:0;transform:translate(12px,10px) scale(1.5,1.8)}
  to  {opacity:1;transform:scaleY(1.2)}
}

/* the corner mark sits square in the corner: as far from the top as the
   gutter keeps it from the left. The whole top row moves with it, on
   every scene, so nothing jumps when you leave the cover. */
html[data-layout="stage"][data-masthead="bleed"] .masthead{padding-top:calc(var(--gut) - 1px)}
/* the dateline hangs from the top of the corner mark, not its baseline */
html[data-layout="stage"] .masthead .folio:not(.folio--rule){align-items:flex-start}

/* ═══ THE CATALOGUE ═══════════════════════════════════════════
   Ten tracks and counting, so the list scrolls inside its own column
   and the deck and buttons under it stay put. On the wide layout only —
   stacked on a phone, the whole pane scrolls instead.              */
#music .cut,
#music .cut--a,#music .cut--b,#music .cut--c{font-size:clamp(22px,2.3vw,36px);padding:.28em 0}
@media (min-width:901px){
  html[data-layout="stage"] #music{grid-template-rows:minmax(0,1fr);align-items:stretch}
  html[data-layout="stage"] #music .record__type{display:flex;flex-direction:column;min-height:0}
  html[data-layout="stage"] #music .setlist{
    flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:rgba(242,239,230,.25) transparent;
  }
  html[data-layout="stage"] #music .record__art{align-self:center}
}
/* a phone keeps the key and the length; code and year are for the wide view */
@media (max-width:600px){
  #music .cut__meta > :nth-child(2),
  #music .cut__meta > :nth-child(3){display:none}
}
/* three keys since About took in Contact: one row, even on a phone */
@media (max-width:900px){
  .rail a{flex:1 1 0;min-width:0}
}
/* the last row of the list: the way out to the rest of the catalogue */
#music .setlist__more a{
  display:block;padding:.9em 0;
  font:600 11px/1 var(--f-util);letter-spacing:.12em;text-transform:uppercase;
  color:var(--glass-dim);text-decoration:none;transition:color .2s;
}
#music .setlist__more a:hover{color:var(--glass-ink)}
/* the footage behind a scene runs at the backdrop's exposure, so type
   reads over it; behind the music pane it's frosted like the glass was */
html[data-layout="stage"] .ground__vid{filter:grayscale(1) contrast(1.3) brightness(.3)}
html[data-layout="stage"] #music .ground__vid{filter:grayscale(1) contrast(1.3) brightness(.3) blur(14px);transform:scale(1.08)}
/* on a phone the word gets most of the width — the room is all height */
@media (max-width:600px){
  html[data-masthead="bleed"] .flag__word{--flag-measure:.9}
}