(inside main), so reach up to the body to hide its sibling header. (main supplies the page-top rhythm, so the badge keeps its breathing room.) */ body:has(.case-study-wide) > header { display: none; } .case-study-wide .badge-link { display: inline-block; margin-bottom: var(--rhythm-block); } /* Reset the site's global `header` rule (flex, sticky, border, padding) — this is a content header, not the nav. Left-aligned in the content measure, like the home hero and every other heading on the site. */ .case-study-wide .cs-header { display: block; position: static; z-index: auto; padding: 0; border-bottom: none; text-align: left; margin-top: var(--rhythm-block); margin-bottom: var(--rhythm-page); } /* Title: the documented page title — a plain

(mono, --fs-xl, from the base rules). No size override. Only the default margin is dropped so the tagline pairs tightly beneath. / .case-study-wide .cs-title { margin: 0; } / Tagline: a quiet one-line subtitle under the title — body size, muted. Kept a step below the .cs-lede standfirst so the two don't read as the same thing. / .case-study-wide .cs-tagline { max-width: var(--measure); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text-muted); margin: var(--rhythm-pair) 0 0; } / Credits: a restrained mono band under a single hairline rule. Labels use the site's .meta treatment (mono, faint); values are body text. / .case-study-wide .cs-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: var(--rhythm-block) 0 0; padding: var(--rhythm-row) 0 0; border-top: var(--border-thin) solid var(--ink-line); text-align: left; } .case-study-wide .cs-meta-item dt { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3em; } .case-study-wide .cs-meta-item dd { margin: 0; font-size: var(--fs-sm); color: var(--text-strong); } / ---- Section headings + rhythm ------------------------------------------- / .case-study-wide h2 { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.01em; max-width: var(--measure); margin: var(--rhythm-page) auto var(--rhythm-block); } / Opening standfirst: the same idiom as the site .lede — muted, the DS "lead" step (--fs-md), relaxed leading — so the case study's intro matches every other page. / .case-study-wide .cs-lede { font-size: var(--fs-md); line-height: var(--lh-base); color: var(--text-muted); max-width: var(--measure); margin: 0 auto var(--rhythm-block); } .case-study-wide .cs-pull { font-size: var(--fs-lg); line-height: 1.35; color: var(--text-strong); max-width: var(--measure); margin: var(--rhythm-page) auto; padding-left: var(--sp-3); border-left: var(--border-thick) solid var(--accent); text-wrap: balance; } / ---- Terminal ASCII mockups ---------------------------------------------- Box-drawing renderings an agent can produce in the terminal so a layout can be iterated on cheaply, before any of it is built. Monospace; scroll sideways on a narrow screen rather than reflow — reflow shreds the box art. / .case-study-wide .cs-ascii { container-type: inline-size; } .case-study-wide .cs-ascii pre { font-family: var(--font-mono); / Scale to fill: a wide desktop mockup spans the frame at the top end and shrinks with it, only scrolling once it can't go smaller (phones). / font-size: clamp(0.6rem, 1.9cqw, 1.3rem); line-height: 1.3; white-space: pre; overflow-x: auto; margin: 0 0 var(--sp-5); padding: var(--sp-4); color: var(--text-muted); background: #0a0a0a; border: var(--border-thin) solid var(--ink-line); -webkit-overflow-scrolling: touch; } .case-study-wide .cs-ascii pre:last-of-type { margin-bottom: 0; } .case-study-wide .cs-ascii figcaption { text-align: left; } / ---- Figures ------------------------------------------------------------- / / Vertical margins only — never touch margin-left (the frame math owns it). / .case-study-wide figure { margin-top: var(--rhythm-page); margin-bottom: var(--rhythm-page); } / Landscape screenshots: fill the frame, but cap height so a wide shot can't run off the screen and force a long scroll. / .case-study-wide .cs-hero-figure > img, .case-study-wide .cs-hero-figure > video, .case-study-wide .cs-wide > img, .case-study-wide .cs-wide > video, .case-study-wide .cs-wide > a > img { display: block; width: 100%; height: auto; margin: 0 auto; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } / Brand emblem: a small square mark, centered — not a frame-wide shot. / .case-study-wide .cs-emblem > img { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; } / Galleries: shots shown at a consistent, readable width. auto-fit via flex so one centers, two pair up, three sit in a row — same cell size throughout, collapsing to a single column when the frame gets narrow. Default cell = a tall portrait phone (300px). The --app variant widens the cell for near-square desktop app windows. / .case-study-wide .cs-gallery { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--sp-5); } .case-study-wide .cs-gallery img, .case-study-wide .cs-gallery video { width: 300px; max-width: 80vw; height: auto; margin: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } .case-study-wide .cs-gallery--app img, .case-study-wide .cs-gallery--app video { width: 520px; } / Single app-window shot: one near-square desktop window, centered in the frame with the caption stacked below (a flex gallery can't stack a caption — it'd sit beside the image). Breaks out of the measure so it reads at a generous size, not the cramped text column. / .case-study-wide .cs-app > img, .case-study-wide .cs-app > video { display: block; width: 720px; max-width: 100%; height: auto; margin: 0 auto; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } / Full-page capture (very tall): a whole landing/marketing page shown in one shot. Show it whole at a generous, framed width — a long scaled image is the honest way to present a full page. Handles both a bare and an (linked to the live page). / .case-study-wide .cs-tall { display: flex; justify-content: center; } .case-study-wide .cs-tall > img, .case-study-wide .cs-tall > a { display: block; width: 640px; max-width: 100%; margin: 0; border: var(--border-thin) solid var(--ink-line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } .case-study-wide .cs-tall > a > img { display: block; width: 100%; height: auto; margin: 0; } / Early-build tag: mono, accent, tracked caps; left-aligned under the shot. / .case-study-wide .cs-oldtag { margin-top: var(--rhythm-pair); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: bold; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); text-align: left; max-width: none; } / Overlay variant: float the tag centered ON the shot rather than below it. Pair with .veil (frosted dark backdrop) at the call site. The parent figure is already position:relative via the frame group, so this anchors to it; the figure's height collapses to the image's, so 50%/50% lands on the image's centre. pointer-events:none lets the click reach the image (lightbox). / .case-study-wide .cs-oldtag--overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0.55em 0.95em; text-align: center; pointer-events: none; z-index: 2; } / Other figcaptions: quiet, centered. / .case-study-wide figcaption { margin-top: var(--rhythm-pair); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-faint); text-align: center; max-width: none; } / Prose caption: a full sentence, not a short label. Keep it readable instead of the tracked-caps mono treatment above. / .case-study-wide figcaption.cs-cap-prose { font-family: inherit; letter-spacing: normal; text-transform: none; color: var(--text-muted); } / ---- Mobile -------------------------------------------------------------- / @media (max-width: 40em) { .case-study-wide .cs-meta { gap: var(--sp-3) var(--sp-4); } / Galleries wrap to a single centered column automatically via flex-wrap. */ }