they are inert on it. */ .top-actions{order:2;flex:none;margin-left:0} .topctl{order:3;flex:1 1 100%;overflow-x:auto;overscroll-behavior-x:contain} /* module alive: shuffle has been moved into the catalogue strip and the queue is gone from the phone, so the whole action group leaves. */ .mshell .topbar .top-actions{display:none} /* the slim bar overlays content whenever it slides back, so in-page jumps (the skip link, smooth scroll, any hand-typed hash) must land below it. The only link target left on the page is the skip link (#index) — #about/#start went 2026-08-18 and the ALBUMS · MIXES jump nav that pointed at #chapters/#mixes went 2026-08-21 — but both sections still exist and are still legal anchors, so they keep their offset rather than landing under the bar for a /home#mixes deep link. */ #top,#index,#chapters,#mixes{scroll-margin-top:calc(var(--topbar) + 10px)} /* ── filters live with the section they used to filter ────────── On a phone the chips are not chrome, they are catalogue controls — so music-app.js moves .topctl out of the

and into #index, directly above #results (the card shelf that used to sit there was removed 2026-08-20). One 44px row aligned to the section gutter, and it scrolls away with the page like everything else. (Sort and shuffle were removed from the page 2026-08-18; the strip is the filter chips now.) */ .shelf > .topctl{margin:0 0 16px;padding:0;gap:8px} .shelf > .topctl .btn{font-size:13px;padding:0 16px} /* searching replaces the grid with results; the grid's filters have nothing to act on, so they get out of the way of the answer. */ body.searching .shelf > .topctl{display:none} .btn{min-height:44px;min-width:44px;padding:0 13px;gap:6px;font-size:0} .btn svg{width:18px;height:18px} #qCount{font-size:11.5px} .chip{padding:0 15px;min-height:44px} /* ── the queue is gone from the phone ─────────────────────────── Luc: "I find the queue to be annoying and in the way." The masthead button, the duplicate button in the player and the drawer itself all leave. The queue FEATURE is untouched: "+" on any card, row, hero or chapter still enqueues, still toasts what it did and how many tracks are up next, and the queue still decides what plays next — it simply has no panel to get in the way. Desktop keeps all three, and setQueueOpen() in music-app.js refuses to open the drawer at ≤700 so the state is unreachable even from a stale event. */ .mshell #queueTopBtn,.mshell #queueBtn,.mshell .queue{display:none} /* ── hero: fit above the fold, say each thing once ────────────── The TRACKS · MIN · PLAYS strip used to be visually hidden here because it restated the dek. It is gone from the markup entirely as of 2026-08-21, so there is nothing left to hide. */ .hero{min-height:0} /* 2026-08-18 (Luc: "I don't like that the artwork is on top of the title"): the cover no longer stacks above the text with order:-1. It keeps the markup's order and sits in its own column beside the name, top-aligned, the way a streaming app heads an album. */ /* The cover FLOATS right and the text wraps around it: the kicker, the title and however many lines of the dek sit beside it, and every line past its bottom edge gets the full width — which is what neither of the two earlier attempts managed. A grid column reserved the width down the whole hero (buttons stranded in a 230px column); absolute positioning took the cover out of flow entirely, so the dek ran underneath it. */ .hero-in{display:block;padding-top:22px;padding-bottom:26px} /* The float would otherwise start level with the kicker. Push it down by exactly the kicker's line box plus the title's top margin, so the top of the artwork lines up with the top of the release name (Luc, 2026-08-18). 11.5px is .kicker's font-size, 1.55 the body line-height, 10px the h1's margin-top below — keep these in step if any of the three changes. */ .hero-cover{ float:right;width:min(29vw,110px); margin:calc(11.5px * 1.55 + 10px) 0 12px 16px; } .hero h1{font-size:clamp(34px,10.5vw,64px);margin:10px 0 8px} /* a flex row does not wrap around a float, it overlaps it — so the buttons start below the cover rather than colliding with its bottom corner */ .hero-actions{clear:right} .hero-actions{gap:10px;margin-top:16px} .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .rec{grid-template-columns:1fr} .rec .cov{width:min(52vw,220px)} /* ── player: artwork · title · ONE play button ────────────────── Luc: "The player should just show a play button on mobile." prev/next, the scrubber, the times and AirPlay are MOVED (not cloned, not deleted) by music-app.js into the now-playing sheet, which is one tap on the bar. Same nodes, same ids, same handlers, same player.js contract — AirPlay in particular is still the one real Remote Playback route and is still hidden by its own [hidden] attribute when the browser has no support. The ungated rule is the no-module fallback: the authored three- across bar over a full-width scrubber, 90px. .mshell is the real phone bar: one 44px row, 6px of padding either side, 57px. */ .player{ grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto auto; grid-template-areas:"now transport aux" "scrub scrub scrub"; gap:8px 10px;height:var(--player); padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); } .mshell .player{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"now transport"; gap:0 10px; padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); } /* progress IS the bar's top edge: 2px, no row, no layout cost, and it is still there while the sheet is open. A full-width hairline scaled on the X axis from its LEFT edge — transform-origin is the whole point, without it progress would grow outward from the centre. scaleX() is compositor-only, so a per-timeupdate repaint costs no layout, and the element only exists in the DOM at ≤700 (music-app.js appends it in placePlayer and removes it on the desktop path), so no base-level rule is needed to keep it out of the desktop grid. It is absolutely positioned, so it is not a grid item and consumes no cell. Zero duration → scaleX(0). The baseline reduced-motion block neutralises the transition along with every other one. */ .mshell .player .p-hair{ position:absolute;left:0;top:0;height:2px;width:100%; background:var(--lime);pointer-events:none; transform:scaleX(0);transform-origin:left center; transition:transform .18s linear; } .p-now{grid-area:now;position:relative;gap:10px} .p-now .cov{width:44px;height:44px} .p-now-txt{padding-right:26px} /* the whole now-playing block opens the sheet; the chevron is the cue. Higher specificity than .icon-btn's 44×44 below, so the overlay cannot collapse back into a square over the artwork. */ /* display is re-declared here because the base rule hides it on desktop */ .p-now .p-expand{display:grid;position:absolute;inset:0;width:auto;height:auto;border-radius:6px;place-items:center end} .p-now .p-expand:hover{background:none} .p-mid{grid-area:transport;gap:0} .p-mid .p-scrub{display:none} .p-btns{gap:4px} .icon-btn{width:44px;height:44px} .p-right{grid-area:aux} /* iOS ignores element volume (hardware keys own it) and a 4px slider is not a touch target. With AirPlay moved into the sheet and the queue gone, nothing is left in the aux cell at all. */ .vol,#queueBtn{display:none} .mshell .p-right{display:none} /* the play button becomes a direct child of .player while the sheet is closed, and rides back into .p-btns while it is open */ .mshell .player > .p-toggle{grid-area:transport} /* …EXCEPT before the first release loads. player.js's expandSheet() returns early while body.player-empty is set and the sheet's only entry point is display:none in that state, so the expanded view does not exist yet and cannot be AirPlay's only route. Pre-play the aux cell comes back and #airplayBtn sits in it, exactly where the baseline had it (#vol and #queueBtn stay hidden by the rule above, so the cell holds AirPlay alone). music-app.js's placeAirplay() moves it into the expanded view the moment a release loads — which is also when the bar gains a title, a progress edge and a working expand affordance. Both selectors are (0,3,1) and beat the (0,2,0) rules above on specificity, not on order. */ .mshell body.player-empty .player{ grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"now aux transport"; } .mshell body.player-empty .p-right{display:flex} .p-scrub-m{grid-area:scrub;display:flex;padding:0} /* 4px of ink, 26px of tap: the extra area stays inside the row */ .p-scrub-m .bar::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-12px} /* ── now playing: the phone's real player ─────────────────────── The sheet covers the bar (inset:0, z-index 95 over 80), so the transport that moved in here and the play button that moved in with it are never on screen twice. .sheet is a flex column, so the skips and the tracklist are re-ordered with `order` instead of a second DOM move — the relocated rows land straight under the title. */ /* The expanded view is inset:0 over the notch, and it is the home of the transport and of AirPlay, so it has to protect all four safe areas itself — the masthead's and the player's insets do nothing for it. Without the top inset a 47px notch puts ~27px of the 44px close target under the unsafe region; in landscape an inset wider than the 18px gutter puts the left edge of the content under it. */ .sheet{ gap:12px; padding-top:calc(clamp(20px,4vh,44px) + env(safe-area-inset-top,0px)); padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px)); padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)); } /* sticky offsets are measured from the scrollport (the padding box), NOT from the content box — so top:0 would re-park the close button under the notch as soon as the sheet is scrolled. It gets the inset too. */ .sheet-close{position:sticky;top:env(safe-area-inset-top,0px);width:44px;height:44px;background:var(--bg);z-index:1} /* 2026-08-18 (Luc): the expanded view is artwork-first — bigger cover, no SIGZ · RECORD · date line, and the transport sits low on the screen. */ .sheet-art{width:min(460px,88vw,52vh)} .mshell .sheet .sheet-sub{display:none} .sheet-tl .tl-row{padding:12px} /* ±30s live inside .p-btns now, flanking prev/play/next: icon + a small "30", 44px of tap, no pill. .sheet-skips is left empty and collapses. */ .mshell .sheet .p-btns .skip-btn{ position:relative;display:grid;place-items:center; width:44px;height:44px;padding:0;border:0;background:none;border-radius:50%; color:var(--text-2);font-size:0; } .mshell .sheet .p-btns .skip-btn svg{width:26px;height:26px;stroke-width:1.7} .mshell .sheet .p-btns .skip-btn .skip-n{ position:absolute;font-size:8.5px;font-weight:800;letter-spacing:.02em; font-variant-numeric:tabular-nums; } .mshell .sheet .p-btns .skip-btn:active{color:var(--text)} .skip-btn{padding:13px 20px} /* #sCur/#sDur restate #pCurM/#pDurM, which have just moved in above them — one visible source of truth, both still painted by player.js */ .mshell .sheet .sheet-times{display:none} /* margin-top:auto absorbs the free space above the first relocated control, so seek + transport + skips + tracklist all ride low on the screen. With a full sheet there is no free space and it is a no-op. */ .mshell .sheet .p-scrub-m{width:min(720px,100%);padding:0;margin-top:auto} /* a real seek target now, not a 4px line inside a 57px bar */ .mshell .sheet .p-scrub-m .bar::after{top:-16px;bottom:-16px} .mshell .sheet .p-mid{flex-direction:row;justify-content:center;align-items:center;gap:22px} .mshell .sheet .p-btns{gap:14px} .mshell .sheet .sheet-skips{order:1} .mshell .sheet #sheetTl{order:2} /* queue drawer (desktop-only on this breakpoint, but it is still the ≤700 layout for a tablet that never gets .mshell): 44px rows */ .q-head .q-clear{min-height:44px;padding:0 4px} .q-row{grid-template-columns:40px minmax(0,1fr) auto 44px} .q-row .qx{width:44px;height:44px;font-size:16px} .tr{grid-template-columns:28px minmax(0,1fr) auto 44px;gap:10px} .tr .tr-p{display:none} /* Both set the inherited variable, so the record and series years stay in the same proportion on a phone as they do on a desktop instead of one of them keeping its desktop size. */ .chapter{--ghost-fs:clamp(96px,26vw,150px)} .mix-chapter{--ghost-fs:clamp(46px,11vw,74px)} /* section rhythm: 9–11vh of padding is a whole thumb-swipe of nothing. Unlike desktop the section is NOT empty here — music-app.js moves the chip strip into it — so it keeps its top padding; the gap below the chips is the strip's own 16px margin, hence no bottom padding. Both rules must be re-stated at the SAME specificity as their base-level counterparts (a bare .shelf here would lose to base `body.searching .shelf` and take the desktop clamp on a phone). */ .shelf{padding:26px var(--gutter) 0} body.searching .shelf{padding:26px var(--gutter) 34px} /* the counts line does not fit beside the domain on a phone */ .colophon{grid-template-columns:1fr;grid-template-areas:"brand" "socials" "counts";gap:10px} .colophon #colophonCounts{text-align:left} .chapter{padding:40px var(--gutter) 32px} .rec{padding:24px 0} .mixes{padding:40px var(--gutter)} .mixgrid{margin-top:22px} /* cards: the play button is anchored to the artwork, not to the card box — card height moves with the title, and bottom:64px landed on the words. */ .card .c-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* no max-height clip here: music-app.js appends the DEMO badge inside .c-meta */ .card .c-meta{gap:5px;font-size:12px} /* ── density: one line everywhere a release describes itself ──── .c-meta ships as ALBUM · 2019 · 11 tracks · 35 min [DEMO] · N plays — alternating value/separator spans (music-app.js:191-193), so children 1-3 are always " · " for records AND mixes and everything from child 4 on is the tail. .rec-meta is the recommendation row and ships six children (year, kind, tracks, duration, plays, accent hex) with no separators, so children 3+ are its tail — the previous run stopped at 5+ and left four fields wrapping onto two lines at 360px. (.hero-meta used to be hidden whole here — it was removed from the page on 2026-08-21, so it is no longer in this group.) These are visually-hidden, NOT display:none: the track/duration/play facts stay in the accessibility tree for screen-reader users, who are not the ones asking for a calmer screen. Absolutely positioned with every offset auto, so each box keeps its static position and takes zero space — no reflow, and nothing still shown gets clipped. :not(.tag-demo) is load-bearing. The DEMO badge is appended INSIDE .c-meta and always lands at child ≥6, so a naive tail-hide would eat it — exactly the clip an earlier merge had to back out. */ .card .c-meta > *:nth-child(n+4):not(.tag-demo), .rec-meta > *:nth-child(n+3){ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;pointer-events:none; } /* the badge is the only thing left that can push meta to a second line, so shrink it to buy headroom: worst case is a 2-column grid at ~350px, where the card's content box is 130px and "ALBUM · 2019 DEMO" ≈118px. */ .card .c-meta .tag-demo{font-size:9px;padding:1px 4px;letter-spacing:.08em;flex:none} .rec-meta{gap:10px} /* touch targets — 44px minimum, thumbs are blunt */ .tr .tr-q{width:44px;height:44px} .tl-toggle{padding:14px 4px} .rec-play{padding:14px 22px 14px 17px} /* .jump a's 44px touch target went with the jump nav itself (2026-08-21). */ /* .socials a is already a 44px icon button at every width (2026-08-18) — the old inline-block + padding rule here fought that and is gone. */ .empty .btn-ghost{padding:14px 18px} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;scroll-behavior:auto !important} }