/* ══════════════════════════════════════════════════════════════════════ THE CONTENT REGISTER · v0 chrome.css (extracted from the gallery proto) brings the tokens, the ground and the chrome. This is what goes INSIDE it: the room, the type, the prose measure, the frame kit, and the few quiet controls a page needs. Everything here speaks the proto's own values — the eyebrow's gold tick, the display scale of .latestTitle / .latestSub, the panel of .bandDrop, the gilt recipe of .frame / .canvas. Where a number is echoed rather than inherited it is because the proto's own rule is bound to the homepage's state machinery and cannot be shared as-is; those are marked. Reading text holds 4.5:1 on the void ground, per the standing floor. ══════════════════════════════════════════════════════════════════════ */ /* ── The ground, unbroken ───────────────────────────────────────── chrome.css paints the room's ground on and leaves with no background of its own. A background on the body therefore PROPAGATES to the canvas — and a propagated background is painted over the whole canvas but POSITIONED to the root element's box, not to the window. On a page with less content than the window that box ends just under the foot, so the gradient finishes there and the default background-repeat tiles it from that line down: the dark end (--room-lo) meets the light start (#090c11) again, and the join reads as a horizontal seam under the foot. The proto's own body{min-height:100%} cannot prevent this: has no height for that percentage to resolve against, so the declaration is inert. Three declarations close it, each with its own job: html{min-height:100%} the root box — the positioning area — is never shorter than the window, so the gradient always spans at least the visible page. no-repeat even if something else shortens that box, the gradient is never laid down a second time. background-color whatever the gradient does not reach is filled with the colour the gradient ENDS on, so the handoff is invisible by construction rather than by arithmetic. The homepage does not load this sheet — it is self-contained — and its 91 works never make a short page, so this is the converted pages' fix alone. */ html{ min-height:100%; } body{ background-repeat:no-repeat; background-color:var(--room-lo); } /* ── The room ───────────────────────────────────────────────────── The band is a hairline above; the room begins below it with air, and never runs wider than the measure its content asks for. */ /* The room is centred, and capped. Left-parked content with a dead right half reads as an unfinished template on a wide screen; the masthead above it is centred, so the page under it should be composed too. Centring happens ONCE, on the wrappers — never on the individual blocks inside them. A page whose paragraphs, headings and rules each centred themselves would have a different left edge on every line of the page. One measure, one left edge, the whole block centred in the window. The cap is 1400 and not less on purpose: at 1280 the episodes index lost a column (1186px of grid takes three 300px tracks, not four), and that geometry was reviewed and signed off. The cap is there to stop very wide screens, not to re-lay pages that already work — the reading columns do their own centring below, which is what the complaint was actually about. */ .room{ position:relative; z-index:1; max-width:1400px; margin-inline:auto; padding:clamp(30px,5.2vh,66px) var(--edge) clamp(72px,10vh,132px); } .room > * + *{ margin-top:0; } /* ── The page announces itself ──────────────────────────────────── The eyebrow is the homepage's own device: a short gold rule, then the name of the thing in tracked caps. Here it is quiet — the struck badge belongs to the newest tale alone. */ .pageEyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(9px,1.5vh,18px); font-family:var(--font-serif); font-size:10.5px; text-transform:uppercase; letter-spacing:.26em; color:rgba(201,168,117,.9); } .pageEyebrow i{ display:block; flex:0 0 auto; width:26px; height:1px; background:linear-gradient(90deg, var(--gold), rgba(201,168,117,.12)); } .pageTitle{ font-family:var(--font-display); font-weight:400; font-size:clamp(28px,3.05vw,52px); line-height:1.1; letter-spacing:-.006em; color:var(--warm-gold); text-wrap:balance; } .pageSub{ display:block; margin-top:clamp(7px,1.1vh,14px); font-family:var(--font-display); font-weight:400; font-size:clamp(16px,1.62vw,27px); line-height:1.24; letter-spacing:.03em; color:rgba(232,200,154,.62); text-wrap:balance; } /* A subtitle a page may or may not have — a note title splits on its colon and most titles have no colon — so an absent one takes no space. */ .pageSub:empty{ display:none; } .pageLede{ margin-top:clamp(16px,2.3vh,26px); max-width:62ch; font-family:var(--font-display); font-size:19.5px; line-height:1.6; color:rgba(232,228,221,.8); } /* ── A document ────────────────────────────────────────────────── A page that is mostly writing — a note, a diary entry, a colophon. Head and prose share one column, so the title never runs wider than the words underneath it, and the display size comes down a step: a headline set to the full page measure is a poster, and this is a page to be read. */ .doc{ max-width:62ch; margin-inline:auto; } .doc .pageTitle{ font-size:clamp(27px,2.6vw,44px); } /* The room gives its children no vertical rhythm of their own (.room > * + * is zeroed), so each part carries its own air. The head has margins; the prose, which can follow either a title or a subtitle, needs one too. */ .doc .prose{ margin-top:clamp(24px,3.4vh,38px); } /* ── What "reading text" means here ────────────────────────────── Everything a visitor READS — prose, ledes, descriptions, excerpts, fact values, captions that are sentences — is set in the display face. The old site's About page did exactly this (.about-page carried font-family:var(--font-display)), and that page is the one the owner reads. What does NOT move: the tracked-caps label register — eyebrows, meta lines, quiet verbs, fact LABELS, the band and the foot. Those run at 9-10.5px with .16-.26em of tracking, and Garamond's small x-height and fine strokes go spindly at that size where Georgia stays sturdy. They are chrome, not reading, and nobody complains about a label. Sizes are re-derived, not inherited, and the derivation was MEASURED in the browser rather than guessed: EB Garamond's x-height is 0.842 of Georgia's at the same pixel size. The old About page read at 17.6px Georgia — an 8.47px x-height — so matching it takes 20.5px of Garamond (8.30px), not the 18.5px a "go up a point" rule of thumb would have given, which would have landed 12% SMALLER than what he is comparing against. Leading follows the same arithmetic: 20.5 x 1.62 = 33.2px, against the old page's 17.6 x 1.9 = 33.4px. The measure is re-counted too — 64ch of Garamond at this size is 70 characters to the line. ── Prose ─────────────────────────────────────────────────────── */ /* What markdown renders into. One measure, one voice, and links in the masthead cadence's treatment: gold, underlined by a hairline, never a different colour on hover but a brighter one. The size is FIXED, not scaled to the window. It used to be clamp(15.5px,1.06vw,17.5px), which was written when the column still grew with the viewport; once the room was capped and centred, 1.06vw stopped reaching its ceiling and every desktop got the 15.5px floor. A 70ch box at 15.5px Georgia measured 86 characters to the line — half again over a comfortable measure, which is what "poor spacing" actually was. A reading column should not resize with the window, so it no longer does: one size here, one smaller size on the phone, and a measure set in ch so it holds whatever the face. Headings get their own top margin. Leaning on the generic block rhythm gave a new section exactly as much air as a new paragraph. */ .prose{ max-width:64ch; font-family:var(--font-display); font-size:20.5px; line-height:1.62; color:rgba(232,228,221,.84); text-wrap:pretty; } .prose > * + *{ margin-top:1.25em; } /* Authored markdown may open with its own "# " heading — 170 of the 181 transcript and research pages do. The page already carries its title in .pageTitle above, so this one is a section head, not a second masthead: it takes the h2 treatment a step up rather than the UA's bold slab. */ .prose h1{ margin-top:1.6em; font-family:var(--font-display); font-weight:400; font-size:clamp(24px,2.15vw,33px); line-height:1.16; letter-spacing:-.005em; color:var(--warm-gold); } .prose > h1:first-child, .prose > h2:first-child, .prose > h3:first-child{ margin-top:0; } .prose h2{ margin-top:2.1em; font-family:var(--font-display); font-weight:400; font-size:clamp(22px,1.95vw,30px); line-height:1.18; letter-spacing:-.004em; color:var(--warm-gold); } .prose h3{ margin-top:1.85em; font-family:var(--font-display); font-weight:400; font-size:clamp(18px,1.4vw,22px); line-height:1.24; letter-spacing:.01em; color:rgba(232,200,154,.86); } .prose h4{ margin-top:1.6em; font-family:var(--font-serif); font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:rgba(201,168,117,.9); } .prose a{ color:var(--warm-gold); border-bottom:1px solid rgba(232,200,154,.55); padding-bottom:1px; text-decoration:none; transition:border-color .35s ease, color .35s ease; } .prose a:hover{ color:#fff5e2; border-bottom-color:var(--warm-gold); } .prose strong{ color:rgba(240,236,229,.95); font-weight:400; } .prose em{ font-style:italic; color:rgba(232,200,154,.86); } .prose ul, .prose ol{ padding-left:1.3em; } .prose li + li{ margin-top:.5em; } .prose li::marker{ color:rgba(201,168,117,.8); } .prose blockquote{ margin-left:0; padding:.15em 0 .15em 1.15em; border-left:1px solid rgba(201,168,117,.4); font-style:italic; color:rgba(232,200,154,.8); } .prose blockquote cite{ display:block; margin-top:.7em; font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.2em; color:rgba(139,155,180,.86); } .prose code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.87em; padding:.12em .38em; background:rgba(201,168,117,.07); border:1px solid rgba(201,168,117,.16); color:rgba(232,200,154,.92); } .prose pre{ overflow-x:auto; padding:14px 16px; background:rgba(0,0,0,.34); border:1px solid rgba(201,168,117,.16); } .prose pre code{ background:none; border:0; padding:0; } .prose hr{ border:0; height:1px; margin:2.2em 0; background:rgba(201,168,117,.13); } .prose img{ max-width:100%; height:auto; display:block; } /* A picture set into the writing. Markdown renders images as

with the caption under them and the whole thing wired to the lightbox, so the figure resets the UA's 40px side margins (which would indent every picture against the measure) and fills the measure it sits in. The picture takes the rabbet — the same hairline- over-dark-ring the frame kit rings .plateCanvas with — but not the gilt leaf, which belongs to the works themselves. The caption stays outside the ring, where it reads as writing rather than as part of the plate. */ .prose figure{ margin:2em 0; } .prose figure img{ width:100%; cursor:zoom-in; box-shadow: 0 0 0 1px rgba(214,180,124,.28), 0 0 0 4px var(--rabbet), 0 22px 48px -22px rgba(0,0,0,.9); } .prose figcaption{ margin-top:.7em; font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:rgba(139,155,180,.86); } /* ── A hairline rule, as a section seam ──────────────────────────── */ .roomRule{ border:0; height:1px; background:rgba(201,168,117,.13); margin:0; } /* ── The plate card ────────────────────────────────────────────── A list item as a panel, in the language of the band's dropdown: a near-opaque ground behind a gold hairline, lifting a little when reached for. Used for lists of works, notes, entries. */ .plateCard{ display:block; position:relative; padding:clamp(15px,2vh,20px) clamp(16px,2vw,22px); background:rgba(9,12,17,.97); border:1px solid rgba(201,168,117,.16); text-decoration:none; transition:border-color .35s ease, background .35s ease, transform .35s ease; } .plateCard:hover{ border-color:rgba(201,168,117,.42); background:rgba(13,17,24,.99); } .plateCard:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; } .plateName{ display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(18px,1.5vw,23px); line-height:1.18; color:var(--warm-gold); } .plateSub{ display:block; margin-top:.28em; font-family:var(--font-display); font-size:clamp(13.5px,1vw,15.5px); line-height:1.3; letter-spacing:.02em; color:rgba(232,200,154,.7); } .plateMeta{ display:block; margin-top:.7em; font-family:var(--font-serif); font-size:9.5px; text-transform:uppercase; letter-spacing:.18em; color:rgba(139,155,180,.86); } .plateMeta:empty{ display:none; } /* An excerpt, not a subtitle: prose in the reading face, dimmer than the name above it, so a card can carry a sentence without shouting it. */ .plateText{ display:block; margin-top:.62em; font-family:var(--font-display); font-size:15px; line-height:1.54; color:rgba(232,228,221,.66); } .plateText:empty{ display:none; } .plateList{ display:grid; gap:clamp(12px,1.6vw,18px); grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); margin-top:clamp(20px,3vh,32px); } /* ── The work card ────────────────────────────────────────────── The homepage's own card, restated for a flat list rather than a rail: "the same gilt as the wall, at a whisper" (proto .card/.cardArt/.cardIn). Not .plateFrame — that kit is a single detail plate at rest; a grid of many works needs the routine hover/focus states the proto's card carries. */ .workCard{ display:block; color:inherit; -webkit-tap-highlight-color:transparent; } .workArt{ display:block; position:relative; padding:2px; background:linear-gradient(147deg, rgba(242,220,180,.44) 0%, rgba(177,141,85,.30) 34%, rgba(107,85,48,.36) 58%, rgba(220,192,148,.40) 100%); box-shadow:0 22px 44px -26px rgba(0,0,0,.9); transition:background .55s ease, box-shadow .55s ease; } .workIn{ display:block; position:relative; overflow:hidden; aspect-ratio:500 / 279; background:#080a0e; box-shadow:inset 0 0 0 1px rgba(23,16,10,.9); } .workIn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.88) brightness(.86); transition:filter .6s ease; } /* The plate strip on an episode page wears the same whisper of gilt, so its hover and focus are stated here rather than restated below. */ .workCard:hover .workArt, .plateThumb:hover .workArt{ background:linear-gradient(147deg, rgba(242,220,180,.78) 0%, rgba(177,141,85,.54) 34%, rgba(107,85,48,.58) 58%, rgba(220,192,148,.72) 100%); box-shadow:0 26px 52px -24px rgba(0,0,0,.95); } .workCard:hover .workIn img, .plateThumb:hover .workIn img{ filter:saturate(1) brightness(1); } .workCard:focus-visible .workArt, .plateThumb:focus-visible .workArt{ outline:1px solid var(--warm-gold); outline-offset:4px; } .workName{ display:block; margin-top:clamp(11px,1.3vh,15px); font-family:var(--font-display); font-weight:400; font-size:clamp(16px,1.16vw,21px); line-height:1.18; letter-spacing:-.004em; color:var(--warm-gold); } .workMeta{ display:block; margin-top:clamp(7px,.9vh,11px); font-family:var(--font-serif); font-size:9.5px; text-transform:uppercase; letter-spacing:.18em; color:rgba(139,155,180,.86); } .workMeta:empty{ display:none; } /* One flat chronological grid — no shelf-grouping. */ .workGrid{ display:grid; gap:clamp(16px,1.9vw,26px); grid-template-columns:repeat(auto-fill, minmax(min(100%,300px),1fr)); margin-top:clamp(20px,3vh,32px); } /* .workCard's own display:block beats the UA [hidden] rule at equal specificity by source order — this restates it so a filtered-out card actually leaves the grid instead of rendering as an empty tile. */ .workCard[hidden]{ display:none; } /* ── The find row ──────────────────────────────────────────────── .findLine/.findGlass are the shared find register (above); this is the layout around them for a page with a live count beside the field. */ .findRow{ margin-top:clamp(16px,2.4vh,26px); display:flex; align-items:center; flex-wrap:wrap; gap:clamp(12px,2vw,20px); } .findRow .findLine{ width:min(420px,100%); border-bottom:1px solid rgba(201,168,117,.22); transition:border-color .35s ease; } .findRow .findLine:focus-within{ border-bottom-color:rgba(201,168,117,.55); } .findCount{ font-family:var(--font-serif); font-size:9.5px; text-transform:uppercase; letter-spacing:.18em; color:rgba(139,155,180,.86); } .workEmpty{ padding:clamp(30px,6vh,70px) var(--edge); font-family:var(--font-display); font-style:italic; font-size:18px; color:rgba(232,228,221,.62); } /* ── The quiet verb ────────────────────────────────────────────── The page's small ways on. Tracked caps in gold, an arrow that steps when reached for, and a target bigger than the writing — invisibly, since there is nothing here to draw. */ .quietVerb{ position:relative; display:inline-flex; align-items:center; gap:.55em; padding:8px 0; min-height:32px; font-family:var(--font-serif); font-size:10.5px; text-transform:uppercase; letter-spacing:.2em; color:var(--warm-gold); text-decoration:none; transition:color .35s ease; } .quietVerb::before{ content:''; position:absolute; top:50%; height:44px; left:-10px; right:-10px; transform:translateY(-50%); } .quietVerb em{ font-style:normal; transition:transform .35s ease; } .quietVerb:hover{ color:#fff5e2; } .quietVerb:hover em{ transform:translateX(3px); } .quietVerb:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; } .verbRow{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,2.6vw,34px); margin-top:clamp(22px,3.4vh,36px); } /* ── THE FRAME KIT ─────────────────────────────────────────────── The gilt frame, restated for any page. The proto's own .frame/.canvas are welded to the homepage's slide state machinery, so this is a deliberate restatement of the same recipe against the same --gilt-* and --rabbet tokens: layered leaf on the outside, a rabbet shadow and a dark ground within, and the picture sitting inside both. .plateFrame the gilt .plateCanvas the ground the picture sits on .plate16x9 an aspect for video and stills that are not 500:279 .plateGlow the optional lamp behind it */ .plateFrame{ display:block; position:relative; padding:clamp(6px, 1.75%, 20px); background:linear-gradient(147deg, var(--gilt-hi) 0%, var(--gilt-mid) 16%, var(--gilt-low) 37%, #8d7242 51%, var(--gilt-mid) 67%, var(--gilt-low) 83%, #dcc094 100%); border:1px solid rgba(255,241,214,.22); box-shadow: 0 1px 0 rgba(255,244,220,.16), 0 30px 66px -26px rgba(0,0,0,.96), 0 8px 18px rgba(0,0,0,.55); } .plateCanvas{ display:block; position:relative; overflow:hidden; aspect-ratio:500 / 279; background:radial-gradient(120% 100% at 50% 38%, #191309 0%, #100b06 58%, #0a0705 100%); box-shadow: 0 0 0 1px rgba(214,180,124,.42), 0 0 0 3px var(--rabbet), inset 0 3px 16px rgba(0,0,0,.6); } .plateCanvas > img, .plateCanvas > video, .plateCanvas > iframe{ position:absolute; inset:0; width:100%; height:100%; display:block; border:0; object-fit:cover; } .plate16x9 .plateCanvas, .plateCanvas.plate16x9{ aspect-ratio:16 / 9; } .plateGlow{ position:absolute; left:50%; top:50%; width:118%; height:128%; transform:translate(-50%,-50%); pointer-events:none; z-index:0; background:radial-gradient(closest-side ellipse at 50% 46%, rgba(232,200,154,.09) 0%, rgba(232,200,154,.035) 44%, rgba(232,200,154,0) 76%); } .plateHolder{ position:relative; } .plateHolder .plateFrame{ position:relative; z-index:1; } .plateCaption{ display:block; margin-top:clamp(10px,1.5vh,15px); font-family:var(--font-serif); font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; color:rgba(139,155,180,.86); } /* ── The find register, for the rounds that need a field ─────────── */ .findLine{ display:inline-flex; align-items:center; gap:9px; padding:8px 0; min-height:40px; } .findLine input{ flex:1 1 auto; min-width:0; background:none; border:0; outline:none; padding:0; margin:0; font-family:var(--font-serif); font-size:16px; letter-spacing:.04em; color:var(--warm-gold); } .findLine input::placeholder{ color:rgba(139,155,180,.78); text-transform:none; letter-spacing:.04em; opacity:1; } .findLine input::-webkit-search-cancel-button, .findLine input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; width:0; height:0; } .findGlass{ display:block; flex:0 0 auto; width:11px; height:11px; position:relative; border:1.5px solid rgba(201,168,117,.8); border-radius:50%; } .findGlass::after{ content:''; position:absolute; right:-4px; bottom:-3px; width:6px; height:1.5px; background:rgba(201,168,117,.8); transform:rotate(45deg); } /* ── The band's active room ────────────────────────────────────── The proto has no such state: its band is always the homepage's own. On a converted page the room you are standing in says so, and a room inside a dropdown says it through the toggle that holds it. */ .bandNav a.active{ color:var(--warm-gold); } .bandGroupToggle.active{ color:var(--warm-gold); } /* ── The lightbox, reskinned ─────────────────────────────────────── */ .lightbox-overlay{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:clamp(20px,5vh,64px) var(--edge); background:radial-gradient(130% 78% at 50% 42%, rgba(232,200,154,.045) 0%, rgba(232,200,154,0) 62%), var(--void); } .lightbox-overlay.active{ display:flex; } .lightbox-image{ max-width:100%; max-height:82vh; display:block; box-shadow:0 50px 130px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(201,168,117,.16); } .lightbox-close{ position:absolute; z-index:5; width:48px; height:48px; border-radius:50%; top:calc(env(safe-area-inset-top, 0px) + 14px); right:calc(env(safe-area-inset-right, 0px) + 14px); display:flex; align-items:center; justify-content:center; background:rgba(6,8,12,.6); border:1px solid rgba(201,168,117,.3); color:rgba(240,232,220,.92); font-size:17px; line-height:1; cursor:pointer; } .lightbox-close:hover{ background:rgba(201,168,117,.9); color:#0b0d11; } .lightbox-hint{ position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 20px); text-align:center; font-family:var(--font-serif); font-size:9.5px; text-transform:uppercase; letter-spacing:.2em; color:rgba(139,155,180,.86); } /* The episode's whole block, centred as one. The stage sets the measure and the writing under it keeps the stage's left edge. */ /* Text and media share a CENTRELINE, not a left edge. Centring the wrapper alone was not enough: the stage spans the whole 1040 while the writing under it is a 620px measure, so every paragraph ended mid-page against a full-width frame beneath it, and the empty right half read as a mistake. The text column now centres INSIDE the wrapper, so the writing and the picture share a middle. The measure is in px, not ch, deliberately — ch scales with font-size, so a ch-based column would be one width under the 44px title and another under the 20.5px prose, and the shared left edge would break. Inside the column everything stays ragged-right on a common left edge. Nothing here is text-align:center; the BLOCK is centred, not the text. */ .work{ --measure:620px; max-width:1040px; margin-inline:auto; } .work > .pageEyebrow, .work > .pageTitle, .work > .pageSub, .work > .workSaid{ max-width:var(--measure); margin-inline:auto; } /* ══════════════════════════════════════════════════════════════════════ THE WORK, UP CLOSE · one episode's own page The catalogue shows a work at a glance; this is the room you stand in front of it. The video takes the full gilt frame — the leaf the kit reserves for a single plate at rest, not the whisper a grid of cards wears — with the lamp behind it, and everything said about the work sits under it in one reading column. ══════════════════════════════════════════════════════════════════════ */ .workStage{ position:relative; margin-top:clamp(20px,3.2vh,38px); max-width:1040px; } .workSaid{ margin-top:clamp(20px,3vh,34px); } /* What the work is about — the homepage's .latestDesc, restated, because the proto's rule is bound to the spotlight's own text block. */ .workDesc{ font-family:var(--font-display); font-size:19.5px; line-height:1.58; color:rgba(232,228,221,.66); text-wrap:pretty; } /* Facts, labelled and set as a list — the proto's own .facts, restated: "the same treatment wherever a work is described, on the wall or up close". The label in tracked caps, an em dash, then the value a shade warmer and plainer, on a grid so the dashes line up down the column. */ .facts{ margin-top:clamp(12px,2vh,22px); display:grid; row-gap:6px; } .facts > div{ display:grid; grid-template-columns:max-content max-content 1fr; align-items:baseline; column-gap:.7em; } .facts dt{ font-family:var(--font-serif); font-size:10.5px; text-transform:uppercase; letter-spacing:.2em; color:rgba(139,155,180,.86); } .facts dt::after{ content:"\2014"; margin-left:.7em; color:rgba(139,155,180,.5); letter-spacing:0; } .facts dd{ font-family:var(--font-display); font-size:14.5px; letter-spacing:.01em; color:rgba(232,228,221,.74); } /* The other paintings from the same tale. The first fronts this episode everywhere else on the site, so the strip begins at the second. Each is a button, not a link: it opens the plate over the page rather than going anywhere, and the art inside is the card's own .workArt/.workIn. */ .plateStrip{ display:grid; gap:clamp(12px,1.5vw,20px); grid-template-columns:repeat(auto-fill, minmax(min(100%, 190px), 1fr)); margin-top:clamp(16px,2.4vh,26px); } .plateThumb{ display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:zoom-in; color:inherit; -webkit-tap-highlight-color:transparent; } /* A tall sheet, not a painting: it keeps its own proportions inside the same rabbet, and opens over the page like the plates do. */ .infoPlate{ display:block; width:100%; max-width:720px; margin-top:clamp(16px,2.4vh,26px); margin-inline:auto; padding:0; border:0; background:none; cursor:zoom-in; -webkit-tap-highlight-color:transparent; } .infoPlate .workIn{ aspect-ratio:auto; } .infoPlate .workIn img{ position:static; width:100%; height:auto; } /* A seam between the work and what follows it. */ /* A seam between the work and what follows it. */ .workSection{ margin-top:clamp(40px,6vh,76px); } /* The episode page's trailing sections sit outside .work but belong to it: same width as the stage, same centreline, so the plate strip does not end up wider than the video it belongs to. Its own class rather than .workSection, which the shop also uses. */ .workAligned{ max-width:1040px; margin-inline:auto; } /* ── The phone ─────────────────────────────────────────────────── The same room, walked through in one column. Matches the chrome's own narrow query so the two never disagree about where the phone begins. */ @media (max-width: 860px), (hover: none){ .room{ padding:clamp(22px,3.4vh,34px) var(--edge) clamp(56px,8vh,92px); } .pageTitle{ font-size:31px; } .pageSub{ font-size:19px; } .pageLede, .prose{ font-size:18px; } .prose{ max-width:none; } .prose h2{ font-size:23px; } .prose h3{ font-size:19px; } .plateList{ grid-template-columns:1fr; } .verbRow{ gap:14px; } .quietVerb{ font-size:11px; min-height:44px; } a, button{ -webkit-tap-highlight-color:transparent; } .plateCard:active{ background:rgba(16,21,29,.99); } .quietVerb:active{ color:#fff5e2; } /* The lamp needs a room to fall in — the proto hides it on the phone too. */ .plateGlow{ display:none; } /* Two plates across rather than four slivers. */ .plateStrip{ grid-template-columns:repeat(2, 1fr); } /* The gilt is a hairline at this size; the leaf reads as a bar. */ .workStage .plateFrame{ padding:3px; } }