/* ============================================================
   STOMPER SIX STUDIO, "SESSION DOCUMENT"
   The v3 look, merged from the two v2 explorations:
   the discipline of the minimum-intervention preview (rules not
   cards, gold as taxonomy, a closed type scale) on the warm
   ground of the session-sheet draft, plus its transport player.

   Written to be the opposite of a template landing page: no
   rounded cards on a grid, no glow blobs, no centred hero, no
   scrolling genre marquee, no icon-card trio, no hover lifts,
   no box shadows, no backdrop blur. Everything is ruled rather
   than boxed, numbered like takes on a studio track sheet, and
   labelled in monospace the way real gear is labelled.

   THE THREE RULES (each answers a measured problem):
   1. RULES, NOT CARDS. Documents are ruled and columnar. 2px
      structural, 1px minor. This deletes the card system, the
      icon tiles, the 14px radius and every hover lift.
   2. GOLD IS TAXONOMY, NOT EMPHASIS. The old page used it about
      105 times as link, hover, CTA, border and glow at once, so
      it signalled nothing. It marks exactly three jobs here:
      money, state (playing, ticked, progress, focus), and the
      single primary action per view. Links carry weight and an
      underline instead.
   3. A CLOSED TYPE SCALE. The old index carried 103 font-size
      declarations. Eight named roles below; if a size is needed
      that is not here, reuse one, do not add a ninth.

   Palette is the house brand: warm near-black, cream ink, gold.
   ============================================================ */
:root{
  --ground:#0A0908; --panel:#100E0D; --inset:#171412;
  --rule:#292521; --rule-2:#3D3833;
  --gold:#E8B53A; --gold-hi:#F6D57A; --acc-ink:#0A0908;
  --band:#A46BFF; --band-2:#4FD6E0;
  --cream:#F5EFDD; --body:#C4BFB5; --muted:#8B877E;
  --display:'Anton',Impact,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --text:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(20px,4vw,56px);
  --nav-h:70px; --bar-h:0px;
  --maxw:1240px;
  /* THE CLOSED SCALE. Eight roles, nothing off the list. */
  --t-statement:clamp(46px,9.4vw,128px); /* Anton, the hero            */
  --t-title:clamp(32px,4.6vw,54px);      /* Anton, section heads       */
  --t-lead:clamp(17px,1.9vw,21px);       /* Hanken 400, section leads  */
  --t-body:16.5px;                       /* Hanken 400, running text   */
  --t-clause:17.5px;                     /* Hanken 400, practice text  */
  --t-field:12px;                        /* DM Mono, labels, caps      */
  --t-value:15px;                        /* DM Mono, measured values   */
  --t-micro:10.5px;                      /* DM Mono, captions, datums  */
}
body[data-banner="on"]{--bar-h:44px}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--body);
  font-family:var(--text);font-size:var(--t-body);line-height:1.62;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--acc-ink)}
a{color:inherit;text-decoration:none}
/* Body links are weight and underline, never colour. Gold is reserved for
   money, state and the one primary action. */
a.tlink{color:var(--cream);font-weight:600;border-bottom:1px solid var(--rule-2);
  transition:border-color .18s}
a.tlink:hover{border-bottom-color:var(--cream)}
/* height:auto is REQUIRED, not cosmetic. Images carry width/height attributes
   so the browser can reserve the box (the CLS fix). Those attributes act like
   a UA-stylesheet height, so without this rule they WIN wherever CSS sets a
   width but no height. */
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* Film grain, unchanged from the old look. A document has a ground; it does
   not have an ambient light source, which is why the blurred glow blobs are
   not carried over. */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body[data-grain="off"]::after{display:none}

/* ============== MONO: the gear-label voice ============== */
/* DM Mono is self-hosted and already declared in fonts.css; legal.html has
   used it all along. The old index had NO mono voice at all, and the v2
   draft asked for IBM Plex Mono, which is not hosted and silently rendered
   as system mono. DM Mono tops out at 500, so never ask it for 600. */
.field,.value,.micro,.docref{font-family:var(--mono)}
.field{font-size:var(--t-field);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:block}
/* Gold means MEASURED. Nothing else in running copy may use it. */
.value{font-size:var(--t-value);color:var(--gold);letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.value.na{color:var(--muted)}
.micro{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.docref{font-size:var(--t-field);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ============== TYPE ============== */
h1,h2,.sec-title{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;color:var(--cream)}
h1{font-size:var(--t-statement);line-height:.88}
.sec-title{font-size:var(--t-title);line-height:.98;margin:14px 0 0}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--body);max-width:58ch}
strong,b{color:var(--cream);font-weight:600}

/* ============== BUTTONS ============== */
/* Square, because nothing in this document has a radius. No lift on hover:
   translateY on five different elements was one of the clearest tells that
   a page was assembled rather than designed. */
.btn{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;border:none;padding:15px 26px;
  border-radius:2px;text-decoration:none;
  transition:background .18s linear,color .18s linear,border-color .18s linear;
}
.btn-primary{background:var(--gold);color:var(--acc-ink)}
.btn-primary:hover{background:var(--gold-hi)}
.btn-ghost{background:transparent;color:var(--cream);border:2px solid var(--rule-2)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(255,255,255,.04)}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ============== ANNOUNCEMENT BAR ============== */
.annbar{position:fixed;top:0;left:0;right:0;min-height:44px;z-index:101;
  display:none;align-items:center;justify-content:center;text-align:center;
  background:var(--inset);border-bottom:1px solid var(--rule);
  color:var(--body);font-size:13px;line-height:1.45;padding:9px 44px;
  font-family:var(--mono)}
body[data-banner="on"] .annbar{display:flex}
.annbar b{color:var(--cream);font-weight:500}
.annbar .soon{color:var(--gold)}
.annbar .ann-short{display:none}
@media(max-width:560px){
  .annbar{font-size:11.5px;padding:8px 16px}
  .annbar .ann-full{display:none}.annbar .ann-short{display:inline}
}

/* ============== NAV ============== */
header.nav{position:fixed;top:var(--bar-h);left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s}
/* Solid ground, no backdrop blur. Frosted glass is a template tell, and a
   document is opaque. */
header.nav.scrolled{background:rgba(10,9,8,.94);border-bottom-color:var(--rule)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto}
/* line-height 1.05, not .9: Anton at 21px has almost no shoulder, so sub-1
   leading collides the two lines of the stacked lockup. Same declaration in
   thankyou.html and 404.html. */
.brand-word{font-family:var(--display);text-transform:uppercase;font-size:21px;
  line-height:1.05;letter-spacing:.05em;color:var(--cream)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;font-weight:600;color:var(--body);letter-spacing:.02em;
  transition:color .18s}
.nav-links a:hover{color:var(--cream)}
.nav-cta{display:flex;align-items:center;gap:18px}
/* Ghost, not gold: the hero primary below is the one gold action in view. */
.nav-cta .btn{padding:11px 18px;font-size:12px}
.burger{display:none;background:none;border:1px solid var(--rule-2);border-radius:2px;
  width:44px;height:44px;color:var(--cream);cursor:pointer;font-size:20px;
  align-items:center;justify-content:center}
.burger .bars{position:relative;width:20px;height:14px;display:block}
.burger .bars span{position:absolute;left:0;width:100%;height:2px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s var(--ease);transform-origin:center}
.burger .bars span:nth-child(1){top:0}
.burger .bars span:nth-child(2){top:6px}
.burger .bars span:nth-child(3){top:12px}
header.nav.menu-open .burger .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.nav.menu-open .burger .bars span:nth-child(2){opacity:0}
header.nav.menu-open .burger .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;top:calc(var(--bar-h) + var(--nav-h));left:0;right:0;z-index:99;
  background:rgba(10,9,8,.98);border-bottom:1px solid var(--rule);
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
header.nav.menu-open + .mobile-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mobile-menu nav{display:flex;flex-direction:column;padding:12px 0}
.mobile-menu a{padding:16px 28px;font-size:18px;font-weight:600;color:var(--cream);
  border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;
  transition:background .18s}
.mobile-menu a:hover,.mobile-menu a:active{background:var(--inset)}
.mobile-menu a:last-of-type{border-bottom:none}
/* Gold allowed here: in the mobile menu this is the single primary action. */
.mobile-menu a.mm-cta{margin:16px 28px 22px;padding:16px 24px;background:var(--gold);
  color:var(--acc-ink);border:none;justify-content:center;font-family:var(--mono);
  font-weight:500;letter-spacing:.08em;font-size:14px;text-transform:uppercase;border-radius:2px}
.mobile-menu a.mm-cta:hover{background:var(--gold-hi)}

/* ============== SKIP LINK ============== */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);
  color:var(--acc-ink);padding:14px 22px;font-weight:700;font-size:15px}
.skip:focus{left:0}

/* Read by screen readers, never seen. NOT display:none and NOT
   visibility:hidden, either of which would take it out of the accessibility
   tree and stop a live region announcing anything at all. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============== HERO ============== */
/* PADDING-TOP MUST CLEAR THE FIXED HEADER. Bar plus nav are out of flow, so
   the hero starts at y=0 underneath them. Expressed as a calc so it stays
   correct if the banner is switched off or its text wraps on a phone. */
.hero{position:relative;min-height:min(calc(78vh - var(--bar-h)),780px);
  display:flex;align-items:center;overflow:hidden;
  padding:calc(var(--bar-h) + var(--nav-h) + 40px) 0 64px}
.hero .hg{position:relative;z-index:3;width:100%}
/* Left-aligned, not centred. The centred hero with a glow behind it is the
   default shape of every generated landing page; a document states its
   business from the top left. */
.hero h1{margin:22px 0 26px;max-width:14ch}
/* The one line on the page allowed to shout outside the taxonomy. It is the
   brand word and Jules likes it gold; everything else obeys the three jobs. */
.hero h1 .hl{color:var(--gold)}
.hero p.sub{font-size:var(--t-lead);color:var(--body);max-width:52ch;line-height:1.55;margin-bottom:38px}
.hero .docref{display:inline-block}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* The console texture, kept from the old hero (Jules chose it over the
   speaker cone; the alternatives live in _dev/image-library/). Do NOT
   pre-darken a replacement: the CSS already does it, at 13% opacity with
   grayscale(.35), so almost no colour survives and quality can be low. */
.hero .dawbg{position:absolute;inset:0;z-index:0;
  background:url('images/console-texture.webp') center/cover no-repeat;
  opacity:.13;filter:grayscale(.35) contrast(1.05);
  -webkit-mask-image:radial-gradient(ellipse 75% 80% at 62% 42%,#000 14%,transparent 74%);
  mask-image:radial-gradient(ellipse 75% 80% at 62% 42%,#000 14%,transparent 74%)}
/* Legibility scrim only. This is a functional gradient, not decoration. */
.hero .dawbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(10,9,8,.88) 22%,rgba(10,9,8,.4) 58%,rgba(10,9,8,.12)),
             linear-gradient(0deg,rgba(10,9,8,.72),transparent 44%)}
.credline{margin-top:30px;display:flex;gap:12px 28px;flex-wrap:wrap}
.credline span{display:flex;align-items:center;gap:9px}
.credline span::before{content:"";width:5px;height:5px;background:var(--muted)}
/* The spec plate. Four hairline-divided measured fields, the field-row shape
   that breaks the eyebrow > title > lead > grid rhythm every section used to
   share. Values are gold because they are measured. */
.spec{margin-top:44px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* Padding on BOTH sides, not just the right. It was 0 on the left, so every cell
   after the first had its label pressed against the divider to its own left while
   sitting 26px clear of the one on its right: lopsided, and it read as cramped.
   The first cell keeps a flush left edge so the plate still lines up with the
   column above it. */
.spec div{padding:22px 26px 24px;border-right:1px solid var(--rule)}
.spec div:first-child{padding-left:0}
.spec div:last-child{border-right:none}
.spec .field{margin-bottom:8px}

/* ============== SECTIONS ============== */
section.block{padding:clamp(56px,7vw,96px) 0;position:relative}
.sec-head{margin-bottom:40px;max-width:780px}
.sec-head .lead{margin-top:20px}
/* Sections that carry a full-width structural divider open with 2px. */
section.ruled{border-top:2px solid var(--rule-2)}

/* ============== FREE MIX HOOK ============== */
.hook .hg{display:grid;grid-template-columns:1fr .92fr;gap:64px;align-items:start}
.hook h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:var(--t-title);line-height:.98;color:var(--cream);margin:14px 0 22px}
/* Steps as numbered takes, ruled. Replaces the boxed steps card. */
.steps{border-top:2px solid var(--rule-2)}
.step{display:grid;grid-template-columns:56px 1fr;gap:0 18px;padding:24px 0;
  border-bottom:1px solid var(--rule);align-items:start}
.step .n{font-family:var(--mono);font-size:var(--t-field);letter-spacing:.08em;
  color:var(--gold);padding-top:5px;font-variant-numeric:tabular-nums}
.step h4{font-size:17.5px;font-weight:700;color:var(--cream);margin-bottom:5px}
.step p{font-size:15px;color:var(--body);line-height:1.55}
.hook .freemix-terms{max-width:640px;margin:40px 0 0;color:var(--muted);
  font-size:15px;line-height:1.65}
.hook .freemix-terms strong{color:var(--body);font-weight:600}
.hook .freemix-go{margin-top:30px}
.hook .freemix-fine{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.5}
.hook .freemix-fine strong{color:var(--body);font-weight:600}

/* ============== ABOUT ============== */
.about .hg{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start}
.aboutcol{display:flex;flex-direction:column;gap:26px}
/* Framed images: 1px rule and a mono caption strip, the .frame pattern that
   replaces the rounded image card. */
.frame{border:1px solid var(--rule-2);background:var(--inset)}
.frame img{width:100%;display:block;object-fit:cover}
.frame figcaption{padding:10px 14px;border-top:1px solid var(--rule)}
.about .frame img.portrait{aspect-ratio:4/5;object-position:center 18%;
  filter:grayscale(1) contrast(1.05) brightness(.98)}
.about .frame.collage img{aspect-ratio:400/711;filter:grayscale(.25) contrast(1.05) brightness(.92)}
/* Do not widen the collage past ~400px: the source is 400px and every other
   copy on disk is a downscale. It renders at 300px here, under native. */
.about .frame.collage{max-width:300px}
.about .copy p{margin-bottom:20px;max-width:56ch}
/* The pull quote, in Hanken not Anton. At its old 22px Anton was in the mush
   zone CLAUDE.md flags; this converts it, as that note anticipated. */
.about .quote{font-size:var(--t-lead);font-weight:700;color:var(--cream);
  line-height:1.35;border-left:2px solid var(--rule-2);padding-left:22px;margin:32px 0}
.about .hero-cta{margin-top:30px}

/* ============== HOW I WORK (practice) ============== */
/* The six icon cards become a code of practice: numbered clauses in ruled
   groups. Every clause is sourced from copy already published on the site. */
.practice .cop{max-width:880px}
.cop-group{margin-bottom:44px}
.cop-group:last-child{margin-bottom:0}
.cop-group > .field{padding-bottom:12px;border-bottom:2px solid var(--rule-2);
  margin-bottom:0;color:var(--body)}
.clause{display:grid;grid-template-columns:56px 1fr;gap:0 18px;padding:22px 0;
  border-bottom:1px solid var(--rule);align-items:start}
.clause:last-child{border-bottom:none}
.clause-n{font-family:var(--mono);font-size:var(--t-field);letter-spacing:.08em;
  color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums}
.clause h3{font-size:var(--t-clause);font-weight:700;color:var(--cream);margin-bottom:6px}
.clause p{font-size:15.5px;line-height:1.6;max-width:64ch}
.clause .why{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted);max-width:64ch}

/* ============== WORK: TRACK SHEET + TRANSPORT ============== */
.work .subhead{margin:0 0 18px}
.work .subhead--band{margin:56px 0 18px}
.tracks{border-top:2px solid var(--rule-2)}
.ptrack{border-bottom:1px solid var(--rule);transition:background .18s}
.ptrack:last-child{border-bottom:none}
.ptrack:hover{background:var(--panel)}
/* State, so gold is allowed: the playing row carries a gold left rule. */
.ptrack.playing{background:var(--panel);box-shadow:inset 2px 0 0 var(--gold)}
.prow{display:grid;grid-template-columns:44px 52px minmax(0,1.15fr) 54px 34px;
  gap:0 18px;align-items:center;padding:14px 2px}
.pbtn{width:44px;height:44px;background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-family:var(--mono);font-size:var(--t-field);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;transition:color .18s;padding:0}
.pbtn:hover{color:var(--cream)}
.ptrack.playing .pbtn{color:var(--gold)}

/* The take number was the only thing in this cell, so nothing said "this row
   plays". The number stays the resting state, because the take reference is the
   spine of the whole sheet, and the control reveals itself when you reach for
   it: hover anywhere on the row, or tab to the button, and the number becomes a
   play triangle (a pause bar if that row is the one playing). Same swap Spotify
   uses on its track list, for the same reason.
   Touch has no hover, so there the symbol is simply always shown. */
/* A play triangle is the RESTING state of every row, on every device. It used
   to be the take number, which said nothing about the row being clickable, and
   the numbers have gone: the sheet reads perfectly well without them and the
   ordinal is not information anyone needs while choosing what to hear.
   While a row plays, the EQ bars take over so you can see which one is live at
   a glance, and reaching for the button (hover, or keyboard focus) turns it
   back into a pause bar. Touch has no hover, so there the pause bar is simply
   always shown. */
.pbtn .pico{display:block;line-height:0}
.pbtn .peq{display:none}
.ptrack.playing .pbtn .peq{display:block}
.ptrack.playing .pbtn .pico{display:none}
.ptrack.playing:hover .pbtn .peq,
.ptrack.playing .pbtn:focus-visible .peq{display:none}
.ptrack.playing:hover .pbtn .pico,
.ptrack.playing .pbtn:focus-visible .pico{display:block}
@media (hover:none){
  .ptrack.playing .pbtn .peq{display:none}
  .ptrack.playing .pbtn .pico{display:block}
}
/* The 4-bar state EQ. Reports real playback state, which is why it survives
   when the 40-bar decorative field in the old hero did not. */
.eqbars{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.eqbars i{width:2px;background:currentColor;animation:eqb .9s ease-in-out infinite}
.eqbars i:nth-child(2){animation-delay:.15s}
.eqbars i:nth-child(3){animation-delay:.3s}
.eqbars i:nth-child(4){animation-delay:.45s}
@keyframes eqb{0%,100%{height:20%}50%{height:100%}}
.part{width:52px;height:52px;overflow:hidden;border:1px solid var(--rule-2);
  background:var(--inset);display:flex;align-items:center;justify-content:center;
  padding:0;cursor:default}
.part img{width:100%;height:100%;object-fit:cover;display:block}
.part svg{width:22px;height:22px;color:var(--muted);opacity:.5}
button.part{cursor:zoom-in;transition:border-color .18s}
button.part:hover{border-color:var(--cream)}
.pmeta h4{font-size:16.5px;font-weight:700;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta p{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptime{font-family:var(--mono);font-size:var(--t-field);color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right}
.pinfo{width:30px;height:30px;background:transparent;border:1px solid var(--rule-2);
  border-radius:2px;color:var(--muted);cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0;transition:border-color .18s,color .18s}
.pinfo:hover{border-color:var(--cream);color:var(--cream)}
.pinfo svg{transition:transform .25s var(--ease)}
.pinfo[aria-expanded="true"]{border-color:var(--cream);color:var(--cream)}
.pinfo[aria-expanded="true"] svg{transform:rotate(180deg)}
/* visibility, not just max-height: max-height:0 hides from EYES only, so every
   notes panel sat in the accessibility tree at once. visibility animates
   discretely, taking the visible end for the whole duration. Same pattern as
   the FAQ. Keep the two in step. */
.pnotes{max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .3s var(--ease),visibility .3s}
.pnotes.on{visibility:visible}
.pnotes-in{padding:4px 26px 20px 114px;font-size:14.5px;line-height:1.6;color:var(--body);max-width:78ch}
.pnotes-in .pnote{display:block}
.pnotes-in a{color:var(--cream);font-weight:600;border-bottom:1px solid var(--rule-2);transition:border-color .18s}
.pnotes-in .plink{display:inline-block;margin-top:8px}
.pnotes-in .plink:first-child{margin-top:0}
.pnotes-in a:hover{border-bottom-color:var(--cream)}
.pnotes-in .pcred{display:block;margin-top:9px}
/* The treatment plate. What arrived, what was done, what was left alone:
   the published decision record. Only fields with content render. */
.treat{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px;
  display:grid;grid-template-columns:110px 1fr;gap:8px 18px}
.treat .field{margin:0}
.treat p{font-size:14px;color:var(--body);line-height:1.55}
.pwarn{background:rgba(214,84,61,.1);border-bottom:1px solid var(--rule);
  border-left:2px solid #D6543D;padding:16px 20px;font-size:14px;color:var(--body);line-height:1.55}
.pwarn b{display:block;color:#E8836D;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;font-weight:500}
.pwarn ul{margin:0 0 10px 18px;padding:0}
.pwarn li{margin-bottom:5px}
.pwarn .pwarn-foot{display:block;font-size:12px;color:var(--muted);font-style:italic}
/* Artwork lightbox. One overlay, reused by every track. */
.artbox{position:fixed;inset:0;z-index:300;background:rgba(8,7,6,.94);
  display:flex;align-items:center;justify-content:center;padding:26px;
  opacity:0;pointer-events:none;transition:opacity .22s}
.artbox.on{opacity:1;pointer-events:auto}
.artbox figure{max-width:min(520px,88vw);max-height:88vh;display:flex;
  flex-direction:column;align-items:center}
.artbox img{max-width:100%;max-height:74vh;width:auto;height:auto;
  border:1px solid var(--rule-2);display:block}
.artbox figcaption{margin-top:18px;text-align:center}
.artbox figcaption b{display:block;font-size:19px;font-weight:700}
.artbox figcaption span{display:block;margin-top:7px}
.artbox .abclose{position:absolute;top:16px;right:16px;width:42px;height:42px;
  background:var(--inset);border:1px solid var(--rule-2);border-radius:2px;
  color:var(--body);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .18s,color .18s}
.artbox .abclose:hover{border-color:var(--cream);color:var(--cream)}
body.artopen{overflow:hidden}
.work-note{margin-top:40px;color:var(--body);font-size:16px}
/* The transport. Docks on first play and stays for the visit, so the proof
   keeps playing while a visitor reads the rates and the FAQ.
   --tp-pos is written once per timeupdate by s6.js and read by BOTH the seek
   fill and the mobile hairline, so the two can never disagree. */
.transport{position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:rgba(16,14,13,.97);border-top:1px solid var(--rule-2);
  transform:translateY(110%);visibility:hidden;
  transition:transform .35s var(--ease),visibility .35s;--tp-pos:0%}
/* visibility, not transform alone. A translated bar is off SCREEN but still in
   the tab order and still in the accessibility tree, so before this a keyboard
   user tabbing off the end of the page landed on the play, next and close
   buttons of a player that was not there. Exactly the same rule, and the same
   two-line shape, as .faq-a and .pnotes: transitioning visibility over the
   same duration keeps it visible for the whole slide out and flips it at the
   end. The transport was the last thing on the page still hiding from eyes
   only. */
.transport.up{transform:translateY(0);visibility:visible}
/* Hidden here because the desktop bar already has a real seek control. It
   only appears at the breakpoint that hides that control. */
.tp-prog{display:none;position:absolute;top:0;left:0;height:2px;
  width:var(--tp-pos);background:var(--gold);transition:width .18s linear}
body.playing-docked{padding-bottom:86px}
.tp-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:42px minmax(0,1fr) 140px 76px 34px 34px;
  gap:0 16px;align-items:center;height:70px}
.tp-play{width:42px;height:42px;border-radius:50%;background:var(--gold);
  color:var(--acc-ink);border:none;display:flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0}
.tp-play:hover{background:var(--gold-hi)}
.tp-next,.tp-close{width:34px;height:34px;background:none;border:1px solid var(--rule-2);
  border-radius:2px;color:var(--body);cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0;transition:border-color .18s,color .18s}
.tp-next:hover,.tp-close:hover{border-color:var(--cream);color:var(--cream)}
.tp-meta{min-width:0}
.tp-meta b{display:block;font-size:14.5px;font-weight:700;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-meta span{display:block;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The route back to the master instrument. It was a "Take 03/08" label sitting
   next to the title, and it is now the whole now-playing block: click the track
   you are hearing and you land on its row. Same job, no label, and it is the
   thing a listener would instinctively click anyway.
   Follows the site link rule, an underline and never colour. Gold on this bar
   is already spoken for by the play button and the progress fill, which are
   state, and a third gold thing would stop meaning anything. */
.tp-ref{display:block;min-width:0;color:inherit;border:none}
.tp-ref:hover b{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
.tp-artist{font-style:normal}
/* visibility:visible is LOAD-BEARING. The status text is written while the bar
   is still undocked, and therefore still visibility:hidden, and a live region
   that is hidden when its text changes announces nothing at all: by the time
   the bar slides up the content has already stopped being new. visibility is
   inherited and a child may override it, so this one element stays in the
   accessibility tree at all times while everything around it comes and goes.
   .vh keeps it 1px and clipped, so nothing is ever seen. */
.tp-status{visibility:visible}
.tp-bar{height:22px;display:flex;align-items:center;cursor:pointer;position:relative}
.tp-bar::before{content:"";position:absolute;left:0;right:0;height:2px;background:var(--rule-2)}
.tp-bar i{display:block;width:var(--tp-pos);height:2px;background:var(--gold);position:relative;
  transition:width .18s linear}
.tp-time{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ============== THE BAND BLOCK ============== */
/* The one place the record's own colours are allowed. Everything else on the
   page is warm charcoal, cream and gold. */
.bandmark{height:2px;border:none;margin:0 0 34px;
  background:linear-gradient(90deg,var(--band),var(--band-2) 55%,var(--rule))}
.video-feat{position:relative;overflow:hidden;border:1px solid var(--rule-2);
  background:#000;aspect-ratio:16/9;margin-bottom:16px}
.video-feat iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.feat-cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  align-items:baseline;margin-bottom:20px}
/* Hanken 800, not Anton: these are 24px and 20px, below the display floor,
   and song titles in quotes read badly in caps. */
.feat-cap h3{font-family:var(--text);font-weight:800;font-size:24px;
  letter-spacing:-.01em;line-height:1.25;color:var(--cream)}
.feat-cap p{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.video-second{max-width:620px;margin:0 auto}
.video-second .feat-cap{justify-content:center;text-align:center}
.video-second .feat-cap h3{font-size:20px}

/* ============== SERVICES: RATE SHEET ============== */
.svc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
/* What is included: a ticked, ruled list. Gold ticks are state. */
.incl{border-top:2px solid var(--rule-2);list-style:none}
.incl li{display:grid;grid-template-columns:26px 1fr;gap:0 12px;padding:13px 0;
  border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.5;align-items:start}
.incl svg{color:var(--gold);margin-top:4px}
.incl li.strong span{color:var(--cream);font-weight:600}
.svc-blurb{color:var(--body);font-size:15.5px;line-height:1.6;margin:14px 0 26px;max-width:52ch}
/* The rate rows. Money is gold, because money is what gold is for. */
.rates{border-top:2px solid var(--rule-2)}
.rate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;
  padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.rate .r-name{font-size:17px;font-weight:700;color:var(--cream)}
.rate .r-sub{grid-column:1;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.rate .r-fig{grid-row:1 / span 2;grid-column:2;font-family:var(--mono);
  font-size:clamp(22px,2.6vw,30px);color:var(--gold);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.rate .r-fig small{display:block;font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:right;margin-top:3px;
  font-variant-numeric:normal}
.rate .r-save{grid-column:1 / -1;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.rate .r-save b{color:var(--gold);font-weight:500}
.launch-rate{margin-top:26px;border:1px solid var(--rule-2);border-top:2px solid var(--rule-2);
  padding:18px 22px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline}
.launch-rate .lr-badge{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold);padding:5px 10px;white-space:nowrap}
.launch-rate p{color:var(--body);font-size:14.5px;line-height:1.55;margin:0}
.launch-rate strong{color:var(--cream);font-weight:600}
.rate-note{margin-top:26px;color:var(--muted);font-size:14px;max-width:64ch;line-height:1.6}
.rate-note b{color:var(--body);font-weight:600}
.svc-cta{margin-top:26px}

/* ============== SESSION CHECK ============== */
.sc-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:26px;align-items:start}
.sc-panel{background:var(--panel);border:1px solid var(--rule);border-top:2px solid var(--rule-2);padding:28px}
.sc-lab{display:block;font-family:var(--mono);font-size:var(--t-field);
  letter-spacing:.16em;text-transform:uppercase;color:var(--body);margin-bottom:20px}
.sc-fader+.sc-fader{margin-top:24px}
.sc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.sc-top label{font-family:var(--text);font-size:15px;font-weight:600;color:var(--body);
  letter-spacing:0;text-transform:none;margin-bottom:0}
.sc-top output{font-family:var(--mono);font-size:var(--t-value);color:var(--cream);
  letter-spacing:.02em}
/* The thumb is a fader cap: dark body, gold stripe across the middle. The one
   place a control is allowed to look like hardware. Fill driven by a --p
   custom property JS writes on input, because WebKit gives no
   ::-moz-range-progress equivalent. */
input[type=range].sc-r{-webkit-appearance:none;appearance:none;display:block;
  width:100%;height:30px;background:transparent;cursor:pointer}
input[type=range].sc-r::-webkit-slider-runnable-track{height:6px;border-radius:0;
  background:linear-gradient(90deg,var(--gold) 0 var(--p,0%),var(--rule-2) var(--p,0%) 100%)}
input[type=range].sc-r::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:30px;
  border-radius:2px;margin-top:-12px;border:1px solid var(--rule-2);
  background:linear-gradient(180deg,#4a443d 0 44%,var(--gold) 44% 56%,#100E0D 56% 100%)}
input[type=range].sc-r::-moz-range-track{height:6px;border-radius:0;background:var(--rule-2)}
input[type=range].sc-r::-moz-range-progress{height:6px;border-radius:0;background:var(--gold)}
input[type=range].sc-r::-moz-range-thumb{width:16px;height:28px;border-radius:2px;
  border:1px solid var(--rule-2);
  background:linear-gradient(180deg,#4a443d 0 44%,var(--gold) 44% 56%,#100E0D 56% 100%)}
input[type=range].sc-r:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.sc-scale{display:flex;justify-content:space-between}
.sc-out{margin-top:26px;border-top:1px solid var(--rule);padding-top:22px;
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.sc-figure{font-family:var(--mono);font-size:clamp(30px,4vw,44px);line-height:1;
  color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-figure small{display:block;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1;
  margin-bottom:8px;font-variant-numeric:normal}
.sc-basis{flex:1;min-width:210px;font-size:14.5px;color:var(--body);line-height:1.5}
.sc-flag{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.55}
.sc-check{display:flex;flex-direction:column;gap:2px}
.sc-check label{display:flex;align-items:flex-start;gap:13px;padding:10px 12px;
  cursor:pointer;font-size:15px;line-height:1.45;color:var(--body);
  transition:background .18s,color .18s;letter-spacing:0;text-transform:none;
  font-family:var(--text);font-weight:400}
.sc-check label:hover{background:var(--inset);color:var(--cream)}
.sc-check input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sc-box{flex-shrink:0;width:20px;height:20px;margin-top:1px;border:1px solid var(--rule-2);
  border-radius:2px;display:grid;place-items:center;color:transparent;
  transition:background .18s,border-color .18s,color .18s}
.sc-check input:checked+.sc-box{background:var(--gold);border-color:var(--gold);color:var(--acc-ink)}
.sc-check input:focus-visible+.sc-box{outline:2px solid var(--gold);outline-offset:3px}
.sc-check input:checked~.sc-t{color:var(--cream)}
.sc-meter{margin-top:22px;height:6px;background:var(--inset);overflow:hidden}
.sc-meter i{display:block;height:100%;width:0;background:var(--gold);
  transition:width .3s var(--ease)}
.sc-verdict{margin-top:15px;font-size:14.5px;color:var(--body);line-height:1.55;min-height:44px}
.sc-verdict b{color:var(--cream)}
.sc-verdict.ok b{color:var(--gold)}
.sc-go{margin-top:6px}
.sc-go .btn{width:100%;justify-content:center}
.sc-help{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.sc-help a{color:var(--cream);font-weight:600}
.sc-help a:hover{text-decoration:underline}

/* ============== FAQ ============== */
.faq-list{max-width:880px;border-top:2px solid var(--rule-2)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;background:none;border:none;color:var(--cream);text-align:left;
  cursor:pointer;padding:24px 0;display:grid;grid-template-columns:1fr 34px;gap:24px;
  align-items:center;font-family:var(--text);font-size:clamp(17px,1.9vw,20px);font-weight:600}
.faq-q .pm{width:30px;height:30px;border:1px solid var(--rule-2);border-radius:2px;
  display:flex;align-items:center;justify-content:center;transition:.25s var(--ease);
  color:var(--body);font-family:var(--text);font-size:18px}
.faq-item.open .pm{transform:rotate(45deg);background:var(--gold);
  color:var(--acc-ink);border-color:var(--gold)}
/* visibility, not just max-height. max-height:0 with overflow:hidden hides an
   answer from EYES only, so all ten answers stayed in the accessibility tree
   and a screen reader read the FAQ as one continuous wall. visibility is
   animatable and interpolates discretely, taking the "visible" end for the
   whole duration. Do not swap for display:none, which would kill the
   transition and break the scrollHeight measurement in the JS. */
.faq-a{max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .35s var(--ease),visibility .35s}
/* max-height here is a FALLBACK for the answer that ships open, which JS
   replaces with the exact scrollHeight on load. 600px is comfortably past the
   longest answer and only applies for a frame. */
.faq-item.open .faq-a{visibility:visible;max-height:600px}
.faq-a p{padding:0 0 26px;max-width:72ch;line-height:1.65;font-size:16px}

/* ============== CONTACT ============== */
.contact .hg{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:start}
.contact h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:var(--t-title);line-height:.95;color:var(--cream);margin:14px 0 24px}
.contact .lead{margin-bottom:30px}
.reassure{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.reassure li{display:grid;grid-template-columns:26px 1fr;gap:0 12px;padding:13px 0;
  border-bottom:1px solid var(--rule);color:var(--body);font-size:15.5px;
  align-items:start;line-height:1.5}
.reassure svg{color:var(--gold);margin-top:4px}
.email-line{margin-top:30px;font-size:15px;color:var(--muted)}
.email-line a{color:var(--cream);font-weight:600;border-bottom:1px solid var(--rule-2);
  transition:border-color .18s}
.email-line a:hover{border-bottom-color:var(--cream)}
/* Socials as mono underline links, not pills. */
.socials{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.socials a{font-family:var(--mono);font-size:var(--t-field);letter-spacing:.12em;
  text-transform:uppercase;color:var(--body);border-bottom:1px solid var(--rule-2);
  padding-bottom:3px;transition:color .18s,border-color .18s}
.socials a:hover{color:var(--cream);border-bottom-color:var(--cream)}
.stompbox{display:block;width:min(260px,100%);height:auto;margin:38px auto 0;
  border:1px solid var(--rule-2);filter:grayscale(.18) brightness(.94)}
/* The form: a ruled panel with underline fields, not a grid of filled,
   rounded boxes. A grid of filled rounded boxes is the most template-looking
   element a page can have. */
form{background:var(--panel);border:1px solid var(--rule);border-top:2px solid var(--rule-2);
  padding:36px 34px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{margin-bottom:18px}
form label{display:block;font-family:var(--mono);font-size:var(--t-field);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
form label .req{color:var(--gold)}
input,select,textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--rule-2);border-radius:0;
  padding:11px 2px;color:var(--cream);font-family:var(--text);font-size:16px;
  transition:border-color .18s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--gold)}
textarea{resize:vertical;min-height:110px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B877E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center}
select option{background:var(--inset);color:var(--cream)}
form .btn{width:100%;justify-content:center;margin-top:10px}
.form-fine{font-size:13px;color:var(--muted);text-align:center;margin-top:16px;line-height:1.5}
.form-fine .form-privacy{display:block;margin-top:7px}
.form-fine .form-privacy a{color:var(--body);border-bottom:1px solid var(--rule-2);transition:color .18s,border-color .18s}
.form-fine .form-privacy a:hover{color:var(--cream);border-bottom-color:var(--cream)}
.form-status{display:none;margin-top:14px;padding:13px 15px;font-size:14.5px;line-height:1.55;
  background:rgba(232,181,58,.08);border:1px solid var(--gold);color:var(--cream)}
.form-status.on{display:block}
.form-status a{color:var(--gold);font-weight:600}
form.sending .btn{opacity:.6;pointer-events:none}

/* ============== BLOG ROWS ============== */
.posts{border-top:2px solid var(--rule-2)}
.post{display:grid;grid-template-columns:104px 1fr;gap:0 22px;padding:20px 0;
  border-bottom:1px solid var(--rule);align-items:center;transition:background .18s}
.post:hover{background:var(--panel)}
.post img{width:104px;height:78px;object-fit:cover;border:1px solid var(--rule);
  filter:grayscale(.2) contrast(1.03)}
.post h4{font-size:17px;font-weight:700;line-height:1.3;color:var(--cream);margin-bottom:6px}
.post p{font-size:13.5px;color:var(--muted);line-height:1.5}
.post .more{display:block;margin-top:9px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--body)}

/* ============== FOOTER ============== */
footer{border-top:2px solid var(--rule-2);padding:64px 0 36px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:44px;border-bottom:1px solid var(--rule)}
/* The lockup carries the name, like every other one on the site. alt is EMPTY
   on purpose: the wordmark beside it already says the name in real text. */
.foot-top .brand{display:inline-flex;margin-bottom:18px}
.foot-top .brand img{height:40px}
.foot-top .brand-word{font-size:18px}
.foot-top p{color:var(--body);max-width:38ch;font-size:15px;line-height:1.6}
.foot-col h5{font-family:var(--mono);font-size:var(--t-field);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;font-weight:500}
.foot-col a{display:block;color:var(--body);margin-bottom:12px;font-size:15px;
  transition:color .18s}
.foot-col a:hover{color:var(--cream)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-top:28px;color:var(--muted);font-size:13.5px}
.foot-bot .tag{font-family:var(--mono);font-size:var(--t-field);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ============== REVEALS ============== */
/* Fade only, no translate. The fade-up-on-everything cluster is part of the
   standard dark-site starter kit, and motion adds nothing to a document. */
.reveal{opacity:0;transition:opacity .6s var(--ease)}
.reveal.in{opacity:1}

/* ============== REDUCED MOTION ============== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .eqbars i{animation:none;height:60%}
  .reveal{opacity:1;transition:none}
  .faq-a,.pnotes{transition:none}
  .transport{transition:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============== RESPONSIVE ============== */
@media(max-width:980px){
  .nav-links{display:none}
  .burger{display:flex}
  .hook .hg,.about .hg,.contact .hg,.svc-grid{grid-template-columns:1fr;gap:44px}
  .sc-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .prow{grid-template-columns:44px 52px minmax(0,1fr) 54px 34px}
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav-cta .btn{display:none}
  .hero{padding:calc(var(--bar-h) + var(--nav-h) + 24px) 0 52px}
  .f-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  /* Stacked: the dividers are horizontal now, so side padding would just inset
     the text from the page edge for no reason. */
  .spec div,.spec div:first-child{border-right:none;border-bottom:1px solid var(--rule);
    padding-left:0;padding-right:0}
  .spec div:last-child{border-bottom:none}
  .clause{grid-template-columns:42px 1fr;gap:0 14px}
  .step{grid-template-columns:42px 1fr;gap:0 14px}
  .aboutcol{flex-direction:column;align-items:center}
  .about .frame{width:100%}
  .about .frame.collage{width:min(300px,100%)}
  /* Let the title wrap to two lines rather than ellipsise: uneven row heights
     read better than "In Nothing We ...". */
  .pmeta h4{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .prow{grid-template-columns:44px 52px minmax(0,1fr) 34px;gap:0 12px}
  .ptime{display:none}
  .pnotes-in{padding:4px 0 20px 0}
  .treat{grid-template-columns:1fr;gap:4px 0}
  .part{width:44px;height:44px}
  .post img{width:88px;height:66px}
  .post{grid-template-columns:88px 1fr;gap:0 16px}
  .tp-inner{grid-template-columns:42px minmax(0,1fr) 34px 34px;gap:0 10px;height:62px}
  /* Measured at 360px, the narrowest phone still in real use: the take
     reference plus the longest band name in the sheet ("Take 01/08 · Alexx
     Calise") needs 189px of the 174px this column gets. Tightening this one
     line, and nothing else, buys back enough to show both rather than
     ellipsising the band's name off the end of its own credit. */
  .tp-meta span{letter-spacing:.07em}
  /* No room for the seek bar or the clock at this width, so progress moves to
     the top edge of the bar instead of disappearing. This is the page that is
     21 screens long: knowing a mix is 40 seconds in is worth more here than
     anywhere. */
  .tp-bar,.tp-time{display:none}
  .tp-prog{display:block}
  body.playing-docked{padding-bottom:70px}
}