/* ============================================================
   Record crate: the homepage Work section, the turntable player,
   the needle-drop opening and the page-change transition.
   Every class here is prefixed (cr- / pl-) so it never collides
   with styles.css. Motion is transform/opacity only.
   ============================================================ */
:root {
    --cr-ease: cubic-bezier(.2, .8, .2, 1);
    --cr-pull: cubic-bezier(.25, 1.15, .4, 1);
    --cr-la: 0;
}
@supports (transition-timing-function: linear(0, 1)) {
    :root { --cr-pull: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.3%, 1.043 24.6%, 1.035 28.6%, 1.007 37.4%, .997 45.8%, 1); }
}

/* ----- opening: the needle drops on the headline ----- */
.hero-copy { position: relative; }
.cr-groove { position: absolute; height: 14px; opacity: 0; pointer-events: none;   /* a radio's tuning scale: fine ticks, a longer tick every fifth, a base line; no numbers */
    background:
        linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 40px) 0 100% / 100% 13px no-repeat,
        repeating-linear-gradient(90deg, color-mix(in oklab, var(--ink) 60%, transparent) 0 1px, transparent 1px 8px) 0 100% / 100% 7px no-repeat; }
.cr-needle { position: absolute; left: 0; top: 0; width: 2px; height: 46px; margin-left: -1px; border-radius: 1px; background: var(--signal); opacity: 0; pointer-events: none; will-change: transform, opacity;
    box-shadow: 0 0 0 .5px color-mix(in oklab, var(--signal) 60%, transparent), 0 6px 10px -6px rgba(0, 0, 0, .35); }
.hero h1 .cr-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .cr-w > span { display: inline-block; }
.cr-intro .hero > *, .cr-intro .hero-copy > *, .cr-seen .hero > * { animation: none; }
.cr-intro .hero h1 .cr-w > span { transform: translateY(105%); }
.cr-intro .hero h1:not(.cr-split) { opacity: 0; }
.cr-intro .hero-identity, .cr-intro .hero-lede, .cr-intro .hero-actions, .cr-intro .site-header { opacity: 0; }
.cr-intro.cr-play .cr-needle { animation: cr-needle 2s cubic-bezier(.65, 0, .35, 1) both; }
.cr-intro.cr-play .cr-groove { animation: cr-groove 2s ease both; }
.cr-intro.cr-play .hero h1 .cr-w > span { animation: cr-word .8s var(--cr-ease) both; animation-delay: calc(.45s + var(--k) * 70ms); }
.cr-intro.cr-play .hero-identity { animation: cr-fade .6s .2s var(--cr-ease) both; }
.cr-intro.cr-play .hero-lede { animation: cr-rise .8s 1.1s var(--cr-ease) both; }
.cr-intro.cr-play .hero-actions { animation: cr-rise .8s 1.25s var(--cr-ease) both; }
.cr-intro.cr-play .site-header { animation: cr-fade .8s 1.3s var(--cr-ease) both; }
/* the tuning needle: upright the whole way, it glides along the scale like a radio dial being turned, and settles */
@keyframes cr-needle {
    0% { opacity: 0; transform: translate3d(var(--nx), var(--ny), 0); }
    12% { opacity: 1; transform: translate3d(var(--nx), var(--ny), 0); }
    74% { opacity: 1; transform: translate3d(calc(var(--nx) + var(--nw)), var(--ny), 0); }
    90%, 100% { opacity: 0; transform: translate3d(calc(var(--nx) + var(--nw)), var(--ny), 0); }
}
@keyframes cr-groove { 0% { opacity: 0; } 12% { opacity: .55; } 74% { opacity: .55; } 90%, 100% { opacity: 0; } }
@keyframes cr-word { from { transform: translateY(105%); } to { transform: none; } }
@keyframes cr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ----- one scale for every object on the site: --mm is one millimetre on screen. The record sleeve (314 mm, a 302 mm
   LP inside), the CD jewel case (142 × 125 mm) and the cassette case (110 × 69.5 mm) are all drawn at it, so they
   keep their real proportions to each other. ----- */
:root {
    /* as large as the crate allows: two sleeves, each with room for its record (1.66 sleeves), across the content width;
       on a tablet or phone, a sleeve fills its column. Never more than 1.25 px per mm. */
    --mm: clamp(.75px, calc((min(100vw - 2 * var(--gutter), var(--content-max)) - clamp(24px, 4vw, 64px)) / 1043), 1.25px);
}
@media (max-width: 860px) { :root { --mm: min(1.25px, calc((100vw - 2 * var(--gutter) - 14px) / 628)); } }

/* ----- the crate: sleeves sit left in their own cell, every record pulls out to the right and stays inside its cell ----- */
.cr-crate { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); row-gap: clamp(56px, 7vw, 96px); margin-top: 8px; }
.cr-rec { position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; outline: none; perspective: 1600px; z-index: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cr-rec:focus-visible .cr-sleeve { outline: 2px solid var(--accent); outline-offset: 4px; }
.cr-sz { width: calc(314 * var(--mm)); }   /* a 12-inch sleeve, 314 mm, at the one scale (--mm already fits the cell) */
.cr-stage { position: relative; aspect-ratio: 1; transition: transform .7s var(--cr-ease); }
.cr-sleeve { position: absolute; inset: 0; z-index: 3; display: block; background: var(--bb); overflow: hidden; border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 22px 44px -24px rgba(42, 32, 24, .6); transition: transform .7s var(--cr-ease); }
.cr-sleeve > img, .pl-sleeve > img { position: absolute; left: 0; top: 0; width: 100%; height: 56.25%; max-width: none; object-fit: cover; display: block; }
.cr-band { position: absolute; left: 0; right: 0; bottom: 0; height: 43.75%; background: var(--bb); }
.cr-band img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.cr-talktalk .cr-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 5px); }
.cr-sleeve::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .22; mix-blend-mode: soft-light;
    background: radial-gradient(circle at 50% 50%, transparent 0 45.5%, rgba(255, 255, 255, .35) 46%, transparent 46.8%), var(--cr-grain, none); background-size: 100% 100%, 180px 180px; }
.cr-sleeve::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 5px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35)); pointer-events: none; }
.cr-lip { position: absolute; z-index: 2; top: 3%; bottom: 3%; right: -1px; width: 18px; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .32), transparent); opacity: .8; }
.cr-disc { position: absolute; z-index: 1; top: 1.9%; left: 1.9%; width: 96.2%;   /* a 302 mm LP in a 314 mm sleeve */
    aspect-ratio: 1; border-radius: 50%; transform: translateX(calc(var(--pull, .1263) * 100%)) rotate(calc(var(--pull, .1263) * 9deg)); will-change: transform; }
.cr-rot { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.cr-rot canvas { width: 100%; height: 100%; display: block; }
.cr-disc::after, .pl-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .45), 0 0 32px -8px var(--glow, transparent); }
/* the light: a fixed butterfly reflection on the grooves, turned by the pointer, never by the record */
.cr-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; transform: rotate(calc(var(--cr-la) * 1deg)); mix-blend-mode: screen;
    -webkit-mask: radial-gradient(circle, transparent 0 33.5%, #000 34.5% 98.5%, transparent 99%); mask: radial-gradient(circle, transparent 0 33.5%, #000 34.5% 98.5%, transparent 99%);
    background: conic-gradient(from -20deg, transparent 0deg, rgba(255, 255, 255, .04) 8deg, rgba(255, 255, 255, .34) 20deg, rgba(255, 255, 255, .06) 32deg, transparent 46deg, transparent 180deg, rgba(255, 255, 255, .04) 188deg, rgba(255, 255, 255, .26) 200deg, rgba(255, 255, 255, .05) 212deg, transparent 226deg); }
.cr-sheen::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .14), transparent 55%); }
.cr-meta { margin-top: 16px; font: var(--fs-meta)/1.5 var(--font-mono); color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.cr-meta .cr-fn { font: var(--fs-body)/1.4 var(--font-sans); color: var(--ink); }
.cr-meta .cr-cue { margin-top: 4px; color: var(--accent); }
.cr-rec:hover .cr-cue, .cr-rec:focus-visible .cr-cue { text-decoration: underline; text-underline-offset: 3px; }
.cr-meta b { color: var(--ink); font-weight: 500; }

.cr-rbr { --bb: #0A281C; --bf: #C8F828; --glow: rgba(253, 74, 149, .35); }
.cr-pilo { --bb: #FFFFFF; --bf: #002F6C; --glow: rgba(38, 104, 214, .35); }
.cr-talktalk { --bb: #050B07; --bf: #7DFF9B; }
.cr-aurora { --bb: #0A1225; --bf: #62E4F4; --glow: rgba(98, 228, 244, .35); }

@media (hover: hover) {
    .cr-rec:hover, .cr-rec:focus-visible { z-index: 3; }
    .cr-rec:hover .cr-stage, .cr-rec:focus-visible .cr-stage { transform: scale(1.03); }
    .cr-rec:hover .cr-sleeve, .cr-rec:focus-visible .cr-sleeve { transform: translateX(-1.5%) rotateY(-3deg); }
}

/* entrance: only when scripting is on, and only from a visible-by-default state */
.cr-js .cr-crate:not(.cr-in) .cr-rec { opacity: 0; transform: translateY(56px); }
.cr-crate .cr-rec { transition: opacity .7s var(--cr-ease), transform .9s var(--cr-ease); }
.cr-crate.cr-in:not(.cr-settled) .cr-rec { transition-delay: calc(var(--i) * 110ms); }

/* ----- player ----- */
.pl { position: fixed; inset: 0; z-index: 1000; display: none; color: var(--ink); overscroll-behavior: contain; }
.pl.pl-open { display: block; }
.pl-bg { position: absolute; inset: 0; background: var(--bg); opacity: 0; }
.pl-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.pl-wrap { position: relative; min-height: 100%; width: min(1080px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding: clamp(72px, 12vh, 128px) 0 96px; }
.pl-deckcol { position: sticky; top: clamp(72px, 12vh, 128px); }
.pl-deck { position: relative; aspect-ratio: 1 / .86; width: 100%; border-radius: 10px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bb) 78%, #fff) 0%, color-mix(in srgb, var(--bb) 86%, #000) 60%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px color-mix(in srgb, var(--bf) 12%, transparent), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.cr-pilo .pl-deck { background: linear-gradient(160deg, #f7f8fb, #e6e9ef); }
.pl-platter { position: absolute; left: 5%; top: 6%; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #2a2b2c 0 60%, #1a1b1c 61% 100%); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pl-dots { position: absolute; inset: -1.5%; border-radius: 50%; background: repeating-conic-gradient(rgba(220, 220, 220, .75) 0 1.6deg, transparent 1.6deg 4deg);
    -webkit-mask: radial-gradient(circle, transparent 0 47.4%, #000 47.6% 49.6%, transparent 49.8%); mask: radial-gradient(circle, transparent 0 47.4%, #000 47.6% 49.6%, transparent 49.8%); }
.pl-mat { position: absolute; inset: 3%; border-radius: 50%; background: #141414; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.pl-disc { position: absolute; left: 8%; top: 9.49%; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: 2; cursor: pointer; }
.pl-armsvg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.pl-arm { transform-box: view-box; transform-origin: 88px 12px; transform: rotate(0deg); filter: drop-shadow(0 .6px .5px rgba(0, 0, 0, .5)); }
.pl.pl-lifted .pl-arm { filter: drop-shadow(0 2.6px 1.8px rgba(0, 0, 0, .32)); }
.pl-transport { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 18px; }
.pl-play { align-self: flex-start; }
.pl-play { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--bf); color: var(--bb); font: 600 15px/1 var(--font-sans); }
.pl-play svg { width: 16px; height: 16px; fill: currentColor; }
.pl-track { flex: 1; min-width: 0; }
.pl-title { margin: 0 0 8px; font: 12px/1.4 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.pl-bar { position: relative; height: 4px; border-radius: 2px; background: var(--line); cursor: pointer; }
.pl-bar::before { content: ""; position: absolute; inset: -10px 0; }
.pl-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.pl-time { display: flex; justify-content: space-between; margin: 6px 0 0; font: 11px var(--font-mono); opacity: .7; font-variant-numeric: tabular-nums; }
.pl-scope { position: relative; height: 32px; margin-top: 14px; opacity: .7; }
.pl-scope canvas { width: 100%; height: 100%; display: block; }
.pl-gen { margin-top: 12px; font: 11px/1.5 var(--font-mono); opacity: .6; max-width: 560px; }
.pl-info { min-width: 0; }
.pl-info > * { opacity: 0; transform: translateY(16px); }
.pl.pl-shown .pl-info > * { opacity: 1; transform: none; transition: opacity .6s var(--cr-ease), transform .7s var(--cr-ease); transition-delay: calc(.25s + var(--k, 0) * 50ms); }
.pl-sleeve { display: none !important; position: relative; width: min(200px, 42%); aspect-ratio: 1; border-radius: 2px; overflow: hidden; display: block; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6); margin-bottom: 28px; background: var(--bb); }
.cr-pilo .pl-sleeve { box-shadow: 0 0 0 1px rgba(0, 47, 108, .15), 0 18px 40px -22px rgba(0, 0, 0, .35); }
.pl-no { font: 12px var(--font-mono); opacity: .7; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.pl-info h3 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1; letter-spacing: -.02em; font-weight: 600; margin: 0; color: var(--ink); }
html[lang^="zh"] .pl-info h3 { letter-spacing: 0; }
.pl-lead { margin: 20px 0 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; max-width: 28em; font-style: italic; }
html[lang^="zh"] .pl-lead { font-style: normal; }
.pl-body { margin-top: 12px; }
.pl-body p { margin: 16px 0 0; max-width: 36em; color: var(--ink); font-size: 18px; line-height: 1.6; }
html[lang^="zh"] .pl-body p { line-height: 1.8; }
.pl-facts { margin: 24px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 14px; max-width: 36em; border-top: 1px solid var(--line); padding-top: 16px; }
.pl-facts dt { font: 12px var(--font-mono); opacity: .7; padding-top: 2px; }
.pl-facts dd { margin: 0; color: var(--ink); }
.pl-go { display: inline-flex; align-items: center; min-height: 44px; margin-top: 28px; padding: 0 20px; border-radius: 999px; background: var(--bf); color: var(--bb); text-decoration: none; font-weight: 600; }
.pl-go:hover { color: var(--bb); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal); }
.pl-fly { position: fixed; z-index: 4; display: none; border-radius: 50%; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.pl-fly .cr-rot { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.pl-fly canvas { width: 100%; height: 100%; display: block; }
.pl-stand { position: fixed; z-index: 5; pointer-events: none; }
.pl-stand .cr-sleeve { position: absolute; inset: 0; transform: none; transition: none; }
.pl-close { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; z-index: 1010; color: var(--ink); display: grid; place-items: center; opacity: 0; transition: opacity .4s; background: none; border: 0; cursor: pointer; }
.pl.pl-shown .pl-close { opacity: 1; }
.pl :focus-visible { outline: 2px solid var(--bf); outline-offset: 3px; }
.pl-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }

@media (max-width: 860px) {
    /* a record-shop wall: all four face out, two to a shelf; the record in the middle of the screen rises a little more */
    /* --cr-sw: the sleeve's width, a column or a real 12-inch sleeve (314 mm at --mm), whichever is smaller; the room
       above each sleeve is what its record needs to rise into, so a tablet does not get a phone's gaps */
    .cr-crate { --cr-sw: min((100vw - 2 * var(--gutter, 20px) - 14px) / 2, 314 * var(--mm)); grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: calc(var(--cr-sw) * .25 + 32px); padding-top: calc(var(--cr-sw) * .32); }
    .cr-rec { container-type: normal; align-items: stretch; }
    .cr-sz { width: min(100%, calc(314 * var(--mm))); margin-inline: auto; }   /* centred in its column on a tablet */
    /* --pull is driven per record by crate.js: 0.093 at rest (a 60° arc shows), up to ~0.31 near the reading line or
       the finger: that is as far as the row gap above allows without the record covering the caption of the row above */
    .cr-disc { transform: translateY(calc(var(--pull, .093) * -100%)) rotate(calc(var(--pull, .093) * 12deg)); }
    /* the pull only happens while the page is moving; once scrolling stops every record settles back to the 1/6 arc */

    .cr-lip { top: -1px; bottom: auto; left: 3%; right: 3%; width: auto; height: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, .32), transparent); }
    .cr-sleeve::after { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 4px; background: linear-gradient(0deg, transparent, rgba(0, 0, 0, .35)); }
    .cr-meta { margin-top: 12px; font-size: var(--fs-meta); flex-direction: column; gap: 2px; }
    .cr-meta .cr-fn { font-size: var(--fs-body); }
    .cr-js .cr-crate:not(.cr-in) .cr-rec { transform: translateY(32px); }
    .pl-wrap { grid-template-columns: 1fr; padding: 64px 0 56px; gap: 28px; width: calc(100% - 40px); }
    .pl-deckcol { position: relative; top: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; }
    .pl-transport { margin-top: 0; }
    .pl-scope, .pl-gen { grid-column: 1 / -1; }
    .pl-scope { height: 24px; margin-top: 0; }
    .pl-gen { margin-top: -8px; }
}

/* ============================================================
   Radio: a walnut FM set above the records. Cream dial glass, red needle, a knurled knob.
   ============================================================ */
}

/* ----- page change: the next page opens like a new record, from where you clicked ----- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: cr-vt-out .6s var(--cr-ease) both; }
::view-transition-new(root) { animation: cr-vt-in .7s var(--cr-ease) both; }
@keyframes cr-vt-out { to { transform: scale(.96); filter: brightness(.85); } }
@keyframes cr-vt-in { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(150% at var(--vx, 50%) var(--vy, 50%)); } }

@media (prefers-reduced-motion: reduce) {
    .cr-crate *, .pl *, .cr-needle, .cr-groove { animation: none !important; transition: none !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media print { .pl, .cr-needle, .cr-groove { display: none !important; } }

/* rotated layers inside the records must never widen the page */
body { overflow-x: clip; }
#work { overflow-x: clip; overflow-clip-margin: 0; }

/* ----- On the record: the back of the sleeve, as a track listing ----- */
.cr-back { max-width: 860px; border-top: 2px solid var(--ink); }
.cr-back-head { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 10px 0 14px; font: 12px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); }
.cr-tracks { list-style: none; margin: 0; padding: 0; }
.cr-tracks li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 0 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cr-tn { font: 13px/1.9 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.cr-tt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cr-tl { display: flex; align-items: baseline; gap: 10px; }
.cr-tl b { font-weight: 500; font-size: 1.12rem; line-height: 1.35; }
.cr-tl i { flex: 1; min-width: 24px; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 45%, transparent); transform: translateY(-.3em); }
.cr-ty { font: 13px var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-ty:empty { display: none; }
.cr-tl:has(.cr-ty:empty) i { display: none; }
.cr-tm { font: var(--fs-meta)/1.5 var(--font-mono); color: var(--muted); }
.cr-tm a { color: var(--accent); }
@media (max-width: 560px) { .cr-tl { flex-wrap: wrap; } .cr-tl i { display: none; } .cr-ty { order: -1; flex-basis: 100%; color: var(--muted); } .cr-tracks li { grid-template-columns: 2.6em minmax(0, 1fr); } }

/* track-list titles: buttons on /recognition (open a CD), links on the homepage (go to it) */
.cr-back { margin-top: clamp(28px, 4vw, 44px); }
.cr-open { appearance: none; text-decoration: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 500; font-size: 1.12rem; line-height: 1.35; color: var(--ink); cursor: pointer; text-align: left; border-radius: 2px; }
.cr-open:hover { color: var(--accent); }
.cr-tracks li.is-open .cr-open { color: var(--accent); }

/* ----- rows with a closed case in front (kit/rows.js, kit/caseview.js): Recognition CDs, About cassettes -----
   The slot is always the size of the open case (--rw-kw × --rw-kh closed widths), the way a record's cell leaves room
   for the record to come out: a case opening never moves the page. The picture and the live canvas are both anchored
   to the slot's left edge and vertical centre at fixed sizes, so the swap between them never moves a pixel.
   --rw-w0 (the closed picture's width) comes from the site-wide --mm scale; --rw-ar, --rw-kw, --rw-kh from script. */
.rw-list { --rw-zoom: 2; --rw-w0: calc(152 * var(--mm) * var(--rw-zoom) * 240 / 216); --rw-ar: 1.111; --rw-kw: 1.6; --rw-kh: 1; --rw-t: .7s; --rw-w1: calc(var(--rw-w0) * var(--rw-kw)); }
.rw-thumb { appearance: none; position: relative; display: block; width: var(--rw-w1); height: calc(var(--rw-w0) * var(--rw-kh)); padding: 0; margin: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.rw-thumb img, .rw-host { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.rw-thumb img { width: var(--rw-w0); height: calc(var(--rw-w0) / var(--rw-ar)); max-width: none; display: block; object-fit: contain; opacity: 0; transition: opacity .3s var(--cr-ease); }
.rw-thumb.has-img img { opacity: 1; }
.rw-thumb.was-cached img { transition: none; }
.rw-thumb.is-live img { visibility: hidden; }
/* baked pictures (cases.js): the picture is the whole slot, the closed case at its left */
.rw-baked img { width: var(--rw-w1); height: calc(var(--rw-w0) * var(--rw-kh)); object-fit: fill; }
.rw-host { pointer-events: none; }
.rw-host canvas { display: block; }
.rw-thumb:not(.has-img)::before { content: ""; position: absolute; left: calc(var(--rw-w0) * .12); top: 50%; width: calc(var(--rw-w0) * .7); height: calc(var(--rw-w0) / var(--rw-ar) * .72); transform: translateY(-50%) skewY(-4deg); border-radius: 2px;
    background: color-mix(in oklab, var(--ink) 7%, transparent); }
.rw-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rw-panel[hidden] { display: none; }
.rw-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--rw-t) var(--cr-ease); }
.rw-panel.is-shown { grid-template-rows: 1fr; }
.rw-inner { overflow: hidden; min-height: 0; }

.cr-tracks li.rw-row { grid-template-columns: var(--rw-w1) 2.6em minmax(0, 1fr); align-items: center; gap: 0 14px; padding: 8px 0; }
.cr-tracks li.rw-row > .rw-thumb { grid-row: 1 / span 2; grid-column: 1; }
.cr-tracks li.rw-row > .cr-tn { grid-row: 1 / span 2; grid-column: 2; }
.cr-tracks li.rw-row > .cr-tt { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
.cr-tracks li.rw-row.is-open > .cr-tt { grid-row: 1; align-self: end; }
.cr-tracks li.rw-row > .rw-panel { grid-row: 2; grid-column: 3; align-self: start; }
.cd-detail { padding-top: 8px; display: grid; gap: 6px; justify-items: start; }
.cd-detail p { margin: 0; max-width: 40em; color: var(--ink); }
.cd-orig { font: 400 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.cd-orig:hover { color: var(--accent); }
@media (max-width: 560px) {
    .cr-tracks li.rw-row { grid-template-columns: minmax(0, 1fr); gap: 6px 0; }
    .cr-tracks li.rw-row > .cr-tn { display: none; }
    .cr-tracks li.rw-row > .rw-thumb { grid-row: 1; grid-column: 1; }
    .cr-tracks li.rw-row > .cr-tt, .cr-tracks li.rw-row.is-open > .cr-tt { grid-row: 2; grid-column: 1; }
    .cr-tracks li.rw-row > .rw-panel { grid-row: 3; grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .rw-list { --rw-t: 0s; } .rw-thumb img { transition: none; } }

/* fingers: small inline links (sources, certificates, "view the original") get a 44 px tall hit area without moving the text */
@media (pointer: coarse) {
    .cr-tm a, .cd-orig { display: inline-block; padding: 13px 0; margin: -13px 0; }
}

/* ----- the homepage cases: CDs ("On the record") and cassettes ("The story so far") -----
   Owner, 2026-10-15: as present as the records. Both formats are drawn at 2.6x the records' scale, which makes a CD
   case about as tall as a record sleeve and a cassette case about as wide as one, and CDs and cassettes stay true to
   each other. On a narrow screen the slot never outgrows the column. Captions follow the record crate's: the name in
   the sans, the facts in mono, the cue in the accent. A case's fold-out (the CD booklet, the cassette J-card) is its
   own cell after the card; it spans the whole row and lands under the case. */
.case-grid.rw-list { --rw-zoom: 2.6; --rw-w0: min(calc(152 * var(--mm) * var(--rw-zoom) * 240 / 216), calc((100vw - 2 * var(--gutter, 20px)) / var(--rw-kw))); }
/* rows sit close: the slot above each case is already the room its lid opens into, so that air is the rhythm between rows */
.case-grid { --cg-gap: 12px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; gap: var(--cg-gap) 0; border: 0; }
.case-grid > .rw-row { display: grid; grid-template-columns: var(--rw-w1) minmax(0, 1fr); align-items: center; gap: 0 clamp(24px, 3vw, 48px); padding: 0; border: 0; min-width: 0; }
.case-grid > .rw-row > .rw-thumb { max-width: 100%; }
.case-grid > .rw-fold { grid-column: 1 / -1; margin-top: 0; }
.case-grid > .rw-fold:has(> .rw-panel[hidden]) { display: none; }
/* captions, as under the records */
.case-grid .cr-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; font: var(--fs-meta)/1.5 var(--font-mono); color: var(--muted); }
.case-grid .cr-tl { display: block; order: 1; }
.case-grid .cr-tm { order: 2; font: var(--fs-meta)/1.5 var(--font-mono); color: var(--muted); }
.case-grid .cr-open { appearance: none; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font: var(--fs-lead)/1.35 var(--font-sans); color: var(--ink); }
.case-grid .cr-open:hover, .case-grid > .is-open .cr-open { color: var(--accent); }
.case-grid .case-cue { order: 3; }
/* the open cue under every case ("Open the booklet +"); it says "Close" while open */
.case-cue { display: block; margin: 6px 0 0; font: 400 var(--fs-meta)/1.4 var(--font-mono); color: var(--accent); cursor: pointer; }
.case-cue:hover { text-decoration: underline; text-underline-offset: 3px; }
.case-cue .cue-c, .is-open .case-cue .cue-o { display: none; }
.is-open .case-cue .cue-c { display: inline; }
/* CDs: the case above its words at every width, as a record sleeve above its caption; the caption lines up with
   the case's left edge (the slot leaves a little room around the closed case) and the room to the right is where the
   lid opens */
.case-grid.cd-grid > .rw-row { grid-template-columns: minmax(0, 1fr); gap: 10px 0; align-items: start; }
.case-grid.cd-grid .cr-tt { padding-left: calc(var(--rw-w0) * .085); }
/* Records on a desktop (owner, 2026-11-01): the two CDs side by side, each with the room for its lid to its right inside
   its own column; the booklet of a pinned CD spans the row below both. The scale is the smaller of the records' 2.6
   and what fits two slots across, so the cases keep their true proportions to each other and to nothing else. */
@media (min-width: 861px) {
    .case-grid.cd-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); row-gap: 24px; }
    .case-grid.cd-grid.rw-list { --cd-cell: calc((min(100vw - 2 * var(--gutter, 20px), var(--content-max, 1320px)) - clamp(24px, 3vw, 48px)) / 2);
        --rw-w0: min(calc(152 * var(--mm) * var(--rw-zoom) * 240 / 216), calc(var(--cd-cell) / var(--rw-kw))); }
}
/* a tablet or phone: the case above its words, as a record above its caption */
@media (max-width: 860px) {
    .case-grid { --cg-gap: clamp(28px, 5vw, 48px); }   /* the compact list keeps real gaps: no lid room on a phone */
    .case-grid > .rw-row { grid-template-columns: minmax(0, 1fr); gap: 14px 0; align-items: start; }
}
@media (max-width: 560px) {
    .case-grid > .rw-fold { margin-top: 0; }
}

/* a pinned case can be turned round by hand to read its back */
.rw-thumb.can-turn { cursor: grab; touch-action: pan-y; }
.rw-thumb.can-turn:active { cursor: grabbing; }
.case-cue .cue-t { display: none; margin-left: 12px; color: var(--muted); }
.is-open .case-cue .cue-t { display: inline; }

/* the project, seen: its picture under the lead, kept modest */
.pl-shot { display: block; width: min(520px, 100%); aspect-ratio: 16 / 9; object-fit: cover; margin-top: 24px; border-radius: 4px; background: var(--bb); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .5); }
.pl-shot[hidden] { display: none; }
.cr-pilo .pl-shot { object-fit: contain; }
.pl-demo { margin: 24px 0 0; width: min(520px, 100%); }
.pl-demo[hidden] { display: none; }
.pl-demo video { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--bb); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .5); }
.pl-demo figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: color-mix(in oklab, var(--ink) 66%, var(--bg)); text-wrap: pretty; }
.pl-demo figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }