@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dela-gothic-one-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* three inks, like a two-colour print: the ground the paper lies on, the paper, and one accent */
:root{
  --ground:#0D0D0D;--on-ground:#F3EBDD;--muted-on-ground:#B7AE9F;
  --paper:#F3EBDD;--paper-2:#EAE0CF;--paper-3:#DFD3BF;--ink:#141210;--muted:#4A4238;
  --accent:#EE4B19;--accent-ink:#B8400F;--field:#EE4B19;--on-field:#141210;
  --label:#F3EEE0;--vinyl:#0D0D0D;
  --disp:"Dela Gothic One","Archivo Black",Archivo,system-ui,sans-serif;
  --text:Archivo,system-ui,-apple-system,sans-serif;
  --t1:clamp(54px,15.5vw,76px);--t2:clamp(34px,8.6vw,44px);--t3:clamp(24px,6vw,30px);--t4:18px;--t5:17px;--small:15px;
  --pad:16px;--navh:60px;--rec:600px
}
@media (min-width:1000px){:root{--t1:clamp(88px,10vw,150px);--t2:clamp(40px,4.6vw,68px);--t3:clamp(26px,2.8vw,40px);--t4:20px;--pad:32px;--navh:68px}}

/* the six palettes offered on 2026-11-02; one attribute on <html> switches the whole page */
:root[data-p="light"]{--ground:#10182A;--on-ground:#F6EFE4;--muted-on-ground:#AAB4C2;--paper:#F6EFE4;--paper-2:#ECE4D6;--paper-3:#E0D7C5;--accent:#FF7A3D;--accent-ink:#B8400F;--field:#FF7A3D;--b:#17203A}
:root[data-p="coffee"]{--ground:#2A1C14;--on-ground:#F3EBDD;--muted-on-ground:#C9B8A6;--accent:#E8A458;--accent-ink:#7A3E17;--field:#E8A458;--b:#33231A}
:root[data-p="riso"]{--ground:#1E4D6B;--on-ground:#F1ECE1;--muted-on-ground:#BFD0DD;--paper:#F1ECE1;--paper-2:#E6E0D3;--paper-3:#DAD3C3;--accent:#FF4F1F;--accent-ink:#C83A10;--field:#FF4F1F;--b:#17415C}
:root[data-p="asphalt"]{--ground:#D9D4CB;--on-ground:#141210;--muted-on-ground:#4A4238;--paper:#FBFAF7;--paper-2:#F0EEE8;--paper-3:#E4E1D9;--accent:#FF5A1F;--accent-ink:#B8400F;--field:#141210;--on-field:#FBFAF7;--b:#CDC8BE}
:root[data-p="green"]{--ground:#1F3D2B;--on-ground:#F3EBDD;--muted-on-ground:#BFCDB9;--paper:#E9D9B5;--paper-2:#DFCFA9;--paper-3:#D3C29A;--accent:#EE4B19;--accent-ink:#B8400F;--field:#EE4B19;--b:#274A35}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ground);scrollbar-color:var(--paper-3) var(--ground)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--on-ground);font-family:var(--text);font-size:var(--t5);line-height:1.55;overflow-x:hidden}
[hidden]{display:none !important}
::selection{background:var(--accent);color:var(--ink)}
input{caret-color:var(--accent)}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:0;text-wrap:balance}
h2{font-size:var(--t2);line-height:1.02;margin:0 0 .5em}
p{margin:0 0 1em;text-wrap:pretty}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:700}

/* one button shape: square, flat, one fill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:var(--ink);text-decoration:none;border:0;border-radius:0;padding:0 26px;min-height:52px;font:600 var(--t5)/1 var(--text);cursor:pointer;transition:background-color .2s,color .2s,transform .15s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:wait}

/* the bar: wordmark, four links, one action; a plain bar on the ground, nothing floating */
.bar{position:fixed;top:0;left:0;right:0;height:var(--navh);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--pad);background:var(--ground);color:var(--on-ground)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-ground);font-family:var(--disp);font-size:1rem;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:50%}
.links{display:none;gap:28px;font-weight:500;font-size:var(--t5)}
.menu{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin:0 -10px 0 2px;padding:0 10px;border:0;border-radius:0;background:transparent;cursor:pointer}
.menu span{display:block;height:2.5px;background:var(--on-ground);transition:transform .25s,opacity .2s}
.bar.open .menu span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.bar.open .menu span:nth-child(2){opacity:0}
.bar.open .menu span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.bar.open .links{display:flex;flex-direction:column;gap:0;position:fixed;left:0;right:0;top:var(--navh);background:var(--ground);padding:6px var(--pad) 22px;border-top:3px solid var(--accent)}
.bar.open .links a{font-family:var(--disp);font-size:var(--t3);line-height:1.1;padding:16px 0;border-bottom:2px solid #2A2724;border-radius:0}
.bar.open .links a:last-child{border-bottom:0}
.bar.open .links a.on{border-bottom-color:#2A2724;color:var(--accent)}
.links a{text-decoration:none;padding:6px 0;border-bottom:3px solid transparent;transition:border-color .2s}
.links a:hover,.links a.on{border-color:var(--accent)}
.bar .btn{min-height:44px;padding:0 14px;font-size:var(--small);white-space:nowrap}
@media (min-width:1000px){.bar .btn{padding:0 18px}}
@media (min-width:1000px){.links{display:flex}.menu{display:none}.bar{gap:16px}}

/* the first screen: the name, the line, and the record spinning on a turntable, in full view */
.pin{height:120svh;position:relative;z-index:5}
@media (min-width:1000px){.pin{height:150svh}}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ground)}
.title{position:absolute;left:var(--pad);right:var(--pad);top:calc(var(--navh) + 28px);text-align:center;will-change:transform,opacity;z-index:4}
.name{font-size:var(--t1);line-height:.92;letter-spacing:-.015em;margin:0;color:var(--on-ground)}
.line{font-size:var(--t4);line-height:1.4;margin:16px auto 0;max-width:46ch;color:var(--on-ground)}
.deck{--D:min(74vw,54svh);--arm:0deg;position:absolute;left:calc(50% - var(--D)/2);top:44%;width:var(--D);height:var(--D)}
.platter{position:absolute;inset:0;border-radius:50%;background:#2E2A25}
.platter::before{content:"";position:absolute;inset:3%;border-radius:50%;background:#1F1B18}
.platter::after{content:"";position:absolute;inset:7%;border-radius:50%;background:#262220}
.spindle{position:absolute;left:calc(50% - 1.6%);top:calc(50% - 1.6%);width:3.2%;height:3.2%;border-radius:50%;background:var(--paper-3);z-index:3}
.arm{position:absolute;inset:-18%;width:136%;height:136%;z-index:4;pointer-events:none;overflow:visible}
.arm .swing{transform-origin:122px 14px;transform:rotate(var(--arm));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (min-width:1000px){.deck{--D:min(34vw,52svh);top:43%}}
@media (prefers-reduced-motion:reduce){.arm .swing{transition:none}}

/* the record: one fixed element, moved by the scroll; it turns over (Side B) when its label changes */
.record{position:fixed;left:0;top:0;width:var(--rec);height:var(--rec);z-index:3;pointer-events:none;will-change:transform;opacity:0;transition:opacity .25s;perspective:1400px}
.record.ready{opacity:1}
.record.out{z-index:20}
.record.pinned{position:absolute;inset:8%;width:auto;height:auto;transform:none;z-index:2}
.record.pinned.out{z-index:2}
.plate{position:relative}
.plate .record.pinned{inset:2%}
.cast{position:absolute;inset:6% 2% -2% 2%;border-radius:50%;box-shadow:0 36px 70px -18px rgba(0,0,0,.65);opacity:0;transition:opacity .5s} /* taste-skill-ignore: the record truly floats once it is out */
.record.out .cast{opacity:1}
.record.broken .cast{opacity:0}
.rot{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transition:transform .22s ease-in} /* taste-skill-ignore: the first half of a turn accelerates away; the return (.rot.back) eases out */
.rot.back{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.rot>*{position:absolute;inset:0;width:100%;height:100%}
.layer{opacity:0;transition:opacity .3s ease}
.layer.on{opacity:1}
.record.broken .layer{opacity:0;transition:none} /* the crack is sudden: the pieces replace the whole at once, then fly */
.arc{font-family:var(--disp);fill:var(--accent);letter-spacing:.02em}
.arc.vinyl{fill:var(--label)}
/* the break: the pieces of the base logo (scripts/make_shards.py), kicked apart then settling into the cracked disc */
.shards{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.record.broken .shards{opacity:1;transition:none}
.pc{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h)}
.record.broken .pc{animation:kick .9s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes kick{0%{transform:translate(0,0)}40%{transform:translate(calc(var(--dx) * 110px),calc(var(--dy) * 110px))}100%{transform:translate(calc(var(--dx) * 34px),calc(var(--dy) * 34px))}}
@media (prefers-reduced-motion:reduce){.layer,.rot{transition:none}.record.broken .pc{animation:none;transform:translate(calc(var(--dx) * 34px),calc(var(--dy) * 34px))}}

/* after the hero: the ground changes colour from section to section; the type sits straight on it */
main{position:relative;z-index:1;background:var(--ground)}
.sec{position:relative;padding:72px var(--pad) 80px;scroll-margin-top:calc(var(--navh) + 8px)}
.on-cream{background:var(--paper);color:var(--ink)}
.on-orange{background:var(--accent);color:var(--ink)}
.on-black{background:var(--ground);color:var(--on-ground)}
.paper{position:relative;background:transparent;color:inherit;padding:0}
.sec .muted,.on-cream .facts span,.on-orange .facts span,.on-cream .programme .body p,.on-cream .qa p{color:var(--ink)}
.sec h2{color:inherit}

/* the programme: title, note, facts */
.programme h2{max-width:12ch;margin:0 0 20px}
.programme .note{font-size:var(--t4);line-height:1.45;max-width:38ch;margin:0 0 32px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;margin:0 0 36px}
.facts b{display:block;font-family:var(--disp);font-weight:400;font-size:var(--t3);line-height:1.05}
.facts span{display:block;font-size:var(--small);line-height:1.4;color:var(--muted);margin-top:6px;max-width:26ch}
blockquote{margin:8px 0 28px;font-size:19px;line-height:1.35;font-weight:500;max-width:none}
blockquote p{margin:0}
.programme .body{max-width:62ch}
.programme .body p{margin:0 0 1em}
.programme .body p.bq{margin-top:1.4em}
.more{font-weight:600;text-decoration-thickness:3px;text-underline-offset:4px;color:var(--ink);text-decoration-color:var(--accent)}
.more:hover{color:var(--accent-ink)}
.on-orange .more{text-decoration-color:var(--ink)}
.on-orange .more:hover{color:var(--paper)}

/* what to expect: side A, the three tracks of the morning, each with room to read */
.tracks{list-style:none;margin:32px 0 0;padding:0;font-variant-numeric:tabular-nums}
.track-row{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"num art head len" "num art body body";column-gap:14px;row-gap:6px;align-items:start;padding:34px 0;border-top:3px solid var(--ink)}
.track-row .num{grid-area:num;font:600 var(--small)/1 var(--text);letter-spacing:.04em;padding-top:8px}
.track-row:last-child{border-bottom:3px solid var(--ink)}
.track-row img{grid-area:art;width:88px;height:88px;object-fit:contain;filter:brightness(0)} /* taste-skill-ignore: the illustrations are tinted to the ink, not decorated */
.track-row h3{grid-area:head;font-size:var(--t3);line-height:1.05;margin:0}
.track-row p{grid-area:body;margin:0;max-width:40ch}
.track-row .len{grid-area:len;justify-self:end;padding-top:6px;font:600 var(--t5)/1.2 var(--text)}
.free{font-family:var(--disp);font-size:var(--t2);line-height:1.02;margin:56px 0 0;color:inherit}
@media (min-width:1000px){
  .track-row{grid-template-columns:auto 120px 1fr auto;grid-template-areas:"num art head len" "num art body len";column-gap:28px;padding:48px 0;min-height:42svh;align-content:center}
  .track-row .num{padding-top:10px}
  .track-row img{width:120px;height:120px}
  .track-row .len{grid-area:len;align-self:start}
}

.half h2{margin:0 0 14px}
.half .lead{font-size:var(--t4);line-height:1.45;max-width:30ch;margin:0 0 28px}
/* the ticker: one line of the brand's facts, running between sections */
.tick{overflow:hidden;background:var(--accent);color:var(--ink);padding:14px 0;font:600 var(--small)/1 var(--text);letter-spacing:.02em;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent)} /* taste-skill-ignore: the mask fades the ticker at the edges, it paints nothing */
.tick-in{display:inline-flex;gap:0;will-change:transform;animation:tick 34s linear infinite}
.tick span{padding:0 1.2em}
.tick span::after{content:"\00b7";padding-left:2.4em;color:var(--ink)}
@media (max-width:999px){.tick + .sec{padding-top:132px}}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick-in{animation:none}}

/* side b: the record goes orange here; the panel is the same paper as the rest */
.on-black .track .genre{font-size:var(--t4);font-weight:600;margin:0 0 8px}
.track .player-note{margin:0 0 24px;max-width:34ch}
.player{display:grid;grid-template-columns:1fr;gap:10px}
.cell{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 20px;border:0;font:600 var(--t5)/1 var(--text);text-decoration:none;cursor:pointer;transition:background-color .2s,transform .15s}
.cell.alt{background:var(--accent);color:var(--ink)}
.cell.alt:hover{background:var(--paper)}
.cell svg{width:14px;height:14px;flex:none}
/* the sleeve: cover art with the 45's centre hole punched through it, the song's name, and one play button */
.sleeve{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:72px;padding:8px 14px 8px 8px;border:0;background:var(--paper);color:var(--ink);font:600 var(--t5)/1.2 var(--text);text-align:left;cursor:pointer;transition:background-color .2s,transform .15s}
.sleeve:hover{background:var(--accent)}
.sleeve:active{transform:scale(.985)}
.sleeve .art{position:relative;width:64px;height:64px;background:var(--vinyl);overflow:hidden;flex:none}
.sleeve .art::before{content:"";position:absolute;inset:6px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#1a1a1a 0 1.5px,#0d0d0d 1.5px 3px)} /* taste-skill-ignore: a bare record shows until the cover art lands */
.sleeve .art img{position:relative;width:100%;height:100%;object-fit:cover}
.sleeve .art::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:var(--paper);box-shadow:0 0 0 2px var(--ink)}
.sleeve:hover .art::after{background:var(--accent)}
.sleeve .meta{min-width:0}
.sleeve .tt{display:block;font-family:var(--disp);font-weight:400;font-size:17px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sleeve .ta{display:block;font-size:var(--small);font-weight:500;color:var(--muted);margin-top:4px}
.sleeve .go{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;flex:none}
.sleeve .go svg{width:15px;height:15px;margin-left:2px}
.player.open .sleeve{display:none}
.embed-slot{grid-column:1 / -1}
.embed-slot iframe{width:100%;border:0;display:block}

/* questions, set like the notes at the back of a programme */
.notes h2{margin:0 0 22px}
.qa p{margin:0 0 18px;line-height:1.55;break-inside:avoid}
.qa b{font-weight:600}

/* the reply card on a field of the accent */
.field{background:var(--field);color:var(--on-field);overflow:hidden;padding-top:28px;padding-bottom:28px}
.aside{font-size:var(--t4);line-height:1.4;max-width:34ch;margin:0 auto 18px;text-align:center;color:var(--muted)}
/* the card is a race bib: four punched corners, the event strip across the top, your name printed big, a tear-off stub */
.card{--rot:0deg;position:relative;background:var(--paper);color:var(--ink);padding:24px 20px 24px;width:100%;margin:0 auto;transform:rotate(var(--rot));transform-origin:50% 100%}
.card h2{font-size:var(--t3);text-align:center;margin:0 0 10px}
.hole{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--field);box-shadow:inset 0 1.5px 2px rgba(0,0,0,.35)}
.hole:nth-child(1){left:12px;top:12px}.hole:nth-child(2){right:12px;top:12px}.hole:nth-child(3){left:12px;bottom:12px}.hole:nth-child(4){right:12px;bottom:12px}
.bib-head{display:flex;justify-content:space-between;gap:12px;margin:0 0 18px;padding:0 0 10px;border-bottom:3px solid var(--ink);font:600 14px/1 var(--text);letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.fld{margin:0 0 14px}
.fld label{display:block;font-weight:600;margin:0 0 6px}
.fld.who input{font-family:var(--disp);font-size:clamp(30px,8vw,44px);line-height:1;text-transform:uppercase;text-align:center;min-height:78px;padding:10px 12px;letter-spacing:.01em}
.fld.who input::placeholder{text-transform:none}
.row{display:grid;grid-template-columns:1fr;gap:0}
input[type=text],input[type=tel],input[type=email]{width:100%;font:inherit;font-size:var(--t5);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:0;padding:12px 14px;min-height:50px}
input::placeholder{color:#6B6259}
.stub{position:relative;margin:10px -20px 0;padding:18px 20px 0;border-top:3px dashed var(--ink)}
.stub::before,.stub::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--field)}
.stub::before{left:-12px}.stub::after{right:-12px}
.consent{font-size:var(--small);color:var(--muted);margin:0 0 8px;max-width:46ch}
.legal{font-size:12.5px;line-height:1.45;color:var(--muted);margin:0 0 16px;max-width:64ch}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* taste-skill-ignore: offscreen honeypot */
.btn.wide{display:flex;width:100%;min-height:56px;background:var(--ink);color:var(--paper)}
.btn.wide:hover{background:var(--accent);color:var(--ink)}
.form-msg{min-height:1.4em;margin:12px 0 0;font-weight:500}
.form-msg.err{color:#a3200a}
.bib-name{font-family:var(--disp);font-size:clamp(40px,11vw,72px);line-height:1;text-transform:uppercase;text-align:center;margin:6px 0 16px;overflow-wrap:anywhere}
.bib-name:empty{display:none}
.done{text-align:center}
.done-title{font-family:var(--disp);font-size:var(--t3);line-height:1.05;margin:0 0 .3em}
.done p:last-child{font-size:var(--t4);margin:0}

/* runs: a sleeve laid flat across the page; the record lies on it and breaks */
.runs{padding:0;margin-top:0;background:var(--paper);color:var(--ink)}
.runs-in{padding:56px var(--pad) 64px;display:grid;gap:28px;justify-items:center}
.plate{width:min(72vw,420px);aspect-ratio:1;max-width:100%}
.log{width:100%;max-width:40rem}
.log h2{margin:0 0 10px}
.log .lead{font-size:var(--t4);line-height:1.45;max-width:34ch;margin:0 0 22px}
/* the log: one row per run, ruled like the side-A tracklist, blank lines waiting for the next ones */
.runlog{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:var(--small)}
.runlog th{text-align:left;font:600 var(--small)/1.2 var(--text);padding:0 12px 10px 0;border-bottom:3px solid var(--ink);white-space:nowrap}
.runlog td{padding:14px 12px 14px 0;border-bottom:2px dashed var(--ink);vertical-align:middle;font-weight:500}
.runlog tr:last-child td{border-bottom:3px solid var(--ink)}
.runlog .num{font-family:var(--disp);font-weight:400;font-size:var(--t3);line-height:1;padding-right:18px;white-space:nowrap}
.runlog .blank td{color:var(--muted)}
.runlog .blank .num{color:var(--paper-3)}
.st{display:inline-block;padding:5px 10px;border:2px solid var(--ink);font:600 var(--small)/1 var(--text);white-space:nowrap}
.log-note{margin:16px 0 0;font-size:var(--small);color:var(--muted)}
.runlog .vibe b{display:block;font-weight:700}
.runlog .vibe span{display:block;color:var(--muted);font-size:.92em}
/* phones: the song stays, the start point (always Middletown so far) gives way */
@media (max-width:999px){.runlog th:nth-child(3),.runlog td:nth-child(3){display:none}}

/* the back of the postcard, with the record lying beside it */
footer{background:var(--ground);color:var(--on-ground);padding:120px var(--pad) 48px}
.card-mark{grid-area:mark;width:min(30vw,150px);height:auto;align-self:start}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* taste-skill-ignore: visually hidden text for screen readers */
.postcard{position:relative;background:var(--paper);color:var(--ink);padding:36px 22px 24px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"mark msg" "addr addr";gap:28px 16px;align-items:start}
.scallops{position:absolute;left:0;right:0;top:-27px;height:28px;width:100%;display:block}
.scallops.s12{display:none}
.msg .signoff{font-family:var(--disp);font-size:26px;line-height:1.05;margin:0 0 12px}
.msg{grid-area:msg;text-align:right}
.msg p{margin:0 0 4px;font-size:var(--t4);line-height:1.4}
.addr{grid-area:addr;display:grid;gap:10px;align-content:end;justify-items:start}
.addr a{font-size:var(--t4);font-weight:600;color:var(--ink);text-decoration-thickness:3px;text-underline-offset:4px}
.addr a:hover{color:var(--accent-ink)}
.addr .soc{display:inline-flex;align-items:center;gap:12px;font-weight:700;text-decoration-color:var(--accent)}
.addr .soc svg{width:26px;height:26px;flex:none;color:var(--accent)}
.addr .soc:hover svg{color:var(--accent-ink)}

/* words that move: a heading's words rise once as it enters; buttons swap their word on hover; a press pushes in */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.w i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--n,0) * 48ms)}
.k.in .w i,.k.now .w i{transform:none}
.btn,.cell{position:relative;overflow:hidden}
.btn .t,.cell .t{display:flex;align-items:center;justify-content:center;align-self:stretch;transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.btn .t2,.cell .t2{position:absolute;left:0;right:0;top:0;height:100%;display:flex;align-items:center;justify-content:center;transform:translateY(100%)}
.btn:hover .t,.cell:hover .t{transform:translateY(-100%)}
.btn:hover .t2,.cell:hover .t2{transform:none}
.btn:active,.cell:active{transform:scale(.97)}
.links a{position:relative;overflow:hidden;display:inline-block}
.links a .t2{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.links a .t{display:block;margin:-6px 0;padding:6px 0;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.links a:hover .t{transform:translateY(-100%)}
.links a:hover .t2{transform:none}
@media (prefers-reduced-motion:reduce){.w i{transform:none;transition:none}.btn .t,.btn .t2,.cell .t,.cell .t2,.links a .t,.links a .t2{transition:none}}

/* motion: the record is the authored moment; the reply card alone settles into its tilt as it arrives */
.js [data-in]{opacity:0;transform:translateY(28px) rotate(0deg)}
.js [data-in].in{opacity:1;transform:translateY(0) rotate(var(--rot,0deg));transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  .js [data-in]{opacity:1;transform:none;transition:none}
  .btn,.cell,.links a{transition:none}
}

/* below desktop the record tips into the corner of each paper; the first lines leave it room */

/* desktop: the spine on each paper's left edge, the record floating in the middle, the paper in the right half */
@media (min-width:1000px){
  .sec,footer{display:grid;grid-template-columns:1fr min(56vw,860px);column-gap:24px;align-items:start}
  footer{align-items:center}
  .sec{padding:112px var(--pad) 120px}
  .paper,.half,.card{grid-column:2}
  .programme h2{max-width:14ch;margin:0 0 24px}
  .programme .note{max-width:34ch;margin:0}
  .programme .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin:56px 0 48px;max-width:620px}
  .programme blockquote{font-size:26px;line-height:1.3}
  .half .lead{max-width:34ch}
      .player{grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
  .player.one{grid-template-columns:1fr}
  .cell{min-height:72px}
  .qa{columns:2;column-gap:56px}
  .field{padding-top:0;padding-bottom:0;min-height:80svh;align-items:start}
  .card{--rot:2deg}
  .card{width:min(56vw,720px);margin:88px auto 144px;padding:52px 60px 88px}
  .hole:nth-child(3),.hole:nth-child(4){bottom:84px}
  .card h2{font-size:var(--t2);margin-bottom:14px}
  .card .fld label{font-size:var(--t5)}
  .card .fld input{min-height:60px;font-size:20px}
  .fld.who input{min-height:96px;font-size:52px}
  .names .fld.who input{min-height:84px;font-size:36px}
  .bib-head{margin:0 0 26px;font-size:var(--small)}
  .row{grid-template-columns:1fr 1fr;gap:0 16px}
  .stub{margin:20px -60px 0;padding:26px 60px 0}
  footer{padding:88px var(--pad) 56px}
  .runs{margin-top:0}
  .runs-in{grid-template-columns:1fr min(56vw,860px);column-gap:24px;justify-items:start;align-items:center;padding:72px var(--pad) 72px}
  .plate{grid-column:1;justify-self:center;width:min(24vw,40vh)}
  .log{grid-column:2;max-width:none}
  /* the record lies on the postcard itself: one cream card across the whole width, text sized to fill it */
  .postcard{grid-column:1 / -1;grid-template-columns:auto 1fr auto;grid-template-areas:"mark msg addr";gap:48px;padding:48px 56px;min-height:420px;align-items:center}
  .card-mark{width:min(24vw,360px);align-self:center}
  .scallops.s7{display:none}
  .scallops.s12{display:block}
  .msg .signoff{font-size:var(--t2);max-width:none;margin-bottom:16px}
  .msg{text-align:left}
  .msg p{font-size:26px;line-height:1.35;margin:0 0 6px}
  .addr{gap:16px;align-content:center}
  .addr a{font-size:24px}
  .addr .soc svg{width:32px;height:32px}
}