/* Guy Gibson – Service Designer */
/* Identity: Quiet confidence. Every detail considered. */
:root {
--bg: #FFFFFF;
--text: #1A1A1A;
--text-body: #444444;
--text-light: #666666;
--border: #E8E8E8;
--soft: #F5F5F3;
--focus: #2563EB;
--accent: #1A1A1A;
--font: 'Outfit', -apple-system, sans-serif;
--font-display: 'Schibsted Grotesk', 'Outfit', sans-serif;
--max-w: 820px;
--gap: 1.25rem;
--gap-section: 2rem;
/* Body leading as a token so the Reading guide can raise it through normal inheritance.
Previously .a11y-spacing set line-height on , but body's own `line-height:1.75`
blocked it from ever reaching a single descendant - so the feature only worked on the
/
that had an explicit !important rule. */
--lh-body: 1.75;
/* Content lists declare their own leading, which meant the Reading guide never reached them -
and on case studies the findings/TL;DR lists ARE the reading content. Same token pattern as
--lh-body so the feature propagates without a per-component override. */
--lh-list: 1.6;
/* TYPE SCALE. Every size is bound to its leading, because this file's recurring bug was the
two drifting apart in separate rules. Values are the ones already in use - naming them
changes nothing visually today, it just makes the pair the unit you edit.
Chrome (buttons, labels, single-line UI) is deliberately NOT tokenised: leading is
irrelevant there and forcing a value would change layout for no benefit. */
--text-lede: clamp(1.15rem, 2vw, 1.35rem); --lh-lede: 1.7;
--text-quote: 1.2rem; --lh-quote: 1.55;
--text-read: 1.05rem; --lh-read: 1.7;
--text-card: 0.95rem; --lh-card: 1.65;
--text-caption: 0.875rem; --lh-caption: 1.5;
--text-micro: 0.72rem; --lh-micro: 1.45;
/* MOTION. The file had 23 distinct transition durations - 0.19/0.22/0.26/0.32/0.33 were
accidental, not designed. These four keep the two dominant values (0.25/0.3) exactly as
they were and only absorb the strays, so the site feels consistent without feeling
retimed. Durations above 0.45s are deliberate (underline draw, scramble) and stay literal. */
--t-fast: 0.15s;
--t-base: 0.25s;
--t-slow: 0.3s;
--t-slower: 0.45s;
/* One easing, named once. It was already the only curve in the file, but written two
different ways and copied 13 times. */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* SHAPE. Superellipse shoulders - the iOS-icon curve. Applied only inside @supports below,
so browsers without corner-shape silently keep ordinary rounding. */
--corner-sm: superellipse(1.3);
--corner-md: superellipse(1.5);
--corner-lg: superellipse(1.8);
}
/* Squircles on rounded RECTANGLES only. Deliberately excludes every circular or pill control
(.accent-dot, .a11y-toggle, .theme-toggle, .scroll-top, .a11y-bubble, .cv-link, .a11y-btn):
corner-shape applied over border-radius:50% turns a circle into a rounded square, which is
a regression, not a refinement. Radii are unchanged here - only the curve between them.
Only elements with a NON-ZERO radius are listed - .project-card, .a11y-panel and .stat-row
are all border-radius:0, where corner-shape does nothing at all. At these radii (4-10px) the
effect is subtle by nature; it reads as slightly softer shoulders, not as a visible restyle. */
@supports (corner-shape: superellipse(1)) {
.cmdk-panel, .shortcuts-panel { corner-shape: var(--corner-md); }
.card-img, .img-desc, .project-media, .highlight-box, .bio-table { corner-shape: var(--corner-sm); }
}
[data-theme="dark"] {
--bg: #141414;
--text: #F0F0F0;
--text-body: #B8B8B8;
--text-light: #888888;
--border: #2A2A2A;
--soft: #1E1E1E;
--focus: #60A5FA;
--accent: #F0F0F0;
}
/* Color theme - Australian ochre: landscape, warmth, human-centered design, First Nations connection */
/* --accent was #A16207. Measured off rendered pixels, accent text on --soft (#FEF3C7)
came out at 4.42:1 - under the 4.5:1 AA floor. axe passed it, so this was only found
by sampling the painted output. #955A06 measures 5.04:1 on --soft and 5.41:1 on --bg. */
[data-color="ochre"] { --bg:#FFFBEB; --text:#713F12; --text-body:#92400E; --text-light:#B45309; --border:#FDE68A; --soft:#FEF3C7; --accent:#955A06; }
[data-theme="dark"][data-color="ochre"] { --bg:#1C1108; --text:#FEF3C7; --text-body:#FDE68A; --text-light:#D97706; --border:#713F12; --soft:#422006; --accent:#FBBF24; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
html {
font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased;
/* Mobile Chrome/Brave auto-inflate small text inside narrow blocks ("font boosting").
It scales font-size but not the rem-based padding around it, so boosted text grows
into fixed spacing - which is what pushed the a11y panel descriptions onto their
row dividers. Opt out; text scaling is offered deliberately via the Larger text
toggle, and pinch-zoom is untouched. */
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
html.snap-scroll { scroll-snap-type: y mandatory; }
html.snap-scroll [id] { scroll-margin-top: 0; }
/* The footer used to sit inside .contact, so contact's snap point covered it. Moving the
contentinfo landmark out of made the footer a snap-container child with no
alignment of its own - and under `mandatory` the scroller has to rest on a snap point,
so scrolling to the bottom bounced straight back to .contact and the footer was
unreachable. `end` makes the document bottom a valid resting place. */
html.snap-scroll > body > footer { scroll-snap-align: end; }
/* Anchor targets land clear of the sticky nav. */
[id] { scroll-margin-top: 65px; }
body { font-family: var(--font); padding-bottom: env(safe-area-inset-bottom, 0px); color: var(--text-body); background: var(--bg); line-height: var(--lh-body); overflow-x: hidden; opacity: 1; transition: opacity var(--t-base) ease, background var(--t-slower) ease, color var(--t-slower) ease; }
img { max-width: 100%; height: auto; display: block; }
/* Skip link */
.skip-link { position: absolute; top: -100%; left: 1rem; background: var(--text); color: var(--bg); padding: 0.5rem 1rem; font-size: 0.85rem; z-index: 200; border-radius: 0 0 4px 4px; text-decoration: none; }
.skip-link:focus { top: 0; }
/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px;
}
/* High contrast mode */
@media (prefers-contrast: more) {
:root { --text-body: #222222; --text-light: #444444; --border: #999999; }
[data-theme="dark"] { --text-body: #E0E0E0; --text-light: #BBBBBB; --border: #666666; }
.accent-word::after { height: 3px; }
}
/* ==================== */
/* TYPOGRAPHY */
/* ==================== */
h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 12vw, 9rem); font-weight: 700; line-height: 1.0; letter-spacing: -0.05em; color: var(--text); }
h2 { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-light); margin-bottom: var(--gap); }
h3 { font-size: 1.25rem; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 0.3rem; }
h4 { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
p { margin-bottom: 0.75rem; font-weight: 300; }
p:last-child { margin-bottom: 0; }
a { color: var(--text); }
strong, b { font-weight: 500; color: var(--text); }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
/* ==================== */
/* CUSTOM CURSOR */
/* ==================== */
@media (pointer: fine) {
html, body, * { cursor: none !important; }
a, button, input, [role="button"] { cursor: none !important; }
.cursor {
position: fixed; top: 0; left: 0; z-index: 10010;
pointer-events: none;
transform: translate(-4px, -2px);
transition: transform var(--t-fast) ease, opacity var(--t-fast);
}
.cursor svg { width: 20px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); transition: transform var(--t-fast) ease; }
.cursor.hover-card svg { transform: scale(1.25); }
.cursor.hover-link svg { transform: scale(1.15); }
/* Zoom state. `.img-zoomable { cursor: zoom-in }` exists but never renders, because the
custom-cursor rule above sets `cursor: none !important` on `*` AND on `[role="button"]` -
which is exactly what the lightbox puts on these images. So the only way to signal
"this enlarges" on a pointer device is through the custom cursor itself. */
.cursor.hover-zoom svg { opacity: 0; }
.cursor.hover-zoom::before {
content: ''; position: absolute; left: -19px; top: -19px;
width: 38px; height: 38px; border-radius: 50%;
border: 1.5px solid var(--text); background: var(--bg);
box-shadow: 0 1px 5px rgba(0,0,0,0.16);
animation: zoomCursorIn var(--t-fast) var(--ease) both;
}
/* The plus sign, both bars drawn as one element with two gradients. */
.cursor.hover-zoom::after {
content: ''; position: absolute; left: -6px; top: -6px;
width: 12px; height: 12px;
background:
linear-gradient(var(--text), var(--text)) center / 12px 2px no-repeat,
linear-gradient(var(--text), var(--text)) center / 2px 12px no-repeat;
animation: zoomCursorIn var(--t-fast) var(--ease) both;
}
@keyframes zoomCursorIn { from { transform: scale(0.7); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.cursor.hover-zoom.clicking::before { transform: scale(0.88); }
.cursor.clicking svg { transform: scale(0.85); }
}
/* Accent word - underline draws in to mark clarity */
.accent-word {
color: var(--accent); transition: color var(--t-slow);
position: relative; display: inline;
}
/* A ruled line, not a drawn one: the word is "clarity", and a hand-drawn scrawl argues the
opposite of the thing the sentence claims. Precision is the point. */
.accent-word::after {
content: ''; position: absolute; left: 0; bottom: 0.04em;
width: 0; height: 2px; background: var(--accent);
transition: width 0.6s var(--ease);
}
.accent-word.revealed::after { width: 100%; }
[data-theme="dark"] .accent-word { text-shadow: 0 0 20px rgba(240,240,240,0.3), 0 0 40px rgba(240,240,240,0.1); }
[data-theme="dark"][data-color="ochre"] .accent-word { text-shadow: 0 0 20px rgba(251,191,36,0.35), 0 0 40px rgba(251,191,36,0.15); }
/* ==================== */
/* GREETING ROTATOR */
/* ==================== */
.greeting {
font-size: 1.15rem; font-weight: 300;
color: var(--accent); letter-spacing: 0.02em;
height: 1.5em; overflow: hidden;
font-style: italic;
transition: opacity var(--t-slow) ease;
}
.greeting.fading { opacity: 0; }
.greeting.typing::after {
content: '|'; font-style: normal; font-weight: 300;
color: var(--accent); margin-left: 1px;
animation: caret 1.15s infinite;
}
/* A real text caret doesn't flash 50/50 - it holds solid while you're reading it, then
blinks quickly. The asymmetric timeline (long hold, fast off-on, short hold) reads as a
cursor rather than a strobing pipe. Kept as steps so it snaps rather than fades. */
@keyframes caret {
0%, 62% { opacity: 1 }
63%, 78% { opacity: 0 }
79%, 100% { opacity: 1 }
}
/* ==================== */
/* KONAMI CONFETTI */
/* ==================== */
.confetti-piece {
position: fixed; width: 8px; height: 8px; z-index: 9998;
pointer-events: none; border-radius: 1px;
animation: confettiFall 1.5s ease-out forwards;
}
@keyframes confettiFall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
/* ==================== */
/* KEYBOARD SHORTCUTS */
/* ==================== */
.shortcuts-overlay {
position: fixed; inset: 0; z-index: 300;
background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; visibility: hidden;
transition: opacity var(--t-base) ease, visibility 0s linear var(--t-base);
}
.shortcuts-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--t-base) ease, visibility 0s; }
.shortcuts-panel {
background: var(--bg); border-radius: 8px; padding: 2rem 2.5rem;
max-width: 380px; width: 90%; border: 1px solid var(--border);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
[data-theme="dark"] .shortcuts-panel { box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.shortcuts-panel-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 1.2rem;
}
.shortcuts-panel h3 {
font-size: 0.82rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.14em; color: var(--text); margin: 0;
}
.shortcut-row {
display: flex; justify-content: space-between; align-items: center;
padding: 0.45rem 0; border-bottom: 1px solid var(--border);
font-size: 0.82rem; font-weight: 300; color: var(--text-body);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-key {
display: inline-block; background: var(--soft); border: 1px solid var(--border);
border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.72rem;
font-weight: 500; font-family: var(--font); color: var(--text); min-width: 1.8rem;
text-align: center;
}
/* Pull quote followed by subsection gets extra breathing room */
.pq + .cs-text { margin-top: calc(var(--gap) * 2.5) !important; }
/* ==================== */
/* READING PROGRESS BAR */
/* ==================== */
.progress-bar {
position: fixed; top: 0; left: 0; height: 2px; z-index: 200;
background: var(--accent); width: 100%;
transform: scaleX(0); transform-origin: 0 50%;
transition: transform 0.05s linear;
pointer-events: none;
}
/* Scroll-driven version: the bar is tied to scroll position by the compositor instead of by a
JS transform written on every rAF. Chromium + Safari today; Firefox has not shipped
scroll-timelines, and there it simply keeps using the JS path (which guards on the same
feature test, so exactly one of the two ever runs). */
@supports (animation-timeline: scroll()) {
.progress-bar {
transition: none;
animation: progressScrub linear both;
animation-timeline: scroll(root block);
}
@keyframes progressScrub { from { transform: scaleX(0) } to { transform: scaleX(1) } }
}
/* ==================== */
/* SCROLL TO TOP */
/* ==================== */
.scroll-top {
position: fixed; bottom: 2rem; right: 2rem; z-index: 150;
width: 36px; height: 36px; border-radius: 50%;
background: var(--soft); border: 1px solid var(--border);
color: var(--text-light); font-size: 0.85rem;
display: flex; align-items: center; justify-content: center;
text-decoration: none; opacity: 0; pointer-events: none;
/* visibility (not just opacity) so the hidden button leaves the tab order - otherwise
keyboard users tab to an invisible "Scroll to top" control. Delayed 0.3s on the way
out so it doesn't cut the fade; same pattern as .a11y-panel. */
visibility: hidden;
transition: opacity var(--t-slow), transform var(--t-slow), background var(--t-base), visibility 0s linear var(--t-slow);
transform: translateY(8px);
}
.scroll-top.visible {
opacity: 1; pointer-events: auto; transform: none; visibility: visible;
transition: opacity var(--t-slow), transform var(--t-slow), background var(--t-base), visibility 0s;
}
.scroll-top.spinning { animation: spinUp 0.5s ease; }
@keyframes spinUp { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (pointer: fine) { .scroll-top { cursor: none !important; } }
/* ==================== */
/* ACCENT COLOR PICKER */
/* ==================== */
.accent-picker {
/* 12px dot + 12px gap = a 24px pitch, so the 24px hit areas below sit edge to edge
instead of overlapping. At 10px they overlapped and neither dot owned a full target. */
display: flex; gap: 12px; align-items: center;
}
.nav-divider {
width: 1px; height: 16px; background: var(--border);
flex-shrink: 0;
}
/* The dot stays 12px visually, but WCAG 2.2 SC 2.5.8 needs a 24x24 target - so ::before
expands the hit area invisibly. Same technique already used on .a11y-toggle. */
.accent-dot::before {
content: ''; position: absolute; inset: -6px; border-radius: 50%;
}
.accent-dot {
width: 12px; height: 12px; border-radius: 50%; border: none;
transition: transform var(--t-base), box-shadow var(--t-base);
background: var(--dot-color); position: relative;
}
@media (hover: none) { .accent-dot:hover { transform: none; } }
.accent-dot.active { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--dot-color); }
.accent-dot::after {
content: attr(aria-label); position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%); white-space: nowrap;
font-size: 0.6rem; font-family: var(--font); font-weight: 400;
color: var(--text-light); letter-spacing: 0.02em;
background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
padding: 0.15rem 0.45rem;
opacity: 0; pointer-events: none; transition: opacity var(--t-base); z-index: 10;
}
@media (pointer: fine) { .accent-dot { cursor: none !important; } }
/* ==================== */
/* NAV - shrinks on scroll*/
/* ==================== */
/* nav is fixed-height chrome, so it declares its own leading here in the base layer - an own
declaration beats any inherited value, so no .a11y-spacing override is needed to protect it. */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); line-height: 1.75; transition: background var(--t-slow), height var(--t-slow), box-shadow var(--t-slow); }
nav .container { display: flex; justify-content: space-between; align-items: center; height: 55px; border-bottom: 1px solid var(--border); transition: height var(--t-slow); }
nav.scrolled .container { height: 46px; }
nav.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
[data-theme="dark"] nav.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.2); }
/* ==================== */
/* PAGE TRANSITIONS */
/* ==================== */
body.fade-out { opacity: 0; }
/* ==================== */
/* NAV LINKS */
/* ==================== */
.nav-name { font-weight: 600; font-size: 0.85rem; text-decoration: none; color: var(--text); letter-spacing: 0.02em; transition: opacity var(--t-base); }
.nav-links { display: flex; gap: 1.8rem; align-items: center; flex-shrink: 0; }
.nav-links a {
font-size: 0.78rem; font-weight: 400; color: var(--text-light);
text-decoration: none; letter-spacing: 0.01em;
position: relative; transition: color var(--t-base), transform var(--t-base) ease-out;
display: inline-block;
}
.nav-links a::after {
content: ''; position: absolute; left: 50%; bottom: -2px;
width: 0; height: 1px; background: var(--text);
transition: width var(--t-slow) ease, left var(--t-slow) ease;
}
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { width: 100%; left: 0; }
/* Dark toggle */
.shortcuts-btn {
background: none; border: 1px solid var(--border); border-radius: 50%;
width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center;
justify-content: center; color: var(--text-light); transition: color var(--t-base), border-color var(--t-base);
font-size: 0.75rem; font-weight: 500; font-family: var(--font); line-height: 1; padding: 0;
}
.theme-toggle {
background: none; border: 1px solid var(--border); border-radius: 50%;
width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center;
justify-content: center; color: var(--text-light); transition: color var(--t-base), border-color var(--t-base);
font-size: 0.8rem; line-height: 1; padding: 0;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* ==================== */
/* HERO - full viewport */
/* ==================== */
.hero-full {
min-height: 100vh; min-height: 100dvh;
/* `align-items: stretch` (not center) so .container owns the full height and can lay
the headline and the scroll hint out in flow. */
display: flex; align-items: stretch;
position: relative; overflow: hidden;
padding-top: calc(55px + 1rem);
padding-bottom: 2rem;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* The scroll hint used to be absolutely positioned with a padding-bottom on the hero
guessing at its height. On a short viewport with Larger text the headline grew past
that guess and ran straight through the mouse icon. Laying both out in one column
makes the collision structurally impossible instead of numerically unlikely: the
headline's auto margins centre it in whatever space is left above the hint. */
.hero-full .container {
text-align: center;
display: flex; flex-direction: column; min-width: 0;
}
.hero-full .hero-inner { margin: auto; }
/* The hero column is narrower than the site's 820px so the headline fills its box instead of
leaving a hole on the right. Measured at 1440px: the longest line filled 78% of an 820px box
(165px dead space) and 96% of a 680px one (25px). Same at 1600/1920; 1100 improves too.
1280 and 900 each gain a line in exchange. Below 680px viewport this is inert, so mobile is
untouched. Verified: 132 samples across 3 engines x 11 widths x 4 a11y modes, no overflow and
no collision with the scroll indicator. */
.hero-full .container { max-width: 680px; }
/* Constellation - living network of drifting connected dots */
.dot-field {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
overflow: hidden;
}
.dot-field canvas { display: block; }
.dot-field i {
position: absolute; width: 4px; height: 4px;
background: var(--accent); border-radius: 50%;
opacity: 0.5; left: 0; top: 0;
will-change: transform;
}
.hero-inner {
position: relative; z-index: 2; display: inline-block; text-align: left;
will-change: transform, opacity;
}
/* Greeting */
.hero-full .greeting {
font-size: clamp(0.9rem, 1.5vw, 1.15rem);
margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
display: block;
}
/* Headline */
.hero-full h1 {
font-size: clamp(2.4rem, 5.5vw, 5rem);
line-height: 1.18; letter-spacing: -0.035em;
margin-bottom: 0;
animation: fadeUp 0.6s ease both;
}
/* Scroll hint - hero version (absolute) */
.hero-full .scroll-hint {
/* In flow at the end of the hero column - see the note on .hero-full .container. */
position: relative; z-index: 2; flex: none;
margin: 0 auto; padding-top: 1rem;
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
/* Persistent scroll hint - subtle chevron between snap sections */
.scroll-persist {
position: fixed; bottom: 1.2rem; left: 50%;
transform: translateX(-50%); z-index: 90;
opacity: 0; transition: opacity 0.5s;
pointer-events: none;
}
.scroll-persist.visible { opacity: 0.4; }
.scroll-persist svg {
width: 26px; height: 14px;
stroke: var(--accent); stroke-width: 1.5;
fill: none; stroke-linecap: round; stroke-linejoin: round;
animation: chevronBob 2s ease-in-out infinite;
}
@keyframes chevronBob {
0%,100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(5px); opacity: 0.8; }
}
.scroll-mouse {
width: 22px; height: 34px;
border: 1.5px solid var(--text-light);
border-radius: 11px; opacity: 0.3;
position: relative;
}
.scroll-mouse::after {
content: ''; display: block; width: 2.5px; height: 6px;
background: var(--accent); border-radius: 2px;
position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.8; }
50% { transform: translateX(-50%) translateY(10px); opacity: 0.2; }
}
.scroll-label {
font-size: 0.55rem; font-weight: 500; text-transform: uppercase;
letter-spacing: 0.18em; color: var(--text-light);
/* Was opacity:0.3, which sampled at 1.53:1 in light and 1.55:1 in dark off actual
rendered pixels. axe and Lighthouse both read this as 5.2:1 because neither factors
opacity into contrast. var(--text-light) is already muted enough on its own. */
}
/* ==================== */
/* INTRO - full viewport */
/* ==================== */
.intro-full {
min-height: 100vh; min-height: 100dvh;
display: flex; align-items: center;
position: relative;
scroll-snap-align: start;
scroll-snap-stop: always;
padding-top: 55px;
}
.intro-inner { max-width: 620px; }
.intro-text {
font-size: 1.35rem; color: var(--text-light); font-weight: 300;
line-height: 1.7; margin-bottom: 2rem;
opacity: 0; transform: translateY(24px);
transition: opacity 0.8s ease, transform 0.8s ease, color 1.2s ease;
}
.intro-text.visible { opacity: 1; transform: none; color: var(--text-body); }
.intro-line {
width: 40px; height: 1px; background: var(--accent);
transform: scaleX(0); transform-origin: left;
transition: transform 0.6s ease var(--t-slow);
}
.intro-text.visible + .intro-line { transform: scaleX(1); }
/* Entrance */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==================== */
/* PROJECT CARDS */
/* ==================== */
.projects { counter-reset: project; }
.projects > .container > h2 {
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
color: var(--text); margin-bottom: var(--gap-section);
}
.project-card {
perspective: 900px;
display: flex; flex-direction: column; justify-content: center;
text-decoration: none; color: var(--text);
counter-increment: project; position: relative;
min-height: 100vh; min-height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: hidden;
padding-top: 55px;
box-sizing: border-box;
}
.project-card:last-child { margin-bottom: 0; }
.project-card .card-img {
width: 100%; border-radius: 5px; transform-origin: center center;
opacity: 0; transition: opacity var(--t-slower) ease, transform 0.6s ease, filter 0.6s ease;
will-change: transform;
}
.project-card .card-img.blur-load { filter: blur(8px); transform: scale(1.02); }
.project-card .card-img.loaded { opacity: 1; filter: blur(0); transform: scale(1); }
.project-card .card-tags {
font-size: 0.78rem; font-weight: 400; color: var(--text-light);
margin-top: 0.2rem; margin-bottom: 0.5rem; letter-spacing: 0.01em;
}
.project-card .card-tags::before {
content: counter(project, decimal-leading-zero) " – ";
font-weight: 500; font-variant-numeric: tabular-nums;
}
.project-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; margin-top: 1.2rem; margin-bottom: 0.15rem; transition: letter-spacing var(--t-slow); }
.project-card .card-desc { color: var(--text-body); font-size: var(--text-card); font-weight: 300; margin-bottom: 0.8rem; line-height: var(--lh-card); }
.project-card .card-cta {
font-size: 0.78rem; font-weight: 600; color: var(--text);
text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em;
display: inline-flex; align-items: center; gap: 0.4rem;
transition: gap var(--t-slow) ease;
}
.project-card .card-cta .cta-text {
position: relative;
}
.project-card .card-cta .cta-text::after {
content: ''; position: absolute; left: 0; bottom: -2px;
width: 0; height: 1px; background: var(--accent);
transition: width var(--t-slower) ease;
}
/* ==================== */
/* 16:9 MEDIA FRAME */
/* ==================== */
.project-media {
width: 100%; aspect-ratio: 16 / 9;
display: flex; align-items: center; justify-content: center;
overflow: hidden; background: transparent; border-radius: 5px;
}
.project-media img {
width: 100%; height: 100%;
object-fit: contain; object-position: center center;
display: block; opacity: 0; transition: opacity var(--t-slower) ease;
}
.project-media img.blur-load { filter: blur(8px); transform: scale(1.02); }
.project-media img.loaded { opacity: 1; filter: blur(0); transform: none; }
/* The eager hero is the LCP element: never gate it behind JS. It is the first
thing on screen, so there is nothing for it to fade in from. */
.project-media img[fetchpriority="high"] { opacity: 1; filter: none; }
.project-media img[fetchpriority="high"].blur-load { filter: none; transform: none; }
.project-media.shift-lofi img { transform: translate(-1.2%, -3.6%); }
.project-media.shift-olympic-hero img { transform: translate(-0.25%, -11.6%); }
.project-media.shift-parent-hero img { transform: translate(-1.2%, -12.4%); }
.project-media.photo img { object-fit: cover; }
.project-media.padded { padding: 1rem; border-radius: 6px; }
/* ==================== */
/* CASE STUDY HERO */
/* ==================== */
.case-hero { padding: 100px 0 0; }
.case-hero h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.06; margin-bottom: 0.6rem; font-size: 2.6rem; animation: fadeUp 0.5s ease both; }
.case-hero .case-desc { font-size: var(--text-read); color: var(--text-body); font-weight: 300; margin-bottom: 0.5rem; line-height: var(--lh-read); animation: fadeUp 0.5s ease 0.1s both; }
.reading-time { font-size: 0.75rem; font-weight: 500; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--gap); }
/* Deep-link section headings: hover to reveal, click to copy a link */
.h-anchor {
display: inline-block; margin-left: 0.35em; font-weight: 400; text-decoration: none;
color: var(--text-light); opacity: 0; transform: translateX(-4px);
transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease), color var(--t-base) ease;
}
/* Keyboard focus must reveal this on ANY device. The reveal used to live only inside
(hover: hover) and (pointer: fine); a touchscreen laptop matches neither that nor the
(hover: none) hide rule, so the anchor stayed invisible while still being tabbable. */
.h-anchor:focus-visible { opacity: 1 !important; }
.h-anchor.copied { opacity: 1; color: var(--accent); }
.h-anchor.copied::after {
content: " link copied"; font-size: 0.55em; letter-spacing: 0.1em;
text-transform: uppercase; vertical-align: middle;
}
/* The # is a hover-to-reveal copy-link affordance; on touch there is no hover so it sat there
permanently at 40% beside every heading. Removed on touch. */
@media (hover: none) { .h-anchor { display: none; } }
@media (prefers-reduced-motion: reduce) { .h-anchor { transition: color var(--t-base) ease; transform: none; } }
/* 2026 typography: balanced headings, orphan-free paragraphs. Degrades to normal wrapping. */
h1, h2, h3, h4, .case-desc { text-wrap: balance; }
p, li, figcaption, .about-bio { text-wrap: pretty; }
/* Fixed 2-column grid, NOT flex-wrap. With flex-wrap the number of columns depended on how long
each value happened to be, so Olympic Eats (short values) rendered Role/Outcome side by side
while Biodiversity (long values) stacked all four - the same component looking different on
every case study. A grid makes it identical everywhere regardless of content. */
.case-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.4rem 3rem;
padding: 1.1rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.meta-item .meta-label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light); margin-bottom: 0.1rem; }
.meta-item p { font-size: 0.875rem; color: var(--text-body); font-weight: 300; margin: 0; }
/* ==================== */
/* SECTIONS + UNIFORM */
/* ==================== */
.cs { padding: var(--gap-section) 0; }
.cs .container > * + * { margin-top: var(--gap); }
/* Neutralise trailing margins on block components (bio-sl, ba-list, timelines,
figures) so every section's bottom whitespace is just its padding — keeps
section-to-section spacing uniform regardless of what a section ends with. */
.cs .container > *:last-child,
.cs .container > *:last-child > *:last-child { margin-bottom: 0 !important; }
.cs .container > h2 {
margin-top: 0;
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: -0.01em;
line-height: 1.2;
}
/* Extra breathing room before chapter headings when following content */
.cs .container > * + h2 { margin-top: calc(var(--gap) * 4.5); }
.cs .container > h2 + * { margin-top: 0; }
/* Process subsection dividers */
.cs-text h3 { margin-top: calc(var(--gap) * 1.5); padding-top: calc(var(--gap) * 0.8); border-top: 1px solid var(--border); }
.cs-text h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
/* Stats */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-item { text-align: left; }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--text); display: block; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-desc { font-size: var(--text-caption); color: var(--text-light); font-weight: 300; max-width: 200px; margin-top: 0.15rem; line-height: var(--lh-caption); }
/* ==================== */
/* HIGHLIGHT BOXES */
/* ==================== */
/* No explicit grid-template-rows: each box spans 2 implicit rows, so the track count
follows however many boxes there are. Declaring `auto auto` only made room for one row of
boxes, which left .cols-2 (4 boxes, 2 rows) ragged and unequal in height - measured. */
.highlight-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--gap); }
.highlight-box {
display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; gap: 0.2rem;
background: var(--soft); padding: 1.1rem; border-radius: 4px;
border-left: 2px solid transparent;
transition: border-color var(--t-slow) ease;
}
.highlight-box h3 { font-size: 0.9375rem; margin-bottom: 0; font-weight: 600; align-self: start; }
.highlight-box p { font-size: var(--text-caption); color: var(--text-body); margin: 0; line-height: 1.6; font-weight: 300; }
/* ==================== */
/* PULL QUOTE - editorial*/
/* ==================== */
.pq {
font-size: var(--text-quote); font-weight: 400; font-style: italic;
line-height: var(--lh-quote); color: var(--text); padding: 0 0 0 1.25rem;
border-left: 2px solid var(--accent);
}
/* ==================== */
/* FEATURE BLOCKS */
/* ==================== */
.feat + .feat { margin-top: calc(var(--gap) * 1.3); }
.feat h3 { font-size: 1rem; margin-bottom: 0.25rem; font-weight: 600; }
.feat p { font-size: 1rem; font-weight: 300; line-height: 1.7; }
.feat .project-media { margin-top: 0.5rem; }
/* ==================== */
/* FINDINGS LIST */
/* ==================== */
.find-list { list-style: none; padding: 0; }
.find-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; font-weight: 300; line-height: var(--lh-list); }
.find-list li strong { font-weight: 500; }
.find-list li:last-child { border-bottom: none; }
/* SUS */
.sus { display: inline-flex; align-items: center; gap: 1rem; padding: 1.1rem 1.6rem; background: var(--soft); border-radius: 4px; }
.sus-num { font-size: 2.6rem; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sus-text { font-size: 0.875rem; color: var(--text-light); line-height: 1.5; font-weight: 300; }
/* ==================== */
/* NEXT PROJECT */
/* ==================== */
.next { padding: var(--gap-section) 0; border-top: 1px solid var(--border); }
.next .next-label { font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light); margin-bottom: 0.2rem; }
.next a {
font-size: 1.05rem; font-weight: 600; text-decoration: none;
color: var(--text); letter-spacing: -0.01em;
display: inline-flex; align-items: center; gap: 0.3rem;
transition: gap var(--t-slow) ease;
}
/* ==================== */
/* ABOUT */
/* ==================== */
.about { padding: 0 0 calc(var(--gap-section) * 2); padding-top: calc(55px + 5rem); background: var(--bg); position: relative; z-index: 1; scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
.about::before {
content: ''; display: block; position: absolute;
top: calc(55px + 1rem); left: 50%;
transform: translateX(-50%);
width: min(calc(100% - 4rem), var(--max-w));
height: 1px; background: var(--border);
}
.about .container > * + * { margin-top: var(--gap); }
.about .container > h2 + * { margin-top: 0; }
.about-bio { font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 300; line-height: 1.65; color: var(--text-body); margin-bottom: 0; margin-top: 0; }
.about-bio strong { font-weight: 500; color: var(--text); }
/* About intro: bio + education side-by-side on desktop */
.about-intro {
display: flex;
align-items: flex-start;
gap: calc(var(--gap) * 4);
margin-bottom: calc(var(--gap) * 3);
}
.about-bio {
flex: 3;
min-width: 0;
align-self: center;
}
.edu {
flex: 2;
min-width: 0;
}
/* About section title */
.about .container > h2:first-child {
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: -0.01em;
line-height: 1.2;
margin-bottom: var(--gap);
}
.skill-grid {
/* Three horizontal BANDS, not three vertical columns. The groups hold 10 / 10 / 6 items;
in a fixed 3-column grid that always reads as one short column. As bands, a different
count per row is just a different line length. */
display: block; gap: 0;
border-top: 1px solid var(--border);
padding-top: calc(var(--gap) * 2.5);
margin-top: 0;
}
.skill-col {
min-width: 0; display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
grid-template-rows: auto 1fr;
column-gap: calc(var(--gap) * 2); row-gap: 0.35rem;
align-items: start;
padding: calc(var(--gap) * 1.5) 0;
border-right: none; border-bottom: 1px solid var(--border);
}
.skill-col h3 { grid-column: 1; grid-row: 1; }
.skill-col .skill-desc { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.skill-col ul { grid-column: 2; grid-row: 1 / span 2; }
.skill-col:last-child { border-bottom: none; }
.skill-col:first-child { padding-top: calc(var(--gap) * 0.75); }
.skill-col:last-child { border-right: none; padding-right: 0; }
/* Children align to top of their row - don't stretch */
.skill-col h2,
.skill-desc,
.skill-col ul { min-width: 0; max-width: 100%; align-self: start; }
.skill-col h2 {
font-size: 1.25rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--text);
margin-bottom: 0.75rem;
line-height: 1.3;
align-self: start;
}
.skill-desc { font-size: 0.8rem; color: var(--text-light); font-weight: 300; font-style: italic; line-height: 1.65; margin-bottom: 1rem; }
.skill-col ul { list-style: none; padding-top: 0.2rem; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; }
.skill-col li {
/* Pills restored. Without a container the entries lost their boundaries and a horizontal
run read as one long sentence - harder to scan, worse under magnification, and it gave
each label no discernible extent. The BAND layout (not the pill) is what fixes the
10/10/6 imbalance, and a full-width band is wide enough that a whole label always fits,
which is what broke when these sat in a 217px column. */
display: inline-block; white-space: nowrap; max-width: 100%;
font-size: 0.8rem; color: var(--text-body); font-weight: 400; line-height: 1.2;
padding: 0.45rem 0.75rem;
background: var(--soft); border-radius: 4px;
border: 1px solid transparent;
transition: color var(--t-base) ease, border-color var(--t-base) ease, background var(--t-base) ease;
}
@media (prefers-reduced-motion: reduce) { .skill-col li:hover { color: var(--text); border-color: var(--border); } }
.edu {
background: var(--soft);
border: 1px solid var(--border);
border-radius: 12px;
padding: calc(var(--gap) * 1.4) calc(var(--gap) * 1.5);
}
.edu p { font-size: 0.9rem; color: var(--text-body); font-weight: 300; line-height: 1.6; }
/* Education heading */
.edu h2 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
text-transform: none;
letter-spacing: 0;
margin-top: 0;
margin-bottom: calc(var(--gap) * 0.75);
}
/* CV download link */
.cv-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: calc(var(--gap) * 1.5);
font-size: 0.74rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: 999px;
padding: 0.55rem 1.05rem;
transition: border-color var(--t-base) var(--ease), color var(--t-base), transform var(--t-base) var(--ease);
}
.cv-link:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .cv-link:hover, .cv-link:active { transform: none; } }
/* ==================== */
/* CONTACT */
/* ==================== */
.contact { text-align: center; scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; min-height: 100dvh; padding: 55px 0 0; box-sizing: border-box; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.contact h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; font-family: var(--font-display);
letter-spacing: -0.03em; text-transform: none; color: var(--text); margin-bottom: 0.8rem; }
.contact p { font-size: 1rem; color: var(--text-body); font-weight: 300; margin-bottom: 1.2rem; }
.contact a {
font-size: 0.82rem; font-weight: 600; color: var(--text);
text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase;
position: relative; padding-bottom: 3px;
transition: color var(--t-base);
}
.contact a::after {
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 1px; background: var(--accent);
transform: scaleX(0); transform-origin: right;
transition: transform var(--t-slower) ease;
}
/* The email address is the conversion point of the whole site, so it carries the type
weight in this section - the "Get in touch" heading above it is only a label. It was
inheriting .contact a at 0.82rem uppercase, which made it SMALLER than the body copy
directly above it and inverted the section's hierarchy.
This is the element's own designed type declared in the base layer - not a value
restated in an override layer, which is the pattern that caused the reading-guide bug. */
/* PRIMARY CTA — a real button, not display type with an arrow after it.
40px text with a trailing glyph read as a headline, not something pressable. This is the
filled counterpart to .cv-link's outlined pill, which gives the page an explicit hierarchy:
filled = the one action, outlined = the secondary one (download CV). Same radius and the same
uppercase/tracking treatment, so it belongs to the existing system rather than importing a
new one. */
.contact .email-link {
display: inline-flex; align-items: center; gap: 0.55rem;
font-family: var(--font); font-size: 0.82rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--bg); background: var(--accent);
border: 1.5px solid var(--accent); border-radius: 999px;
padding: 0.95rem 1.9rem; min-height: 48px; box-sizing: border-box;
text-decoration: none; padding-bottom: 0.95rem;
transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
/* The animated underline belongs to text links, not to a filled button. */
.contact .email-link::after { content: none; }
.contact .email-link .email-arrow { transition: transform var(--t-base) var(--ease); }
@media (hover: hover) and (pointer: fine) {
.contact .email-link:hover {
background: var(--bg); color: var(--text);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.contact .email-link:hover .email-arrow { transform: translateX(0.22em); }
}
.contact .email-link:active { transform: translateY(0) scale(0.985); }
@media (prefers-reduced-motion: reduce) {
.contact .email-link, .contact .email-link:hover, .contact .email-link:active { transform: none; }
}
.a11y-motion .contact .email-link,
.a11y-motion .contact .email-link:hover,
.a11y-motion .contact .email-link:active { transform: none !important; }
/* Underline-links mode must not draw a rule through a filled button. */
.a11y-links .contact .email-link { text-decoration: none !important; }
/* Hover the sign-off and a small peace sign appears. Hover-only (never on touch, where it
would either never fire or stick), and it animates in only when motion is allowed. */
footer .sign-off { position: relative; }
@media (hover: hover) and (pointer: fine) {
footer .sign-off::after {
content: ' \270C\FE0F';
/* Absolutely positioned so the hidden glyph takes NO layout width - otherwise it padded the
line and visibly knocked the centred footer text off-centre on mobile. */
position: absolute; left: 100%; top: 0; white-space: nowrap;
opacity: 0; margin-left: 0.15em;
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
display: inline-block; transform: translateY(2px) scale(0.85);
}
footer .sign-off:hover::after { opacity: 1; transform: translateY(0) scale(1); }
}
.a11y-motion footer .sign-off::after { transition: none !important; }
/* ==================== */
/* FOOTER */
/* ==================== */
/* Keep the node field alive around the CTA, but fade it out before the footer so
the small footer text stays clean and readable. */
.contact .dot-field {
-webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 80%);
mask-image: linear-gradient(to bottom, #000 52%, transparent 80%);
}
.contact > .container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; }
.contact > footer { margin-top: auto; width: 100%; align-self: stretch; position: relative; z-index: 2; }
footer { padding: 1.5rem 0; border-top: 1px solid var(--border); }
footer .container { display: flex; justify-content: space-between; align-items: center; }
/* `footer .container p`, NOT `footer p`: on index the