/* Forge. Single theme, deliberate. Olive, sand, dune and greige, with chocolate for body text.
   Colour never sits as a flat block: washes fade to transparent over whatever is beneath them.
   Square corners everywhere, no borders on photographs, nothing oversized.
   18 Sep 2026: a little more olive. It arrives through the washes, headings, rules and the footer, not new blocks. */
/* Hanken Grotesk, self-hosted (SIL Open Font License, see fonts/OFL.txt). One variable file per script range, the
   same files Google Fonts serves, so nothing on the site is loaded from a third party. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --olive-deep: #2f3126;
  --olive: #4f5239;
  --olive-soft: #868a6a;
  --olive-mist: #bfbf9f;
  --greige: #b3ac97;
  --dune: #c6b8a1;
  --sand: #d9cebc;
  --bone: #efe7da;
  --choc: #2a201d;
  --choc-2: #1c1513;
  --cocoa: #574c40;
  --line: rgba(47, 49, 38, 0.24);
  --line-w: rgba(239, 231, 218, 0.28);
  --wash: 134, 138, 106;            /* soft olive, used at low alpha for washes that fade out */
  --header-h: 124px;
  --gutter: clamp(16px, 3vw, 48px);
  --gap: clamp(14px, 1.6vw, 26px);
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --h1: clamp(2rem, 3.8vw, 58px);
  --h2: clamp(1.5rem, 2.5vw, 40px);
  --h3: clamp(1.1rem, 1.35vw, 21px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--sand); color: var(--choc); font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.6; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* Running-text links. :where keeps this rule weightless so any component can restyle its own links. */
main a:where(:not(.btn, .tile, .next, .post, .browse__item)) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--olive-soft); }
h1, h2, h3 { font-family: var(--sans); margin: 0; text-wrap: balance; color: var(--olive-deep); }
h1 { font-size: var(--h1); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: var(--h2); font-weight: 600; line-height: 1.14; letter-spacing: -0.02em; }
h3 { font-size: var(--h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
p { margin: 0; }
p + p { margin-top: 1em; }
::selection { background: var(--olive-soft); color: var(--bone); }
mark { background: rgba(var(--wash), 0.42); color: inherit; padding: 0 1px; }
.eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bone); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.site-header :focus-visible, .menu-overlay :focus-visible, .browse :focus-visible, .hero :focus-visible { outline-color: var(--bone); }

/* Buttons: square and small */
.btn { display: inline-block; background: var(--olive-deep); color: var(--bone); border: 1px solid var(--olive-deep); border-radius: 0; padding: 11px 18px; font: 600 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn:hover { background: var(--olive); border-color: var(--olive); }
.btn--line { background: transparent; color: var(--olive-deep); border-color: var(--olive-deep); }
.btn--line:hover { background: var(--olive-deep); color: var(--bone); }

/* Header: pinned, and washed from deep olive to fully transparent so the page shows through beneath it */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 20;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: calc(22px + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  color: var(--bone);
  background: linear-gradient(to bottom, rgba(38, 40, 30, 0.9) 0%, rgba(38, 40, 30, 0.72) 45%, rgba(38, 40, 30, 0.32) 78%, rgba(38, 40, 30, 0) 100%);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.brand { text-decoration: none; display: flex; flex-direction: column; gap: 9px; color: var(--bone); min-width: 0; }
.logo { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: -0.015em; font-size: clamp(38px, 3.6vw, 56px); line-height: 0.86; }
.brand__line { font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bone); }
/* Home only (David's option B, 22 Sep 2026): FORGE opens at half the footer's size across the film and scales down to
   the normal header as the page scrolls. main.js sets --s from the scroll position (1 = normal), so the change follows
   the scroll continuously with a transform and never reflows the page. */
.site-header--big .logo { display: inline-block; transform-origin: 0 0; transform: scale(var(--s, 1)); will-change: transform; }
.site-header--big .brand__line { transform: translateY(var(--shift, 0px)); will-change: transform; }
.menu-btn { flex: none; background: none; border: 1px solid var(--bone); color: var(--bone); border-radius: 0; padding: 11px 20px; font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.menu-btn:hover { background: var(--bone); color: var(--olive-deep); }
.menu-overlay { position: fixed; inset: 0; z-index: 30; background: var(--olive-deep); color: var(--bone); padding: calc(22px + env(safe-area-inset-top, 0px)) var(--gutter) 32px; display: flex; flex-direction: column; gap: 4vh; transform: translateY(-100%); transition: transform 0.5s ease-in-out, visibility 0s linear 0.5s; overflow-y: auto; visibility: hidden; }
.menu-overlay.is-open { transform: translateY(0); visibility: visible; transition: transform 0.5s ease-in-out, visibility 0s; }
.menu-overlay__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
/* Menu links pinned to the right, directly under the Close button (David's artifact comment, 22 Sep 2026) */
.menu-overlay { gap: 2vh; }
.menu-overlay__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.menu-overlay__nav a { display: inline-block; font-size: clamp(1.9rem, 4.2vw, 56px); font-weight: 700; line-height: 1.16; letter-spacing: -0.03em; text-decoration: none; opacity: 0.45; transition: opacity 0.25s ease; }
.menu-overlay__nav a:hover, .menu-overlay__nav a:focus-visible, .menu-overlay__nav a[aria-current] { opacity: 1; }
.menu-overlay__foot { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line-w); padding-top: 20px; }
.menu-overlay__foot div { display: flex; flex-direction: column; gap: 6px; }
.menu-overlay__foot .eyebrow { color: rgba(239, 231, 218, 0.6); }
.menu-overlay__foot a { text-decoration: none; font-size: 14px; }
.menu-overlay__foot a:hover { text-decoration: underline; }
body.menu-open { overflow: hidden; }

/* Photos loaded by filename. Until the file exists the box shows as a hatched frame with its label. */
.ph { position: relative; width: 100%; max-width: 100%; overflow: hidden; background-color: var(--dune); background-size: cover; background-position: center; }
.ph:not(.has-img)::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(47,49,38,0.06) 0 2px, transparent 2px 14px), var(--dune); }
.ph__label { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(42,32,29,0.6); }
.ph.has-img .ph__label { display: none; }

/* Hero: runs full bleed from the very top, beneath the transparent header */
.hero { position: relative; width: 100%; height: clamp(440px, 84vh, 920px); overflow: hidden; background: var(--olive-deep); }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide .ph, .hero--text .ph { position: absolute; inset: 0; height: 100%; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--text .ph::after, .hero--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,21,19,0.62), rgba(28,21,19,0) 55%); pointer-events: none; }
.hero__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(24px, 4vw, 56px); color: var(--bone); z-index: 2; display: flex; flex-direction: column; gap: 12px; }
.hero__text h1 { max-width: 22ch; color: var(--bone); }
.hero__line { font-size: clamp(17px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; max-width: 40ch; }
.hero__text p { max-width: 50ch; }
.slider__controls { position: absolute; right: var(--gutter); bottom: 20px; z-index: 3; display: flex; gap: 6px; }
.slider__controls--left { position: static; margin-top: 8px; }
.slider__controls button { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 0; border: 0; background: var(--olive-deep); color: var(--bone); cursor: pointer; font: 600 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.2s ease; }
.slider__controls button:hover { background: var(--olive); }

/* Sections */
.section { padding: clamp(56px, 7vw, 120px) var(--gutter); }
.section--tight { padding-top: 0; }
.section--narrow { max-width: 860px; }
/* Feature band: an olive wash that fades out to the page rather than sitting as a block */
.section--tone { background: linear-gradient(90deg, rgba(var(--wash), 0.42) 0%, rgba(var(--wash), 0.2) 55%, rgba(var(--wash), 0) 100%); }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 40px); flex-wrap: wrap; }
.section__note { font-size: 13px; color: var(--cocoa); }
/* Text-led page openings: a faint olive wash falls from under the header and fades into the page */
.page-head { padding-top: calc(var(--header-h) + clamp(28px, 4vw, 64px)); padding-bottom: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 14px; background: linear-gradient(to bottom, rgba(var(--wash), 0.5) 0%, rgba(var(--wash), 0.16) 60%, rgba(var(--wash), 0) 100%); }
.page-head h1 { max-width: 24ch; }
.lede { font-size: 17px; max-width: 60ch; color: var(--cocoa); }
/* About opens on a full-bleed photograph, the heading over an olive wash that fades to transparent (David, 22 Sep 2026) */
.page-head--image { position: relative; overflow: hidden; justify-content: flex-end; min-height: clamp(440px, 66vh, 680px); background: var(--olive-deep); color: var(--bone); }
.page-head__bg { position: absolute !important; inset: 0; height: 100%; }
.page-head--image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(47,49,38,0.82) 0%, rgba(47,49,38,0.35) 45%, rgba(47,49,38,0) 75%), linear-gradient(to bottom, rgba(47,49,38,0.45), rgba(47,49,38,0) 30%); pointer-events: none; }
.page-head--image > :not(.page-head__bg) { position: relative; z-index: 2; }
.page-head--image h1 { color: var(--bone); }
.page-head--image .lede { color: rgba(239, 231, 218, 0.9); }
.dateline { font-size: 13px; color: var(--cocoa); }
.statement { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.statement h1, .statement h2 { max-width: 22ch; }
.statement p { max-width: 62ch; }
/* Home statement: text beside a staggered pair, the tall Williamstown photograph cropped from its base so the green
   holds, and the silent Mitcham film laid over its lower corner (David's layout A2, 22 Sep 2026). No frames or shadows. */
.statement--image { --stack-h: clamp(420px, 44vw, 640px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
/* Heading and text start level with the top of the tall photograph; the button sits level with its base (David, 22 Sep 2026) */
.statement--image .statement__text { height: calc(var(--stack-h) * 0.72); }
.statement--image .statement__text .btn { margin-top: auto; }
.statement__text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.statement__stack { position: relative; height: var(--stack-h); }
.statement__tall { position: absolute; right: 0; top: 0; width: 58%; height: 72%; overflow: hidden; }
.statement__tall img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.statement__film { position: absolute; left: 0; bottom: 0; width: 62%; aspect-ratio: 16 / 10; z-index: 1; overflow: hidden; background: var(--olive-deep); }
.statement__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ethos, .studio { display: flex; flex-direction: column; gap: 22px; }
.ethos h2 { max-width: none; }   /* one line, full width (David, 22 Sep 2026) */
.studio h2 { max-width: 24ch; }
.ethos__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); max-width: 1100px; }
.ethos__cols p + p { margin-top: 0; }
.prose { font-size: 17px; }
.prose > * { max-width: 66ch; }
.closing { display: flex; flex-direction: column; gap: 8px; padding-top: 0; }

/* Project grid: three fixed-width columns, heights follow each cover photograph. No frames. */
.tiles { column-count: 3; column-gap: var(--gap); }
.tile { position: relative; display: block; break-inside: avoid; margin: 0 0 var(--gap); overflow: hidden; text-decoration: none; color: var(--bone); background: var(--olive-deep); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.tile__media { position: relative; display: block; width: 100%; overflow: hidden; }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1); }
.tile__img.is-active { opacity: 1; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(28,21,19,0.74) 0%, rgba(28,21,19,0.08) 36%, rgba(28,21,19,0) 58%); transition: background 0.4s ease; }
.tile:hover .tile__img { transform: scale(1.03); }
.tile:hover::before { background: linear-gradient(to top, rgba(47,49,38,0.9) 0%, rgba(47,49,38,0.2) 44%, rgba(47,49,38,0) 66%); }
/* Home feature grid: three columns, two rows, always flush at the top and the base. Photographs crop to their cell. */
.tiles--feature { column-count: initial; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gap); aspect-ratio: 25 / 12; }
.tiles--feature .tile { margin: 0; min-height: 0; }
.tiles--feature .tile__media { position: absolute; inset: 0; }
.tiles--feature .tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.tiles--feature .tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.tiles--feature .tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.tiles--feature .tile:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.tile__text { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.tile__name { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.tile__meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.tile.is-hidden { display: none; }

/* Browse band (projects page): full width; the olive wash sits behind the list and fades to transparent across the photograph */
.browse { position: relative; width: 100%; min-height: clamp(480px, 78vh, 800px); overflow: hidden; background: var(--olive-deep); color: var(--bone); display: flex; }
.browse__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.8s ease; }
.browse__img.is-a { opacity: 1; }
.browse::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(270deg, rgba(47,49,38,0.94) 0%, rgba(47,49,38,0.8) 22%, rgba(47,49,38,0.35) 48%, rgba(47,49,38,0) 72%),
  linear-gradient(90deg, rgba(28,21,19,0.6) 0%, rgba(28,21,19,0.3) 24%, rgba(28,21,19,0) 46%),
  linear-gradient(to top, rgba(28,21,19,0.5) 0%, rgba(28,21,19,0) 38%),
  linear-gradient(to bottom, rgba(28,21,19,0.5) 0%, rgba(28,21,19,0) 46%); }
.browse__inner { position: relative; z-index: 2; width: 100%; padding: calc(var(--header-h) + 28px) var(--gutter) clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.browse__left { display: flex; flex-direction: column; gap: 12px; align-self: start; }
.browse__left h1 { color: var(--bone); }
.browse__left p { max-width: 40ch; color: rgba(239, 231, 218, 0.9); }
.browse__list { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.browse__list > .eyebrow { color: rgba(239, 231, 218, 0.7); margin-bottom: 10px; }
.browse__item { display: inline-flex; align-items: baseline; gap: 12px; padding: 5px 0; text-decoration: none; font: 600 clamp(1.5rem, 2.6vw, 40px)/1.12 var(--sans); letter-spacing: -0.025em; color: var(--bone); opacity: 0.42; transition: opacity 0.25s ease; }
.browse__item span { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; opacity: 0.8; font-variant-numeric: tabular-nums; }
.browse__item:hover, .browse__item:focus-visible { opacity: 0.85; }
.browse__item.is-active { opacity: 1; }

/* The grid's own filter line, so the type can be changed without returning to the band */
.work { scroll-margin-top: calc(var(--header-h) - 56px); padding-top: clamp(40px, 5vw, 72px); }
.work:focus { outline: none; }
.filterbar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--line); }
.filterbar__now { display: flex; align-items: baseline; gap: 14px; font-size: 14px; color: var(--cocoa); }
.filterbar__list, .feedbar { display: flex; flex-wrap: wrap; gap: 6px 22px; }
main .filterbar__list a, .feedbar button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 4px 0; font: 600 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--cocoa); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
main .filterbar__list a:hover, .feedbar button:hover { color: var(--olive-deep); }
main .filterbar__list a.is-active, .feedbar button.is-active { color: var(--olive-deep); border-bottom-color: var(--olive); }

/* Stories feed: one running column set of releases, films, journal notes and posts. Same fixed widths, free heights. */
.feedbar { margin-top: 10px; }
.feed { --feed-cols: 3; column-count: 3; column-gap: var(--gap); }
.feed.is-masonry { column-count: initial; display: flex; align-items: flex-start; gap: var(--gap); }
.feed__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.post { position: relative; display: block; break-inside: avoid; margin: 0 0 var(--gap); overflow: hidden; text-decoration: none; }
.post.is-hidden { display: none; }
.post--media { color: var(--bone); background: var(--olive-deep); }
.post--media img, .post--media video { width: 100%; height: auto; transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1); }
.post--media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(to top, rgba(28,21,19,0.78) 0%, rgba(28,21,19,0.1) 40%, rgba(28,21,19,0) 60%),
  linear-gradient(to bottom, rgba(28,21,19,0.5) 0%, rgba(28,21,19,0) 30%); }
a.post--media:hover img, a.post--media:hover video { transform: scale(1.03); }
.post__kind { position: absolute; left: 18px; top: 15px; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.post__kind span { opacity: 0.75; margin-left: 8px; }
.post__text { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.post__title { font-size: 19px; font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; }
.post__meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.post__caption { font-size: 14px; line-height: 1.4; }
/* Journal notes have no photograph: an olive wash that fades out across the card, under a single rule */
.post--text { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 22px; color: var(--choc); border-top: 2px solid var(--olive); background: linear-gradient(160deg, rgba(var(--wash), 0.5) 0%, rgba(var(--wash), 0.16) 62%, rgba(var(--wash), 0) 100%); transition: background-color 0.3s ease; }
.post--text .post__kind { position: static; color: var(--olive); }
.post--text .post__title { font-size: 21px; color: var(--olive-deep); }
.post__excerpt { font-size: 15px; color: var(--cocoa); }
.post__more { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--olive-soft); }
.post--text:hover { background-color: rgba(var(--wash), 0.16); }
/* Home page strip: four posts at one shared height, fitting the frame with no sideways scroll (David, 22 Sep 2026) */
.feed--row { column-count: initial; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.feed--row .post { margin: 0; height: clamp(300px, 27vw, 400px); }
.feed--row .post--media img, .feed--row .post--media video { height: 100%; object-fit: cover; }
.feed--row .post--text .post__more { margin-top: auto; }

/* Testimonials: labelled as such before the reader starts */
.quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 72px); align-items: start; border-top: 1px solid var(--line); }
.quote__head { display: flex; flex-direction: column; gap: 14px; }
.quote__body { position: relative; border-left: 2px solid var(--olive-soft); padding-left: clamp(20px, 2.4vw, 36px); }
.quote__slide { margin: 0; display: none; max-width: 62ch; }
.quote__slide.is-active { display: block; }
.quote__who { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.quote__who cite { font-style: normal; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.quote__who span { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); }
.quote__slide p { font-size: clamp(17px, 1.4vw, 22px); font-weight: 400; line-height: 1.5; letter-spacing: -0.005em; }
.quote--single { display: block; border-top: 0; padding-top: 0; }

/* Split layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.split > div:not(.ph) { display: flex; flex-direction: column; gap: 18px; }
.split h2 { max-width: 22ch; }
.split p { max-width: 60ch; }
.split p + p { margin-top: 0; }
.split--project { grid-template-columns: 1fr 2fr; }
.split--contact { grid-template-columns: 1fr 1.4fr; }
.details { margin: 0; display: flex; flex-direction: column; }
.details div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.details div:last-child { border-bottom: 1px solid var(--line); }
.details dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--olive); padding-top: 3px; }
.details dd { margin: 0; font-size: 15px; }
.contact-list { display: flex; flex-direction: column; gap: 22px; }
.contact-list div { display: flex; flex-direction: column; gap: 4px; }
main .contact-list a:not(.btn) { text-decoration: none; font-size: 17px; }
main .contact-list a:not(.btn):hover { text-decoration: underline; }

/* About: a small portrait beside the biography, never a large image */
/* Portrait sized to balance the biography beside it (David's comment, 22 Sep 2026: the image to text ratio was off) */
.bio { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 640px); justify-content: start; gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(28px, 3vw, 48px); }
.bio__side { display: flex; flex-direction: column; gap: 14px; }
.bio__portrait { max-width: 420px; }
.bio__name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--olive-deep); }
.bio__name span { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); }
.bio__text { display: flex; flex-direction: column; gap: 18px; max-width: 66ch; }
.bio__text p + p { margin-top: 0; }
.bio__text p { font-size: 16px; }   /* same as the project pages (David, 22 Sep 2026) */

/* Grids, services, timelines, accordion */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.grid4 > div, .grid3 > div { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--olive-soft); padding-top: 16px; }
.grid4 p, .grid3 p { font-size: 15px; }
.services { display: flex; flex-direction: column; }
.service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 0.9fr); gap: 12px clamp(20px, 3vw, 56px); padding: 24px 0; border-top: 1px solid var(--line); align-items: start; }
.service:last-child { border-bottom: 1px solid var(--line); }
.service p { font-size: 15px; max-width: 62ch; }
.service p + p { margin-top: 0; }
.service .price { font-weight: 600; color: var(--olive); text-align: right; font-variant-numeric: tabular-nums; }
.timeline, .journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li, .journey li { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.timeline li:last-child, .journey li:last-child { border-bottom: 1px solid var(--line); }
.timeline__n, .journey__when { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--olive); font-variant-numeric: tabular-nums; padding-top: 5px; }
.journey li { grid-template-columns: minmax(0, 190px) 1fr; }
.journey__when { text-transform: uppercase; font-size: 12px; }
.timeline li > div, .journey li > div { display: flex; flex-direction: column; gap: 6px; max-width: 62ch; }
.acc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: -1px; }
.acc summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: var(--h3); line-height: 1.3; color: var(--olive-deep); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; flex: none; font-weight: 400; font-size: 22px; line-height: 1; color: var(--olive); }
.acc[open] summary::after { content: "\2013"; }
.acc > div { padding: 0 0 20px; max-width: 62ch; font-size: 15px; }
.acc ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.section--narrow > .btn, .section--narrow p > .btn { margin-top: 24px; }

/* Approach: example frames, ready for the drawings. A3 landscape proportion, kept modest. */
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px) var(--gap); }
.frame { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.frame figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--cocoa); max-width: 40ch; }

/* FAQ: search first, then the questions by subject */
.faqsearch { margin-top: 14px; max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.faqsearch label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--cocoa); }
.faqsearch__row { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--choc); }
.faqsearch__row:focus-within { border-bottom-color: var(--olive); box-shadow: 0 1px 0 var(--olive); }
.faqsearch input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: 12px 0; font: 400 19px/1.4 var(--sans); color: var(--choc); appearance: none; -webkit-appearance: none; }
.faqsearch input::placeholder { color: rgba(87, 76, 64, 0.7); }
.faqsearch input:focus { outline: none; }
.faqsearch input::-webkit-search-cancel-button { display: none; }
.faqsearch__clear { flex: none; background: none; border: 0; padding: 6px 0; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.faqsearch__status { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cocoa); min-height: 1.6em; }
.faq { display: flex; flex-direction: column; padding-top: clamp(20px, 2.4vw, 32px); }
.faq__group { display: flex; flex-direction: column; margin-bottom: clamp(28px, 3vw, 44px); }
.faq__heading { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); margin-bottom: 12px; }
.faq.is-searching .faq__group { display: contents; }
.faq.is-searching .faq__heading { display: none; }
.acc.is-hidden { display: none; }
.faq__none { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 8px 0 0; max-width: 52ch; }

/* Project and journal navigation */
.pnav { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px var(--gutter); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.pnav--foot { border-top: 1px solid var(--line); border-bottom: 0; }
main .pnav a { text-decoration: none; color: var(--choc); }
main .pnav a:hover { color: var(--olive); text-decoration: underline; text-underline-offset: 4px; }
.pnav__pn { display: flex; gap: 28px; }
.gallery { column-count: 2; column-gap: var(--gap); }
.gallery img { width: 100%; break-inside: avoid; margin: 0 0 var(--gap); }
.next { position: relative; display: block; text-decoration: none; color: var(--bone); }
.next .ph { max-height: 56vh; }
.next .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(47,49,38,0.85) 0%, rgba(47,49,38,0.3) 50%, rgba(47,49,38,0) 85%); transition: opacity 0.4s ease; }
.next:hover .ph::after { opacity: 0.8; }
.next__text { position: absolute; left: var(--gutter); bottom: clamp(20px, 4vw, 48px); z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.next__text .eyebrow { color: rgba(239,231,218,0.8); }
.next__name { font-size: var(--h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 6px; }
.form label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-top: 14px; color: var(--cocoa); }
.form input, .form select, .form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--choc); background: transparent; padding: 10px 0; font: 400 16px/1.4 var(--sans); color: var(--choc); border-radius: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom: 2px solid var(--olive); padding-bottom: 9px; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--choc) 50%), linear-gradient(135deg, var(--choc) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.form select:invalid { color: rgba(87, 76, 64, 0.8); }
.form select option { color: var(--choc); background: var(--bone); }
.form textarea { resize: vertical; }
.form .req { color: var(--olive); }
.form__note { font-size: 12px; color: var(--cocoa); margin-top: 14px; max-width: 60ch; }
.form .btn { align-self: flex-start; margin-top: 22px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form__row > div { display: flex; flex-direction: column; gap: 6px; }
.form--inline { max-width: 520px; margin-top: 20px; }
.form__done { font-size: 17px; max-width: 52ch; padding: 18px 0; border-top: 2px solid var(--olive); }
.hp { position: absolute; left: -9999px; }
.section--narrow h3 + p { margin-top: 8px; max-width: 48ch; }
/* Closing lines sit on one line on desktop (David's comment on About, 22 Sep 2026) */
.closing h3 + p { max-width: none; }

/* Footer: fades up from the page into olive-tinted greige rather than a dark block */
.footer { background: linear-gradient(to bottom, rgba(179,172,151,0) 0%, rgba(179,172,151,0.85) 40%, #a9a78c 100%); color: var(--choc); padding: clamp(72px, 9vw, 140px) var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 48px; overflow: hidden; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer__cols div { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.footer__cols .eyebrow { color: var(--olive-deep); }
.footer__cols .footer__gap { margin-top: 16px; }
.footer__cols a { text-decoration: none; }
.footer__cols a:hover { text-decoration: underline; }
.footer__mark.logo { white-space: nowrap; font-size: clamp(3.4rem, 17vw, 300px); line-height: 0.8; letter-spacing: -0.03em; color: var(--olive-deep); }
.footer__legal { font-size: 12px; color: var(--choc); opacity: 0.8; }

/* Scroll to reveal. Only hidden once JS has confirmed it can reveal (html.js). */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.6, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide, .menu-overlay, .tile__img, .browse__img, .post--media img, .post--media video { transition: none; }
}

/* Projects grid: laid out left to right into the shortest column by main.js, so the finished work sits across the top
   (22 Sep 2026, when 27 upcoming projects joined the six built ones). Without JS the CSS columns above apply. */
.tiles { --grid-cols: 3; }
.tiles.is-masonry { column-count: initial; display: flex; align-items: flex-start; gap: var(--gap); }
.tiles__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* Upcoming projects carry their stage in the top corner, over a short wash that fades to transparent. No pill. */
.tile__stage { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 16px 22px 34px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); background: linear-gradient(to bottom, rgba(47,49,38,0.62), rgba(47,49,38,0)); pointer-events: none; }
.filterbar__stage { width: 100%; justify-content: flex-start; }
main .filterbar__stage button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 4px 0; font: 600 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cocoa); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
main .filterbar__stage button span { margin-left: 6px; opacity: 0.6; font-variant-numeric: tabular-nums; }
main .filterbar__stage button:hover { color: var(--olive-deep); }
main .filterbar__stage button.is-active { color: var(--olive-deep); border-bottom-color: var(--olive); }
.gallery__note { margin: 0 0 14px; }

/* Home: Trusted by. A photograph under an olive wash that fades to transparent, the partners' marks drifting past. */
.trusted { position: relative; overflow: hidden; color: var(--bone); padding: clamp(40px, 5vw, 72px) 0 clamp(44px, 5.5vw, 80px); background: var(--olive-deep); }
.trusted__bg { position: absolute !important; inset: 0; height: 100%; }
.trusted::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(47,49,38,0.78) 0%, rgba(47,49,38,0.4) 60%, rgba(47,49,38,0.12) 100%); }
.trusted__label { position: relative; z-index: 2; margin: 0 0 clamp(22px, 3vw, 36px); text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.trusted__track { position: relative; z-index: 2; display: flex; width: max-content; animation: trusted 60s linear infinite; }
.trusted:hover .trusted__track { animation-play-state: paused; }
.trusted__row { display: flex; align-items: center; gap: clamp(40px, 5vw, 80px); margin: 0; padding: 0 clamp(20px, 2.5vw, 40px); list-style: none; }
.trusted__row li { flex: none; display: flex; align-items: center; height: 44px; }
.trusted__row li.is-badge { height: 72px; }
.trusted__row img { height: 100%; width: auto; max-width: 220px; object-fit: contain; opacity: 0.92; }
.trusted__name { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0.92; }
@keyframes trusted { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trusted__track { animation: none; width: auto; justify-content: center; }
  .trusted__row { flex-wrap: wrap; justify-content: center; row-gap: 22px; }
  .trusted__row[aria-hidden] { display: none; }
}

/* Responsive */
@media (max-width: 1024px) {
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { column-count: 2; --grid-cols: 2; }
  .tiles--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 4 / 3; }
  .tiles--feature .tile:nth-child(4) { display: none; }
  .feed { --feed-cols: 2; column-count: 2; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--project { grid-template-columns: 1fr 1.4fr; }
  .service { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .service .price { grid-column: 2; text-align: left; }
  .feed--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --header-h: 100px; }
  .brand__line { font-size: 10.5px; }
  .tiles, .gallery { column-count: 1; }
  .tiles { --grid-cols: 1; }
  .tiles--feature { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; }
  .tiles--feature .tile:nth-child(n) { display: block; grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .feed { --feed-cols: 1; column-count: 1; }
  .grid4, .grid3, .split, .split--project, .split--contact, .footer__cols, .form__row, .ethos__cols, .browse__inner, .quote, .bio, .frames, .statement--image { grid-template-columns: 1fr; }
  .statement--image { --stack-h: clamp(380px, 110vw, 520px); }
  .statement--image .statement__text { height: auto; }
  .statement--image .statement__text .btn { margin-top: 0; }
  .service, .journey li { grid-template-columns: 1fr; gap: 8px; }
  .service .price { grid-column: 1; }
  .menu-overlay__foot { grid-template-columns: 1fr; }
  .feed--row { grid-template-columns: 1fr; }
  .feed--row .post:nth-child(n+3) { display: none; }
  .hero { height: clamp(420px, 78vh, 720px); }
  .timeline li { grid-template-columns: 44px 1fr; }
  .details div { grid-template-columns: 90px 1fr; }
  .quote__slide { max-width: none; }
  .pnav__pn { gap: 16px; }
  .browse { min-height: 0; }
  .browse::after { background: linear-gradient(to top, rgba(47,49,38,0.94) 0%, rgba(47,49,38,0.78) 50%, rgba(47,49,38,0.55) 100%); }
  .browse__inner { align-items: start; gap: 28px; }
  .bio__portrait { max-width: 340px; }
}