/* GLN, draft 02: Built into the wall. Architecture monograph: plaster page, one family (Archivo, width axis). */

/* Archivo from Google Fonts (fonts.gstatic.com), declared here instead of a blocking fonts.googleapis.com stylesheet */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/_lib/fonts/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/_lib/fonts/archivo/v25/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --plaster: #E4E2DC;
  --concrete: #CFCDC8;
  --paper: #EDEBE6;
  --graphite: #1D1F20;
  --graphite-2: #505355;
  --red: #C23B22;      /* dimension lines and callouts only */
  --red-ink: #A9331D;  /* the same red, darkened for small lettering (AA on plaster) */
  --bronze: #8C6A45;   /* the fitting only */
  --rule: rgba(29, 31, 32, .2);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --m: clamp(1rem, 4.2vw, 4.5rem);
  --g: clamp(.75rem, 1.7vw, 1.75rem);
  --ts: 1;   /* drawing lettering and line weight factor, 1 up to 1440px wide */
}

/* Large screens: everything sized in rem grows with the viewport, 16px at 1440 to about 20.5px at 2560 */
@media (min-width: 1441px) {
  html { font-size: calc(100% + (100vw - 1440px) * .004); }
  :root { --ts: 1.1; }
}
@media (min-width: 1920px) { :root { --ts: 1.2; } }
@media (min-width: 2240px) { :root { --ts: 1.33; } }
@media (min-width: 2440px) { :root { --ts: 1.42; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--plaster); }
body {
  margin: 0;
  background: var(--plaster);
  color: var(--graphite);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: .125rem; }
:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; }
main:focus, section:focus, form:focus { outline: none; }
h1, h2, h3 { margin: 0; font-weight: 620; }
p, figure { margin: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-inline: var(--m);
}

/* Type */
.display {
  font-stretch: 125%;
  font-weight: 640;
  font-size: clamp(2.85rem, 8.2vw, 9.25rem);
  line-height: .9;
  letter-spacing: -.03em;
  max-width: 6.3em;
}
h2 {
  font-stretch: 118%;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.022em;
  max-width: 14em;
}
h3 {
  font-stretch: 112%;
  font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.cap {
  font-stretch: 72%;
  font-weight: 480;
  font-size: .9375rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--graphite-2);
}
.cap b { font-weight: 700; color: var(--graphite); }

.skip {
  position: absolute; left: .75rem; top: -80px; z-index: 100;
  background: var(--graphite); color: var(--plaster);
  padding: .75rem 1rem; text-decoration: none;
}
.skip:focus { top: .75rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.25rem;
  font: inherit; font-size: 1rem; font-weight: 600; font-stretch: 108%;
  line-height: 1.1; text-decoration: none; cursor: pointer; border-radius: 0;
  transition: background-color .25s ease, color .25s ease;
}
.btn--line { border: 1.5px solid var(--graphite); background: var(--plaster); color: var(--graphite); }
.btn--line:hover { background: var(--graphite); color: var(--plaster); }
.btn--solid { border: 1.5px solid var(--graphite); background: var(--graphite); color: var(--plaster); }
.btn--solid:hover { background: transparent; color: var(--graphite); }
.btn--text { padding-inline: 2px; font-weight: 500; text-decoration: underline; text-underline-offset: .22em; }

/* Header */
.head {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  align-items: center; padding-block: 1rem;
}
.wordmark {
  grid-column: 1 / 4; justify-self: start;
  font-stretch: 125%; font-weight: 800; font-size: 1.625rem; line-height: 1;
  letter-spacing: .01em; text-decoration: none; padding-block: .6875rem;
}
.nav { grid-column: 4 / 13; display: flex; justify-content: flex-end; align-items: center; gap: clamp(1rem, 2.6vw, 2.75rem); }
.nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.nav ul a { display: inline-block; padding-block: .75rem; font-weight: 500; text-decoration: none; }
.nav ul a:hover { text-decoration: underline; }

/* Hero */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "plate" "band";
  min-height: 100vh;
  min-height: 100svh;
}
.hero__plate {
  grid-area: plate; position: relative; overflow: hidden;
  min-height: 62vh; background: var(--concrete);
}
.hero__media { position: absolute; left: 0; right: 0; top: -9%; height: 118%; }
.hero__media picture, .hero__img { width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 46% 50%; }
.hero__light { position: absolute; top: -12%; bottom: -12%; left: -100%; width: 300%; pointer-events: none; transform: translateX(-6.7%); }
.hero__light-in { position: absolute; inset: 0; transform: translateX(0); }
.hero__light-in::before,
.hero__light-in::after { content: ""; position: absolute; inset: 0; }
.hero__light-in::before {
  background: linear-gradient(112deg,
    rgba(48, 43, 36, .27) 0%, rgba(48, 43, 36, .27) 35%,
    rgba(48, 43, 36, 0) 44%, rgba(48, 43, 36, 0) 56%,
    rgba(48, 43, 36, .27) 65%, rgba(48, 43, 36, .27) 100%);
  mix-blend-mode: multiply;
}
.hero__light-in::after {
  background: linear-gradient(112deg,
    rgba(255, 238, 208, 0) 41%, rgba(255, 238, 208, .26) 46%,
    rgba(255, 244, 224, .42) 50%, rgba(255, 238, 208, .26) 54%, rgba(255, 238, 208, 0) 59%);
  mix-blend-mode: screen;
}
.hero__title {
  grid-area: plate; align-self: end; position: relative; z-index: 3;
  padding-bottom: clamp(1.75rem, 6.5vh, 5rem); pointer-events: none;
}
.hero__title h1 { grid-column: 1 / 11; }
.hero__cap {
  position: absolute; right: var(--m); bottom: .875rem; z-index: 3;
  background: var(--plaster); padding: .3125rem .625rem; max-width: 34ch;
}
.hero__band {
  grid-area: band; position: relative; row-gap: 1.125rem; align-items: start;
  padding-block: clamp(1.375rem, 3.4vh, 2.25rem) clamp(1.75rem, 4.6vh, 3rem);
}
.hero__rule { position: absolute; left: var(--m); right: var(--m); top: 0; height: 1.5px; background: var(--graphite); }
.hero__lede { grid-column: 1 / 6; max-width: 36em; }
.facts {
  grid-column: 7 / 13; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g);
}
.facts li { display: flex; flex-direction: column; gap: .375rem; }
.facts strong { font-stretch: 112%; font-weight: 640; font-size: 1.0625rem; line-height: 1.2; }
.facts span { font-stretch: 80%; font-size: .9375rem; line-height: 1.4; color: var(--graphite-2); }

.guides {
  display: none; grid-area: 1 / 1 / -1 / -1; position: relative; z-index: 2;
  pointer-events: none; height: 100%;
}
.guides i { border-inline: 1px solid rgba(29, 31, 32, .16); }
.js .guides { display: grid; }
.js:not(.ready):not(.no-intro) [data-intro] { visibility: hidden; }
.js:not(.ready):not(.no-intro) .guides i { transform: scaleY(0); }
.no-intro .guides { display: none; }

/* Plates */
.plates { padding-top: clamp(6.5rem, 16vh, 13.125rem); }
.plates__head { row-gap: 1.5rem; align-items: end; }
.plates__head h2 { grid-column: 1 / 8; }
.plates__head p { grid-column: 8 / 12; max-width: 34em; }
.plate { margin-top: clamp(5.5rem, 15vh, 12.5rem); row-gap: 1.25rem; }
.plate__img { overflow: hidden; background: var(--concrete); }
.plate__img img { width: 100%; transform-origin: 50% 60%; }
.plate__cap { display: flex; flex-direction: column; gap: .75rem; }
.plate__cap > p:not(.cap) { max-width: 30em; }
.plate--a .plate__img { grid-column: 1 / 9; }
.plate--a .plate__cap { grid-column: 9 / 12; align-self: end; }
.plate--b .plate__img { grid-column: 4 / 13; grid-row: 1; margin-right: calc(var(--m) * -1); }
.plate--b .plate__cap { grid-column: 1 / 4; grid-row: 1; align-self: start; }
.plate--c .plate__img { grid-column: 7 / 11; grid-row: 1; }
.plate--c .plate__cap { grid-column: 3 / 7; grid-row: 1; align-self: end; padding-right: var(--g); }
.plate--d .plate__img { grid-column: 1 / 8; }
.plate--d .plate__cap { grid-column: 9 / 12; align-self: center; }

.sum {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(1.125rem, 2vw, 1.875rem);
  margin-top: 6px; padding-top: 14px; border-top: 1.5px solid var(--graphite);
}
.sum div { display: flex; flex-direction: column; }
.sum__v {
  font-stretch: 125%; font-weight: 600; font-size: clamp(1.9rem, 2.5vw, 2.5rem);
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.sum__k { font-stretch: 72%; font-size: .9375rem; color: var(--graphite-2); margin-top: .375rem; }

/* Drawings: --u is drawing units per screen pixel, set by main.js; lettering and line weights stay constant on screen */
.dwg { --u: 5; overflow: visible; font-family: var(--font); }
.dwg text { font-size: 12px; font-stretch: 72%; font-weight: 500; fill: var(--graphite); letter-spacing: .01em; }
.dwg .cut, .dwg .ln, .dwg .th, .dwg .dim, .dwg .lead, .dwg .pipe-o, .dwg .pipe-i, .dwg .fit-l, #arcs path { fill: none; }
.dwg .cut { stroke: var(--graphite); stroke-width: calc(var(--u) * var(--ts) * 1.8px / var(--k, 1)); stroke-linecap: square; }
.dwg .ln { stroke: var(--graphite); stroke-width: calc(var(--u) * var(--ts) * 1.05px / var(--k, 1)); }
.dwg .th { stroke: var(--graphite); stroke-width: calc(var(--u) * var(--ts) * .7px / var(--k, 1)); stroke-opacity: .85; }
.dwg .hx-dot, .dwg .hx-fine { fill: var(--graphite); fill-opacity: .42; }
.dwg .hx-fine { fill-opacity: .3; }
.dwg .hx-tri { fill: none; stroke: var(--graphite); stroke-opacity: .45; stroke-width: 3; }
.dwg .hx-line { stroke: var(--graphite); stroke-opacity: .4; stroke-width: 3; }
.dwg .hx-line-s { stroke: var(--graphite); stroke-opacity: .4; stroke-width: .3; }
.dwg .d-view { --k: 3.4; }
.dwg .f-lin { fill: var(--concrete); }
.dwg .pnl { fill: var(--paper); stroke: var(--graphite); stroke-width: calc(var(--u) * var(--ts) * 1.2px / var(--k, 1)); }
.dwg .brk { fill: var(--graphite); }
.dwg .fit { fill: var(--bronze); stroke: var(--graphite); stroke-width: calc(var(--u) * var(--ts) * .8px / var(--k, 1)); }
.dwg .fit-l { stroke: #4E3A24; stroke-width: calc(var(--u) * var(--ts) * .6px / var(--k, 1)); }
.dwg .pipe-o { stroke: var(--graphite); stroke-width: max(18px, calc(var(--u) * var(--ts) * 2.8px)); stroke-linejoin: round; }
.dwg .pipe-i { stroke: var(--paper); stroke-width: max(10px, calc(var(--u) * var(--ts) * 1.3px)); stroke-linejoin: round; }
#arcs path { stroke: var(--graphite); stroke-width: calc(var(--u) * var(--ts) * 1.1px); stroke-linecap: round; }
#arcs path:nth-child(1) { opacity: .78; }
#arcs path:nth-child(2) { opacity: .66; }
#arcs path:nth-child(3) { opacity: .54; }
#arcs path:nth-child(4) { opacity: .43; }
#arcs path:nth-child(5) { opacity: .33; }
#arcs path:nth-child(6) { opacity: .24; }
.dwg .d-bg { fill: var(--plaster); }
.dwg .dim { stroke: var(--red); stroke-width: calc(var(--u) * var(--ts) * 1px); }
.dwg .tick path { fill: none; stroke: var(--red); stroke-width: 1.5px; stroke-linecap: round; }
.dwg .dt text { fill: var(--red-ink); font-weight: 650; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dwg .dt text, .dwg .d-label text, .dwg .lvl text { paint-order: stroke; stroke: var(--plaster); stroke-width: 4px; stroke-linejoin: round; }
.dwg .lead { stroke: var(--graphite); stroke-width: calc(var(--u) * var(--ts) * .8px); }
.dwg .dot circle { fill: var(--graphite); }
.dwg .co circle { fill: var(--plaster); stroke: var(--red); stroke-width: 1.4px; }
.dwg .co text { fill: var(--red-ink); font-size: 11.5px; font-weight: 700; font-stretch: 85%; text-anchor: middle; dominant-baseline: central; }
.dwg .lvl path { fill: var(--graphite); }
.dwg .sb { fill: none; stroke: var(--graphite); stroke-width: calc(var(--u) * var(--ts) * .8px); }
.dwg .sb-f { fill: var(--graphite); }
.dwg .hid-fit { fill: none; stroke: var(--bronze); stroke-width: calc(var(--u) * var(--ts) * 1.3px); stroke-dasharray: calc(var(--u) * var(--ts) * 4px) calc(var(--u) * var(--ts) * 3px); }
.dwg .a { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) scale(calc(var(--u) * var(--ts))); }
@media (max-width: 899.98px) { .dwg { --u: 10; } }

/* Section drawing */
.sec { position: relative; padding-top: clamp(6.5rem, 15vh, 11.875rem); }
.sec__inner { row-gap: 1.75rem; align-items: start; }
.sec__intro { grid-column: 1 / 5; grid-row: 1; display: flex; flex-direction: column; gap: 1.125rem; }
.sec__intro p { max-width: 24em; }
.sec__stage { display: contents; }
.sec__fig { grid-column: 5 / 13; grid-row: 1 / 3; display: flex; flex-direction: column; gap: .625rem; }
.sec__fig svg { width: 100%; height: auto; aspect-ratio: 3400 / 3760; max-height: 92vh; }
.sec__fig figcaption { align-self: flex-end; text-align: right; max-width: 40em; }
.notes { grid-column: 1 / 5; grid-row: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.notes li { display: grid; grid-template-columns: 1.75rem 1fr; column-gap: .875rem; align-items: start; font-size: 1rem; line-height: 1.4; }
.notes__n {
  width: 1.625rem; height: 1.625rem; margin-top: -.125rem; border-radius: 50%;
  border: 1.5px solid var(--red); color: var(--red-ink);
  display: grid; place-items: center;
  font-stretch: 85%; font-weight: 700; font-size: .8125rem; line-height: 1;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

@media (min-width: 900px) {
  .js .sec { padding-top: 0; }
  .js .sec__inner {
    height: 100vh; height: 100svh;
    grid-template-rows: 1fr auto auto 1fr;
    padding-block: clamp(1.25rem, 4vh, 3rem);
    row-gap: clamp(1.25rem, 3.5vh, 2.25rem);
  }
  .js .sec__intro { grid-row: 2; }
  .js .notes { grid-row: 3; }
  .js .sec__fig { grid-row: 1 / -1; align-self: stretch; min-height: 0; justify-content: center; }
  .js .sec__fig svg { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; max-height: none; }
  .js .notes li { color: var(--graphite-2); transition: color .35s ease, font-weight .35s ease; }
  .js .notes li.is-done { color: var(--graphite); }
  .js .notes li.is-on { color: var(--graphite); font-weight: 620; }
  .js .notes li.is-on .notes__n { background: var(--red-ink); border-color: var(--red-ink); color: var(--plaster); }
}

@media (min-width: 1680px) {
  .sec__intro, .notes { grid-column: 1 / 6; }
  .sec__fig { grid-column: 6 / 13; }
}

@media (min-width: 900px) and (max-height: 780px) {
  .js .sec__intro h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
  .js .notes { display: grid; min-height: 4.4em; align-content: start; }
  .js .notes li { grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease; }
  .js .notes li.is-on { opacity: 1; }
}

/* Material schedule */
.mat { padding-block: clamp(6.5rem, 15vh, 11.875rem) clamp(4rem, 10vh, 8.75rem); }
.mat__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); scrollbar-width: thin; }
.mat__track {
  display: flex; align-items: flex-start; gap: clamp(1.25rem, 3vw, 3.5rem);
  list-style: none; margin: 0; padding: 0 var(--m) 1.5rem; width: max-content;
}
.mat__intro { width: min(32vw, 27.5rem); display: flex; flex-direction: column; gap: 1.125rem; scroll-snap-align: start; }
.mat__intro p { max-width: 26em; }
.mat__hint { display: none; }
.mat__item { width: clamp(17.5rem, 27vw, 27.5rem); scroll-snap-align: start; display: flex; flex-direction: column; gap: .75rem; }
.mat__item figure { display: flex; flex-direction: column; gap: .5rem; }
.mat__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--concrete); }
.mat__img picture, .mat__img img { width: 100%; height: 100%; }
.mat__img img { object-fit: cover; }
.mat__img--dwg { background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 10% 12%; }
.mat__img--dwg svg { width: 100%; height: 100%; }
.chip { position: absolute; left: .875rem; bottom: .875rem; width: 3.75rem; height: 3.75rem; background: var(--chip); box-shadow: 0 0 0 1px rgba(29, 31, 32, .3); }
.code { font-stretch: 80%; font-weight: 700; margin-right: .2em; }
.sched { margin: 0; border-top: 1px solid var(--rule); }
.sched div { display: grid; grid-template-columns: 5.2em 1fr; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.sched dt { font-stretch: 72%; font-size: .9375rem; color: var(--graphite-2); line-height: 1.5; }
.sched dd { margin: 0; font-size: 1rem; line-height: 1.45; }

@media (min-width: 900px) {
  .js .mat.is-pinned { padding-block: 0; }
  .js .mat.is-pinned .mat__viewport { height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; scroll-snap-type: none; }
  .js .mat.is-pinned .mat__track { padding-bottom: 0; will-change: transform; }
  .js .mat.is-pinned .mat__img { max-height: calc(100svh - 18.125rem); }
  .js .mat.is-pinned .mat__img:not(.mat__img--dwg) img { width: 112%; max-width: none; margin-left: -6%; }
  .js .mat.is-pinned .mat__hint--pin { display: block; }
}

/* Specification */
.spec { padding-block: clamp(6.5rem, 15vh, 11.875rem); }
.spec__inner { row-gap: 2.25rem; align-items: start; }
.spec__head { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 1.125rem; }
.spec__head p { max-width: 32em; }
.spec__table { grid-column: 1 / 8; grid-row: 2; }
.spec__fig { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; display: flex; flex-direction: column; gap: .625rem; }
.spec__fig svg { width: 100%; height: auto; aspect-ratio: 1100 / 2560; max-height: 84vh; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { text-align: left; caption-side: top; padding-bottom: .375rem; }
.grp th {
  text-align: left; font-stretch: 112%; font-weight: 640; font-size: 1.0625rem;
  padding: 30px 0 10px; border-bottom: 1.5px solid var(--graphite);
}
tbody:first-of-type .grp th { padding-top: .875rem; }
tr:not(.grp) th {
  text-align: left; vertical-align: baseline; width: 42%;
  font-weight: 480; font-stretch: 75%; font-size: .9375rem; color: var(--graphite-2);
  padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule);
}
td { vertical-align: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }

/* Contact */
.contact { background: var(--concrete); padding-block: clamp(6.5rem, 15vh, 11.875rem) clamp(5rem, 12vh, 10rem); }
.contact__inner { row-gap: clamp(2.5rem, 6vh, 4rem); align-items: start; }
.contact__title { grid-column: 1 / 11; max-width: 16em; }
.form { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 1.375rem; }
.form__lede { max-width: 32em; }
.form__intent { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.form__intent legend { padding: 0; margin-bottom: .375rem; font-stretch: 72%; font-size: .9375rem; color: var(--graphite); }
.radio { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; cursor: pointer; }
.radio input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--graphite); }
.form__row { display: flex; flex-direction: column; gap: .125rem; }
.form__row label { font-stretch: 72%; font-size: .9375rem; color: var(--graphite); }
.opt { color: var(--graphite-2); }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%; min-height: 3rem; padding: .625rem 0;
  font: inherit; font-size: 1.0625rem; color: var(--graphite);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--graphite); border-radius: 0;
}
.form textarea { min-height: 6rem; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--graphite); outline-offset: 4px; }
.form .btn { align-self: flex-start; }
.form__status { min-height: 1.55em; max-width: 34em; }
.showroom { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 1rem; }
.showroom__plate { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.showroom__plate img { width: 100%; }
.showroom .cap { color: var(--graphite); }
address { font-style: normal; }
.showroom__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.375rem; margin-top: .375rem; }

/* Footer: a drawing title block */
.foot { background: var(--concrete); padding: 0 var(--m) clamp(1.5rem, 4vh, 2.5rem); }
.tblock { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--graphite); }
.tb { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; padding: 14px 16px; border-left: 1px solid var(--graphite); }
.tb--mark { border-left: 0; justify-content: center; }
.tb--note { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--graphite); flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 28px; }
.tb__k { font-stretch: 72%; font-size: .9375rem; color: var(--graphite); }
.tb__v { font-weight: 560; }
.wordmark--lg { font-stretch: 125%; font-weight: 800; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .9; letter-spacing: .01em; }

/* Below 900px: one column */
@media (max-width: 899.98px) {
  .nav ul { display: none; }
  .wordmark { grid-column: 1 / 5; }
  .nav { grid-column: 5 / 13; }

  .hero { min-height: 0; }
  .hero__plate { min-height: 0; height: 74vh; height: 74svh; }
  .hero__title h1 { grid-column: 1 / -1; }
  .hero__cap { bottom: .875rem; right: var(--m); max-width: 24ch; }
  .hero__title { align-self: start; padding-top: 6.5rem; padding-bottom: 0; }
  .hero__band { row-gap: 1.375rem; }
  .hero__lede, .facts { grid-column: 1 / -1; }
  .facts { grid-row: 1; grid-template-columns: 1fr; row-gap: .75rem; }
  .facts li { flex-direction: row; flex-wrap: wrap; column-gap: .5rem; row-gap: .125rem; align-items: baseline; }
  .hero__lede { grid-row: 2; }

  .plates__head h2, .plates__head p { grid-column: 1 / -1; }
  .plate .plate__img, .plate .plate__cap { grid-column: 1 / -1; grid-row: auto; margin-right: 0; padding-right: 0; }
  .plate { margin-top: clamp(4rem, 11vh, 7.5rem); }

  .sec__intro, .sec__stage, .sec__fig, .notes { grid-column: 1 / -1; grid-row: auto; }
  .sec__stage { display: flex; flex-direction: column; gap: 1.5rem; }
  .sec__fig svg { max-height: 80vh; }
  .sec__fig figcaption { align-self: flex-start; text-align: left; }

  .spec__head, .spec__table, .spec__fig { grid-column: 1 / -1; grid-row: auto; }
  .spec__fig { max-width: 26.25rem; }
  .spec__fig svg { max-height: 72vh; }
  tr:not(.grp) th { width: 46%; }

  .contact__title, .form, .showroom { grid-column: 1 / -1; }

  .tblock { grid-template-columns: 1fr 1fr; }
  .tb { border-left: 0; border-top: 1px solid var(--graphite); }
  .tb:nth-child(odd):not(.tb--mark):not(.tb--note) { border-left: 1px solid var(--graphite); }
  .tb--mark { grid-column: 1 / -1; border-top: 0; }
  .tb--note { flex-direction: column; }

  /* Motion layout on small screens: the stage (drawing + current note) pins */
  .js .sec__stage { height: 100vh; height: 100svh; justify-content: center; gap: .875rem; padding-block: .75rem; }
  .js .sec__fig { flex: 0 1 auto; min-height: 0; }
  .js .sec__fig svg { width: auto; max-width: 100%; height: min(calc(100svh - 15.625rem), calc((100vw - 2 * var(--m)) * 1.106)); aspect-ratio: 3400 / 3760; max-height: none; margin-inline: auto; }
  .js .notes { display: grid; min-height: 5.8em; align-content: start; }
  .js .notes li { grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease; }
  .js .notes li.is-on { opacity: 1; }
  .js .notes li.is-on .notes__n { background: var(--red-ink); border-color: var(--red-ink); color: var(--plaster); }
  .mat__intro { width: min(78vw, 22.5rem); }
  .mat__item { width: min(78vw, 22.5rem); }
  .mat__hint--swipe { display: block; }
}

@media (max-width: 599.98px) {
  .facts span { font-size: 1rem; }
  .sched dt, .cap { font-size: 1rem; }
  .hero__cap { font-size: .9375rem; }
  .tblock { grid-template-columns: 1fr; }
  .tb:nth-child(odd):not(.tb--mark):not(.tb--note) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mat__viewport { overflow: visible; scroll-snap-type: none; }
  .mat__track { width: auto; flex-wrap: wrap; row-gap: 3rem; }
  .mat__intro { width: 100%; }
  .mat__hint { display: none; }
  .btn { transition: none; }
}

/* SplitText line masks: room for descenders under tight leading */
.sl-mask { padding-bottom: .14em; margin-bottom: -.14em; }
.nw { white-space: nowrap; }

/* ---------- Chinese (2026-09-29) ----------
   Noto Sans SC, variable 400-700, subset to this page's Chinese strings (fonts/subset-cjk.py). It sits after Archivo,
   so Latin letters and figures keep Archivo; it is only in the stack while the page is in Chinese. */
@font-face { font-family: "GLN Noto Sans SC"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/noto-sans-sc-gln.woff2") format("woff2"); }
:root:lang(zh) { --font: "Archivo", "GLN Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif; }

.lang { display: flex; }
.lang__btn {
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .375rem; border: 0; background: none; color: var(--graphite); cursor: pointer;
  font: inherit; font-weight: 500; font-size: .9375rem; line-height: 1; opacity: .6;
}
.lang__btn[lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; }
.lang__btn:hover { opacity: 1; }
.lang__btn[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.lang__btn:focus-visible { outline: 2px solid var(--graphite); outline-offset: -3px; }

:lang(zh) body { line-height: 1.8; }
:lang(zh) .display { font-size: clamp(2.3rem, 6.4vw, 7.4rem); line-height: 1.2; letter-spacing: 0; max-width: 8em; font-weight: 700; }
:lang(zh) h2 { font-size: clamp(1.75rem, 3.4vw, 3.6rem); line-height: 1.3; letter-spacing: 0; }
:lang(zh) h3 { line-height: 1.4; letter-spacing: 0; }
:lang(zh) .cap, :lang(zh) .tb__k { letter-spacing: 0; line-height: 1.6; }
:lang(zh) p, :lang(zh) li, :lang(zh) dd, :lang(zh) td { text-wrap: pretty; }
:lang(zh) h1, :lang(zh) h2 { text-wrap: balance; }