/* ============================================================
   MATTER+ENERGY — Design System
   Source of truth: Figma wireframe [Ext] M&E_Website_Wireframe
   + M+E Web Design System (pdp-studio-design-system).
   Palette: white ground, near-black ink, one grey.
   Type: ABC Diatype (everything structural), Courier (data layer),
         Times (belief statements, stances).
   Whitespace is the structural device. Links are underlined text.
   ============================================================ */

@font-face {
  font-family: 'ABC Diatype';
  src: url('/assets/fonts/ABCDiatype-Regular.woff2') format('woff2'), url('/assets/fonts/ABCDiatype-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ABC Diatype';
  src: url('/assets/fonts/ABCDiatype-RegularItalic.woff2') format('woff2'), url('/assets/fonts/ABCDiatype-RegularItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --void: #050507;          /* the room the monument stands in */
  --void-mass: #0d0d13;     /* the mass, for the no-WebGL fallback */
  --sun: #FF9E3D;           /* the corona, matched to the shader's amber */
  --grey: #6E6E6E;
  --grey-soft: rgba(10, 10, 10, 0.08);
  --muted-inv: rgba(255, 255, 255, 0.6);
  --placeholder: #F2F2F2;                  /* media frame before its image loads */
  --frame-dark: #111111;                   /* wide-mosaic backdrop, deliberately not --ink */
  --t-glyph: 28px;                         /* interface glyphs (the mobile-nav close), not type */
  --sans: 'ABC Diatype', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Courier New', Courier, monospace;
  --serif: 'Times New Roman', Times, serif;
  --edge: clamp(14px, 1.667vw, 32px);
  --gap: clamp(14px, 1.667vw, 32px);
  --block: clamp(56px, 7vw, 120px);
  /* The spacing scale. The site had a type system of seventeen tokens, enforced
     to zero raw font-sizes, and no spacing system at all: 120 hard px values,
     and the one role "separation between sections" took seven different values
     across the pages (16, 22, 24, 30, 36, 40, 56). These are the steps the site
     was already reaching for, named so the next rule can use one instead of
     inventing an eighth. */
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.55, 0, 1, 0.45);    /* things leaving: shorter, sharper */
  /* type scale: one weight, six sizes; ratio ~1.25 between steps, display via clamp */
  --t-xs: 11px;                            /* Courier meta */
  --t-s: 12px;                             /* labels, small captions */
  --t-m: 14px;                             /* captions, tables, lists */
  --t-body: 16px;                          /* body */
  --t-read: clamp(16px, 1.25vw, 20px);     /* long-form article body: 18px at 1440 */
  --t-intro: clamp(17px, 1.72vw, 33px);    /* masthead, Read More, Next (Figma 33/108%/-0.04em @1920) */
  --t-cap: clamp(13px, 0.833vw, 16px);     /* Diatype captions, uppercase (Figma 16/90%/-0.02em) */
  --t-meta: clamp(12px, 0.9375vw, 18px);   /* Courier footer/labels (Figma 18/110%/+0.03em) */
  --t-line: clamp(12px, 0.99vw, 19px);     /* Courier verticals line (Figma 19/120%/-0.05em) */
  --t-nav: clamp(14px, 1.04vw, 20px);      /* nav, wordmark (Figma 20/120%/-0.02em) */
  --t-body-lg: clamp(17px, 1.5vw, 26px);   /* opening beats, four places */
  --t-lead: clamp(22px, 2.3vw, 38px);      /* block leads */
  --t-stance: clamp(28px, 4.17vw, 80px);   /* Times statements (Figma Header 4: 80/90%/-0.08em) */
  --t-stance-long: clamp(24px, 2.9vw, 54px); /* a position that runs past one line */
  /* floor lowered from 36: it shared --t-title's floor, so below about 720px a
     case title and a subsection heading rendered at the same size and the
     hierarchy between them vanished on every phone. 28 is an existing step. */
  --t-h3: clamp(28px, 4.06vw, 78px);       /* Diatype Header 3 (78/90%/-0.04em) */
  --t-title: clamp(36px, 5vw, 96px);       /* case titles (Figma 96/110%/-0.08em) */
  --t-display: clamp(44px, 6.56vw, 126px); /* news titles / feature / cta (Figma 126/90%/-0.04em) */
  --t-giant: clamp(60px, 10.4vw, 200px);   /* Figma Header 1 (200/85%/-0.04em) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
/* one weight on the whole site: Regular. Scale does the hierarchy. */
h1, h2, h3, h4, h5, h6, b, strong, th, blockquote, figcaption, dt { font-weight: 400; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* on the dark fields (footer, call-to-action band, films) an ink outline vanishes: paper there */
.footer :focus-visible, .cta-band :focus-visible, .frame--film :focus-visible, .frame.is-overlay :focus-visible, .vclose:focus-visible, .matter-stage :focus-visible { outline-color: var(--paper); }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 999; }
.skip:focus { left: 8px; }

.wrap { padding-left: var(--edge); padding-right: var(--edge); max-width: 1440px; margin-left: auto; margin-right: auto; }

/* view transitions: quiet cross-fade between pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.22s; animation-timing-function: var(--ease-out); }
::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: var(--ease); }
/* pages crossfade; nothing travels between them. A grid preview and a case hero
   are not always the same picture, so a morph between them would lie
   (Manuel, Sep 2026). The mark alone is captured on its own, so the
   crossfade never touches it. */
::view-transition-group(mark) { animation-duration: 0.28s; animation-timing-function: var(--ease); }

/* ---------- type utilities ---------- */
.mono { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.4; }
.label { font-family: var(--sans); font-size: var(--t-nav); letter-spacing: -0.02em; text-transform: none; color: var(--ink); display: block; line-height: 1.2; font-weight: 400; margin: 0; }
.muted { color: var(--grey); }
.serif { font-family: var(--serif); letter-spacing: -0.01em; }
.lead { font-size: var(--t-lead); line-height: 1.12; letter-spacing: -0.025em; max-width: 26em; }
.prose { font-size: var(--t-body); line-height: 1.45; max-width: 34em; }
.prose p + p { margin-top: 0.9em; }
.prose.small { font-size: var(--t-m); }
.stance { font-family: var(--serif); font-size: var(--t-stance); line-height: 0.95; letter-spacing: -0.04em; max-width: 20em; }
.stance--long { font-size: var(--t-stance-long); line-height: 1.06; letter-spacing: -0.03em; max-width: 22em; }
.result { font-size: var(--t-lead); line-height: 1.25; letter-spacing: -0.02em; max-width: 30em; }

/* underlined text links, animated underline */
.u, .prose a, .lead a, .n-link, .f-link, .j-more a, .cta-mail, .case-next a, .city-list a, .cap-meta a, .index-table a, .foot-cols a, .empty-state a, .case-title .label a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
  transition: background-size 0.35s var(--ease);
}
.u:hover, .prose a:hover, .lead a:hover, .n-link:hover, .f-link:hover, .j-more a:hover, .cta-mail:hover, .case-next a:hover, .city-list a:hover, .cap-meta a:hover, .index-table a:hover, .foot-cols a:hover, .empty-state a:hover, .case-title .label a:hover { background-size: 0 1px; background-position: 100% 100%; }
.cap-meta a, .index-table a { background-size: 0 1px; background-position: 100% 100%; }
.cap-meta a:hover, .index-table a:hover { background-size: 100% 1px; background-position: 0 100%; }

/* ============================================================
   MASTHEAD — two-column manifesto + filter line, tt icon right
   ============================================================ */
.masthead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap); padding-top: var(--edge); padding-bottom: clamp(44px, 6vw, 110px);
  min-height: clamp(150px, 26.9vw, 387px);
  align-content: start;
}
.case-head { min-height: clamp(150px, 26.9vw, 387px); align-content: start; }
.masthead .lede, .masthead .intro { font-size: var(--t-intro); line-height: 1.08; letter-spacing: -0.04em; max-width: 27em; }
.lede-cities { display: block; }
.masthead .bu-line { margin-top: 12px; display: block; color: var(--grey); }
.bu-line a { display: inline-block; padding: 5px 0; margin-right: 0; transition: color 0.2s; }
.bu-line > span { margin-right: 0.35em; }
.bu-line { display: block; font-size: var(--t-line); letter-spacing: -0.05em; text-transform: none; line-height: 1.2; }
.bu-line a[data-bu=""] { text-transform: uppercase; }
.bu-line a:hover, .bu-line a.active { color: var(--ink); }
.bu-line a.active { text-decoration: underline; text-underline-offset: 3px; }
.masthead .mark { justify-self: end; }
.masthead .mark img { width: clamp(24px, 1.9vw, 34px); height: auto; }

/* ============================================================
   NAV — sparse row, underline on hover only
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding-top: 14px; padding-bottom: 14px; padding-right: calc(var(--edge) + 52px);
}
.nav::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: -1;
  background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav .wordmark { font-size: var(--t-nav); letter-spacing: -0.02em; line-height: 1.2; text-transform: uppercase; }
.nav-left { display: flex; flex-direction: column; gap: 4px; }
.nav-line .bu-line { margin: 0; color: var(--grey); }
.nav-line .bu-line a { padding: 2px 0; }
.fixed-mark { position: fixed; top: 14px; right: var(--edge); z-index: 70; mix-blend-mode: difference; view-transition-name: mark; }  /* captured on its own, so the crossfade never touches it */
.fixed-mark img { width: clamp(24px, 1.9vw, 34px); height: auto; filter: invert(1); }
.masthead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.masthead .intro { padding-right: 52px; }
.opening .hero-link, .offer .hero-link { margin-top: 1em; }
.opening .hero-link a, .offer .hero-link a { text-decoration: underline; text-underline-offset: 0.12em; }
.nav .links { display: flex; gap: clamp(20px, 4vw, 84px); font-size: var(--t-nav); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.2; }
.nav .links a { position: relative; padding: 4px 0; }
.nav .links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease); }
.nav .links a:hover::after, .nav .links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   MEDIA — frames keep the asset's own orientation
   ============================================================ */
.frame { position: relative; overflow: hidden; background: var(--placeholder); width: 100%; }
.frame--film { background-image: var(--film-ground); background-size: cover; background-position: center; }
@media (max-width: 760px) {
  .frame--film, .reel--film { background-image: var(--film-ground-s, var(--film-ground)); }
}
.frame--film > video[data-autoplay] { opacity: 0; transition: opacity 0.3s var(--ease); }
.frame--film > video[data-autoplay].is-playing { opacity: 1; }
.reel--film { background-image: var(--film-ground); background-size: cover; background-position: center; }
.reel--film video[data-autoplay] { opacity: 0; transition: opacity 0.3s var(--ease); }
.reel--film video[data-autoplay].is-playing { opacity: 1; }
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }
.frame--ph { background: var(--ink); display: flex; align-items: center; justify-content: center; }
.frame--ph .ph-mark { width: clamp(34px, 3.4vw, 60px); height: auto; opacity: 0.92; }
.frame--band { width: min(100%, calc(80vh * var(--r, 2.2))); }
.frame--band > img { width: 100%; height: 100%; }
.band { padding: clamp(24px, 3vw, 56px) var(--edge); max-width: 1440px; margin: 0 auto; }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.strip-4 { columns: 4; column-gap: var(--gap); padding-bottom: var(--block); } /* cascade: every picture at its own shape, no holes */
.strip-4 > .frame { break-inside: avoid; margin-bottom: var(--gap); }

/* image reveal: soft fade as it enters, gentle scale on hover inside links */
@media (prefers-reduced-motion: no-preference) {
  .frame > img { transition: transform 0.9s var(--ease), opacity 0.6s var(--ease); }
  /* no hover zoom: it cut the edges of every picture (no-crop rule, 24 Sep 2026) */
}

/* caption row under media */
.caption-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
  padding-top: clamp(10px, 1.2vw, 23px); padding-bottom: clamp(24px, 2.6vw, 50px);
}
.caption-row .cap-meta { grid-column: span 3; }
.caption-row .cap-text, .caption-row .cap-desc { grid-column: span 9; }
.work-pair .caption-row, .work-trio .caption-row, .two-up .caption-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.work-pair .caption-row .cap-meta, .work-trio .caption-row .cap-meta, .two-up .caption-row .cap-meta { grid-column: span 3; }
.work-pair .caption-row .cap-text, .work-trio .caption-row .cap-text, .two-up .caption-row .cap-text, .work-pair .caption-row .cap-desc, .work-trio .caption-row .cap-desc, .two-up .caption-row .cap-desc { grid-column: span 3; }
.caption-row .cap-meta { font-family: var(--sans); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.25; }
.caption-row .cap-desc { font-size: var(--t-body); letter-spacing: -0.02em; line-height: 1.35; max-width: 36em; margin-left: 0; width: 100%; text-wrap: pretty; }

/* ============================================================
   WORK — opening beats, then the proof
   ============================================================ */
.opening {
  text-align: center; padding-top: clamp(24px, 3vw, 56px); padding-bottom: clamp(44px, 6vw, 100px);
  font-size: var(--t-intro); line-height: 1.08; letter-spacing: -0.04em;
}
.opening p, .opening h1 { max-width: min(920px, 100%); margin: 0 auto; font-size: inherit; font-weight: 400; line-height: inherit; letter-spacing: inherit; }
.opening p + p { margin-top: 0.15em; }

.work-grid { display: flex; flex-direction: column; }
.work-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.work-pair .frame:not([style*="aspect-ratio"]) { aspect-ratio: 4 / 5 !important; }
/* the trio row: three columns of stills (or native-ratio films), one on mobile */
.work-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.work-trio .frame:not([style*="aspect-ratio"]) { aspect-ratio: 4 / 5 !important; }
.work-cell--solo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: end; padding-bottom: clamp(36px, 4.5vw, 84px); }
.work-cell--solo .frame:not([style*="aspect-ratio"]) { aspect-ratio: 4 / 5 !important; }
.work-cell--solo .solo-copy { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 44px); padding-bottom: 4px; }
.work-cell--solo .solo-copy .lead { text-wrap: balance; }
.work-cell--solo .cap-meta { font-family: var(--sans); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.25; }
.work-cell { min-width: 0; position: relative; }
.work-cell--full .frame { width: min(100%, calc(90vh * var(--r, 2))); }
.archive-link { padding-top: clamp(30px, 4vw, 70px); padding-bottom: clamp(30px, 4vw, 70px); font-size: var(--t-body-lg); letter-spacing: -0.02em; }
.archive-link a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size 0.35s var(--ease); }
.archive-link a:hover { background-size: 0 1px; background-position: 100% 100%; }
.work-cell--half:only-child { grid-column: 1; }
.work-link { display: block; }
.filter-status { padding-bottom: 20px; color: var(--grey); }
.filter-status--empty { font-size: var(--t-body-lg); letter-spacing: -0.02em; color: var(--ink); padding-bottom: clamp(30px, 4vw, 70px); max-width: 30em; }
.filter-status--empty a { text-decoration: underline; text-underline-offset: 3px; }
.nowrap { white-space: nowrap; }
.draft-banner { background: var(--ink); color: var(--paper); padding: 10px var(--edge); max-width: none; }
.filter-status a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
[data-filterable].is-hidden { display: none; }
.work-pair.is-hidden, .work-trio.is-hidden { display: none; }
.work-pair:has(> .is-hidden:only-child) { display: none; }

/* label-left / content-right block */
.block {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
  padding-top: clamp(30px, 3.5vw, 60px); padding-bottom: clamp(30px, 3.5vw, 60px);
}
.block-label { grid-column: span 3; }
.block-body { grid-column: span 9; display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 28px); }
.block + .block { }
.qualifying { padding-top: var(--block); padding-bottom: var(--block); }
.qual-list { counter-reset: q; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 40px) var(--gap); font-size: var(--t-body-lg); line-height: 1.25; letter-spacing: -0.02em; }
.qual-list li { counter-increment: q; padding-top: 12px; }
.qual-list li::before { content: counter(q, decimal-leading-zero); display: block; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--grey); margin-bottom: 10px; }
.qual-close { font-size: var(--t-body); line-height: 1.35; max-width: 32em; color: var(--ink); }
.qual-lead { font-size: var(--t-body-lg); line-height: 1.3; max-width: 30em; text-wrap: pretty; margin-bottom: clamp(20px, 2vw, 36px); }

/* the sector filter row: buttons that read as the mono line, never move the page */
.filter-line button { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 5px 0; color: inherit; cursor: pointer; transition: color 0.2s; }
.filter-line button:hover, .filter-line button.active { color: var(--ink); }
.filter-line button.active { text-decoration: underline; text-underline-offset: 3px; }
.filter-line button[data-sf=""] { text-transform: uppercase; }
#work-grid { min-height: 50vh; }

/* studios and the two disciplines under them */
.vert-list--disc { margin-top: clamp(16px, 2vw, 28px); }
.vert-list.vert-list--disc .v-offer { font-size: var(--t-body); color: var(--grey); }
.vert-list.vert-list--disc a:hover .v-offer { color: var(--ink); }
.disc-line { margin-top: clamp(24px, 3vw, 44px); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); }
.open-door { margin-top: clamp(28px, 3vw, 50px); font-size: var(--t-body-lg); line-height: 1.3; }
.open-door a { text-decoration: underline; text-underline-offset: 3px; }

/* the studio thesis, held by its signer */
.studio-thesis { padding-top: clamp(16px, 2vw, 36px); }
.studio-thesis .serif { font-size: var(--t-lead); line-height: 1.2; max-width: 26em; text-wrap: pretty; }
.thesis-signer { margin-top: 12px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); }

/* giant centered headings */
.giant-heading, .stance, .statement, .cta-line, .feature h2, .news-row h2, .opening p, .opening h1, .case-title h1, .about-hero h1, .lead, .fundamentals h3, .team-line, .empty-state { text-wrap: balance; }
.prose, .prose p, .qual-list li, .framework-row p, .cap-desc, .result { text-wrap: pretty; }
.giant-heading {
  text-align: center; font-size: var(--t-giant); line-height: 0.85; letter-spacing: -0.04em; font-weight: 400;
  text-transform: uppercase; padding: clamp(40px, 5vw, 90px) var(--edge) clamp(24px, 3vw, 54px);
}
.statement { text-align: center; font-size: var(--t-stance); line-height: 0.95; letter-spacing: -0.04em; max-width: 18em; margin: 0 auto; padding: clamp(28px, 4vw, 70px) var(--edge) clamp(40px, 5vw, 90px); }

/* index table (Courier data layer) */
.index-table { width: 100%; border-collapse: collapse; font-size: var(--t-nav); letter-spacing: -0.02em; margin-bottom: clamp(48px, 6vw, 100px); }
.index-table th { font-family: var(--mono); font-size: var(--t-meta); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 400; text-align: left; padding: 10px 14px 10px 0; }
.index-table td { padding: 9px 14px 9px 0; vertical-align: top; line-height: 1.4; }
.index-table td.mono-cell { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em; white-space: nowrap; }
.index-table tr { transition: background 0.2s; }
.index-table tbody tr:hover { background: rgba(10, 10, 10, 0.03); }
.table-scroll { overflow-x: auto; }

/* clients: a plain Courier list, wrapped */
.clients-list { font-family: var(--mono); font-size: var(--t-s); letter-spacing: 0.05em; text-transform: uppercase; line-height: 2; color: var(--ink); max-width: 60em; }
.clients-list .sep { color: var(--grey); }
.clients-list span { white-space: nowrap; }

/* editorial feature: headline + image */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start;
  padding-top: var(--block); padding-bottom: var(--block);
}
.feature .f-copy { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 40px); }
.feature h2 { font-size: var(--t-display); line-height: 0.9; letter-spacing: -0.04em; font-weight: 400; }
.feature .f-link { font-size: var(--t-intro); letter-spacing: -0.04em; line-height: 1.08; width: fit-content; }
.feature .f-media img { width: 100%; object-fit: cover; }

/* merch strip: 4 across, scrolls, ← → */
.strip-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; }
.strip-arrows { display: flex; gap: 18px; }
.strip-arrows button { font-family: var(--sans); font-size: var(--t-body); padding: 4px; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--block); }
.strip::-webkit-scrollbar { display: none; }
.strip > * { scroll-snap-align: start; }
.frame--ink { background: var(--ink); }
.merch-item .m-meta { margin-top: 10px; }
.merch-item .m-note { font-size: var(--t-s); line-height: 1.4; margin-top: 6px; }
.merch-item .m-shop { margin-top: 8px; display: inline-block; text-decoration: underline; text-underline-offset: 2px; }
.case-title .case-byline { margin-top: 14px; font-size: var(--t-intro); line-height: 1.08; letter-spacing: -0.04em; max-width: 30em; }
.case-title .case-byline a { text-decoration: underline; text-underline-offset: 2px; }

/* CTA band: black field, one line, one action */
.cta-band {
  background: var(--ink); color: var(--paper); text-align: center; max-width: none;
  padding-top: var(--block); padding-bottom: var(--block); margin-top: var(--block);
}
.cta-band .cta-line { font-size: var(--t-display); line-height: 0.9; letter-spacing: -0.04em; }
.cta-band .cta-mail { display: inline-block; margin-top: clamp(18px, 2vw, 34px); font-size: var(--t-body-lg); }

/* ============================================================
   CASE PAGE
   ============================================================ */
.case-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); padding-top: 18px; padding-bottom: clamp(36px, 5vw, 90px); }
.case-head .lede { font-size: var(--t-intro); line-height: 1.08; letter-spacing: -0.04em; max-width: 27em; }
.case-head .lede .bu-line { margin-top: 12px; display: block; color: var(--grey); }
.case-title h1 { font-size: var(--t-title); line-height: 1.1; letter-spacing: -0.08em; font-weight: 400; margin-top: 12px; }
.case-title .case-sub { margin-top: 16px; font-size: var(--t-intro); line-height: 1.25; max-width: 26em; text-wrap: pretty; }
.case-hero { padding: 0 var(--edge); max-width: 1440px; margin: 0 auto; }
.frame--hero { max-height: none; width: min(100%, calc(90vh * var(--r, 2.4))); } /* height-capped through the width, never cropped */
.frame--hero > img, .frame--hero > video { max-height: none; }
.case-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: end; }
.case-hero-copy { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.case-beat .block-body { gap: 10px; }
.case-gallery { display: flex; flex-direction: column; gap: var(--gap); padding-top: clamp(24px, 3vw, 56px); padding-bottom: clamp(24px, 3vw, 56px); }
.g-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.g-row--1 { grid-template-columns: 1fr minmax(0, 2fr) 1fr; }
.g-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-row { padding-top: var(--gap); }
.g-row--1 > .frame { grid-column: 2; }
.case-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-top: var(--block); padding-bottom: clamp(30px, 3vw, 50px); }
.case-info .label { margin-bottom: 8px; }
.case-info ul, .case-info .who { font-size: var(--t-m); line-height: 1.55; }
.case-next { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; padding-top: 10px; padding-bottom: var(--block); font-size: var(--t-m); }
.case-next > :first-child { justify-self: start; }
.case-next > :nth-child(2) { justify-self: center; }
.case-next > :nth-child(3) { justify-self: end; text-align: right; }

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); row-gap: clamp(28px, 2.5vw, 48px); padding-top: clamp(20px, 3vw, 50px); padding-bottom: var(--block); }
.archive-card { font-size: var(--t-s); min-width: 0; display: flex; flex-direction: column; }
.archive-card .a-meta { font-family: var(--sans); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.2; height: 6em; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.archive-card .a-quote { margin-top: 1.2em; font-size: var(--t-cap); letter-spacing: -0.02em; line-height: 1.2; height: 3.6em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.archive-card .a-img { margin: 1.5em 0 0; width: 100%; }
.archive-card .a-img.frame--empty { background: var(--grey-soft); }
.archive-card .a-img img { width: 100%; height: 100%; object-fit: cover; }
/* the reference's one hover, translated: the picture gives way to the record.
   The card's ground is the picture's own mean colour (focal.py), so what is
   left under the title, client and year is a swatch of the work, not paper. */
@media (hover: hover) {
  .archive-card .a-img img { transition: opacity 0.3s var(--ease); }
  .archive-card:hover .a-img img { opacity: 0; }
}
.archive-card .a-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--grey); }
.archive-card:hover .a-title { text-decoration-color: var(--ink); }
.archive-card .a-more { display: block; margin-top: auto; padding-top: 10px; font-family: var(--sans); font-size: var(--t-cap); letter-spacing: -0.02em; text-transform: uppercase; color: var(--grey); }
.archive-card--flat { cursor: default; }
.archive-card--flat:hover .a-meta { text-decoration: none; }

/* ============================================================
   NEWS
   ============================================================ */
.news-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; padding-top: clamp(36px, 4.5vw, 80px); padding-bottom: clamp(36px, 4.5vw, 80px); }
.news-row + .news-row { }
.news-row .n-copy { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 34px); padding-top: 4px; }
.news-row h2 { font-size: var(--t-display); line-height: 0.9; letter-spacing: -0.04em; font-weight: 400; }
.news-row .n-link { font-size: var(--t-intro); letter-spacing: -0.04em; line-height: 1.08; width: fit-content; }
.news-row .label, .feature .label, .j-item .label { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.news-row--flip .n-copy { order: 2; }
.news-row--flip .n-media { order: 1; }

.article-hero { padding-bottom: clamp(24px, 3vw, 50px); }
.article-hero:not(.article-hero--native):not(.article-hero--contain) .hero-frame { width: min(100%, calc(80vh * var(--r, 2))); }
.article-hero .hero-frame { overflow: hidden; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-hero--contain .hero-frame { background: var(--ink); }
.article-hero--contain img { object-fit: contain; height: min(74vh, 900px); }
/* square and portrait heroes: own shape, in the reading column, never cropped */
.article-hero--native .hero-frame { width: min(calc(50% - var(--gap) / 2), calc(min(80vh, 960px) * var(--r, 0.75))); height: auto; margin-left: calc(50% + var(--gap) / 2); }
@media (max-width: 760px) { .article-hero--native .hero-frame { height: auto; width: 100%; max-width: none; margin-left: 0; } }
.article-body .content .article-stat { margin: 1.6em 0; }
.article-body .content .article-stat .stat-value { font-size: var(--t-lead); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 0.3em; }
.article-body .content .article-stat + .article-stat { margin-top: 0; }
.article-body .content .article-link { margin-top: 1.6em; }
/* vertical section pictures that are not landscapes: whole, height-capped, in the right column */
.band--native .frame { width: min(calc(50% - var(--gap) / 2), calc(min(80vh, 960px) * var(--r, 0.75))); height: auto; margin-left: calc(50% + var(--gap) / 2); } /* width from the height cap and the ratio, so the frame never disagrees with the picture */
.band--native .frame > img { width: 100%; height: 100%; object-fit: cover; }
/* who founded it: one Courier line at the end of The people (Manuel, 24 Sep 2026) */
.about-founded { font-size: var(--t-xs); letter-spacing: 0.02em; margin-top: 1.6em; }
/* SHARE: one small Courier word; the places unfold beside it on a desktop, a phone gets its own sheet */
.share { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.share button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background-color: transparent; border: 0; padding: 10px 0; cursor: pointer; } /* background-color only: .u draws its underline as a background image */
.share a { padding: 10px 0; }
.share-places { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
html:not(.no-js) .share-places:not(.open) { display: none; }
.no-js .share-open, .no-js [data-share-copy] { display: none; }
.article-body .content .share { margin-top: 2.2em; }
.share-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-bottom: clamp(20px, 2vw, 36px); }
.share-row > .share { grid-column: 7 / -1; }
@media (max-width: 760px) { .share-row > .share { grid-column: 1 / -1; } }
.article-figure--framed img { outline: 1px solid var(--grey-soft); outline-offset: -1px; } /* a white page on the white page: a hairline keeps its edge */
.article-title { text-align: left; padding-top: clamp(24px, 3.5vw, 60px); padding-bottom: clamp(24px, 3vw, 50px); }
.article-title .label { margin-bottom: 14px; }
.article-title h1 { font-size: var(--t-display); line-height: 0.9; letter-spacing: -0.04em; font-weight: 400; max-width: 14em; margin: 0; }
.article-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-bottom: var(--block); }
.article-body > :nth-child(1) { grid-column: span 6; }
.article-body > :nth-child(2) { grid-column: span 6; }
.article-body > :nth-child(3) { display: none; }
.article-body .content { max-width: 34em; font-size: var(--t-read); line-height: 1.55; }
.article-body .byline { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.article-body .byline-img { width: 72px; }
.article-body .hint-note { font-size: var(--t-s); color: var(--grey); max-width: 22em; line-height: 1.4; }
/* on a phone the author note closes the piece instead of standing between the title and the first line */
.article-body .author-end { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--grey-soft); max-width: none; }
.article-body .content h2 { font-size: var(--t-body-lg); line-height: 1.2; letter-spacing: -0.02em; font-weight: 400; margin: 1.8em 0 0.6em; max-width: 26em; }
.article-body .content h2:first-child { margin-top: 0; }
.article-body .content p { margin-bottom: 1em; }
.article-body .content blockquote { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.15; letter-spacing: -0.01em; margin: 1.2em 0; }
.article-body .content .caption { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); }
.article-figure { margin: 1.4em 0; }
.article-figure img { width: 100%; height: auto; }
.article-video { padding: clamp(20px, 2.4vw, 40px) 0; }
.article-video video { width: 100%; height: auto; background: var(--ink); }
.reel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: clamp(24px, 3vw, 48px) 0; }
.reel { margin: 0; }
/* a film keeps its native proportions (site rule): the inline aspect-ratio from
   video-dims.json wins; 9/16 is only the no-data fallback and never crops */
.reel video, .reel img { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: var(--ink); }
.reel figcaption { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); margin-top: 8px; line-height: 1.5; }
.reel-slot { display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; background: var(--ink); color: rgba(255,255,255,0.7); font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; padding: 20px; line-height: 1.7; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero { text-align: center; padding: clamp(10px, 2vw, 30px) var(--edge) clamp(20px, 3vw, 50px); }
/* page-title statements share the page-hero rhythm so every page opens the same way */
.statement.page-line { padding: clamp(10px, 2vw, 30px) var(--edge) clamp(20px, 3vw, 50px); font-size: var(--t-display); line-height: 0.95; max-width: 14em; }
.about-cols { padding-top: clamp(40px, 5vw, 90px); }
.about-cols .col-title { font-size: var(--t-intro); line-height: 1.08; font-weight: 400; text-transform: uppercase; letter-spacing: -0.04em; text-align: left; margin-bottom: 22px; }
.cols-4.about-cols .col .body { font-size: var(--t-nav); line-height: 1.25; letter-spacing: -0.02em; white-space: normal; }
.about-cols .body p + p { margin-top: 0.9em; }
.cols-4.about-cols .col-lead { font-size: var(--t-nav); color: var(--grey); }
.about-cols .f-title { display: inline; }
.about-cols ul li { line-height: 1.6; }
.about-cols ul a { text-decoration: none; }
.about-cols ul a:hover { text-decoration: underline; }
.about-cols .team-line-small { margin-top: 1em; font-family: var(--serif); font-size: var(--t-nav); }
.cols-4.about-cols--lists .col .body, .cols-4.about-cols .col ul { font-size: var(--t-nav); }
.about-hero h1 { font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.04em; font-weight: 400; max-width: 14em; margin: 0 auto; }
.fundamentals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 48px) var(--gap); }
.fundamentals li { padding-top: 12px; }
.fundamentals h3 { font-size: var(--t-lead); line-height: 1.1; letter-spacing: -0.025em; font-weight: 400; margin-bottom: 8px; }
.fundamentals p { font-size: var(--t-m); line-height: 1.4; max-width: 30em; text-wrap: pretty; }
.framework { display: flex; flex-direction: column; }
.framework-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); padding: clamp(16px, 2vw, 32px) 0; }
.framework-row:first-child { padding-top: 0; }
.framework-row + .framework-row { }
.framework-row h3 { font-size: var(--t-body-lg); font-weight: 400; letter-spacing: -0.02em; }
.framework-row p { font-size: var(--t-m); line-height: 1.45; max-width: 36em; }
.team { padding-bottom: var(--block); }
.principals { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(20px, 2vw, 36px) var(--gap); }
.person { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.person .p-name { font-size: var(--t-body-lg); letter-spacing: -0.02em; }
.person .p-role { color: var(--grey); font-size: var(--t-xs); }
.team-line { text-align: center; font-size: var(--t-stance); line-height: 0.95; letter-spacing: -0.04em; padding: clamp(40px, 5vw, 90px) 0 clamp(24px, 3vw, 50px); }
.everyone { columns: 4; column-gap: var(--gap); font-size: var(--t-nav); letter-spacing: -0.02em; line-height: 1.45; margin-top: clamp(28px, 3vw, 56px); }
.everyone .person-inline { display: block; break-inside: avoid; }
.everyone .mono { font-size: var(--t-xs); color: var(--grey); }

/* ============================================================
   CONTACT
   ============================================================ */
.city-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px) var(--gap); }
.city-list li { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.city-list .city { font-size: var(--t-lead); letter-spacing: -0.025em; }
.city-list a { font-size: var(--t-m); width: fit-content; }
.city-list--plain li { flex-direction: row; justify-content: space-between; align-items: baseline; }
.about-headline { font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.04em; max-width: 14em; margin: 0 auto; }
.block--first { padding-top: clamp(20px, 3vw, 60px); }
.empty-state { text-align: center; padding: 18vh var(--edge) 22vh; font-size: var(--t-stance); letter-spacing: -0.02em; line-height: 1.25; }

/* ============================================================
   BU / VERTICAL PAGE
   ============================================================ */
.bu-belonging { text-align: center; font-family: var(--serif); font-size: var(--t-body-lg); line-height: 1.2; padding: clamp(24px, 3vw, 48px) var(--edge) 0; margin: 0; }
.bu-positioning { text-align: center; font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.04em; padding: clamp(10px, 2vw, 30px) var(--edge) clamp(36px, 5vw, 90px); font-weight: 400; }
.bu-povs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-bottom: clamp(36px, 5vw, 80px); }
.bu-povs .pov h3 { font-size: var(--t-m); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 16px; }
.bu-povs .pov p { font-size: var(--t-m); line-height: 1.5; }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-bottom: var(--block); }
.cols-4 .col h3 { font-size: var(--t-nav); letter-spacing: -0.02em; font-weight: 400; margin-bottom: 16px; }
.cols-4 .col .body { font-size: var(--t-nav); line-height: 1.25; letter-spacing: -0.02em; white-space: pre-line; }
.cols-4 .col ul { font-size: var(--t-nav); line-height: 1.45; letter-spacing: -0.02em; }

/* ---------- vertical (unlisted sector page) ---------- */
.bu-positioning .turn { color: var(--ink); }   /* the turn reads in ink; a grey second half made the big line feel half-said (Manuel, Sep 2026) */
/* one boundary, one value: the floors were 20 above and 24 below for the same
   role, which reads as a section that sits slightly high in its own space */
.offer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-top: clamp(24px, 3vw, 56px); padding-bottom: clamp(24px, 3vw, 56px); }
.offer .offer-sub { grid-column: 4 / span 9; font-size: var(--t-body-lg); line-height: 1.3; letter-spacing: -0.02em; max-width: 30em; text-wrap: pretty; }
.offer .offer-pov { grid-column: 4 / span 9; font-size: var(--t-lead); line-height: 1.15; max-width: 24em; margin-top: 18px; text-wrap: balance; }
.proof { counter-reset: pr; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.proof li { counter-increment: pr; padding-top: 12px; }
.proof li::before { content: counter(pr, decimal-leading-zero); display: block; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--grey); margin-bottom: 10px; }
.proof h3 { font-size: var(--t-body); font-weight: 400; margin-bottom: 6px; }
.proof p { font-size: var(--t-m); line-height: 1.45; text-wrap: pretty; }
.start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.start:has(> div:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* four steps sit on one row, never three and an orphan */
@media (max-width: 1100px) { .start:has(> div:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.start div { padding-top: 12px; }
.start dt { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); margin-bottom: 8px; }
.start dd { font-size: var(--t-m); line-height: 1.45; text-wrap: pretty; }
@media (max-width: 760px) { .offer { grid-template-columns: 1fr; } .offer .offer-sub, .offer .offer-pov { grid-column: 1; } .proof, .start, .start:has(> div:nth-child(4)) { grid-template-columns: 1fr; } }
.bu-word { margin-top: 12px; display: block; color: var(--grey); }
.bu-statement { max-width: 18em; font-size: var(--t-stance); line-height: 0.95; letter-spacing: -0.04em; padding-top: clamp(20px, 3vw, 56px); }
.ink-block { background: var(--ink); color: var(--paper); padding: clamp(24px, 3vw, 56px) 0; }
.mosaic--wide { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; background: transparent; padding: 0; }
.mosaic--wide .frame { background: var(--frame-dark); }
.mosaic-caption { color: var(--muted-inv); margin-top: 18px; max-width: 60ch; }
.two-up--top { align-items: start; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 80px) var(--gap); padding-top: var(--block); padding-bottom: var(--block); }
.quote { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.quote .q-img { width: 96px; }
.quote blockquote { font-size: var(--t-lead); line-height: 1.15; letter-spacing: -0.01em; text-wrap: pretty; }
.quote figcaption { grid-column: 2; margin-top: 12px; color: var(--grey); }
.quote--noimg { grid-template-columns: minmax(0, 1fr); }
.quote--noimg figcaption { grid-column: 1; }
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.caps h3 { font-size: var(--t-s); font-weight: 400; margin-bottom: 10px; }
.caps ul, .cap-list { font-size: var(--t-body); line-height: 1.6; }
.bu-index .index-table { margin-bottom: 0; }
@media (max-width: 1100px) { .mosaic--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mosaic--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } .quotes, .caps { grid-template-columns: 1fr; } .quote { grid-template-columns: 64px minmax(0, 1fr); } .quote .q-img { width: 64px; } }

/* ============================================================
   FOOTER — black, Courier columns, giant mark, closing line
   ============================================================ */
.footer { background: var(--ink); color: var(--paper); margin-top: 0; }
main > :last-child:not(.cta-band) { padding-bottom: clamp(48px, 6vw, 100px); }
main > .case-next:last-child, main > .block:last-child, main > .clients:last-child { padding-bottom: var(--block); }
.footer .foot-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-top: 37px; padding-bottom: clamp(36px, 4vw, 60px); font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.4; }
/* stacked footer links (Follow, Studios) breathe: the underline of one never
   touches the next line's text */
.footer .foot-cols a { display: inline-block; margin: 2px 0 3px; }
.footer .foot-logo { display: flex; justify-content: center; padding: clamp(20px, 2.5vw, 50px) 0; }
.footer .foot-logo img { width: min(44vw, 600px); height: auto; }
.footer .foot-statement { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1.7; max-width: 88ch; margin: 0 auto; padding-bottom: 40px; color: var(--paper); }

/* ============================================================
   MOTION — restrained reveals, disabled under reduced motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .frame > img[data-reveal] { opacity: 0; }  /* fade only: a scale-in crops the edges while it plays */
  .frame > img[data-reveal].is-in { opacity: 1; transform: none; }
  .work-cell, .archive-card, .news-row { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none; }
  .mnav, .mnav .mnav-links a, .frame--film > video[data-autoplay], .reel--film video[data-autoplay] { transition: none; opacity: 1; transform: none; }
}
.decode-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* no-JS safety: content is always visible without the observer */
.no-js .reveal { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE — nothing redesigns, things collapse
   ============================================================ */
@media (max-width: 1100px) {
  .archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols-4, .bu-povs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-4 { columns: 2; }
  .footer .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer .foot-cols > * { grid-column: auto; }
  .case-info { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .principals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .everyone { columns: 3; }
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr; gap: 18px; padding-bottom: 36px; }
  .masthead .mark { order: -1; justify-self: end; }
  .nav { flex-wrap: wrap; }
  .nav .links { gap: 16px; font-size: var(--t-m); }
  .work-pair, .work-trio, .two-up, .feature, .news-row, .case-head, .case-hero-split, .framework-row, .g-row, .fundamentals, .qual-list, .city-list { grid-template-columns: 1fr; }
  .news-row--flip .n-copy { order: 0; }
  .news-row--flip .n-media { order: 1; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caption-row, .work-pair .caption-row, .work-trio .caption-row, .two-up .caption-row { grid-template-columns: 1fr; gap: 8px; }
  .caption-row .cap-desc { margin-left: 0; }
  .block, .article-body { grid-template-columns: 1fr; gap: 14px; }
  .block-label, .block-body, .article-body > *, .vert-list .v-name, .vert-list .v-offer, .caption-row > * { grid-column: auto; }
  .principals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-status--empty { font-size: var(--t-body); }
  .everyone { columns: 1; }
  .cols-4, .bu-povs { grid-template-columns: 1fr; }
  .strip-4 { columns: 1; }
  .footer .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer .foot-cols > :nth-child(n+1) { grid-column: auto; }
  .case-next { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .case-next > :nth-child(3) { text-align: left; }
  .frame--band { width: 100%; }
  .work-cell--solo { grid-template-columns: 1fr; }
  .work-cell--full .frame:not([style*="aspect-ratio"]) { aspect-ratio: 4 / 3 !important; }
  .frame--hero:not([style*="aspect-ratio"]) { aspect-ratio: 4 / 3 !important; }
  .framework-row { grid-template-columns: 1fr; }
  .caption-row .cap-desc { justify-self: start; max-width: none; }
  .cta-band .cta-mail { display: inline; }
  /* `relative`, not `static`: .nav::before is the frosted backdrop, absolutely
     positioned with top:0/bottom:0 against the nav. Making the nav static removes
     its containing block, so the backdrop resolved against the viewport instead
     and painted an 86%-opaque, 14px-blurred white panel over the whole first
     screen. `relative` un-sticks the nav (the intent here) and keeps the
     backdrop the height of the nav. */
  .nav { position: relative; padding-right: var(--edge); }
  .nav .links { width: 100%; justify-content: space-between; gap: 8px; }
  .nav-line { display: block; margin-bottom: 8px; }
  html { scroll-padding-top: 64px; }
  .index-table th:nth-child(1), .index-table td:nth-child(1), .index-table th:nth-child(5), .index-table td:nth-child(5) { display: none; }
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .footer .foot-cols, .p-role, .everyone .mono { font-size: var(--t-s); }
}

/* text-only video control */
.vctls { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 12px; z-index: 2; pointer-events: auto; }
.vctl { color: var(--paper); mix-blend-mode: difference; font-size: var(--t-xs); opacity: 0.72; transition: opacity 0.3s; padding: 8px 4px; }
.vctl-msg { color: var(--paper); mix-blend-mode: difference; font-size: var(--t-xs); padding: 8px 4px; }
.vctl-msg:empty { display: none; }
/* the film's timeline: a hairline along the bottom, thicker to the hand */
.vprog { position: absolute; left: 12px; right: 12px; bottom: 2px; z-index: 2; width: auto; height: 14px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; opacity: 0.55; mix-blend-mode: difference; transition: opacity 0.3s; }
.vprog::-webkit-slider-runnable-track { height: 1px; background: var(--paper); }
.vprog::-moz-range-track { height: 1px; background: var(--paper); }
.vprog::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--paper); border: 0; }
.vprog::-moz-range-thumb { width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 0; }
.frame:hover .vprog, .work-cell:hover .vprog, .vprog:focus-visible { opacity: 1; }
.vprog:focus-visible { outline: 1px solid var(--paper); outline-offset: 2px; }
@media (hover: none) { .vprog { opacity: 0.9; } }
.vctls:has(~ .vprog), .frame:has(> .vprog) .vctls { bottom: 18px; }
/* full screen: the whole frame, black, the film fitted inside it, the controls and a close button on top */
.vctl--icon { display: inline-flex; align-items: center; padding: 6px 4px; }
.vctl--icon svg, .vclose svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vclose { display: none; position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--paper); mix-blend-mode: difference; background: transparent; border: 0; cursor: pointer; }
.vclose svg { width: 22px; height: 22px; }
.is-fullscreen .vclose { display: inline-flex; }
.frame.is-overlay { position: fixed !important; inset: 0; z-index: 1000; }
html.has-film-overlay, html.has-film-overlay body { overflow: hidden; }
.frame.is-overlay, .frame:fullscreen, .frame:-webkit-full-screen { background: var(--ink) !important; width: 100vw !important; height: 100vh !important; max-width: none !important; margin: 0 !important; }
.frame.is-overlay video, .frame:fullscreen video, .frame:-webkit-full-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain !important; opacity: 1; }
.frame.is-overlay .vctl, .frame.is-overlay .vprog, .frame:fullscreen .vctl, .frame:-webkit-full-screen .vctl, .frame:fullscreen .vprog { opacity: 1; }
.frame.is-overlay .vctls, .frame:fullscreen .vctls { bottom: 26px; right: 20px; }
.frame.is-overlay .vprog, .frame:fullscreen .vprog { left: 20px; right: 20px; bottom: 10px; }
video::cue { font-family: inherit; font-size: var(--t-read); background: rgba(0,0,0,0.55); }
.frame:hover .vctl, .work-cell:hover .vctl, .reel:hover .vctl, .vctl:hover, .vctl:focus-visible { opacity: 1; }
@media (hover: none) { .vctl { opacity: 1; } }
[data-tz] { color: var(--muted-inv); }

/* ============================================================
   PRINT
   ============================================================ */
/* Pure #000 below is deliberate: max contrast on paper, not the screen ink. */
@media print {
  .reveal, .frame > img[data-reveal] { opacity: 1 !important; transform: none !important; }
  .nav { position: static; backdrop-filter: none; }
  .footer, .cta-band { background: none; color: #000; }
  .foot-logo, .vctls, .vprog, .skip, .bu-line, [data-tz] { display: none; }
  .frame--ph { background: #eee; }
  a { color: #000; }
}

/* ---------- home: results, proof, verticals, journal ---------- */
.cap-text { display: flex; flex-direction: column; gap: 8px; }
/* THE WORK SECTION'S TYPE. Three roles ran at one size: the work's name, the
   sentence about it and the number, all --t-cap, all 13px on a mid desktop. The
   system has fourteen steps and the section that matters most used one, so the
   loudest thing on the page was set in its quietest type.

   The name is what a buyer scans, so it takes a reading size. The sentence
   becomes body rather than caption. The number goes to Courier, which is what
   the markup already asked for with .mono and what DESIGN.md reserves for meta:
   the sans override here was contradicting both. Client and year stay caption,
   because that is what they are. */
.cap-title {
  display: inline-block;
  font-size: var(--t-body-lg); line-height: 1.05; letter-spacing: -0.03em;
  text-transform: none; margin-bottom: 0.28em;
}
.cap-result {
  font-family: var(--mono); font-size: var(--t-meta); text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--grey); line-height: 1.3;
}
.work-cell--solo .cap-result { margin-top: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.stats div { padding-top: 12px; }
.stats dt { font-family: var(--serif); font-size: var(--t-display); line-height: 1; letter-spacing: -0.03em; margin-bottom: 12px; }
.stats dd { font-size: var(--t-m); line-height: 1.45; max-width: 22em; text-wrap: pretty; }
.stat-quote { margin-top: clamp(24px, 3vw, 48px); max-width: 26em; }
.stat-quote p { font-size: var(--t-lead); line-height: 1.15; text-wrap: balance; }
.stat-quote footer { margin-top: 12px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); }
.method-close { font-size: var(--t-lead); line-height: 1.15; max-width: 24em; margin-top: clamp(20px, 2.4vw, 40px); text-wrap: balance; }
.vert-line { font-size: var(--t-body-lg); line-height: 1.3; max-width: 30em; text-wrap: pretty; }
.range-line { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.15; letter-spacing: -0.02em; max-width: 26em; text-wrap: balance; }
.vert-list { display: flex; flex-direction: column; }

.vert-list a, .vert-list .v-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 14px 0; align-items: baseline; }
.vert-list .v-name { grid-column: span 3; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.vert-list .v-offer { grid-column: span 9; font-size: var(--t-body-lg); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.vert-list .v-offer .turn { color: var(--ink); }
.vert-list a:hover .v-offer { color: var(--grey); }
.vert-list a:hover .turn { color: var(--ink); }
.journal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.j-item { display: flex; flex-direction: column; gap: 12px; }
.j-item .frame { width: 100%; }
.j-item .frame img { width: 100%; height: 100%; object-fit: cover; }
.j-item h3 { font-size: var(--t-body-lg); line-height: 1.2; letter-spacing: -0.02em; font-weight: 400; text-wrap: balance; }
.j-item h3 a { background: none; }
.j-item h3 a:hover { color: var(--grey); }
.j-more { margin-top: clamp(16px, 2vw, 32px); font-size: var(--t-body); }
@media (max-width: 760px) {
  .stats, .journal { grid-template-columns: 1fr; }
  .vert-list a, .vert-list .v-row { grid-template-columns: 1fr; gap: 6px; }
}
.prose.made { font-size: var(--t-body-lg); line-height: 1.35; letter-spacing: -0.02em; max-width: 30em; }

/* ---------- case page geometry from the wireframe ---------- */
.block--half .block-label { grid-column: span 6; }
.block--half .block-body { grid-column: span 6; }
.case-info { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.case-info > :nth-child(1) { grid-column: span 6; }
.case-info > :nth-child(n+2) { grid-column: span 2; }
/* the client always ends the row, whether or not there is a credits column */
.case-info > :last-child { grid-column: 11 / span 2; }
.other-projects { padding-top: var(--block); padding-bottom: var(--block); }
.other-heading { font-size: var(--t-h3); line-height: 0.9; letter-spacing: -0.04em; font-weight: 400; margin-bottom: clamp(24px, 2.8vw, 54px); }
.other-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.other-card .cap-meta { margin-top: clamp(10px, 1.2vw, 23px); font-family: var(--sans); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.25; }
.other-card .frame { width: 100%; }
@media (max-width: 760px) {
  .block--half .block-label, .block--half .block-body, .case-info > :nth-child(n+1) { grid-column: auto; }
  .case-info { grid-template-columns: 1fr; }
  .other-grid { grid-template-columns: 1fr; }
}

/* home archive strip (Figma landing: a row of six archive cards) */
.home-archive { padding-top: clamp(30px, 4vw, 70px); padding-bottom: clamp(30px, 4vw, 70px); }
.home-archive .archive-grid { padding-top: 0; padding-bottom: clamp(24px, 2.6vw, 48px); }
.home-archive .archive-link { padding-top: 0; }
@media (max-width: 760px) { .archive-card .a-meta, .archive-card .a-quote { height: auto; -webkit-line-clamp: unset; display: block; } }

/* footer on the 12-column grid as in the wireframe: network line spans 4, then four columns of 2 */
.footer .foot-cols > :nth-child(1) { grid-column: span 4; }
.footer .foot-cols > :nth-child(n+2) { grid-column: span 2; }
@media (max-width: 1100px) { .footer .foot-cols > :nth-child(n+1) { grid-column: auto; } }

/* ---------- PDP Studio (secret page): bridge between the page's own styles and the site ---------- */
.pdp-bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--grey-soft); border-bottom: 1px solid var(--grey-soft); font-size: var(--t-nav); letter-spacing: -0.02em; }
.pdp-bar .pdp-back { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; }
.pdp-bar .pdp-title { color: var(--grey); }
.pdp .lang button { font: inherit; background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--grey); }
.pdp .lang button.active { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp .lang-sep { color: var(--grey); padding: 0 2px; }
.pdp .pwrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--edge); }
.pdp .meta { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em; text-transform: uppercase; color: var(--grey); }
.pdp .label { font-size: var(--t-nav); letter-spacing: -0.02em; }
.pdp .btn, .pdp .sec { font-size: var(--t-body); }
.pdp .pdp-contact { padding: clamp(24px, 3vw, 56px) var(--edge) clamp(40px, 5vw, 90px); }
.pdp .pdp-contact p + p { margin-top: 10px; }
.pdp .pdp-contact a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; }
/* vertical pages: the wireframe's four-column rows */
.bu-cols { padding-top: clamp(40px, 5vw, 90px); padding-bottom: clamp(24px, 3vw, 56px); }
.bu-cols .col-title { text-transform: uppercase; }
.bu-cols .body .col-lead { color: var(--ink); margin-bottom: 0.9em; }
.bu-cols--bottom { padding-top: var(--block); padding-bottom: var(--block); }
.bu-cols--bottom .body a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; }
.bu-cols--bottom .body p + p { margin-top: 0.9em; }
.cols-4.bu-cols .col h3.col-title { font-size: var(--t-intro); line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 18px; }
.two-up--top .frame:not([style*="aspect-ratio"]) { aspect-ratio: 4 / 5 !important; }
.two-up--top .frame img { width: 100%; height: 100%; object-fit: cover; }
.two-up--top { margin: var(--gap) 0; }
.bu-close { text-align: center; color: var(--grey); padding: 0 var(--edge) clamp(40px, 5vw, 90px); margin-top: calc(-1 * clamp(16px, 2vw, 40px)); }

@media (max-width: 480px) {
  :root { --t-giant: clamp(34px, 11.9vw, 60px); }   /* the giant scale, restated for small screens */
}
@media (max-width: 760px) {
  .m-hide { display: none !important; }
}
.menu-btn { display: none; }
.mnav[hidden] { display: none; }
.mnav { opacity: 0; transform: translateY(4px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.mnav.is-open { opacity: 1; transform: none; }
.mnav.is-closing { opacity: 0; transform: translateY(4px); transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out); }
.mnav .mnav-links a { opacity: 0; transform: translateY(4px); transition: opacity 0.26s var(--ease), transform 0.26s var(--ease); }
.mnav.is-open .mnav-links a { opacity: 1; transform: none; }
.mnav.is-open .mnav-links a:nth-child(1) { transition-delay: 30ms; }
.mnav.is-open .mnav-links a:nth-child(2) { transition-delay: 60ms; }
.mnav.is-open .mnav-links a:nth-child(3) { transition-delay: 90ms; }
.mnav.is-open .mnav-links a:nth-child(4) { transition-delay: 120ms; }
.mnav.is-open .mnav-links a:nth-child(5) { transition-delay: 150ms; }
.mnav.is-open .mnav-links a:nth-child(6) { transition-delay: 180ms; }
.mnav.is-open .mnav-links a:nth-child(n+7) { transition-delay: 210ms; }
.m-only { display: none; }
@media (max-width: 760px) {
  .m-only { display: block; }
  .masthead { display: none; }
  .case-head { display: block; min-height: 0; padding-top: 6px; }
  .case-head .lede { display: none; }
  body { display: flex; flex-direction: column; }
  body > * { width: 100%; }
  .nav { order: -1; }
  .nav .links, .nav .nav-line { display: none; }
  .fixed-mark { display: none; }
  .nav { display: flex; justify-content: space-between; align-items: flex-start; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  /* WebKit misplaces a backdrop-filter that sits on a transformed pseudo of a
     sticky element (the ghost rectangle over the page on iOS). On mobile the
     wrap is already full-bleed, so the layer moves onto .nav itself. */
  .nav::before { display: none; }
  .nav-tagline { display: block; font-size: var(--t-cap); line-height: 1.3; letter-spacing: -0.01em; color: var(--grey); margin-top: 3px; }
  .nav .wordmark::after { content: '.'; }
  .menu-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 12px 0; cursor: pointer; }
  .menu-btn span { display: block; width: 26px; height: 2px; background: var(--ink); }
  .mnav .mnav-top { display: flex; justify-content: space-between; align-items: center; }
  .mnav-close { background: none; border: 0; font-size: var(--t-glyph); line-height: 1; padding: 4px 0; cursor: pointer; }
  .mnav { position: fixed; inset: 0; background: var(--paper); z-index: 200; padding: calc(var(--edge) * 1.5) var(--edge); display: flex; flex-direction: column; gap: 1.4em; }
  .mnav .mnav-links { display: flex; flex-direction: column; gap: 0.25em; margin-top: 1.5em; }
  /* 44px is the minimum touch target (WCAG 2.5.5, Apple HIG). These links were
     22px tall, so half of every tap landed on nothing. min-height gives the
     target without changing the type, and the gap comes down so the menu keeps
     its rhythm. */
  .mnav .mnav-links a { font-size: var(--t-intro); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
  .mnav-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; }
  .menu-btn { min-width: 44px; min-height: 44px; }
  .mnav .mnav-bu { margin-top: auto; padding-bottom: var(--edge); }
  .about-mobile p { font-size: var(--t-intro); line-height: 1.15; letter-spacing: -0.03em; }
}
/* ---------- motion details ----------
   No parallax on pictures: drift needs overscan, and overscan crops, which cuts
   the type off key visuals (Manuel, 23 Sep 2026: never crop text, never stretch).
   Stills and films both keep their native proportions. */
@keyframes drift { from { translate: 0 -2.6%; } to { translate: 0 2.6%; } }

/* filter row: the underline draws in instead of snapping */
.filter-line button { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% - 3px); background-size: 0 1px; transition: color 0.2s, background-size 0.35s var(--ease); }
.filter-line button.active { text-decoration: none; background-size: 100% 1px; }
.filter-line button:hover { background-size: 100% 1px; }

/* captions wake up with their cell */
.caption-row .cap-meta, .caption-row .cap-meta a { transition: color 0.3s var(--ease); }
.work-cell:hover .caption-row .cap-meta, .work-cell:hover .caption-row .cap-meta a { color: var(--ink); }

/* studio lists: the grey turn breathes on hover (already inked); ease it */
.vert-list .v-offer, .vert-list .turn { transition: color 0.3s var(--ease); }

/* studio mosaic: column flow on paper, native proportions, tiles that link */
.mosaic-flow-wrap { padding-top: clamp(24px, 3vw, 56px); }
.mosaic-flow { columns: 3; column-gap: var(--gap); }
.mosaic-flow .mosaic-tile { display: block; break-inside: avoid; margin-bottom: var(--gap); }
.mosaic-flow .frame { aspect-ratio: auto; background: transparent; }
.mosaic-flow img { width: 100%; height: auto; display: block; }
.mosaic-flow a.mosaic-tile img { transition: opacity 0.3s var(--ease); }
.mosaic-flow a.mosaic-tile:hover img { opacity: 0.85; }
.mosaic-flow-wrap .mosaic-caption { color: var(--grey); margin-top: 6px; max-width: 60ch; }
@media (max-width: 1100px) { .mosaic-flow { columns: 2; } }
@media (max-width: 760px) { .mosaic-flow { columns: 2; } }

/* filtered rows reflow instead of leaving white space: a widowed cell takes
   the full row (films at native ratio fill the page; stills recut to 2:1 with
   the focal point holding the subject), two survivors share two columns */
.work-pair[data-visible="1"], .work-trio[data-visible="1"] { grid-template-columns: 1fr; }
.work-trio[data-visible="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-pair[data-visible="1"] .frame:not([style*="aspect-ratio"]),
.work-trio[data-visible="1"] .frame:not([style*="aspect-ratio"]) { aspect-ratio: 2 / 1 !important; }

/* ---------- DEPTH: the energy home (/energy) ----------
   Off-centre is energy: scaled back, blurred, nameless. At centre the work
   condenses into matter: sharp, still, named. Every card keeps its own
   proportions; the track aligns them by height, never by crop. */
.energy-claim { padding-top: clamp(30px, 4vw, 70px); padding-bottom: clamp(40px, 5vw, 90px); }
.depth { position: relative; padding: clamp(20px, 3vw, 50px) 0 clamp(30px, 4vw, 70px); }
.depth-track {
  display: flex; gap: clamp(20px, 3vw, 60px); align-items: center;
  overflow-x: auto; overflow-y: hidden;
  /* no snapping: snap is an acceleration toward a position, and this piece
     only ever eases. The index follows whatever is nearest instead. */
  padding: 0 calc(50vw - min(34vw, 520px)); scrollbar-width: none;
  perspective: 1400px;
}
/* The room dissolves at its edges rather than being cut by the viewport. This
   is a desktop move only: below the breakpoint the card is 86vw and there is no
   edge left to dissolve into, so the fade had nothing to reach but the first
   characters of the active title, 63px of it, and it faded those instead. */
@media (min-width: 761px) {
  .depth-track {
    -webkit-mask-image: linear-gradient(to right, transparent 0, currentColor 14%, currentColor 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, currentColor 14%, currentColor 86%, transparent 100%);
  }
}
.depth-track::-webkit-scrollbar { display: none; }
.depth-card {
  flex: 0 0 auto; min-width: 0;
  width: min(68vw, calc((100vh - 320px) * var(--r, 1.6)));
  transform-origin: center;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  opacity: var(--op, 1);
  transform: translateY(var(--rise, 0px)) scale(var(--sc, 1)) translateZ(0);
}
.depth-card .frame { aspect-ratio: var(--card-ratio); width: 100%; }
.depth-card .depth-media { display: block; transition: filter 0.35s var(--ease); }
.depth-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.depth-meta {
  padding-top: clamp(14px, 1.6vw, 26px); max-width: 40em;
  opacity: var(--meta, 0); transform: translateY(calc((1 - var(--meta, 0)) * 8px));
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.depth-meta .d-client { color: var(--grey); display: block; }
.depth-meta .d-title { font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.04em; margin-top: 10px; max-width: 16em; }
.depth-meta .d-line { font-size: var(--t-body-lg); line-height: 1.25; letter-spacing: -0.02em; margin-top: 14px; max-width: 30em; }
.depth-meta .d-result { color: var(--grey); margin-top: 8px; }
.depth-meta .d-signer { color: var(--ink); margin-top: 18px; }
/* Film grain, the way DRIFT does it: one tile rasterised once into a data URI
   and only ever translated, never re-filtered, so it costs nothing per frame.
   stitchTiles makes it repeat seamlessly. The steps(6) is the whole point: the
   grain jumps between six positions a second rather than sliding, which is a
   projector cadence and reads as emulsion instead of as moving dust.
   DRIFT runs on black, where overlay leaves the background untouched and the
   grain lives on the imagery. This page is paper, and both overlay and
   soft-light resolve to white against white, so they would do the same thing
   here: nothing on the paper. multiply is the translation, at the low opacity
   that keeps it a tooth in the paper rather than a texture on top of it. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: 1.1s steps(6) infinite grainShift;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 4%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-2%, 3%); }
  80%  { transform: translate(3%, -3%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }
.depth-index { text-align: center; color: var(--grey); padding-top: clamp(20px, 2.4vw, 40px); }
.depth-index .di-sep { opacity: 0.5; }

@media (max-width: 760px) {
  .depth-track { padding: 0 var(--edge); gap: var(--gap); }
  /* the track is as tall as its tallest card, so a portrait card left every
     landscape one floating in 346px of slack and pushed the index far below the
     work. Width alone cannot bound that: the height has to be capped too, and
     capping it by narrowing the card keeps every proportion intact. */
  .depth-card { width: min(86vw, calc((100svh - 300px) * var(--r, 1.6))); }
}
@media (prefers-reduced-motion: reduce) {
  .depth-card { opacity: 1 !important; transform: none !important; }
  .depth-card .depth-media { filter: none !important; }
  .depth-meta { opacity: 1 !important; transform: none !important; }
}
/* the dust field floats over the page and never intercepts a click */
.dust-field { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
@media (prefers-reduced-motion: reduce) { .dust-field { display: none; } }

/* ---------- C · Matéria em Luz (/c) ----------
   The piece owns the ground and the ground changes: three of its five states
   are paper and two are dark. So no colour here is fixed. --ml-lum carries the
   background's luminance, written by matter-hero.js from the module's own
   phase, and every mark over the piece is mixed against it: full ink on paper,
   near-paper in the dark, and continuous through the crossing. */
.matter-hero {
  position: relative; height: 100svh; min-height: 560px;
  overflow: hidden; isolation: isolate;
  --ml-lum: 1;
  /* the sequence samples the ground under each text block and writes --ml-lum
     as 1 (ink) or 0 (paper) on that block; --ml-ground is the hero's own
     continuous mean, for the edges the piece has not painted, and never
     reaches the type */
  --ml-ground: var(--ml-lum);
  background: color-mix(in srgb, var(--paper) calc(var(--ml-ground) * 100%), var(--void));
  /* the piece's paper states are the site's paper, so --ml-lum 1 is #FFFFFF */
}
.matter-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the sequence mounts its own stage inside this box; the box gives it the size.
   Its arrow is hidden: idle, a tap and the keys carry the sequence. */
.matter-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.matter-stage canvas { display: block; width: 100%; height: 100%; }
.matter-hero .mil-next { display: none !important; }
/* On a touch screen the piece's own stylesheet sets touch-action: none, so a
   vertical swipe over a full-screen hero is taken as a drag and the page never
   scrolls (Manuel, 10 Sep 2026). Vertical swipes pass through to the page;
   a sideways drag still belongs to the piece. Higher specificity than the
   module's rule, so no !important. */
@media (pointer: coarse) {
  .matter-hero .mil-stage, .matter-hero .mil-stage canvas { touch-action: pan-y; }
}
.matter-hero--flat .matter-stage { display: none; }
/* each block flips on its own sample; the flip is a short transition, not a cut */
.matter-hero .masthead *, .matter-hero .nav *, .matter-hero .menu-btn span { transition: color 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease); }

/* The fixed mark is a PNG, so no colour rule reaches it, and it normally gets
   its black from mix-blend-mode difference against white paper. Over the piece
   that blend has no fixed ground to resolve against and came out white while
   the type was black. Here it is inverted by the same luminance instead:
   black on the paper states, white on the dark ones, continuous between. */
.over-matter .fixed-mark { mix-blend-mode: normal; }
.over-matter .fixed-mark img {
  filter: invert(calc(1 - var(--ml-lum, 1)));
  transition: filter 0.5s var(--ease);
}

/* The words sit on the piece, not around it, and they are inset from the frame
   on the site's own rhythm: --edge across, and a vertical inset of the same
   family so the graphic has room to breathe at all four sides. */
.matter-top, .matter-bottom { position: absolute; left: 0; right: 0; z-index: 2; --ml-lum: 1; }
/* --edge, not a vertical scale of my own. The fixed mark sits at a hard 14px
   and the real home starts its lede at --edge, so the two hold a -5.9px
   relation. My 30.5px inset broke that by ten pixels and the mark floated. */
.matter-top { top: var(--edge); }
.matter-bottom { bottom: var(--edge); }

/* The chrome brings its own paper and its own flow spacing; here the piece is
   the ground and nothing follows in flow, so the padding that separates the
   masthead from the next section is dead weight. It was making a 322px block
   out of two lines. The nav's asymmetric right padding is for the menu button
   in the normal layout and is not needed over the piece either. */
.matter-hero .masthead, .matter-hero .nav { background: transparent; border: 0; }
/* the masthead reserves a 322px header band on the real home so the hero image
   always begins at the same line. Over the piece that band is 322px of empty
   box holding 44px of text against the top edge. */
.matter-hero .masthead { padding: 0 var(--edge); min-height: 0; }
/* The masthead reserves 52px on the right for the fixed mark's zone, and on
   the real home the nav reserves the same. I had flattened the nav to --edge
   over the piece, which put the two blocks on different right margins. Same
   reserve on both again, so the top words and the menu share one system. */
/* The masthead is a two column grid and the nav is a flex row with
   space-between, so the menu floated to the right end instead of landing on
   the second column: 111.5px adrift at 1500. Same grid over the piece, so the
   menu starts exactly where the second phrase starts. */
.matter-hero .nav { padding: 0 var(--edge); }
/* The two column grid is a desktop move: it exists to land the menu on the same
   column as the second phrase. Left unscoped it applied below the breakpoint
   too, where there is no second phrase, and it stretched the hamburger into a
   167px grid cell beside a written menu that should not be there at all. */
@media (min-width: 761px) {
  .matter-hero .nav {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap); align-items: center;
  }
}
/* The reserve belongs on the column, not on the row. Put on the nav's padding
   it narrowed the whole box and pushed the second column 26px left of the
   masthead's; the masthead puts its 52px on .intro instead, so both grids stay
   the same width and only the content inside column two is inset. */
/* The menu starts on the second column and spreads across it, the way it does
   in the layout Manuel drew: packed at the column's start it aligned but did
   not fill, and CONTACT stopped well short of the reserve. */
@media (min-width: 761px) {
  .matter-hero .nav .links {
    /* no right reserve: the mark sits at the top and the nav at the foot, so
       nothing to clear, and the menu should end where the column ends */
    justify-self: stretch; padding-right: 0;
    display: flex; justify-content: space-between; align-items: center; gap: 0;
  }
}
/* The nav paints a translucent white backdrop behind itself so it stays legible
   when the page scrolls under it. Over the piece that backdrop is a rectangle
   cutting the graphic in half, which is exactly what it looked like. Here the
   nav gets its legibility from taking the ground's luminance instead. */
/* The backdrop was two things, and I only removed one. The white fill is gone;
   the blur behind it was still there, smearing the piece into a washed band
   under the menu. Both off here: over the piece the nav takes its legibility
   from the ground's luminance, not from anything painted or blurred. */
/* The nav's legibility backdrop exists in TWO places: a pseudo-element above the
   breakpoint and the element itself below it, each with a white fill and a 14px
   blur. I cleared the pseudo and the band came back on mobile from the other
   one. Both are off here, at every width, and the selector covers the element
   and the pseudo together so a third variant cannot slip through. Over the piece
   the nav takes its legibility from the ground's luminance. */
.matter-hero .nav,
.matter-hero .nav::before,
.matter-hero .nav::after {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* the hamburger is three bars drawn with background, not colour, so the rule
   that carries the type never reached them. Same luminance, same crossing. */
.matter-hero .menu-btn span {
  background: color-mix(in srgb, var(--ink) calc(var(--ml-lum, 1) * 100%), var(--paper));
  transition: background 0.5s var(--ease);
}
/* every mark over the piece takes the ground's luminance, the nav included */
.matter-hero .masthead, .matter-hero .masthead *,
.matter-hero .nav, .matter-hero .nav * {
  color: color-mix(in srgb, var(--ink) calc(var(--ml-lum) * 100%), var(--paper));
  border-color: color-mix(in srgb, var(--ink) calc(var(--ml-lum) * 60%), var(--paper));
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
/* no WebGL2: the section still has a ground and the type still reads on it */
.matter-hero--flat .matter-canvas { display: none; }

@media (max-width: 760px) {
  .matter-hero { order: -3; height: 100svh; }
  /* the claim follows a full-bleed graphic here, not a 44px nav as it does on
     the real home, so it needs the separation that a much heavier neighbour
     asks for: 24px read as the two belonging to each other */
  .matter-hero + .opening { padding-top: clamp(44px, 9vh, 76px); }
  /* On a phone the opening is a heading and a paragraph, not a run of beats: a
     centred seven-line block read as a wall (Manuel, 10 Sep 2026). Left, the H1
     a step up, a breath between them. Desktop keeps the centred two-line beat. */
  .opening { text-align: left; }
  .opening h1 { font-size: var(--t-h3); line-height: 1.0; letter-spacing: -0.03em; margin: 0; }
  .opening h1 + p { margin-top: var(--s-4); font-size: var(--t-body-lg); line-height: 1.3; }
  /* the About page on a phone: who, how we read, when you come. The same
     hierarchy as the opening, three paragraphs with a breath between them */
  .about-mobile h2 { font-size: var(--t-h3); line-height: 1.0; letter-spacing: -0.03em; font-weight: 400; margin: 0 0 var(--s-4); }
  .about-mobile p { font-size: var(--t-body-lg); line-height: 1.3; margin: 0; }
  .about-mobile p + p { margin-top: var(--s-3); }
  /* the About page on a phone, one hierarchy: the nav already carries the
     identifier, so the page title is not repeated (Manuel, 10 Sep 2026); the
     six-word heading leads; "What we do" is a label, not a second display
     line; items step down from it */
  .about-hero { display: none; }
  .about-mobile { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .giant-heading#framework { font-family: var(--mono); font-size: var(--t-meta); text-transform: uppercase; letter-spacing: 0.02em; color: var(--grey); line-height: 1.3; text-align: left; padding: 0 var(--edge); margin: 0 0 var(--s-4); }
  .framework-row { padding: var(--s-4) 0; gap: var(--s-2); }
  .framework-row h3 { font-size: var(--t-body-lg); line-height: 1.2; margin: 0; }
  .framework-row p { font-size: var(--t-body); line-height: 1.4; margin: 0; }
  /* the real home hides the masthead entirely below the breakpoint and keeps
     only the nav at the top, carrying the name and the menu. Same here: the
     bottom block moves up, and the top block is empty because the masthead is
     already display:none at this width. */
  .matter-bottom { bottom: auto; top: var(--edge); }
  .matter-claim { bottom: clamp(28px, 6vh, 64px); }
}

/* ---------- C · the monument (/c) ----------
   Ando: the object is given the whole room and nothing else. Generous darkness
   makes the scale; the type stands far away and speaks quietly. */
.monument-field {
  position: relative; height: 100svh; min-height: 560px;
  background: var(--void); display: grid; place-items: center; overflow: hidden;
}
.monument {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: default; touch-action: none; outline: none;
}
.monument canvas { display: block; width: 100%; height: 100%; }
.monument:focus-visible { outline: 1px solid rgba(255, 248, 238, 0.55); outline-offset: -2px; }
/* no WebGL: the mass still exists, it simply does not breathe */
.monument.is-flat {
  background:
    radial-gradient(circle at 50% 50%, var(--void-mass) 0 24.5%, rgba(255, 248, 238, 0.5) 24.5% 24.7%, transparent 24.8% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 140, 60, 0.05) 0 60%, transparent 70%);
}
.monument-mark, .monument-gesture {
  position: absolute; z-index: 2;
  color: color-mix(in srgb, var(--sun) calc(var(--mflare, 0) * 40%), rgba(255, 248, 238, 0.42));
  letter-spacing: 0.14em; pointer-events: none;
}
.monument-mark { top: clamp(20px, 3.4vw, 44px); left: 50%; transform: translateX(-50%); }
.monument-gesture {
  bottom: clamp(20px, 3.4vw, 44px); left: 50%; transform: translateX(-50%);
  transition: opacity 0.8s var(--ease); opacity: 0.55;
}
.monument.is-held ~ .monument-gesture { opacity: 0.12; }
.monument.is-open ~ .monument-gesture { opacity: 0; }

/* The return, take two. A band with a gradient painted on it is an object, and
   you watch the object go by: the ramp itself becomes the thing you notice.
   What should happen is that the ground under the whole page changes while you
   scroll, so the dark is simply the ground the animation stands on and the
   paper is simply the ground the work stands on, with nothing drawn between.
   The band below stays as the fallback for browsers without scroll timelines. */
.c-ground { position: fixed; inset: 0; z-index: -1; background-color: var(--paper); }
@supports (animation-timeline: scroll()) {
  @keyframes cDawn { from { background-color: var(--void); } to { background-color: var(--paper); } }
  @keyframes cDawnInk { from { color: rgba(255, 248, 238, 0.88); } to { color: var(--ink); } }
  .c-ground {
    background-color: var(--void);
    animation: cDawn linear both;
    animation-timeline: scroll(root block);
    animation-range: 96svh 152svh;
  }
  /* the sections stop painting themselves and let the ground show */
  .monument-field { background: none; }
  .monument-word {
    background: radial-gradient(120% 90% at 50% -18%,
      color-mix(in srgb, var(--sun) calc((var(--mstate, 0) * 7% + var(--mflare, 0) * 11%)), transparent) 0%,
      transparent 62%);
    animation: cDawnInk linear both;
    animation-timeline: scroll(root block);
    animation-range: 96svh 152svh;
  }
  .monument-return { display: none; }
}
.monument-return {
  height: clamp(180px, 32vh, 380px);
  /* a linear ramp crosses the middle as flat grey and bands doing it. These
     stops hold the dark most of the way, then open, the way a room does. */
  background: linear-gradient(to bottom, var(--void), var(--paper));
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sun) calc(var(--mstate, 0) * 6%), var(--void)) 0%,
    color-mix(in srgb, var(--paper) 3%, var(--void)) 22%,
    color-mix(in srgb, var(--paper) 8%, var(--void)) 42%,
    color-mix(in srgb, var(--paper) 16%, var(--void)) 58%,
    color-mix(in srgb, var(--paper) 32%, var(--void)) 71%,
    color-mix(in srgb, var(--paper) 55%, var(--void)) 82%,
    color-mix(in srgb, var(--paper) 78%, var(--void)) 91%,
    var(--paper) 100%);
}
.monument-word {
  /* the release reaches past the canvas: the room the word is spoken in takes
     the light, and --mflare carries the first hard moment of it before the
     slow glow settles (Eliasson's sun, Glauber's heat) */
  background:
    radial-gradient(120% 90% at 50% -18%,
      color-mix(in srgb, var(--sun) calc((var(--mstate, 0) * 7% + var(--mflare, 0) * 11%)), transparent) 0%,
      transparent 62%),
    var(--void);
  color: color-mix(in srgb, var(--sun) calc(var(--mflare, 0) * 24%), rgba(255, 248, 238, 0.88));
  padding: clamp(60px, 12vh, 170px) var(--edge) clamp(80px, 16vh, 220px);
  display: grid; place-items: center;
}
.monument-word .serif {
  max-width: 22em; text-align: center;
  font-size: var(--t-lead); line-height: 1.25; letter-spacing: -0.01em;
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) { .monument-gesture { display: none; } }
@media (max-width: 760px) {
  /* the mobile layout pulls the nav to the top of the page; the monument must
     still be the first thing seen, so it takes precedence and the chrome
     follows underneath it */
  .monument-field { order: -3; height: 100svh; }
  .monument-word { order: -2; }
  /* ties with .nav on -1; the band precedes it in the DOM, so the dawn lands
     before the chrome. There is no integer between the word and the nav. */
  .monument-return { order: -1; }
  .monument-mark { top: clamp(16px, 5vw, 28px); }
}

/* consent notice (public builds): a small note at the foot of the screen, never a wall */
.consent { box-sizing: border-box; width: auto; position: fixed; left: var(--edge); bottom: var(--edge); z-index: 900; max-width: 26rem; padding: 16px 18px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--grey-soft); opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.consent.is-in { opacity: 1; transform: none; }
.consent.is-leaving { opacity: 0; transform: translateY(8px); }
.consent-text { font-size: var(--t-m); line-height: 1.4; margin: 0 0 12px; }
.consent-actions { display: flex; gap: 20px; }
.consent-actions button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 6px 0; cursor: pointer; }
@media (max-width: 760px) { .consent { left: 16px; right: 16px; bottom: 16px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
@media print { .consent { display: none; } }