/* ===================================================================================== SITE — experiment 02 Left menu only, so far. base.css must be linked before this. ===================================================================================== */ :root { /* INK, NOT BLACK, and PAPER, NOT WHITE. Pure #000 on pure #fff is the one pairing that cannot be made warm — every tint layered on top reads as a stain rather than as a material. #111c is #111111 at 80%, so body copy sits back off the page instead of stamping onto it, and every opacity already in this file compounds against a colour that was already soft. These two are load-bearing for the case study's mats: the paper is only "cream" against a near-white page, and against #fff it reads as dirty. Changing one without the other undoes the reason for either. Blast radius is the whole site — menu, work row, every card. */ --black: #111c; --page: #fefdfb; /* THE site shadow. Two drop shadows, Eoin's spec, used by every page AND the folder. DO NOT CHANGE THIS VALUE. */ --page-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15); --placeholder: #D9D9D9; /* ---- The row ---------------------------------------------------------------------- Sixteen objects, not five, so the base size came down from 80vh. At 80 only three are on screen at once, which is a slideshow rather than a row you can scan. (--row-peak, how much the centred object grew, went with the centre scale on 2026-09-15.) */ --about-folder-h: 72vh; /* the folder's size on the about page, where there is one of it */ --card-stock: #F6F3EC; /* warm off-white — index-card stock reads as a different paper */ /* ---- The case-study card ---------------------------------------------------------- Geist is scoped to that card only; see .work-page:is([data-kind="case"], [data-kind="site"]). */ /* Every card in the row is this tall. Capped at 540px, the height 60vh gives on a 1440x900 laptop: at 1920x1080 the cards ran 645px and read too large (Eoin, 2026-09-15). Laptops and smaller windows are unchanged. */ /* dvh, not vh (Eoin, 2026-09-15): on a phone the window's height is what is left once the browser's own toolbar is taken off. On a desktop the two are the same number. */ --card-h: min(60dvh, 540px); /* THE CARD'S WORDS, as one set (Eoin, 2026-09-15: titles up from 18px). The overline, the gap above the title, the cover's figures and the website arrow all scale with the title — 22/18 — so the labels still share the overline's line and the figures and the arrow the title's. FLUID since the mobile version: 18 on a phone, 22 from 1280 — see THE FLUID SCALE. */ --wp-title-size: clamp(18px, calc(18px + 4 * var(--ramp)), 22px); --wp-title-gap: 10px; --wp-kick-size: 10px; /* A FALLBACK ONLY — site.js measures the real text block and overwrites this. Two things depend on it: each card's width (frame height x ratio, where frame height is card height minus this) and the row's optical offset. A guessed 88px against a real 105px squeezed every frame and drifted its ratio. */ --text-h: 105px; --font-geist: "Geist", system-ui, sans-serif; --font-geist-mono: "Geist Mono", ui-monospace, monospace; /* PAPER, NOT PANEL. #F1F1F1 was a neutral grey: behind a screenshot it read as a UI surface, the same material as the thing it framed, which is the opposite of the made-by-hand feel. Red and green stay high and blue drops, so it reads as cream against the near-white page. Tuned as a pair with --frame-grain — see .cs-frame::before. */ --frame: #fefcf6; /* Jakub's shadow-as-border (make-interfaces-feel-better/surfaces.md): a 1px ring, a lift, then ambient depth. Transparent, so it adapts to any background a border could not. */ --shadow-border: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04); --shadow-border-hover: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.06); /* Pure black at 10%. The skill is explicit this is not negotiable — a near-black from a palette picks up the surrounding surface colour and reads as dirt on the image edge. */ --img-line: rgba(0, 0, 0, 0.1); } :root { --folder-face: #F1F1F1; /* front panel */ --folder-back-c:#EFEFEF; /* back panel, a shade down */ --sheet-white: #FFFFFF; /* The same pair as the A4 sheets, so folder and pages sit on the page identically. Contact term over penumbra — one Gaussian has one width, so it can render a crisp contact edge or a soft body but never both. */ --cast: var(--page-shadow); /* The die-cut silhouette as a MASK rather than a clip-path. Chrome antialiases border-radius but rasterises clip-path: url() as a hard 1-bit mask, so every curve on the panel came out stair-stepped while the back panel's identical corner — done with border-radius — stayed smooth. A CSS mask is an ALPHA mask: partial coverage at the edge is preserved, so the curve antialiases. preserveAspectRatio='none' plus mask-size 100% 100% stretches the viewBox to the element, and the viewBox carries the folder's own ratio, so nothing distorts. */ --folder-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1378' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,8.13 C0,3.64 3.67,0 8.2,0 L975.5,0 C989.03,0 1000,10.91 1000,24.39 L1000,357 C1000,362.9 997.9,367.9 993.7,372 L902.55,461.5 C901.25,462.8 900.6,464.3 900.6,466.2 L900.6,1353.6 C900.6,1364.5 889.63,1378 876.1,1378 L8.2,1378 C4.53,1378 0,1374.4 0,1369.9 Z'/%3E%3C/svg%3E"); /* The same silhouette INVERTED — everything the front panel does not cover, which on this shape is the die-cut notch and nothing else. A full-box subpath in front of the panel's own path, with fill-rule evenodd: a point inside both crosses two subpaths and is left empty, a point inside only the box crosses one and is filled. So the two masks are exact complements of each other, built from ONE path that cannot drift out of step with itself. Used by .sheet-inner — see the diffusion rules further down. */ --folder-mask-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1378' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0,0 L1000,0 L1000,1378 L0,1378 Z M0,8.13 C0,3.64 3.67,0 8.2,0 L975.5,0 C989.03,0 1000,10.91 1000,24.39 L1000,357 C1000,362.9 997.9,367.9 993.7,372 L902.55,461.5 C901.25,462.8 900.6,464.3 900.6,466.2 L900.6,1353.6 C900.6,1364.5 889.63,1378 876.1,1378 L8.2,1378 C4.53,1378 0,1374.4 0,1369.9 Z'/%3E%3C/svg%3E"); --ink-red: #992147; /* ---- Tracing paper ------------------------------------------------------------------- The front panel as a translucent sheet rather than a solid one. These are the values Eoin arrived at on the dial panel, and they are the SITE's defaults — the shipped file:// page never loads the panel, so if these did not match it would render the old opaque cover and only look right on localhost. dev/cover-dials.js starts from the same numbers. */ --cover-color: #ffffff; --cover-opacity: 0.4; --cover-texture: 0.69; /* grain, as an opacity */ --cover-grain: 1.35; /* the grain's frequency — higher is finer */ /* The cut edge. Near-black at 7% reads as a crease rather than as a drawn outline. */ --edge-color: #000000; --edge-width: 2.75; --edge-opacity: 0.07; /* What is left of the page behind the reader. Lower is fainter — this is how visible the background IS, not how faded. Dropped from 0.35 on 2026-08-07: with the blur parked, the dim is doing that job alone, and at 0.35 the row's text was still legible enough to read as content rather than as context. */ --behind-opacity: 0.2; --behind-blur: 5px; /* The recede's timing. ONE duration each way, because the dim and the blur move TOGETHER, from the moment the page lifts — see .reader-open below, and the cost of doing it there. Two earlier arrangements failed on the eye rather than on the numbers. Dim riding the flight over 1600ms while the blur waited for the landing: a 0.65 opacity change spread over 1.6s is below the rate at which the eye reads something as moving, so it registered as a vague drift and the blur then arrived alone as a puff. Both together but held until the landing: cheap and smooth, but the background sits untouched for the 2.6s that the page is actually travelling, which is the moment it is supposed to be getting out of the way. --behind-out USED to be a beat closeIt() held the sheet still for, and it read this token to know how long. It no longer does either: with the blur parked there is nothing on .menu/.panel that cannot afford to move, so the background now comes back WHILE the page scales down and repositions rather than finishing first. This is therefore just a CSS duration now, and it wants to be roughly the length of the flight home rather than the short "let go" beat it was — at 200ms the background was fully back before the page had got anywhere, which is the same two-events-instead-of-one problem the way out had. */ --behind-in: 420ms; --behind-blur-in: 500ms; --behind-out: 500ms; /* The background steps BACK as well as dimming. This is what carries the recede during the flight, and it is why the recede is smooth again: transform and opacity are the only two properties that never rasterise, so they cost nothing while the sheet is moving. A dim on its own was not perceptible enough to read as movement — scale is. */ --behind-scale: 0.96; /* The cast shadow stays ON. Unset means the rule's own default draws — see .folder-cover-cast. The stroked cut edge gives it a solid silhouette to work from, so it no longer fades with the translucent fill. */ --cover-grain: 0.8; /* the grain's frequency — higher is finer */ /* --cover-cast-filter is written by the dial: unset for the shadow, `none` for no shadow. See .folder-cover-cast. */ } body { background: var(--page); color: var(--black); } /* ---- THE FLUID SCALE (mobile version, 2026-09-15) ---------------------------------------------- Type and spacing slide smoothly from a phone to full size. ONE RAMP drives every token: it is 0px at a 375px window and 1px at 1280px, so each token reads "its phone value, plus the difference times the ramp", clamped between the two. At 1280 and wider every token is exactly the desktop value it replaced, so nothing on a laptop or a monitor moves — harness desktop-geom diffs that, number by number. Below 375 the phone values hold. THE DIFFERENCE IS WRITTEN AS A BARE NUMBER, and that is not style. (88px - 20px) * var(--ramp) is a length times a length, which is invalid — and arriving through var(), it is invalid only at computed time, so the property silently becomes nothing rather than showing up as an error. REGISTERED AS LENGTHS, so each computes once, to pixels, at the root and inherits as that number — which is also what lets site.js and the harness read a value back instead of the clamp() text. And an invalid value falls back to the initial-value, which is the desktop size, not to nothing. The phone values are a first pass, tuned at 375 with Eoin looking. The two floors are his: reading text never under 14px, labels never under 10px. The tokens that already existed are made fluid where they are declared — --cs-pad, --mat-pad, --bar-gap, --down-line, --wp-title-size — so their comments stay beside them. */ @property --ramp { syntax: ''; inherits: true; initial-value: 1px; } @property --body-size { syntax: ''; inherits: true; initial-value: 16px; } @property --label-size { syntax: ''; inherits: true; initial-value: 12px; } @property --lede-size { syntax: ''; inherits: true; initial-value: 32px; } @property --title-size { syntax: ''; inherits: true; initial-value: 45px; } @property --h-size { syntax: ''; inherits: true; initial-value: 22px; } @property --cs-pad { syntax: ''; inherits: true; initial-value: 88px; } @property --down-line { syntax: ''; inherits: true; initial-value: 28px; } :root { --ramp: calc((100vw - 375px) / 905); --body-size: clamp(14px, calc(14px + 2 * var(--ramp)), 16px); /* the article's and about page's text */ --label-size: clamp(10px, calc(10px + 2 * var(--ramp)), 12px); /* the 12px mono caps; 10 and under stay */ --lede-size: clamp(22px, calc(22px + 10 * var(--ramp)), 32px); /* lead-ins, about statements, the stats' figures */ --title-size: clamp(30px, calc(30px + 15 * var(--ramp)), 45px); /* a case study's title */ --h-size: clamp(18px, calc(18px + 4 * var(--ramp)), 22px); /* a finding's heading */ --stat-d-size: clamp(12px, calc(12px + 1 * var(--ramp)), 13px); /* a stat's one-line description */ /* The card's and the carousel's paper above and below the strip — .wp-blk and .cs-fig--lead. */ --lead-pad: clamp(12px, calc(12px + 12 * var(--ramp)), 24px); /* THE NARROW CHROME, which only exists under 64rem: the top bar holding the name and the menu button, and the case study's strip holding its current section and the close button. */ --bar-h: 56px; --strip-h: 60px; /* 48 until Eoin's phone: the close disc sat 7px off the strip's line */ } /* ---- FOCUS --------------------------------------------------------------------------------- The only blue on this site was Chrome's default focus ring, rgb(0,95,204), because nothing here had ever styled focus. It was also the hardest colour to find: it paints on demand rather than at rest, so every pixel sweep of the page missed it, and a focused card BEHIND the open reader still draws its ring through the document at --behind-opacity. :focus-visible, not :focus — a mouse click on a card should not leave a ring behind, and that is exactly the case that made the old one look like a bug rather than an affordance. */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; } .shell { display: grid; grid-template-columns: 1fr; min-height: 100dvh; } /* ---- Left menu ------------------------------------------------------------------------- Three bands: name at the top, menu centred in whatever is left, contact at the bottom. grid-template-rows: auto 1fr auto is what makes the middle band take the slack — the menu then centres inside it, so it stays optically central no matter how tall the name or the contact block grows. */ .menu { display: grid; grid-template-rows: auto 1fr auto; padding: 40px 64px; /* FROSTED, NOT TINTED (Eoin, 2026-09-15). It was white at 50% over a 4px blur, and a dark screen in the row — Gallery Mode's — read straight through it as the row scrolled past. Now the page's own colour at 78% over a 20px blur: what passes behind is a soft change of tone, not a picture. The page's colour rather than white, so the menu is not a whiter strip down the page. A bigger radius costs nothing extra here: a backdrop blur's cost is whether it is there at all, not how far it reaches (see the filter rule in CLAUDE.md). */ background: rgba(254, 253, 251, 0.78); /* -webkit- prefix first: Safari still needs it, and without it the menu there would be 78% paper over whatever is behind, with no blur at all. */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* ---- Name ---- */ /* RESERVES THE WIDEST PHRASE. The menu is auto-width and site.js publishes that width as --menu-w for the row's left padding to clear — so a name that grew from "cat dad" to "product designer" would widen the menu and shove the entire row sideways every ten seconds. `ch` is exact here because Departure Mono is monospaced: 16ch is sixteen characters, the length of the longest phrase. Same problem the menu-nav ghost already solves for the nav. */ .menu-name-text { display: inline-block; min-width: 16ch; } /* THE NARROW SCREEN'S WRAPPERS HAVE NO BOX HERE (2026-09-15). .menu-bar holds the name and the menu button, .menu-body the nav and the contact links; on a wide screen both are display: contents, so the name, the nav and the contact block are still this grid's three rows, and the button is not drawn. The narrow menu is further down — see THE MENU ON A NARROW SCREEN. */ .menu-bar, .menu-body { display: contents; } .menu-toggle { display: none; } .menu-name { font-family: var(--font-label); font-weight: var(--weight-label); font-size: 14px; line-height: 1.2; color: var(--black); text-decoration: none; } /* ---- Nav ---- */ .menu-nav { display: grid; gap: 16px; align-content: center; justify-items: start; } /* THE CURRENT ITEM GROWS BY SCALE, NOT BY FONT SIZE. Every item is laid out at 20px and the current one is scaled 1.4x (= 28px) about its left edge. Animating font-size would do the same job with a reflow per frame and letters that shimmy as they step through pixel sizes; a scale is one composited property and moves as a single piece. A scale does not push neighbours apart the way a bigger font did, so the current item also takes margin above and below — (grow - 1) x half its line-height — which lands every item exactly where the 28px version put it. Measured against the old menu: same tops, same gaps. */ .menu-nav { --nav-grow: 1.4; } .menu-nav a { position: relative; /* for the bold copy */ font-family: var(--font-display); font-weight: 300; /* Averia Light */ font-size: 20px; line-height: 1.1; color: var(--black); text-decoration: none; transform-origin: left center; } /* Each item reserves the width of its BOLD form, whether or not it is current. The bold copy below is wider than the light word, and without this the link's box would be the light word's width, leaving the end of the bold one outside it. 20px rather than the 28px it used to be: the size now comes from the scale, which never changes layout, so the menu cannot widen on selection either way. The ghost is zero-height and hidden, so it contributes width and nothing else. */ .menu-nav a::before { content: attr(data-nav); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; /* The link's own size, inherited rather than restated (2026-09-15): the narrow menu sets its links larger, and a ghost still at 20px would reserve a bold word half the width of the real one. */ font-size: inherit; } /* THE BOLD COPY, for the crossfade. Averia ships static weights — 300, 400, 700 — so light cannot become bold by degrees; asked to, the browser jumps between faces halfway. Instead each item carries its bold form on top, invisible until current, and the light word fades out as the bold one fades in over the same scale. `/ ""` gives the generated text an empty accessible name, or a screen reader would announce every item twice. */ .menu-nav a::after { content: attr(data-nav) / ""; position: absolute; top: 0; left: 0; font-weight: 700; /* Averia Bold */ color: var(--black); white-space: nowrap; opacity: 0; pointer-events: none; } /* The current item. aria-current is the source of truth — a screen reader gets the state from the same attribute the stylesheet reads, so the two cannot disagree. */ .menu-nav a[aria-current="page"] { scale: var(--nav-grow); margin-block: calc((var(--nav-grow) - 1) * 0.55em); color: transparent; } .menu-nav a[aria-current="page"]::after { opacity: 1; } /* Only once the first render has painted — site.js sets data-ready two frames in. Without the gate the current item would visibly grow as the page opens, since the stylesheet sizes every item before the router has marked one current. Both items animate at once, because both attribute changes land in the same frame: the new one grows as the old one shrinks. */ .menu-nav[data-ready] a { transition: scale 300ms cubic-bezier(0.23, 1, 0.32, 1), margin-block 300ms cubic-bezier(0.23, 1, 0.32, 1), color 300ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-nav[data-ready] a::after { transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } @media (prefers-reduced-motion: reduce) { .menu-nav[data-ready] a, .menu-nav[data-ready] a::after { transition: none; } } /* ---- Contact ---- */ .menu-contact { display: grid; gap: 16px; justify-items: start; } .menu-contact a, .menu-contact .copy { font-family: var(--font-label); font-weight: var(--weight-label); font-size: 14px; line-height: 1.2; color: var(--black); text-decoration: none; } /* ---- Email copies ------------------------------------------------------------------------------ Three words in one place: Email at rest, Copy under the pointer, and what happened after a click (site.js owns the clipboard write and the reset; these states are pure CSS, driven by .is-copied). THE CHANGING WORDS ARE PINNED ON TOP OF THE RESTING ONE, and that is the whole trick here. A shared grid cell — the way the holding page did it — makes the box as wide as the widest word, and this menu is auto-width: site.js publishes that width as --menu-w for the work row to clear, so a wider word would shove the entire row sideways for as long as it showed. Absolutely positioned, the button stays exactly "Email" wide whatever it happens to be saying. THE OUTGOING WORD CLEARS FIRST. A straight crossfade in one place shows both sets of letterforms through each other halfway: the one leaving goes over 180ms with no delay, the one arriving takes 240ms starting at 150 — they overlap for 30ms, at opacities too low to read. Linear, not the site's ease-out: on pure opacity there is no distance for a curve to shape, and a strong ease-out bunches the whole change against the start, which is what "snappy" was. */ .menu-contact .copy { position: relative; display: block; text-align: left; cursor: pointer; background: none; border: 0; padding: 0; } .copy .swap { display: block; position: relative; } .copy .rest { opacity: 1; transition: opacity 240ms linear 150ms; } .copy .hover, .copy .done { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transition: opacity 180ms linear; } @media (hover: hover) and (pointer: fine) { .copy:hover .rest, .copy:focus-visible .rest { opacity: 0; transition: opacity 180ms linear 0ms; } .copy:hover .hover, .copy:focus-visible .hover { opacity: 1; transition: opacity 240ms linear 150ms; } } /* Below the hover rules AND equal to them in specificity — ordering alone would not hold. */ .copy.is-copied .rest, .copy.is-copied .hover { opacity: 0; transition: opacity 180ms linear 0ms; } .copy.is-copied .done { opacity: 1; transition: opacity 240ms linear 150ms; } @media (prefers-reduced-motion: reduce) { .copy .rest, .copy .hover, .copy .done { transition: opacity 150ms ease; } } /* Announced, not shown: the word swap is the only feedback this has, and it is invisible to a screen reader. site.js writes into it. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Panel ------------------------------------------------------------------------------ A row of A4 pages. */ .panel { display: flex; /* CENTRED. Bottom-alignment was what gave the objects a shared baseline back when they were different heights; now every card is exactly --card-h tall, so they share one whether the row is bottom-aligned or centred, and the only thing the choice decides is where the row sits in the viewport. There is still NO drawn shelf line — a rule under objects that already share an edge states the same thing twice. */ align-items: center; min-height: 100dvh; /* At 80vh tall the five sheets are far wider than any screen, so the row scrolls. */ overflow-x: auto; /* The loop resets scrollLeft by a whole set width at the seam. Chrome's scroll anchoring would try to compensate for that as though content had changed size, and fight it. */ overflow-anchor: none; /* No scrollbar. On an endless row it is also a lie — the thumb would report a position in a strip that has no ends. The row is still scrollable by wheel, trackpad and keyboard. */ scrollbar-width: none; } .panel::-webkit-scrollbar { display: none; } /* The padding lives HERE, not on .panel. A scroll container's trailing inline padding is unreliably honoured once its flex content overflows — putting it on the row itself guarantees the gutter at both ends. */ /* THE GAP HAD TO OUTRUN THE CENTRE-SCALE (removed 2026-09-15; the gap stayed). The gap is layout; the growth below is visual, so a page at 1.12 spills roughly 6% of its own width into the space on each side and the gap is what is left over. At 56px a 477px case study still showed 28px of air, but a 16/9 website 887px wide spilled 53px a side and the gap closed to nothing — which read as the gap having been deleted rather than eaten. And RELATIVE, not a fixed 80px. The pages are sized in vh, so on a large screen they grow and a fixed gap does not — measured at 2560x1440 the tightest visible gap fell to 10px while it was a comfortable 33px at 1600x1000. A gap that separates things sized in vh has to be in vh too. Clamped at both ends so it neither collapses on a laptop nor becomes a corridor. */ /* OPTICALLY CENTRED, not box centred. Centring the card leaves its FRAME sitting high, because the caption hangs beneath it — measured at 263px of air above the frame and 367px below while the card itself was exactly 263/263. Padding the top by the text's height shifts the content down by half of it, which puts the frame on the centre line where the eye expects it. */ .pages { display: flex; align-items: flex-end; gap: 160px; padding-inline: 80px 160px; padding-block-start: var(--text-h); } /* ---- NO CENTRE SCALE (Eoin, 2026-09-15) ------------------------------------------------ The centred card used to grow to 1.22 as it crossed the middle of the row: a scroll-driven animation (view(inline) timeline, animating the standalone `scale` so it composed with Motion's transform), with its origin on the frame's centre line so the frame stayed centred as it grew. Removed on Eoin's call — every card now keeps its own size — and with it the first card's measured spill under the menu (--lead-spill in site.js). Recoverable from 8f2887d. */ /* 64rem, up from 60 (2026-09-15): below it is the narrow screen, where the menu is a bar and a sheet — see THE NARROW SCREEN at the end of this file, which shares the number. */ @media (min-width: 64rem) { /* The menu LIFTS OUT of the layout and floats over the panel, so the row of pages runs full-bleed underneath it and slides behind the frosted glass as it scrolls. Sticky would keep it in the flow and the pages would stop at its edge — leaving nothing behind it to blur. */ .menu { position: fixed; left: 0; top: 0; height: 100dvh; z-index: 2; /* (The frosted edge stays a clean line. Three softenings were tried on 2026-09-15 — the glass's own last 40px faded, then 6px, then a soft strip of glass added past the edge — and Eoin rejected all three.) */ } /* The first page clears the menu; everything after it passes underneath. --menu-w is measured in site.js, because the column is auto-width and a floating element's width is not knowable to the layout beneath it — it has to be handed over explicitly. The first card's leftward growth under the centre-scale was added here too until that scale went (2026-09-15); with no growth there is nothing to pay for. */ .pages { padding-left: calc(var(--menu-w, 340px) + 80px); padding-right: 80px; } } /* ========================================================================================== THE ROW'S CARDS — one layout, three densities Every card is now the same object: framed screens, then an overline, a title, and either the result as figures or a single line. What differs between the kinds is HOW MANY frames and what shape they are — three for a case study, two for a website, one square for an experiment — plus the card's width. Chosen over six other arrangements in prototypes/case-cover.html. GEIST IS SCOPED TO THE ROW. The menu, the reader and every other title on the site still run Averia Serif Libre. Adopting Geist site-wide is a separate and much larger decision. ========================================================================================== */ .work-page { position: relative; flex: 0 0 auto; width: var(--wp-w); /* ONE HEIGHT FOR EVERY CARD. The frames' fixed ratios were what made the heights differ — three stacked 16/9s are simply taller than one square at the same width. So the card sets the height and the frames fill whatever the words leave, rather than the other way round. The cost, stated plainly: a frame is no longer exactly 16/9 or exactly 1:1. Its shape now follows from the card's width and how many frames share the space. Keeping the exact ratios instead would mean deriving each card's WIDTH from a shared height, which puts the experiment at ~460px and makes it the widest card in the row. */ height: var(--card-h); aspect-ratio: auto; background: var(--page); /* No shadow. The card is a container for the frames and the words, not a sheet of paper — the frames carry their own ring. */ box-shadow: none; border: 0; padding: 0; cursor: pointer; text-align: left; /* THE FRAME'S ROW IS EXACTLY --frame-h, the words take what is left (Eoin, 2026-09-15: "I want them lined up"). It was `1fr auto`: the words' row sized to each card's own text, so a one-line website title left its frame's row 28px taller than a two-line case study's — the frames still lined up, having a fixed ratio, but the words hung 28px lower under them. Fixed at --frame-h, every card's words start at the same height, right under the picture. */ display: grid; grid-template-rows: var(--frame-h) minmax(0, 1fr); gap: 0; /* NO overflow: hidden. The frames are full-bleed to the card's edge, so clipping the card cut off their ring and both depth layers on every side — the shadow was computing correctly and simply never being painted. Worth remembering that a right computed value and a visible result are two different checks. */ container-type: inline-size; font-family: var(--font-geist); } /* ONE FRAME PER CARD, AND ITS RATIO SETS THE WIDTH. Every card is the same height, so a wider ratio can only express itself horizontally — which is what gives the row its rhythm now that kind is no longer carried by frame count. --ar is written per card in home.html so the mix can be tuned one item at a time. The same custom property serves both jobs: aspect-ratio takes `16/9` as a ratio, and calc() reads the identical token as a division. */ .work-page { --frame-h: calc(var(--card-h) - var(--text-h)); --wp-w: calc(var(--frame-h) * var(--ar)); } /* ---- Frames ----------------------------------------------------------------------------- Each block is a grey mat holding a screen, and the padding is what makes the mat visible — it shows on the sides the padding is on and nowhere else, so a set of frames chains into one shape rather than reading as separate boxes. min-width: 0 IS LOAD-BEARING. A grid item's default min-width is auto, so it refuses to shrink below its content — and the content is an 1800px screenshot. Without it the columns blow out and the aspect-ratio drags the height with them. The prototype could never show this, because its placeholders had no intrinsic size. */ .wp-comp { display: grid; gap: 16px; min-width: 0; min-height: 0; } /* The hero frame takes more of the height than the pair beneath it — an even split makes the three read as a grid rather than as one image with two supporting it. */ .wp-comp { grid-template-rows: 1fr; } .wp-comp { grid-template-columns: 1fr; } .wp-blk { display: block; background: var(--frame); aspect-ratio: var(--ar); min-width: 0; min-height: 0; box-shadow: var(--shadow-border); transition: box-shadow 150ms ease-out; /* The card's mat, 12 on a phone to 24 from 1280 — the same token as the document's carousel. */ --pt: var(--lead-pad); --pr: var(--lead-pad); --pb: var(--lead-pad); --pl: var(--lead-pad); padding: var(--pt) var(--pr) var(--pb) var(--pl); } .work-page:hover .wp-blk { box-shadow: var(--shadow-border-hover); } /* THE CASE STUDY'S FRAME WIDENS — about 2%, out from its centre, while the screens inside do not change at all: same shape, same size, same spacing, same place. The frame takes `scale: 1.02 1` and the reel's TRACK takes the inverse about the card's centre line, so everything on it lands exactly where it was and the wider frame simply shows a little more of the strip at each edge. Stretching the lot would have been one rule and would have distorted the screenshots, which nothing else on this site ever does. (A lift was tried first and rejected on the eye, 2026-09-13.) THE TRACK, NOT EACH SCREEN. Counter-scaling every screen was tried first and kept their shapes, but it gave every step a `scale` — and a transformed element paints above untransformed siblings. At rest only the popped step is transformed, which is the ONLY reason it paints over its neighbours. With all of them transformed, DOM order took over and the right-hand neighbour painted across the step being shown (25 of 100 sampled frames). A z-index on the popped step cut that to 4 but could not cover the handover, when no step is marked and the outgoing one is still large. One scale on the track leaves the steps' stacking exactly as it is at rest. THE ORIGIN IS 50cqw. The track is left-anchored and wider than the reel, so its own 50% is not the reel's centre, and scaling about it would slide the strip sideways. The card is the nearest container and the reel runs the card's full width, so 50cqw IS the centre line. `scale`, the standalone property: the reel slides the track with `transform`, and separate properties compose where a second `transform` would clobber it. The inverse is interpolated linearly rather than as a true reciprocal — under 0.01% off mid-transition, below a pixel. Hover only where a real pointer hovers, so a tap on a phone does not leave a card widened. Keyboard focus gets the same. Under reduced motion nothing grows; the ring still darkens. */ .work-page:is([data-kind="case"], [data-kind="site"]) { --widen: 1.02; } .work-page:is([data-kind="case"], [data-kind="site"]) .wp-blk { transition: box-shadow 150ms ease-out, scale 200ms ease-out; } .work-page:is([data-kind="case"], [data-kind="site"]) .wp-blk > .wp-img, .work-page:is([data-kind="case"], [data-kind="site"]) .wp-blk .cs-reel-track { transition: scale 200ms ease-out; } .work-page:is([data-kind="case"], [data-kind="site"]) .wp-blk .cs-reel-track { transform-origin: 50cqw 50%; } @media (hover: hover) and (pointer: fine) { .work-page:is([data-kind="case"], [data-kind="site"]):hover .wp-blk { scale: var(--widen) 1; } .work-page:is([data-kind="case"], [data-kind="site"]):hover .wp-blk > .wp-img, .work-page:is([data-kind="case"], [data-kind="site"]):hover .wp-blk .cs-reel-track { scale: calc(1 / var(--widen)) 1; } } .work-page:is([data-kind="case"], [data-kind="site"]):focus-visible .wp-blk { scale: var(--widen) 1; } .work-page:is([data-kind="case"], [data-kind="site"]):focus-visible .wp-blk > .wp-img, .work-page:is([data-kind="case"], [data-kind="site"]):focus-visible .wp-blk .cs-reel-track { scale: calc(1 / var(--widen)) 1; } @media (prefers-reduced-motion: reduce) { .work-page:is([data-kind="case"], [data-kind="site"]):hover .wp-blk, .work-page:is([data-kind="case"], [data-kind="site"]):hover .wp-blk > .wp-img, .work-page:is([data-kind="case"], [data-kind="site"]):hover .wp-blk .cs-reel-track, .work-page:is([data-kind="case"], [data-kind="site"]):focus-visible .wp-blk, .work-page:is([data-kind="case"], [data-kind="site"]):focus-visible .wp-blk > .wp-img, .work-page:is([data-kind="case"], [data-kind="site"]):focus-visible .wp-blk .cs-reel-track { scale: none; } } /* NO PRESS ON THE CARD. A 98% press scale was built and rejected on the eye, 2026-09-13: pressed while hovered, the frame widening outward and the card shrinking inward read as two movements pulling against each other. The widening is the card's only pointer feedback. (The close button keeps its press — it has no competing hover movement of the same kind.) */ /* NO SURFACE OF ITS OWN ANY MORE (Eoin, 2026-09-15). The card carried images/mat-grain.webp — a green-yellow grain — to match the carousel, while the reel was the one figure in the document with its own material. Both went back to the cream that is everywhere else: the card to --frame like every other card in the row, the carousel to the paper every other mat is (see .cs-fig--lead). The class stays, empty, so the markup does not need rewriting; mat-grain.webp stays on disk. */ .wp-blk--mat { } /* THE CASE STUDY CARDS ARE MATTED LIKE THE CASE STUDY'S OWN PICTURES (Eoin, 2026-09-15): the same procedural paper, feathered at its edge, and no ring. The paper is the document's rule, shared by selector (.cs-frame::before) rather than copied, so the card and the page it opens cannot drift apart — this block only supplies what that rule reads from its frame: the grain's strength, the feather's width, the isolation that keeps the multiply inside the mat, and content lifted above the paper. The ring also carried the hover — it darkened — so a case card's only pointer feedback is now the widening. Experiments keep the flat cream and the ring. WEBSITES ARE THIS CARD TOO since 2026-09-15 (Eoin): paper, carousel, overline, title and the same widening — so every case-card rule reads :is([data-kind="case"], [data-kind="site"]). What differs is what a click does: a website is a link to itself, see .work-page[href]::after. */ .work-page:is([data-kind="case"], [data-kind="site"]) .wp-blk { background: none; box-shadow: none; position: relative; isolation: isolate; --frame-grain: 0.62; --mat-feather: 8px; } .work-page:is([data-kind="case"], [data-kind="site"]):hover .wp-blk { box-shadow: none; } .work-page:is([data-kind="case"], [data-kind="site"]) .wp-blk > * { position: relative; z-index: 1; } /* FULL BLEED LEFT AND RIGHT, matching what the reel's figure does inside the document: a step enters and leaves at the block's own edge rather than at an inset, so the strip reads as something passing through the card instead of an animation playing inside a picture. Top and bottom keep their mat — those edges are still a frame, and losing all four would take the halftone with them. */ .wp-blk--bleed { --pl: 0px; --pr: 0px; } /* The reel fills the block with no override here: .cs-reel fills whatever mat it is in, and the document's lead figure now takes this card's 16:9 — see .cs-fig--lead .cs-frame. */ /* With a single frame there is no neighbour to step against, so the mat sits on all four sides and the derived-border rule simply gives the image a line all round. */ /* WHERE THE PADDING IS ZERO THE IMAGE GETS NO LINE ON THAT SIDE — with no padding its edge sits exactly on the frame's edge and the two hairlines stack into one double-weight line, which reads as a mistake precisely where the composition is meant to look deliberate. min(1px, padding) derives it arithmetically, so the rule holds for whatever paddings these blocks are given rather than needing a case written per block per kind. */ /* WHITE FILL, not a screenshot. It is a rather than an now, so object-fit and object-position have nothing to act on and have gone with it — the derived border and the sizing are all that still matter here. */ .wp-img { display: block; width: 100%; height: 100%; background: var(--page); border-style: solid; border-color: var(--img-line); border-width: min(1px, var(--pt)) min(1px, var(--pr)) min(1px, var(--pb)) min(1px, var(--pl)); } /* ---- The words -------------------------------------------------------------------------- No left/right padding: the frames are full-bleed, so the words align to the card's own edge rather than sitting on an inset the composition does not share. */ /* align-self: start, so the strip is its own text's height rather than stretched to the row: measureText reads offsetHeight to set --text-h, and a stretched strip would feed back the row height it was given and never shrink when a title stops wrapping. */ .wp-text { display: block; padding: 24px 0; align-self: start; } .wp-kick, .wp-stat-k { display: block; font-family: var(--font-geist-mono); font-size: var(--wp-kick-size); text-transform: uppercase; letter-spacing: 0.04em; } .wp-title { display: block; margin-top: var(--wp-title-gap); /* Averia, not Geist — the title rejoins the face that carries every other title on the site, so the card stops being typographically foreign to the menu beside it. */ font-family: var(--font-display); font-weight: 300; font-size: var(--wp-title-size); line-height: 1.25; /* The reader's masthead treatment, brought back to the card so the cover and the page it opens are the same object seen twice. Same measure cap as .cs-title. NOT the same tracking value. .cs-title sets -0.07em, and the note there says why: it is a 40px size, where Averia's default spacing is drawn for text and reads loose. At 18px that default is already about right, and -0.07em would collide the letters. The tracking is matched in KIND — tightened, because it is display type — not in number. */ letter-spacing: -0.025em; max-width: 26ch; /* NO BLUR. It was 0.3px of ink bleed and it came out with every other text blur — soft type at 46px reads as a rendering fault, not as print. */ } /* ---- The cover's metrics ----------------------------------------------------------------- Only a card carrying .wp-stats changes shape; every other card keeps its plain stack. Two columns: the words take what is left, the metrics take what they need and end on the picture's right edge. The card is exactly as wide as its picture, so the text block's own right edge IS that line and nothing has to be measured. The metrics span the kick's row and the title's row, and each stat repeats that rhythm — a label set exactly like the kick, then a number with the title's margin and line-height — so the labels share the kick's line and the numbers sit on the title's first line. */ .wp-text:has(.wp-stats) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; } .wp-text:has(.wp-stats) .wp-kick, .wp-text:has(.wp-stats) .wp-title { grid-column: 1; } /* Wider than the 26ch cap, which left half the card empty and the title on three lines — but not the whole column either: uncapped, the title ran most of the card's width on one line and read as a sentence rather than a title. BALANCED, so the two lines come out nearly equal instead of one long line and a short tail. EVERY CASE STUDY CARD, not only one carrying metrics. It was keyed to .wp-stats, so Gallery Mode — a case study with no numbers — fell back to 26ch and broke onto three lines beside WCF's two (2026-09-14). The reason for the cap is the card's size and the title being a sentence, and neither depends on whether metrics sit next to it. */ .work-page:is([data-kind="case"], [data-kind="site"]) .wp-title { max-width: 44ch; text-wrap: balance; } .wp-stats { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; gap: clamp(24px, calc(24px + 8 * var(--ramp)), 32px); } .wp-stat { display: grid; justify-items: end; } .wp-stat-v { display: flex; align-items: center; gap: 0.14em; margin-top: var(--wp-title-gap); font-family: var(--font-geist); font-weight: 400; font-size: var(--wp-title-size); line-height: 1.25; font-variant-numeric: tabular-nums; } /* A website LEAVES rather than opens, and that has to be readable before the click (Eoin, 2026-09-15). ON THE TITLE'S LINE, RIGHT-ALIGNED. The words become two columns, as a case card's do for its metrics, and the arrow is the second column of the title's row. It was a boxed ↗ chip in the frame's top corner, shown on hover only; moved into the words and redrawn the same day. FAINT AT REST, FULL ON HOVER, so a card says it leaves before it is touched and answers when it is. DRAWN, NOT A GLYPH: the same 16-unit arrow as .cs-ar — 1.6 stroke, butt ends, a mitred head — turned to point up and right, so it is one family with the ↓16% / ↑7% on World Creation Flow's card. A mask, so it takes the text's colour. Keyed to [href]: a website still waiting for its address shows none. The card is an since the same day, so it gives up the link colour and underline it would otherwise take. */ a.work-page { color: inherit; text-decoration: none; } .work-page[href] .wp-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; } .work-page[href] .wp-kick, .work-page[href] .wp-title { grid-column: 1; } .work-page[href] .wp-text::after { content: ""; grid-column: 2; grid-row: 2; align-self: start; /* 0.74em of the title's size, as .cs-ar is of its figure, and centred on the title's first line: the title's margin, then half of what its 1.25 line leaves around the arrow. THE BOX IS CUT AT THE HEAD. In the full 16-unit square the head ends 2.9 units short of the right side, which left the ink 2px inside the words' right edge (measured, row-sites); the viewBox and the width stop at 13.1, so the ink ends on the edge at the same drawn size. */ font-size: var(--wp-title-size); height: 0.74em; width: calc(0.74em * 13.1 / 16); margin-top: calc(var(--wp-title-gap) + (1.25em - 0.74em) / 2); --leave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.1 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M4.2 11.8 12.3 3.7'/%3E%3Cpath d='M6.2 3.7h6.1v6.1'/%3E%3C/svg%3E"); background: currentColor; -webkit-mask: var(--leave) center / contain no-repeat; mask: var(--leave) center / contain no-repeat; opacity: 0.35; transition: opacity 150ms ease-out, rotate 250ms cubic-bezier(0.23, 1, 0.32, 1); /* TURNED ABOUT A POINT CHOSEN SO THE TURN LANDS ON THE LINES. About the ink's own centre (63% 48%) the right-pointing arrow ended 2px past the words' right edge (row-sites) — it is longer lying flat than standing on its diagonal, and its mitred tip reaches further. About this point the flat arrow's tip ends on that edge and stays centred on the title's line: solved for both, in the viewBox's units. */ transform-origin: 55.3% 33.3%; } /* ON HOVER IT TURNS TO POINT RIGHT as it darkens (Eoin, 2026-09-15): up-and-away becomes onward. A real pointer only, like the fill; a touch screen keeps the arrow as it is. */ @media (hover: hover) and (pointer: fine) { .work-page[href]:hover .wp-text::after { opacity: 1; rotate: 45deg; } } .work-page[href]:focus-visible .wp-text::after { opacity: 1; rotate: 45deg; } @media (prefers-reduced-motion: reduce) { .work-page[href] .wp-text::after { transition: none; } } /* The reader lifts this; it is never drawn on the card. */ .wp-doc { display: none; } /* ---- Three size scales, to be compared rather than argued about ------------------------- Set with ?s=1|2|3. 2 is the default. The row's own centre-scale multiplies whichever is on. THE WEBSITE IS CAPPED, and it needs to be for a reason that is not obvious: it is sized by HEIGHT like everything else, but at 16/9 its width is 1.78x that height, so a website was coming out 887px wide against a case study's 477px — nearly twice the area of the thing it is meant to sit below in the hierarchy. The min() against vw is the second half of the cap. vh alone is unbounded in the direction that matters: on a tall screen 48vh is a bigger number, and every pixel of it is multiplied by 1.78 on the way to the width. 22vw holds the derived width under about 40vw whatever the window is doing. */ :root, body[data-scale="2"] { --wp-case: 62vh; --wp-site: min(34vh, 22vw); --wp-exp: 34vh; } body[data-scale="1"] { --wp-case: 70vh; --wp-site: min(30vh, 20vw); --wp-exp: 26vh; } body[data-scale="3"] { --wp-case: 58vh; --wp-site: min(38vh, 24vw); --wp-exp: 42vh; } /* ---- Views ----------------------------------------------------------------------------- Shown and hidden by the hash router. [hidden] alone is not enough for a flex/grid child — the display property in the rules below would win over it. */ .view[hidden] { display: none !important; } /* ---- About ------------------------------------------------------------------------------------ Two tabbed views: statements on the left, a narrow column of tables beside them (Eoin's layout, 2026-09-15). Nothing here is a new style: the tabs are the case study's switch tabs, the labels its 12px caps, the statements its lead-in, the rows its hairline, and every gap a count of the article's 28px line (the --down-* tokens, which are page-wide). A highlight reel of photos sat under Locations for a few hours and was taken out on Eoin's call. The folder that used to sit here is out of the markup; its rules further down are inert. --down-text is declared here, as 66ch of Geist at 16px (a registered , see THE ARTICLE), for the side column where it stacks under the statements. The statements take 66ch of their own face instead — see .ab-say. */ .view-about { display: block; min-height: 100dvh; font-family: var(--font-geist); font-size: var(--body-size); --down-text: 66ch; --ab-side: clamp(260px, 22vw, 340px); /* between every column and every block on the page — see .ab-panel. 44 on a phone, 88 from 1280 (THE FLUID SCALE). */ --ab-gap: clamp(44px, calc(44px + 44 * var(--ramp)), 88px); padding: var(--cs-pad) 24px var(--down-section); } /* The menu floats over the left edge from 64rem up, as it does over the work row — the page clears it by the same measured width. Below that the menu is in the flow and there is nothing to clear. */ /* THE TABS START LEVEL WITH "eoin bolger" (Eoin, 2026-09-15). The menu's own top padding is 40px (.menu); this is ONE LESS because the letters, not the boxes, have to agree. With both boxes at 40, Geist Mono's capitals started 1px below Departure Mono's ascenders at 1x and 0.5px below at 2x (measured by ink in the harness's about-page probe). At 39 they meet at 1x and sit within half a device pixel at 2x. */ @media (min-width: 64rem) { /* THE TABS STAY 12px WHEREVER THE LEFT MENU IS (2026-09-15). Their letters are lined up with the name's, which does not scale, so a tab sliding with THE FLUID SCALE sat 1px low at 1180 (about-page probe). Under 64rem there is no name beside them and they take --label-size. */ .view-about .ab-tabs .ab-tab { font-size: 12px; } /* one class up: the tabs' own rule comes later */ .view-about { padding-top: 39px; padding-left: calc(var(--menu-w, 340px) + 80px); padding-right: var(--cs-pad); } } /* THE TABS are the case study's switch tabs (.cs-flow-tab), at the 12px the article's labels use, with two lines of air before the page begins. No rule under the row: the design drew one and Eoin took it out (2026-09-15) — the active tab's own underline already marks the row. */ .ab-tabs { display: flex; gap: var(--down-para); margin-bottom: var(--ab-gap); } .ab-tabs .ab-tab { font-size: var(--label-size); } /* Statements left, the side column right; the side column hugs the right edge on a wide window, as the design has it, and the statements keep their 66ch however wide the window is. ONE GAP FOR EVERY COLUMN ON THE PAGE: --ab-gap, 88px (Eoin, later on 2026-09-15; it was two lines, 56px, and before that four) — between the tabs and the first statement, between statements, the two sides, between the three disciplines, above them, and between the side column's sections (Eoin, 2026-09-15; the sides and the disciplines' top had been four lines). A pattern of one number rather than two. */ .ab-panel { display: grid; grid-template-columns: minmax(0, 1fr) var(--ab-side); column-gap: var(--ab-gap); align-items: start; } .ab-panel[hidden] { display: none; } /* The statements ARE the article's lead-in: the serif at 32 on a line and a half. 66ch OF THEIR OWN FACE, not the body's (Eoin, 2026-09-15). It was --down-text, 66ch of Geist at 16px — about 695px, which set a 32px serif in a narrow stack well short of the design's line. Written on the element, ch resolves in Averia at 32px; on a window too narrow for that, the column stops it first. */ .ab-say { max-width: 66ch; font-family: var(--font-display); font-weight: 300; font-size: var(--lede-size); line-height: calc(var(--down-line) * 1.5); letter-spacing: -0.02em; } /* Statement to statement is the one exception to --ab-gap: 48px (Eoin, 2026-09-15, from a screenshot of the three) — at 88 the statements read as three separate blocks rather than one run of them. 24 on a phone, halved with the rest. */ .ab-say + .ab-say { margin-top: clamp(24px, calc(24px + 24 * var(--ramp)), 48px); } /* Labels: the article's 12px caps, attached to what follows by half a line. */ .ab .ab-kick { font-size: var(--label-size); font-weight: 400; line-height: 1.5; margin-bottom: var(--down-half); } /* Two lines between the side column's sections, not four (Eoin, 2026-09-15): at four, "How Eoin thinks about design" sat so far under the timeline it read as a separate page. */ .ab-side { display: grid; row-gap: var(--ab-gap); align-content: start; } /* ---- Lab and writing: not built yet ------------------------------------------------------------ One line, "Coming soon.", centred (Eoin, 2026-09-15), in the about page's statement type — the serif at 32 on a line and a half — so an unbuilt page still reads as the same site. Centred in what the menu leaves rather than in the whole window: from 64rem the menu floats over the left edge, and centred on the window the line would sit visibly right of the page's middle. */ .view-soon { display: grid; place-items: center; min-height: 100dvh; box-sizing: border-box; padding: var(--cs-pad) 24px; } @media (min-width: 64rem) { .view-soon { padding-left: var(--menu-w, 340px); padding-right: 0; } } .soon { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--lede-size); line-height: calc(var(--down-line) * 1.5); letter-spacing: -0.02em; } /* THE TABLES: year and entry, a hairline under every row and above the first, and one between the year and its entry, as the design draws. A row is two lines tall unless its entry wraps. */ .ab-table { border-top: 1px solid var(--img-line); } .ab-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: var(--down-pair); border-bottom: 1px solid var(--img-line); } .ab-row dt { display: flex; align-items: center; font-family: var(--font-geist-mono); font-size: var(--label-size); font-variant-numeric: tabular-nums; } .ab-row dd { display: flex; align-items: center; padding: var(--down-half) 0 var(--down-half) var(--down-half); border-left: 1px solid var(--img-line); font-size: 14px; line-height: 1.5; } /* THE LISTS — the three disciplines and the quotes — a hairline under each item. */ .ab-list { list-style: none; } /* A LIST ROW IS A TABLE ROW: 56px tall unless it wraps, text centred in it — the same two-line pitch as every gap between blocks, columns and rows on this page (Eoin, 2026-09-15). It was 14px of padding around the text, which made list rows ~50px beside the tables' 56. The min-height sets the pitch and the half-line padding keeps a wrapped row from crowding its rules: at 7px of padding a four-line quote sat nearly on its hairlines (seen at 1920). One-line rows are still exactly 56. */ .ab-list li { display: flex; align-items: center; min-height: var(--down-pair); padding-block: var(--down-half); border-bottom: 1px solid var(--img-line); font-size: 14px; line-height: 1.5; } .ab-list--quotes { border-top: 1px solid var(--img-line); } /* The disciplines sit under the statements, two lines down, three across the left column. */ .ab-skills { margin-top: var(--ab-gap); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ab-gap); } /* NARROWER WINDOWS: the side column drops under the statements, and the three disciplines fold to as many as fit. */ @media (max-width: 80rem) { .ab-panel { grid-template-columns: minmax(0, 1fr); row-gap: var(--ab-gap); } .ab-side { max-width: var(--down-text); } } @media (max-width: 63.99rem) { .ab-skills { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); row-gap: var(--ab-gap); } } .folder { flex: 0 0 auto; height: var(--about-folder-h); width: auto; aspect-ratio: 648 / 893; position: relative; background: none; border: 0; padding: 0; display: block; cursor: pointer; container-type: inline-size; /*