/* * Tondo — "the morning room" * * One room, one light. Warm linen paper, ink type, an old gold dark enough to * clear 4.5:1 on that paper. Display: Fraunces · Body: Newsreader. * * There used to be two skins here — a near-black gallery for the archive and * this linen page for the daily pick — and moving between them read as two * apps. Every screen now uses the components below. The only surface allowed * to go dark is the full-screen view, where the surround is the mount board. * * Style decisions and the reasons behind them: DESIGN.md. */ /* * The typefaces come from us — story 0009. * * These used to load from fonts.googleapis.com, which put two extra hosts on * the critical path, broke the product's face offline, and sent every reader's * IP to a third party on every cold load. * * The files are Google's own latin / latin-ext / vietnamese woff2 subsets, * byte-for-byte what the CDN was already serving. That is deliberate: this * story changes where the fonts come from and nothing else, and unmodified * bytes make a visual diff impossible by construction. They are variable * fonts and the product uses the axes — `opsz` at 60 and 100 explicitly, * and everywhere else via `font-optical-sizing: auto`, which is why no axis * is pinned and no static weight is substituted. Fraunces' `SOFT` and `WONK` * axes are already dropped in these files; the design uses neither. * * Three subsets, not one. `db/seeds/mia_paintings.json` carries ā č ō ū ž ȟ ŋ ƞ * in real artist names — all latin-ext. Shipping latin alone would drop those * names mid-word into Georgia, on exactly the non-Euro-canon curation the * Better bucket asks for. `unicode-range` means a reader only ever downloads * the subset their page actually needs. * * CJK (佛性成盛秀見 in the same file) is unchanged: neither family ships CJK * glyphs and the CDN never served any, so those titles fall back to a system * face exactly as they do today. * * Licence: SIL OFL 1.1, text committed alongside the files in this directory. */ @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/assets/fraunces-italic-latin-6dbb0fa6.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: "Fraunces"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/assets/fraunces-italic-latinext-74003c24.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/assets/fraunces-italic-vietnamese-6fd0a150.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fraunces-roman-latin-2a0ad122.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: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fraunces-roman-latinext-cce59c20.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fraunces-roman-vietnamese-ff9facdc.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("/assets/newsreader-italic-latin-fd8d4ba4.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: "Newsreader"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("/assets/newsreader-italic-latinext-e778c051.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("/assets/newsreader-italic-vietnamese-68e1f49e.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/newsreader-roman-latin-fe979712.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: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/newsreader-roman-latinext-c601fd27.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/newsreader-roman-vietnamese-d00bc857.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } :root { --bg: #f4efe6; --bg-lift: #ece5d8; --ink: #2a241c; /* 13.4:1 on linen */ --ink-dim: #635a4c; /* 6.0:1 */ --ink-faint: #6f6456; /* 5.1:1 — still AA at small sizes */ --gold: #7d5f18; /* 5.3:1 */ --gold-deep: #5f4711; --warn: #a33f28; --warn-rgb: 163, 63, 40; /* channel triple of --warn, for the destructive chip's alpha steps (story 0034) */ --hairline: rgba(125, 95, 24, 0.3); --frame-edge: rgba(42, 36, 28, 0.18); --mount-bg: #100e0b; /* the one dark surface — see DESIGN.md, accepted exceptions */ --serif-display: "Fraunces", "Iowan Old Style", Georgia, serif; --serif-body: "Newsreader", Georgia, serif; --measure: 42.5rem; /* The touch-target bar, DESIGN.md rule 9. A token because story 0014 gave the rail glyphs a width as well as a height and put the same number into `.plate__img`'s reserve — four sites, and a bar that half-lands is exactly the failure ISSUE-002 shipped once. In `px`, deliberately: a finger does not get bigger when a reader raises their text size. */ --tap: 44px; } * { box-sizing: border-box; } /* `hidden` is a promise; a later `display` rule must not be able to break it. */ [hidden] { display: none !important; } html { background: var(--bg); scrollbar-color: #cdc3b2 var(--bg); } body { margin: 0; min-height: 100dvh; font-family: var(--serif-body); color: var(--ink); background: radial-gradient(120% 55% at 50% 0%, rgba(125, 95, 24, 0.05), transparent 62%), var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Paper tooth over everything, very quiet */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: rgba(125, 95, 24, 0.25); color: var(--ink); } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-deep); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* Small-caps link — the one link style in the product. */ .caps-link { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.2em; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Masthead ---------- * One bar for every screen: what this is on the left, where you are on the * right. Never sticky — nothing is allowed to hover over a painting. */ /* Story 0017 added a third column for the corner, and `label` spanning the * first TWO is the whole trick. Give `you` its own column while `label` stays * in the `1fr` and that column drops 198.19 -> 134.19px at root 20: "Artwork of * the day" wraps to two lines and the bar goes 117.00 -> 137.00px, which is * +20px against a fold the front door clears by 9. The label had width to give * and the brand did not, so the label gives it and ends up wider than before. * * `aside` sits on row 1 only now instead of spanning both. It keeps * `align-self: center`, which centres it against the brand's line box rather * than against a two-row block — the same optical result, one less thing to * restate. */ .masthead { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "brand aside you" "label label you" "compass compass compass"; align-items: baseline; column-gap: 1rem; row-gap: 0.15rem; /* Story 0008. Under `viewport-fit=cover` the page owns the unsafe strips, so the brand would otherwise sit under the notch and, in landscape, under the rounded corner. The horizontal insets are 0 in portrait. */ padding: calc(0.9rem + env(safe-area-inset-top)) calc(clamp(1.15rem, 5vw, 2rem) + env(safe-area-inset-right)) 0.75rem calc(clamp(1.15rem, 5vw, 2rem) + env(safe-area-inset-left)); border-bottom: 1px solid var(--hairline); } .masthead__brand { grid-area: brand; font-family: var(--serif-display); font-size: 1.02rem; font-weight: 560; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); font-variation-settings: "opsz" 60; } .masthead__brand:hover { color: var(--ink); } .masthead__brand::first-letter { color: var(--gold); } .masthead__label { grid-area: label; margin: 0; font-style: italic; font-size: 0.86rem; color: var(--ink-faint); } /* The date on the daily page, the count in the archive. On a fallback day the * date is the pick's own, never today's. */ .masthead__aside { grid-area: aside; align-self: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-dim); white-space: nowrap; } /* The corner (story 0017) — the reader's own room, top right, on every screen. * * It spans the brand and label rows and takes its height from them, which is * the entire reason it is here rather than on the compass row: that band * already measures over a touch target at the accessibility cap, so a 44px box * across it adds nothing to a bar the front door has 9px of fold to spare on. * * Height comes from the 44px registry below, which this class joins. WIDTH does * not: that registry gets width for free from the words inside a caps-link, and * a glyph has none — so `.masthead__you` sits with `.rail__act` in the * wordless-control rule further down, which states `min-width` once for both. * `DESIGN.md` rule 9 is every direction it has. * * `justify-self: end` so the box hugs the right edge — without it the column is * `auto`-sized and the glyph floats in the middle of its own target. */ .masthead__you { grid-area: you; align-self: center; justify-self: end; color: var(--gold); } /* On `/you` itself the mark stays in the bar, the link comes away and the * colour steps back — the same treatment the compass gives the screen you are * standing on, which is why `.masthead__you--here` sits in that rule rather * than restating the token here. One idiom for "you are here", not two. */ /* ---------- Compass ---------- * Where else you can go. Four destinations, always all four, same order on every * screen. The label above says which one you are on; this row says what the * others are, and marks the current one by taking its link away. * * It costs 44px per row, always, because `DESIGN.md` rule 9 applies to every one * of these and `.caps-link` sets size and tracking but never height. That is why * the labels are one word each: measured at 375px, four one-word labels fit on * one row and four two-word labels wrap to two, and the second row comes * straight out of the space above the artwork. The front door clears the * accessibility fold by 9px with this row in place and by 92px without it — * `test/system/dynamic_type_test.rb` is what stops the next thing that wants * space up here. Numbers in `specs/0012-getting-around/plan.md`. * * No separator glyph. The gap at 0.2em tracking already parts the words, and * `·` is spent twice over on `.label__artist-dates` and `Kept · Remove`. * * The gap started at 1.4rem and is now clamped, which is not fussiness — it is * the difference between one row and two. Measured at 375px with Dynamic Type * at its cap: the four labels are 270px wide and the page leaves 329px, so * three 1.4rem gaps (354px total) wrap and three 1rem gaps (330px) still wrap, * by one pixel. A wrapped row costs 44px straight out of the fold budget. * * The clamp is what stops the arms race. A pure `rem` gap grows with the text * at exactly the moment there is least room for it, so the middle term is `vw`: * the space between two words is about how wide the screen is, not how large * the reader set their type. Widen any of the three numbers and * `dynamic_type_test.rb` goes red, which is the rule working. */ .compass { display: flex; flex-wrap: wrap; column-gap: clamp(0.7rem, 3.5vw, 1rem); } .masthead .compass { grid-area: compass; } /* The compass row is 44px of touch target, and a touch target is mostly air. * Below the third-column breakpoint that air is the space under the label and * the space above the plate, so the masthead and the page stop adding their own * on top of it. Measured on the front door at 375x667: this is 22px of the 44 * the row costs, and the front door needs all 22. * * Scoped to narrow widths on purpose. Above 46rem the compass moves into the * middle column and stops being a row at all, so both paddings go back to what * every other screen uses. */ @media (max-width: 45.999rem) { .masthead:has(.compass) { padding-bottom: 0; } /* `:not(.page--empty)` is ISSUE-001, found by /qa 2026-08-17, and it is the * exclusion rather than a louder second rule. Without it this selector — two * classes and a `:has()` — outranks `.page--empty`, so every empty screen * carrying a compass computed 6.4px of top padding instead of the * `clamp(4rem, 18vh, 8rem)` it declares. `/you`, `/collection` with nothing * kept and the 404 all rendered their ornament hard under the hairline. * * Stated here so the value keeps ONE home. Restating the clamp under a * heavier selector would have worked today and gone stale the first time * `.page--empty` changed — which is the shape of the bug being fixed. * * Older than the story that surfaced it: the collapse dates from story 0012 * giving those screens a compass, and only became visible when `/you` shipped * as a page whose entire layout is `.page--empty`. */ .masthead:has(.compass) ~ .page:not(.page--empty) { padding-top: 0.4rem; } } /* The screen you are on. Same type, same tracking, same 44px box as its * neighbours — only the colour steps back and only the is missing. As a bare * it drops out of small caps into body type and reads as a bug. */ .compass__here, .masthead__you--here { color: var(--ink-dim); } /* Wide enough for a third column: the compass rides beside the label instead of * under it, and the masthead costs 75px instead of 104px. * * Every area is named, including `aside`. Naming only brand/label/compass leaves * `.masthead__aside` — which sets `grid-area: aside` unconditionally — placed * implicitly, and implicit placement happening to look right at one width is not * a layout. */ @media (min-width: 46rem) { .masthead:has(.compass) { grid-template-columns: 1fr auto auto auto; grid-template-areas: "brand compass aside you" "label compass aside you"; column-gap: 2rem; } .masthead:has(.compass) .compass { margin-top: 0; align-self: center; } } /* ---------- The rail ---------- * `/feed` only, and the one narrowing of `DESIGN.md` rule 5. * * The gallery is the product's only unbounded screen: 110 works of infinite * scroll, a masthead that is never sticky, and a coda that renders on the last * page. Two flicks in there was nothing on screen to leave by. So on that one * screen the compass is not in the masthead at all — it is this, sitting under * the bar at the top of the page and staying behind when the bar scrolls away. * * Nothing changes shape. There is no cross-browser way for CSS to know an * element has become stuck, and inventing one costs this app its first * scroll-watching JavaScript to hide a wordmark. The masthead simply leaves and * the rail simply does not. * * `z-index: 1` is enough and is deliberately small: `.zoom` is 20 and must cover * this, and `body::after` — the paper tooth over the whole product — is 3 and * should keep passing over it like it passes over everything else. * * The safe-area terms match `.masthead`'s. Under `viewport-fit=cover` the page * owns the unsafe strips (story 0008), so once this is stuck at `top: 0` it is * the thing under the notch. */ .compass--rail { position: sticky; top: 0; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--hairline); padding: calc(0.45rem + env(safe-area-inset-top)) calc(clamp(1.15rem, 5vw, 2rem) + env(safe-area-inset-right)) 0.35rem calc(clamp(1.15rem, 5vw, 2rem) + env(safe-area-inset-left)); } /* ---------- The gallery index door ---------- * Story 0027. `.compass--rail` only — appended after the four destinations * when the caller passes `door:`. `margin-left: auto` on a `flex-wrap: wrap` * row (`.compass` already sets it) is what lets this sit flush right when * there is room and drop to its own line when there is not — the row wraps * itself; nothing here has to detect the accessibility cap by hand. * * `--gold` in both states, never `--ink` — the keep glyph's rule (`.rail__act` * below): fill is the entire state change. The filled quadrant IS "you have * a filter active"; a colour step on top of that would be two idioms for one * fact. */ .compass__door { margin-left: auto; color: var(--gold); } .compass__door:hover { color: var(--gold-deep); } /* ---------- The wing label ---------- * Story 0027. `/feed/index` — the filter's own screen, replacing the three * in-flow facet rows this section used to hold (below `.compass--rail`, * one per lit facet). That row shape rated 3/11 on the owner's own Chesky * scale: 34 controls before the first work, 176 of 318 two-facet * combinations dead. This is the door instead. */ .wings__summary { margin: 0 0 1.6rem; } .wings__actions { display: flex; column-gap: 1.4rem; } /* `.days__month` is the base class in the markup — this only adds the * heading's second job: the "Every X" unset link at the right end, when * that facet is active. Reusing `.days__month` outright (rather than a new * heading style) is deliberate — it is the product's one "a new section * starts here" idiom, and the index invents nothing next to it. */ .wings__head { display: flex; align-items: baseline; justify-content: space-between; column-gap: 1rem; } /* The value a reader has selected — same treatment `.compass__here` gives * the screen you are standing on. */ .wings__here { color: var(--ink-dim); } .wings__row { display: flex; flex-wrap: wrap; column-gap: 1.1rem; margin: 0 0 1.6rem; padding: 0; list-style: none; } .wings__note { margin: 0 0 0.6rem; font-size: 0.82rem; font-style: italic; color: var(--ink-faint); line-height: 1.45; } /* ---------- The plates ---------- * A real work stands for every offered tradition or subject — the index * looks like the gallery it indexes. `auto-fill` runs 3 across at 320px, * 4 at 375-430, and wider at the desktop measure, off one rule. * * The edge hugs the picture, not a square of linen (design review outside * voice #10): `.plates__img` is a fixed-height, free-width row — the same * idiom `.days__thumb` already uses — so a landscape plate and a hanging * scroll both keep their own shape and the frame border sits on the image * itself, never on an empty margin around it. */ .plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); column-gap: 10px; row-gap: 14px; margin: 0 0 1.6rem; padding: 0; list-style: none; } .plates__cell { display: flex; flex-direction: column; align-items: center; text-align: center; color: inherit; row-gap: 0.3rem; } .plates__name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); } .plates__cell--here .plates__name { color: var(--ink-dim); } .plates__count { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-faint); } /* ---------- Page column ---------- */ .page { max-width: var(--measure); margin: 0 auto; /* The bottom inset clears the home indicator. `.coda` is a footer inside this element on every screen that has one, so it inherits the clearance rather than adding its own — padding on both would double-count it. */ padding: clamp(1rem, 3.5vw, 1.9rem) calc(clamp(1.15rem, 5vw, 1.5rem) + env(safe-area-inset-right)) calc(3.5rem + env(safe-area-inset-bottom)) calc(clamp(1.15rem, 5vw, 1.5rem) + env(safe-area-inset-left)); } .page--empty { padding-top: clamp(4rem, 18vh, 8rem); text-align: center; } /* One item in the archive. The rule under the label is the only separator. */ .post { margin: 0 0 clamp(4.5rem, 10vw, 7rem); } .post .label::after { content: ""; display: block; margin: clamp(2.2rem, 5vw, 3.2rem) auto 0; width: min(11rem, 40%); height: 1px; background: linear-gradient(90deg, transparent, var(--hairline) 25%, var(--hairline) 75%, transparent); } /* Scroll-in reveal (classes applied only when JS + motion allowed) */ .post.reveal-init { opacity: 0; transform: translateY(26px); } .post.reveal-init.in { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- The artwork ---------- */ .plate { margin: 0 0 clamp(1.2rem, 4.5vw, 1.75rem); } .plate__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } /* * Never cropped. `contain` plus a viewport-relative cap means a tall scroll * and a wide panorama both arrive whole, letterboxed against the paper — and * the cap leaves the opening of the note above the fold on a small phone. */ .plate__img, .days__thumb img, .plates__img { display: block; margin-inline: auto; max-width: 100%; max-height: min(55vh, 55dvh); width: auto; height: auto; object-fit: contain; background: var(--bg-lift); border: 1px solid var(--frame-edge); } /* Fixed height, free width — `.days__thumb`'s own idiom below, here on the * shared `.plate__img` selector (`/simplify`: `.plates__img` used to restate * `object-fit`/`background`/`border` instead of joining that rule above). * Placed AFTER the shared rule on purpose, same as `.days__thumb img`'s own * override two rules down — two selectors of equal specificity, so cascade * ORDER decides, and the shared rule's `max-height: min(55vh, 55dvh)` must * lose here: a plate grid cell has no viewport-relative fold to answer to. */ .plates__img { height: 80px; max-height: none; width: auto; } /* The resting idiom — a value whose face has no stored picture stays a real, * tappable wing; it just has no likeness to show for it yet. AFTER * `.plates__img` above, for the identical reason: this element carries * BOTH classes (`_plates.html.erb`), so `.plates__img--none` and * `.plates__img` are equal-specificity selectors on the same node, and * whichever is later in the file wins the `width` property. Caught by hand * (own re-check after the `/code-review` fix above) — a synthetic element * with both classes measured 1920px wide, the shared rule's `width: auto` * silently winning over this one, before this rule moved down here. */ .plates__img--none { width: 60px; } /* * The third term, added by story 0012: the cap also yields to the text. * * 55vh was always in service of the sentence above it — "the cap leaves the * opening of the note above the fold." A flat 55vh only does that while * everything else above the fold stays the same size, and two things changed: * the compass took 22 net pixels off the top of the page, and Dynamic Type * scales every `rem` between the plate and the note by up to 1.25 (story 0008). * Measured on the front door at 375x667, the two together put the note's first * line 1px below the fold, and the plate was the only thing in the frame with * any give. * * `17rem` is the room the label needs: title, artist, medium, and one line of * the note, at whatever size the reader has chosen. Because it is `rem` and the * other two terms are `vh`, this only ever wins when the text is scaled up — * at the default root size `100dvh - 19rem` is 363px against a 367px 55vh, so * `min()` picks within 4px of 55vh and the artwork is the size it has always * been. It gives back real height only as the text grows, which is the trade * rule 2 does allow: a smaller picture, never a cropped one. * * 19rem and not 17: the number is set by the worst page this product publishes, * not the friendliest. `db/seeds/mia_paintings.json` holds 18 titles over 60 * characters and one of 104, and a title that long over a two-line artist row * is what `dynamic_type_test.rb` measures. 17rem passed the short fixture and * missed that one by 10px. * * Only `.plate__img`. The archive's thumbnails are 112px in a fixed box and * have no relationship to the fold. */ /* * Story 0014's action rail sits between the plate and the label, so on the * screens that render one the room above the note grows and this term has to * grow with it. That is the ONLY thing that varies, so it is the only thing the * rule below overrides — the three invariant terms and the reasoning above them * stay written once. * * `19rem + one touch target`, and the split is the whole point: the plan said * `22rem` and `dynamic_type_test.rb` rejected it. The `19rem` is the label's * TEXT budget and belongs in `rem` because it scales with the reader's text * size. The rail does not — its height is the touch-target bar rule 9 fixes in * pixels, identical at every Dynamic Type setting. Charging a fixed cost in * `rem` billed the picture 60px it never spent, and at the accessibility cap the * plate gave up 28% of its height against the 25% this file bounds it to. The * rail's own margins stay in `rem` and still scale, which is right — those are * spacing around text. * * Scoped to the `.plate` itself, not to the `.page`. Story 0020 widened this * from one screen to three: `/`, `/days/:date`, and now `/feed` and * `/artists/:slug`, whose posts each carry their own rail. A page-level * selector would have charged EVERY plate on a page the moment ONE of them * had a rail — wrong on `/feed`, where the reserve has to follow each post's * own rail rather than blanket the whole scroll. `.plate:has(+ .rail)` reads * per-plate instead: the sibling combinator inside `:has()` is the same idiom * `.masthead:has(.compass)` already uses, scoped one level narrower. * * It only ever bites where this term is smaller than 55vh. At 402x874 that is * 526px against 481px, so `min()` still picks 55vh and the rail costs the * artwork nothing there at all. At 375x667 it is 319px against 367px, and the * plate loses 44px of its 363. Accepted 2026-08-14 for `/` and `/days/:date`, * and again 2026-08-19 (`/plan-design-review`) for `/feed` and * `/artists/:slug`: rule 2 allows a smaller picture, never a cropped one, and * only works tall enough to be height-capped move at all. */ .plate__img { --rail-reserve: 0px; --pin-reserve: 0px; max-height: min(55vh, 55dvh, calc(100dvh - 19rem - var(--rail-reserve) - var(--pin-reserve))); } /* The front door's pin row (story 0033) is one more fixed touch target * between the label's meta line and the first written line — same shape as * the rail's own reserve, and for the same reason: `--tap` is pixels, not * text, and a `rem` budget must not bill the picture for something that * does not scale with Dynamic Type. * * 15px, not the full 44px `--tap` the row actually measures. A full tap's * worth doubled the rail's own reserve and `dynamic_type_test.rb`'s OWN * calibrated bound caught it: at the accessibility cap the plate gave up * more than the quarter of its height that test polices (28% measured * against a 25% ceiling). 15px is the largest reserve that still clears * that ceiling — solved from the same inequality the test enforces, not * guessed — and it closes the fold-budget gap the pin row's own margins * cannot close alone (`.label__meta:has(+ .conv)` below carries the rest). * `.page--thread` is a server-rendered class (`daily/_day`), not * `.cmt__pin[open]` — the reserve must not depend on the pin's own * open/closed state, or opening the note would resize the artwork under * the reader mid-read. */ .page--thread .plate__img { --pin-reserve: 15px; } .plate:has(+ .rail) .plate__img { --rail-reserve: var(--tap); } /* The rail is the plate's own footer, not a separate block, so it takes over the * gap rather than adding to it. Scoped the same way: a plate with no rail after * it keeps the margin it has always had. */ .plate:has(+ .rail) { margin-bottom: 0.5rem; } .plate__resting { margin: 0; padding: 2.5rem 1.5rem; border: 1px solid var(--frame-edge); background: var(--bg-lift); text-align: center; font-style: italic; color: var(--ink-dim); } /* ---------- Wall label ---------- * Same label under every picture. Prose is ink; everything that is metadata * about the prose — dates, medium, credit — steps back to dim. */ .label__title { margin: 0 0 0.4rem; font-family: var(--serif-display); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 480; line-height: 1.16; font-variation-settings: "opsz" 100; text-wrap: balance; } /* Long museum titles step down rather than get cut — never truncate a title. */ .label__title--long { font-size: clamp(1.2rem, 3.8vw, 1.45rem); } /* Artist plus life dates wraps to two lines on plenty of works, and at the * default line-height those lines collide with each other and with the meta. */ .label__artist { margin: 0 0 0.55rem; font-size: 1.02rem; line-height: 1.4; } .label__artist-name { color: var(--gold); letter-spacing: 0.02em; } /* Story 0018. The one place a wall label wraps a control. Padding on an * INLINE element (not `inline-block`) extends the tap target without adding * to the line box, so `.label__artist`'s wrap behaviour and the fold-budget * tests that measure it are unaffected — the `inline-block` + negative-margin * draft was rejected for exactly that risk (eng review D10, outside voice * X10). * * The base is NOT `.label__artist`'s line-height (1.02rem × 1.4 = 22.85px). * Measured directly (`getBoundingClientRect`, not read off the cascade): an * inline non-replaced element's own box for hit-testing tracks the font's * content-area metrics, not the paragraph's line-height — line-height on the * element itself changes nothing about it. At a 1.02rem font-size that base * measures ~16px, close to but under 1em, so the formula targets 46px rather * than 44 to clear the bar with margin instead of landing on it by luck: * 45.66px measured at the default root, 45.41-45.59px at the Dynamic Type * range this file's other rules are tested against * (`test/system/dynamic_type_test.rb`). */ a.label__artist-name { padding-block: calc((46px - 1.02rem) / 2); } /* The unlinkable artist — blank, culture fallback, or deny-listed — and every * artist name on `/`, where the artist page is walled but the front door is * not (design review D11, eng review X11). Gold means tappable; this keeps * that literally true everywhere it appears. */ .label__artist-name--dim { color: var(--ink-dim); } .label__artist-dates { color: var(--ink-faint); font-style: italic; } .label__artist-dates::before { content: " · "; font-style: normal; } .label__meta { margin: 0 0 1.25rem; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-dim); } /* Body copy: the hand-written note on the daily page, the museum's own * description in the archive. One type treatment for both. */ .label__note p, .label__text { margin: 0 0 0.9rem; font-size: 1.06rem; font-weight: 400; line-height: 1.66; color: var(--ink); } .label__note p:last-child { margin-bottom: 0; } /* Only the archive clamps: museum catalogue copy runs to paragraphs and the * point of the archive is the pictures. The daily note is never clamped. */ .label__text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .label__body.expanded .label__text { display: block; -webkit-line-clamp: none; overflow: visible; } .label__more { margin-top: 0.4rem; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--serif-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); } .label__more:hover { color: var(--gold-deep); } .label__credit { margin: 1.3rem 0 0; font-size: 0.82rem; font-style: italic; color: var(--ink-faint); } /* ---------- Artist page ---------- * The name, the works, the ending — nothing else earns the page (story 0018). * The heading reuses `.label__title` / `.label__title--long` verbatim: it is * the same display type doing the same job, one level up the page. */ .artist-page__heading { margin-bottom: 1.8rem; } /* Not `.label__artist-dates` — that class's `::before` prints a leading " · " * meant to follow a name inline, and standing alone that reads as a stray * bullet before the dates. */ .artist-page__dates { margin: 0.2rem 0 0; font-style: italic; color: var(--ink-faint); } /* ---------- Closing beat ---------- * Ends the daily ritual, ends the archive, and carries the empty state. */ .coda { margin-top: clamp(2.5rem, 8vw, 3.5rem); text-align: center; } .ornament { color: var(--gold); font-size: 0.9rem; letter-spacing: 0.5em; margin-bottom: 1.6rem; } .ornament::before, .ornament::after { content: "———"; color: var(--hairline); font-size: 0.7rem; vertical-align: 0.15em; margin: 0 0.9rem; } .coda__line { margin: 0 0 1.4rem; font-family: var(--serif-display); font-style: italic; font-size: 1.15rem; color: var(--ink-dim); } .coda__note { max-width: 34rem; margin: 0 auto 2rem; font-size: 0.95rem; line-height: 1.7; color: var(--ink-faint); } /* DESIGN.md rule 9 for everything built on `.caps-link`. That class sets size * and tracking, never height, so each tappable thing built on it states the 44px * bar here — assuming `.caps-link` carried it is how ISSUE-002 shipped 15px * targets. * * Listed explicitly rather than nested under `.coda`: the walk happens to render * inside a coda today, and a target size should not depend on where a partial * gets called from. * * NOT the only place in the file. `.zoom__close` is the one tappable control * that is not a caps-link — a fixed-position button on the dark overlay with its * own border, background and `min-width` — so it states its own bar next to the * rest of its chrome. Two homes, on purpose; adding a third for a caps-link is * the mistake. * * `.rail__act` joins this list rather than restating 44 a third time. The * rail's buttons are not caps-links — they are bare glyphs — but the HEIGHT * is the same fact for every control in the product, and one registry is * what stops a future change to the bar from half-landing. What it needs * that nothing else here does is a WIDTH, because this rule has always got * width for free from the words inside a caps-link and a glyph has none. * That part, being genuinely new, is stated on its own below — and it reads * `--tap` too, so the bar is one number rather than one number and three * copies of it. */ .coda .caps-link, .compass .caps-link, .wings .caps-link, .legal .caps-link, .masthead__you, .compass__door, .walk__step, .walk__today, .rail__act { display: inline-flex; align-items: center; min-height: var(--tap); } /* `.legal .caps-link` joined that list in story 0017, and it should have been * there since 0016. Privacy and Support are the one nav App Review guideline * 5.1.1(i) requires to exist, and they were shipping at the ~15px a caps-link * gets from its type alone — ISSUE-002's exact failure mode, on the two links * least able to afford it. Found by the design review, not by a person tapping * them, which is the argument for keeping the list in one place. */ /* A bare