/* ========================================================================== Portfolio 2026 — homepage + case studies 1200px content on a 12-column grid (12 x 45px columns, 11 x 60px gutters). Spacing scale: 2 4 8 12 16 20 24 32 48 60 72 84 96 120. Media compositions reproduce a fixed 1200px canvas and scale with cqw. ========================================================================== */ /* --- Fonts -------------------------------------------------------------- */ /* Self-hosted copies of the Google Fonts latin subsets. Browsers stopped sharing a CDN's cache between sites in 2020, so loading them from Google only added two connections and a stylesheet round trip. Every character on the site falls inside this range. Filenames carry Google's version, and vercel.json caches this folder for a year: a changed file needs a new name. Crimson Pro is one variable file for both weights. Crimson Pro and Figtree are preloaded from each page's ; rename those links too. */ @font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("../assets/fonts/crimson-pro-v28-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/dm-mono-v16-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/dm-mono-v16-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/figtree-v9-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Tokens -------------------------------------------------------------- */ :root { /* Spacing scale */ --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-60: 60px; --space-72: 72px; --space-84: 84px; --space-96: 96px; --space-120: 120px; /* Colour — text. Four steps, named and valued as the Figma library: text/primary · text/secondary · text/tertiary · text/quaternary. Text is always given one of these outright — never a colour plus an opacity, which composites to a value no token can name. */ --color-text-primary: #394153; --color-text-secondary: rgba(57, 65, 83, 0.8); --color-text-tertiary: rgba(57, 65, 83, 0.55); --color-text-quaternary: rgba(57, 65, 83, 0.4); /* For copy sitting on a dark tile. */ --color-text-inverse-primary: #ffffff; --color-text-inverse-secondary: rgba(255, 255, 255, 0.5); /* Colour — surfaces */ --color-bg: #f3f5fb; /* surface/primary */ --color-tint: rgba(57, 65, 83, 0.03); /* surface/secondary — footer band */ /* Buttons: surface/button, border/button and shadow/button. The lift is ours — the Figma has one resting shadow and no hover state. */ --surface-button: rgba(255, 255, 255, 0.5); --border-button: #ffffff; --shadow-button: 0 2px 2px rgba(0, 0, 0, 0.05); --shadow-button-lift: 0 5px 10px rgba(0, 0, 0, 0.06); --hover-scale: 1.075; /* The bar's slide. Far longer than a hover on purpose: it is a large object travelling its own height, and at interaction speed it reads as a snap. */ --nav-slide: 500ms; --color-available: #2ab45f; /* availability/available */ --color-border: rgba(57, 65, 83, 0.1); /* border/default — every rule and edge */ --color-border-subtle: rgba(57, 65, 83, 0.05); /* border/subtle */ /* Media surfaces — layered radial gradients taken from the Figma fills. Figma applies an opacity to the whole tint layer; that is folded into the stop colours here, since CSS gradients have no layer opacity. */ --surface-light: radial-gradient(53.39% 58% at 50% 50%, #eff2f9 0%, #f1f2f8 100%); --surface-heineken: #37466a; --surface-heineken-tint: radial-gradient(50% 54.6% at 50% 50%, rgba(57, 65, 83, 0.3) 0%, rgba(42, 44, 51, 0.6) 100%); --surface-emo: #4d5bd7; --surface-emo-tint: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); /* Radii */ --r-out: 60px; --r-md: 24px; /* card thumbnails */ --r-logo: 10px; /* résumé logo tiles */ --r-in: 8px; --r-screen: 4px; --r-pill: 1000px; /* Type */ --font-display: "Crimson Pro", Georgia, "Times New Roman", serif; --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type sizes are named for the Figma text styles they implement, so a style in the library and a token here are the same thing by name. Sizes that step down do so in the 1024 and 767 blocks at the foot. */ --size-display: 80px; /* Heading/Display — homepage H1 */ --size-h1: 60px; /* Heading/H1 */ --size-h2: 42px; /* Heading/H2 */ --size-h3: 36px; /* Heading/H3 */ --size-h4: 24px; /* Heading/H4 — résumé names, availability, award rank */ --size-subheadline: 24px; /* Body/Subheadline — case study lead, homepage intro */ --size-body-l: 20px; /* Body/Body L — the base size */ --size-body-m: 18px; /* Body/Body M */ --size-body-s: 14px; /* Body/Body S — meta values, pills, availability note */ --size-eyebrow-xl: 40px; /* Eyebrow/Eyebrow XL — stat values, award medals */ --size-eyebrow-l: 24px; /* Eyebrow/Eyebrow L — numbered step counters */ --size-eyebrow-m: 14px; /* Eyebrow/Eyebrow M — section labels, kickers, years */ --size-eyebrow-s: 12px; /* Eyebrow/Eyebrow S — card kickers, tags, colophon */ /* Ours, not a Figma variable: labels that sit as one eyebrow beside another — résumé years, the intro's summary and meta labels, stat labels, award sources. Eyebrow M, stepping down to Eyebrow S on phones. Size and tracking change together, so a rule that uses one uses both. */ --size-eyebrow-meta: var(--size-eyebrow-m); --tracking-eyebrow-meta: 0; --size-button-label: 14px; /* Components/Button Label */ --size-quote: 28px; /* Components/Quote */ --size-caption: 16px; /* Components/Caption */ /* Reveal timing. JS only assigns --reveal-index; the durations live here so the whole cascade can be retimed from one place. */ --reveal-duration: 700ms; --reveal-base-delay: 200ms; /* beat between crossing into view and starting */ --reveal-step: 200ms; --reveal-rise: 12px; /* Symmetric S-curve: 50% of the fade at 50% of the time, so the duration above is what you actually perceive. Sharp ease-outs like (.22,1,.36,1) hit ~90% opacity in the first quarter and spend the rest invisibly settling, which made a 700ms fade read as barely 100ms. */ --reveal-ease: ease-in-out; /* Hover/focus timing. Separate from the reveal above on purpose: a reveal is something you watch, an interaction is something you steer, so it wants to land inside a fifth of a second. */ --hover-duration: 200ms; --hover-ease: ease-out; /* Layout — the 12-column grid. 12 columns of 45px + 11 gutters of 60px = 1200px. Every width in the design is a span on it: 2 cols = 150 (labels), 3 = 255, 4 = 360, 5 = 465 (cards), 7 = 675, 8 = 780 (prose), 10 = 990. */ --content: 1200px; --gutter: var(--space-60); --page-pad: var(--space-120); --measure: 780px; /* 8 columns */ --prose-indent: 210px; /* 2 columns + gutter */ } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* In-page jumps glide rather than cut. Unguarded, matching js/links.js, which also runs under reduced motion: this is movement the reader asked for by clicking. The script overrides this with its own timing. */ scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--size-body-l); line-height: 1.4; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; } ul, ol { list-style: none; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } /* Anything jumped to keeps clear of the viewport edge. Not :target — that selector matches only once the hash is already set, which is a race with the scroll it is meant to offset. */ /* No allowance for the nav — it is usually away by the time you land. */ [id] { scroll-margin-top: var(--space-60); } /* --- Reveal on scroll ---------------------------------------------------- */ /* Structural blocks only: headers, images, cards, and the lower sections as whole blocks. Nothing inside a block animates separately — animating every row and paragraph flattens the effect until none of it registers, so scope and the résumé each fade in as one piece. Only active once the inline script in each page's adds .js-reveal, so the content is visible with no JS. The hidden state has to exist before the first paint, which rules out having JS tag the elements, so this list is repeated as SELECTOR in js/reveal.js. Change one, change both. */ .js-reveal :is( .article-header > *, .hero > *, .band > .band__label, .availability__inner, .card, .scope, .resume, .section > .tile, .media .tile, .panel > .panel-item ) { @media (prefers-reduced-motion: no-preference) { --reveal-delay: calc( var(--reveal-base-delay) + var(--reveal-step) * var(--reveal-index, 0) ); transition: opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay), transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay); /* Hiding via :not() rather than a competing .is-revealed rule keeps the transition on the element and avoids a specificity fight. */ &:not(.is-revealed) { opacity: 0; transform: translateY(var(--reveal-rise)); } } @media print { opacity: 1 !important; transform: none !important; } } /* On phones the first screen should not keep the reader waiting: whatever is on screen at load (tagged .is-initial by js/reveal.js) starts at once and fades faster. Later reveals, and wider screens, keep the timing above. */ @media (max-width: 767px) { .js-reveal .is-initial { --reveal-base-delay: 0ms; --reveal-step: 100ms; --reveal-duration: 400ms; } } /* --- Page transitions ---------------------------------------------------- */ /* Classes set on by js/links.js when leaving, and by the inline script in each page's when arriving. Above 767 a curtain wipes up over the page you leave and collapses into the top edge of the page you arrive at. At 767 and below the page fades instead: on iOS Safari a fixed full-viewport layer has no stable height while the toolbars move, and the wipe tore. js/links.js mirrors the durations for its timers; keep the two in step. */ @media (prefers-reduced-motion: no-preference) { @media (min-width: 768px) { /* scaleY off a bottom origin rather than an animated height: same picture, but it stays on the compositor instead of laying out every frame. */ html::after { content: ""; position: fixed; inset: 0; background: #edf0f6; /* --color-tint flattened over --color-bg */ transform: scaleY(0); transform-origin: bottom; z-index: 2147483647; pointer-events: none; } /* Arriving, the origin flips to the top so the curtain retreats the same way it came in rather than dropping back the way it rose. */ html.pt-covered::after { transform: scaleY(1); transform-origin: top; } html.pt-cover::after { transform: scaleY(1); transition: transform 700ms cubic-bezier(.5, 0, .75, .2); } html.pt-uncover::after { transform: scaleY(0); transform-origin: top; transition: transform 900ms cubic-bezier(.2, .6, .2, 1); } /* Swallow clicks while the curtain is up, so an impatient second click cannot start a navigation the user can no longer see. */ html.pt-cover::after, html.pt-covered::after { pointer-events: auto; } } /* The ground stays put: body's background is painted on the canvas, which the body's opacity does not reach. No pointer events while fading out, for the same reason the curtain swallows them. */ html.pt-faded body { opacity: 0; } html.pt-fade-out body { opacity: 0; pointer-events: none; transition: opacity 500ms ease; } html.pt-fade-in body { transition: opacity 400ms ease; } } /* --- Site nav ------------------------------------------------------------ */ /* Full-bleed, three columns so the avatar stays optically centred on the page regardless of how long the side links are. */ .site-nav { position: sticky; top: 0; z-index: 10; /* Slides away on the way down and comes back on the way up — js/nav.js sets the class. Hiding by its own height clears the viewport exactly. */ transition: transform var(--nav-slide) ease-in-out; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gutter); padding: var(--space-32) min(var(--space-60), var(--page-pad)); width: 100%; } /* Taller than a button in the page body, so the text pill matches the height of the icon pills beside it. */ .site-nav .button { gap: var(--space-8); padding: var(--space-16) var(--space-20); letter-spacing: 0.05em; } .site-nav .button--icon { padding: var(--space-16); } .site-nav.is-hidden { transform: translateY(-100%); } .site-nav__start { justify-self: start; } .site-nav__links { justify-self: end; display: flex; align-items: center; gap: var(--space-8); } .site-nav__avatar { display: block; width: 54px; height: 54px; border-radius: var(--r-pill); object-fit: cover; transition: transform var(--hover-duration) var(--hover-ease); } .site-nav a:hover > .site-nav__avatar, .site-nav a:focus-visible > .site-nav__avatar { transform: scale(var(--hover-scale)); } /* The homepage's section shortcut swaps its label as you pass the section it points at: the label fades out, its text changes while it is invisible, and it fades back in. The pill itself stays put and keeps its own hover. No counterpart rule for the way back: dropping .is-out at the swap leaves the label at 0 and lets the same transition carry it to 1. */ .nav-swap { display: inline-block; transition: opacity var(--hover-duration) var(--hover-ease); } .nav-swap.is-out { opacity: 0; } /* --- Chevron -------------------------------------------------------------- */ /* Inline SVG so it inherits colour; 6x10 to match the Figma stroke. */ .chevron { --chevron-flip: 1; flex: none; width: 6px; height: 10px; stroke: currentColor; stroke-width: 1.6; fill: none; /* Mirrored rather than rotated, so the hover nudge below can be written once: translateX inside a flipped space already points the other way. */ transform: scaleX(var(--chevron-flip)); transition: transform var(--hover-duration) var(--hover-ease); } .chevron--left { --chevron-flip: -1; } /* --- Button --------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); border: 1px solid var(--border-button); border-radius: var(--r-pill); padding: var(--space-12) var(--space-20); background: var(--surface-button); /* Actually frosted, not just translucent — the nav is sticky, so copy scrolls behind these and a plain 50% white would let it read through. */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow-button); font-family: var(--font-mono); font-weight: 500; font-size: var(--size-button-label); line-height: 20px; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--color-text-secondary); transition: color var(--hover-duration) var(--hover-ease), background-color var(--hover-duration) var(--hover-ease), box-shadow var(--hover-duration) var(--hover-ease), transform var(--hover-duration) var(--hover-ease); } /* An icon button is square: the label's 20px side padding would leave a 20px glyph sitting in too wide a pill, so all four sides match the vertical. */ .button--icon { gap: var(--space-8); padding: var(--space-16); } /* Icon buttons in the nav and the footer are the large variant: a 20px glyph in 16px of padding. */ .button__icon { display: block; flex: none; width: 20px; height: 20px; fill: currentColor; } /* Scaling up reads as the pill coming toward you; the shadow spreads at the same time, the way a lifted object's shadow does. */ .button:hover, .button:focus-visible { color: var(--color-text-primary); box-shadow: var(--shadow-button-lift); transform: scale(var(--hover-scale)); } /* The arrow steps away from the label, and only when the pill itself is the target — it moves with the border colour, not with the card hover. */ .button:hover .chevron, .button:focus-visible .chevron { transform: scaleX(var(--chevron-flip)) translateX(3px); } /* --- Page shell ---------------------------------------------------------- */ .page { display: flex; justify-content: center; padding: var(--page-pad); } /* Figma's section rhythm is the 7xl token. */ .article { display: flex; flex-direction: column; gap: var(--space-96); width: var(--content); max-width: 100%; } /* A section groups prose and media that belong together. */ .section { display: flex; flex-direction: column; gap: var(--space-60); width: 100%; } /* The reading column: columns 3-10 of the grid, so the 780px measure sits centred with a 210px shoulder on each side. */ .prose { width: 100%; max-width: calc(var(--prose-indent) + var(--measure)); margin-right: auto; padding-left: var(--prose-indent); } .prose-stack { display: flex; flex-direction: column; gap: var(--space-16); } .prose-stack--tight { gap: var(--space-12); } .prose-stack--loose { gap: var(--space-24); } .prose-stack--section { gap: var(--space-48); } .body-copy { display: flex; flex-direction: column; gap: var(--space-24); } /* --- Typography ---------------------------------------------------------- */ .kicker { font-family: var(--font-mono); font-weight: 500; font-size: var(--size-eyebrow-m); line-height: 1.3; text-transform: uppercase; color: var(--color-text-tertiary); } /* The one above the title carries more weight than the section eyebrows. */ .article-header > .kicker { color: var(--color-text-secondary); } /* The intro's "Key summary" label; the header kicker above keeps Eyebrow M. */ .prose-stack--tight > .kicker { font-size: var(--size-eyebrow-meta); letter-spacing: var(--tracking-eyebrow-meta); } .title { font-family: var(--font-display); font-weight: 300; font-size: var(--size-h1); line-height: 0.9; letter-spacing: -0.04em; } .lead { font-size: var(--size-subheadline); line-height: 1.3; } h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h2); line-height: 1; letter-spacing: -0.02em; } h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h3); line-height: 1.05; letter-spacing: -0.02em; } .body-copy p { font-size: var(--size-body-l); line-height: 1.4; } /* --- Article header ------------------------------------------------------ */ .article-header { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-32); width: 100%; } /* --- Summary + meta ------------------------------------------------------ */ .meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); border-top: 1px solid var(--color-border); padding-top: var(--space-20); width: 100%; } .meta-cell { display: flex; flex-direction: column; gap: var(--space-8); align-self: start; word-break: break-word; } .meta-label { font-family: var(--font-mono); font-weight: 500; font-size: var(--size-eyebrow-meta); letter-spacing: var(--tracking-eyebrow-meta); line-height: 1.3; text-transform: uppercase; color: var(--color-text-tertiary); } .meta-value { font-size: var(--size-body-s); line-height: 1.4; color: var(--color-text-tertiary); } .pills { display: flex; flex-wrap: wrap; gap: var(--space-4); } .pill { border: 1px solid var(--color-border); border-radius: var(--r-pill); padding: var(--space-2) var(--space-8); font-size: var(--size-body-s); line-height: 1.4; color: var(--color-text-tertiary); white-space: nowrap; } /* --- Quotes -------------------------------------------------------------- */ .quote { display: flex; flex-direction: column; /* Above Figma's 8: the attribution is a small mono label now, and 8 sat it too close under a 28px quote. */ gap: var(--space-12); border-left: 4px solid var(--color-border); padding: var(--space-16) var(--space-32); width: 100%; } .quote p:first-child { font-family: var(--font-display); font-weight: 400; font-size: var(--size-quote); line-height: 1.1; letter-spacing: -0.03em; } /* A label, not a line of prose — 's default italic is overridden. */ .quote cite { font-family: var(--font-mono); font-weight: 500; font-style: normal; font-size: var(--size-eyebrow-s); line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-tertiary); } /* --- Stats --------------------------------------------------------------- */ /* Like the Figma, a stats row stays on one line and is allowed to run past the 800px measure into the empty right margin rather than wrapping. */ .stats { display: flex; flex-wrap: nowrap; gap: var(--space-48); } .stat { flex: none; display: flex; flex-direction: column; gap: var(--space-8); border-top: 2px solid var(--color-border); padding-top: var(--space-16); padding-right: var(--space-48); white-space: nowrap; } .stat-value { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-weight: 300; font-size: var(--size-eyebrow-xl); line-height: 1; letter-spacing: -0.05em; } .stat-unit { color: var(--color-text-quaternary); } .stat-label { font-family: var(--font-mono); font-weight: 500; font-size: var(--size-eyebrow-meta); letter-spacing: var(--tracking-eyebrow-meta); line-height: 1.3; text-transform: uppercase; color: var(--color-text-secondary); white-space: normal; } /* --- Numbered steps ------------------------------------------------------ */ .step { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; } .step-head { display: flex; align-items: center; gap: var(--space-16); } .step-num { flex: none; display: flex; align-items: center; justify-content: center; width: var(--space-48); height: var(--space-48); border: 1px solid var(--color-border); border-radius: var(--r-pill); font-family: var(--font-mono); font-weight: 300; font-size: var(--size-eyebrow-l); line-height: 1; letter-spacing: -0.03em; color: var(--color-text-tertiary); } .step-body { padding-left: calc(var(--space-48) + var(--space-16)); } /* --- Awards -------------------------------------------------------------- */ .awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); width: 100%; } .award { display: flex; align-items: center; gap: var(--space-24); border-left: 2px solid var(--color-border); padding-left: var(--space-24); padding-block: var(--space-8); /* runs the rule past the text, top and bottom */ } .award-medal { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-mono); font-weight: 400; font-size: var(--size-eyebrow-xl); line-height: 1; } .award-detail { display: flex; flex-direction: column; gap: var(--space-2); line-height: 1.3; } /* The rank reads as a small heading rather than bold body copy. */ .award-detail strong { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h4); line-height: 1.05; letter-spacing: -0.01em; color: var(--color-text-primary); } .award-category { font-size: var(--size-body-m); color: var(--color-text-secondary); } .award-source { margin-top: var(--space-2); /* 2 + 2 gap = 4 below the category */ font-family: var(--font-mono); font-weight: 500; font-size: var(--size-eyebrow-meta); letter-spacing: var(--tracking-eyebrow-meta); line-height: 1.3; text-transform: uppercase; color: var(--color-text-tertiary); } /* --- Media: grids and tiles ---------------------------------------------- */ .media { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; } .media-row { display: flex; gap: var(--space-24); width: 100%; } .media-row > * { flex: 1 1 0; min-width: 0; } /* Corner system: 60px on the outside of a grid, 8px on every inside corner. */ .tile { --tl: var(--r-in); --tr: var(--r-in); --br: var(--r-in); --bl: var(--r-in); --tile-stroke: var(--color-border); border-radius: var(--tl) var(--tr) var(--br) var(--bl); overflow: hidden; position: relative; container-type: inline-size; } /* The stroke is drawn over the image edge rather than around it, matching Figma's inside-aligned stroke. Keeping it off the box also means the image fills the tile and the corner clip lines up with the stroke exactly. */ .tile::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--tile-stroke); border-radius: inherit; pointer-events: none; /* A