/*
  MUTENKA KENCHIKU SEKKEI — editorial site system v31

  This stylesheet intentionally starts over instead of extending the former LP card system.
  The top page is an index; project pages are records; the materials page is a document.
  Facts, photography, and routes are shared, while each content genre has its own visual grammar.

  Decision: evidence-bound-color-system
  This is a site palette, not a claim that these are official corporate brand colors.
  v25 reduces the palette to three roles, one base color each:
    --paper  (surface)  follows the cream/ochre cast of the supplied interior photography
    --ink    (text)     follows the black official mark, warmed slightly toward the paper
    --frame  (accent)   the cool blue-green kept from the earlier site language as the single
                        counterweight to the warm photographs; it marks actions and key figures
  Every other value is one of those three at reduced opacity (the *-muted / *-line / *-tint
  tokens) or, for the pressed/hover state of a frame surface, frame mixed toward ink.
  Removed in v25: the timber/brown family, the gold closing eyebrow, the white "sheet" cards,
  the second paper tone that striped chapters, and the near-black footer. Chapters are now
  separated by a hairline, not by alternating surfaces. Wood color belongs to the photographs.
  Do not add a fourth hue; if two colors would mean the same thing, delete one.

  Decision: compact-vertical-rhythm
  v26 (2026-08-28) scales the chapter-level vertical rhythm down by roughly 30% after the user
  judged the v25 spacing "上品だが広すぎ": --section 140px → 96px at 1280px, chapter heading
  → body gaps 92–112px → 64–76px, record/document block gaps likewise, footer 64 → 48px.
  Spacing inside a block (≤40px: list rows, ledger cells, caption gaps) is unchanged so the
  hierarchy between "between chapters" and "inside a chapter" is kept. Do not restore the
  v25 values by copying an older stylesheet; change --section and the clamps together.

  Decision: shared-chapter-split
  v27 (2026-08-28) gives every two-column chapter the same track geometry:
  --split-columns = 90px | 4fr | 8fr with --split-gap. The chapter label + H2 (or the FAQ title)
  span tracks 1–2; the lead paragraph, philosophy statement, or FAQ list sits in track 3; each
  process row is number | title | description on the same tracks. So the right column's left
  edge is one vertical line through 考え方, 素材と性能, 家づくりの流れ and よくあるご質問, and the
  process descriptions sit under the chapter lead. Vertically, the right column starts at the
  H2's text top (--lead-offset = chapter label line box + margin + H2 half-leading), never at
  the H2's bottom (the former align-items: end) and never above the label (the former FAQ list).
  Before v27 the four headings used four different ratios (.85/1.15, .86/1.14, .8/1.2, .62/1.38)
  and the user saw the columns wander. Change the tokens, not individual grids.

  Decision: legal-document-genre
  v28 (2026-08-28) adds a fifth document genre for /privacy/: a long legal text generated from
  Markdown by scripts/build-privacy-page.py. It reuses the subpage shell and reading measure; the
  only new visuals are the draft notice, the pending marker (ink-tint fill, no fourth hue) and a
  plain table. While the source still carries pending markers the page is a draft and the official policy
  stays the effective one; package-order-site.py refuses to ship it without --allow-draft.
  v29: reviewer-facing annotation asides; their rules live in the review-only stylesheet (loaded only while the source is a draft).
  v30: h3 sub-headings inside the legal body (the external-transmission table is split into "current" and "at launch").

  Decision: footer-map-on-demand
  v31 keeps the address useful without sending visitor data to Google during ordinary page load.
  The footer starts with a normal external map link; map.v1.js adds a real button and creates the
  iframe only after activation. The exact client-approved share URL is immutable in that script,
  and no preconnect or prefetch is used. The embedded map has no close control because the lasting
  external link remains visible. The generated privacy page keeps its footer unchanged until its
  template can adopt the same component in a separate legal-document update.

  Decision: custom-404-root-relative
  v31 gives both Pages and Xserver a shared custom not-found document. Its local paths are rooted at
  / so the same source works at arbitrary Pages URLs and local fallback URLs; the packager alone
  adds /lp/chumon/ to those paths for the Xserver archive.
*/

@font-face {
  font-family: "Shippori Latin Local";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/shippori-mincho-latin-medium.v2.woff2") format("woff2");
}

@font-face {
  font-family: "Shippori JP Local";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/shippori-mincho-medium.v2.woff2") format("woff2");
}

:root {
  /* Three base colors. Everything else is one of them at reduced opacity. */
  --paper: #f4f1e9;
  --ink: #201c17;
  --frame: #2b5146;
  /* ink over paper */
  --ink-muted: rgba(32, 28, 23, .7);
  --ink-line: rgba(32, 28, 23, .18);
  --ink-tint: rgba(32, 28, 23, .06);
  /* paper over frame */
  --paper-muted: rgba(244, 241, 233, .74);
  --paper-line: rgba(244, 241, 233, .3);
  --paper-tint: rgba(244, 241, 233, .1);
  /* frame states */
  --frame-line: rgba(43, 81, 70, .65);
  --frame-deep: #1f3932;
  --frame-deep: color-mix(in srgb, var(--frame) 78%, var(--ink));
  --serif: "Shippori Latin Local", "Shippori JP Local", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", system-ui, sans-serif;
  --wide: 1280px;
  --reading: 720px;
  --gutter: clamp(22px, 4vw, 52px);
  --section: clamp(60px, 7.5vw, 104px);
  --split-gap: clamp(32px, 4vw, 56px);
  --split-columns: 90px minmax(0, 4fr) minmax(0, 8fr);
  --lead-offset: calc(.72rem * 1.85 + 18px + 5px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .025em;
  line-break: strict;
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--sans);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: .22em;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--frame);
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol,
dl,
dd {
  margin-top: 0;
}

figure {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

dd {
  margin-left: 0;
}

h1,
h2,
.serif {
  font-family: var(--serif);
  font-weight: 500;
  font-synthesis: none;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--wide));
  margin-inline: auto;
}

.reading-width {
  width: min(calc(100% - (var(--gutter) * 2)), var(--reading));
  margin-inline: auto;
}

/* Grid children must be allowed to shrink before enlarged text establishes a wider page. */
:is(
  .header-inner,
  .home-hero,
  .philosophy-heading,
  .philosophy-spread,
  .works-heading,
  .work-record,
  .materials-intro,
  .people-heading,
  .people-grid,
  .process-heading,
  .faq-layout,
  .closing-grid,
  .footer-grid,
  .subpage-hero-grid,
  .document-layout,
  .record-intro,
  .record-gallery,
  .record-navigation
) > * {
  min-width: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  background: var(--paper);
  color: var(--frame);
  font-weight: 700;
}

.skip-link:focus {
  width: auto;
  height: auto;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
}

/* Shared site header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 82px;
  border-bottom: 1px solid var(--ink-line);
  background: rgba(244, 241, 233, .92);
  backdrop-filter: blur(14px);
  transition: height .2s ease, background-color .2s ease;
}

.site-header.is-scrolled {
  height: 70px;
  background: rgba(244, 241, 233, .97);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  height: 100%;
}

.brand {
  display: grid;
  min-height: 44px;
  gap: 0;
  align-content: center;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
}

.brand small {
  font-family: var(--sans);
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 3vw, 40px);
}

.site-nav a,
.header-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}

.site-nav a {
  position: relative;
  color: var(--ink-muted);
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 1px;
  background: var(--ink);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .2s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after,
.site-nav a.site-nav-section-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mobile-menu {
  display: none;
}

.header-action {
  padding: 0 18px;
  border: 1px solid var(--frame);
  color: var(--frame);
  transition: background-color .2s ease, color .2s ease;
}

.header-action:hover {
  background: var(--frame);
  color: var(--paper);
}

/* Shared labels, links, and buttons */
.eyebrow,
.chapter-no,
.record-label {
  margin-bottom: 18px;
  color: var(--ink-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.text-link {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  padding-block: 8px;
  border-bottom: 1px solid currentcolor;
  color: var(--frame);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-decoration: none;
}

.text-link::after {
  width: 9px;
  height: 9px;
  border-top: 1px solid currentcolor;
  border-right: 1px solid currentcolor;
  content: "";
  transform: rotate(45deg);
  transition: transform .2s ease;
}

/* Project links keep label and image count in one grid cell; the arrow owns the second. */
.text-link-copy {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 11px;
}

.text-link:hover::after {
  transform: translateX(4px) rotate(45deg);
}

.text-link-meta {
  color: var(--ink-muted);
  font-size: .7rem;
  font-weight: 600;
}

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 24px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.button-primary {
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--frame);
}

.button-primary:hover {
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
}

.button-secondary {
  border: 1px solid var(--paper-line);
  color: var(--paper);
}

.button-secondary:hover {
  border-color: var(--paper);
  background: var(--paper-tint);
}

/* Home hero: an editorial split, not a conversion billboard. */
.home-main {
  padding-top: 82px;
}

.home-hero {
  display: grid;
  /*
    Decision: stable-split-copy-rail
    The former .78/1.22 split grew more slowly than the container-aligned left padding,
    so the copy rail became narrower on wider screens. Equal tracks make the rail width
    stable once the 1280px content alignment is reached and keep the approved image prominent.
  */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: calc(100svh - 82px);
  border-bottom: 1px solid var(--ink-line);
}

.home-hero-copy {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: clamp(48px, 7vw, 96px) clamp(38px, 6vw, 92px) 40px max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
  flex-direction: column;
}

.home-hero h1 {
  margin-bottom: 30px;
  font-size: clamp(2.5rem, 5.1vw, 4.15rem);
  line-height: 1.27;
  letter-spacing: .045em;
}

.home-hero h1 span {
  display: block;
}

.home-hero-lead {
  max-width: 34rem;
  margin-bottom: 32px;
  color: var(--ink-muted);
  font-size: clamp(.94rem, 1.1vw, 1.04rem);
}

/*
  Decision: mirrored-hero-contact-routes
  The first view and closing surface expose the same three decisions in the same
  hierarchy: materials first, then LINE and phone. The opening reuses the shared
  controls without adding a card or a second headline, so the editorial cover remains
  the dominant composition. An 8rem content threshold keeps both consultation routes
  side by side on ordinary phones and lets enlarged text reflow them into one column.
*/
.hero-actions {
  display: grid;
  width: 100%;
  max-width: 34rem;
  margin-bottom: 0;
  gap: 12px;
}

.hero-actions > .button-primary {
  width: 100%;
  border-color: var(--frame);
  background: var(--frame);
  color: var(--paper);
}

.hero-actions > .button-primary:hover {
  border-color: var(--frame-deep);
  background: var(--frame-deep);
  color: var(--paper);
}

.hero-actions .contact-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  margin-top: 0;
}

.hero-actions .button-secondary,
.hero-actions .phone-door {
  border-color: var(--frame-line);
  background: transparent;
  color: var(--frame);
}

.hero-actions .button-secondary:hover,
.hero-actions .phone-door:hover {
  border-color: var(--frame);
  background: var(--frame);
  color: var(--paper);
}

.home-hero-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--ink-tint);
}

.home-hero-media picture,
.home-hero-media img {
  width: 100%;
  height: 100%;
}

.home-hero-media img {
  object-fit: cover;
  object-position: 54% center;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Decision: clustered-hero-evidence
     These facts qualify the CTA and belong to the same first-view reading group.
     Auto-pushing them to the bottom made the remaining space look accidental. */
  margin: 40px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--ink-line);
}

.hero-facts div {
  min-width: 0;
  padding-right: 14px;
}

.hero-facts div + div {
  padding-left: 14px;
  border-left: 1px solid var(--ink-line);
}

.hero-facts dt {
  margin-bottom: 3px;
  color: var(--ink-muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.hero-facts dd {
  margin-bottom: 0;
  color: var(--ink);
  font-size: .83rem;
  font-weight: 800;
  line-height: 1.5;
}

/* Home chapters */
.chapter {
  padding-block: var(--section);
}

/* v25: chapters share one surface; a hairline marks each boundary. */
.chapter + .chapter {
  border-top: 1px solid var(--ink-line);
}

.chapter-title {
  margin-bottom: 26px;
  font-size: clamp(2.35rem, 4.3vw, 4.5rem);
  line-height: 1.42;
  letter-spacing: .04em;
}

.chapter-lead {
  max-width: 41rem;
  margin-bottom: 0;
  color: var(--ink-muted);
}

/* Decision: shared-chapter-split — one grid for every heading/body pair. */
.philosophy-heading,
.materials-intro,
.process-heading,
.faq-layout {
  display: grid;
  grid-template-columns: var(--split-columns);
  gap: var(--split-gap);
  align-items: start;
}

.philosophy-heading > :first-child,
.materials-intro > :first-child,
.process-heading > :first-child,
.faq-layout > :first-child {
  grid-column: 1 / 3;
  min-width: 0;
}

.philosophy-heading > :last-child,
.materials-intro > :last-child,
.process-heading > :last-child,
.faq-layout > :last-child {
  grid-column: 3;
  min-width: 0;
}

.materials-intro .chapter-lead,
.process-heading .chapter-lead {
  padding-top: var(--lead-offset);
}

.philosophy-index {
  min-width: 0;
}

.philosophy-copy {
  max-width: 37rem;
  /* Decision: balanced-philosophy-columns
     The left rail owns the chapter title and its two judgment criteria; the right rail
     owns the company's position and explanation. Align the statement with the H2, not
     with the small chapter label above it (v27: shared --lead-offset). */
  padding-top: var(--lead-offset);
}

.philosophy-copy p {
  color: var(--ink-muted);
}

.philosophy-copy .philosophy-statement {
  margin-bottom: 24px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.7vw, 2.45rem);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: .035em;
}

.principles {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink-line);
}

.principles li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: .9rem;
  font-weight: 700;
}

.principles li::before {
  width: 18px;
  height: 1px;
  margin-top: .9em;
  background: var(--ink);
  content: "";
}

.philosophy-spread {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(260px, .52fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
  margin-top: clamp(44px, 6vw, 84px);
}

.philosophy-spread figure {
  margin-bottom: 0;
}

.philosophy-spread figcaption,
.record-figure figcaption {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: .76rem;
  letter-spacing: .05em;
}

.aftercare-note {
  padding: 30px 0 6px;
  border-top: 2px solid var(--ink);
}

.aftercare-note strong {
  display: block;
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 500;
  line-height: 1.55;
}

.aftercare-note p:last-child {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: .86rem;
}

/* Project index */
.works-chapter {
  padding-top: var(--section);
}

.works-heading {
  display: block;
  margin-bottom: clamp(40px, 5.5vw, 76px);
}

.work-record {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: end;
}

.work-record + .work-record {
  width: min(91%, 1130px);
  margin: clamp(64px, 9vw, 120px) 0 0 auto;
  grid-template-columns: minmax(250px, .52fr) minmax(0, 1.48fr);
}

.work-record + .work-record .work-record-media {
  grid-column: 2;
  grid-row: 1;
}

.work-record + .work-record .work-record-copy {
  grid-column: 1;
  grid-row: 1;
}

.work-record-media {
  display: block;
  overflow: hidden;
  background: var(--ink-tint);
}

.work-record-media img {
  width: 100%;
  transition: transform .5s cubic-bezier(.2, .65, .25, 1);
}

.work-record-media:hover img {
  transform: scale(1.015);
}

.work-record-copy {
  padding-bottom: 8px;
}

.work-record h3,
.record-id {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .035em;
}

/* Materials teaser uses a ledger, not cards. */
.materials-intro .chapter-lead {
  max-width: 37rem;
}

.fact-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(40px, 5.5vw, 64px) 0 36px;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

.fact-ledger div {
  padding: 30px clamp(18px, 3vw, 36px) 32px;
}

.fact-ledger div + div {
  border-left: 1px solid var(--ink-line);
}

.fact-ledger dt {
  margin-bottom: 16px;
  color: var(--ink-muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.fact-ledger dd {
  margin-bottom: 0;
}

.fact-ledger strong {
  margin-right: 5px;
  color: var(--frame);
  font-family: var(--serif);
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.fact-ledger small {
  display: block;
  margin-top: 15px;
  color: var(--ink-muted);
  font-size: .7rem;
  line-height: 1.65;
}

/* People */
.people-heading {
  display: block;
  margin-bottom: clamp(40px, 5.5vw, 64px);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 72px);
  max-width: 1060px;
  margin-inline: auto;
}

.person-profile img {
  width: 100%;
  background: var(--ink-tint);
  object-fit: contain;
}

.person-copy {
  padding: 24px 4px 0;
}

.person-role {
  margin-bottom: 8px;
  color: var(--ink-muted);
  font-size: .78rem;
  font-weight: 800;
}

.person-copy h3 {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.4;
}

.person-copy > p:last-child {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: .88rem;
}

.person-bio-line {
  display: block;
}

/* Process reads as one document rather than a carousel. */
.process-heading {
  margin-bottom: clamp(40px, 5.5vw, 64px);
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.process-list > li {
  display: grid;
  grid-template-columns: var(--split-columns);
  gap: var(--split-gap);
  align-items: start;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--ink-line);
}

.process-number {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.2;
}

.process-list h3 {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.65;
}

.process-list p {
  max-width: 45rem;
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: .87rem;
}

.process-list .process-note {
  grid-column: 3;
  margin-top: -14px;
  padding-left: 12px;
  border-left: 1px solid var(--ink-line);
  font-size: .72rem;
  line-height: 1.7;
}

.process-note strong {
  margin-right: 8px;
  color: var(--ink);
  font-size: .7rem;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%;
  content: "";
}

.faq-list details[open] summary::after {
  background-size: 100% 1px, 1px 0;
}

/* FAQ */
.faq-list {
  margin-top: var(--lead-offset);
  border-top: 1px solid var(--ink);
}

.faq-list details {
  border-bottom: 1px solid var(--ink-line);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
  padding: 16px 2px;
  list-style: none;
  font-size: .94rem;
  font-weight: 800;
  cursor: pointer;
}

.faq-list details p {
  max-width: 45rem;
  margin-bottom: 0;
  padding: 0 40px 24px 2px;
  color: var(--ink-muted);
  font-size: .86rem;
}

/* One explicit closing decision point. */
.closing {
  padding-block: var(--section);
  background: var(--frame);
  color: var(--paper);
}

.closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(56px, 9vw, 128px);
  align-items: start;
}

.closing .eyebrow {
  color: var(--paper-muted);
}

.closing h2 {
  margin-bottom: 24px;
  color: var(--paper);
  font-size: clamp(2.5rem, 4.7vw, 4.7rem);
  line-height: 1.42;
  letter-spacing: .04em;
}

.closing-copy > p:last-of-type {
  max-width: 37rem;
  margin-bottom: 0;
  color: var(--paper-muted);
}

.material-titles {
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--paper-line);
}

.material-titles li {
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-line);
  font-size: .82rem;
}

.closing-actions {
  padding-top: 4px;
}

.closing-actions > p {
  margin-bottom: 22px;
  color: var(--paper-muted);
  font-size: .86rem;
}

.closing-actions .button-primary {
  width: 100%;
}

.contact-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.contact-doors > * {
  min-width: 0;
  flex: 1 1 10.5rem;
}

.phone-door {
  display: flex;
  min-height: 58px;
  padding: 9px 16px;
  border: 1px solid var(--paper-line);
  flex-direction: column;
  justify-content: center;
  color: var(--paper);
  line-height: 1.35;
  text-decoration: none;
}

.phone-door span {
  font-size: .66rem;
  font-weight: 700;
}

.phone-door strong {
  font-size: .9rem;
  letter-spacing: .04em;
}

.privacy-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  color: var(--paper-muted);
  font-size: .72rem;
}

/* Footer */
.site-footer {
  padding: 48px 0 24px;
  border-top: 1px solid var(--ink-line);
  color: var(--ink-muted);
  font-size: .76rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr .7fr;
  gap: clamp(32px, 6vw, 82px);
}

.footer-brand {
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .08em;
}

.site-footer p {
  margin-bottom: 5px;
}

.footer-map {
  display: grid;
  width: 100%;
  max-width: 32rem;
  justify-items: start;
  gap: 10px;
  margin-top: 18px;
}

.footer-map-button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--frame);
  background: var(--paper);
  color: var(--frame);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.footer-map-button:hover {
  background: var(--frame);
  color: var(--paper);
}

.footer-map-embed {
  width: 100%;
}

.footer-map-frame {
  display: block;
  width: 100%;
  height: 320px;
  border: 1px solid var(--ink-line);
  background: var(--paper);
}

.footer-map-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--frame);
  font-weight: 700;
}

.footer-links {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-line);
  color: var(--ink-muted);
}

/* Shared subpage shell */
.subpage-main {
  padding-top: 82px;
}

.not-found-copy {
  max-width: 46rem;
}

.not-found-hero h1 {
  max-width: 42rem;
  font-size: clamp(2.7rem, 5.4vw, 5.4rem);
  line-height: 1.3;
}

.not-found-copy > p {
  max-width: 36rem;
  color: var(--ink-muted);
}

.not-found-routes {
  display: grid;
  max-width: 36rem;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink-line);
  list-style: none;
}

.not-found-routes a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-block: 8px;
  border-bottom: 1px solid var(--ink-line);
  color: var(--frame);
  font-weight: 700;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  color: var(--ink-muted);
  font-size: .7rem;
}

.breadcrumbs a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.subpage-hero {
  padding: clamp(44px, 6vw, 80px) 0 clamp(48px, 6vw, 84px);
  border-bottom: 1px solid var(--ink-line);
}

.subpage-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(52px, 9vw, 132px);
  align-items: end;
}

.subpage-hero h1 {
  margin-bottom: 24px;
  font-size: clamp(3rem, 6.2vw, 6rem);
  line-height: 1.2;
  letter-spacing: .035em;
}

.subpage-hero-copy > p:last-child {
  max-width: 34rem;
  margin-bottom: 0;
  color: var(--ink-muted);
}

.subpage-hero-figure {
  margin-bottom: 0;
}

.subpage-hero-figure img {
  width: 100%;
}

.record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ink-line);
  color: var(--ink-muted);
  font-size: .75rem;
}

.record-section {
  padding-block: var(--section);
}

.record-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 6vw, 80px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink-line);
}

.record-intro h2 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3.3vw, 3rem);
  line-height: 1.55;
}

.record-intro p {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: .78rem;
  font-weight: 700;
}

.record-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px) clamp(18px, 3vw, 42px);
  align-items: start;
  counter-reset: record-photo;
}

.record-figure {
  grid-column: span 6;
  margin-bottom: 0;
  counter-increment: record-photo;
}

.record-figure.wide {
  grid-column: span 8;
}

.record-figure.narrow {
  grid-column: span 4;
}

.record-figure.full {
  grid-column: 1 / -1;
}

.record-figure.offset-left {
  grid-column: 2 / span 5;
}

.record-figure.offset-right {
  grid-column: 7 / span 5;
}

.record-figure img {
  width: 100%;
  background: var(--ink-tint);
}

.record-figure figcaption {
  color: var(--ink-muted);
}

.record-figure figcaption::before {
  margin-right: 7px;
  color: var(--ink-muted);
  content: counter(record-photo, decimal-leading-zero) " /";
}

.record-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

.record-navigation a {
  display: grid;
  gap: 4px;
  min-height: 118px;
  padding: 24px clamp(18px, 3vw, 38px);
  align-content: center;
  text-decoration: none;
}

.record-navigation a + a {
  border-left: 1px solid var(--ink-line);
  text-align: right;
}

.record-navigation span {
  color: var(--ink-muted);
  font-size: .7rem;
}

.record-navigation strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}

/* Materials document */
.document-hero .subpage-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
}

.document-hero h1 {
  font-size: clamp(2.7rem, 5.4vw, 5.4rem);
  line-height: 1.38;
}

.document-summary {
  padding: 28px 0 2px;
  border-top: 2px solid var(--ink);
}

.document-summary p {
  margin-bottom: 0;
  color: var(--ink-muted);
}

.document-terms {
  margin: 0;
}

.document-terms > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--ink-line);
}

.document-terms dt {
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
}

.document-terms dd {
  color: var(--ink-muted);
  font-size: .74rem;
  line-height: 1.65;
}

.document-section {
  padding-block: var(--section);
}

.document-layout {
  display: grid;
  grid-template-columns: minmax(210px, .42fr) minmax(0, 1.58fr);
  gap: clamp(48px, 8vw, 128px);
}

.document-index {
  position: sticky;
  top: 104px;
  align-self: start;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.document-index a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink-muted);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}

.document-block + .document-block {
  margin-top: clamp(48px, 6vw, 80px);
}

.document-block-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 38px;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}

.document-block-no {
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 1.35rem;
}

.document-block h2 {
  margin-bottom: 12px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.45;
}

.document-block-header p {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--ink-muted);
}

.spec-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

.spec-ledger > div {
  padding: 24px clamp(14px, 2vw, 28px) 28px;
}

.spec-ledger > div + div {
  border-left: 1px solid var(--ink-line);
}

.spec-ledger dt {
  margin-bottom: 12px;
  color: var(--ink-muted);
  font-size: .75rem;
  font-weight: 800;
}

.spec-ledger dd {
  margin-bottom: 0;
}

.spec-ledger strong {
  margin-right: 5px;
  color: var(--frame);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  font-weight: 500;
  line-height: 1;
}

.spec-ledger small {
  display: block;
  margin-top: 13px;
  color: var(--ink-muted);
  font-size: .7rem;
  line-height: 1.6;
}

.spec-ledger-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spec-ledger-four > div:nth-child(odd) {
  border-left: 0;
}

.spec-ledger-four > div:nth-child(n + 3) {
  border-top: 1px solid var(--ink-line);
}

.spec-unit {
  display: inline-block;
  margin-left: 8px;
  color: var(--ink-muted);
  font-size: .68rem;
}

.performance-note {
  max-width: 48rem;
  margin: 24px 0 0;
  color: var(--ink-muted);
  font-size: .82rem;
}

.performance-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: .78rem;
}

.document-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

.document-facts-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-facts > div {
  min-width: 0;
  padding: 22px clamp(14px, 2vw, 24px) 24px;
}

.document-facts > div + div {
  border-left: 1px solid var(--ink-line);
}

.document-facts dt {
  margin-bottom: 9px;
  color: var(--ink-muted);
  font-size: .7rem;
  font-weight: 800;
}

.document-facts dd {
  color: var(--ink-muted);
  font-size: .8rem;
  line-height: 1.8;
}

.catalog-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 22px;
  color: var(--frame);
  font-weight: 800;
}

/* Responsive architecture */
@media (max-width: 1199px) {
  /*
    The full navigation fits ordinary tablet text but becomes taller than the fixed header at
    200% text. Switch the navigation model before that min-content collision can happen.
  */
  html {
    scroll-padding-top: 76px;
  }

  .site-header,
  .site-header.is-scrolled {
    height: 70px;
  }

  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .site-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-menu summary {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    list-style: none;
    color: var(--frame);
    cursor: pointer;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    display: block;
    width: 18px;
    height: 1px;
    background: currentcolor;
    content: "";
    transition: transform .2s ease, opacity .2s ease;
  }

  .mobile-menu-icon {
    position: relative;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    position: absolute;
    left: 0;
  }

  .mobile-menu-icon::before {
    top: -6px;
  }

  .mobile-menu-icon::after {
    top: 6px;
  }

  .mobile-menu[open] .mobile-menu-icon {
    background: transparent;
  }

  .mobile-menu[open] .mobile-menu-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .mobile-menu[open] .mobile-menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .mobile-menu nav {
    position: fixed;
    top: 70px;
    right: var(--gutter);
    display: grid;
    width: min(276px, calc(100vw - (var(--gutter) * 2)));
    padding: 10px 18px;
    border: 1px solid var(--ink-line);
    background: var(--paper);
    box-shadow: 0 16px 38px var(--ink-line);
  }

  .mobile-menu nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--ink-line);
    color: var(--ink-muted);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-menu nav a:last-child {
    border-bottom: 0;
  }

  .mobile-menu nav a[aria-current="page"],
  .mobile-menu nav a.site-nav-section-current {
    color: var(--frame);
  }

  html:has(.mobile-menu[open]) {
    scroll-padding-top: 316px;
  }

  .header-action {
    padding-inline: 14px;
    font-size: .72rem;
  }

  .home-main,
  .subpage-main {
    padding-top: 70px;
  }

  .home-hero {
    min-height: calc(100svh - 70px);
  }
}

@media (max-width: 1100px) {
  /* A three-column footer becomes a min-content trap under browser text zoom. */
  .footer-grid {
    grid-template-columns: 1fr 1.2fr;
  }

  .footer-links {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 24px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .subpage-hero:not(.document-hero) .subpage-hero-grid {
    grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr);
    gap: clamp(44px, 6vw, 66px);
  }
}

@media (max-width: 980px) {
  .site-nav {
    gap: 18px;
  }

  .home-hero-copy {
    padding-right: 38px;
  }

  .hero-facts div {
    padding-right: 8px;
  }

  .hero-facts div + div {
    padding-left: 8px;
  }

  .work-record,
  .work-record + .work-record {
    width: 100%;
    grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr);
  }

  .work-record + .work-record {
    grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1.2fr;
  }

  .footer-links {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 24px;
  }

  /* Decision: tablet-document-reading-rail
     Once the source index and three fact cells compete inside the tablet width, the nominal
     columns become 143px text strips. Move the index above the document and spend the full
     container width on evidence; desktop keeps the sticky rail and phones keep one-column facts. */
  .document-layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .document-index {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--ink-line);
  }

  .document-index a {
    justify-content: center;
    padding-inline: 10px;
    border-bottom: 0;
    text-align: center;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .hero-facts dd span {
    display: block;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 76px;
  }

  .site-header,
  .site-header.is-scrolled {
    height: 70px;
  }

  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .site-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-menu summary {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    list-style: none;
    color: var(--frame);
    cursor: pointer;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    display: block;
    width: 18px;
    height: 1px;
    background: currentcolor;
    content: "";
    transition: transform .2s ease, opacity .2s ease;
  }

  .mobile-menu-icon {
    position: relative;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    position: absolute;
    left: 0;
  }

  .mobile-menu-icon::before {
    top: -6px;
  }

  .mobile-menu-icon::after {
    top: 6px;
  }

  .mobile-menu[open] .mobile-menu-icon {
    background: transparent;
  }

  .mobile-menu[open] .mobile-menu-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .mobile-menu[open] .mobile-menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .mobile-menu nav {
    position: fixed;
    top: 70px;
    right: var(--gutter);
    display: grid;
    width: min(276px, calc(100vw - (var(--gutter) * 2)));
    padding: 10px 18px;
    border: 1px solid var(--ink-line);
    background: var(--paper);
    box-shadow: 0 16px 38px var(--ink-line);
  }

  .mobile-menu nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--ink-line);
    color: var(--ink-muted);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-menu nav a:last-child {
    border-bottom: 0;
  }

  .mobile-menu nav a[aria-current="page"],
  .mobile-menu nav a.site-nav-section-current {
    color: var(--frame);
  }

  /* If the enhancement script is unavailable, an open native menu remains above the target. */
  html:has(.mobile-menu[open]) {
    scroll-padding-top: 316px;
  }

  .header-action {
    padding-inline: 14px;
    font-size: .72rem;
  }

  .home-main,
  .subpage-main {
    padding-top: 70px;
  }

  .home-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-hero-copy {
    padding: 56px var(--gutter) 36px;
  }

  .home-hero h1 {
    font-size: clamp(3rem, 12vw, 4.6rem);
  }

  .hero-facts {
    margin-top: 42px;
  }

  .home-hero-media {
    min-height: 56svh;
  }

  .philosophy-heading,
  .philosophy-spread,
  .works-heading,
  .materials-intro,
  .people-heading,
  .process-heading,
  .faq-layout,
  .closing-grid,
  .subpage-hero-grid,
  .document-hero .subpage-hero-grid,
  .record-intro,
  .document-layout {
    grid-template-columns: 1fr;
  }

  .philosophy-heading,
  .materials-intro,
  .process-heading {
    gap: 26px;
  }

  /* Same specificity as the desktop :first-child / :last-child spans, so the single column wins. */
  .philosophy-heading > :first-child,
  .materials-intro > :first-child,
  .process-heading > :first-child,
  .faq-layout > :first-child,
  .philosophy-heading > :last-child,
  .materials-intro > :last-child,
  .process-heading > :last-child,
  .faq-layout > :last-child {
    grid-column: auto;
  }

  .philosophy-copy,
  .materials-intro .chapter-lead,
  .process-heading .chapter-lead {
    padding-top: 0;
  }

  .faq-list {
    margin-top: 0;
  }

  .philosophy-spread {
    gap: 34px;
  }

  .work-record,
  .work-record + .work-record {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .work-record + .work-record .work-record-media,
  .work-record + .work-record .work-record-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .work-record + .work-record .work-record-media {
    grid-row: 1;
  }

  .work-record + .work-record .work-record-copy {
    grid-row: 2;
  }

  .fact-ledger,
  .spec-ledger {
    grid-template-columns: 1fr;
  }

  .fact-ledger div + div,
  .spec-ledger > div + div {
    border-top: 1px solid var(--ink-line);
    border-left: 0;
  }

  .fact-ledger div,
  .spec-ledger > div {
    display: grid;
    grid-template-columns: minmax(90px, .45fr) minmax(0, 1.55fr);
    gap: 18px;
    align-items: center;
  }

  .fact-ledger dt,
  .spec-ledger dt {
    margin-bottom: 0;
  }

  .process-list > li {
    grid-template-columns: minmax(48px, max-content) minmax(0, 1fr);
    gap: 16px;
  }

  .process-list h3,
  .process-list p {
    grid-column: 2;
  }

  .process-list p {
    margin-top: -8px;
  }

  .process-list .process-note {
    grid-column: 2;
    margin-top: -2px;
  }

  .closing-grid {
    gap: 56px;
  }

  .subpage-hero-grid {
    gap: 50px;
  }

  .document-summary {
    margin-top: 10px;
  }

  .record-intro {
    gap: 20px;
  }

  .document-index {
    position: static;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ink-line);
  }

  .document-index li {
    flex: 1 1 33.333%;
  }

  .document-index a {
    justify-content: center;
    border-bottom: 0;
  }

  .document-block-header {
    margin-bottom: 28px;
  }

  .document-facts,
  .document-facts-three {
    grid-template-columns: 1fr;
  }

  .document-facts > div + div {
    border-top: 1px solid var(--ink-line);
    border-left: 0;
  }

  .record-figure,
  .record-figure.wide,
  .record-figure.narrow,
  .record-figure.full,
  .record-figure.offset-left,
  .record-figure.offset-right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  :root {
    --section: 56px;
  }

  .brand {
    /* The wordmark is a logo lockup; cap it so enlarged utility text can reflow beside it. */
    font-size: min(.9rem, 14.4px);
  }

  .brand small {
    font-size: min(.42rem, 6.72px);
  }

  .home-hero-copy {
    padding-top: 48px;
  }

  .home-hero h1 {
    margin-bottom: 24px;
    font-size: clamp(2.25rem, 12vw, 3.7rem);
  }

  .home-hero-media {
    min-height: 48svh;
  }

  .hero-facts {
    padding-top: 22px;
  }

  .hero-facts div {
    padding-right: 8px;
  }

  .hero-facts div + div {
    padding-left: 8px;
  }

  .hero-facts dd {
    font-size: .74rem;
    letter-spacing: 0;
  }

  .chapter-title {
    font-size: clamp(2.2rem, 10vw, 3.1rem);
  }

  .people-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .person-profile {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
  }

  .contact-doors {
    display: grid;
    grid-template-columns: 1fr;
  }

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

  .footer-links {
    grid-column: auto;
    flex-direction: column;
  }

  .footer-map-frame {
    height: 280px;
  }

  .subpage-hero {
    padding-top: 40px;
  }

  .subpage-hero h1 {
    font-size: clamp(2.5rem, 14vw, 4.2rem);
  }

  .record-navigation {
    grid-template-columns: 1fr;
  }

  .record-navigation a + a {
    border-top: 1px solid var(--ink-line);
    border-left: 0;
    text-align: left;
  }

  .document-index li {
    flex-basis: 50%;
  }

  .document-block-header {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .fact-ledger div,
  .spec-ledger > div {
    grid-template-columns: 80px minmax(0, 1fr);
    padding-inline: 8px;
  }
}

@media (max-width: 340px) {
  .brand {
    font-size: min(.8rem, 12.8px);
    letter-spacing: .05em;
  }

  .brand small {
    display: none;
  }

  .header-action {
    padding-inline: 10px;
  }

  .home-hero h1 {
    font-size: clamp(2.1rem, 11.25vw, 3rem);
  }

  .chapter-title {
    font-size: 1.85rem;
  }

  .hero-facts div {
    min-width: 0;
  }

  .hero-facts dd {
    font-size: .68rem;
    white-space: normal;
  }

  .hero-facts dd span {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .site-header,
  .closing,
  .record-navigation,
  .footer-map-button,
  .footer-map-embed {
    display: none !important;
  }

  body,
  .works-chapter,
  .process-chapter,
  .faq-chapter,
  .site-footer {
    background: #fff !important;
    color: var(--ink) !important;
  }

  .home-main,
  .subpage-main {
    padding-top: 0;
  }

  .home-hero {
    min-height: 0;
    grid-template-columns: 1fr 1fr;
  }

  .chapter,
  .record-section,
  .document-section {
    padding-block: 36px;
  }

  /* Decision: print-reading-rhythm
     Preserve screen spacing, but remove accumulated interaction padding from the
     linear print document so the final company information does not become an
     otherwise empty footer-only page. Type sizes and content remain unchanged. */
  .process-list > li {
    padding-block: 22px 24px;
  }

  .faq-list summary {
    min-height: 64px;
    padding-block: 12px;
  }

  .faq-list details p {
    padding-bottom: 18px;
  }

  .site-footer p,
  .site-footer a {
    color: var(--ink) !important;
  }

  .site-footer {
    padding: 12px 0 6px;
    break-inside: avoid;
    line-height: 1.5;
  }

  .footer-grid {
    gap: 12px 20px;
  }

  .site-footer p {
    margin-bottom: 2px;
  }

  .footer-links a {
    min-height: auto;
  }

  .footer-bottom {
    margin-top: 6px;
    padding-top: 4px;
  }

  .faq-list details::details-content {
    content-visibility: visible !important;
  }

  .faq-list summary::after {
    display: none !important;
  }

  .faq-list details p {
    display: block !important;
  }

  /* Decision: print-section-heading-integrity
     Keep the staff heading attached to the first profile without making the whole section
     permanently atomic; future profile growth may still paginate between complete profiles. */
  .people-heading {
    break-inside: avoid;
    break-after: avoid-page;
    page-break-after: avoid;
  }

  .people-grid {
    break-before: avoid-page;
    page-break-before: avoid;
  }

  .record-figure,
  .person-profile,
  .work-record,
  .document-block {
    break-inside: avoid;
  }
}

/* Decision: legal-document-genre — /privacy/ */
.legal-document .subpage-hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
}

.draft-notice {
  max-width: var(--reading);
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid var(--ink);
}

.draft-notice p {
  margin-bottom: 8px;
}

.draft-notice p:last-child {
  margin-bottom: 0;
}

.draft-notice a {
  color: var(--frame);
  font-weight: 700;
}

.legal-body {
  max-width: var(--reading);
}

.legal-body h2 {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: clamp(40px, 5.5vw, 64px) 0 16px;
  font-size: 1.25rem;
  line-height: 1.5;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  margin: 28px 0 10px;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.legal-no {
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 1.1rem;
}

.legal-body p,
.legal-body li {
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.95;
}

.legal-body p {
  margin-bottom: 14px;
}

.legal-body ol,
.legal-body ul {
  margin: 0 0 16px;
  padding-left: 1.6em;
}

.legal-body ol {
  list-style: decimal;
}

.legal-body ul {
  list-style: disc;
}

.legal-body li + li {
  margin-top: 4px;
}

.legal-body a {
  color: var(--frame);
  overflow-wrap: anywhere;
}

.legal-records {
  margin: 8px 0 24px;
}

.legal-record {
  display: grid;
  grid-template-columns: minmax(120px, 9em) minmax(0, 1fr);
  gap: 6px 18px;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--ink-line);
  font-size: .86rem;
  line-height: 1.8;
}

.legal-records .legal-record:last-child {
  border-bottom: 1px solid var(--ink-line);
}

.legal-record dt {
  color: var(--ink-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.8;
  padding-top: .15em;
}

.legal-record dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.legal-record .legal-record-title {
  font-weight: 700;
}

mark.pending {
  padding: 1px 6px;
  background: var(--ink-tint);
  color: var(--ink);
  font-weight: 700;
  box-decoration-break: clone;
}

@media (max-width: 760px) {
  .draft-notice {
    padding: 18px 16px;
  }

  .legal-body h2 {
    font-size: 1.1rem;
  }

  .legal-record {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .legal-record dt {
    margin-top: 8px;
  }

  .legal-record dt:first-child {
    margin-top: 0;
  }
}