/*
Theme Name: Paul Ormandy 2026
Author: Paul Ormandy
Description: Custom portfolio theme for Paul Ormandy.
Version: 1.0.0
Text Domain: paulormandy26
*/

:root { --paper: #f4f1ea; --ink: #171714; --muted: #77766e; --line: #cbc8bf; --acid: #d8f24a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; }
.site-shell { overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: 0.8rem 1rem; color: white; background: var(--ink); }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid #4763ff; outline-offset: 4px; }
::selection { color: var(--ink); background: var(--acid); }
.site-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 3vw; border-bottom: 1px solid var(--line); }
.wordmark { position: relative; isolation: isolate; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.04em; }
.wordmark span { font-size: inherit; font-style: normal; font-weight: 400; }
/* Wordmark highlight: the hero's acid marker, wiping in from the left behind the text on hover (hover-capable devices
   only) or keyboard focus, and clearing towards the right. The layer hugs the capitals; nothing about the text moves.
   The easing is power3.out, as the hero highlights use; 280ms keeps it quicker than their reading pace. */
.wordmark::before { position: absolute; inset: 0.12em -0.3em 0.12em -0.3em; z-index: -1; background: var(--acid); content: ""; transform: scaleX(0); transform-origin: right center; transition: transform 280ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.wordmark:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) { .wordmark:hover::before { transform: scaleX(1); transform-origin: left center; } }
@media (prefers-reduced-motion: reduce) { .wordmark::before { transition: none; } }
.nav { display: flex; gap: clamp(1.5rem, 3vw, 3.5rem); font-family: "DM Mono", monospace; font-size: 0.72rem; letter-spacing: 0.035em; text-transform: uppercase; }
.nav a, .footer-links a { position: relative; }
.nav a::after, .footer-links a::after { position: absolute; right: 100%; bottom: -0.35rem; left: 0; height: 1px; background: currentColor; content: ""; transition: right 220ms ease; }
.nav a:hover::after, .footer-links a:hover::after { right: 0; }
.menu-button { display: none; border: 0; color: var(--ink); background: transparent; font-family: "DM Mono", monospace; font-size: 0.7rem; letter-spacing: 0.035em; text-transform: uppercase; }
.hero { container-type: inline-size; min-height: calc(100vh - 88px); display: grid; grid-template-rows: auto 1fr auto; padding: 2rem 3vw 3vw; }
.hero-kicker, .section-label { font-family: "DM Mono", monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.hero-kicker span::before { margin: 0 0.7rem; color: var(--muted); content: "/"; }
.hero h1 { align-self: center; display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-size: clamp(3.6rem, 94vw / 11.9, 10.5rem); font-size: clamp(3.6rem, 100cqi / 11.9, 10.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.82; white-space: nowrap; }
.hero-plus { color: var(--muted); font-size: 0.34em; font-weight: 400; }
/* Optical kern: the T's crossbar overhang leaves open space beneath it, so nudge the "+" before "Technical" into it. Visual only; layout is unchanged. */
.hero-plus:nth-child(2) { translate: 0.29em 0; }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; }
.hero-bottom > p { max-width: 560px; margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.8rem, 3vw, 3.2rem); letter-spacing: -0.035em; line-height: 1.1; }
.hero-actions { display: flex; align-items: center; gap: 2rem; }
.button { display: inline-flex; align-items: center; gap: 2rem; padding: 1rem 1.2rem; font-family: "DM Mono", monospace; font-size: 0.7rem; letter-spacing: 0.035em; text-transform: uppercase; }
.button-dark { color: white; background: var(--ink); transition: color 180ms ease, background 180ms ease; }
.button-dark:hover { color: var(--ink); background: var(--acid); }
.text-link { display: inline-flex; align-items: center; gap: 0.55rem; padding-bottom: 0.25rem; border-bottom: 1px solid currentColor; font-family: "DM Mono", monospace; font-size: 0.7rem; letter-spacing: 0.035em; text-transform: uppercase; }
.text-link span, .footer-links span { display: inline-block; transition: transform 180ms ease; }
.text-link:hover span, .footer-links a:hover span { transform: translate(3px, -3px); }
.section-pad { padding: clamp(5rem, 11vw, 10rem) 3vw; }
.statement { color: white; background: var(--ink); }
.statement-lead { max-width: 1180px; margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(2.4rem, 5.2vw, 6rem); letter-spacing: -0.045em; line-height: 1.2; }
.proof-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: clamp(5rem, 10vw, 10rem) 0 0; border-top: 1px solid #45453f; }
.proof-line div { padding-top: 1rem; }
.proof-line dt { font-size: clamp(2rem, 3vw, 3.5rem); letter-spacing: -0.06em; }
.proof-line dd { margin: 0.25rem 0 0; color: #aaa99f; font-family: "DM Mono", monospace; font-size: 0.64rem; letter-spacing: 0.035em; text-transform: uppercase; }
.section-heading, .intersection-intro, .home-about { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 3vw; }
.section-heading h2, .intersection-intro h2, .home-about h2, .section-heading h1, .intersection-intro h1, .home-about h1 { margin: 0; font-size: clamp(3.1rem, 7vw, 8rem); font-weight: 600; letter-spacing: -0.07em; line-height: 0.9; }
em { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; }
.project-list { margin-top: clamp(4rem, 8vw, 8rem); }
.project-row { display: grid; grid-template-columns: 1.85fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: clamp(3rem, 7vw, 7rem) 0; border-top: 1px solid var(--line); }
.project-row:nth-child(even) { grid-template-columns: 1fr 1.85fr; }
.project-row:nth-child(even) .project-media-link { order: 2; }
.project-media-link { display: block; }
.project-visual { padding: 1rem; color: var(--ink); background: var(--project-accent); }
.project-media-link .project-visual { transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.project-media-link:hover .project-visual { transform: scale(0.985); }
.visual-toolbar { display: flex; justify-content: space-between; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(23, 23, 20, 0.35); font-family: "DM Mono", monospace; font-size: 0.6rem; letter-spacing: 0.035em; text-transform: uppercase; }
.visual-canvas { min-height: 35vw; display: flex; flex-direction: column; justify-content: space-between; margin: 1rem 0; padding: clamp(1.5rem, 4vw, 4rem); background: rgba(244, 241, 234, 0.82); }
.visual-compact .visual-canvas { min-height: 30vw; }
.visual-title { max-width: 80%; font-size: clamp(2.2rem, 5vw, 6rem); letter-spacing: -0.055em; line-height: 0.85; }
.visual-interface { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.5rem; height: 28%; }
.visual-interface span { border: 1px solid rgba(23, 23, 20, 0.4); background: rgba(255, 255, 255, 0.24); }
.project-visual > p { margin: 0; font-family: "DM Mono", monospace; font-size: 0.56rem; letter-spacing: 0.035em; text-transform: uppercase; }
.project-meta { display: flex; justify-content: space-between; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); font-family: "DM Mono", monospace; font-size: 0.62rem; letter-spacing: 0.035em; text-transform: uppercase; }
.project-summary h3 { margin: 1.5rem 0; font-size: clamp(2.4rem, 4.3vw, 5.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; }
.project-summary > p { max-width: 38rem; margin: 0; color: #51514b; font-size: 0.92rem; line-height: 1.65; }
.discipline-list { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 2rem 0 1rem; padding: 0; list-style: none; font-family: "DM Mono", monospace; font-size: 0.59rem; letter-spacing: 0.035em; text-transform: uppercase; }
.discipline-list li::before { margin-right: 0.45rem; content: "-"; }
.project-role { margin-top: 0.5rem !important; color: var(--ink) !important; font-family: "DM Mono", monospace; font-size: 0.64rem !important; letter-spacing: 0.035em; text-transform: uppercase; }
.intersection { position: relative; color: white; background: var(--ink); }
.intersection-intro { grid-template-columns: auto 1fr; }
.intersection-intro p { align-self: end; max-width: 520px; margin: 0; color: #aaa99f; line-height: 1.7; }
.venn { position: relative; container-type: inline-size; width: min(100%, 590px); aspect-ratio: 302 / 288.6; margin: clamp(4.5rem, 8vw, 7.5rem) auto; }
.venn-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.venn-lines circle { fill: none; stroke: #a3a197; stroke-width: 1; vector-effect: non-scaling-stroke; }
.venn-lines .venn-core { fill: var(--acid); fill-opacity: 0.1; stroke: none; }
.venn-label, .venn-result { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
.venn-label { color: var(--paper); font-family: "DM Mono", monospace; font-size: clamp(0.72rem, 2.5cqi, 0.95rem); letter-spacing: 0.06em; text-transform: uppercase; }
.venn-creative { top: 27.2%; left: 20.5%; }
.venn-technical { top: 27.2%; left: 79.5%; }
.venn-delivery { top: 80.6%; left: 50%; }
.venn-result { top: 43.7%; left: 50%; color: var(--acid); font-family: "Source Serif 4", Georgia, serif; font-size: 8.5cqi; font-style: italic; font-weight: 400; letter-spacing: -0.02em; line-height: 0.85; text-align: center; }
.discipline-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; border-top: 1px solid #45453f; }
.discipline-columns > div { padding-top: 1.3rem; }
.discipline-columns h3 { margin: 0 0 1.5rem; font-size: 1.65rem; font-weight: 500; }
.discipline-columns ul { margin: 0; padding: 0; color: #aaa99f; list-style: none; line-height: 1.8; }
.working-line { margin: clamp(6rem, 10vw, 10rem) 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(2rem, 5vw, 5.5rem); letter-spacing: -0.055em; line-height: 1.02; text-align: center; }
.home-about > div:last-child { max-width: 1100px; }
.home-about p { max-width: 720px; margin: 3rem 0; color: #55554f; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.65; }
.site-footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3vw; padding: 5rem 3vw 2rem; color: white; background: var(--ink); }
.footer-name { font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 600; letter-spacing: -0.05em; }
.site-footer > p { margin: 0; color: #aaa99f; font-size: 0.78rem; line-height: 1.7; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; font-family: "DM Mono", monospace; font-size: 0.7rem; letter-spacing: 0.035em; text-transform: uppercase; }
.footer-links a { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer .copyright { grid-column: 1 / -1; margin-top: 6rem; padding-top: 1rem; border-top: 1px solid #45453f; font-family: "DM Mono", monospace; font-size: 0.58rem; letter-spacing: 0.035em; text-transform: uppercase; }
/* Pages. */
.page-intro { max-width: 720px; margin: 2rem 0 0; color: #55554f; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.65; }
.page-body { max-width: 720px; }
.page-body h1 { margin: 0 0 2rem; font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; }
.project-card-media img, .project-card-media video { display: block; width: 100%; height: auto; }
.experience-period, .case-study figcaption, .case-credits dt { font-family: "DM Mono", monospace; font-size: 0.8125rem; letter-spacing: 0.02em; }
.case-credits dd { margin: 0.35rem 0 0; }
.experience { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; column-gap: 3vw; }
.experience > .section-heading { grid-column: 1 / -1; }
.experience-list { grid-column: 2; max-width: 720px; margin: clamp(3rem, 6vw, 6rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.experience-list li { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.experience-list h3 { margin: 0.5rem 0; font-size: 1.65rem; font-weight: 500; }
.experience-list p { max-width: 720px; margin: 0.25rem 0 0; color: #55554f; }
/* Project case studies: an editorial opening, the lead media, narrative modules, then the next project. */
.case-header { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; column-gap: 3vw; padding: clamp(1.75rem, 3vw, 2.5rem) 3vw clamp(3.5rem, 7vw, 6.5rem); }
.case-header-top { display: flex; grid-column: 1 / -1; justify-content: space-between; align-items: center; font-family: "DM Mono", monospace; font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: uppercase; }
.case-back { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.case-back span { transition: transform 180ms ease; }
.case-back:hover span { transform: translateX(-3px); }
.case-number { color: #55554f; }
.case-header > *, .case-intro > * { min-width: 0; }
.case-header h1, .case-next-title { overflow-wrap: anywhere; }
.case-header h1 { grid-column: 1 / -1; max-width: 16ch; margin: clamp(2.5rem, 6vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem); font-size: clamp(3rem, 2.2rem + 6vw, 9.5rem); font-weight: 600; letter-spacing: -0.07em; line-height: 0.9; }
.case-intro { display: grid; grid-column: 2; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3vw; align-items: start; }
.case-lede { max-width: 34rem; margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.18; }
.case-facts { margin: 0; border-top: 1px solid var(--ink); }
.case-facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.case-facts dt { color: #55554f; font-family: "DM Mono", monospace; font-size: 0.8125rem; letter-spacing: 0.02em; }
.case-facts dd { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.case-facts .case-roles { font-family: "DM Mono", monospace; font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: uppercase; }
.case-lead-media { padding: 0 3vw; }
.case-lead-media .visual-canvas { min-height: min(32vw, 540px); }
.case-study { display: grid; gap: clamp(5rem, 10vw, 9rem); padding: clamp(5.5rem, 11vw, 10rem) 3vw clamp(5rem, 10vw, 9rem); }
.case-study figure { margin: 0; }
.case-study img, .case-study video { display: block; width: 100%; height: auto; }
.case-study figcaption { margin-top: 0.7rem; color: #55554f; }
.case-text, .case-contribution, .case-credits, .case-format-board { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 3vw; }
h2.section-label { margin: 0; }
.case .section-label { font-size: 0.8125rem; }
.case-text h2:not(.section-label), .case-text-media h2 { max-width: 20ch; margin: 0 0 1.5rem; font-size: clamp(2rem, 1.3rem + 2.4vw, 4rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.98; }
.case-body { max-width: 40rem; color: #4f4f49; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.7; }
.case-body p { margin: 0 0 1em; }
.case-body p:last-child { margin-bottom: 0; }
/* Lists read as a scope of work: large, ruled, typographic. */
.case-body ul { max-width: 44rem; margin: 1.75rem 0 0; padding: 0; border-bottom: 1px solid var(--line); list-style: none; }
.case-body li { padding: 0.7rem 0; border-top: 1px solid var(--line); color: var(--ink); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.9rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.2; }
/* Consecutive text sections read as one sequence of chapters. */
.case-text + .case-text { margin-top: calc(clamp(2.5rem, 4vw, 4rem) - clamp(5rem, 10vw, 9rem)); padding-top: clamp(2.5rem, 4vw, 4rem); border-top: 1px solid var(--line); }
/* Contribution: the evidence behind Design · Build · Lead, set as a dark band like the homepage's How I work. */
.case-contribution { margin: 0 -3vw; padding: clamp(4rem, 8vw, 7rem) 3vw; color: white; background: var(--ink); }
/* When the dark band closes the case study, the next project follows it directly. */
.case-study:has(> .case-contribution:last-child) { padding-bottom: 0; }
.case-contribution-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2.5rem 3vw; }
.case-contribution-item { padding-top: 1.1rem; border-top: 1px solid #45453f; }
.case-contribution-item h3 { margin: 0 0 1rem; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.case-contribution-item em { color: var(--acid); }
.case-contribution-item p { max-width: 26rem; margin: 0; color: #c9c7bd; font-size: 1.05rem; line-height: 1.6; }
.case-media-wide { width: 75%; margin-left: auto; }
.case-media-half { width: 50%; margin-left: auto; }
.case-grid, .case-before-after, .case-text-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.case-grid-3 { grid-template-columns: repeat(3, 1fr); }
.case-text-media { align-items: center; gap: 3vw; }
.case-media-position-left figure { order: -1; }
.case-quote blockquote { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -0.045em; line-height: 1.1; }
.case-quote blockquote p { margin: 0; }
.case-credits dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.5rem 3vw; margin: 0; }
.format-board { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(1rem, 3vw, 3rem); }
.format-item img, .format-item video { width: auto; max-width: 100%; }
.case-next { padding: clamp(3.5rem, 7vw, 6rem) 3vw clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--ink); }
.case-next-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 clamp(1rem, 2.5vw, 2.5rem); align-items: baseline; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.case-next-number { color: #55554f; font-family: "DM Mono", monospace; font-size: 0.8125rem; }
.case-next-title { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 7rem); font-weight: 600; letter-spacing: -0.065em; line-height: 0.92; }
.case-next-arrow { font-size: clamp(2rem, 1.4rem + 2.6vw, 4.5rem); transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); }
.case-next-link:hover .case-next-arrow, .case-next-link:focus-visible .case-next-arrow { transform: translateX(0.5rem); }
/* Work page: a short opening, featured work, then an index of every project. */
.work-intro { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 3vw; padding: clamp(3.5rem, 7vw, 7rem) 3vw clamp(4.5rem, 10vw, 9.5rem); }
.work-intro h1 { margin: 0; font-size: clamp(3.4rem, 2.99rem + 4.67vw, 9rem); font-weight: 600; letter-spacing: -0.07em; line-height: 0.88; }
.work-intro-text { max-width: 34rem; margin: clamp(1.5rem, 2.5vw, 2.5rem) 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.45rem, 2.2vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.15; }
.work-meta, .work-disciplines, .work-roles, .work-organisation, .index-number, .index-relationship, .index-disciplines, .index-roles, .index-years, .index-organisation { font-family: "DM Mono", monospace; font-size: 0.8125rem; letter-spacing: 0.02em; }
.work-meta, .work-roles, .index-roles { text-transform: uppercase; }
.work-intro .section-label, .work-index-head .section-label, .work-feature .text-link { font-size: 0.8125rem; }
.work-featured { display: grid; gap: clamp(5rem, 10vw, 10rem); padding: 0 3vw clamp(6rem, 12vw, 12rem); }
.work-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem 3vw; align-items: start; }
.work-feature-media { display: block; grid-column: 1 / -1; }
.work-feature-media .visual-canvas { min-height: 30vw; }
.work-feature-text { grid-column: 1 / -1; }
.work-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0 0 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); color: #55554f; }
.work-meta span:first-child { color: var(--ink); }
.work-feature h3 { margin: 0 0 1.5rem; font-size: clamp(2.2rem, 3.8vw, 4.4rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; }
.work-feature-details { display: grid; gap: 1rem; justify-items: start; }
.work-organisation { margin: 0; color: #55554f; }
.work-feature-intro { max-width: 36rem; margin: 0; color: #51514b; font-size: 1rem; line-height: 1.6; }
.work-disciplines { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin: 0.25rem 0 0; padding: 0; color: #55554f; list-style: none; }
.work-disciplines li:not(:last-child)::after { content: ","; }
.work-roles { margin: 0; white-space: nowrap; }
.work-feature--lead .work-feature-media .visual-canvas { min-height: min(40vw, 640px); }
.work-feature--lead .work-feature-text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3vw; }
.work-feature--lead .work-meta { grid-column: 1 / -1; }
.work-feature--lead h3 { font-size: clamp(3rem, 6vw, 7rem); }
.work-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3vw; align-items: start; }
.work-pair .work-feature { grid-template-columns: minmax(0, 1fr); }
.work-pair .work-feature:first-child { grid-column: 1 / span 7; }
.work-pair .work-feature:last-child { grid-column: 9 / -1; margin-top: clamp(8rem, 16vw, 16rem); }
.work-pair .work-feature:last-child .visual-canvas { min-height: 26vw; }
.work-feature--wide .work-feature-media { grid-column: 5 / -1; }
.work-feature--wide .work-feature-text { grid-row: 1; grid-column: 1 / span 4; align-self: end; }
.work-index { padding: 0 3vw clamp(6rem, 12vw, 12rem); }
.work-index-head { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 3vw; padding-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--ink); }
.work-index-head h2 { margin: 0; font-size: clamp(2.8rem, 3rem + 1.66vw, 5.75rem); font-weight: 600; letter-spacing: -0.065em; line-height: 0.9; }
.work-index-body { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.work-index-body.has-previews { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22vw); gap: 3vw; align-items: start; }
/* Beside the preview panel, disciplines move under the title so the list keeps its width. */
.has-previews .index-columns, .has-previews .index-entry { grid-template-columns: 3.5rem minmax(0, 2.6fr) minmax(0, 1fr) 11.5rem 8.5rem 1.25rem; }
.has-previews .index-columns span:nth-child(4) { display: none; }
.has-previews .index-entry { grid-template-areas: "number title relationship roles years arrow" ". disciplines disciplines disciplines disciplines disciplines"; }
.has-previews .index-number { grid-area: number; }
.has-previews .index-title { grid-area: title; }
.has-previews .index-relationship { grid-area: relationship; }
.has-previews .index-disciplines { grid-area: disciplines; margin-top: 0.4rem !important; }
.has-previews .index-roles { grid-area: roles; }
.has-previews .index-years { grid-area: years; }
.has-previews .index-arrow { grid-area: arrow; }
.work-index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.index-columns, .index-entry { display: grid; grid-template-columns: 3.5rem minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.4fr) 11.5rem 8.5rem 1.25rem; column-gap: 1.5rem; }
.index-columns { padding-bottom: 0.75rem; color: #55554f; font-family: "DM Mono", monospace; font-size: 0.8125rem; letter-spacing: 0.02em; }
.index-columns span:nth-child(6) { text-align: right; }
.index-entry { position: relative; gap: 0.35rem 1.5rem; align-items: first baseline; min-height: 44px; padding: 1.75rem 0; border-bottom: 1px solid var(--line); transition: background-color 200ms ease; }
.index-entry p { margin: 0; }
.index-number, .index-relationship, .index-disciplines, .index-years, .index-organisation { color: #55554f; }
.index-number { grid-column: 1; }
.index-title { grid-column: 2; }
.index-relationship { grid-column: 3; }
.index-disciplines { grid-column: 4; line-height: 1.5; }
.index-roles { grid-column: 5; white-space: nowrap; }
.index-years { grid-column: 6; text-align: right; }
.index-arrow { grid-column: 7; justify-self: end; transition: transform 180ms ease; }
.index-title h3 { margin: 0; font-size: clamp(1.8rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1.02; }
.index-title h3 { transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); }
.index-title h3 a::after { position: absolute; inset: 0; content: ""; }
.index-organisation { margin-top: 0.4rem !important; }
.index-thumb { display: none; }
.index-entry.has-page:hover, .index-entry.has-page:focus-within { background: rgba(23, 23, 20, 0.035); }
.index-entry.has-page:hover h3, .index-entry.has-page:focus-within h3 { transform: translateX(0.5rem); }
.index-entry.has-page:hover .index-arrow, .index-entry.has-page:focus-within .index-arrow { transform: translate(3px, -3px); }
.index-preview { position: absolute; top: 0; right: 0; width: 22vw; aspect-ratio: 4 / 3; opacity: 0; transition: opacity 250ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.index-preview.is-visible { opacity: 1; }
.index-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) {
	.case-intro { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.case-facts { max-width: 34rem; }
	.index-columns { display: none; }
	.index-entry { grid-template-columns: 3rem minmax(0, 2.6fr) minmax(0, 1fr) 11.5rem 8rem 1.25rem; grid-template-areas: "number title relationship roles years arrow" ". disciplines disciplines disciplines disciplines disciplines"; }
	.index-number { grid-area: number; }
	.index-title { grid-area: title; }
	.index-relationship { grid-area: relationship; }
	.index-disciplines { grid-area: disciplines; margin-top: 0.4rem !important; }
	.index-roles { grid-area: roles; }
	.index-years { grid-area: years; }
	.index-arrow { grid-area: arrow; }
	.work-index-body.has-previews { grid-template-columns: minmax(0, 1fr); }
	.index-preview { display: none; }
}
@media (max-width: 900px) {
	.work-feature--lead .work-feature-text { grid-template-columns: minmax(0, 1fr); }
	.work-pair .work-feature:first-child { grid-column: 1 / span 7; }
	.work-pair .work-feature:last-child { grid-column: 8 / -1; margin-top: clamp(6rem, 18vw, 12rem); }
	.work-feature--wide .work-feature-media { grid-column: 6 / -1; }
	.work-feature--wide .work-feature-text { grid-column: 1 / span 5; }
	.index-entry { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.25rem; padding-right: 2.5rem; }
	.index-number { order: 1; }
	.index-years { order: 2; text-align: left; }
	.index-relationship { order: 3; }
	.index-title { order: 4; flex: 0 0 100%; margin: 0.35rem 0 0.25rem; }
	.index-disciplines { order: 5; flex: 0 0 100%; margin-top: 0 !important; }
	.index-roles { order: 6; flex: 0 0 100%; }
	.index-arrow { position: absolute; top: 1.5rem; right: 0.25rem; }
	.index-thumb { order: 7; display: block; width: 96px; margin-top: 0.75rem; }
	.index-thumb img { display: block; width: 100%; height: auto; }
	.index-title h3 { font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2rem); }
}
@media (max-width: 700px) {
	.work-intro, .work-index-head { grid-template-columns: 1fr; gap: 2rem; }
	.work-intro { padding: 2.5rem 1.25rem 5.5rem; }
	.work-featured { gap: 6.5rem; padding: 0 1.25rem 6rem; }
	.work-pair { grid-template-columns: minmax(0, 1fr); gap: 6.5rem; }
	.work-feature { row-gap: 1rem; }
	.work-meta { margin-bottom: 0.85rem; }
	.work-feature h3 { margin-bottom: 1rem; }
	.work-feature-details { gap: 0.75rem; }
	.work-feature .text-link { margin-top: 0.35rem; }
	.work-pair .work-feature:first-child, .work-pair .work-feature:last-child { grid-column: 1; margin-top: 0; }
	.work-feature--wide .work-feature-media, .work-feature--wide .work-feature-text { grid-row: auto; grid-column: 1 / -1; }
	.work-feature-media .visual-canvas, .work-feature--lead .work-feature-media .visual-canvas, .work-pair .work-feature:last-child .visual-canvas { min-height: 52vw; }
	.work-feature h3 { font-size: clamp(1.9rem, 1.6rem + 1.35vw, 2.2rem); line-height: 1; }
	.work-feature--lead h3 { font-size: clamp(2.2rem, 1.75rem + 2.6vw, 3rem); }
	.work-index { padding: 0 1.25rem 5rem; }
	.index-entry { padding: 1.35rem 2.25rem 1.5rem 0; }
	.index-entry.has-page:hover h3, .index-entry.has-page:focus-within h3 { transform: none; }
}
/* Scroll reveal: html.js-reveal is only added by the reveal script, so without it everything stays visible. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.js-reveal [data-reveal="subtle"] { transform: translateY(8px); }
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (max-width: 900px) {
	.hero h1 { flex-direction: column; align-items: flex-start; gap: 0.08em; font-size: clamp(4.2rem, 15vw, 8rem); white-space: normal; }
	.hero-plus { display: none; }
	.hero-bottom { gap: 2rem; }
	.project-row, .project-row:nth-child(even) { grid-template-columns: 1.4fr 1fr; }
	.visual-compact .visual-canvas { min-height: 43vw; }
}
@media (max-width: 700px) {
	.case-header { grid-template-columns: 1fr; padding: 1rem 1.25rem 3.5rem; }
	.case-header h1 { margin: 2.25rem 0 2rem; }
	.case-intro { grid-column: 1; grid-template-columns: 1fr; gap: 2.25rem; }
	.case-lead-media { padding: 0 1.25rem; }
	.case-lead-media .visual-canvas { min-height: 48vw; }
	.case-study { gap: 4.5rem; padding: 4.5rem 1.25rem 4.5rem; }
	.case-text + .case-text { margin-top: calc(2.5rem - 4.5rem); padding-top: 2.5rem; }
	.case-contribution { margin: 0 -1.25rem; padding: 3.5rem 1.25rem; }
	.case-text, .case-contribution, .case-credits, .case-format-board, .case-grid, .case-grid-3, .case-before-after, .case-text-media { grid-template-columns: 1fr; gap: 1.5rem; }
	.case-next { padding: 3rem 1.25rem 4.5rem; }
	.case-media-wide, .case-media-half { width: 100%; }
	.site-header { height: 70px; padding: 0 1.25rem; }
	.menu-button { display: block; }
	.nav { position: absolute; top: 70px; right: 0; left: 0; display: none; flex-direction: column; gap: 0; padding: 1rem 1.25rem 2rem; border-bottom: 1px solid var(--line); background: var(--paper); }
	.nav-open { display: flex; }
	.nav a { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
	.hero { min-height: calc(100svh - 70px); padding: 1.5rem 1.25rem 2rem; }
	.hero h1 { font-size: clamp(3.6rem, 19vw, 6.2rem); line-height: 0.83; }
	.hero-bottom { display: block; }
	.hero-bottom > p { font-size: 1.6rem; }
	.hero-actions { justify-content: space-between; margin-top: 2rem; gap: 1rem; }
	.button { gap: 1rem; }
	.section-pad { padding: 5rem 1.25rem; }
	.proof-line { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
	.section-heading, .intersection-intro, .home-about, .experience { grid-template-columns: 1fr; }
	.experience-list { grid-column: 1; }
	.section-heading h2, .intersection-intro h2, .home-about h2, .section-heading h1, .intersection-intro h1, .home-about h1 { margin-top: 2rem; font-size: clamp(2.8rem, 14vw, 5rem); }
	.project-list { margin-top: 3rem; }
	.project-row, .project-row:nth-child(even) { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 0; }
	.project-row:nth-child(even) .project-media-link { order: initial; }
	.visual-compact .visual-canvas, .visual-canvas { min-height: 75vw; }
	.project-summary h3 { font-size: clamp(2.5rem, 12vw, 3.7rem); line-height: 1.08; }
	.discipline-columns { grid-template-columns: 1fr; gap: 3rem; }
	.working-line { margin-top: 5rem; font-size: clamp(2rem, 13vw, 5rem); line-height: 1.08; }
	.site-footer { grid-template-columns: 1fr; padding: 4rem 1.25rem 2rem; }
	.footer-links { margin-top: 2rem; }
}
/* Closing call to action (end of the homepage and the Contact page). Kept after the responsive rules above so its
   padding holds on small screens. The headline sits at the content column's width (up to 1100px) and wraps in it;
   LinkedIn leads (mono, on a rule, with an acid wipe on hover or focus) and email follows as a quieter line. */
.home-cta { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; column-gap: 3vw; padding-top: clamp(6rem, 13vw, 12rem); padding-bottom: clamp(6rem, 13vw, 12rem); }
.home-cta h1, .home-cta h2 { grid-column: 2; max-width: 1100px; margin: 0; font-size: clamp(3.1rem, 8vw, 9rem); font-weight: 600; letter-spacing: -0.07em; line-height: 0.9; text-wrap: balance; }
.home-cta-body { grid-column: 2; max-width: 640px; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.home-cta-body > p:first-child { margin: 0 0 clamp(2rem, 3.5vw, 3rem); color: #55554f; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.6; }
.home-cta-linkedin { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 2px solid var(--ink); font-family: "DM Mono", monospace; font-size: clamp(0.85rem, 1vw, 1rem); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.home-cta-linkedin::before { position: absolute; inset: 0.7rem -0.35rem; z-index: -1; background: var(--acid); content: ""; transform: scaleX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.home-cta-linkedin:hover::before, .home-cta-linkedin:focus-visible::before { transform: scaleX(1); }
.home-cta-arrow { display: inline-block; transition: transform 180ms ease; }
.home-cta-linkedin:hover .home-cta-arrow, .home-cta-linkedin:focus-visible .home-cta-arrow { transform: translate(3px, -3px); }
.home-cta-email { margin: 1.75rem 0 0; color: #55554f; font-size: 0.95rem; }
.home-cta-email a { display: inline-block; padding: 0.35rem 0; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.home-cta-email a span { display: inline-block; margin-left: 0.3em; text-decoration: none; transition: transform 180ms ease; }
.home-cta-email a:hover span, .home-cta-email a:focus-visible span { transform: translate(2px, -2px); }
@media (max-width: 700px) { .home-cta { grid-template-columns: 1fr; } .home-cta h1, .home-cta h2 { grid-column: 1; font-size: clamp(2.8rem, 14vw, 5rem); } .home-cta-body { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .home-cta-linkedin::before, .home-cta-arrow, .home-cta-email a span { transition: none; } }
@media (prefers-reduced-motion: reduce) {
	.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}