/* 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 */ --maxw: 1200px; --gap: clamp(1rem, 2vw, 2rem); /* Consistent page buffer from the screen edge — used everywhere so "leftmost" / "rightmost" content lines up (a small, even margin, never the true edge). +10px is a deliberate nudge past the clamp's responsive value — change here only; every dependent element reads this one variable. --edge-rest (the ceiling branch, pulled out on its own) is --edge's value before any shrink pressure — --nav-edge below borrows it without also inheriting --edge's shrink *schedule* (see --nav-edge). */ --edge-rest: calc(3rem + 10px); --edge: clamp(calc(1.5rem + 10px), calc(3vw + 10px), var(--edge-rest)); /* --edge's own clamp is tuned for general page margins, and starts shrinking (from its 3vw term) at a much wider viewport than the top nav's other fluid elements (name, links — see Nav.astro) do — if --nav-edge capped against the live var(--edge), the hamburger gutter would already be visibly squeezed while "Marc Dunand" and the right-hand links are still sitting at full size, nowhere near colliding. Capping against --edge-rest (its fixed, pre-shrink value) instead means --nav-edge stays flat until its own 10vw term drops below that ceiling — tuned to happen around the same ~640-660px viewport width where .name (5vw vs. a 32px ceiling) and .link (3vw vs. --menu-size) start shrinking, i.e. only once the name and links are actually about to collide. */ --nav-edge: clamp(1.1rem, 10vw, var(--edge-rest)); --nav-h: 72px; /* roomier so the large name sits comfortably */ /* "Behind the Project" working-area background (slightly grayer than base) */ --behind-bg: #e9ebed; --behind-dot: #d3d7db; /* Futura weights: larger text = Book (400), smaller text = Light (300) */ --fw-book: 400; --fw-light: 300; /* 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 */ /* Page titles (About/Contact/CV heading): 2pt smaller than the nav name. */ --title-size: calc(var(--name-size) - 2pt); /* Shared size for top-right nav links, the work tabs, and each piece's inline title (Title, Year). */ --menu-size: 1.05rem; font-size: calc(1em + 2pt); 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. the drawer's lone "×" close button) well past their set rem value at certain viewport widths. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } * { 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