/*
  TAIHU SOLAR, site stylesheet. Loaded after assets/engine/base.css.
  World: a scholar's stone catalogue. Pale stone ground with the comp's own paper grain,
  one ink, one vermilion used only for the 太湖 seal and the active selection.
  Hero geometry is measured off the approved comp (1536 x 1024): every hero length is
  written in comp pixels times --k, one comp pixel at the current frame width.
*/

:root {
  color-scheme: light;
  --ground: #e4e3e0;          /* comp ground, sampled */
  --stone: #dde0dd;           /* rain-washed stone, plates and bands */
  --stone-2: #d3d6d2;         /* deeper stone for map land and pressed states */
  --paper: #eeede9;           /* raised paper: form fields, datasheet sheet */
  --ink: #1b1f1d;
  --ink-2: #4e5350;           /* secondary text, 6:1 on ground */
  --ink-3: #6c706d;           /* large or non-text only */
  --rule: #a3a2a0;            /* the comp's nav hairline */
  --rule-soft: rgb(27 31 29 / 0.16);
  --rule-mid: rgb(27 31 29 / 0.32);
  --seal: #c4312a;            /* vermilion: seal and active selection only */
  --on-ink: #f1f0ec;
  --focus: #1b1f1d;

  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-seal: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;

  --vw: 1vw;                                   /* site.js writes clientWidth / 100 */
  --frame: calc(var(--vw) * 100);
  --k: calc(var(--frame) / 1536);              /* one comp pixel */
  --gutter: 20px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;

  --z-plate: 1;
  --z-label: 3;
  --z-header: 40;
  --z-sheet: 60;
  --z-preloader: 100;
}

@media (min-width: 641px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) {
  :root {
    --frame: min(calc(var(--vw) * 100), 150svh, 1680px);
    --gutter: calc(var(--k) * 62);
  }
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

html { background: var(--ground); }
body { overflow-x: visible; }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground) url('../img/paper.png') repeat;
  background-size: 256px 152px;
  font-feature-settings: 'tnum' 0, 'cv11' 0;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--on-ink); }
input, textarea, select { caret-color: var(--ink); accent-color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

[hidden] { display: none !important; }

.tnum { font-variant-numeric: tabular-nums; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 12px 16px; background: var(--ink); color: var(--on-ink);
  text-decoration: none; transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

html { scrollbar-color: var(--ink-3) var(--ground); }

/* ------------------------------------------------------------------ */
/* The seal 太湖: two characters in a vermilion outline                */
/* ------------------------------------------------------------------ */

.seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: max(1.5px, calc(var(--k) * 2)) solid var(--seal);
  border-radius: calc(var(--k) * 4);
  color: var(--seal);
  font-family: var(--font-seal);
  font-weight: 500;
  line-height: 1;
  user-select: none;
}
.seal > span { display: block; }

/* ------------------------------------------------------------------ */
/* Buttons and links                                                   */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0 1.4em;
  border: 1px solid var(--ink);
  border-radius: 0;
  font: inherit;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  touch-action: manipulation;
}
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: #2c312e; }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--on-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

.link-line {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t-fast) var(--ease-out);
}
.link-line:hover { text-decoration-thickness: 3px; }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.site-header {
  position: relative;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--rule);
}

.nav {
  position: relative;
  width: var(--frame);
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
}
.brand .seal { width: 27px; height: 41px; font-size: 18px; border-width: 1.5px; border-radius: 3px; }
.brand .seal > span + span { margin-top: -1px; }
.wordmark {
  font-weight: 580;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
}

.nav-links { display: none; }
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.nav-links a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--seal); }
.nav-cta { display: none; }

.nav-menu {
  min-width: 44px; min-height: 44px;
  padding: 0 4px;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

@media (min-width: 1024px) {
  .site-header { height: calc(var(--k) * 107); }
  .nav { height: 100%; padding: 0; display: block; }
  .site-header .brand { position: absolute; left: calc(var(--k) * 38); top: calc(var(--k) * 26); height: calc(var(--k) * 56); gap: 0; }
  .site-header .brand .seal {
    width: calc(var(--k) * 37); height: calc(var(--k) * 56);
    font-size: calc(var(--k) * 25.5);
    border-width: max(1.5px, calc(var(--k) * 2));
    border-radius: calc(var(--k) * 4);
  }
  .site-header .brand .seal > span + span { margin-top: calc(var(--k) * -1); }
  .site-header .wordmark {
    position: absolute;
    left: calc(var(--k) * 60);
    top: calc(var(--k) * (39 - 0.1367 * 39.9 - 26));
    font-size: calc(var(--k) * 39.9);
    letter-spacing: 0.028em;
  }
  .site-header .nav-links {
    position: absolute;
    left: calc(var(--k) * 486);
    top: calc(var(--k) * (39.8 - 0.1367 * 23.65));
    display: flex;
    gap: calc(var(--k) * 41);
    margin: 0; padding: 0; list-style: none;
    font-size: calc(var(--k) * 23.65);
  }
  .nav-links a { display: inline-block; position: relative; }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -0.35em; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right center;
    transition: transform var(--t-mid) var(--ease-out);
  }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }
  .site-header .nav-cta {
    display: inline-flex;
    position: absolute;
    left: calc(var(--k) * 1272);
    top: calc(var(--k) * 26);
    width: calc(var(--k) * 224);
    height: calc(var(--k) * 57);
    min-height: 0;
    padding: 0;
    font-size: calc(var(--k) * 22.3);
  }
  .nav-menu { display: none; }
}

/* the condensed bar that returns when scrolling back up */
.site-header.is-docked {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgb(228 227 224 / 0.94);
  backdrop-filter: saturate(1.1) blur(6px);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  transform: translateY(-101%);
  transition: transform var(--t-mid) var(--ease-out);
}
.site-header.is-docked.is-shown { transform: translateY(0); }
@media (min-width: 1024px) {
  .site-header.is-docked { height: 64px; }
  .site-header.is-docked .brand { top: 10px; height: 44px; left: calc(var(--k) * 38); }
  .site-header.is-docked .brand .seal { width: 26px; height: 40px; font-size: 18px; border-width: 1.5px; }
  .site-header.is-docked .wordmark { top: 12px; left: 42px; font-size: 22px; }
  .site-header.is-docked .nav-links { top: 23px; font-size: 17px; left: 50%; transform: translateX(-50%); gap: 32px; }
  .site-header.is-docked .nav-cta { top: 10px; height: 44px; width: auto; padding: 0 22px; font-size: 16px; left: auto; right: calc(var(--k) * 40); }
}

/* mobile menu sheet */
.menu-sheet {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  display: none; flex-direction: column;
  padding: 16px var(--gutter) 32px;
  background: var(--ground) url('../img/paper.png') repeat;
  background-size: 256px 152px;
}
.menu-sheet.is-open { display: flex; }
.menu-sheet__top { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.menu-sheet ul { list-style: none; margin: 40px 0 0; padding: 0; }
.menu-sheet li a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.menu-sheet .btn { margin-top: auto; min-height: 56px; font-size: 1.125rem; }

/* ------------------------------------------------------------------ */
/* Hero: the specimen                                                  */
/* ------------------------------------------------------------------ */

.hero { position: relative; }
.hero-stage {
  position: relative;
  width: var(--frame);
  margin: 0 auto;
  box-sizing: border-box;
}

.hero-title {
  font-weight: 600;
  letter-spacing: -0.012em;
  font-size: clamp(2.35rem, 9.6vw, 3.4rem);
  line-height: 1.1;
  text-wrap: balance;
}
.hero-title .ln, .hero-lede .ln { display: inline; }
.hero-lede { font-size: 1.125rem; line-height: 1.5; margin-top: 18px; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.hero-cta { min-height: 52px; font-size: 1.0625rem; padding: 0 28px; }
.hero-link { font-size: 1.0625rem; min-height: 44px; display: inline-flex; align-items: center; }

.specimen { position: relative; margin: 0; }
.spec-stone, .spec-module { display: block; }
.spec-seal { width: 30px; height: 45px; font-size: 20px; }
.spec-labels { list-style: none; margin: 0; padding: 0; }
.leader { display: block; height: 1px; background: var(--ink); }
.lab-text { display: block; white-space: nowrap; }
.lab-gap { display: inline-block; width: 0.3em; }

.hero-figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-figures li { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.hero-figures li + li { border-left: 1px solid #9a9896; }
.fig-num { font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.fig-label { line-height: 1; }

/* phone and tablet: one column, the specimen after the copy */
@media (max-width: 1023.98px) {
  .hero-stage { padding: 28px var(--gutter) 32px; }
  .specimen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    margin-top: 36px;
    position: relative;
  }
  .spec-stone { width: 100%; height: auto; aspect-ratio: 420 / 800; object-fit: cover; }
  .spec-module { width: 100%; height: auto; aspect-ratio: 404 / 738; object-fit: cover; }
  .spec-seal { position: absolute; left: 0; top: 12px; }
  ul.spec-labels { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 18px; }
  .spec-labels li { display: flex; gap: 10px; align-items: baseline; border-top: 1px solid var(--ink); padding-top: 8px; font-size: 0.9375rem; }
  .spec-labels .leader { display: none; }
  .lab-text { white-space: normal; }
  ul.hero-figures { margin-top: 36px; border-top: 1px solid var(--rule); padding-top: 22px; }
  .fig-num { font-size: 2.6rem; }
  .fig-label { font-size: 0.9375rem; margin-top: 8px; }
}
@media (min-width: 641px) and (max-width: 1023.98px) {
  .hero-stage { display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 40px; padding-top: 48px; }
  .hero-copy { grid-column: 1; }
  .specimen { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .hero-figures { grid-column: 1 / -1; }
}

/* desktop: the approved comp, measured */
@media (min-width: 1024px) {
  .hero-stage { height: calc(var(--k) * 917); }  /* 1024 minus the 107px header */
  .hero-stage > * { position: absolute; }
  .hero-copy { position: static; }
  /* every box below: comp pixels minus the 107px header */
  .hero-title {
    position: absolute;
    left: calc(var(--k) * 62);
    top: calc(var(--k) * (207.5 - 107));
    width: calc(var(--k) * 520);
    font-size: calc(var(--k) * 55.7);
    line-height: 1.194;
    letter-spacing: -0.007em;
    text-wrap: nowrap;
  }
  .hero-title .ln, .hero-lede .ln { display: block; }
  .hero-lede {
    position: absolute;
    left: calc(var(--k) * 62);
    top: calc(var(--k) * (434.1 - 107));
    width: calc(var(--k) * 420);
    max-width: none;
    margin: 0;
    font-size: calc(var(--k) * 29.3);
    line-height: 1.4846;
    letter-spacing: -0.004em;
    white-space: nowrap;
  }
  .hero-actions { margin: 0; }
  .hero-cta {
    position: absolute;
    left: calc(var(--k) * 62);
    top: calc(var(--k) * (608 - 107));
    width: calc(var(--k) * 259);
    height: calc(var(--k) * 63);
    min-height: 0;
    padding: 0;
    font-size: calc(var(--k) * 22.3);
  }
  .hero-link {
    position: absolute;
    left: calc(var(--k) * 62);
    top: calc(var(--k) * (727 - 0.8637 * 23.6 - 107));
    min-height: 0;
    font-size: calc(var(--k) * 23.6);
    line-height: 1;
    text-underline-offset: calc(var(--k) * 4.5);
  }

  .specimen { position: absolute; inset: 0; }
  .spec-stone {
    position: absolute;
    left: calc(var(--k) * 578);
    top: calc(var(--k) * (122 - 107));
    width: calc(var(--k) * 420);
    height: calc(var(--k) * 800);
    object-fit: cover;
    z-index: var(--z-plate);
  }
  .spec-module {
    position: absolute;
    left: calc(var(--k) * 988);
    top: calc(var(--k) * (196 - 107));
    width: calc(var(--k) * 404);
    height: calc(var(--k) * 738);
    object-fit: cover;
    z-index: var(--z-plate);
  }
  .spec-seal {
    position: absolute;
    left: calc(var(--k) * 612);
    top: calc(var(--k) * (220 - 107));
    width: calc(var(--k) * 43);
    height: calc(var(--k) * 63);
    font-size: calc(var(--k) * 28.5);
    z-index: var(--z-label);
  }
  .spec-seal > span + span { margin-top: calc(var(--k) * -1); }
  .spec-labels { position: absolute; inset: 0; z-index: var(--z-label); }
  .spec-labels li { position: absolute; left: calc(var(--k) * 1244); font-size: calc(var(--k) * 19.4); letter-spacing: -0.03em; }
  .spec-labels .leader { position: absolute; left: 0; top: 0; width: calc(var(--k) * 60); }
  .spec-labels .lab-text { position: absolute; left: calc(var(--k) * 77); top: calc(var(--k) * -9.65); line-height: 1; }
  .spec-labels .lab-4 .lab-text { line-height: 1.29; top: calc(var(--k) * -13.46); }
  .spec-labels .lab-1 { top: calc(var(--k) * (266 - 107)); }
  .spec-labels .lab-2 { top: calc(var(--k) * (406 - 107)); }
  .spec-labels .lab-3 { top: calc(var(--k) * (536 - 107)); }
  .spec-labels .lab-4 { top: calc(var(--k) * (665 - 107)); }

  .hero-figures {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    display: block;
    pointer-events: none;
  }
  .hero-figures li { position: absolute; top: calc(var(--k) * (870 - 107)); height: calc(var(--k) * 104); pointer-events: auto; }
  .hero-figures li + li { border-left: 0; }
  .hero-figures .fig-1 { left: calc(var(--k) * 12); width: calc(var(--k) * 206); }
  .hero-figures .fig-2 { left: calc(var(--k) * 218); width: calc(var(--k) * 227); }
  .hero-figures .fig-3 { left: calc(var(--k) * 445); width: calc(var(--k) * 196); }
  .hero-figures .fig-2::before, .hero-figures .fig-3::before {
    content: ''; position: absolute; left: 0; top: calc(var(--k) * 7); width: 1px; height: calc(var(--k) * 90);
    background: #9a9896;
  }
  .fig-num { font-size: calc(var(--k) * 57.7); letter-spacing: -0.01em; }
  .fig-label { font-size: calc(var(--k) * 27.1); margin-top: calc(var(--k) * (941.3 - 870 - 57.7)); }
}

/* capture aid for the plates check: ?plates hides every semantic layer */
html.plates-only .site-header > *, html.plates-only .hero-copy, html.plates-only .spec-seal,
html.plates-only .spec-labels, html.plates-only .hero-figures { visibility: hidden !important; }
html.plates-only .site-header { border-color: transparent; }

/* ================================================================== */
/* Sections: the catalogue pages after the hero                        */
/* ================================================================== */

.wrap { width: var(--frame); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }

.sec { padding: clamp(72px, 8vw, 132px) 0 0; }
.sec > .wrap::before { content: ''; display: block; height: 1px; width: 100%; background: var(--rule); margin-bottom: clamp(28px, 3vw, 44px); grid-column: 1 / -1; justify-self: stretch; }
.sec:last-of-type { padding-bottom: clamp(72px, 8vw, 132px); }
.sec[id], [id] { scroll-margin-top: 80px; }

.h2 {
  font-size: clamp(2rem, 1.15rem + 2.7vw, 3.3rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  max-width: 19ch;
  text-wrap: balance;
}
.h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.sec-head { max-width: 62ch; }
.sec-head--wide { max-width: 72ch; }
.sec-lede { margin-top: 18px; font-size: 1.1875rem; line-height: 1.5; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }

.seal--xs { width: 17px; height: 26px; font-size: 11px; border-width: 1px; border-radius: 2px; }

/* photographs sit like plates: straight edges, a hairline, a caption under */
.plate-photo { margin: 40px 0 0; }
.plate-photo img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 58%; border: 1px solid var(--rule-mid); box-sizing: border-box; background: var(--stone); }
.plate-photo figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--ink-2); max-width: 70ch; }
.plate-photo--band { margin: 0 0 clamp(36px, 4vw, 56px); }
.plate-photo--band img { aspect-ratio: 16 / 5; object-position: 50% 62%; }

/* ---------------- series specimen ---------------- */
.spec-table { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 28px; }
.spec-index { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spec-tab {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline;
  text-align: left; padding: 12px 12px 12px 10px; min-height: 64px;
  border: 1px solid var(--rule-mid); background: transparent; color: var(--ink);
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.spec-tab:hover { background: rgb(255 255 255 / 0.28); }
.t-mark { width: 9px; height: 9px; border: 1px solid var(--ink-3); align-self: center; box-sizing: border-box; }
.t-cat { display: none; }
.t-name { font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
.t-meta { grid-column: 2; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.spec-tab[aria-selected='true'] { border-color: var(--ink); background: rgb(255 255 255 / 0.36); }
.spec-tab[aria-selected='true'] .t-mark { background: var(--seal); border-color: var(--seal); }

.spec-plate { position: relative; }
.spec-art { --art-h: 300px; position: relative; display: grid; grid-template-columns: auto 1fr; justify-content: start; align-items: end; gap: 26px; height: var(--art-h); }
.spec-stonebox { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.spec-stone2 { height: calc(var(--art-h) - 34px); width: auto; aspect-ratio: 420 / 800; object-fit: cover; align-self: flex-start; }
.spec-scale { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.75rem; line-height: 1.25; color: var(--ink-2); max-width: 150px; }
@media (min-width: 1024px) { .spec-scale { max-width: none; white-space: nowrap; font-size: 0.8125rem; margin-top: 8px; } }
.spec-drawing { position: relative; align-self: end; margin-bottom: 34px; }
.spec-drawing svg { display: block; overflow: visible; }
.spec-leaders { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; display: none; }
.spec-leaders path { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spec-leaders .floor { stroke: var(--rule); }
.spec-leaders .cellmark { fill: #6d777b; stroke: none; opacity: 0.85; }
.spec-leaders circle { fill: var(--ink); }

.spec-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 22px 0 0; }
.slot { border-top: 1px solid var(--rule-mid); padding: 10px 0 12px; min-height: 64px; box-sizing: border-box; }
.slot dt { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.3; }
.slot dd { margin: 4px 0 0; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.slot [data-v] { display: inline-block; }
.swap { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.spec-foot { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: baseline; }
.spec-cat { font-size: 0.9375rem; color: var(--ink-2); max-width: 60ch; }
.spec-cat span:first-child { color: var(--ink); font-weight: 500; }
.spec-links { display: flex; gap: 24px; }
.spec-links a { min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 1024px) {
  .spec-table { grid-template-columns: minmax(250px, 0.72fr) 3fr; gap: clamp(32px, 3.4vw, 56px); align-items: start; }
  .spec-index { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule-mid); }
  .spec-tab { border: 0; border-bottom: 1px solid var(--rule-mid); padding: 18px 8px 18px 0; min-height: 88px; grid-template-columns: 18px 1fr; }
  .spec-tab[aria-selected='true'] { background: transparent; }
  .spec-tab:hover { background: transparent; }
  .spec-tab:hover .t-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .t-cat { display: block; grid-column: 2; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
  .t-mark { grid-row: 2; }
  .t-name { grid-column: 2; font-size: 1.25rem; }
  .spec-plate { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr); column-gap: clamp(64px, 6vw, 110px); }
  .spec-art { --art-h: clamp(420px, 34vw, 540px); gap: clamp(28px, 3vw, 48px); }
  .spec-leaders { display: block; }
  .spec-slots { grid-template-columns: 1fr; margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 34px; }
  .slot { min-height: 0; padding: 8px 0 10px; }
  .slot dd { font-size: 1.3125rem; }
  .spec-foot { grid-column: 1 / -1; border-top: 1px solid var(--rule-mid); padding-top: 14px; }
}

/* ---------------- factory ---------------- */
ol.process { list-style: none; margin: clamp(40px, 4vw, 64px) 0 0; padding: 0; display: grid; gap: 0; position: relative; counter-reset: st; }
.process li { position: relative; padding: 0 0 26px 52px; }
.process li::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 0; width: 1px; background: var(--rule-mid); transform-origin: center top; transform: scaleY(var(--p, 1)); }
.process li:last-child::before { display: none; }
.p-no {
  position: absolute; left: 0; top: 0; width: 31px; height: 31px;
  display: grid; place-items: center; box-sizing: border-box;
  border: 1px solid var(--ink); font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.process .is-key .p-no { background: var(--ink); color: var(--on-ink); }
.process h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; padding-top: 4px; }
.process p { margin-top: 6px; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.process-line { display: none; }

@media (min-width: 1024px) {
  ol.process { grid-template-columns: repeat(4, 1fr); column-gap: 28px; row-gap: 44px; padding-top: 0; }
  .process li { padding: 52px 0 0; }
  .process li::before { left: 0; right: -28px; top: 15px; bottom: auto; width: auto; height: 1px; transform-origin: left center; transform: scaleX(var(--p, 1)); background: var(--ink-3); }
  .process li:nth-child(4n)::before { right: 0; }
  .p-no { top: 0; }
  .process p { font-size: 0.9375rem; }
}
@media (min-width: 1600px) {
  ol.process { grid-template-columns: repeat(8, 1fr); column-gap: 26px; }
  .process li::before { right: -26px; }
  .process li:nth-child(4n)::before { right: -26px; }
  .process li:last-child::before { display: block; right: 0; }
  .process li:nth-child(8n)::before { right: 0; }
}

.tests { margin-top: clamp(48px, 5vw, 80px); display: grid; gap: 20px; }
.test-list { margin: 0; }
.test-list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.test-list > div:first-child { border-top-color: var(--ink); }
.test-list dt { font-weight: 600; font-variant-numeric: tabular-nums; }
.test-list dd { margin: 0; color: var(--ink-2); }
.tests-note { font-size: 0.9375rem; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 1024px) {
  .tests { grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr); column-gap: clamp(32px, 3.4vw, 56px); }
  .tests-note { grid-column: 2; }
}

/* ---------------- logistics ---------------- */
.log-grid { display: grid; gap: 36px; }
.container-fig { margin: 0; }
.ctr { width: 100%; height: auto; display: block; overflow: visible; }
.ctr .box { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.ctr .rib { stroke: var(--ink); stroke-width: 0.6; opacity: 0.28; }
.ctr .pal { fill: var(--stone); stroke: var(--ink); stroke-width: 0.8; }
.ctr .pal-base { fill: var(--ink-3); }
.ctr .pal-n { font: 500 11px/1 var(--font); fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums; }
.ctr .door { fill: none; stroke: var(--ink); stroke-width: 0.8; }
.ctr .dim { stroke: var(--ink); stroke-width: 0.8; fill: none; }
.ctr .dim-t { font: 400 11px/1 var(--font); fill: var(--ink-2); text-anchor: middle; }
.ctr-cap { margin-top: 12px; font-size: 1rem; color: var(--ink-2); }
.ctr-cap strong { color: var(--ink); font-weight: 600; font-size: 1.25rem; }
.sep { color: var(--rule); padding: 0 4px; }

.lead-chart { margin: 0; }
.lc { margin-top: 18px; position: relative; }
.lc-row { display: grid; grid-template-columns: 7.2rem 1fr; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid var(--rule-soft); }
.lc-name { font-size: 0.9375rem; font-weight: 500; }
.lc-track { position: relative; height: 46px; }
.lc-bar { position: absolute; top: 15px; height: 16px; background: var(--ink); }
.lc-bar--range { background: var(--ink-3); opacity: 0.42; }
.lc-bar--sea { background: var(--ink-3); }
.lc-val { position: absolute; top: 14px; font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); padding-left: 8px; }
.lc-axis { display: grid; grid-template-columns: 7.2rem 1fr; gap: 12px; border-top: 1px solid var(--ink); }
.lc-ticks { position: relative; height: 26px; }
.lc-ticks span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 0.75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lc-ticks span:first-child { transform: none; }
.lc-note { margin-top: 12px; font-size: 0.875rem; color: var(--ink-2); max-width: 70ch; }
@media (max-width: 1023.98px) {
  .lc-row { grid-template-columns: 1fr; gap: 0; padding-top: 10px; }
  .lc-axis { grid-template-columns: 1fr; }
  .lc-axis > span:first-child { display: none; }
  .lc-track { height: 58px; }
  .lc-bar { top: 30px; }
  .lc-val { left: auto !important; right: 0; top: -22px; padding: 0; }
  .lc-name { display: block; }
}

@media (min-width: 1024px) {
  .log-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: clamp(40px, 5vw, 96px); row-gap: 56px; align-items: end; }
  .lead-chart { grid-column: 1 / -1; }
  .lc-row, .lc-axis { grid-template-columns: 11rem 1fr; }
}

/* ---------------- references teaser ---------------- */
.refs-grid { margin-top: clamp(32px, 3.4vw, 52px); display: grid; gap: 28px; }
.map-frame { position: relative; border-top: 1px solid var(--rule-mid); border-bottom: 1px solid var(--rule-mid); padding: 8px 0; }
.wm { display: block; width: 100%; height: auto; overflow: visible; }
.wm path { vector-effect: non-scaling-stroke; }
.wm-grat { fill: none; stroke: var(--ink); stroke-width: 0.5; opacity: 0.12; }
.wm-c { fill: var(--stone-2); stroke: var(--ground); stroke-width: 0.6; }
.wm-c.is-ref { fill: #c3c7c2; }
.wm-c.is-cn { fill: #c3c7c2; }
.wm-lane { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.35; transition: opacity var(--t-mid) var(--ease-out); }
.wm-lane.is-active { opacity: 0.95; stroke-dasharray: none; }
.wm-lane.is-dim { opacity: 0.08; }
.wm-road { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 0.5 4; stroke-linecap: round; opacity: 0.7; }
.wm-road.is-dim { opacity: 0.1; }
.wm-num { display: none; font: 600 30px/1 var(--font); fill: var(--ink); }
.wm-portdot { fill: var(--ground); stroke: var(--ink); stroke-width: 1.2; }
.map-keylist { display: none; }
.wm-factory rect { fill: var(--ground); stroke: var(--seal); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.wm-factory text { font: 500 8.5px/1 var(--font-seal); fill: var(--seal); }
.wm-port circle { fill: var(--ink); }
.wm-port text { font: 400 var(--map-fs-s, 11px)/1 var(--font); fill: var(--ink-2); }
.wm-pin { cursor: default; outline: none; }
.wm-pin[role='button'] { cursor: pointer; }
.wm-dot { fill: var(--ink); stroke: var(--ground); stroke-width: 1.5; transition: fill var(--t-fast) var(--ease-out); }
.wm-pin.is-active .wm-dot, .pj:hover .wm-dot.is-on, .pj.is-active .wm-dot.is-on { fill: var(--seal); }
.wm-hit { fill: transparent; }
.wm-lead { stroke: var(--ink); stroke-width: 0.8; fill: none; }
.wm-lab { font: 500 var(--map-fs, 13px)/1 var(--font); fill: var(--ink); }
.wm-lab--n { font-weight: 400; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.wm-lab--loc { font-size: 6px; font-weight: 500; }
.wm-pin.is-dim { opacity: 0.25; }
.wm-pin:focus-visible .wm-dot { stroke: var(--ink); stroke-width: 3; }

.ref-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ref-table th { text-align: left; font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); padding: 0 0 10px; border-bottom: 1px solid var(--ink); }
.ref-table td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; font-size: 0.9375rem; }
.ref-table .num { text-align: right; padding-right: 14px; }
.ref-table td.site strong { display: block; font-weight: 600; font-size: 1rem; }
.ref-table td.site span { color: var(--ink-2); font-size: 0.875rem; }
.ref-table tr { transition: background-color var(--t-fast) var(--ease-out); }
.ref-table tbody tr:hover, .ref-table tbody tr.is-active { background: rgb(255 255 255 / 0.3); }
.ref-table tbody tr.is-active td.site strong::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--seal); margin: 0 8px 2px 0; }
.refs-all { margin-top: 22px; min-height: 48px; }
@media (min-width: 1024px) {
  .refs-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 56px); align-items: start; }
  .refs-map { --map-fs: 15px; --map-fs-s: 12px; }
}
@media (max-width: 640px) { .refs-map .wm-lab, .refs-map .wm-lead, .refs-map .wm-port text { display: none; } .refs-map .wm-num { display: block; } .ref-no { display: inline-block !important; } }
.ref-no { display: none; font-weight: 600; margin-right: 8px; font-variant-numeric: tabular-nums; }

/* ---------------- quote form ---------------- */
.quote-grid { display: grid; gap: 40px; }
ol.next-steps { list-style: none; margin: 36px 0 0; padding: 0; counter-reset: ns; max-width: 44ch; }
.next-steps li { counter-increment: ns; position: relative; padding: 12px 0 12px 40px; border-top: 1px solid var(--rule-soft); color: var(--ink-2); }
.next-steps li::before { content: counter(ns); position: absolute; left: 0; top: 12px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ink); font-size: 0.8125rem; color: var(--ink); font-variant-numeric: tabular-nums; box-sizing: border-box; }
.next-steps strong { color: var(--ink); font-weight: 600; }

.qform { display: grid; grid-template-columns: 1fr; gap: 18px 20px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 0.9375rem; font-weight: 500; }
.opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 14px;
  font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-3); border-radius: 0; appearance: none; -webkit-appearance: none;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input::placeholder { color: var(--ink-3); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--ink); border-width: 2px; padding: 11px 13px; }
.err { font-size: 0.875rem; font-weight: 500; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.err::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--ink); transform: translateY(-1px); }
.hint { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vol { display: grid; grid-template-columns: 1fr auto; }
.vol input { border-right: 0; }
.unit { display: flex; border: 1px solid var(--ink-3); }
.unit label { position: relative; display: grid; place-items: center; min-width: 64px; min-height: 50px; cursor: pointer; font-size: 0.9375rem; font-weight: 500; }
.unit label + label { border-left: 1px solid var(--rule-mid); }
.unit input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.unit input:checked + span { color: var(--on-ink); }
.unit label:has(input:checked) { background: var(--ink); }
.unit label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.q-submit { min-height: 56px; padding: 0 34px; font-size: 1.0625rem; }
.q-submit[aria-busy='true'] { opacity: 0.7; cursor: progress; }
.form-note { font-size: 0.875rem; color: var(--ink-2); }

.qdone { border-top: 1px solid var(--ink); padding-top: 28px; display: grid; gap: 14px; justify-items: start; align-content: start; max-width: 52ch; }
.qdone:focus { outline: none; }
.seal--stamp { width: 58px; height: 88px; font-size: 38px; border-width: 2.5px; border-radius: 5px; }
.qdone .h3 { font-size: 1.5rem; }
.qdone p { color: var(--ink-2); }
.qdone p strong { color: var(--ink); }

@media (min-width: 700px) {
  .qform { grid-template-columns: 1fr 1fr; }
  .field--wide, .form-foot { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .quote-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .qdone { grid-column: 2; grid-row: 2; }
}

/* ---------------- footer ---------------- */
.site-footer { margin-top: 0; border-top: 1px solid var(--ink); padding: 44px 0 28px; }
.foot-grid { display: grid; gap: 32px; }
.foot-brand p { margin-top: 16px; color: var(--ink-2); max-width: 40ch; }
.brand--foot .wordmark { font-size: 22px; }
.foot-h { font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); margin-bottom: 10px; }
.foot-col p + p { margin-top: 12px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li a { display: inline-flex; min-height: 40px; align-items: center; }
.foot-col a { color: var(--ink); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule-soft); font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 1024px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------------- preloader: the seal is pressed ---------------- */
.preloader {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--ground) url('../img/paper.png') repeat; background-size: 256px 152px;
  z-index: var(--z-preloader);
}
.pl-seal { width: 42px; height: 63px; overflow: visible; }
.pl-rect { fill: none; stroke: var(--seal); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pl-seal text { font: 500 23px/1 var(--font-seal); fill: var(--seal); opacity: 0; }
.pl-count { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* motion helpers */
html.js-motion .hero-stage [data-hero-in] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.js-motion .hero-stage [data-hero-in] { opacity: 1; } }

/* ================================================================== */
/* Inner pages: modules and projects                                   */
/* ================================================================== */

.page-head { padding: clamp(40px, 5vw, 76px) 0 0; }
.h1 { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; }
.page-lede { margin-top: 18px; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.sec--tight { padding-top: clamp(32px, 3.4vw, 52px); }
.sec--tight > .wrap::before { display: none; }

/* filters: pressed chips, one per group */
.filters { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-soft); }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flabel { font-size: 0.8125rem; color: var(--ink-2); margin-right: 6px; }
.chip {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--rule-mid); background: transparent; color: var(--ink);
  font-size: 0.9375rem; white-space: nowrap; border-radius: 0; position: relative;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.chip::after { content: ''; position: absolute; left: -1px; right: -1px; top: -2px; bottom: -2px; } /* 44px hit area */
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip[aria-pressed='true']::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--seal); margin-right: 8px; vertical-align: 2px; }
.fcount { font-size: 0.875rem; color: var(--ink-2); margin-left: auto; font-variant-numeric: tabular-nums; }
.cat-empty { padding: 40px 0; display: grid; gap: 14px; justify-items: start; color: var(--ink-2); }

/* catalogue plates */
.cat-grid { display: grid; gap: 28px; margin-top: 32px; }
.cat-plate { border-top: 1px solid var(--ink); padding: 16px 0 8px; display: grid; gap: 18px; align-content: start; }
.cat-plate[hidden] { display: none; }
.cp-head { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: baseline; }
.cp-head .seal { grid-row: 1 / span 2; align-self: center; }
.cp-cat { font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; grid-column: 2; }
.cp-name { grid-column: 2; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.cp-tech { grid-column: 3; grid-row: 1 / span 2; align-self: end; font-size: 0.875rem; color: var(--ink-2); text-align: right; }
.cp-head .seal--xs { width: 22px; height: 33px; font-size: 14px; border-width: 1.5px; }
.cp-body { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 20px clamp(56px, 6vw, 88px); align-items: end; }
.cp-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cp-leaders path { fill: none; stroke: var(--ink); stroke-width: 1; }
.cp-leaders circle { fill: var(--ink); }
.cp-leaders rect { fill: #6d777b; stroke: none; opacity: 0.85; }
.cp-draw { height: var(--h); display: flex; align-items: flex-end; }
.cp-draw svg { display: block; overflow: visible; }
.mod-dim-t { font: 400 11px/1 var(--font); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.cp-slots { margin: 0; display: grid; gap: 0; }
.cp-slots > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule-soft); }
.cp-slots dt { font-size: 0.8125rem; color: var(--ink-2); }
.cp-slots dd { margin: 0; font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.cp-blurb { color: var(--ink-2); font-size: 0.9375rem; max-width: 60ch; }
.cp-models { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-models span { font-size: 0.8125rem; padding: 4px 8px; border: 1px solid var(--rule-soft); font-variant-numeric: tabular-nums; }
.cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cp-actions .btn { min-height: 48px; }
.cp-doc { font-size: 0.8125rem; color: var(--ink-2); }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .cat-plate { padding: 28px; } }
@media (max-width: 639.98px) { .cp-body { grid-template-columns: 1fr; } .cp-leaders { display: none; } .cp-draw { justify-content: flex-start; } .cp-tech { grid-column: 2; grid-row: auto; text-align: left; } }
.page-head .wrap { position: relative; }
.scale-stone { display: none; }
@media (min-width: 1024px) {
  .page-head--scale .wrap { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
  .scale-stone { display: flex; align-items: flex-end; gap: 14px; margin: 0; }
  .scale-stone img { width: auto; height: 313px; }
  .scale-stone figcaption { max-width: 17ch; font-size: 0.8125rem; color: var(--ink-2); padding-bottom: 4px; }
}

/* compare */
.cmp { margin-top: 32px; }
.cmp-scroll { display: none; }
.cmp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cmp-table thead th { text-align: left; font-size: 1.0625rem; font-weight: 600; padding: 0 12px 12px 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.cmp-table tbody th { text-align: left; font-weight: 400; font-size: 0.875rem; color: var(--ink-2); padding: 11px 16px 11px 0; width: 17%; vertical-align: top; }
.cmp-table td { padding: 11px 12px 11px 0; font-size: 0.9375rem; vertical-align: top; }
.cmp-table tbody tr + tr > * { border-top: 1px solid var(--rule-soft); }
.cmp-table tbody tr:nth-child(4n + 1) > * { border-top-color: var(--rule-mid); }
.cmp-table .is-out { opacity: 0.32; }
.cmp-table .cmp-act button { font-size: 0.9375rem; min-height: 44px; padding: 0; text-align: left; }
.cmp-cards { display: grid; gap: 20px; }
.cmp-card { border-top: 1px solid var(--ink); padding-top: 14px; }
.cmp-card.is-out { opacity: 0.4; }
.cmp-card h3 { font-size: 1.25rem; font-weight: 600; }
.cmp-card dl { margin: 10px 0 14px; }
.cmp-card dl > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule-soft); font-size: 0.9375rem; }
.cmp-card dt { color: var(--ink-2); font-size: 0.875rem; }
.cmp-card dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .cmp-scroll { display: block; } .cmp-cards { display: none; } }

/* documents */
ul.doc-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.doc { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); align-items: center; }
.doc-name strong { display: block; font-weight: 600; }
.doc-name span { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.doc .btn { justify-self: start; min-height: 48px; }
.doc-mail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-mail input, .sheet-mail input { min-height: 48px; padding: 0 14px; border: 1px solid var(--ink-3); background: var(--paper); font-size: 1rem; min-width: 0; flex: 1 1 220px; border-radius: 0; }
.doc-mail input:focus, .sheet-mail input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sm-msg { flex-basis: 100%; font-size: 0.875rem; color: var(--ink); font-weight: 500; min-height: 1.2em; }
@media (min-width: 760px) { .doc { grid-template-columns: 1fr auto; } .doc .btn { justify-self: end; } }

/* the datasheet sheet */
.sheet { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--ink); background: var(--ground); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.sheet::backdrop { background: rgb(27 31 29 / 0.55); }
.sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--ground); border-bottom: 1px solid var(--rule-mid); }
.sheet-meta { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sheet-acts { display: flex; gap: 8px; }
.sheet-page { margin: 16px; padding: clamp(18px, 3vw, 40px); background: var(--paper); border: 1px solid var(--rule-soft); font-size: 0.875rem; line-height: 1.45; }
.sh-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.sh-brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 1rem; }
.sh-brand .seal { width: 22px; height: 33px; font-size: 14px; border-width: 1.5px; border-radius: 2px; }
.sh-title { text-align: right; }
.sh-title p { color: var(--ink-2); font-size: 0.8125rem; }
.sh-title h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.sh-range { font-variant-numeric: tabular-nums; }
.sh-top { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: end; margin-top: 18px; }
.sh-draw svg { display: block; }
.sh-keys { list-style: none; margin: 0; padding: 0; }
.sh-keys li { padding: 7px 0; border-top: 1px solid var(--rule-soft); color: var(--ink-2); }
.sh-keys strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.sh-h { font-size: 0.9375rem; font-weight: 600; margin: 20px 0 8px; }
.sh-tablewrap { overflow-x: auto; }
.sh-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 520px; }
.sh-table th, .sh-table td { padding: 6px 8px 6px 0; border-top: 1px solid var(--rule-soft); text-align: right; font-size: 0.8125rem; }
.sh-table th[scope='row'] { text-align: left; font-weight: 400; color: var(--ink-2); }
.sh-table thead th { border-top: 0; border-bottom: 1px solid var(--ink); font-weight: 600; color: var(--ink); }
.sh-fine { margin-top: 8px; font-size: 0.75rem; color: var(--ink-2); }
.sh-cols { display: grid; gap: 8px 28px; }
.sh-dl { margin: 0; }
.sh-dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--rule-soft); font-size: 0.8125rem; }
.sh-dl dt { color: var(--ink-2); }
.sh-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.curve { width: 100%; max-width: 320px; height: auto; display: block; }
.curve .cg { stroke: var(--rule-soft); stroke-width: 1; }
.curve .ct { font: 400 8px/1 var(--font); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.curve .ct--b { font-weight: 600; fill: var(--ink); }
.curve .cl { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.curve .cd { fill: var(--ink); }
.sh-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--ink); font-size: 0.75rem; color: var(--ink-2); display: grid; gap: 4px; }
.sheet-mail { margin: 0 16px 16px; padding: 16px; border: 1px solid var(--rule-soft); display: grid; gap: 8px; }
.sheet-mail label { font-weight: 500; }
.sm-row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 760px) { .sh-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sh-top { grid-template-columns: 1fr; } .sh-head { flex-direction: column; } .sh-title { text-align: left; } }

/* projects */
.pj-mapsec .map-frame { padding: 14px 0; }
.pj-map { --map-fs: 13px; --map-fs-s: 11px; }
@media (max-width: 760px) { .pj-map .wm-lab--n { display: none; } .pj-map { --map-fs: 22px; } }
@media (max-width: 760px) {
  .pj-map .wm-lab, .pj-map .wm-lead, .pj-map .wm-port text { display: none; }
  .pj-map .wm-num { display: block; }
  .map-keylist { display: grid; list-style: none; margin: 10px 0 0; padding: 0; grid-template-columns: 1fr 1fr; gap: 0 16px; counter-reset: mk; }
  .map-keylist li { counter-increment: mk; border-top: 1px solid var(--rule-soft); }
  .map-keylist a { display: flex; gap: 8px; align-items: baseline; min-height: 44px; padding-top: 10px; color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
  .map-keylist a::before { content: counter(mk); font-weight: 600; font-variant-numeric: tabular-nums; }
  .map-keylist span { color: var(--ink-2); font-size: 0.8125rem; }
}
ul.map-key { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.875rem; color: var(--ink-2); }
.map-key li { display: inline-flex; align-items: center; gap: 8px; }
.k-seal { font-family: var(--font-seal); font-size: 10px; color: var(--seal); border: 1px solid var(--seal); padding: 1px 2px; writing-mode: vertical-rl; line-height: 1; }
.k-pin { width: 8px; height: 8px; background: var(--ink); }
.k-lane { width: 28px; height: 0; border-top: 1px dashed var(--ink); }
.pj-list .h2 { margin-bottom: 20px; }
.pj-grid { display: grid; gap: 28px; margin-top: 28px; }
.pj { display: grid; gap: 14px; align-content: start; outline: none; }
.pj[hidden] { display: none; }
.pj-media { aspect-ratio: 3 / 2; border: 1px solid var(--rule-mid); overflow: hidden; background: var(--stone); }
.pj-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-out); }
.pj:hover .pj-media img { transform: scale(1.025); }
.pj-loc { width: 100%; height: 100%; }
.pj-loc .wm { width: 100%; height: 100%; }
.pj-name { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pj-name span { font-size: 0.9375rem; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.pj.is-active .pj-name::before { content: ''; width: 9px; height: 9px; background: var(--seal); align-self: center; }
.pj-data { margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pj-data > div { padding: 7px 0; border-top: 1px solid var(--rule-soft); }
.pj-data .wide { grid-column: 1 / -1; }
.pj-data dt { font-size: 0.75rem; color: var(--ink-2); }
.pj-data dd { margin: 2px 0 0; font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pj-note { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-2); }
@media (min-width: 700px) { .pj-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pj-grid { grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 48px; } }

.cta-band .cta-inner { display: grid; gap: 16px; justify-items: start; }
.cta-btn { min-height: 56px; padding: 0 32px; font-size: 1.0625rem; margin-top: 8px; }

/* print: the datasheet sheet only, on A4 */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  body > *:not(.sheet) { display: none !important; }
  .sheet { position: static; display: block; width: auto; max-height: none; border: 0; overflow: visible; background: #fff; }
  .sheet::backdrop { display: none; }
  .sheet-bar, .sheet-mail { display: none; }
  .sheet-page { margin: 0; padding: 0; border: 0; background: #fff; font-size: 9.5pt; }
  .sh-cols { grid-template-columns: repeat(3, 1fr); }
}