:root {
  --stone: #F3F3F0;
  --ink: #1E1F1B;
  --lichen: #676C5E;
  --moss: #4A5043;
  --rule: #D6D6CF;
  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --gutter: clamp(16px, 4vw, 56px);
  --gap: clamp(16px, 2vw, 28px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--stone); color: var(--ink); font: 300 17px/1.6 var(--serif); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }
img, video { display: block; width: 100%; }

/* Header: name on the left, sections on the right, as on BY ART MATTERS */
.site-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 23.15px var(--gutter); border-bottom: 1px solid var(--rule); }  /* 23.15: keeps the header 79 px tall with wordmark A, so films and photos stay at 135 */
.wordmark { font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }   /* option A (client, 2026-10-26; was 15 px) */
.wordmark span { margin-right: 12px; letter-spacing: 0.2em; font-size: 18px; font-family: "Noto Serif SC", "Songti SC", serif; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px clamp(16px, 2.4vw, 32px); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-nav a { white-space: nowrap; color: var(--lichen); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
.site-nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--moss); }

/* Section headings: one per page or per row, nothing else */
.page-title { margin: 0; padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(24px, 3vw, 40px); font: 300 clamp(34px, 4.4vw, 60px)/1.1 var(--serif); letter-spacing: -0.01em; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 var(--gutter) 20px; padding-top: 16px; border-top: 1px solid var(--ink); }
.row-head h2 { margin: 0; font: 300 17px/1.2 var(--serif); letter-spacing: 0.16em; text-transform: uppercase; }   /* section headings = the wordmark's size and spacing on every page (client, 2026-10-27) */
.row-head a { color: var(--moss); font-size: 15px; white-space: nowrap; }
.row { margin-bottom: clamp(64px, 8vw, 112px); }
.row-head .count { color: var(--lichen); font-size: 15px; white-space: nowrap; }

/* A project can hold more than one film; each gets a heading, its shots and its links */
/* Films sit centred like Nowness: at most 1024px wide, and never taller than the screen allows */
.film { --film-w: min(calc(100% - 2 * var(--gutter)), 1024px, calc((100svh - 230px) * 16 / 9)); margin-bottom: clamp(48px, 6vw, 80px); }
.film .film-head, .film .player, .film .player-note { width: var(--film-w); margin-left: auto; margin-right: auto; }
.film-head { margin: 0 var(--gutter) 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.film-head h2 { margin: 0; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); }
.film-head p { margin: 4px 0 0; color: var(--lichen); font-size: clamp(16px, 1.3vw, 18px); font-style: italic; }

/* Every thumbnail is 16:9 */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) var(--gap); padding: 0 var(--gutter); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rule); }
.card .thumb img, .card .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .thumb video { opacity: 0; transition: opacity 300ms ease; }
.card.playing .thumb video { opacity: 1; }
.card .length { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 1px 7px; background: rgba(30, 31, 27, 0.72); color: var(--stone); font-size: 13px; line-height: 1.6; }
.card h3 { margin: 14px 0 0; font: 400 17px/1.35 var(--serif); }   /* 19–21 px until 2026-10-25: client found it too large */
.card a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--rule); }
.card .meta { display: flex; justify-content: space-between; gap: 12px; margin: 2px 0 0; color: var(--lichen); font-size: 15px; }

/* All work opens like Nowness's latest episodes: one feature beside four */
.lead-set { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 56px) var(--gap); padding: 0 var(--gutter); margin-bottom: clamp(56px, 7vw, 96px); }
.lead-set .feature { grid-row: span 2; }
.lead-set .feature h3 { font-size: clamp(24px, 2.2vw, 32px); }

/* Project page */
.project-head { padding: clamp(36px, 6vw, 72px) var(--gutter) clamp(20px, 3vw, 32px); }
.project-head .crumb { margin: 0 0 12px; font-size: 15px; color: var(--lichen); }
.project-head .crumb a { color: var(--moss); }
.project-head h1 { margin: 0; font: 300 clamp(34px, 4.4vw, 60px)/1.1 var(--serif); letter-spacing: -0.01em; }
.project-head .client { margin: 8px 0 0; color: var(--lichen); font-size: clamp(17px, 1.4vw, 20px); }
.player { position: relative; margin: 0 var(--gutter); aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.player video { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms ease; }
.player video.on { opacity: 1; }
.player-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin: 14px var(--gutter) 0; font-size: 15px; color: var(--lichen); }
.watch { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.watch a { color: var(--moss); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--rule); }
.watch a:hover { text-decoration-color: var(--moss); }
.project-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap) clamp(32px, 6vw, 96px); padding: clamp(48px, 7vw, 96px) var(--gutter); }
.project-body .text p { margin: 0 0 1em; max-width: 36em; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.6; }
.credits { margin: 0; font-size: 15px; }
.credits div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.credits div:last-child { border-bottom: 1px solid var(--rule); }
.credits dt { color: var(--lichen); }
.credits dd { margin: 0; }
.stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--gutter); margin-bottom: clamp(72px, 9vw, 128px); }
.stills img { aspect-ratio: 16 / 9; object-fit: cover; }

.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; margin: clamp(48px, 7vw, 96px) var(--gutter) 0; padding: 28px 0 40px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--lichen); }
.site-foot a { color: var(--moss); }

@media (max-width: 1000px) {
  .lead-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-set .feature { grid-column: 1 / -1; grid-row: auto; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .site-head { flex-direction: column; gap: 10px; }
  .site-nav { justify-content: flex-start; }
  .lead-set, .grid, .grid.two, .stills { grid-template-columns: minmax(0, 1fr); }
  .project-body { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .card .thumb video, .player video { transition: none; }
}

/* About */
.lede { margin: 0; max-width: 30em; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; }
.about-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) clamp(32px, 6vw, 96px); padding: 0 var(--gutter) clamp(64px, 8vw, 112px); }
.about-body p { margin: 0 0 1em; max-width: 34em; }
.about-body .zh { font-family: "Noto Serif SC", "Songti SC", serif; color: var(--lichen); font-size: 16px; line-height: 1.9; }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) var(--gap); padding: 0 var(--gutter); }
.founder img { aspect-ratio: 4 / 5; object-fit: cover; background: var(--rule); max-width: 420px; }
.founder h3 { margin: 18px 0 0; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); }
.founder .role { margin: 4px 0 12px; color: var(--lichen); font-style: italic; }
.founder p { max-width: 34em; }
.clients { list-style: none; margin: 0; padding: 0 var(--gutter); columns: 3 14em; column-gap: var(--gap); }
.clients li { padding: 8px 0; border-top: 1px solid var(--rule); break-inside: avoid; }
.about-cta { padding: 0 var(--gutter); font-size: clamp(20px, 1.8vw, 24px); }
.about-cta a, .contact a { color: var(--moss); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--rule); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap) clamp(32px, 6vw, 96px); padding: 0 var(--gutter); }
.contact-ways .lede { margin-bottom: 32px; }
.contact .credits dt { padding-top: 2px; }
.qr { width: 180px; height: auto; display: block; background: #fff; }
.hint { display: block; color: var(--lichen); font-size: 14px; margin-top: 6px; }
.enquiry h2 { margin: 0 0 20px; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); }
.enquiry form { display: grid; gap: 16px; max-width: 520px; }
.enquiry label { display: grid; gap: 6px; font-size: 15px; color: var(--lichen); }
.enquiry input, .enquiry select, .enquiry textarea { font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--lichen); padding: 6px 0; border-radius: 0; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.enquiry button { justify-self: start; font: inherit; font-size: 17px; color: var(--stone); background: var(--ink); border: 0; padding: 10px 22px; cursor: pointer; }
.enquiry button:hover { background: var(--moss); }
.enquiry .sent { color: var(--moss); font-size: 15px; margin: 0; }
.site-foot .legal { flex-basis: 100%; font-size: 13px; }

@media (max-width: 760px) {
  .about-intro, .contact, .founders { grid-template-columns: minmax(0, 1fr); }
}

/* The player takes each film's own shape (4:3 or 16:9) and still fits the screen */
.player { aspect-ratio: var(--ratio, 16 / 9); }
.film { --film-w: min(calc(100% - 2 * var(--gutter)), 1024px, calc((100svh - 230px) * var(--film-ratio, 16 / 9))); }
.film:has(.player[style*="4 / 3"]) { --film-ratio: 4 / 3; }
.credits .pending { color: var(--lichen); font-style: italic; }
.project-head .film-role { margin: 2px 0 0; color: var(--lichen); font-style: italic; font-size: clamp(16px, 1.3vw, 18px); }
/* Size the player to the screen space left under the page title, so the whole film is visible on arrival */
.film { --film-w: min(calc(100% - 2 * var(--gutter)), 1024px, calc((100svh - 440px) * var(--film-ratio, 16 / 9))); }
.film.single { --film-w: min(calc(100% - 2 * var(--gutter)), 1024px, calc((100svh - 390px) * var(--film-ratio, 16 / 9))); }
.film.single .player { margin-top: 8px; }

/* Single-film pages, after Nowness: the film comes first, directly under the menu, in a fixed frame
   (1024 x 593 on a 1440 x 900 screen) that always fits the screen; other shapes sit inside it with dark bars. */
.film.single { --film-w: min(calc(100% - 2 * var(--gutter)), 1024px, calc((100svh - 230px) * 1024 / 593)); margin: clamp(16px, 2.2vw, 32px) 0 0; }
.film.single .player { aspect-ratio: 1024 / 593; margin-top: 0; background: #111210; }
.film.single .player video { object-fit: contain; }
.film.single + .project-head { padding-top: clamp(28px, 3.5vw, 48px); }

/* Single-film pages: the frame takes the film's own shape (no side bars) and is sized to fit the screen */
.film.single { --film-w: min(calc(100% - 2 * var(--gutter)), 1200px, calc((100svh - 210px) * var(--film-ratio, 16 / 9))); }
.film.single .player { aspect-ratio: var(--ratio, 16 / 9); background: var(--rule); }
.film.single .player video { object-fit: cover; opacity: 1; }

/* All work opens with the showreel, edge to edge like the Nowness home page */
.showreel { position: relative; height: min(62svh, 56.25vw); min-height: 260px; overflow: hidden; background: var(--ink); }
.showreel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showreel::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(to top, rgba(20, 21, 18, 0.55), rgba(20, 21, 18, 0)); pointer-events: none; }
.showreel-caption { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 3vw, 36px); color: var(--stone); }
.showreel-title { margin: 0; max-width: 24em; font: 300 clamp(22px, 2.6vw, 36px)/1.2 var(--serif); }
.showreel-meta { margin: 6px 0 0; font-size: 15px; opacity: 0.85; }

/* All work layout demos */
.section-title { margin: 0; padding: clamp(32px, 4vw, 48px) var(--gutter) clamp(8px, 1vw, 12px); font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); }
.layout-a .showreel { height: calc(100svh - 78px); min-height: 360px; }
.layout-b .showreel { height: auto; aspect-ratio: 16 / 9; margin: clamp(12px, 1.7vw, 24px) var(--gutter) 0; max-height: calc(100svh - 110px); }
.demo-switch { position: fixed; z-index: 10; right: 16px; bottom: 16px; padding: 8px 14px; background: var(--ink); color: var(--stone); font-size: 14px; display: flex; gap: 14px; }
.demo-switch a { color: var(--stone); text-decoration: underline; text-underline-offset: 4px; }

/* One film height across the site: screen height minus 210px (690px on a 1440 x 900 screen).
   Films sit on the left page margin; widths follow each film's shape. */
:root { --film-h: max(calc(100svh - 210px), 300px); }
.layout-b .showreel { height: auto; max-height: none; aspect-ratio: 16 / 9; margin: clamp(12px, 1.7vw, 24px) 0 0 var(--gutter); width: min(calc(100% - 2 * var(--gutter)), calc(var(--film-h) * 16 / 9)); }

/* Project page: film on the left, title and text beside it, all visible without scrolling */
.film-split { display: grid; grid-template-columns: min(calc(var(--film-h) * var(--ratio)), calc(100% - 340px)) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 48px); align-items: start; padding: clamp(12px, 1.7vw, 24px) var(--gutter) 0; }
.film-split .player { position: relative; width: 100%; aspect-ratio: var(--ratio); margin: 0; background: var(--rule); overflow: hidden; }
.film-split .player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.film-info { max-width: 30em; }
.film-info .crumb { margin: 0 0 12px; font-size: 15px; color: var(--lichen); }
.film-info .crumb a { color: var(--moss); }
.film-info h1 { margin: 0; font: 300 clamp(28px, 2.4vw, 38px)/1.12 var(--serif); letter-spacing: -0.01em; }
.film-info .client { margin: 10px 0 0; color: var(--lichen); }
.film-info .film-role { margin: 2px 0 0; color: var(--lichen); font-style: italic; }
.film-info .text { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.film-info .text p { margin: 0 0 0.9em; font-size: clamp(16px, 1.15vw, 17px); line-height: 1.6; }
.film-info .watch { margin: 18px 0 0; }
.film-info .watch a { color: var(--moss); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--rule); }
.film-info .watch a:hover { text-decoration-color: var(--moss); }
.more-films { margin-top: clamp(64px, 8vw, 112px); }

/* Below 1200px wide the text moves under the film */
@media (max-width: 1200px) {
  .film-split { grid-template-columns: minmax(0, 1fr); }
  .film-split .player { max-width: calc(var(--film-h) * var(--ratio)); }
  .film-info { max-width: 36em; }
}

/* Refinements: title sized to sit with the header, column runs to the right margin,
   and Watch on Vimeo sits on the film's bottom edge */
.film-split { grid-template-columns: min(calc(var(--film-h) * var(--ratio)), calc(100% - 340px)) minmax(0, 1fr); align-items: stretch; }
.film-info { max-width: none; display: flex; flex-direction: column; }
.film-info .crumb { margin: 0 0 10px; }
.film-info h1 { font: 400 clamp(22px, 1.8vw, 26px)/1.2 var(--serif); letter-spacing: -0.005em; }
.film-info .client, .film-info .film-role { font-size: 15px; }
.film-info .client { margin-top: 8px; }
.film-info .text { margin-top: 26px; padding-top: 22px; }
.film-info .text p { max-width: 34em; }
.film-info .watch { margin: auto 0 0; padding-top: 18px; line-height: 1; }
@media (max-width: 1200px) {
  .film-split { align-items: start; }
  .film-info .watch { margin-top: 18px; padding-top: 0; }
}

/* Typography refinements on the project text column (Newsreader) */
.film-info { font-weight: 400; font-optical-sizing: auto; }
.film-info h1 { font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); letter-spacing: -0.008em; text-wrap: balance; }
.film-info .client { margin-top: 6px; font-weight: 400; }
.film-info .text { margin-top: 28px; padding-top: 0; border-top: 0; }
.film-info .text p { font-weight: 400; line-height: 1.58; text-wrap: pretty; hanging-punctuation: first; }
.film-info .watch a { font-weight: 400; }

/* Demo of the two column options */
.demo .film-split { padding-top: 56px; }
.film-info .runtime { margin: 2px 0 0; color: var(--lichen); font-size: 15px; }
.demo-switch b { font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
/* A: the text column is always 320px on the right margin; the film fills the space to its left, up to the standard height */
.split-a { grid-template-columns: minmax(0, 1fr) 320px; }
.split-a .player { width: min(100%, calc(var(--film-h) * var(--ratio))); justify-self: start; }
/* B: the film always has the standard height; if the column can't fit beside it, the text moves below */
.split-b { grid-template-columns: calc(var(--film-h) * var(--ratio)) minmax(0, 1fr); }
.split-b[style*="16 / 9"] { grid-template-columns: minmax(0, calc(var(--film-h) * var(--ratio))); }
.split-b[style*="16 / 9"] .film-info { max-width: 36em; padding-top: 8px; }
.split-b[style*="16 / 9"] .film-info .watch { margin-top: 18px; padding-top: 0; }
.demo-switch { gap: 16px; flex-wrap: wrap; max-width: calc(100% - 32px); }

/* Project pages, final rule (2026-10-19):
   4:3 films keep the standard height (690px on 1440x900) with the text column beside them;
   16:9 films sit beside a fixed 320px column on the right margin and take the remaining width (960 x 540 on 1440x900). */
.film-split { padding-top: clamp(24px, 3.9vw, 56px); grid-template-columns: min(calc(var(--film-h) * var(--ratio)), calc(100% - 340px)) minmax(0, 1fr); }
.film-split[style*="16 / 9"] { grid-template-columns: minmax(0, 1fr) 320px; }
.film-split[style*="16 / 9"] .player { width: min(100%, calc(var(--film-h) * var(--ratio))); justify-self: start; }
.film-info .runtime { margin: 2px 0 0; color: var(--lichen); font-size: 15px; }
/* The showreel starts at the same height as project films */
.layout-b .showreel { margin-top: clamp(24px, 3.9vw, 56px); }
@media (max-width: 1200px) {
  .film-split, .film-split[style*="16 / 9"] { grid-template-columns: minmax(0, 1fr); }
  .film-split[style*="16 / 9"] .player { width: 100%; max-width: calc(var(--film-h) * var(--ratio)); }
}
.film-info .commission { margin: 6px 0 0; color: var(--lichen); font-size: 15px; }
.film-info .commission + .client { margin-top: 0; }
.caps { letter-spacing: 0.04em; }

/* Photography project pages (2026-10-24): one photo at a time, at the shared film height (690 px on 1440 x 900),
   starting where the films start, with the text column on the right as on film pages.
   Landscapes sit on the left page margin like the films; portraits are centred in the photo area,
   so they share the landscapes' central axis. Click the halves, arrow keys or swipe to move. */
/* Same grid as the 16:9 film pages: photo area = the rest, text column 320 px, same gap (2026-10-24). */
/* Photography pages (client, 2026-10-24): every photo 720 px tall on a 1440 x 900 screen (scales with the film height),
   width following its shape; landscapes on the left page margin, portraits centred in the photo area;
   text column on the right, at least 200 px; same top line as the films. */
.photo-split { --photo-h: calc(var(--film-h) * 720 / 690); display: grid; grid-template-columns: minmax(0, calc(var(--photo-h) * 1.5)) minmax(200px, 1fr); gap: clamp(28px, 3.4vw, 48px); align-items: stretch; padding: clamp(24px, 3.9vw, 56px) var(--gutter) 0; }
.photo-info { display: flex; flex-direction: column; }
.viewer { position: relative; height: var(--photo-h); outline: none; user-select: none; -webkit-user-select: none; }
.viewer:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }
.viewer-frame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.viewer .slide { position: absolute; top: 0; left: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; opacity: 0; transition: opacity 550ms ease-in-out; pointer-events: none; }
.viewer .slide.portrait { left: 50%; transform: translateX(-50%); }
.viewer .slide.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .viewer { cursor: none; }
  .viewer-cursor { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(243, 243, 240, 0.92); box-shadow: 0 0 0 1px rgba(30, 31, 27, 0.25); pointer-events: none; opacity: 0; transition: opacity 150ms ease; }
  .viewer:hover .viewer-cursor { opacity: 1; }
  .viewer-cursor::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); transform: translate(-65%, -50%) rotate(45deg); }
  .viewer.back .viewer-cursor::before { transform: translate(-35%, -50%) rotate(-135deg); }
}
@media (max-width: 1200px) {
  .photo-split { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .viewer { width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: var(--photo-h); }
  .viewer .slide { left: 50%; transform: translateX(-50%); }
  .photo-info { max-width: 36em; }
}
@media (prefers-reduced-motion: reduce) { .viewer .slide { transition: none; } }
/* Instagram and Vimeo icons after Contact */
.site-nav .social { display: inline-flex; gap: 10px; align-items: center; align-self: center; margin-left: 4px; }
.site-nav .social a { display: inline-flex; color: var(--lichen); }
.site-nav .social a:hover { color: var(--ink); }
.site-nav .social svg { display: block; width: 18px; height: 18px; }

/* Credit line (client, 2026-10-24): in the footer on every page; on photo pages, which fit one screen, in the bottom-right
   corner under the text column (its left edge is lined up with the column by site.js) */
.site-foot .credit { flex-basis: 100%; font-size: 13px; }
/* Photo pages: credit on the same line as "All photography", right-aligned in the text column (wraps if too narrow) */
.photo-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.photo-credit { margin-left: auto; font-size: 13px; color: var(--lichen); text-decoration: none; }
.photo-info h1 .sub { display: block; }
/* Series main page (Allied Architects): laid out like the other photography pages, then the buildings by city in the
   home page's sections */
.series-cover { height: var(--photo-h); }
.series-cover img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.nowrap { white-space: nowrap; }
.series-split { align-items: start; }
.series-split .photo-info { min-height: var(--photo-h); }
.series-rows { padding-top: clamp(56px, 6vw, 88px); }
/* building covers at 4:3 (the photos are 4:3 or 3:2, so rooflines are never cut); names as small grey captions */
.series-rows .card .thumb { aspect-ratio: 4 / 3; }
.series-rows .card h3 { margin-top: 10px; font-size: 15px; line-height: 1.35; font-weight: 400; color: var(--lichen); }
.series-rows .card a:hover h3 { color: var(--ink); }
.photo-info .commission + .commission { margin-top: 0; }
@media (max-width: 1199px) { .series-cover { height: auto; } }
/* Allied Architects building pages: "All buildings" at the top of the column, the facts as a gallery wall label lower
   down (its last line level with the bottom of the photo, above the credit) */
.label-info .crumb { margin: 0; font-size: 15px; line-height: 1.2; }
.label-info .crumb a { color: var(--moss); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--rule); }
.label-info .crumb a:hover { text-decoration-color: var(--moss); }
.label-info .wall-label { margin-top: auto; }
.label-info .wall-label .commission:last-child { margin-top: 10px; }
.label-info .wall-label h1 { margin-bottom: 8px; }
.label-info .photo-credit-line { margin: 14px 0 0; font-size: 13px; line-height: 1; color: var(--lichen); text-align: right; }
/* Scroll cue on the series page: a thin chevron level with the bottom of the cover. Where the description ends above
   that line it sits at the foot of the text column; where the description runs longer (narrower screens) it moves into
   the gap between the cover and the text (placed by site.js). Bobs slowly; fades out once the page is scrolled. */
.photo-split { position: relative; }
.scroll-cue { position: absolute; top: 0; left: 0; width: 26px; height: 26px; display: block; color: var(--lichen); line-height: 0; opacity: 0; transition: opacity 400ms ease, color 200ms ease; }
.scroll-cue.placed { opacity: 1; }
.scroll-cue svg { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; animation: cue-bob 2.6s ease-in-out infinite; }
.scroll-cue:hover { color: var(--ink); }
.scroll-cue.placed.gone { opacity: 0; pointer-events: none; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-3px); opacity: 0.55; } 50% { transform: translateY(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
@media (max-width: 1199px) { .scroll-cue { display: none; } }
/* Building pages: "More by Allied Architects" above the other buildings, the link in the heading back to the series */
.series-more { margin: 0 var(--gutter) clamp(28px, 3vw, 40px); font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); }
.series-more a { color: inherit; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--rule); }
.series-more a:hover { text-decoration-color: var(--moss); }
/* Home (All work), layout B2 (client, 2026-10-26): the reel uses the film pages' .film-split / .player, so it has their
   exact size and place; the manifesto sits at the foot of the text column, level with the bottom of the reel, with the
   scroll cue under it; section headings in capitals above a pale rule */
.home-info { justify-content: flex-end; }
.home-statement { margin-top: auto; }
.home-statement .manifesto { margin: 0; font: 300 clamp(20px, 1.6vw, 23px)/1.42 var(--serif); color: var(--ink); text-wrap: pretty; }
.scroll-cue.inline { position: static; display: block; opacity: 1; transform: none; width: 26px; height: 26px; margin: 14px 0 -7px -2px; }
.scroll-cue.inline.gone { opacity: 0; }
.home main > .row:first-of-type { margin-top: clamp(72px, 8vw, 112px); }
.home .row-head, .listing .row-head { display: block; border-top: 0; padding: 0 0 16px; margin: 0 var(--gutter) 28px; border-bottom: 1px solid var(--rule); }
.home .row-head h2, .listing .row-head h2 { margin: 0; font: 300 17px/1.2 var(--serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
/* Film over text (client, 2026-10-26): the player always keeps the film's true shape (16:9 or 4:3); a long text column
   may run longer than the film, but never stretches the player (it had grown to 814 x 515 on a 1280 x 760 screen) */
.film-split .player { align-self: start; height: auto; aspect-ratio: var(--ratio); }
/* Dropdown menus under FILMS and PHOTOGRAPHY (client, 2026-10-26: moss glass, no outline). A frosted moss panel,
   right-aligned to the page margin just under the header; two columns by category, newest first; a small chevron on the
   menu item. Opens on hover (short delay), keyboard focus, or a first tap on touch screens (site.js). */
.site-head { position: relative; z-index: 20; }
.has-menu { position: static; display: inline-flex; align-items: baseline; }
.has-menu > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 2px 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform 200ms ease; }
.has-menu.open > a::after { transform: translateY(2px) rotate(225deg); }
.menu-panel { --mbg: rgba(74, 80, 67, 0.84); --mline: rgba(243, 243, 240, 0.16); --mink: var(--stone); --msub: rgba(243, 243, 240, 0.62);   /* moss glass (client, 2026-10-26; pale grey tried first) */
  position: absolute; top: 100%; right: var(--gutter); width: min(700px, calc(100vw - 2 * var(--gutter))); margin-top: 1px; padding: 26px 30px 22px;
  background: var(--mbg); -webkit-backdrop-filter: blur(24px) saturate(0.9); backdrop-filter: blur(24px) saturate(0.9);
  border: 0; color: var(--mink);   /* no outline: the dark panel is defined by its tone */ text-transform: none; letter-spacing: 0; font-size: 15px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms; }
.has-menu.open .menu-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease, transform 180ms ease; }
.menu-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; }
.menu-h { margin: 0 0 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--msub); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.site-nav .menu-panel a { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; color: var(--mink); line-height: 1.3; white-space: normal; text-decoration: none; }
.menu-panel li a .y { color: var(--msub); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-panel li a:hover .t, .menu-panel li a:focus-visible .t { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--msub); }
.menu-all { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--mline); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.site-nav .menu-all a { display: inline; padding: 0; }
.menu-all a::after { content: " \2192"; }
@media (prefers-reduced-motion: reduce) { .menu-panel, .has-menu.open .menu-panel { transition: none; transform: none; } }
@media (max-width: 899px) { .menu-panel { display: none; } .has-menu > a::after { display: none; } }   /* phones: plain links for now; a menu sheet comes with the mobile pass */
/* Contact page (2026-10-26): same top line as every page; invitation and direct details on the left, the enquiry form on
   the right. Fields are hairline underlines with their label above (not boxes); the button is moss. */
.contact-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(48px, 7vw, 120px); padding: clamp(24px, 3.9vw, 56px) var(--gutter) 0; align-items: start; }
.contact-intro h1 { margin: 0; font: 300 clamp(34px, 3.6vw, 52px)/1.1 var(--serif); letter-spacing: -0.01em; }
.contact-sub { margin: 18px 0 0; max-width: 26em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--moss); }
.contact-ways { margin: 40px 0 0; display: grid; gap: 14px; font-size: 15px; }
.contact-ways div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.contact-ways dt { color: var(--lichen); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding-top: 3px; }
.contact-ways dd { margin: 0; }
.contact-ways a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.contact-ways a:hover { text-decoration-color: var(--moss); }
.contact-ways .qr { display: block; width: 120px; height: auto; }
.enquiry form { display: grid; gap: 22px; max-width: none; }
.enquiry .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.enquiry label { display: grid; gap: 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lichen); }
.enquiry .cap { display: block; }
.enquiry .opt { margin-left: 6px; letter-spacing: .04em; text-transform: none; font-style: italic; color: var(--lichen); opacity: .8; }
.enquiry input, .enquiry select, .enquiry textarea { font: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 8px 0; border-radius: 0; }
.enquiry select { appearance: none; -webkit-appearance: none; padding-right: 22px; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, var(--lichen) 50%) right 6px center / 5px 5px no-repeat, linear-gradient(-45deg, transparent 50%, var(--lichen) 50%) right 1px center / 5px 5px no-repeat; }
.enquiry select:invalid { color: var(--lichen); }
.enquiry textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.enquiry ::placeholder { color: var(--lichen); opacity: .55; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus { outline: none; border-bottom-color: var(--moss); box-shadow: 0 1px 0 var(--moss); }
.enquiry .invalid input, .enquiry .invalid select, .enquiry .invalid textarea { border-bottom-color: #9a3b2b; }
.send-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 6px; }
.enquiry button { font: inherit; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); background: var(--moss); border: 0; padding: 13px 26px; cursor: pointer; transition: background 200ms ease; }
.enquiry button:hover, .enquiry button:focus-visible { background: var(--ink); }
.form-note { margin: 0; font-size: 13px; color: var(--lichen); }
@media (max-width: 899px) { .contact-split, .enquiry .pair { grid-template-columns: minmax(0, 1fr); } }
/* Contact, simplified (client, 2026-10-26): four fields in a soft panel; the panel's tone (a step darker than the page)
   frames the form without a hard outline, and the white fields inside read as places to write */
.contact-split { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.contact-sub { margin-top: 14px; color: var(--lichen); font-size: 17px; }
.contact-ways { margin-top: 44px; }
.contact-ways .qr { width: 96px; }
.enquiry { background: #E8E8E2; padding: clamp(28px, 3vw, 44px); }
.enquiry h2 { margin: 0 0 26px; font: 400 13px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.enquiry form { gap: 20px; }
.enquiry input, .enquiry textarea { background: var(--stone); }
.enquiry input, .enquiry select, .enquiry textarea { background-color: var(--stone); border: 1px solid transparent; border-bottom: 1px solid transparent; padding: 12px 14px; }
.enquiry select { background-position: right 20px center, right 15px center; padding-right: 40px; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus { border-color: var(--moss); box-shadow: none; }
.enquiry .invalid input, .enquiry .invalid select, .enquiry .invalid textarea { border-color: #9a3b2b; }
.enquiry label { gap: 8px; }
.enquiry button { justify-self: start; margin-top: 4px; }
.form-note { margin: -8px 0 0; }
.form-note:empty { display: none; }
/* Contact, middle ground (client, 2026-10-26): Ravens-style left column centred against the form; six fields; "Kind of
   work" is a custom list that opens as the moss glass of the header menus; fits 1440 x 900 without scrolling */
.contact-split { align-items: center; padding-top: clamp(24px, 3.9vw, 56px); }
.contact-intro h1 { font-size: clamp(34px, 3.4vw, 48px); }
.contact-sub { margin-top: 10px; color: var(--moss); font-size: clamp(19px, 1.5vw, 22px); font-weight: 300; }
.contact-ways { margin-top: 40px; }
.contact-ways dd { max-width: 22em; }
.contact-ways .qr { width: 88px; }
.enquiry { padding: clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 40px); }
.enquiry h2 { margin-bottom: 20px; }
.enquiry form { gap: 16px; }
.enquiry .pair { gap: 16px 24px; }
.enquiry .field { display: grid; gap: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lichen); }
.enquiry input, .enquiry textarea { padding: 10px 14px; }
.enquiry textarea { min-height: 96px; }
.pick { position: relative; }
.enquiry .pick-btn { display: block; width: 100%; text-align: left; font: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--stone); border: 1px solid transparent; padding: 10px 40px 10px 14px; cursor: pointer; position: relative; }
.enquiry .pick-btn:hover { background: var(--stone); }
.pick-btn::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1px solid var(--lichen); border-bottom: 1px solid var(--lichen); transform: rotate(45deg); transition: transform 200ms ease; }
.pick.open .pick-btn::after { transform: translateY(3px) rotate(225deg); }
.pick-btn .pick-val.empty { color: var(--lichen); opacity: .7; }
.enquiry .pick-btn:focus-visible, .pick.open .pick-btn { outline: none; border-color: var(--moss); }
.invalid .pick-btn { border-color: #9a3b2b; }
.pick-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 8px 0; list-style: none;
  background: rgba(74, 80, 67, 0.92); -webkit-backdrop-filter: blur(24px) saturate(0.9); backdrop-filter: blur(24px) saturate(0.9); color: var(--stone);
  font-size: 15px; letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease, visibility 0s 160ms; }
.pick.open .pick-list { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 160ms ease; }
.pick-list li { padding: 8px 16px; cursor: pointer; line-height: 1.3; }
.pick-list li:hover, .pick-list li:focus, .pick-list li[aria-selected="true"] { outline: none; background: rgba(243, 243, 240, 0.10); }
.pick-list li[aria-selected="true"]::after { content: " ✓"; color: rgba(243, 243, 240, 0.62); }
.enquiry button.send { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .pick-list, .pick.open .pick-list { transition: none; transform: none; } }
.send-row .form-note { margin: 0; }
/* Contact type retuned to the main page (client, 2026-10-26): the heading in the light 300 weight of the main page, the
   line under it at the manifesto's size and tone; captions a touch larger; the WeChat code's white blends into the page */
.contact-intro h1 { font: 300 clamp(30px, 2.6vw, 38px)/1.15 var(--serif); letter-spacing: 0; }
.contact-sub { margin-top: 12px; font: 300 clamp(20px, 1.6vw, 23px)/1.42 var(--serif); color: var(--lichen); }
.contact-ways dt, .enquiry label, .enquiry .field { font-size: 12px; letter-spacing: .14em; }
.enquiry h2 { font: 300 17px/1.2 var(--serif); letter-spacing: .16em; }
.contact-ways .qr { mix-blend-mode: multiply; }
/* Contact page fits the window on any desktop screen (client: no scrolling): the page is exactly one screen tall, the
   content sits in the space between header and footer, and the form's spacing shrinks with the window height */
@media (min-width: 900px) {
  .contact-page { min-height: 100svh; display: flex; flex-direction: column; }
  .contact-page main { flex: 1; display: flex; align-items: center; }
  .contact-page .contact-split { width: 100%; padding-top: clamp(16px, 3vh, 40px); padding-bottom: clamp(16px, 3vh, 40px); }
  .contact-page .site-foot { margin-top: 0; padding: clamp(14px, 2.4vh, 28px) 0 clamp(16px, 3vh, 40px); }
  .contact-page .enquiry { padding: clamp(18px, 3.2vh, 36px) clamp(28px, 3vw, 40px); }
  .contact-page .enquiry h2 { margin-bottom: clamp(12px, 2.2vh, 20px); }
  .contact-page .enquiry form, .contact-page .enquiry .pair { row-gap: clamp(9px, 1.8vh, 16px); }
  .contact-page .enquiry label, .contact-page .enquiry .field { gap: clamp(4px, 0.8vh, 8px); }
  .contact-page .enquiry input, .contact-page .enquiry .pick-btn, .contact-page .enquiry textarea { padding-top: clamp(6px, 1.1vh, 10px); padding-bottom: clamp(6px, 1.1vh, 10px); }
  .contact-page .enquiry textarea { min-height: clamp(56px, 10vh, 96px); height: clamp(56px, 10vh, 96px); }
  .contact-page .contact-ways { margin-top: clamp(20px, 4vh, 40px); }
}
/* FEATURED CLIENTS: five logos to a row, each centred in an equal cell, in ink at 85% so they sit quieter than the work */
.client-wall { list-style: none; margin: 0 var(--gutter); padding: 8px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 32px; }
.client-wall li { height: 128px; display: flex; align-items: center; justify-content: center; }
.client-wall img { display: block; width: auto; max-width: 100%; object-fit: contain; opacity: .85; }
.featured-clients { margin-top: clamp(72px, 8vw, 112px); }
.home .featured-clients .row-head { margin-bottom: 20px; }
@media (max-width: 899px) { .client-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-wall li { height: 96px; } }
/* Section headings that link (FILMS -> Films page, PHOTOGRAPHY -> Photography page): same look, moss underline on hover */
.row-head h2 a { color: inherit; text-decoration: none; }
.row-head h2 a:hover, .row-head h2 a:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--moss); }
.row-head h2 a::after { content: " \2192"; font-size: .7em; opacity: 0; transition: opacity 200ms ease; }
.row-head h2 a:hover::after, .row-head h2 a:focus-visible::after { opacity: .6; }
.site-nav .menu-h a { display: inline; padding: 0; color: inherit; }
.site-nav .menu-h a:hover { color: var(--mink); }
/* Films and Photography pages: same top line as the other pages, then sections in the main page's style */
.listing main > .row:first-of-type { margin-top: clamp(24px, 3.9vw, 56px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* About, redesigned 2026-10-27, second version (client). First screen: the label on the films' top line, the statement
   (both paragraphs the same size) and WORK WITH US at the foot of the left column, level with the reel's bottom edge; the
   reel on the right, cropped to 4:3 and sized like the 4:3 film pages (920 x 690 on 1440 x 900), never stretched.
   Then FOUNDERS side by side: round portrait, then name, role and bio beneath; then the main page's logo wall. */
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) min(calc(var(--film-h) * 4 / 3), calc(100% - 380px)); gap: clamp(28px, 3.4vw, 48px); padding: clamp(24px, 3.9vw, 56px) var(--gutter) 0; align-items: start; }
.about-text { display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch; }
.about-statement p { margin: 0; font: 300 clamp(17px, 1.3vw, 19px)/1.55 var(--serif); color: var(--ink); text-wrap: pretty; }
.about-statement p + p { margin-top: 1em; }
.about-statement .about-go { margin-top: 30px; }
.about-go a { display: inline-block; font: 400 13px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); background: var(--moss); padding: 14px 26px; transition: background 200ms ease; }
.about-go a:hover, .about-go a:focus-visible { background: var(--ink); }
.about-player { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #111; overflow: hidden; }
.about-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-page .row-head { display: block; border-top: 0; padding: 0 0 16px; margin: 0 var(--gutter) 40px; border-bottom: 1px solid var(--rule); }
.about-page .row-head h2 { margin: 0; font: 300 17px/1.2 var(--serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.about-founders { margin-top: clamp(88px, 9vw, 136px); }
.founder-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(48px, 7vw, 120px); margin: 0 var(--gutter); }
.founder-card img { display: block; width: clamp(160px, 15vw, 216px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--rule); }
.founder-card h3 { margin: 32px 0 0; font: 300 clamp(26px, 2.2vw, 32px)/1.15 var(--serif); }
.founder-card .role { margin: 10px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lichen); line-height: 1.5; }
.founder-card .bio { margin: 20px 0 0; max-width: 34em; font-size: 17px; line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.about-page .featured-clients { margin-top: clamp(88px, 9vw, 136px); }
@media (max-width: 1099px) {
  .about-hero { grid-template-columns: minmax(0, 1fr); }
  .about-player { order: -1; }
  .about-statement { max-width: 36em; }
}
@media (max-width: 799px) { .founder-pair { grid-template-columns: minmax(0, 1fr); } }
/* Final touches (client, 2026-10-27) */
/* Smooth page changes: the browser crossfades from one page to the next while the header stays put (cross-document view
   transitions; Chrome, Edge and Safari 18.2+; other browsers simply change page). Pages are prefetched on hover. */
@view-transition { navigation: auto; }
html { background: var(--stone); }
.site-head { view-transition-name: site-head; }
::view-transition-old(root) { animation: 260ms cubic-bezier(.4, 0, .2, 1) both vt-out; }
::view-transition-new(root) { animation: 420ms cubic-bezier(.2, 0, 0, 1) 60ms both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
::view-transition-group(site-head) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms; animation-delay: 0s; }
}
/* Instagram: no account yet, so the icon shows a small "coming soon" note (moss glass, like the menus) on hover, focus
   or tap, instead of a link */
.site-nav .social .soon { position: relative; display: inline-flex; padding: 0; border: 0; background: none; color: var(--lichen); cursor: default; font: inherit; }
.site-nav .social .soon:hover, .site-nav .social .soon:focus-visible { color: var(--ink); }
.soon-note { position: absolute; top: calc(100% + 12px); right: -8px; padding: 8px 13px; white-space: nowrap; background: rgba(74, 80, 67, 0.84); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--stone); font: 400 11px/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 60; }
.soon:hover .soon-note, .soon:focus-visible .soon-note, .soon.show .soon-note { opacity: 1; transform: none; }
/* Allied Architects card: one series, ten buildings. The badge says so; on hover the covers step through the buildings */
.card .series-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 450ms ease; }
.card .series-layer.on { opacity: 1; }
.menu-panel .series { margin-left: 6px; font-size: 12px; letter-spacing: .04em; opacity: .62; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .soon-note, .card .series-layer { transition: none; } }
/* Mobile pass (2026-10-27). Below 900 px the header is the wordmark and a MENU button; the button opens a full-screen
   sheet in the dropdowns' moss glass with the five pages (light, large capitals), the film and photography sections under
   them, and the icons at the foot. Desktop is unchanged. */
.menu-toggle, .phone-menu { display: none; }
@media (max-width: 899px) {
  .site-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gutter); position: relative; z-index: 80; }
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; padding: 8px 0 8px 12px; margin: -8px 0; border: 0; background: none; color: var(--ink); font: 400 12px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
  .menu-open .site-head { background: transparent; border-bottom-color: transparent; }
  .menu-open .site-head .wordmark, .menu-open .menu-toggle { color: var(--stone); }
  .phone-menu { display: block; position: fixed; inset: 0; z-index: 70; padding: 96px var(--gutter) 32px; overflow-y: auto; background: rgba(74, 80, 67, 0.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--stone); opacity: 0; transition: opacity 240ms ease; }
  .phone-menu[hidden] { display: none; }
  .phone-menu.on { opacity: 1; }
  .phone-menu nav { display: flex; flex-direction: column; min-height: 100%; }
  .pm-main, .pm-sub { list-style: none; margin: 0; padding: 0; }
  .pm-main > li { border-bottom: 1px solid rgba(243, 243, 240, 0.16); padding: 14px 0; }
  .pm-main > li > a { display: block; font: 300 24px/1.2 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); text-decoration: none; }
  .pm-main > li > a[aria-current] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
  .pm-sub { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
  .pm-sub a { font-size: 15px; color: rgba(243, 243, 240, 0.7); text-decoration: none; }
  .pm-foot { display: flex; gap: 18px; align-items: center; margin: auto 0 0; padding-top: 32px; }
  .pm-foot a, .pm-foot .soon { display: inline-flex; color: var(--stone); }
  .pm-foot .soon { position: relative; padding: 0; border: 0; background: none; font: inherit; cursor: default; }
  .pm-foot svg { width: 22px; height: 22px; }
  .pm-foot svg path[fill] { fill: rgba(74, 80, 67, 1); }
  .pm-foot .soon-note { top: auto; bottom: calc(100% + 10px); left: -8px; right: auto; background: var(--stone); color: var(--moss); }
  .pm-foot .soon:hover .soon-note, .pm-foot .soon.show .soon-note { opacity: 1; transform: none; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 599px) {
  .wordmark { font-size: 14px; letter-spacing: .14em; }
  .wordmark span { font-size: 15px; margin-right: 9px; }
}
@media (prefers-reduced-motion: reduce) { .phone-menu { transition: none; } }
/* Contact on phones: the form's fields shrink with the screen (an input's default width had pushed the page 40 px wide) */
.enquiry input, .enquiry select, .enquiry textarea, .enquiry .pick { min-width: 0; max-width: 100%; box-sizing: border-box; }
.enquiry label, .enquiry .pair > * { min-width: 0; }
@media (max-width: 899px) {
  /* Contact: one column (a later desktop rule had overridden the earlier stacking rule), invitation first, then the form */
  .contact-split { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
  .contact-ways { overflow-wrap: anywhere; }
}
/* Phone header, revised (client, 2026-10-27: MENU must be on screen without zooming or scrolling): the wordmark goes on
   two lines, 树石写影 above TOPOPHILIA FILMS, so MENU always has room on the right, even on the narrowest phones */
@media (max-width: 899px) {
  .site-head { align-items: center; }
  .wordmark { display: flex; flex-direction: column; gap: 5px; min-width: 0; line-height: 1.1; }
  .wordmark span { margin-right: 0; }
  .menu-toggle { flex: none; padding: 12px 0 12px 16px; margin: -12px 0; }
}
/* Phone header, refined (client, 2026-10-27: the MENU word felt awkward). A quiet two-line icon (two hairlines, the lower
   one shorter) instead of the word, centred against the two-line wordmark; it turns into a thin X on the open sheet.
   The header is slimmer and stays within reach: it slides away while scrolling down and comes back on any scroll up
   (site.js), so the menu is never more than a small gesture away. */
@media (max-width: 899px) {
  .site-head { position: sticky; top: 0; padding: 13px var(--gutter); background: rgba(243, 243, 240, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform 320ms cubic-bezier(.2, 0, 0, 1), background-color 200ms ease, border-color 200ms ease; }
  .site-head.tucked { transform: translateY(-100%); }
  .menu-open .site-head { transform: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wordmark { gap: 4px; }
  .menu-toggle { width: 44px; height: 44px; margin: -6px -10px -6px 0; padding: 0; justify-content: center; align-items: center; }
  .bars { position: relative; display: block; width: 24px; height: 9px; }
  .bars i { position: absolute; right: 0; height: 1.25px; background: currentColor; border-radius: 1px; transition: transform 260ms cubic-bezier(.2, 0, 0, 1), width 260ms ease, top 260ms ease; }
  .bars i:first-child { top: 0; width: 24px; }
  .bars i:last-child { top: 7.75px; width: 16px; }
  .menu-open .bars i { top: 3.9px; width: 22px; }
  .menu-open .bars i:first-child { transform: rotate(45deg); }
  .menu-open .bars i:last-child { transform: rotate(-45deg); }
  .phone-menu { padding-top: 92px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .site-head, .bars i { transition: none; } }
/* Phone menu icon, three lines (client, 2026-10-27): three short hairlines of equal length, 5 px apart; on the open sheet
   the middle one fades and the outer two cross into the thin X */
@media (max-width: 899px) {
  .bars { width: 20px; height: 11.5px; }
  .bars i { left: 0; right: auto; width: 20px !important; height: 1.25px; }
  .bars i:nth-child(1) { top: 0; }
  .bars i:nth-child(2) { top: 5.1px; transition: opacity 180ms ease; }
  .bars i:nth-child(3) { top: 10.25px; }
  .menu-open .bars i:nth-child(1), .menu-open .bars i:nth-child(3) { top: 5.1px; width: 20px; }
  .menu-open .bars i:nth-child(1) { transform: rotate(45deg); }
  .menu-open .bars i:nth-child(2) { opacity: 0; transform: none; }
  .menu-open .bars i:nth-child(3) { transform: rotate(-45deg); }
}
/* About, founders centred (client, 2026-10-27): each portrait, name and role is centred in its column; the bio stays
   left-aligned for easy reading, in a measure centred under them */
.founder-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.founder-card .bio { text-align: left; margin-left: auto; margin-right: auto; }
/* Studio mark (client, 2026-10-30, option A): the hand-drawn rings before the wordmark on every page, and beside every
   © line. Desktop: 28 px, centred on the wordmark's capitals, without changing the header's 79 px height. Phones: 32 px
   beside the two-line wordmark. */
.wordmark .mark { display: inline-block; width: 28px; height: 28px; margin: -6px 14px -6px 0; vertical-align: middle; position: relative; top: -4px; }
.site-foot .credit { display: inline-flex; align-items: center; gap: 10px; }
.site-foot .mark { width: 20px; height: 20px; flex: none; color: var(--ink); }
.photo-credit { display: inline-flex; align-items: center; gap: 8px; }
.photo-credit .mark { width: 15px; height: 15px; flex: none; }
@media (max-width: 899px) {
  .wordmark { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; justify-content: start; }
  .wordmark .mark { grid-column: 1; grid-row: 1 / 3; width: 32px; height: 32px; margin: 0; top: 0; }
  .wordmark span { grid-column: 2; grid-row: 1; }
}
/* Laptop header, larger mark on one line (client, 2026-10-30, mockup B): mark 38 px before 树石写影 TOPOPHILIA FILMS,
   centred with the menu; the header keeps its 79 px, so films and photos stay on the 135 line. Phones are locked and
   unaffected (these rules apply from 900 px up). */
@media (min-width: 900px) {
  .site-head { align-items: center; padding-top: 20px; padding-bottom: 20px; }
  .wordmark { display: inline-flex; align-items: baseline; }
  .wordmark .mark { align-self: center; width: 38px; height: 38px; margin: 0 16px 0 0; top: 0; }
}
/* Wordmark alignment (client, 2026-10-30: the names looked "slightly up and down"). Measured ink on a shared baseline:
   树石写影 (Noto Serif SC 18 px) is 17 px tall, its centre 1 px above that of TOPOPHILIA FILMS (Newsreader 17 px caps,
   13 px tall). Lowering the Chinese by 1 px puts both on one optical centre line, the Chinese 2 px proud above and below. */
@media (min-width: 900px) { .wordmark span { position: relative; top: 1px; } }
/* One optical centre line across the laptop header (measured 2026-10-30): the mark is centred on the line box, which sat
   3.5 px below the letters' ink. Mark up 3.5 px, names down 0.5 px: mark, names and menu capitals all centre at about 36 px
   on the 79 px header (menu 36.6). */
@media (min-width: 900px) {
  .wordmark { position: relative; top: 0.5px; }
  .wordmark .mark { position: relative; top: -3.5px; }
}
/* Narrow laptops and tablets held sideways (900–1199 px): the larger mark made the menu wrap onto a second line at 1024 px.
   Slightly smaller mark and tighter menu spacing keep everything on one line and the header at 79 px. */
@media (min-width: 900px) and (max-width: 1199px) {
  .wordmark .mark { width: 32px; height: 32px; margin-right: 12px; top: -3px; }
  .site-nav { column-gap: 18px; }
  .site-nav .social { margin-left: 0; }
}
/* Narrow laptops, corrected (2026-10-30): with the 32 px mark the header needs 23 px padding to stay 79 px, and the mark's
   nudge is 0.5 px at that size (measured). From 900 to 1023 px the menu (about 540 px wide) did not fit beside the wordmark
   and wrapped, also before the larger mark: there the menu is set at 12 px with tighter spacing, so it stays on one line. */
@media (min-width: 900px) and (max-width: 1199px) {
  .site-head { padding-top: 23px; padding-bottom: 23px; }
  .wordmark .mark { top: -0.5px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .site-nav { font-size: 12px; letter-spacing: 0.1em; column-gap: 14px; }
  .site-nav .social { gap: 8px; }
}
/* 900–959 px (small tablets held sideways): a little tighter letter-spacing in the menu and the wordmark, so the header still
   fits on one line at 79 px (checked at 900, 920, 940, 959). */
@media (min-width: 900px) and (max-width: 959px) {
  .site-nav { letter-spacing: 0.08em; column-gap: 12px; }
  .wordmark { letter-spacing: 0.13em; }
  .wordmark .mark { margin-right: 10px; }
}
/* Linked section headings (FILMS, PHOTOGRAPHY on the main page) had been shrunk to 15 px by the older ".row-head a" rule;
   they now take the heading's own size, so every section heading matches the wordmark exactly (client, 2026-10-30). */
.row-head h2 a { font-size: inherit; letter-spacing: inherit; font-weight: inherit; }
/* Menu stays put between pages (client, 2026-10-31): with "always show scroll bars" (Mac with a mouse, Windows) the short
   Contact page had no scrollbar, so the whole menu sat 15 px further right. Always reserve it; trackpads show no change. */
html { overflow-y: scroll; }