/* Jost (SIL OFL, self-hosted from public/fonts/) — a free geometric sans built to match Futura's proportions closely, used as the primary face so every visitor sees the same type regardless of what's installed/synced locally (see git history on this file for how relying on a system/Adobe-synced Futura went: it silently broke after an unrelated OS update). */ @font-face { font-family: 'Jost'; src: url('/fonts/jost-book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('/fonts/jost-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } /* Clean, minimal, editorial. Light base with restrained type. */ :root { /* Palette: "Cool concrete" — architectural, understated. */ --bg: #f4f5f6; /* cool white */ --fg: #1b1e22; /* charcoal */ --muted: #6a7075; /* slate */ --line: #e2e5e8; /* hairline */ /* Sparing accent — currently only the CV page's entry hierarchy (title black / institution-venue red / dates & supporting text gray). Muted enough to sit quietly next to the rest of the "cool concrete" palette. */ --accent: #7d332e; /* dark brick red */ --gap: clamp(1rem, 2vw, 2rem); /* Reading column: the widest a column of text runs — the text pages (About, CV, Contact; .text-page below), Behind the Project's blocks, and Blick Typology's story. */ --read-w: 1000px; /* The thin whitespace between neighboring images, fixed at every screen width: /work's cover grid, the carousel's slides, and the masonry image grids (Blick). */ --media-gap: 10px; /* Corner rounding on images, videos, buttons, and form fields. */ --radius: 2px; /* Consistent page buffer from the screen edge — used everywhere so "leftmost" / "rightmost" content lines up (a small, even margin, never the true edge). Grows with the screen (3vw + 10px) between a floor of 1.5rem + 10px (≈38px) and a 60px ceiling — change here only; every dependent element reads this one variable. */ --edge: clamp(calc(1.5rem + 10px), calc(3vw + 10px), 60px); /* Top-nav gutter, identical on both sides of the bar — the name's left edge and the Instagram icon's right edge sit the same distance in. Also the side margins of the /work tags + grid and of every individual work page (so they line up with the bar). It's the page margin --edge (so the nav and work pages match About / CV / Contact), except on narrow phones (below ~540px), where it keeps narrowing — to 16px by a ~440px phone — to give the bar's contents room. */ --nav-edge: clamp(16px, calc(22.7vw - 84px), var(--edge)); /* Top-nav scale: the name's size, and the unit every other size in the bar is set in (as em — see .nav-inner in Nav.astro). The bar's height uses it too, so the whole block shrinks together. --nav-avail is the width left for the name + right-hand links/icons, less 36px slack (a desktop scrollbar, which 100vw includes, plus kerning/rounding). That row measures --nav-row-tight em at its tightest, so the name is sized to make it fit exactly; 32px at rest, shrinking from ~690px. The row's measurements, in em of the name (worked out in Nav.astro, which uses them too; mobile has its own set — see the (pointer: coarse) block just after :root): --nav-row-items everything in the row with no gaps: name 5.61 + links 7.195 + icons 1.975 --nav-row-gaps how many link-gaps the row holds: 4.6 between the right-hand items + 2.5 as the name's minimum gap --nav-row-tight the whole row at the minimum 0.45em gap (items + gaps × 0.45) */ --nav-row-items: 14.78; --nav-row-gaps: 7.1; --nav-row-tight: 17.98; --nav-avail: calc(100vw - 2 * var(--nav-edge) - 36px); --nav-scale: clamp(13px, calc(var(--nav-avail) / var(--nav-row-tight)), var(--name-size)); /* The scale of the nav name and the /work section headings (and the spacing of its tag row in the nav). The same as --nav-scale, except on phones / tablets, where it shrinks 30% more slowly — see the (pointer: coarse) block just after :root. */ --slow-scale: var(--nav-scale); /* Bar height: 72px at rest (2.25 × the 32px name), shrinking at half the rate the text does — e.g. text at 60% → bar at 80%. Written as the average of the rest and current scale, times 2.25. */ --nav-h: calc((var(--name-size) + var(--nav-scale)) * 1.125); /* Whitespace between the nav and the top of a text page's content (About, CV, Contact) — one value so they all start at the same height. */ --page-top: 5rem; /* Individual work pages: the space above the title line, under the carousel. The info block, the work menu beside it, and the divider between the two all start from it, so they stay level. */ --work-top: 2rem; /* "Behind the Project" working-area background (slightly grayer than base) */ --behind-bg: #e9ebed; --behind-dot: #d3d7db; /* Blick Typology's dark-grey image frames (its carousel and its story). */ --blick-frame: #383131; /* The work pages' left menu: the divider between menu and text (WorkLayout). A see-through wash of slate, so it reads the same over the plain page (≈ #a1a5a9 there) and over Behind the Project's dotted background; raise the percentage for a darker line. --menu-divider-w the divider's weight */ --menu-line: color-mix(in srgb, var(--muted) 60%, transparent); --menu-divider-w: 1px; /* More of that menu's dials (WorkNav.astro explains each where it's used): --menu-label-size the collection names' size --menu-clear room between the longest title and the divider --menu-tuck how much of the menu's top padding slides up behind the nav once it's pinned --menu-fade how long a stretch its text fades out over where the menu is cut off and scrolls */ --menu-label-size: var(--text-md); --menu-clear: 20px; --menu-tuck: 1.3rem; --menu-fade: 1.5rem; /* /work: the white space above each section heading, both between the nav and the first heading and between one section's last row and the next heading (40px at rest; see work/index.astro). */ --work-band: calc(1.25 * var(--slow-scale)); /* Behind the Project: the largest an image or video is shown. A landscape one stops at the width, a tall one at the height (BehindTheArt.astro). */ --max-media-width: 640px; --max-media-height: 70vh; /* Professional Work pages: the tallest the hero image is shown before it's cropped (ProLayout.astro). */ --pro-hero-h: 75vh; /* Contact: the email / Instagram icons after the page title. All in em of the title, so they scale with it (contact.astro). --contact-email-size email icon box --contact-instagram-size Instagram icon box --contact-title-gap title → email icon --contact-icon-gap email → Instagram icon --contact-icon-drop icons shifted down from centered on the title */ --contact-email-size: 1em; --contact-instagram-size: 1.1em; --contact-title-gap: 0.35em; --contact-icon-gap: 0.2em; --contact-icon-drop: 0.1em; /* CV: how much the downloaded PDF shrinks every size and space, relative to the page on screen (1 = same size; see cv.astro). */ --cv-print-scale: 0.75; /* The proposal PDF's type (pdf.astro; its page geometry and image sizes are in src/lib/pdf.ts). In pt, the print unit. --pdf-text statement body text (full width, so a size up) --pdf-text-behind the appendix's body text, a step smaller, so it reads as supplementary --pdf-subtitle page 1's materials, one-liner, where it was shown --pdf-small the page address, the appendix's subtitle --pdf-caption plate numbers, captions, links, eyebrows --pdf-title the cover's "Title, Year" */ --pdf-text: 11pt; --pdf-text-behind: 10pt; --pdf-subtitle: 10.5pt; --pdf-small: 9pt; --pdf-caption: 6.5pt; --pdf-title: 20pt; /* Futura weights: larger text = Book (400), smaller text = Light (300) */ --fw-book: 400; --fw-light: 300; /* Jost's metrics: how far below the top of its line box a line's capitals start, in em of its font size — for lining something up with the top of the letters rather than the (higher) top of the line. Half-leading + ascent − cap height = (line-height − 1.445) / 2 + 1.07 − 0.70. --cap-top at the body line-height (1.5) --cap-top-head at the headings' line-height (1.15) Re-derive if the font or either line-height changes. */ --cap-top: 0.3975; --cap-top-head: 0.2225; /* Base text bumped +2pt over the browser default; the very large name text (nav + CV) is pinned to a fixed size so it is unaffected. */ --name-size: 32px; /* fixed → stays the same when base text grows */ /* Type scale — every text size on the site should be one of these steps (or inherit the 1rem base). Smallest to largest: --text-xs captions, milestone dates, carousel counter, 404 tag --text-sm secondary text: info-block lines (materials, one-liner, context), footer, form labels/inputs/buttons/messages, CV details + section headings, grid hover banners, work-menu links (1rem base) body copy, work-menu collection names --text-md Behind the Project subheadings --menu-size nav links, /work section headings, piece "Title, Year", CV name, 404 links --title-size page headings (About/Contact/CV/404), Behind the Project milestone headings --name-size nav name only */ --text-xs: 0.8rem; --text-sm: 0.9rem; --text-md: 1.05rem; /* --menu-size is defined as a ratio of --name-size so the nav and /work headings, which scale down together on narrow screens, can reuse the same ratio (as em of the shrinking name) and stay on this step. Change the ratio here, not --menu-size directly. 0.7656 × 32px = 24.5px. */ --menu-ratio: 0.7656; --menu-size: calc(var(--name-size) * var(--menu-ratio)); /* Top-nav dials — the nav is one component (Nav.astro) on every page, so each of these changes the whole site at once. Lengths are in em of the nav name (32px at rest), so they shrink with the bar. --nav-link-weight the right-hand links' weight --nav-link-active-weight the current page's link (kept one step heavier; the links reserve this width, so they never shift between pages) --nav-link-gap space between the right-hand items at rest (21px). Narrow screens squeeze it down to 0.45em before anything shrinks — that floor is tied to the fit measurements in Nav.astro, so it lives there. --nav-subrow-drop /work's tag row: its top, measured down from the name's baseline. The row has 1em between that baseline and the bar's bottom edge to sit in, so this moves it up or down without changing the bar's height. --nav-tag-ratio /work's tags: their text size as a share of the name's at rest (0.4667 × 32px = --text-xs). --nav-tag-rate …and how fast that size follows the nav down as it scales: 0.65 = the tags lose 65% of what the links lose (links at 60% → tags at 74%). 1 would match the links, 0 never shrink. --nav-tag-size the size those two give. It's a ceiling: the tags still shrink further wherever a row of them wouldn't fit (see work/index.astro). */ --nav-link-weight: var(--fw-light); --nav-link-active-weight: var(--fw-book); --nav-link-gap: 0.6534em; --nav-subrow-drop: 0.6em; --nav-tag-ratio: 0.4667; --nav-tag-rate: 0.65; --nav-tag-size: calc(var(--nav-tag-ratio) * ((1 - var(--nav-tag-rate)) * var(--name-size) + var(--nav-tag-rate) * var(--nav-scale))); /* /work's filter tags (the boxes; see work/index.astro). The first three are multiples of the tags' text size — plain numbers, since the sizing math uses them too. --tag-gap the space between tags --tag-pad-y / -x the padding inside a tag's box, above/below and left/right of its text --tag-selected-hover a selected tag's fill while hovered: slate mixed with charcoal; raise the slate share to lighten */ --tag-gap: 0.9143; /* Mobile only: how many times the normal gap the gaps may widen to, to keep the row of tags spanning the full width (2 = up to double); past that the row snaps back to the normal gap, left-aligned. */ --tag-gap-stretch: 2; --tag-pad-y: 0.1; --tag-pad-x: 0.24; --tag-selected-hover: color-mix(in srgb, var(--muted) 55%, var(--fg)); /* Size multipliers for the email and Instagram icons in the top nav. 1 = the current size (~30px box at rest, shrinking in proportion with the nav); e.g. 1.3 makes that icon 30% bigger, 0.85 makes it 15% smaller. The shrink-on-narrow-screens behavior scales along with it, so it still kicks in at the same width. At equal values the two icons are the same height. */ --nav-email-scale: 1.1; --nav-instagram-scale: 1.18; /* Spacing multiplier between those two icons. 1 = the same gap as between the nav's text links; e.g. 0.7 pulls them 30% closer, 1.5 spreads them 50% further apart. Shrinks with the rest of the nav on narrow screens. */ --nav-icon-gap-scale: 0.6; /* Page titles: a step below the nav name (≈ 2pt smaller). */ --title-size: calc(var(--name-size) * 0.917); font-size: 1.1667em; /* ≈ browser default + 2pt (16px → 18.67px) */ font-family: 'Jost', 'Futura', 'Futura PT', 'Century Gothic', 'Avenir Next', 'Avenir', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; /* Without this, mobile Safari/Chrome "font boosting" can inflate the font size of short text nodes (e.g. a lone "×" on a close button) well past their set rem value at certain viewport widths. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Mobile only — touch is the main input (phones, tablets), whatever the screen width; a narrow desktop window doesn't count. - The nav name and the /work headings shrink 30% more slowly than the rest of the nav: they give up only 70% of what --nav-scale has lost from the rest size (e.g. --nav-scale at 18px → 22.2px), so they stay larger. The name's extra width comes out of the gap between it and the right-hand links (see .links in Nav.astro). - The nav has no email / Instagram icons (Nav.astro hides them; both are still in the footer and on Contact), so its row is shorter and the bar is sized for that row instead: the items lose the icons' 1.975em, and the gaps the two that went with them (3 between the four links + 2.5 for the name). The bar starts shrinking from ~600px rather than ~690px, and everything in it is about 18% larger at any narrower width. */ @media (pointer: coarse) { :root { --slow-scale: calc(0.3 * var(--name-size) + 0.7 * var(--nav-scale)); --nav-row-items: 12.805; --nav-row-gaps: 5.5; --nav-row-tight: 15.28; } } * { box-sizing: border-box; } /* Browsers don't inherit the page's font onto form controls by default (only gets that for free) — without this, any