/* ============================================================ TOKENS ============================================================ */ :root { /* --- colour ------------------------------------------------ */ --bg: #0009FF; /* --bg-secondary is THE media surface: the letterbox behind contained artwork and the fill of an empty placeholder. One 6pp lightness step below --bg in every theme, so a frame reads as a slightly deeper shade of the page rather than as a black hole punched through it. 6pp is the ceiling, and YELLOW sets it: olive gains luminance fast and --fg-dim on it falls under 4.5:1 past that step. */ --bg-secondary: #0008E0; --fg: #FFFFFF; --fg-muted: #C7C7FF; --fg-dim: #B8B8FF; --accent: #FFFFFF; /* translucent white, used for de-emphasised type and hairlines */ --fg-a72: rgba(255,255,255,0.72); --fg-a65: rgba(255,255,255,0.65); --fg-a55: rgba(255,255,255,0.55); --fg-a45: rgba(255,255,255,0.45); /* Hairlines are theme-COLOURED, not translucent white/black: a deeper shade of the page's own hue. Solved per theme for constant visibility (1.95:1 and 1.45:1 against --bg everywhere) rather than a constant lightness step, because the same step reads far weaker on white and black than it does on blue. */ --border: #000475; --border-light: #0006B8; /* EXPLORATION 2026-09-25: the ticker recedes into the page -- a DARKER shade of the page's own hue rather than the foreground colour. Pushed as legible as the idea physically allows, and that ceiling is low on the dark palettes: #0009FF is already so dark that even pure #000000 is only 2.48:1 away from it, and pink's ceiling is 3.06:1. So every palette is matched at ~2.3:1, a hair under blue's wall. Past that blue stops reading as a dark BLUE and just reads black, which loses the point. Yellow and white have 18:1 and 21:1 of headroom going dark and are held back to the same 2.3 on purpose, so the strip feels equally recessed in every theme instead of jumping out on the light ones. */ --ticker-fg: #000240; /* 2.29:1 on #0009FF -- ceiling is 2.48 */ /* black surfaces (code blocks, inverted about-page blocks, masks) */ --black: #000000; /* on a black surface --fg-muted/--fg-dim read violet, so they are re-pointed locally to these two neutrals -- see ABOUT / BLOCKS */ --on-black-muted: #AEBECF; --on-black-dim: #8A9BAE; /* Absolute black, unlike --black, which the black theme lifts to #171717 so its own surfaces separate from the page. Used where the surface must stay true black in every palette (the palette picker's quip bubble). */ --black-abs: #000000; /* Forced light foreground for those same black islands. The alpha pairs mirror --fg-a72/a65/a55/a45 and the two border tokens, which is what .blk re-points them to. */ --on-black-fg: #FFFFFF; --on-black-a72: rgba(255,255,255,0.72); --on-black-a65: rgba(255,255,255,0.65); --on-black-a55: rgba(255,255,255,0.55); --on-black-a45: rgba(255,255,255,0.45); --on-black-border: rgba(255,255,255,0.28); --on-black-border-light: rgba(255,255,255,0.16); /* --- type -------------------------------------------------- */ --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --fs-micro: 9px; /* captions, corner marks */ --fs-label: 11px; /* eyebrow labels, meta keys */ --fs-data: 12px; /* data strips, ticker band */ --fs-body: 13px; /* base */ --fs-lead: 16px; /* lead paragraphs, buttons */ --fs-h3: 18px; --fs-h2: 22px; --fs-h1: 34px; --fs-display: clamp(48px, 7vw, 96px); --fs-card-title: clamp(22px, 2.8vw, 38px); /* --- tracking ---------------------------------------------- */ /* Four steps, and tracking widens as size shrinks -- the usual rule, and roughly what the site was already doing by eye before this was tokenised on 2026-09-24. Nearly every label here is uppercase, so the driver is size, not case. Ten ad-hoc values collapsed into these four. */ --ls-display: -0.01em; /* Barlow Condensed at h1 / card-title size: big caps want pulling in, not pushing apart */ --ls-tight: 0.01em; /* the default: display or mono at body-to-h2 size */ --ls-label: 0.08em; /* uppercase labels, 11-13px */ --ls-micro: 0.16em; /* uppercase micro, 9-11px, the widest step */ /* --- space (4px scale) ------------------------------------- */ /* 1px and 2px are deliberately NOT on this scale: they are hairlines (borders, --grid-gap, the 2px cursor bars), not space. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; /* --- motion ------------------------------------------------ */ --dur-snap: 0.08s; /* cursor + glitch fades: must drop out the instant the pointer stops */ --dur-fast: 0.12s; --dur-base: 0.22s; --dur-slow: 0.3s; --dur-hero: 0.6s; --dur-reveal: 500ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- structure --------------------------------------------- */ --grid-gap: 1px; /* THE PAGE GUTTER. One value for every component's horizontal inset, so the nav, cards, about blocks, footer and project copy all start on the same vertical line. Before this there were five different values (16 nav, 21 card, 32 about block, 24 footer, 64 project) each from its own rule. Steps to 16px below 800px; see the :root override under THEMES. Exception by design: the project page's 76px back-rail column, which is a real layout column with the sticky back link in it, not a gutter. */ --gutter: 24px; --nav-h: 84px; /* height of the phone ticker band -- see PHONE TICKER BAND near the end */ --ticker-h: 28px; /* the footer is fixed to the bottom of the viewport, so its height has to be a known number: body reserves exactly this much bottom padding. 56px row + the 1px top rule. */ --footer-h: 57px; } /* ============================================================ THEMES Every colour below the TOKENS block is a var(), so a palette is nothing but a re-point of these names. Blue is :root (the default and the no-JS fallback); the four alternates (yellow, pink, white, black) are set as data-theme on by an inline script in each page , before first paint. Yellow and white are NOT hue swaps: neither #D9FF00 (white type is 1.15:1) nor #FFFFFF can carry white type, so both invert the foreground to black and the translucent whites to translucent blacks. --fg-muted / --fg-dim are tinted toward each background's own hue so they read as de-emphasis rather than as a second colour. ============================================================ */ /* TopLists brand yellow. Dark type, olive-tinted greys. */ [data-theme="yellow"] { --bg: #D9FF00; --bg-secondary: #BFE000; --fg: #000000; --fg-muted: #474700; --fg-dim: #565600; --accent: #000000; --fg-a72: rgba(0,0,0,0.72); --fg-a65: rgba(0,0,0,0.65); --fg-a55: rgba(0,0,0,0.55); --fg-a45: rgba(0,0,0,0.45); /* the tightest surface on the site: --fg-dim is 5.09:1 on #BFE000 */ --border: #9DB900; --border-light: #B6D600; --ticker-fg: #91AB00; /* 2.27:1 */ } /* Deep magenta. Bright electric pink loses white type (3.7:1 on #FF0095), and even #CC0066 dropped --fg-dim to 3.74:1, so this sits two steps darker: white 6.85:1, --fg-dim 4.58:1, which lands on blue's own 4.57 floor. */ [data-theme="pink"] { --bg: #B3005A; --bg-secondary: #94004B; --fg: #FFFFFF; --fg-muted: #FFD9EC; --fg-dim: #FFC2E0; --accent: #FFFFFF; /* pink used to inherit the root hairlines; now that those are blue it has to declare its own. Same for the black theme below. */ --border: #630032; --border-light: #870044; --ticker-fg: #4B0026; /* 2.31:1 -- ceiling is 3.06 */ } /* Neutral light. Same inversion logic as yellow -- dark type, translucent blacks -- but the greys are true neutrals rather than tinted, since there is no hue to tint toward. --fg-dim is 5.33:1 on white, --fg-muted 8.45:1. */ [data-theme="white"] { --bg: #FFFFFF; --bg-secondary: #F0F0F0; --fg: #000000; --fg-muted: #4D4D4D; --fg-dim: #6B6B6B; --accent: #000000; --fg-a72: rgba(0,0,0,0.72); --fg-a65: rgba(0,0,0,0.65); --fg-a55: rgba(0,0,0,0.55); --fg-a45: rgba(0,0,0,0.45); --border: #BABABA; --border-light: #D6D6D6; --ticker-fg: #ABABAB; /* 2.30:1, held back from a 21:1 headroom */ } /* Neutral dark. Keeps the root's white foreground and translucent whites, so only the backgrounds and the two greys move. The catch that makes this theme different from every other one: --black is the background of the black ISLANDS (.blk, .card-img, hero, portrait), and at #000000 on a #000000 page they disappear entirely -- the about page's six blocks became invisible rectangles. So the islands are lifted to #171717 with them, which turns them into raised cards instead of holes. --bg-secondary sits between the two so the figure caption band still separates from both. */ [data-theme="black"] { --bg: #000000; /* the one theme that cannot go darker, so its surface is LIFTED instead. #0F0F0F was only 1.10:1 off the page and the frames barely read; #1A1A1A is 1.24:1, a touch more separation than the white theme's #F0F0F0 (1.14:1), because a step this near black is harder to see than the same step near white. --fg-dim on it still measures 5.06:1, so the AA floor holds. */ --bg-secondary: #1A1A1A; --fg: #FFFFFF; --fg-muted: #B3B3B3; --fg-dim: #8C8C8C; --accent: #FFFFFF; --border: #3E3E3E; --border-light: #292929; /* the one theme with no darker direction to go, so the ticker is LIFTED instead -- the same exception --bg-secondary makes above. 2.30:1. */ --ticker-fg: #484848; --black: #171717; } /* Black surfaces are islands: they stay dark in every theme, so the foreground tokens have to be forced back to light inside them. Harmless in blue, pink and black (the values already match); load-bearing in yellow and white, where --fg is black. */ /* Only .blk now. The media surfaces used to live here too, because they were black in every palette and so needed light type forced back on. Now that they are a 6pp step off the page they carry the palette's OWN foreground, which is what makes dark type appear on the yellow and white frames. */ .blk { /* `color` and not just the token: text inside these blocks mostly inherits rather than declaring var(--fg), so in the yellow theme it came through black-on-black until this line existed. */ color: var(--on-black-fg); --fg: var(--on-black-fg); --accent: var(--on-black-fg); --fg-a72: var(--on-black-a72); --fg-a65: var(--on-black-a65); --fg-a55: var(--on-black-a55); --fg-a45: var(--on-black-a45); --border: var(--on-black-border); --border-light: var(--on-black-border-light); /* Cooler, bluer greys than any theme's muted pair -- see .blk */ --fg-muted: var(--on-black-muted); --fg-dim: var(--on-black-dim); } /* One step down on phones: 24px is 6.4% of a 375px screen on each side. Placed here, after THEMES, so it cannot be shadowed by an earlier :root. */ @media (max-width: 800px) { :root { --gutter: 16px; } } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--fs-body); /* On the html rule rather than a second :root block on purpose: :root would be a duplicate selector for the token block above, and html is the same element at lower specificity, which nothing else competes for. Thumb then track. Both inherit, so every scroller on the page picks them up and the ones that hide their bar (.carousel-track, the pinned index) override with `scrollbar-width: none` further down. */ scrollbar-color: var(--fg-dim) var(--bg-secondary); /* `thin` rather than `auto`: at auto the standard property leaves the OS width, which is a 15px grey-chrome-sized bar on Windows. */ scrollbar-width: thin; } body { background: var(--bg); color: var(--fg); font-family: var(--font-mono); line-height: 1.5; min-height: 100vh; /* room for the fixed footer, so the last line of a page is never under it */ padding-bottom: var(--footer-h); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ul { list-style: none; } /* ============================================================ SCROLLBAR Themed, because the default is a grey chrome bar sitting against a saturated page -- the one piece of UI on the site that ignored the palette. Thumb is --fg-dim, track is --bg-secondary, so it recolours with the footer chips for free and never needs a per-theme override. Declared twice on purpose. `scrollbar-color` is the standard property (Firefox, Chrome 121+, Safari 18.2+) and takes exactly two colours; ::-webkit-scrollbar is the older Blink/WebKit pseudo-element tree, which is what actually answers in anything shipped before late 2024. A browser that understands both applies the pseudo-elements, so the two have to agree -- hence the same tokens in both. Note for testing on a Mac: the system scrollbar is an OVERLAY, hidden until you scroll, unless "Show scroll bars: Always" is set in System Settings. Giving ::-webkit-scrollbar a width is what forces the classic always-visible gutter in Blink; macOS Safari keeps overlay behaviour and only shows these colours mid-scroll. Windows shows them permanently. ============================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--fg-dim); /* square, like everything else on the site -- the default is already square in Blink, but Safari rounds it unless told otherwise */ border-radius: 0; } /* The thumb is --fg-dim at rest, so hover goes UP to --fg rather than down: dimming it would read as the bar becoming disabled under the pointer. */ ::-webkit-scrollbar-thumb:hover { background: var(--fg); } /* Blink draws a button box at each end by default and a corner where two scrollbars meet. Both inherit the track colour unless zeroed, which left a lighter square in the corner of the one horizontal scroller on the site (the pinned carousel). */ ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-corner { background: var(--bg-secondary); } /* ============================================================ LAYOUT Deliberately no shared container class: every band is full bleed and insets its own text by --gutter. The old .page-wrap (max-width 1400 + padding) was dead -- no HTML ever used it. ============================================================ */ /* ============================================================ NAV ============================================================ */ nav.site-header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); border-bottom: 1px solid var(--border-light); background: var(--bg); display: flex; align-items: stretch; } .nav-inner { display: flex; align-items: center; width: 100%; padding: 0 var(--gutter); } .nav-logo { display: flex; align-items: center; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--fg); } .nav-logo .fn-name { color: var(--fg); } /* Takes the wordmark's slot on a project page at mobile widths, matching its font and size so the nav's rhythm is unchanged. Borderless like the logo it replaces -- the arrow already reads as "back". */ .nav-back { display: none; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--fg); } .nav-back svg { width: 22px; height: 11px; } /* Scoped to project pages: an unscoped `.nav-logo { display: none }` here wiped the wordmark off the work and about pages too. `.nav-back` only exists on project pages, but the logo does not, so the switch needs the body attribute rather than a sibling selector. `(hover: none) and (pointer: coarse)` on top of the width check is deliberate -- width alone fires on a narrow-but-unmaximized DESKTOP window too, which is exactly the bug this was reported as. Gating on a touch pointer means only actual phones/tablets get the horizontal nav link; any mouse/trackpad browser keeps the wordmark + the vertical .back-link below, no matter how narrow its window gets. */ @media (max-width: 800px) and (hover: none) and (pointer: coarse) { body[data-view="project"] .nav-back { display: flex; } body[data-view="project"] .nav-logo { display: none; } /* the nav carries it now; two back links would be redundant */ body[data-view="project"] .header-copy .back-link { display: none; } /* Same swap on about.html, but only when main.js's referrer check finds we arrived from a project page -- it adds .has-back-context to and points this same .nav-back at that project instead of index.html. The in-page .back-link--contextual stays hidden here; on mobile the header is the only place this back button lives, same as a project page. */ body.has-back-context .nav-back { display: flex; } body.has-back-context .nav-logo { display: none; } body.has-back-context .back-link--contextual { display: none; } } .nav-meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; /* measured off the logo's own text: the logo no longer carries trailing padding, so this margin is the whole gap */ margin-left: var(--sp-4); font-family: var(--font-mono); /* was --fs-label (11px); dropped 2px, which lands on the existing --fs-micro step rather than inventing a 9px one-off */ font-size: var(--fs-micro); line-height: 1.55; color: var(--fg-a72); white-space: nowrap; } .nav-meta .nm-indent { padding-left: var(--sp-6); } .nav-meta .nm-key { color: var(--fg); } .nav-meta .nm-punct { color: var(--fg-a45); } /* The one link inside the header's code block. No underline (the global `a { text-decoration: none }` already handles that), so hover colour is the only affordance it gets -- same --accent move the card titles and the corner marks make, so it reads as part of the same vocabulary. */ .nav-meta .nm-link { color: inherit; transition: color var(--dur-fast) linear; } @media (hover: hover) and (pointer: fine) { .nav-meta .nm-link:hover { color: var(--accent); } } @media (max-width: 1080px) { .nav-meta { display: none; } } .nav-links { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; } .nav-btn { display: flex; align-items: center; padding: var(--sp-2) var(--sp-3); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--fg-muted); transition: color var(--dur-fast); } .nav-btn:hover { color: var(--fg); } /* state is carried by colour now, so the dotted outline is gone */ .nav-btn.active { color: var(--fg); } /* ============================================================ PAGE HEADER (project detail pages) ============================================================ */ .page-header { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-12); max-width: 1400px; margin: 0 auto; padding: var(--sp-10) 0 var(--sp-8); } .header-copy { /* grows into whatever the stats bar does not need, so the title and descriptor run out toward the right margin instead of sitting at their own content width */ flex: 1 1 auto; min-width: 0; } @media (max-width: 1450px) { /* stack: the stats column reads as a bar under the copy, not beside it. 900px -> 1250px -> 1450px. The bar's cells are nowrap and cannot shrink, so side by side gives the h1 only (header width - bar - gap). .page-header caps at 1400px, and it reaches that cap at 1400 + 2 * 24px gutter = 1448px of viewport. Below that the header is narrower while the bar still takes its full natural width, so the title column collapses -- at 1280px it fell to 278px and broke FUTURE PIXELS OF AMERICA over four lines. 1450px means the two only sit side by side once the header is at full width, which is the only point at which the leftover column is predictable. align-items on the row layout is flex-end (baseline-matching the stats bar to the paragraph); once the axis turns vertical that same value means "flush right", which shoved the title off the left margin. */ .page-header { flex-direction: column; align-items: stretch; /* Once stacked, the meta bar sits between the paragraph and the hero, so the gap above it and the padding below it are the same seam and have to match -- 32px below read as the hero drifting away from the bar. Both are --sp-5, one step tighter than the 24px they started from. */ gap: var(--sp-5); padding-bottom: var(--sp-5); } } .page-header h1 { /* containing block for the .glitch-field the title-glitch builds inside it, and fit-content so that box hugs the type instead of running the full column width -- the hover target is then the words themselves, not the empty space to their right. Still a block, so the -0.16em lift below and the bottom margin behave exactly as before. */ position: relative; width: fit-content; font-family: var(--font-display); font-size: var(--fs-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 0.95; color: var(--fg); /* cap height sits ~0.16em below the line box top in Barlow Condensed; this lifts it flush with the back tab's top border */ margin-top: -0.16em; margin-bottom: var(--sp-4); } .page-header .descriptor { font-family: var(--font-body); font-size: var(--fs-h3); color: var(--fg); /* uncapped, this paragraph's max-content width squeezes .project-meta-bar to nothing and its nowrap cells overflow the page. 800px matches the body prose measure; below 900px the header stacks and this goes unused. */ max-width: 800px; line-height: 1.6; } /* ============================================================ PROJECT GRID ============================================================ */ .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } @media (max-width: 720px) { .project-grid { grid-template-columns: 1fr; } } /* A third column above 1600px is NOT declared here -- it has to sit after the reveal stagger's :nth-child rules near the end of this file, because those carry the same (0,3,0) specificity and a media query adds none, so source order is the only thing that decides. See LARGE-DISPLAY GRID. */ /* ============================================================ PROJECT CARD ============================================================ */ .project-card { position: relative; display: flex; flex-direction: column; background: var(--bg); /* Permanently transparent. It used to light up on hover, which was one reaction too many next to the glitch and the corner marks, so the colour change is gone -- but the 1px stays: the grid, the card's right-hand wall for the data strip, and .card-body's calc(--gutter - 1px) are all measured against it. */ border: 1px solid transparent; overflow: hidden; } /* Corner registration marks — all four corners (2026-09-25; the top two were the whole set before). Four corners needs four pseudo-elements, so the bottom pair lives on the card's anchor. The anchor is position: static, so those two still resolve against .project-card (the nearest positioned ancestor) -- bottom: 8px is measured from exactly the same box as the top pair's top: 8px, inside the card's 1px border. Do not give the anchor position: relative; it would re-anchor them to a box 1px in and change nothing else. Absolute positioning also keeps them out of the anchor's flex flow -- an in-flow ::before there would become a flex item and push the image down. */ .project-card::before, .project-card::after, .project-card > a::before, .project-card > a::after { content: '+'; position: absolute; font-family: var(--font-mono); /* 11px read too faint at the card corners. Kept as a multiple of the token rather than a new hard-coded step, so it still tracks --fs-label. */ font-size: calc(var(--fs-label) * 1.15); color: var(--fg-dim); line-height: 1; z-index: 2; /* hidden by default on EVERY device (2026-09-25). They used to be permanently visible on touch, because opacity: 0 lived in the fine-pointer block and there was no hover to bring them back. A phone reveals them on press instead -- see the PRESS STATE block. */ opacity: 0; transition: color var(--dur-base), opacity var(--dur-base); pointer-events: none; } .project-card::before { top: 8px; left: 10px; } .project-card::after { top: 8px; right: 10px; } .project-card > a::before { bottom: 8px; left: 10px; } .project-card > a::after { bottom: 8px; right: 10px; } .project-card a { /* iOS paints a translucent grey box over the whole link on press, which read as an outline flashing on top of the touch glitch. Keyboard :focus-visible is unaffected. */ -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; flex: 1; } .card-img { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-secondary); } .card-img img { width: 100%; height: 100%; object-fit: cover; } .card-img--contain img { object-fit: contain; } /* Breathing room above and below contained art. The frame keeps its aspect-ratio height and the image gives up 64px. Flex, not the base `height: 100%`: a percentage height inside an aspect-ratio box does not reliably resolve against the content box, so it overflowed the padding on the hero. Stretch measures the content box. */ .card-img--inset { padding: var(--sp-8) 0; display: flex; } .card-img--inset img { height: auto; min-height: 0; align-self: stretch; } /* The anchor is the card's only flex child, so it has to pass the column layout through: without this the sizes to its content and the slack a grid row hands the card pools underneath it, leaving the strip's hairlines stopping short of the card's bottom edge. */ .project-card > a { display: flex; flex-direction: column; flex: 1 1 auto; } .card-body { /* Absorbs the row-equalisation slack. .card-img is locked to 16/9 and every card in a row is the same width, so the image can't take it -- meaning the body is the only place it can go, and putting it here makes every body in a row the same height even when one title has wrapped to two lines. The title is align-self: center, so it re-centres; the strip is stretch, so its dividers reach the card's bottom border. */ flex: 1 1 auto; /* title and data strip share one row, strip pushed to the right edge */ display: flex; align-items: stretch; justify-content: space-between; /* nowrap, and it matters more than it looks: flexbox assigns items to lines using their HYPOTHETICAL (max-content) size and only shrinks within a line, so with wrap a title one pixel too wide for the space beside the strip pushed the whole strip onto a second line instead of shrinking. That made those cards 56-71px taller, and grid rows equalise, so one long title grew its entire row. With nowrap the title gives way instead: it shrinks and wraps its own text, and the strip can never leave its side. Re-enabled at <=560px, where the strip becoming its own full-width row is the intended layout. */ flex-wrap: nowrap; /* No vertical padding and none on the right: the children carry their own, so the strip's hairlines can run the full height of the bar and the group can reach the card's own border, which becomes its right wall. */ /* minus the card's own 1px left border, so the TEXT lands on the gutter line rather than the border doing it 1px late */ padding: 0 0 0 calc(var(--gutter) - 1px); } .card-title { /* may wrap or shrink; the strip never does */ min-width: 0; align-self: center; /* the right padding is what separates the title from the strip */ padding: var(--sp-4) var(--sp-5) var(--sp-5) 0; font-family: var(--font-display); font-size: var(--fs-card-title); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 0.95; color: var(--fg); transition: color var(--dur-base); } /* CARD HOVER STATES ------------------------------------------------------ Gathered here and gated on a real cursor. iOS applies :hover on a long press, so ungated these fired on touch: Jesse saw the image scale up under his finger, and a tapped card also stayed in its hover look after navigating back. The base rules carry the transitions, so nothing here shifts layout. The card border used to light up here too, removed 2026-09-23, and the image scaled to 1.04 on hover, removed 2026-09-25. What is left on the image is the cursor-tracked glitch alone. The corner marks are hidden until the pointer is over the IMAGE, not the card, so they arrive with the glitch rather than with the title colour. A pseudo-element cannot be selected from a descendant's state, hence :has() -- the card is the ancestor, so it is the only way to reach up from .card-img. They start at opacity: 0 on the base rule, so this block only has to bring them back. */ @media (hover: hover) and (pointer: fine) { .project-card:has(.card-img:hover)::before, .project-card:has(.card-img:hover)::after, .project-card:has(.card-img:hover) > a::before, .project-card:has(.card-img:hover) > a::after { opacity: 1; color: var(--accent); } .project-card:hover .card-title { color: var(--accent); } } /* PRESS STATE (touch) ---------------------------------------------------- The glitch covers the image half of the card; this covers the text half, which had nothing at all once iOS's grey tap-highlight was turned off. No media query: main.js's cardPress only ever adds .is-pressed on a touch device, so the gate lives in one place rather than two. */ .card-body { transition: opacity var(--dur-fast) linear; } .project-card > a.is-pressed .card-body { opacity: 0.35; } /* The corner marks come in with the press, the way they come in with hover on a mouse. The top pair lives on .project-card and the bottom pair on its anchor, so reaching the top two from the anchor's class means :has() going upward. They sit outside .card-body, so the 0.35 dim above does not touch them. */ .project-card:has(> a.is-pressed)::before, .project-card:has(> a.is-pressed)::after, .project-card > a.is-pressed::before, .project-card > a.is-pressed::after { opacity: 1; color: var(--accent); } /* Data strip — YEAR and INDEX, inline with the card title, an enclosed compartment on the right of the bar: hairlines run the full bar height, the leading one walls it off from the title, and the card's own border closes it on the right. Cells are the shared INFO ROW component (see the block below the meta bar further down this file) -- .card-strip only owns this wide/inline layout and its own breakpoint; the narrow-viewport variant rules live with the component itself. TYPE was the third cell until 2026-09-25. It was the widest of the three (125px against 61px) and the strip never shrinks, so on a narrow card it was what pushed a long title to three and four lines -- and the project page states the same value again in its own meta bar. Dropped from partials/project-card.html rather than hidden in CSS; build.py still passes a {{type}} token, so restoring it is four lines of markup. */ .card-strip { display: flex; align-items: stretch; /* holds its full width so the title is what gives way, and stays right even when it has wrapped onto a line of its own */ flex: 0 0 auto; margin-left: auto; } .card-strip .info-cell { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); /* matches the title's vertical padding, so the bar height is unchanged */ padding: var(--sp-4) var(--sp-3) var(--sp-5); /* on every cell: gives the leading wall and the dividers in one rule, and leaves the trailing edge to the card border */ /* 0.5px, not 1px: on a 2x/3x screen a 1px divider is 2-3 device pixels and reads as a rule rather than a hairline. Sub-pixel borders antialias to a lighter line on 1x rather than disappearing, which is the same intent. */ border-left: 0.5px solid var(--border); } /* the last value keeps the same optical gutter the title has on the left */ .card-strip .info-cell:last-child { padding-right: var(--sp-5); } /* The strip used to drop to a full-width row of its own below 560px. Jesse asked for the desktop layout at every width (2026-09-25): title left, strip walled off on the right, hairlines running the bar's full height however many lines the title wraps to. That is just the base rules, so the overrides that used to live here are gone -- .card-body's `align-items: stretch` is what makes the dividers fill a two- or three-line bar, and its `flex-wrap: nowrap` is what makes the title, not the strip, give way. All that is left for narrow viewports is buying the title room back out of the strip's side padding. */ @media (max-width: 560px) { .card-strip .info-cell { padding-left: var(--sp-2); padding-right: var(--sp-2); } .card-strip .info-cell:last-child { padding-right: var(--sp-4); } .card-title { padding-right: var(--sp-4); } .card-strip.info-row--carousel .info-cell:first-child { padding-left: 0; border-left: none; } .card-strip.info-row--carousel { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .card-strip.info-row--carousel::-webkit-scrollbar { display: none; } /* tighter than the desktop cell: on a phone the strip is its own row under the title and was carrying more air than the two lines of text need, so 6px comes off the top and bottom each (-12px on the row). */ .card-strip.info-row--carousel .info-cell { padding: var(--sp-2) var(--sp-4); min-width: min(44%, 160px); scroll-snap-align: start; } } /* ============================================================ IMAGE CAROUSEL (project body) Native scroll + scroll-snap, not a transform track: the browser gets momentum, rubber-band and trackpad gestures for free, and with JS off the whole thing is still a scrollable set of images. JS only paints the counter and wires the two buttons. ============================================================ */ .carousel-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* the bar below already states position, so the native bar is noise */ scrollbar-width: none; -ms-overflow-style: none; } .carousel-track::-webkit-scrollbar { display: none; } /* a focused scroll container is how keyboard users page this, so it has to be visible when focused -- inset, or the outline sits under the slide */ .carousel-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .carousel-slide { /* basis 100%, not width: a flex item with flex-basis honours the snap alignment at every viewport without a JS measure */ flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-secondary); } .carousel-slide img { width: 100%; height: 100%; /* block, so the image is not an inline box sitting on a baseline inside a frame whose height is already fixed by aspect-ratio */ display: block; /* contain, not cover: these are finished pieces at mixed ratios, and cropping somebody's artwork to fit a frame is the wrong default */ object-fit: contain; } .carousel-bar { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-light); padding: var(--sp-2) 0; font-family: var(--font-mono); font-size: var(--fs-data); letter-spacing: var(--ls-label); color: var(--fg-muted); } .carousel-nav { display: flex; gap: var(--sp-2); } .carousel-btn { appearance: none; background: none; border: 0; padding: 0 var(--sp-1); font: inherit; letter-spacing: inherit; color: var(--fg-muted); cursor: pointer; transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease; } .carousel-btn:hover { color: var(--accent); } .carousel-btn[disabled] { opacity: 0.3; cursor: default; } .carousel-btn[disabled]:hover { color: var(--fg-muted); } /* On touch the swipe IS the affordance; two tiny arrow glyphs next to it are a redundant second control, so the counter carries the whole bar. */ @media (hover: none) and (pointer: coarse) { .carousel-nav { display: none; } } @media (max-width: 720px) { /* same reasoning as the hero: 16:9 is a thin strip on a phone */ .carousel-slide { aspect-ratio: 4 / 3; } } @media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } } /* ============================================================ PLACEHOLDER IMAGE (when no real img) ============================================================ */ .img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; /* --bg-secondary, the same media surface the card and hero use, so an empty slot and a letterboxed one are the same colour. */ background: var(--bg-secondary); /* the theme's own --fg-dim, not the on-black grey: this surface is now a shade of the page, so the palette's de-emphasis colour is the right one and it inverts to dark type on yellow and white for free. Floor is 4.68:1 (white theme); yellow is 5.09:1. */ color: var(--fg-dim); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-micro); text-transform: uppercase; } /* ============================================================ FOOTER ============================================================ */ footer { /* Locked to the bottom of the viewport rather than the bottom of the document (2026-09-25): the palette picker and the ticker are chrome, not an end-of-page sign-off, and reaching them used to mean scrolling a 4000px project page to its end. The page scrolls underneath, so unlike the in-flow version this needs its own background -- otherwise content shows through the band. */ position: fixed; bottom: 0; left: 0; right: 0; /* level with the sticky nav; the two bands can never overlap */ z-index: 100; height: var(--footer-h); background: var(--bg); /* a rule above it so the footer reads as a band, not as trailing text */ border-top: 1px solid var(--border-light); padding: 0 var(--gutter); } /* --- phones: the footer gets out of the way on the way down --- Same gesture and the same gate as the condensed header, so the two bands react as one piece of chrome rather than two. main.js sets .footer-hidden (see navCondense, which owns both classes). TRANSFORM ONLY, for the reason spelled out in the CONDENSED HEADER block: the fixed footer keeps its 57px box and body keeps its padding-bottom, so sliding it out relayouts nothing. Animating the height or dropping the padding would reflow the document on every frame and move the scroll position under the reader's thumb. Gated on (pointer: coarse) as well as width: a width-only query fires on a narrow desktop window, which has the viewport height to spare and no reason to hide its chrome. */ @media (max-width: 800px) and (pointer: coarse) { /* A shorter band (2026-09-25): 57px was sized for a copyright that was allowed to wrap to two lines. It middle-truncates on one line now, so the band only has to clear the 24px colour chips. Declared on body rather than :root so it inherits to