@charset "UTF-8";

/* ==========================================================================
   0. TYPEFACES — self-hosted
   Both faces are served from this domain instead of fonts.googleapis.com.
   That removes two third-party connections and a render-blocking stylesheet
   from the critical path, and lets the files be preloaded and cached for a
   year.  Archivo keeps both variable axes (width 62-125, weight 300-700)
   because the design uses them.  Newsreader is only ever used as a 300-weight
   italic, so it ships as a single instance instead of a variable font.
   Both are subset to Latin + Latin Extended-A + typographic punctuation.
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
}

/* ==========================================================================
   IMPI TEAK — "THE RANK"
   A design system built on two ideas taken from the business itself:

   1. THE RANK.  The Impi mark is a row of Nguni shields and spears — repeated
      verticals, drawn by hand.  Timber is the same thing: boards, staves,
      slats, treads, parquet blocks.  So the interface is built from RULES AND
      RHYTHM, never from boxes.  Content is separated by hairlines and space
      the way one board is separated from the next by a joint.  There are no
      cards on this site.

   2. THE TRADESMAN'S EYE.  The photography is honest site photography, shot
      close.  Its strength is grain, joint and fastener — not wide architectural
      composition.  So images are cropped tight and given real size, and the
      layout never asks a snapshot to behave like a magazine spread.

   Author: rebuilt from the ground up.  Vanilla CSS, no framework, no build.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------
     White ground, near-black ink, one earth accent used sparingly.  The
     warmth on this site comes from the timber in the photographs and from
     the dark grounds — not from the paper, which is now clean white so the
     pictures read as pictures rather than as tinted panels.  --paper-2 is a
     breath above white, enough to separate two sections without introducing
     a second background colour.  Every pairing below meets WCAG AA for its
     intended text size, and each one gained contrast in this change.       */
  --ink:          #16120E;   /* primary text, dark grounds                  */
  --ink-2:        #1A1613;   /* dark section ground                         */
  --ink-3:        #241E19;   /* dark section ground, one step up            */
  --graphite:     #3B342C;   /* strong secondary text                       */
  --stone:        #5F574C;   /* body secondary  (6.4:1 on paper)            */
  --stone-2:      #6E675D;   /* meta / captions (5.0:1 on paper)            */
  --paper:        #FFFFFF;   /* the ground                                  */
  --paper-2:      #FAF8F5;   /* alternate band — a warm breath, not a colour */
  --sand:         #EDE9E3;   /* fills, image placeholders                   */
  --ember:        #9A4E24;   /* the single accent (5.4:1 on paper)          */
  --ember-lift:   #C98A55;   /* accent on dark  (6.2:1 on ink-2)            */
  --chalk:        #CFC7BA;   /* secondary text on dark (10.7:1)             */
  --chalk-2:      #A79D8E;   /* meta on dark  (6.7:1)                       */

  --line:         color-mix(in srgb, var(--ink) 15%, transparent);
  --line-soft:    color-mix(in srgb, var(--ink) 9%, transparent);
  --line-strong:  color-mix(in srgb, var(--ink) 34%, transparent);
  --line-dark:    color-mix(in srgb, #FFFFFF 16%, transparent);
  --line-dark-2:  color-mix(in srgb, #FFFFFF 30%, transparent);

  /* ---- Type --------------------------------------------------------------
     One engineered voice (Archivo, variable width + weight) carries almost
     everything, used across a genuinely wide range — condensed capitals for
     labels, near-normal for display.  One human voice (Newsreader italic)
     appears only for editorial statements.  That restraint is the system.  */
  --f-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --t-mega:  clamp(2rem, 7.1vw, 6.65rem);
  --t-xxl:   clamp(1.62rem, 4.72vw, 4.08rem);
  --t-xl:    clamp(1.45rem, 3.5vw, 2.95rem);
  --t-lg:    clamp(1.22rem, 2vw, 1.7rem);
  --t-md:    clamp(1.1rem, 1.24vw, 1.3rem);
  --t-lead:  clamp(1.14rem, 1vw + .82rem, 1.46rem);
  --t-body:  clamp(1.06rem, .4vw + .96rem, 1.16rem);
  --t-sm:    1rem;
  --t-xs:    .8625rem;
  --t-label: .725rem;

  /* ---- Measure & rhythm -------------------------------------------------- */
  --gutter:  clamp(1.25rem, 4.4vw, 4.5rem);
  --maxw:    1560px;
  --measure: 34em;
  --bay:     clamp(2.75rem, 5vw, 5.5rem);  /* vertical section rhythm       */
  --bay-sm:  clamp(2rem, 3.2vw, 3.5rem);

  /* ---- Motion ------------------------------------------------------------
     One easing curve for everything that moves.  Quality reads as
     consistency, not as variety.                                           */
  --ease:    cubic-bezier(.22, .61, .27, 1);
  --ease-io: cubic-bezier(.65, .02, .18, 1);
  --t-fast:  .28s;
  --t-mid:   .5s;
  --t-slow:  .85s;

  --header-h: 104px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.72;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; background: var(--sand); }
/* Brand assets are transparent artwork, never photographs: no placeholder
   fill behind them, so the logo always sits directly on the page ground. */
img[src*="/logo/"] { background: none; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--paper); }

/* Focus: a square bracket of ink, never a rounded browser blob. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.invitation :focus-visible,
.colophon :focus-visible { outline-color: var(--ember-lift); }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .85rem 1.25rem; font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase;
  transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: 1rem; }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 1180px; }

/* Lets a single child of .shell step out and run the full width of the
   viewport.  Safe because <body> clips horizontally, so a scrollbar can
   never turn this into a sideways scroll. */
/* Written twice on purpose: it has to outrank the component rules further
   down the sheet that set their own horizontal margins. */
.bleed.bleed { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }

.bay { padding-block: var(--bay); }
.bay--sm { padding-block: var(--bay-sm); }
.bay--top0 { padding-top: 0; }
.bay--bottom0 { padding-bottom: 0; }

.ground-2 { background: var(--paper-2); }
.ground-dark { background: var(--ink-2); color: var(--paper); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--strong { background: var(--line-strong); }
.rule--dark { background: var(--line-dark); }

/* The spine: a 12-column architectural grid.  The first two columns are
   reserved on desktop for chapter numbers and labels — the drawing-sheet
   margin that gives the whole site its structure. */
.spine {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.display {
  font-family: var(--f-sans);
  font-weight: 500;
  font-variation-settings: "wdth" 96, "wght" 500;
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.display--mega { font-size: var(--t-mega); line-height: .87; letter-spacing: -.05em; }
.display--xxl  { font-size: var(--t-xxl);  line-height: .93; letter-spacing: -.042em; }
.display--xl   { font-size: var(--t-xl);   line-height: 1;   letter-spacing: -.034em; }
.display--lg   { font-size: var(--t-lg);   line-height: 1.08; letter-spacing: -.024em; }

.title-md {
  font-size: var(--t-md);
  font-weight: 500;
  font-variation-settings: "wdth" 98, "wght" 500;
  line-height: 1.24;
  letter-spacing: -.015em;
}

/* Labels are condensed capitals — the annotation voice on an architect's
   drawing.  Never a pill, never a badge. */
.label {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--t-label);
  font-weight: 600;
  font-variation-settings: "wdth" 84, "wght" 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--stone-2);
}
.label--ember { color: var(--ember); }
.label--dark  { color: var(--chalk-2); }
.label::before {
  content: ""; width: 1.6em; height: 1px; background: currentColor;
  opacity: .55; flex: none;
}
.label--bare::before { display: none; }

/* Chapter numerals live in the margin, set condensed and light — a sheet
   number, not a decoration. */
.numeral {
  font-size: clamp(1.612rem, 3.72vw, 3.472rem);
  font-weight: 300;
  font-variation-settings: "wdth" 68, "wght" 300;
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--line-strong);
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--graphite);
  max-width: 30em;
  text-wrap: pretty;
}

.prose > * + * { margin-top: 1.1em; }
.prose p { max-width: var(--measure); color: var(--stone); text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 600; }
.on-dark .prose p { color: var(--chalk); }
.on-dark .prose strong { color: var(--paper); }

/* The human voice.  Used once or twice per page and never for a heading. */
.statement {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.18rem, 1.922vw, 1.643rem);
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
.on-dark .statement { color: var(--paper); }

.meta {
  font-size: var(--t-xs);
  color: var(--stone-2);
  letter-spacing: .01em;
}

/* ==========================================================================
   5. LINKS & ACTIONS
     No pills.  A call to action is a word with a rule under it that draws
     itself on hover — the same gesture as scoring a line before you cut.
   ========================================================================== */

.act {
  --act-fg: var(--ink);
  display: inline-flex; align-items: center; gap: .7em;
  color: var(--act-fg);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variation-settings: "wdth" 92, "wght" 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-block: .55rem;
  position: relative;
}
.act::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.act:hover::after, .act:focus-visible::after { transform: scaleX(.35); }
.act svg { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--t-mid) var(--ease); }
.act:hover svg { transform: translateX(.3em); }
.act--ember { --act-fg: var(--ember); }
.act--light { --act-fg: var(--paper); }

/* The one solid control on the site.  Sharp corners, real padding, ink. */
.slab {
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  background: var(--ink); color: var(--paper);
  font-size: var(--t-sm); font-weight: 600;
  font-variation-settings: "wdth" 92, "wght" 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 1.15rem 2rem;
  border: 1px solid var(--ink);
  position: relative; overflow: hidden;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.slab > * { position: relative; z-index: 1; }
.slab::before {
  content: ""; position: absolute; inset: 0; background: var(--ember);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-mid) var(--ease-io);
}
.slab:hover::before, .slab:focus-visible::before { transform: scaleY(1); }
.slab:hover { border-color: var(--ember); }
.slab svg { width: 1.1em; height: 1.1em; flex: none; }

.slab--hollow {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.slab--hollow:hover, .slab--hollow:focus-visible { color: var(--paper); }
.slab--light {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.slab--light:hover, .slab--light:focus-visible { color: var(--paper); }
.slab--hollow-light {
  background: transparent; color: var(--paper); border-color: var(--line-dark-2);
}
.slab--hollow-light:hover, .slab--hollow-light:focus-visible { color: var(--paper); border-color: var(--ember); }
.slab--wide { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

.ulink {
  color: inherit;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: .1em;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ulink:hover { color: var(--ember); border-color: var(--ember); }
.on-dark .ulink { border-color: var(--line-dark-2); }
.on-dark .ulink:hover { color: var(--ember-lift); border-color: var(--ember-lift); }

/* ==========================================================================
   6. MASTHEAD
   ========================================================================== */

.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              height var(--t-mid) var(--ease);
}
.masthead::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--line);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.masthead.is-stuck {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  height: 80px;
}
.masthead.is-stuck::after { transform: scaleX(1); }
.masthead.is-hidden { transform: translateY(-104%); transition: transform var(--t-mid) var(--ease); }

.masthead__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}

/* The client's logo, shown at a size where its own lettering reads, with
   clear space around it. No box, no tint, no filter, no cropping — the only
   thing that ever changes is which official variant is on screen.
   width:auto + a fixed height preserves the supplied 1257:834 proportions. */
.wordmark {
  display: block; flex: none;
  padding-block: .35rem;
  line-height: 0;
}
.wordmark img {
  display: block;
  width: auto; height: 72px;
  background: none;
  transition: height var(--t-mid) var(--ease);
}
.masthead.is-stuck .wordmark img { height: 56px; }
.wordmark img.wordmark__light { display: none; }

.pilot { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); margin-left: auto; }

.pilot__nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.pilot__link {
  font-size: var(--t-xs); font-weight: 500;
  font-variation-settings: "wdth" 92, "wght" 520;
  letter-spacing: .16em; text-transform: uppercase;
  padding-block: .4rem; position: relative;
  color: var(--graphite);
  transition: color var(--t-fast) var(--ease);
}
.pilot__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ember); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-mid) var(--ease);
}
.pilot__link:hover { color: var(--ink); }
.pilot__link:hover::after { transform: scaleX(1); transform-origin: left; }
.pilot__link[aria-current="page"] { color: var(--ink); }
.pilot__link[aria-current="page"]::after { transform: scaleX(1); background: var(--ink); }

.pilot__cta {
  font-size: var(--t-xs); font-weight: 600;
  font-variation-settings: "wdth" 90, "wght" 620;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .7rem 1.15rem;
  border: 1px solid var(--line-strong);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pilot__cta:hover, .pilot__cta:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* With the overlay open the masthead sits on the dark ground, so its own
   marks have to invert or they disappear into it. */
.nav-open .masthead {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav-open .masthead::after { transform: scaleX(0); }
.nav-open .wordmark img.wordmark__dark { display: none; }
.nav-open .wordmark img.wordmark__light { display: block; }
.nav-open .burger span,
.nav-open .burger span::before,
.nav-open .burger span::after { background: var(--paper); }
.nav-open .burger[aria-expanded="true"] span { background: transparent; }
.nav-open .masthead.is-hidden { transform: none; }

/* Burger: three rules that become two. */
.burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-right: -8px;
}
.burger span {
  display: block; position: relative; width: 22px; height: 1px; background: var(--ink);
  transition: background .12s linear;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: var(--ink);
  transition: transform var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; width: 14px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); width: 22px; }

/* ==========================================================================
   7. OVERLAY NAVIGATION (mobile / tablet)
   ========================================================================== */

.overlay {
  position: fixed; inset: 0; z-index: 89;
  background: var(--ink-2); color: var(--paper);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--t-slow) var(--ease-io), visibility 0s linear var(--t-slow);
}
.overlay.is-open {
  clip-path: inset(0 0 0 0); visibility: visible;
  transition: clip-path var(--t-slow) var(--ease-io), visibility 0s;
}
.overlay__list { position: relative; border-top: 1px solid var(--line-dark); }
.overlay__list li { border-bottom: 1px solid var(--line-dark); }
.overlay__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: clamp(.9rem, 2.4vw, 1.4rem) 0;
  font-size: clamp(1.9rem, 8.5vw, 3rem);
  font-weight: 500; font-variation-settings: "wdth" 94, "wght" 500;
  letter-spacing: -.03em; line-height: 1;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}
.overlay.is-open .overlay__list a { opacity: 1; transform: none; }
.overlay.is-open .overlay__list li:nth-child(1) a { transition-delay: .16s; }
.overlay.is-open .overlay__list li:nth-child(2) a { transition-delay: .22s; }
.overlay.is-open .overlay__list li:nth-child(3) a { transition-delay: .28s; }
.overlay.is-open .overlay__list li:nth-child(4) a { transition-delay: .34s; }
.overlay.is-open .overlay__list li:nth-child(5) a { transition-delay: .40s; }
.overlay__list a:hover, .overlay__list a[aria-current="page"] { color: var(--ember-lift); }
.overlay__list a span {
  font-size: var(--t-label); letter-spacing: .2em; color: var(--chalk-2);
  font-variation-settings: "wdth" 84, "wght" 600;
}
.overlay__foot {
  position: relative; margin-top: auto; padding-top: 2.5rem;
  display: grid; gap: 1.75rem;
  opacity: 0; transition: opacity var(--t-mid) var(--ease) .44s;
}
.overlay.is-open .overlay__foot { opacity: 1; }
.overlay__foot dt {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk-2); font-variation-settings: "wdth" 84, "wght" 600;
  margin-bottom: .4rem;
}
.overlay__foot dd { margin: 0; font-size: var(--t-sm); color: var(--paper); line-height: 1.55; }
.overlay__foot dd a { display: inline-block; padding-block: .55rem; }

/* ==========================================================================
   8. THE OPENING PLATE
     Not a photo with text dumped on it.  A typographic plate on paper, with
     a tall aperture cut into the right-hand columns showing the material.
   ========================================================================== */

.plate {
  position: relative;
  min-height: min(90svh, 800px);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 3.6vw, 3rem));
  padding-bottom: clamp(1.25rem, 2.2vw, 2rem);
  display: flex; flex-direction: column;
}
.plate__inner { flex: 1; display: flex; flex-direction: column; }
.plate__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
  align-items: end;
}
.plate__type { grid-column: 1 / 7; padding-bottom: clamp(.5rem, 1.4vw, 1.25rem); }
.plate__eyebrow { margin-bottom: clamp(1rem, 2.2vw, 1.75rem); }

.plate__title {
  font-size: var(--t-mega);
  font-weight: 500;
  font-variation-settings: "wdth" 94, "wght" 480;
  line-height: .855;
  letter-spacing: -.055em;
  margin-bottom: clamp(1.15rem, 2.2vw, 1.75rem);
}
.plate__title em {
  font-family: var(--f-serif); font-style: italic; font-weight: 300;
  letter-spacing: -.03em;
}
.plate__title .ln { display: block; overflow: hidden; }
.plate__title .ln > span { display: block; }

.plate__sub {
  font-size: var(--t-lead);
  color: var(--stone);
  max-width: 30ch;
  line-height: 1.46;
  text-wrap: pretty;
  margin-bottom: clamp(1.15rem, 2.2vw, 1.75rem);
}

.plate__aperture {
  grid-column: 7 / 13;
  position: relative;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
}
.plate__aperture img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
}
.plate__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.25rem .9rem;
  background: linear-gradient(to top, rgba(22,18,14,.78), transparent);
  color: var(--paper);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  font-variation-settings: "wdth" 84, "wght" 600;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* The datum line: the factual footer of the opening plate. */
.datum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(1.1rem, 2vw, 1.75rem);
}
.datum > div {
  padding: 1.15rem clamp(.75rem, 1.6vw, 1.5rem) 0 0;
  border-right: 1px solid var(--line-soft);
}
.datum > div:last-child { border-right: 0; }
.datum dt {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
  margin-bottom: .5rem;
}
.datum dd {
  margin: 0; font-size: var(--t-sm); color: var(--ink); line-height: 1.42;
  font-variation-settings: "wdth" 96, "wght" 450;
}

/* ==========================================================================
   8b. THE STAGE — a full-bleed photographic opening
     The plate (above) sets the type on paper beside a cut aperture. The stage
     does the opposite: one photograph edge to edge, the type standing on it.
     Kept as a separate component so 404.html keeps the original plate.
   ========================================================================== */

.stage {
  position: relative;
  min-height: min(88svh, 880px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.stage__media { position: absolute; inset: 0; z-index: 0; }
.stage__media img { width: 100%; height: 100%; object-fit: cover; }
/* Dark at both ends and open in the middle: the header reads against the top,
   the headline against the bottom, and the photograph still breathes between
   them. A flat wash would kill the picture to save the type. */
.stage__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(11,8,6,.74) 0%,
      rgba(11,8,6,.44) 14%,
      rgba(11,8,6,.16) 34%,
      rgba(11,8,6,.34) 55%,
      rgba(11,8,6,.78) 78%,
      rgba(11,8,6,.93) 100%);
}
.stage__inner {
  position: relative; z-index: 1;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem));
  padding-bottom: clamp(1.75rem, 4vw, 3.25rem);
  color: var(--paper);
}
.stage__eyebrow { color: var(--paper); margin-bottom: clamp(1rem, 2.2vw, 1.75rem); }
.stage__eyebrow::before { opacity: .8; }
.stage__title {
  font-size: var(--t-mega);
  font-weight: 500;
  font-variation-settings: "wdth" 94, "wght" 480;
  line-height: .87; letter-spacing: -.05em;
  color: var(--paper);
  max-width: 14ch;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem);
}
.stage__title em {
  font-family: var(--f-serif); font-style: italic; font-weight: 300;
  letter-spacing: -.03em; color: var(--ember-lift);
}
.stage__title .ln { display: block; overflow: hidden; }
.stage__title .ln > span { display: block; }
.stage__sub {
  font-size: var(--t-lead); line-height: 1.46; color: #E8E1D6;
  max-width: 34ch; margin-bottom: clamp(1.35rem, 2.6vw, 2rem);
}
.stage__caption {
  position: absolute; right: var(--gutter); bottom: clamp(1rem, 2vw, 1.5rem); z-index: 1;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk-2); font-variation-settings: "wdth" 84, "wght" 600;
}

/* The header stands on the photograph until the page scrolls under it. */
.masthead--over:not(.is-stuck) .wordmark__dark { display: none; }
.masthead--over:not(.is-stuck) .wordmark__light { display: block; }
.masthead--over:not(.is-stuck) .pilot__link { color: var(--chalk); }
.masthead--over:not(.is-stuck) .pilot__link:hover { color: var(--paper); }
.masthead--over:not(.is-stuck) .pilot__cta { color: var(--paper); border-color: var(--line-dark-2); }
.masthead--over:not(.is-stuck) .pilot__cta:hover { background: var(--paper); color: var(--ink); }
.masthead--over:not(.is-stuck) .burger span,
.masthead--over:not(.is-stuck) .burger span::before,
.masthead--over:not(.is-stuck) .burger span::after { background: var(--paper); }

/* The datum line keeps its job, now sitting on paper under the photograph. */
.stage + .shell .datum { margin-top: 0; border-top: 0; }


/* ==========================================================================
   8c. THE BLEED SYSTEM
     The layout spine below is a drawing sheet; this is what happens when a
     photograph is allowed to walk off the edge of it.  Three members:

       .split  — a half-page photograph running to one screen edge, with the
                 reading column held on the shell's own margin.
       .pin    — a full-bleed photograph with the content laid over it.
       .strip  — a row of photographs edge to edge, hairline-separated.

     Everything here sits deliberately outside .shell.
   ========================================================================== */

/* The shell's own outer margin, expressed so bleed sections can align their
   type to it without being wrapped in .shell. */
.split, .pin, .strip { --rail: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: stretch;
}
.split__media { position: relative; overflow: hidden; background: var(--sand); }
.split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.split:hover .split__media img { transform: scale(1.035); }
/* A caption sitting on a photograph needs its own ground to sit on. */
.split__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, rgba(11,8,6,.70), rgba(11,8,6,0));
  pointer-events: none;
}
.split__tag {
  position: absolute; z-index: 1; left: clamp(1rem, 2vw, 1.75rem); bottom: clamp(.9rem, 1.8vw, 1.4rem);
  margin: 0;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper); font-variation-settings: "wdth" 84, "wght" 600;
  text-shadow: 0 1px 14px rgba(11, 8, 6, .75);
}
.split__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 6.5rem) var(--rail) clamp(2.5rem, 6vw, 6.5rem) clamp(1.75rem, 4vw, 4.25rem);
  min-width: 0;
}
.split__body > * { max-width: 54ch; }
/* Mirrored: the photograph leaves by the other edge and the type follows. */
.split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
.split--flip .split__media { grid-column: 2; grid-row: 1; }
.split--flip .split__body {
  grid-column: 1; grid-row: 1;
  padding-left: var(--rail);
  padding-right: clamp(1.75rem, 4vw, 4.25rem);
}
/* A taller photograph where the section can carry it. */
.split--tall .split__media { min-height: min(72svh, 680px); }

/* Content laid over a full-bleed photograph. */
.pin {
  position: relative; overflow: hidden;
  background: var(--ink); isolation: isolate; color: var(--paper);
}
.pin__media { position: absolute; inset: 0; z-index: 0; }
.pin__media img { width: 100%; height: 100%; object-fit: cover; }
.pin__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,8,6,.95) 0%, rgba(11,8,6,.90) 46%, rgba(11,8,6,.74) 74%, rgba(11,8,6,.56) 100%),
    linear-gradient(to bottom, rgba(11,8,6,.55) 0%, rgba(11,8,6,0) 34%);
}
.pin__inner {
  position: relative; z-index: 1;
  padding-block: clamp(3.5rem, 9vw, 8rem);
}
/* The pin is a dark ground that happens to be a photograph, so everything
   inside it borrows the dark-ground hairlines and greys. */
.pin .chapter__head { border-top-color: var(--line-dark-2); }
.pin .chapter__num .numeral { color: var(--line-dark-2); }
.pin .chapter__aside p { color: var(--chalk); }
.pin .ledger { border-top-color: var(--line-dark); }
.pin .ledger__row { border-bottom-color: var(--line-dark); }
.pin .ledger__n { color: var(--chalk-2); }
.pin .ledger__k { color: var(--paper); }
.pin .ledger__v { color: var(--chalk); }
.pin__tag {
  position: absolute; z-index: 1; right: var(--rail); bottom: clamp(1rem, 2vw, 1.6rem);
  margin: 0;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk-2); font-variation-settings: "wdth" 84, "wght" 600;
}

/* A hairline-separated row of photographs running the whole width. */
.strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
}
.strip figure { margin: 0; position: relative; overflow: hidden; background: var(--sand); }
.strip img {
  width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease);
}
.strip figure:hover img { transform: scale(1.05); }
.strip figure::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top, rgba(11,8,6,.66), rgba(11,8,6,0));
  pointer-events: none;
}
.strip figcaption {
  position: absolute; z-index: 1;
  left: clamp(.9rem, 1.8vw, 1.5rem); right: clamp(.9rem, 1.8vw, 1.5rem);
  bottom: clamp(.8rem, 1.6vw, 1.25rem);
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper); font-variation-settings: "wdth" 84, "wght" 600;
  text-shadow: 0 1px 14px rgba(11, 8, 6, .8);
}

/* ==========================================================================
   9. CHAPTERS — numbered sections with a drawing-sheet margin
   ========================================================================== */

.chapter__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
  align-items: start;
  padding-top: clamp(1rem, 1.7vw, 1.5rem);
  border-top: 1px solid var(--line-strong);
  margin-bottom: clamp(1.35rem, 2.5vw, 2.25rem);
}
.ground-dark .chapter__head { border-top-color: var(--line-dark-2); }
.chapter__num { grid-column: 1 / 3; }
.ground-dark .chapter__num .numeral { color: var(--line-dark-2); }
.chapter__title { grid-column: 3 / 9; }
.chapter__aside { grid-column: 9 / 13; padding-top: .6rem; }
.chapter__aside p { font-size: var(--t-sm); color: var(--stone); line-height: 1.6; }
.ground-dark .chapter__aside p { color: var(--chalk); }
.chapter__head .label { margin-bottom: 1rem; }

/* ==========================================================================
   10. THE PREMISE (chapter 01)
   ========================================================================== */

.premise {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
  row-gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
.premise__statement { grid-column: 1 / 8; }
.premise__body { grid-column: 8 / 13; }
.premise__figure { grid-column: 1 / 13; margin-top: clamp(.35rem, 1vw, 1rem); }
.premise__figure img { width: 100%; aspect-ratio: 21 / 7.5; object-fit: cover; object-position: center 62%; }
.premise__figure figcaption {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: .85rem; border-top: 1px solid var(--line);
  margin-top: .85rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
}

/* ==========================================================================
   11. THE WORK RAIL — horizontal editorial scroll, variable widths
   ========================================================================== */

/* The rail bleeds to the viewport edge but its first item still lands on the
   grid spine, so the composition stays aligned while the scroll runs off-page. */
.rail-wrap { width: 100%; }
.rail {
  --rail-pad: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: var(--rail-pad);
  scroll-padding-inline-start: var(--rail-pad);
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { height: 2px; }
.rail::-webkit-scrollbar-track { background: var(--line-soft); }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); }

.rail__item {
  flex: none;
  scroll-snap-align: start;
  display: block;
  position: relative;
}
/* Variable widths and vertical offsets: the composition is asymmetric on
   purpose, so no two projects read as equally weighted. */
.rail__item--w1 { width: clamp(240px, 26vw, 400px); }
.rail__item--w2 { width: clamp(290px, 36vw, 570px); }
.rail__item--w3 { width: clamp(210px, 21vw, 320px); }
.rail__item--drop { margin-top: clamp(1rem, 2.6vw, 2.75rem); }

.rail__frame { overflow: hidden; position: relative; background: var(--sand); }
.rail__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter var(--t-slow) var(--ease);
}
.rail__item--w1 .rail__frame { aspect-ratio: 4 / 5; }
.rail__item--w2 .rail__frame { aspect-ratio: 16 / 11; }
.rail__item--w3 .rail__frame { aspect-ratio: 3 / 4.4; }
.rail__item:hover .rail__frame img { transform: scale(1.045); }

.rail__meta {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-top: .9rem; margin-top: .9rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.rail__meta::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.rail__item:hover .rail__meta::before { transform: scaleX(1); }
.rail__name {
  font-size: var(--t-sm); font-weight: 500;
  font-variation-settings: "wdth" 96, "wght" 520;
  line-height: 1.3; letter-spacing: -.008em;
}
.rail__where {
  display: block; margin-top: .3rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
}
.rail__idx {
  font-size: var(--t-label); letter-spacing: .12em; color: var(--stone-2);
  font-variation-settings: "wdth" 78, "wght" 600; font-variant-numeric: tabular-nums;
  flex: none; padding-top: .1rem;
}
.rail__end {
  flex: none; width: clamp(200px, 22vw, 300px);
  display: flex; align-items: center;
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 2vw, 2rem);
}

.rail-hint {
  display: flex; align-items: center; gap: .7rem;
  margin-top: 1.25rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
}
.rail-hint svg { width: 2.5rem; height: .75rem; }

/* ==========================================================================
   12. THE INDEX — expertise as a set of areas, image swaps on interaction
   ========================================================================== */

.index {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
  align-items: start;
}
.index__list { grid-column: 1 / 8; border-top: 1px solid var(--line-dark); }
.index__row { border-bottom: 1px solid var(--line-dark); }
.index__link {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(.95rem, 1.9vw, 1.45rem) 0;
  transition: padding-left var(--t-mid) var(--ease);
}
.index__link:hover, .index__link:focus-visible,
.index__row.is-active .index__link { padding-left: clamp(.5rem, 1.5vw, 1.5rem); }
.index__n {
  font-size: var(--t-label); letter-spacing: .16em; color: var(--chalk-2);
  font-variation-settings: "wdth" 80, "wght" 600; font-variant-numeric: tabular-nums;
}
.index__name {
  font-size: clamp(1.2rem, 1.984vw, 1.612rem);
  font-weight: 400;
  font-variation-settings: "wdth" 94, "wght" 420;
  letter-spacing: -.028em; line-height: 1;
  color: var(--chalk);
  transition: color var(--t-mid) var(--ease);
}
.index__link:hover .index__name,
.index__link:focus-visible .index__name,
.index__row.is-active .index__name { color: var(--paper); }
.index__sub {
  display: block; margin-top: .6rem;
  font-size: var(--t-xs); color: var(--chalk-2); letter-spacing: .02em;
  line-height: 1.5; max-width: 42ch;
}
.index__go {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--chalk-2);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.index__link:hover .index__go,
.index__link:focus-visible .index__go,
.index__row.is-active .index__go { opacity: 1; transform: none; }

.index__stage {
  grid-column: 9 / 13;
  position: sticky; top: calc(var(--header-h) + 3rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-3);
}
.index__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity var(--t-slow) var(--ease), transform 1.4s var(--ease);
}
.index__stage img.is-shown { opacity: 1; transform: scale(1); }
/* On pointer devices the shared stage carries the imagery; each row's own
   thumbnail is only used where there is no hover to rely on. */
.index__thumb { display: none; }
.index__stage-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(22,18,14,.85), transparent);
  color: var(--paper);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  font-variation-settings: "wdth" 84, "wght" 600;
}

/* ==========================================================================
   13. THE MATERIAL — specimen strip + species ledger
   ========================================================================== */

.specimens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.2vw, 1.25rem);
}
.specimen { position: relative; overflow: hidden; }
.specimen img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.specimen:hover img { transform: scale(1.05); }
.specimen figcaption {
  padding-top: .8rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
}
.specimen--tall img { aspect-ratio: 3 / 4; }

/* A hairline-ruled list of species.  No chips, no tags, no pills. */
.species {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
}
.species li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  font-variation-settings: "wdth" 96, "wght" 450;
}
.species li span {
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
  text-align: right;
}

/* ==========================================================================
   14. THE LEDGER — factual trust, no invented statistics, no counters
   ========================================================================== */

.ledger { border-top: 1px solid var(--line); }
.ground-dark .ledger { border-top-color: var(--line-dark); }
.ledger__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 3rem);
  align-items: baseline;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.ground-dark .ledger__row { border-bottom-color: var(--line-dark); }
.ledger__n {
  font-size: var(--t-label); letter-spacing: .14em; color: var(--stone-2);
  font-variation-settings: "wdth" 78, "wght" 600; font-variant-numeric: tabular-nums;
}
.ground-dark .ledger__n { color: var(--chalk-2); }
.ledger__k {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-weight: 500; font-variation-settings: "wdth" 94, "wght" 500;
  letter-spacing: -.02em; line-height: 1.2;
}
.ledger__v { font-size: var(--t-sm); color: var(--stone); line-height: 1.68; max-width: 44ch; }
.ground-dark .ledger__v { color: var(--chalk); }

/* ==========================================================================
   15. THE CASE — one featured project
   ========================================================================== */

.case__figure { position: relative; overflow: hidden; }
.case__figure img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 60%;
  transition: transform 1.4s var(--ease);
}
.case__figure:hover img { transform: scale(1.03); }
.case__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
  row-gap: 2rem;
  padding-top: clamp(1.1rem, 2.2vw, 1.85rem);
  margin-top: clamp(1.1rem, 2.2vw, 1.85rem);
  border-top: 1px solid var(--line);
}
.ground-dark .case__body { border-top-color: var(--line-dark); }
.case__title { grid-column: 1 / 7; }
.case__facts { grid-column: 7 / 10; }
.case__note  { grid-column: 10 / 13; }
.case__facts dl { display: grid; gap: 1.1rem; }
.case__facts dt {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
  margin-bottom: .25rem;
}
.ground-dark .case__facts dt { color: var(--chalk-2); }
.case__facts dd { margin: 0; font-size: var(--t-sm); font-variation-settings: "wdth" 96, "wght" 450; }

/* ==========================================================================
   16. THE INVITATION — final call, the one inverted moment
   ========================================================================== */

.invitation {
  background: var(--ink-2); color: var(--paper);
  position: relative; overflow: hidden;
}
.invitation__inner { position: relative; }
.invitation__title {
  font-size: var(--t-xxl);
  font-weight: 400; font-variation-settings: "wdth" 94, "wght" 400;
  line-height: .98; letter-spacing: -.042em;
  max-width: 16ch;
  margin-bottom: clamp(1.15rem, 2.2vw, 1.85rem);
}
.invitation__title em {
  font-family: var(--f-serif); font-style: italic; font-weight: 300;
  color: var(--ember-lift);
}
.invitation__cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
  row-gap: 2.5rem;
  align-items: end;
}
.invitation__lead { grid-column: 1 / 8; }
.invitation__reach { grid-column: 9 / 13; }
.invitation__reach dl { border-top: 1px solid var(--line-dark); }
.invitation__reach div {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 1px solid var(--line-dark);
}
.invitation__reach dt {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk-2); font-variation-settings: "wdth" 84, "wght" 600;
}
.invitation__reach dd { margin: 0; font-size: var(--t-sm); font-variation-settings: "wdth" 96, "wght" 500; }

/* ==========================================================================
   17. COLOPHON (footer)
   ========================================================================== */

.colophon { background: var(--ink); color: var(--paper); }
.colophon__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
  row-gap: clamp(2rem, 3vw, 2.75rem);
  padding-block: clamp(2.4rem, 4vw, 3.75rem) clamp(1.75rem, 2.8vw, 2.5rem);
}
.colophon__brand { grid-column: 1 / 5; }
.colophon__brand img { width: clamp(150px, 14vw, 200px); height: auto; }
.colophon__brand p {
  margin-top: 1.5rem; font-size: var(--t-sm); color: var(--chalk); line-height: 1.7;
  max-width: 34ch;
}
.colophon nav { grid-column: span 2; }
.colophon__contact { grid-column: 9 / 13; }
.colophon h2 {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk-2); font-variation-settings: "wdth" 84, "wght" 600;
  padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-dark);
}
.colophon__list a {
  display: inline-block;
  padding-block: .35rem;
  font-size: var(--t-sm); color: var(--chalk);
  transition: color var(--t-fast) var(--ease);
}
.colophon__list a:hover { color: var(--paper); }
.colophon__contact dl { display: grid; gap: 1.15rem; }
.colophon__contact dt {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--chalk-2); font-variation-settings: "wdth" 84, "wght" 600; margin-bottom: .3rem;
}
.colophon__contact dd { margin: 0; font-size: var(--t-sm); color: var(--paper); line-height: 1.6; }
.colophon__contact dd > a { display: inline-block; padding-block: .3rem; }
.colophon__contact address, .reach address, .overlay__foot address { font-style: normal; }
.colophon__contact dd a:hover { color: var(--ember-lift); }

.colophon__areas {
  border-top: 1px solid var(--line-dark);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.colophon__areas p {
  font-size: var(--t-xs); color: var(--chalk-2); line-height: 1.85; max-width: 105ch;
}
.colophon__areas p + p { margin-top: .5rem; }
.colophon__areas strong {
  color: var(--chalk); font-variation-settings: "wdth" 84, "wght" 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: var(--t-label);
  margin-right: .4rem;
}
.colophon__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.6rem 2rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: var(--t-xs); color: var(--chalk-2);
}
.colophon__bottom nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.colophon__bottom nav a { display: inline-block; padding-block: .5rem; }
.colophon__bottom a:hover { color: var(--paper); }

/* Design credit. It inherits the row's size and colour; the link is ruled
   underneath because it sits inside a sentence rather than in a list of
   links, and the tap target is padded to the same height as the ones beside
   it so it is no harder to hit on a phone. */
.colophon__credit a {
  display: inline-block;
  padding-block: .5rem;
  color: var(--chalk);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line-dark-2);
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.colophon__credit a:hover { color: var(--paper); text-decoration-color: var(--ember-lift); }

/* ==========================================================================
   18. THE DOCK — contact, integrated rather than bolted on
     Desktop: a small ink tab, no green bubble, appears after first scroll.
     Mobile:  a hairline-divided bar of three real actions.
   ========================================================================== */

.dock {
  position: fixed; z-index: 80;
  right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  display: flex; align-items: center;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.dock.is-up { opacity: 1; transform: none; pointer-events: auto; }
.dock a {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.15rem;
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  font-variation-settings: "wdth" 84, "wght" 600;
  transition: background var(--t-fast) var(--ease);
}
.dock a + a { border-left: 1px solid var(--line-dark); }
.dock a:hover { background: var(--ember); }
.dock svg { width: 1.05rem; height: 1.05rem; flex: none; }

.dock-m {
  position: fixed; inset: auto 0 0 0; z-index: 80;
  display: none;
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--line-dark);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease);
}
.dock-m.is-up { transform: none; }
.dock-m a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.05rem .5rem;
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  font-variation-settings: "wdth" 84, "wght" 600;
}
.dock-m a + a { border-left: 1px solid var(--line-dark); }
.dock-m a:last-child { background: var(--ember); }
.dock-m svg { width: 1rem; height: 1rem; flex: none; }
.dock-m__row { display: flex; }

/* ==========================================================================
   19. PAGE HEADERS (inner pages)
   ========================================================================== */

.pagehead {
  padding-top: calc(var(--header-h) + clamp(1.75rem, 3.6vw, 3.25rem));
  padding-bottom: clamp(1.6rem, 3vw, 2.75rem);
}
.pagehead__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem); row-gap: 2rem; align-items: end;
}
.pagehead__title { grid-column: 1 / 9; }
.pagehead__aside { grid-column: 9 / 13; }
.pagehead__aside p { font-size: var(--t-sm); color: var(--stone); line-height: 1.62; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.85rem);
}
.crumbs a { display: inline-block; padding-block: .4rem; }
.crumbs a:hover { color: var(--ember); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ==========================================================================
   20. EXPERTISE CHAPTERS (services page)
   ========================================================================== */

.craft { border-top: 1px solid var(--line-strong); padding-block: clamp(2rem, 3.6vw, 3.6rem); }
.craft:first-of-type { border-top: 0; padding-top: 0; }
.craft__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem); row-gap: clamp(1.5rem, 2.8vw, 2.25rem);
  align-items: start;
}
.craft__num { grid-column: 1 / 3; }
.craft__intro { grid-column: 3 / 9; }
/* The photograph travels with the reading column instead of leaving a tall
   empty margin beside the specification.  Same gesture as the index stage. */
.craft__figure {
  grid-column: 9 / 13; grid-row: 1 / span 2;
  position: sticky; top: calc(var(--header-h) + 2rem);
  align-self: start; overflow: hidden;
}
.craft__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.craft__detail { grid-column: 3 / 9; }
.craft--flip .craft__figure { grid-column: 1 / 5; }
.craft--flip .craft__num { grid-column: 5 / 7; }
.craft--flip .craft__intro,
.craft--flip .craft__detail { grid-column: 7 / 13; }

.craft__title { margin-bottom: 1.1rem; }
.craft__lede { font-size: var(--t-lead); color: var(--graphite); line-height: 1.48; }

/* A two-column hairline list.  Reads as a specification, not as chips. */
.spec { border-top: 1px solid var(--line); margin-top: 1.35rem; }
.spec > h4 {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
  padding-top: .9rem; margin-bottom: .35rem;
}
.spec ul { columns: 2; column-gap: clamp(1rem, 2.5vw, 2.5rem); }
.spec li {
  break-inside: avoid;
  padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--stone);
}
.spec li b {
  display: block; color: var(--ink); font-weight: 500;
  font-variation-settings: "wdth" 96, "wght" 520; margin-bottom: .1rem;
}
.spec--single ul { columns: 1; }

.craft__why {
  margin-top: 1.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.craft__why p { font-size: var(--t-sm); color: var(--stone); line-height: 1.74; max-width: 50ch; }

/* Strands: the named specialisms inside an area of work.  Real headings with
   real anchors, so every URL the old site published still lands somewhere. */
.strands { border-top: 1px solid var(--line); margin-top: 1.35rem; }
.strand {
  padding: clamp(.85rem, 1.5vw, 1.15rem) 0;
  border-bottom: 1px solid var(--line);
}
.strand h3 {
  font-size: var(--t-sm); font-weight: 600;
  font-variation-settings: "wdth" 88, "wght" 620;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink);
  margin-bottom: .45rem;
  scroll-margin-top: calc(var(--header-h) + 6rem);
}
.strand p { font-size: var(--t-sm); color: var(--stone); line-height: 1.72; max-width: 54ch; }

/* Sub-services listed under an area — preserves the original nine anchors. */
.subservices {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin-top: 1.1rem;
}
.subservices a {
  font-size: var(--t-xs); color: var(--stone-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: .15rem;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.subservices a:hover { color: var(--ember); border-color: var(--ember); }

/* Jump index at the top of the services page */
.jump { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.jump ol {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
}
.jump li { border-bottom: 1px solid var(--line-soft); }
.jump a {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .8rem .5rem .8rem 0;
  font-size: var(--t-sm); font-variation-settings: "wdth" 96, "wght" 480;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.jump a:hover { color: var(--ember); padding-left: .4rem; }
.jump a i {
  font-style: normal; font-size: var(--t-label); letter-spacing: .12em;
  color: var(--stone-2); font-variation-settings: "wdth" 78, "wght" 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   21. THE PORTFOLIO (gallery page)
   ========================================================================== */

.filters {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 clamp(1.25rem, 2.6vw, 2.5rem);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  padding-block: 1.1rem;
  position: sticky; top: var(--header-h); z-index: 40;
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.filter {
  font-size: var(--t-xs); font-weight: 500;
  font-variation-settings: "wdth" 90, "wght" 520;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone-2);
  padding-block: .45rem; position: relative;
  transition: color var(--t-fast) var(--ease);
}
.filter::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ink); }
.filter[aria-pressed="true"]::after { transform: scaleX(1); }
.filter sup {
  font-size: .625rem; margin-left: .35em; color: var(--stone-2);
  font-variant-numeric: tabular-nums; top: -.6em;
}
.filters__count { margin-left: auto; font-size: var(--t-label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600; }

/* Editorial mosaic: variable spans, so the strongest photographs get size. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(.5rem, 1.4vw, 1.5rem);
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
}
.plate-item {
  grid-column: span 2;
  position: relative; display: block; overflow: hidden;
  background: var(--sand);
}
.plate-item--wide { grid-column: span 3; }
.plate-item--hero { grid-column: span 4; }
.plate-item__frame { overflow: hidden; }
.plate-item img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1;
  transition: transform 1.2s var(--ease), opacity var(--t-mid) var(--ease);
}
.plate-item--wide img { aspect-ratio: 3 / 2.1; }
.plate-item--hero img { aspect-ratio: 4 / 2.6; }
.plate-item:hover img { transform: scale(1.05); }
.plate-item__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 3rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(22,18,14,.88), rgba(22,18,14,.35) 55%, transparent);
  color: var(--paper);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.plate-item:hover .plate-item__cap,
.plate-item:focus-visible .plate-item__cap { opacity: 1; transform: none; }
.plate-item__cap b {
  display: block; font-size: var(--t-sm); font-weight: 500;
  font-variation-settings: "wdth" 96, "wght" 520; line-height: 1.28;
}
.plate-item__cap span {
  display: block; margin-top: .3rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--chalk-2); font-variation-settings: "wdth" 84, "wght" 600;
}
.plate-item.is-hidden { display: none; }

.empty {
  grid-column: 1 / -1; padding: clamp(2rem, 4vw, 3.5rem) 0; text-align: center;
  color: var(--stone);
}

/* ==========================================================================
   22. LIGHTBOX
   ========================================================================== */

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  display: grid; grid-template-rows: 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-mid) var(--ease), visibility 0s; }
.lightbox__stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 6vw, 5.5rem) 1rem;
  min-height: 0;
}
.lightbox__img {
  max-width: 100%; max-height: 100%; object-fit: contain; background: none;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.lightbox__img.is-ready { opacity: 1; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  color: var(--paper);
  border-top: 1px solid var(--line-dark);
  margin-inline: clamp(1rem, 4vw, 2.5rem);
}
.lightbox__title { font-size: var(--t-sm); font-variation-settings: "wdth" 96, "wght" 520; }
.lightbox__cat {
  display: block; font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk-2); font-variation-settings: "wdth" 84, "wght" 600; margin-bottom: .3rem;
}
.lightbox__count {
  font-size: var(--t-label); letter-spacing: .16em; color: var(--chalk-2);
  font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 80, "wght" 600;
}
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--paper); border: 1px solid var(--line-dark-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lb-btn:hover { background: var(--ember); border-color: var(--ember); }
.lb-btn svg { width: 1.1rem; height: 1.1rem; }
.lb-btn--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb-btn--next { right: clamp(.5rem, 2vw, 1.5rem); }
.lb-close {
  position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
  width: 44px; height: 44px; display: grid; place-items: center; z-index: 3;
  color: var(--paper); border: 1px solid var(--line-dark-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lb-close:hover { background: var(--ember); border-color: var(--ember); }
.lb-close svg { width: 1.05rem; height: 1.05rem; }

/* ==========================================================================
   23. FORM — underlines, not boxes
   ========================================================================== */

.enquiry { display: grid; gap: clamp(1.25rem, 2.4vw, 1.85rem); }
.enquiry__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
}
.f { display: flex; flex-direction: column; gap: .45rem; }
.f--full { grid-column: 1 / -1; }
.f > label {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
}
.f > label i { font-style: normal; color: var(--ember); }
.f input, .f select, .f textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .7rem 0;
  font-size: var(--t-body);
  font-variation-settings: "wdth" 98, "wght" 400;
  transition: border-color var(--t-fast) var(--ease);
}
.f textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.f select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}
.f input::placeholder, .f textarea::placeholder { color: var(--stone-2); opacity: .75; }
.f input:focus, .f select:focus, .f textarea:focus { border-bottom-color: var(--ink); outline: none; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 4px;
}
.f.is-bad input, .f.is-bad select, .f.is-bad textarea { border-bottom-color: var(--ember); }
.f__err {
  font-size: var(--t-xs); color: var(--ember); min-height: 1.1em;
}

.f > label.consent {
  text-transform: none; letter-spacing: normal; font-size: var(--t-sm);
  color: var(--stone); font-variation-settings: "wdth" 100, "wght" 400;
}
.consent { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; }
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin-top: .25rem;
  border: 1px solid var(--line-strong); background: transparent;
  display: grid; place-content: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.consent input::after {
  content: ""; width: 9px; height: 5px;
  border-left: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper);
  transform: rotate(-45deg) scale(0); transition: transform var(--t-fast) var(--ease);
  margin-top: -2px;
}
.consent input:checked { background: var(--ink); border-color: var(--ink); }
.consent input:checked::after { transform: rotate(-45deg) scale(1); }
.consent span { font-size: var(--t-sm); color: var(--stone); line-height: 1.6; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.f__hint { font-size: var(--t-xs); color: var(--stone-2); line-height: 1.5; }

/* --------------------------------------------------------------------------
   The enquiry panel.
   The rest of the site writes its inputs as underlines, which is right for one
   or two fields.  A real enquiry form has five, a dropdown and a textarea, and
   at that length underlines stop reading as a form — the eye cannot tell where
   one field ends and the next begins.  So this one gets bordered fields inside
   a single ruled panel.  Sharp corners, hairline borders, no shadows and no
   rounded pills: it is a drawing sheet with boxes on it, not a UI kit.
   -------------------------------------------------------------------------- */
.enquiry--panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: clamp(1.35rem, 3.2vw, 2.5rem);
  gap: clamp(1.15rem, 2.2vw, 1.6rem);
}
.enquiry--panel .enquiry__grid { gap: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.75rem); }
.enquiry--panel .f { gap: .5rem; }
.enquiry--panel .f > label {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  font-size: var(--t-xs); letter-spacing: .15em; color: var(--graphite);
}
/* "Optional" is set quieter than the label it sits beside, so the two
   required fields read as the default path through the form. */
.f__opt {
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 500;
}
.enquiry--panel .f input,
.enquiry--panel .f select,
.enquiry--panel .f textarea {
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  padding: .9rem 1rem;
  min-height: 3.35rem;
  font-size: 1.0625rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.enquiry--panel .f textarea { min-height: 7.5rem; padding-block: .95rem; }
/* The site-wide select arrow is two gradients making a 6px triangle, which is
   right against an underline but too small and too far off-centre inside a
   bordered field. A drawn chevron reads properly at this size. */
.enquiry--panel .f select {
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%233A322B' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 12px 8px;
}
/* An unchosen dropdown should not look like an answer. */
.enquiry--panel .f select:invalid,
.enquiry--panel .f select.is-empty { color: var(--stone-2); }
.enquiry--panel .f input:hover,
.enquiry--panel .f select:hover,
.enquiry--panel .f textarea:hover { border-color: var(--graphite); }
/* Focus reads twice: the border darkens and an ember rule appears under the
   field, so the active row is obvious even at a glance. */
.enquiry--panel .f input:focus,
.enquiry--panel .f select:focus,
.enquiry--panel .f textarea:focus {
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--ember);
}
.enquiry--panel .f.is-bad input,
.enquiry--panel .f.is-bad select,
.enquiry--panel .f.is-bad textarea {
  border-color: var(--ember);
  box-shadow: inset 0 -2px 0 0 var(--ember);
}
.enquiry--panel .f__err:empty { min-height: 0; }
.enquiry--panel .actions { align-items: center; }
.slab--lead {
  min-width: min(100%, 19rem);
  padding-block: 1.3rem;
  letter-spacing: .1em;
}
.slab--lead[disabled] { opacity: .55; cursor: default; }
.form-onward {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  font-size: var(--t-sm); color: var(--stone); line-height: 1.72;
  max-width: 54ch;
}

.form-note {
  font-size: var(--t-xs); color: var(--stone-2); line-height: 1.7;
  padding-top: 1rem; border-top: 1px solid var(--line-soft);
}
.form-status {
  font-size: var(--t-sm); line-height: 1.6; padding: 1rem 1.15rem;
  border-left: 2px solid var(--line-strong); background: var(--paper-2);
  display: none;
}
.form-status.is-shown { display: block; }
.form-status.is-good { border-left-color: #2F6B3F; }
.form-status.is-bad  { border-left-color: var(--ember); }

/* ==========================================================================
   24. CONTACT & ACCORDION
   ========================================================================== */

/* Contact: a 7/4 split that collapses to one column on small screens. */
.contact { row-gap: clamp(1.9rem, 3.4vw, 3rem); }
.contact__form { grid-column: 1 / 8; }
.contact__aside { grid-column: 9 / 13; }
@media (max-width: 1180px) { .contact__form { grid-column: 1 / 8; } .contact__aside { grid-column: 8 / 13; } }
@media (max-width: 1000px) { .contact__form, .contact__aside { grid-column: 1 / -1; } }

.reach { border-top: 1px solid var(--line); }
.reach__row {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1rem, 1.8vw, 1.35rem) 0;
  border-bottom: 1px solid var(--line);
}
.reach__k {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600; padding-top: .2rem;
}
.reach__v { font-size: var(--t-sm); line-height: 1.65; font-style: normal; }
.reach__v a {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.reach__v a:hover { color: var(--ember); text-decoration-color: var(--ember); }
.reach__v small { display: block; margin-top: .3rem; font-size: var(--t-xs); color: var(--stone-2); }

.qa { border-top: 1px solid var(--line-strong); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; text-align: left;
  padding: clamp(.9rem, 1.9vw, 1.3rem) 0;
  font-size: clamp(1rem, 1.05vw, 1.06rem);
  font-variation-settings: "wdth" 96, "wght" 500;
  line-height: 1.35; letter-spacing: -.012em;
  transition: color var(--t-fast) var(--ease);
}
.qa__q:hover { color: var(--ember); }
.qa__mark { flex: none; width: 14px; height: 14px; position: relative; margin-top: .45rem; }
.qa__mark::before, .qa__mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor;
  transition: transform var(--t-mid) var(--ease);
}
.qa__mark::after { transform: rotate(90deg); }
.qa__q[aria-expanded="true"] .qa__mark::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) var(--ease-io); }
.qa__q[aria-expanded="true"] + .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p {
  font-size: var(--t-sm); color: var(--stone); line-height: 1.75;
  max-width: 62ch; padding-bottom: clamp(1.1rem, 2vw, 1.5rem);
}

/* The embed is inserted on scroll, so the block holds its own space and
   ground colour until it arrives — nothing moves when it does. */
.mapframe { position: relative; aspect-ratio: 21 / 8; border-top: 1px solid var(--line); background: var(--sand); }
.mapframe iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }

/* ==========================================================================
   25. STEPS / PROCESS
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.steps > li { padding: clamp(1.15rem, 2vw, 1.75rem) clamp(1rem, 2vw, 2rem) 0 0; border-right: 1px solid var(--line-soft); }
.steps > li:last-child { border-right: 0; }
.steps h3 {
  font-size: var(--t-md); font-variation-settings: "wdth" 96, "wght" 500;
  letter-spacing: -.018em; margin: .85rem 0 .6rem; line-height: 1.2;
}
.steps p { font-size: var(--t-sm); color: var(--stone); line-height: 1.65; }
.steps .numeral { font-size: clamp(1.178rem, 2.108vw, 1.86rem); }


/* ==========================================================================
   25b. EDITORIAL IMAGE COMPOSITIONS
     Photography carries most of the storytelling on this site, so it is
     given the same drawing-sheet discipline as the type: full-bleed bands,
     asymmetric pairs, and image-with-text spreads.  Sharp corners
     throughout — nothing else in this system is rounded.
   ========================================================================== */

/* A full-bleed feature photograph.  Lives outside .shell so it runs edge to
   edge; any caption returns to the grid underneath it. */
.feature { display: block; margin: 0 0 clamp(.85rem, 1.8vw, 1.6rem); }
.band { width: 100%; position: relative; overflow: hidden; background: var(--sand); }
.band > img,
.band > picture > img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.band--tall > img, .band--tall > picture > img { aspect-ratio: 21 / 9.5; }
.band--wide > img, .band--wide > picture > img { aspect-ratio: 21 / 7; }
.band > picture { display: block; }

/* The shared caption rule: a hairline, then two annotations pushed apart. */
.figcap {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: .8rem; margin-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-2); font-variation-settings: "wdth" 84, "wght" 600;
}
.on-dark .figcap, .ground-dark .figcap {
  color: var(--chalk-2); border-top-color: var(--line-dark);
}

/* Two photographs read as one composition: unequal widths, one dropped. */
.duo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(.75rem, 1.8vw, 1.75rem); row-gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.duo figure { margin: 0; overflow: hidden; }
.duo img { width: 100%; object-fit: cover; }
.duo__a { grid-column: 1 / 8; }
.duo__b { grid-column: 8 / 13; margin-top: clamp(1.25rem, 3.2vw, 2.75rem); }
.duo__a img { aspect-ratio: 4 / 2.7; }
.duo__b img { aspect-ratio: 4 / 3.9; }
/* A true mirror: the proportions swap with the columns, so the tall picture
   never lands beside the short one and opens a hole underneath it. */
/* grid-row is explicit on both: with only a column set, the second figure's
   column starts before the auto-placement cursor and it drops to a new row. */
.duo--flip .duo__a { grid-column: 6 / 13; grid-row: 1; margin-top: clamp(1.25rem, 3.2vw, 2.75rem); }
.duo--flip .duo__b { grid-column: 1 / 6;  grid-row: 1; margin-top: 0; }
.duo--flip .duo__a img { aspect-ratio: 4 / 2.95; }
.duo--flip .duo__b img { aspect-ratio: 4 / 4.5; }

/* Three photographs as one feature: one wide, two portraits, the middle one
   dropped so the row never reads as a row of equal tiles. */
.trio {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(.75rem, 1.8vw, 1.75rem); row-gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.trio figure { margin: 0; overflow: hidden; }
.trio img { width: 100%; object-fit: cover; }
.trio__a { grid-column: 1 / 7; }
.trio__a img { aspect-ratio: 3 / 2; }
.trio__b { grid-column: 7 / 10; margin-top: clamp(1rem, 2.4vw, 2rem); }
.trio__c { grid-column: 10 / 13; }
.trio__b img, .trio__c img { aspect-ratio: 3 / 4; }

/* A supporting close-up under the main photograph of an area of work. */
.craft__figure .craft__inset {
  aspect-ratio: 4 / 3;
  margin-top: clamp(.6rem, 1.4vw, 1rem);
}

/* An image beside the opening statement, where the column used to run empty. */
.premise__support { margin-top: clamp(1.25rem, 2.6vw, 2rem); overflow: hidden; }
.premise__support img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.premise__support figcaption { margin-top: .8rem; }

/* A tall photograph holding a column of text company. */
.spread {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem); row-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.spread__figure {
  grid-column: 1 / 5; grid-row: 1; overflow: hidden;
  position: sticky; top: calc(var(--header-h) + 2.25rem);
}
.spread__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.spread__body { grid-column: 6 / 13; grid-row: 1; }
.spread--flip .spread__figure { grid-column: 9 / 13; }
.spread--flip .spread__body { grid-column: 1 / 8; }
/* Beside a short list, a tall photograph just opens a hole under it. */
.spread--short .spread__figure img { aspect-ratio: 16 / 10; }

/* ==========================================================================
   26. MOTION — reveals
   ========================================================================== */

[data-rise] { opacity: 0; transform: translateY(18px); }
[data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
[data-rise][data-delay="1"].is-in { transition-delay: .09s; }
[data-rise][data-delay="2"].is-in { transition-delay: .18s; }
[data-rise][data-delay="3"].is-in { transition-delay: .27s; }
[data-rise][data-delay="4"].is-in { transition-delay: .36s; }

/* Images wipe up from their own frame rather than fading in place. */
[data-wipe] { clip-path: inset(0 0 100% 0); }
[data-wipe].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease-io);
}

[data-stagger] > * { opacity: 0; transform: translateY(16px); }
[data-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .35s; }
[data-stagger].is-in > *:nth-child(n+7) { transition-delay: .4s; }

/* Opening plate: lines rise out of their own overflow mask.
   These used to wait for JavaScript to put .is-ready on <html>, which meant
   the headline — the largest thing on the first screen — could not paint
   until the script had downloaded, parsed and run.  They are keyframe
   animations now, so they begin the moment this stylesheet is applied and
   the headline paints in the first frame.  The timing is unchanged. */
@keyframes riseLine  { from { transform: translateY(105%); } to { transform: none; } }
@keyframes riseFade  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes openWipe  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.plate__title .ln > span,
.stage__title .ln > span {
  animation: riseLine 1.05s var(--ease-io) both;
}
.plate__title .ln:nth-child(1) > span,
.stage__title .ln:nth-child(1) > span { animation-delay: .1s; }
.plate__title .ln:nth-child(2) > span,
.stage__title .ln:nth-child(2) > span { animation-delay: .18s; }
.plate__title .ln:nth-child(3) > span { animation-delay: .26s; }

.plate__eyebrow, .plate__sub, .plate__actions, .datum,
.stage__eyebrow, .stage__sub, .stage__actions {
  animation: riseFade var(--t-slow) var(--ease) both;
}
/* The standfirst under the headline is the Largest Contentful Paint element
   on the services and gallery pages, and it cannot be measured as painted
   until it has faded in.  The choreography is the same shape as before, just
   closed up, so roughly a quarter of a second comes off LCP on those pages. */
.plate__eyebrow, .stage__eyebrow { animation-delay: .05s; }
.plate__sub,     .stage__sub     { animation-delay: .2s; }
.plate__actions, .stage__actions { animation-delay: .28s; }
.datum                           { animation-delay: .34s; }

.plate__aperture { animation: openWipe 1.3s var(--ease-io) .2s both; }

/* ==========================================================================
   27. RESPONSIVE
     Mobile is composed, not stacked.  Column spans change, the sheet margin
     collapses into an inline label, and the rail becomes a vertical set with
     deliberate offsets.
   ========================================================================== */

@media (max-width: 1180px) {
  .plate__type { grid-column: 1 / 7; }
  .plate__aperture { grid-column: 7 / 13; }
  .chapter__title { grid-column: 3 / 10; }
  .chapter__aside { grid-column: 10 / 13; }
  .index__list { grid-column: 1 / 8; }
  .index__stage { grid-column: 8 / 13; }
  .craft__intro, .craft__detail { grid-column: 3 / 9; }
  .craft--flip .craft__intro, .craft--flip .craft__detail { grid-column: 6 / 13; }
  .craft--flip .craft__figure { grid-column: 1 / 5; }
  .craft--flip .craft__num { grid-column: 5 / 6; }
  .colophon__brand { grid-column: 1 / 6; }
  .colophon__contact { grid-column: 9 / 13; }
}

@media (max-width: 1000px) {
  :root { --header-h: 84px; }

  /* The logo stays the real lockup on phones — smaller, same proportions. */
  .wordmark img { height: 58px; }
  .masthead.is-stuck .wordmark img { height: 48px; }

  .pilot__nav, .pilot__cta { display: none; }
  .burger { display: inline-flex; }

  .stage { min-height: min(78svh, 620px); }
  /* A phone crops to a portrait frame with far less dark deck in it, so the
     wash has to carry more of the contrast. */
  .stage__media::after {
    background:
      linear-gradient(to bottom,
        rgba(11,8,6,.72) 0%,
        rgba(11,8,6,.46) 16%,
        rgba(11,8,6,.40) 34%,
        rgba(11,8,6,.66) 56%,
        rgba(11,8,6,.88) 78%,
        rgba(11,8,6,.95) 100%);
  }
  .stage__title { font-size: clamp(2rem, 10vw, 4rem); max-width: 12ch; }
  .stage__sub { max-width: 38ch; }
  .stage__caption { display: none; }

  /* The bleed system folds down: the photograph keeps the full width and the
     reading column sits under it on the shell's own margin. */
  .split, .split--flip { grid-template-columns: 1fr; }
  .split__media, .split--flip .split__media { grid-column: 1; grid-row: 1; min-height: 0; }
  .split__body, .split--flip .split__body { grid-column: 1; grid-row: 2; }
  .split__media { position: relative; aspect-ratio: 16 / 11; }
  .split--tall .split__media { aspect-ratio: 4 / 4.4; min-height: 0; }
  .split__body, .split--flip .split__body {
    padding: clamp(1.75rem, 6vw, 2.75rem) var(--gutter) clamp(2rem, 7vw, 3.25rem);
  }
  .split__body > * { max-width: none; }

  .pin__inner { padding-block: clamp(2.75rem, 11vw, 4.5rem); }
  .pin__media::after {
    background: linear-gradient(to bottom, rgba(11,8,6,.88) 0%, rgba(11,8,6,.82) 45%, rgba(11,8,6,.9) 100%);
  }
  .pin__tag { display: none; }

  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip img { aspect-ratio: 3 / 4.6; }
  .strip figcaption { font-size: .62rem; letter-spacing: .12em; }

  .plate { min-height: auto; }
  .plate__grid { grid-template-columns: 1fr; row-gap: clamp(1.25rem, 3.5vw, 2rem); }
  .plate__type, .plate__aperture { grid-column: 1 / -1; }
  .plate__aperture { aspect-ratio: 16 / 11; margin-bottom: 0; }
  .plate__title { font-size: clamp(1.86rem, 9.3vw, 3.72rem); }
  .plate__sub { max-width: 38ch; }

  .datum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datum > div:nth-child(2) { border-right: 0; }
  .datum > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); padding-bottom: 1.15rem; }

  .chapter__head { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .chapter__num, .chapter__title, .chapter__aside { grid-column: 1 / -1; }
  .chapter__num .numeral { font-size: 1.488rem; }
  .chapter__aside { padding-top: 0; }
  .chapter__aside p { max-width: 46ch; }

  .premise__statement, .premise__body, .premise__figure { grid-column: 1 / -1; }
  .premise__figure img { aspect-ratio: 16 / 10; }

  .index { grid-template-columns: 1fr; row-gap: 2rem; }
  .index__list, .index__stage { grid-column: 1 / -1; }
  .index__stage { display: none; }
  .index__link { grid-template-columns: 2.5rem 1fr auto; }
  /* On touch, each area carries its own image band instead of a shared stage. */
  .index__thumb { display: block; margin-top: 1rem; overflow: hidden; }
  .index__thumb img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
  .index__thumb { margin-bottom: clamp(1rem, 2.4vw, 1.5rem); }

  .case__title, .case__facts, .case__note { grid-column: 1 / -1; }
  .case__figure img { aspect-ratio: 4 / 3; }

  .invitation__lead, .invitation__reach { grid-column: 1 / -1; }

  .pagehead__title, .pagehead__aside { grid-column: 1 / -1; }

  .craft__grid { grid-template-columns: 1fr; }
  .craft__num, .craft__intro, .craft__figure, .craft__detail,
  .craft--flip .craft__num, .craft--flip .craft__intro,
  .craft--flip .craft__figure, .craft--flip .craft__detail { grid-column: 1 / -1; }
  .craft__figure { grid-row: auto; order: -1; position: static; }
  .craft__figure img { aspect-ratio: 16 / 10; }
  .craft__num .numeral { font-size: 1.488rem; }

  .jump ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Editorial compositions collapse to a single column, and the bands take a
     less extreme crop so a phone never scrolls through a letterbox. */
  /* The bands swap to their portrait crop below, so they take a squarer box. */
  .band > img, .band > picture > img,
  .band--tall > img, .band--tall > picture > img,
  .band--wide > img, .band--wide > picture > img { aspect-ratio: 16 / 10; }

  /* The area-of-work photograph and its close-up sit side by side rather than
     stacking, so a phone gains a composition instead of another screen of
     scrolling. */
  .craft__figure {
    display: grid; grid-template-columns: 1.55fr 1fr;
    column-gap: clamp(.5rem, 1.6vw, .8rem); align-items: start;
  }
  .craft__figure > img { aspect-ratio: 4 / 3; }
  .craft__figure .craft__inset { aspect-ratio: 3 / 4; margin-top: 0; }
  .craft__figure figcaption { grid-column: 1 / -1; }

  .trio__a { grid-column: 1 / -1; }
  .trio__a img { aspect-ratio: 16 / 10; }
  .trio__b { grid-column: 1 / 7; margin-top: 0; }
  .trio__c { grid-column: 7 / 13; }
  .duo__a, .duo__b,
  .duo--flip .duo__a, .duo--flip .duo__b { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .duo__a img, .duo__b img,
  .duo--flip .duo__a img, .duo--flip .duo__b img { aspect-ratio: 16 / 10; }
  .spread__figure, .spread__body,
  .spread--flip .spread__figure, .spread--flip .spread__body { grid-column: 1 / -1; grid-row: auto; }
  .spread__figure { position: static; }
  .spread__figure img { aspect-ratio: 2 / 1; }

  .colophon__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colophon__brand { grid-column: 1 / -1; }
  .colophon nav { grid-column: span 1; }
  .colophon__contact { grid-column: 1 / -1; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > li:nth-child(2) { border-right: 0; }
  .steps > li:nth-child(-n+2) { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-soft); }

  /* Comfortable tap areas for the closing section's contact links. */
  .invitation__reach dd a { display: inline-block; padding-block: .5rem; }

  /* Comfortable tap areas for the contact page's conversion links. */
  .reach__v a { padding-block: .5rem; }

  /* Thumb-sized fields and a full-width button on touch. */
  .enquiry--lean .f input { padding: 1.05rem 0 .95rem; font-size: 1.0625rem; }
  .enquiry--lean .slab--lead { width: 100%; padding-block: 1.4rem; }
  .enquiry--lean .actions { gap: 1rem 1.5rem; }
  .reach__v small a { padding-block: .55rem; }

  /* Comfortable tap areas for the footer's navigation and contact links. */
  .colophon__list a { padding-block: .7rem; }
  .colophon__contact dd > a { padding-block: .6rem; }
  .colophon__bottom nav a { padding-block: .65rem; }
  .crumbs a { padding-block: .5rem; }

  .dock { display: none; }
  .dock-m { display: block; }
  body { padding-bottom: 54px; }

  .masthead.is-stuck { height: 70px; }
  .filters { top: var(--header-h); }
}

@media (max-width: 720px) {
  .index__link { grid-template-columns: 2.2rem 1fr; }
  .index__go { display: none; }

  .premise__figure img { aspect-ratio: 4 / 3; }

  .specimens { grid-template-columns: 1fr 1fr; }
  .specimens > *:nth-child(3) { grid-column: 1 / -1; }
  .specimen--tall img { aspect-ratio: 16 / 10; }

  /* Three photographs across a phone are stamps, so the strip goes two-up
     with the third running the full width beneath. */
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > figure:nth-child(3) { grid-column: 1 / -1; }
  .strip img { aspect-ratio: 4 / 4.4; }
  .strip > figure:nth-child(3) img { aspect-ratio: 16 / 10; }
  /* The 3-up rule that applies above 720px squeezes these captions down to
     .62rem — under 10px on a phone. Two-up gives the width back, so the caption
     returns to a size that can actually be read. */
  .strip figcaption { font-size: .7rem; letter-spacing: .14em; }

  .species { grid-template-columns: 1fr; }

  .ledger__row { grid-template-columns: 2.5rem 1fr; row-gap: .5rem; }
  .ledger__v { grid-column: 2 / 3; }

  .enquiry__grid { grid-template-columns: 1fr; }

  .reach__row { grid-template-columns: 1fr; row-gap: .35rem; }

  .spec ul { columns: 1; }

  .jump ol { grid-template-columns: 1fr; }

  /* A wrapped filter list would make the sticky bar three rows deep and eat
     the viewport, so on small screens it scrolls sideways instead. */
  .filters {
    flex-wrap: nowrap; overflow-x: auto; gap: 0 1.5rem;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { white-space: nowrap; flex: none; }
  .filters__count { display: none; }

  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plate-item, .plate-item--wide { grid-column: span 2; }
  .plate-item--hero { grid-column: span 4; }
  .plate-item--wide img { aspect-ratio: 1 / 1; }
  .plate-item--hero img { aspect-ratio: 4 / 3; }
  /* Captions are always visible on touch — hover is not available. */
  .plate-item__cap { opacity: 1; transform: none; padding: 2.25rem .85rem .8rem; }

  .rail__item--w1, .rail__item--w2, .rail__item--w3 { width: min(78vw, 380px); }
  .rail__item--drop { margin-top: 0; }
  .rail__end { width: min(60vw, 280px); }

  .steps { grid-template-columns: 1fr; }
  .steps > li { border-right: 0; padding-right: 0; }
  .steps > li:not(:last-child) { border-bottom: 1px solid var(--line-soft); padding-bottom: 1.5rem; }

  .colophon__top { grid-template-columns: 1fr; }
  .colophon nav { grid-column: 1 / -1; }
  .colophon__bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .mapframe { aspect-ratio: 4 / 3; }

  .lightbox__bar { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .lb-btn { top: auto; bottom: -3.2rem; transform: none; width: 40px; height: 40px; }
}

/* Below this the bands are serving their portrait crop, so they take a
   portrait-friendly box instead of a letterbox slice of it. */
@media (max-width: 760px) {
  .band > img, .band > picture > img,
  .band--tall > img, .band--tall > picture > img,
  .band--wide > img, .band--wide > picture > img { aspect-ratio: 4 / 3; }
}

@media (max-width: 420px) {
  :root { --header-h: 76px; }
  .band > img, .band > picture > img,
  .band--tall > img, .band--tall > picture > img,
  .band--wide > img, .band--wide > picture > img { aspect-ratio: 4 / 3; }
  .duo__a img, .duo__b img,
  .duo--flip .duo__a img, .duo--flip .duo__b img { aspect-ratio: 3 / 2; }
  .wordmark img { height: 52px; }
  .masthead.is-stuck .wordmark img { height: 44px; }
  .masthead.is-stuck { height: 64px; }

  .plate__title { font-size: clamp(1.612rem, 8.99vw, 2.232rem); }
  .datum { grid-template-columns: 1fr; }
  .datum > div { border-right: 0; border-bottom: 1px solid var(--line-soft); padding-bottom: 1rem; }
  .datum > div:last-child { border-bottom: 0; }
  .actions { gap: .85rem; }
  .slab { width: 100%; }
}

/* Very wide screens: hold the measure, let the margins grow. */
@media (min-width: 1700px) {
  :root { --gutter: 5.5rem; }
}

/* ==========================================================================
   28. REDUCED MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  [data-rise], [data-stagger] > *, .plate__eyebrow, .plate__sub,
  .plate__actions, .datum,
  .stage__eyebrow, .stage__sub, .stage__actions {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  [data-wipe], .plate__aperture, .overlay { clip-path: none !important; }
  .plate__aperture { animation: none !important; }
  .plate__title .ln > span, .stage__title .ln > span {
    transform: none !important; animation: none !important;
  }
  .overlay { visibility: hidden; }
  .overlay.is-open { visibility: visible; }
  .overlay__list a, .overlay__foot { opacity: 1 !important; transform: none !important; }
}

@media print {
  .overlay, .dock, .dock-m, .lightbox, .mapframe, .rail-hint { display: none !important; }
  .masthead { position: static; height: auto; }
  .wordmark img.wordmark__light { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
  [data-rise], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .plate__title .ln > span, .stage__title .ln > span,
  .plate__eyebrow, .plate__sub, .plate__actions, .datum,
  .stage__eyebrow, .stage__sub, .stage__actions,
  .plate__aperture { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-wipe], .plate__aperture { clip-path: none !important; }
}