/* Xhek sections ------------------------------------------------------------------
   The company pages: home, about, projects, the project template and contact.
   Everything here is built from the tokens and the shared patterns; the M21
   page keeps its own sheet (m21.css) and never loads this one, so the class
   names below are free to echo M21's where the same hook is wanted — the
   hero, in particular, keeps M21's .hero-image / .hero-lead / .hero-actions
   hooks so the motion layer's opening choreography carries over unchanged.
   -------------------------------------------------------------------------- */

/* Shared bits ------------------------------------------------------------ */

/* Sentence-case serif titles inside sections: the feature and building
   headings, the statement. */
.t-serif {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: var(--track-title);
  line-height: var(--lead-title);
  font-variant-numeric: lining-nums;
}

/* A text link: the tracked label over a hairline that lights on hover. */
.text-link {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease;
}
.text-link:hover, .text-link:focus-visible { border-color: currentColor; }
.section-dark .text-link, .site-footer .text-link { border-color: var(--line-light); }

/* Data list: label / value rows between hairlines. */
.data-list { margin: 0; display: grid; }
.data-list > div { display: grid; grid-template-columns: minmax(110px, .38fr) 1fr; gap: 12px 20px; padding: 15px 0; border-top: 1px solid var(--line); }
.data-list > div:last-child { border-bottom: 1px solid var(--line); }
.data-list dt { padding-top: 3px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.data-list dd { margin: 0; font-size: 16px; font-weight: var(--w-light); line-height: 1.5; letter-spacing: .005em; }
.data-list dd a { border-bottom: 1px solid var(--line); transition: border-color .3s ease; }
.data-list dd a:hover, .data-list dd a:focus-visible { border-color: currentColor; }
.section-dark .data-list > div { border-color: var(--line-light); }
.section-dark .data-list dt { color: var(--cream-3); }
.section-dark .data-list dd { color: rgba(var(--paper-rgb), .86); }
/* Values still to be supplied are marked, not hidden. */
.is-pending { color: var(--ink-3); font-style: italic; }
.section-dark .is-pending, .facts-card .is-pending { color: var(--cream-3); }

/* Spec list: one item per hairline row, in two columns where there is room. */
.spec-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); }
.spec-list li { display: flex; gap: 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; font-weight: var(--w-light); line-height: 1.5; }
.spec-list li span { flex: none; font-size: 10px; letter-spacing: .18em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Meta row: location · type · year, separated by short hairlines. */
.meta-row { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.meta-row li { display: flex; align-items: center; }
.meta-row li + li::before { content: ""; width: 22px; height: 1px; margin: 0 14px; background: currentColor; opacity: .4; }

/* Home hero -------------------------------------------------------------------
   The paper ground carries on under the header, then a breath of space, then
   one photograph framed by the page's gutters — the width the sections are
   built on, so its edges line up with everything below. Nothing is set over
   it; the statement follows underneath. The image keeps M21's .hero-image
   hook, so the opening push-in and the scroll drift carry over unchanged.
   -------------------------------------------------------------------------- */
.home-hero {
  padding: calc(var(--header-h) + clamp(96px, 22vh, 230px)) var(--pad) 0;
  background: var(--paper);
}
.home-hero-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  isolation: isolate;
}
.home-hero .hero-image {
  z-index: auto;
  /* The drift is capped at the overscan the scale leaves, so the frame's
     edge never shows. */
  transform: translateY(min(calc(var(--hero-shift, 0px) * .6), 4.5%)) scale(1.1);
}

/* Cover hero ------------------------------------------------------------------
   The project pages' opening: one photograph, a screen tall, with the copy
   set over its darker lower-left corner — the M21 location band's placement,
   made into an opening. The hooks inside (.hero-image, .hero-lead,
   .hero-actions, .scroll-cue) are M21's, so the same opening sequence plays
   here.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--charcoal-2);
  color: var(--cream);
}

.hero-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: saturate(.92);
  /* The first stretch of scroll drifts the photograph a little (site.js). */
  transform: translateY(calc(var(--hero-shift, 0px) * .6)) scale(1.04);
}

/* Scrim only where type sits: the lower-left corner and a thin band under the
   header. The rest of the picture is left alone. */
.hero-wash {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(24, 23, 20, .84) 0%, rgba(24, 23, 20, .4) 34%, rgba(24, 23, 20, 0) 64%),
    linear-gradient(90deg, rgba(24, 23, 20, .5) 0%, rgba(24, 23, 20, .12) 46%, rgba(24, 23, 20, 0) 70%),
    linear-gradient(180deg, rgba(24, 23, 20, .5) 0%, rgba(24, 23, 20, .18) 14%, rgba(24, 23, 20, 0) 30%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  /* Three rows: space, statement, foot. */
  grid-template-rows: 1fr auto auto;
  padding: calc(var(--header-h) + 24px) calc(var(--pad) + var(--rail)) calc(clamp(22px, 4vh, 44px) + env(safe-area-inset-bottom, 0px));
}

.hero h1 {
  margin: 0 0 clamp(20px, 2.6vw, 34px) -.02em;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(42px, 6.2vw, 104px);
  letter-spacing: var(--track-display);
  line-height: .94;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
}

.hero-block { grid-row: 2; }
.hero-lead { max-width: 520px; }
.hero-lead > p {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: var(--w-light);
  line-height: 1.6;
  letter-spacing: .005em;
  color: rgba(var(--paper-rgb), .9);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(24px, 3.5vh, 36px); }

/* The project cover swaps the lead for a meta row. */
.hero .meta-row { color: rgba(var(--paper-rgb), .8); }

/* Foot: the scroll cue, on the right. */
.hero-foot { grid-row: 3; display: flex; align-items: flex-end; justify-content: flex-end; gap: 20px; margin-top: clamp(36px, 6vh, 72px); }
.hero-foot .scroll-cue { margin: -8px -16px -8px 0; }

/* Statement ------------------------------------------------------------------
   The shared opening, with its copy allowed a longer measure than elsewhere;
   under it a row of two drawn sheets, both shown whole. The house is 3:2
   and its frame 2:3, so 9 : 4 columns bring the two to the same height with
   the house taking the wide side.
   -------------------------------------------------------------------------- */
.statement .opening-copy { max-width: 64ch; }
.statement .section-opening .text-link { margin-top: 28px; }
.statement-media-pair { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 4fr); gap: clamp(20px, 2.6vw, 44px); align-items: start; }
.statement-media { margin: 0; }
.statement-media img { width: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.statement-media-sheet img { aspect-ratio: 3 / 2; }
.statement-media-portrait img { aspect-ratio: 2 / 3; }

/* Features ----------------------------------------------------------------
   The selected projects: large photographs on a twelve-column grid, each with
   a short column of copy set against its lower edge. No cards.
   -------------------------------------------------------------------------- */
.features { display: grid; gap: clamp(72px, 10vw, 160px); }
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); row-gap: 26px; align-items: end; }
.feature-media { grid-column: 1 / 9; margin: 0; }
.feature-media a { display: block; overflow: hidden; }
.feature-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: var(--paper-2); transition: transform 1.4s var(--ease); }
.feature-media a:hover img, .feature-media a:focus-visible img { transform: scale(1.03); }
.feature-copy { grid-column: 10 / 13; padding-bottom: var(--caption-h); }
.feature:nth-child(even) .feature-media { grid-column: 5 / 13; }
.feature:nth-child(even) .feature-copy { grid-column: 1 / 4; grid-row: 1; }
.feature:nth-child(even) .feature-media img { aspect-ratio: 16 / 10; }

.feature-index { margin: 0 0 clamp(28px, 4vw, 64px); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.feature-copy h3 { margin: 0 0 18px; font-size: clamp(28px, 2.6vw, 44px); }
.feature-copy h3 a { transition: color .3s ease; }
.feature-copy h3 a:hover, .feature-copy h3 a:focus-visible { color: var(--ink-2); }
.feature-copy .meta-row { margin-bottom: 20px; color: var(--ink-3); }
.feature-copy > p:not(.feature-index) { margin: 0 0 26px; max-width: 34ch; color: var(--ink-2); }
.features-more { margin-top: clamp(56px, 7vw, 100px); display: flex; justify-content: flex-end; }

/* Approach ----------------------------------------------------------------
   Three commitments in three columns under one rule.
   -------------------------------------------------------------------------- */
.approach-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); border-top: 1px solid var(--line); }
.approach-item { padding-top: clamp(24px, 2.6vw, 40px); }
.approach-item span { display: block; margin-bottom: clamp(28px, 5vw, 72px); font-size: 10px; letter-spacing: .2em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.approach-item h3 { margin: 0 0 16px; font-size: clamp(26px, 2.2vw, 36px); line-height: 1.1; }
.approach-item p { margin: 0; max-width: 34ch; font-weight: var(--w-light); color: var(--ink-2); }

/* The stacked variant (About): number and title on the left, the paragraph
   on the right, one rule per item. */
.approach-list.is-stacked { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; }
.approach-list.is-stacked .approach-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(40px, 6vw, 100px); padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--line); }
.approach-list.is-stacked .approach-item:last-child { border-bottom: 1px solid var(--line); }
.approach-list.is-stacked .approach-item span { margin-bottom: 18px; }
.approach-list.is-stacked .approach-item h3 { margin: 0; font-size: clamp(28px, 2.8vw, 46px); }
.approach-list.is-stacked .approach-item p { max-width: 44ch; padding-top: 34px; }

/* Rail grid ---------------------------------------------------------------
   The opening beside a rail of cards — M21's experience layout, reused for
   the projects. The rail itself is the shared .slider pattern.
   -------------------------------------------------------------------------- */
.rail-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(40px, 7vw, 118px); align-items: start; }
.rail-grid .section-opening { margin-bottom: 0; }
.rail-grid .section-opening .text-link { margin-top: 28px; }

/* Blog --------------------------------------------------------------------
   Three posts side by side under the opening — cards, not a rail, since three
   fit the page and nothing needs to scroll. Each card is one link: the
   photograph at the rail's 4:5 with the index's slow zoom on hover, then a
   caption like the project card's — kicker, title, a line on the post, and
   the closing label over its hairline. Hover lifts the title's colour and
   lights the rule, as on the rail.
   -------------------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.post { display: block; }
.post:focus-visible { outline: 1px solid var(--ink); outline-offset: 8px; }
.post-media { display: block; overflow: hidden; background: var(--paper-2); }
.post-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1.4s var(--ease); }
.post:hover .post-media img, .post:focus-visible .post-media img { transform: scale(1.03); }
.post-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 22px; }
.post-kicker { font-size: 10px; line-height: 1.3; letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--ink-3); }
.post-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.05;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
  transition: color .3s ease;
}
.post-summary { max-width: 34ch; font-size: 15px; font-weight: var(--w-light); line-height: 1.55; color: var(--ink-2); }
.post-cta { margin-top: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .14em; line-height: 1; text-transform: uppercase; transition: border-color .3s ease; }
.post:hover .post-title, .post:focus-visible .post-title { color: var(--ink-2); }
.post:hover .post-cta, .post:focus-visible .post-cta { border-color: currentColor; }

/* Closing CTA -------------------------------------------------------------- */
.cta .section-opening { margin-bottom: clamp(28px, 3vw, 40px); }

/* Page opening ------------------------------------------------------------
   Inner pages open on paper: the label, a page title larger than a section's,
   and one line of lead copy. Padded to clear the fixed header.
   -------------------------------------------------------------------------- */
.page-opening { padding: calc(var(--header-h) + var(--space-intro)) var(--pad) var(--space-intro); }
.page-opening h1 {
  margin: 0 0 clamp(22px, 2.6vw, 36px) -.02em;
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(44px, 6.4vw, 110px);
  letter-spacing: var(--track-display);
  line-height: .94;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
}
.page-lead { margin: 0; max-width: 44ch; font-size: clamp(18px, 1.4vw, 22px); font-weight: var(--w-light); line-height: 1.55; color: var(--ink-2); }
.page-opening + .section { padding-top: 0; }

/* Centred variant (the projects index): one statement in the sentence-case
   serif instead of the uppercase display, and the lead under it on the page
   axis. */
.page-opening-centered { text-align: center; }
.page-opening-centered h1 {
  margin: 0 auto clamp(22px, 2.6vw, 36px);
  max-width: 24ch;
  font-size: clamp(44px, 5vw, 84px);
  letter-spacing: var(--track-title);
  line-height: 1.02;
  text-transform: none;
  text-wrap: balance;
}
.page-opening-centered .page-lead { margin-inline: auto; max-width: 56ch; text-wrap: balance; }

/* The same for a section inside the page: the title in the sentence-case
   serif and its line, both on the axis. */
.section-opening-centered { text-align: center; }
.section-opening-centered h2 { margin: 0 auto clamp(14px, 1.6vw, 22px); font-size: clamp(32px, 3.4vw, 56px); text-wrap: balance; }
.section-opening-centered .opening-copy { margin-inline: auto; }

/* Spread ------------------------------------------------------------------
   The projects index and the about page are built from this: one section on
   the twelve-column grid with the record in the first four columns and the
   picture across the last eight. The record is set to the picture's height —
   the name at its top edge, two short paragraphs under that, and a stacked
   list of facts with the link held at its bottom edge. Between one spread
   and the next a hairline at content width, with the opening's space on
   either side. Each spread carries only its bottom space, so the opening
   above and the section below keep the page on one rhythm. A picture that is
   not 16:9 sets --ratio on its <img>.
   -------------------------------------------------------------------------- */
.spread { --spread-gap: 28px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; column-gap: clamp(14px, 2vw, 32px); row-gap: var(--spread-gap); align-items: center; padding: 0 var(--pad) var(--space-intro); }
.spread-media { grid-column: 5 / 13; align-self: center; margin: 0; overflow: hidden; }
.spread-media a { display: block; }
.spread-media img { width: 100%; aspect-ratio: var(--ratio, 16 / 9); object-fit: cover; object-position: var(--focus, 50% 50%); background: var(--paper-2); transition: transform 1.4s var(--ease); }
.spread-media a:hover img, .spread-media a:focus-visible img { transform: scale(1.03); }
.spread-copy { grid-column: 1 / 5; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
/* The divider is the first row of the following section; dense placement
   then lets the record and the view share the row under it. */
.spread + .spread::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: calc(var(--space-intro) - var(--spread-gap)); background: var(--line); }
.spread-copy h2 { margin: 0 0 22px; font-size: clamp(32px, 3vw, 50px); }
.spread-copy h2 a { transition: color .3s ease; }
.spread-copy h2 a:hover, .spread-copy h2 a:focus-visible { color: var(--ink-2); }
.spread-copy > p:not(.spread-note) { margin: 0 0 1em; max-width: 40ch; font-size: clamp(16px, 1.15vw, 19px); font-weight: var(--w-light); line-height: 1.6; color: var(--ink-2); }
/* The list rides the leftover height down to the view's bottom edge; its
   padding is the least it keeps from the text above. */
.meta-list { margin: auto 0 28px; padding: 1em 0 0; list-style: none; display: grid; gap: 9px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.spread-note { margin: 0; font-size: 14px; }
.spread-copy .data-list { align-self: stretch; margin-top: auto; padding-top: 1em; }
.spread-copy .data-list dd { font-size: clamp(18px, 1.5vw, 22px); }

/* Project page --------------------------------------------------------------
   The reusable template: the overview composition, the before/after pairs,
   the buildings with their drawings, the materials list, the site figure and
   the link to the next project.
   -------------------------------------------------------------------------- */
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .72fr); column-gap: clamp(14px, 2vw, 32px); align-items: end; }
.overview-grid figure { margin: 0; }
.overview-grid figure img { width: 100%; aspect-ratio: 1.37 / 1; object-fit: cover; object-position: var(--focus, 50% 50%); background: var(--paper-2); }
.overview-text { margin-top: clamp(64px, 8vw, 120px); display: grid; grid-template-columns: 1fr .72fr; gap: clamp(44px, 8vw, 134px); align-items: start; }
.overview-text > div p { max-width: 46ch; margin: 0; color: var(--ink-2); }
.overview-text > div p + p { margin-top: 1em; }

/* Before / after pairs. */
.pairs { display: grid; gap: clamp(44px, 6vw, 96px); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 32px); }
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--focus, 50% 50%); background: var(--paper-2); }
.pair figure:first-child img { filter: saturate(.8); }

/* Buildings: drawing on the left, the record on the right. */
.buildings { display: grid; }
.building { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 96px); align-items: start; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.building:last-child { border-bottom: 1px solid var(--line); }
.building figure { margin: 0; }
.building figure img { width: 100%; background: var(--paper); }
.building-copy h3 { margin: 0 0 18px; font-size: clamp(28px, 2.6vw, 44px); }
.building-copy > p { margin: 0 0 30px; max-width: 42ch; color: var(--ink-2); }
.building-copy .feature-index { margin-bottom: 22px; }
.building.is-draft figure img { max-width: 720px; }

/* Materials: the list beside a photograph. */
.materials-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.materials-grid figure { margin: 0; }
.materials-grid figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 50%); }
.materials-grid .spec-list li:last-child, .materials-grid .spec-list li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }

/* Site: a square figure beside the copy. */
.site-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: end; }
.site-grid figure { margin: 0; }
.site-grid figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.site-grid .data-list { margin-top: 32px; }
.site-copy p { margin: 0 0 1em; max-width: 46ch; color: var(--ink-2); }

/* Next project. */
.next { padding: clamp(48px, 6vw, 88px) var(--pad); border-top: 1px solid var(--line); }
.next .section-label { margin-bottom: 18px; }
.next-link { display: inline-block; font-size: clamp(34px, 4.6vw, 76px); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; transition: color .3s ease; }
.next-link:hover, .next-link:focus-visible { color: var(--ink-2); }
.next-meta { margin: 20px 0 0; color: var(--ink-3); }

/* Source note under a project: where its facts come from. */
.source-note { margin: clamp(40px, 5vw, 72px) 0 0; max-width: 64ch; font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* Footer: the shared pattern with a brand column in the first slot and no
   contact band above the columns, so it starts closer to the page. -------- */
.site-footer { padding-top: clamp(40px, 5vw, 64px); }
.footer-brand .site-brand { display: inline-block; margin-bottom: 22px; }
.footer-brand p { margin: 0; max-width: 28ch; font-size: 14px; font-weight: var(--w-light); line-height: 1.6; color: var(--cream-2); }

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 960px) {
  .home-hero { padding-top: calc(var(--header-h) + clamp(56px, 12vh, 120px)); }
  .home-hero-frame { aspect-ratio: 4 / 3; }
  .statement-media-pair { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature-media, .feature:nth-child(even) .feature-media { grid-column: 1 / 13; }
  .feature-copy, .feature:nth-child(even) .feature-copy { grid-column: 1 / 13; grid-row: auto; padding-bottom: 0; }
  .feature-index { margin-bottom: 22px; }
  .approach-list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; }
  .approach-item { padding: 28px 0; border-top: 1px solid var(--line); }
  .approach-item:last-child { border-bottom: 1px solid var(--line); }
  .approach-item span { margin-bottom: 20px; }
  .approach-list.is-stacked .approach-item { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .approach-list.is-stacked .approach-item p { padding-top: 0; }
  .rail-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-intro); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px); }
  .spread-media, .spread-copy { grid-column: 1 / 13; }
  .overview-grid { grid-template-columns: 1fr; }
  .overview-text { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .building { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .materials-grid, .site-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .materials-grid figure { order: -1; }
  .materials-grid figure img { aspect-ratio: 16 / 10; }
}

@media (max-width: 680px) {
  :root { --rail: 11px; }
  .home-hero { padding-top: calc(var(--header-h) + clamp(36px, 7vh, 64px)); }
  .home-hero-frame { aspect-ratio: 4 / 5; }
  .hero-copy { padding: calc(var(--header-h) + 16px) calc(var(--pad) + var(--rail)) calc(20px + env(safe-area-inset-bottom, 0px)); }
  .hero-wash { background: linear-gradient(0deg, rgba(24, 23, 20, .9) 0%, rgba(24, 23, 20, .5) 36%, rgba(24, 23, 20, 0) 66%), linear-gradient(180deg, rgba(24, 23, 20, .58) 0%, rgba(24, 23, 20, .22) 16%, rgba(24, 23, 20, 0) 32%); }
  .hero h1 { font-size: clamp(38px, 11.5vw, 52px); }
  .hero-lead > p { font-size: 15px; line-height: 1.5; }
  .hero-actions { gap: 10px; margin-top: 22px; }
  .hero-actions .small-cta { flex: 1 1 auto; min-height: 44px; padding: 0 18px; }
  .hero-foot { margin-top: 28px; }
  /* The meta row wraps here, so it stacks instead and drops its separators. */
  .hero .meta-row { flex-direction: column; gap: 10px; }
  .hero .meta-row li + li::before { display: none; }
  .feature-copy h3, .spread-copy h2 { font-size: clamp(26px, 7vw, 34px); }
  .feature-media img, .feature:nth-child(even) .feature-media img { aspect-ratio: 4 / 5; }
  .features-more { justify-content: flex-start; }
  .posts { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .post-title { font-size: clamp(26px, 7vw, 34px); }
  .approach-item h3 { font-size: 26px; }
  .page-opening { padding-top: calc(var(--header-h) + 56px); }
  .page-opening h1 { font-size: clamp(38px, 11.5vw, 52px); }
  .page-opening-centered h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .page-lead { font-size: 17px; }
  .spread-media img { aspect-ratio: 4 / 3; }
  .overview-grid figure img { aspect-ratio: .84; }
  .pair { grid-template-columns: 1fr; }
  .pair img { aspect-ratio: 4 / 3; }
  .spec-list { grid-template-columns: 1fr; }
  .materials-grid .spec-list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .next-link { font-size: clamp(30px, 9vw, 40px); }
  .data-list > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .home-hero { padding-top: calc(var(--header-h) + 32px); }
  .hero-copy { padding-top: calc(var(--header-h) + 8px); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .hero h1 { font-size: clamp(30px, 5vw, 44px); }
  .hero-lead > p { font-size: 15px; line-height: 1.45; }
  .hero-actions { margin-top: 16px; }
  .hero-actions .small-cta { min-height: 40px; }
  .hero-foot { margin-top: 20px; }
}