/* leano.peakappsstudio.com
   Heather Studio palette (leano-twin-lab/brand/palette.json v2): a porcelain twin on a heather stage, measured with a
   jade tape. Jade marks tapes, keys and focus, never large fills. Brygada 1918 for display, Ysabeau Office for text
   and every figure, the app's own pair. Positions of the figure markers are appended by src/build.mjs. */

@font-face { font-family: 'Brygada 1918'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/brygada-500-latin.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: 'Brygada 1918'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/brygada-500-latin-ext.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; }
@font-face { font-family: 'Brygada 1918'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/brygada-500-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Brygada 1918'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/brygada-600-latin.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: 'Brygada 1918'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/brygada-600-latin-ext.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; }
@font-face { font-family: 'Brygada 1918'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/brygada-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Ysabeau Office'; font-style: normal; font-weight: 420; font-display: swap; src: url(/fonts/ysabeau-420-latin.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: 'Ysabeau Office'; font-style: normal; font-weight: 420; font-display: swap; src: url(/fonts/ysabeau-420-latin-ext.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; }
@font-face { font-family: 'Ysabeau Office'; font-style: normal; font-weight: 420; font-display: swap; src: url(/fonts/ysabeau-420-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Ysabeau Office'; font-style: normal; font-weight: 560; font-display: swap; src: url(/fonts/ysabeau-560-latin.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: 'Ysabeau Office'; font-style: normal; font-weight: 560; font-display: swap; src: url(/fonts/ysabeau-560-latin-ext.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; }
@font-face { font-family: 'Ysabeau Office'; font-style: normal; font-weight: 560; font-display: swap; src: url(/fonts/ysabeau-560-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: light dark;
  --ground: #f5f3f8;
  --stage: #e3dfe9;
  --stage-glow: #efecf4;
  --stage-floor: #d3cddb;
  --panel: #ffffff;
  --sunken: #ece9f1;
  --ink: #1e1a26;
  --ink-soft: #5e5770;
  --line: rgba(30, 26, 38, 0.13);
  --line-strong: rgba(30, 26, 38, 0.3);
  --tape: #14a184;
  --tape-text: #0b7a65;
  --key: #0b7a65;
  --key-edge: #06594a;
  --on-key: #ffffff;
  --gain: #e0952c;
  --loss: #3f84d0;
  --focus: #0b7a65;
  --render-tape: #0dab8a;
  --display: 'Brygada 1918', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --text: 'Ysabeau Office', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4.4vw, 56px);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #17151d;
    --stage: #1f1c26;
    --stage-glow: #2b2733;
    --stage-floor: #121017;
    --panel: #29252f;
    --sunken: #1a1820;
    --ink: #f1eef4;
    --ink-soft: #b3acc2;
    --line: rgba(241, 238, 244, 0.12);
    --line-strong: rgba(241, 238, 244, 0.28);
    --tape: #1fb394;
    --tape-text: #3cc7a8;
    --key: #1fb394;
    --key-edge: #148c73;
    --on-key: #12161a;
    --gain: #efa944;
    --loss: #5a9be0;
    --focus: #3cc7a8;
  }
}

:lang(ja) {
  --display: 'Brygada 1918', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;
  --text: 'Ysabeau Office', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, Meiryo, 'Noto Sans JP', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 420 1.125rem/1.62 var(--text);
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
:lang(ja) body, body:lang(ja) { line-height: 1.85; line-break: strict; word-break: auto-phrase; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; margin: 0; overflow-wrap: break-word; }
h1 { font-weight: 500; font-size: clamp(2.45rem, 1.2rem + 4vw, 4.6rem); line-height: 1.03; letter-spacing: -0.02em; }
h2 { font-weight: 500; font-size: clamp(1.8rem, 1.25rem + 2.1vw, 2.9rem); line-height: 1.1; letter-spacing: -0.012em; }
h3 { font-weight: 600; font-size: 1.3rem; line-height: 1.28; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { letter-spacing: 0.01em; line-height: 1.32; }
:lang(ja) h1 { font-size: clamp(2rem, 1.1rem + 3vw, 3.6rem); }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 0.85em; }
strong { font-weight: 560; }
small, .small { font-size: 0.94rem; color: var(--ink-soft); }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--tape); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.num, td, .figs { font-variant-numeric: tabular-nums lining-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 10; background: var(--panel); color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Header */
.top { position: relative; z-index: 3; }
.top__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 18px; }
.wordmark { font: 600 1.7rem/1 var(--display); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); padding-block: 6px; }
.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
.nav a { text-decoration: none; color: var(--ink-soft); font-weight: 560; font-size: 1rem; padding-block: 8px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tape); text-decoration-thickness: 2px; }
.top--stage { background: var(--stage); }

/* The key: the app's primary button, jade on a darker plinth edge. */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 54px; padding: 0 1.45em; border-radius: 12px;
  background: var(--key); color: var(--on-key);
  font: 560 1.06rem/1.1 var(--text); text-decoration: none; text-align: center;
  box-shadow: 0 4px 0 var(--key-edge);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.key:hover { text-decoration: none; transform: translateY(1px); box-shadow: 0 3px 0 var(--key-edge); }
.key:active { transform: translateY(4px); box-shadow: 0 0 0 var(--key-edge); }
.key--small { min-height: 42px; padding: 0 1.05em; font-size: 0.98rem; border-radius: 10px; box-shadow: 0 3px 0 var(--key-edge); }
.key svg { width: 1.1em; height: 1.1em; flex: none; }

/* Hero: the twin on its stage, the waist tape running out across the page. */
.hero { position: relative; background: var(--stage); overflow: clip; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 62% at 76% 42%, var(--stage-glow), transparent 72%);
}
.hero__grid {
  --fig-h: clamp(540px, 76vh, 860px);
  --fig-w: calc(var(--fig-h) * var(--hero-aspect));
  --band: calc(var(--fig-h) * var(--hero-band-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fig-w);
  column-gap: clamp(24px, 5vw, 96px);
  grid-template-rows: minmax(calc(var(--fig-h) * var(--hero-waist) + 12px), auto) var(--band) minmax(calc(var(--fig-h) * (1 - var(--hero-waist)) - var(--band) + 28px), auto);
}
.hero__title { grid-column: 1; grid-row: 1; align-self: end; padding-top: clamp(24px, 5vh, 56px); padding-bottom: clamp(18px, 3.2vh, 36px); max-width: 15em; }
.hero__stage { grid-column: 1 / -1; grid-row: 2; position: relative; }
.hero__body { grid-column: 1; grid-row: 3; padding-top: clamp(20px, 3.4vh, 38px); padding-bottom: 56px; max-width: 34em; }
.twin { position: absolute; right: 0; top: calc(var(--band) / 2 - var(--fig-h) * var(--hero-waist)); width: var(--fig-w); height: var(--fig-h); margin: 0; }
.twin picture, .twin img { position: relative; z-index: 1; width: 100%; height: 100%; }
.tape {
  position: absolute; z-index: 0; top: calc(var(--hero-waist) * 100%); height: calc(var(--hero-band-h) * 100%);
  left: -200vw; right: calc(100% - var(--hero-tape-end) * 1%);
  transform: translateY(-50%);
  background: linear-gradient(180deg, #19b493 0%, var(--render-tape) 38%, var(--render-tape) 70%, #0a9878 100%);
  border-radius: 0 3px 3px 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tape { transform-origin: 100% 50%; animation: tape-out 1150ms cubic-bezier(0.2, 0.75, 0.14, 1) 240ms both; }
  @keyframes tape-out { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }
}
.lede { font-size: clamp(1.16rem, 1.05rem + 0.4vw, 1.32rem); line-height: 1.5; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.cta p { color: var(--ink-soft); font-size: 0.98rem; max-width: 22em; }

/* Sections */
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--stage { background: var(--stage); }
.section__head { max-width: 46em; }
.section__head p { margin-top: 18px; color: var(--ink-soft); font-size: 1.16rem; }
.section__head p strong { color: var(--ink); }
.grid { display: grid; gap: clamp(28px, 4vw, 64px); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Measure: the numbered figure and the sites list */
.measure { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; margin-top: clamp(36px, 5vw, 64px); }
.plinth { position: relative; background: var(--stage); border-radius: 22px; padding: clamp(18px, 3vw, 36px) clamp(14px, 3vw, 40px) clamp(10px, 2vw, 22px); }
.marked { position: relative; margin: 0 auto; max-width: 400px; }
.marked img { width: 100%; height: auto; }
.mark {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); color: var(--ink); border: 2px solid var(--tape-text);
  font: 560 0.8rem/1 var(--text); font-variant-numeric: tabular-nums;
}
.sites { list-style: none; margin: 0; padding: 0; columns: 2 15em; column-gap: 40px; }
.sites li { break-inside: avoid; display: grid; grid-template-columns: 3.6em 1fr; gap: 2px 8px; padding: 11px 0; border-top: 1px solid var(--line); }
.sites .n { font-weight: 560; color: var(--tape-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sites .name { font-weight: 560; }
.sites .where { grid-column: 2; color: var(--ink-soft); font-size: 0.97rem; line-height: 1.45; }
.routines { width: 100%; border-collapse: collapse; margin-top: 4px; }
.routines th, .routines td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--line); }
.routines th { font-weight: 560; white-space: nowrap; padding-right: 22px; }
.routines td { color: var(--ink-soft); }
.aside { margin-top: 26px; color: var(--ink-soft); }
.more { margin-top: 26px; font-weight: 560; }

/* Then vs now */
.change { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; margin-top: clamp(36px, 5vw, 64px); }
.shot { margin: 0; }
.shot__img { height: clamp(300px, 34vw, 480px); width: auto; max-width: 100%; margin-inline: auto; }
.shot__img picture { height: 100%; }
.shot__img img { width: 100%; height: 100%; object-fit: contain; }
.shot figcaption { margin-top: 14px; font-size: 0.97rem; color: var(--ink-soft); }
.shot figcaption strong { color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.94rem; color: var(--ink-soft); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 22px; height: 8px; border-radius: 4px; display: inline-block; }
.legend .loss { background: var(--loss); }
.legend .gain { background: var(--gain); }
.delta { width: 100%; border-collapse: collapse; font-size: 1rem; }
.delta caption { caption-side: top; text-align: left; color: var(--ink-soft); font-size: 0.95rem; padding-bottom: 12px; }
.delta th, .delta td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); text-align: right; }
.delta th[scope='row'], .delta thead th:first-child { text-align: left; font-weight: 420; }
.delta thead th { font-weight: 560; font-size: 0.9rem; color: var(--ink-soft); border-top: 0; }
.delta td.down { color: var(--ink); }
.delta td b { font-weight: 560; }
.delta .sign-down::before, .delta .sign-up::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 0.08em; }
.delta .sign-down::before { background: var(--loss); }
.delta .sign-up::before { background: var(--gain); }
.delta tfoot td { text-align: left; color: var(--ink-soft); font-size: 0.94rem; padding-top: 12px; }
.note { margin-top: 26px; color: var(--ink-soft); font-size: 1rem; max-width: 46em; }

/* Four numbers */
.sources { width: 100%; border-collapse: collapse; margin-top: clamp(32px, 4vw, 52px); }
.sources th, .sources td { text-align: left; vertical-align: top; padding: 18px 22px 18px 0; border-top: 1px solid var(--line); }
.sources thead th { font-weight: 560; font-size: 0.92rem; color: var(--ink-soft); border-top: 0; padding-top: 0; }
.sources tbody th { font-family: var(--display); font-weight: 600; font-size: 1.18rem; line-height: 1.3; width: 21%; }
.sources td { color: var(--ink-soft); font-size: 1rem; }
.sources td:first-of-type { color: var(--ink); }
.sources td cite { font-style: normal; }

/* Two-column text blocks (photos, ledger, plans) */
.pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(32px, 4vw, 52px); }
.ledger { background: var(--panel); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); }
.ledger h3 { margin-bottom: 12px; }
.ledger ul, .plain { margin: 0; padding: 0; list-style: none; }
.ledger li, .plain li { padding: 11px 0 11px 22px; border-top: 1px solid var(--line); position: relative; }
.ledger li::before, .plain li::before { content: ''; position: absolute; left: 0; top: 1.18em; width: 10px; height: 3px; border-radius: 2px; background: var(--tape); }
.ledger li:first-child, .plain li:first-child { border-top: 0; }
.ledger--out { background: transparent; border: 1.5px solid var(--line-strong); }
.ledger--out li::before { background: var(--ink-soft); }
.quote { border-left: 4px solid var(--tape); padding: 4px 0 4px 20px; font-family: var(--display); font-size: 1.32rem; line-height: 1.42; }
.closing { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.closing .lede { margin-top: 16px; max-width: 30em; }
.closing .twin-small { width: clamp(150px, 18vw, 230px); aspect-ratio: var(--a); }

/* Long-form pages (privacy, terms, support, guide, calculator) */
.page-head { padding-block: clamp(36px, 6vw, 84px) clamp(28px, 4vw, 48px); }
.page-head p { margin-top: 18px; max-width: 40em; color: var(--ink-soft); font-size: 1.16rem; }
.prose { max-width: 46em; padding-bottom: clamp(64px, 8vw, 110px); }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 2.2em; margin-bottom: 0.55em; }
.prose h3 { margin-top: 1.8em; margin-bottom: 0.4em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0.8em 0; }
.prose li + li { margin-top: 0.45em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.1em 0; font-size: 0.98rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-top: 1px solid var(--line); }
.prose thead th { font-weight: 560; color: var(--ink-soft); border-top: 0; font-size: 0.92rem; }
.prose .meta { color: var(--ink-soft); font-size: 1rem; }
.toc { margin: 0 0 1.6em; padding: 18px 22px; background: var(--panel); border-radius: var(--radius); }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2 14em; column-gap: 32px; }
.toc li { margin: 0.2em 0; break-inside: avoid; }
.callout { background: var(--panel); border-radius: var(--radius); padding: 18px 22px; margin: 1.2em 0; }

/* Guide */
.guide-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.site-list, .prose .site-list { list-style: none; margin: 0; padding: 0; }
.site-item { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 26px; padding: 26px 0; border-top: 1px solid var(--line); align-items: start; }
.site-item .crop { width: 168px; height: 168px; border-radius: 16px; background: var(--stage); overflow: hidden; }
.site-item .crop img { width: 100%; height: 100%; }
.site-item h3 { margin: 0 0 8px; }
.site-item h3 .n { color: var(--tape-text); font-family: var(--text); font-weight: 560; font-size: 1rem; margin-right: 10px; font-variant-numeric: tabular-nums; }
.site-item p { color: var(--ink-soft); }
.site-item p + p { margin-top: 0.4em; }

/* Calculator */
.calc { background: var(--panel); border-radius: 20px; padding: clamp(20px, 3.4vw, 40px); margin-bottom: clamp(40px, 5vw, 64px); max-width: 46em; }
.calc fieldset { border: 0; margin: 0 0 22px; padding: 0; }
.calc legend { font-weight: 560; margin-bottom: 10px; padding: 0; }
.seg { display: inline-flex; background: var(--sunken); border-radius: 12px; padding: 5px; gap: 4px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 10px 18px; border-radius: 9px; font-weight: 560; color: var(--ink-soft); }
.seg input:checked + span { background: var(--key); color: var(--on-key); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.field label { display: block; font-weight: 560; margin-bottom: 6px; }
.field .unit-row { display: flex; align-items: center; gap: 8px; }
.field input {
  width: 100%; min-height: 54px; padding: 0 14px; border-radius: 10px;
  border: 1.5px solid var(--line-strong); background: var(--ground); color: var(--ink);
  font: 420 1.3rem/1 var(--text); font-variant-numeric: tabular-nums;
}
.field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.field .u { color: var(--ink-soft); min-width: 1.8em; }
.field .hint { font-size: 0.92rem; color: var(--ink-soft); margin-top: 6px; }
.field .err { font-size: 0.94rem; color: #a4442f; margin-top: 6px; }
@media (prefers-color-scheme: dark) { .field .err { color: #f0937c; } }
.ft-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.result__value { font: 500 clamp(2.6rem, 2rem + 2.5vw, 3.6rem)/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }
.result__value.is-empty { color: var(--line-strong); }
.result__band { margin-top: 10px; font-weight: 560; }
.result__detail { margin-top: 6px; color: var(--ink-soft); }
.scale { position: relative; margin-top: 26px; height: 54px; }
.scale__bar { position: absolute; left: 0; right: 0; top: 10px; height: 12px; border-radius: 6px; overflow: hidden; display: flex; }
.scale__bar span { height: 100%; }
.scale__bar .b0 { background: var(--sunken); }
.scale__bar .b1 { background: color-mix(in srgb, var(--tape) 45%, var(--sunken)); }
.scale__bar .b2 { background: color-mix(in srgb, var(--gain) 45%, var(--sunken)); }
.scale__bar .b3 { background: color-mix(in srgb, var(--gain) 85%, var(--sunken)); }
.scale__ticks { position: absolute; left: 0; right: 0; top: 28px; font-size: 0.86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.scale__ticks span { position: absolute; transform: translateX(-50%); }
.scale__pin { position: absolute; top: 2px; width: 4px; height: 28px; margin-left: -2px; border-radius: 2px; background: var(--ink); transition: left 200ms ease; }
.scale__pin[hidden] { display: none; }

/* Footer */
.foot { background: var(--ground); border-top: 1px solid var(--line); padding-block: 56px 40px; font-size: 1rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot h2 { font: 560 1rem/1.3 var(--text); letter-spacing: 0; margin-bottom: 10px; color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 6px 0; }
.foot a { text-decoration: none; color: var(--ink-soft); }
.foot a:hover, .foot a[aria-current='page'] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tape); }
.foot p { color: var(--ink-soft); }
.foot .wordmark { display: inline-block; margin-bottom: 10px; color: var(--ink); }
.foot__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--ink-soft); font-size: 0.94rem; }

/* Narrow screens */
@media (max-width: 899px) {
  .measure, .change, .pair, .closing { grid-template-columns: minmax(0, 1fr); }
  .change .delta-wrap { order: 3; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid > :first-child { grid-column: 1 / -1; }
  .sources thead { display: none; }
  .sources, .sources tbody, .sources tr, .sources th, .sources td { display: block; width: auto; }
  .sources tr { padding: 18px 0; border-top: 1px solid var(--line); }
  .sources th, .sources td { border: 0; padding: 4px 0; }
  .sources td::before { content: attr(data-label); display: block; font-size: 0.86rem; font-weight: 560; color: var(--ink-soft); margin-top: 8px; }
  .closing .twin-small { display: none; }
}
@media (max-width: 819px) {
  .hero__grid {
    --fig-h: min(104vw, 470px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto var(--fig-h) auto;
  }
  .hero__title { grid-row: 1; align-self: start; padding-top: 10px; padding-bottom: 6px; }
  .hero__stage { grid-row: 2; grid-column: 1; }
  .hero__body { grid-row: 3; padding-top: 10px; }
  .twin { top: 0; right: auto; left: 50%; transform: translateX(-38%); }
  .top__bar { flex-wrap: wrap; row-gap: 4px; }
  .nav { order: 3; width: 100%; }
  .nav ul { gap: 2px 13px; }
  .nav a { font-size: 0.9rem; }
}
@media (max-width: 560px) {
  h1, h2, h3, .prose, .section__head p, .lede, td { -webkit-hyphens: auto; hyphens: auto; }
  .site-item { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .site-item .crop { width: 104px; height: 104px; border-radius: 12px; }
  .routines th { white-space: normal; }
  .guide-figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Weight trend: weigh-ins as quiet dots, the trend as the one jade line (palette validated with the dataviz
   checks: light #00806a and #948da3 on #ffffff, dark #1aab8b and #77708a on #29252f) */
.weight { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.weight .section__head p + p { margin-top: 14px; }
.quote--story { margin-top: 24px; font-size: 1.2rem; color: var(--ink); }
.wchart { margin: 0; background: var(--panel); border-radius: 18px; padding: 22px 22px 14px; --chart-trend: #00806a; --chart-dot: #948da3; }
@media (prefers-color-scheme: dark) { .wchart { --chart-trend: #1aab8b; --chart-dot: #77708a; } }
.wchart__title { font-weight: 560; font-size: 1rem; }
.wchart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 8px 0 18px; padding: 0; font-size: 0.92rem; color: var(--ink-soft); }
.wchart__legend li { display: inline-flex; align-items: center; gap: 8px; }
.k-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--chart-dot); }
.k-line { display: inline-block; width: 18px; height: 2px; border-radius: 1px; background: var(--chart-trend); }
.wchart__frame { position: relative; padding: 0 0 28px 50px; }
.wchart__plot { position: relative; height: clamp(200px, 25vw, 290px); touch-action: pan-y; border-radius: 4px; }
.wchart__plot:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }
.wchart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wchart svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.wchart .g { stroke: var(--line); stroke-width: 1; stroke-linecap: butt; }
.wchart .ring { stroke: var(--panel); stroke-width: 12; }
.wchart .dot { stroke: var(--chart-dot); stroke-width: 8; }
.wchart .trend { stroke: var(--chart-trend); stroke-width: 2; }
.wchart .end-ring { stroke: var(--panel); stroke-width: 14; }
.wchart .end { stroke: var(--chart-trend); stroke-width: 10; }
.wchart__end { position: absolute; left: 100%; margin-left: 14px; transform: translateY(-50%); font-size: 0.9rem; font-weight: 560; color: var(--ink); white-space: nowrap; }
@media (min-width: 700px) { .wchart__frame { padding-right: 112px; } .wchart__xaxis { right: 112px; } }
@media (max-width: 699px) { .wchart__end { display: none; } }
.wchart__yaxis { position: absolute; left: 0; top: 0; width: 42px; bottom: 28px; }
.wchart__y { position: absolute; right: 0; transform: translateY(-50%); font-size: 0.84rem; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wchart__xaxis { position: absolute; left: 50px; right: 0; bottom: 0; height: 22px; }
.wchart__x { position: absolute; top: 4px; transform: translateX(-50%); font-size: 0.84rem; color: var(--ink-soft); white-space: nowrap; }
.wchart__x.x-0 { transform: none; }
.wchart__hair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); pointer-events: none; }
.wchart__ring { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--ink); pointer-events: none; }
.wchart__tip { position: absolute; top: 0; z-index: 2; min-width: 150px; padding: 8px 12px; border-radius: 10px; background: var(--stage); color: var(--ink); border: 1px solid var(--line-strong); font-size: 0.9rem; line-height: 1.4; pointer-events: none; }
.wchart__day { color: var(--ink-soft); font-size: 0.84rem; margin-bottom: 4px; }
.wchart__row { display: flex; align-items: center; gap: 8px; }
.wchart__row strong { font-weight: 560; font-variant-numeric: tabular-nums; }
.wchart__row span { color: var(--ink-soft); }
.wchart__table { margin-top: 12px; font-size: 0.94rem; }
.wchart__table summary { cursor: pointer; color: var(--ink-soft); padding: 6px 0; }
.wchart__table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.wchart__table th, .wchart__table td { text-align: left; padding: 6px 12px 6px 0; border-top: 1px solid var(--line); }
.wchart__table thead th { font-weight: 560; color: var(--ink-soft); border-top: 0; }

/* Smaller pieces */
.lede-sm { margin-top: 18px; font-size: 1.16rem; color: var(--ink-soft); }
.after-quote { margin-top: 16px; }
.fig-note { margin-top: 14px; text-align: center; }
.wrap.pair { margin-top: 0; }
.prose--wide { max-width: 52em; }
.plinth--guide { margin: 0; }
.plinth--guide figcaption { margin-top: 12px; text-align: center; }
.callout .callout__h { margin: 0 0 8px; font-size: 1.45rem; }
.callout .cta { margin-top: 18px; }
.calc__note { margin-top: 18px; }
.field .label { display: block; font-weight: 560; margin-bottom: 6px; }
.lead-p { font-size: 1.2rem; }
.section--close { padding-block: clamp(56px, 7vw, 96px); }
.scale__bar span { flex: 1; }
.scale__ticks .t-04 { left: 25%; }
.scale__ticks .t-05 { left: 50%; }
.scale__ticks .t-06 { left: 75%; }
@media (max-width: 899px) {
  .weight { grid-template-columns: minmax(0, 1fr); }
}

/* generated by src/build.mjs from src/image-meta.json and the sample data */
.hero__grid { --hero-aspect: 0.5255; --hero-waist: 0.3551; --hero-band-h: 0.0142; --hero-tape-end: 40.3; }
.m-neck { left: 49.36%; top: 16.09%; }
.m-shoulders { left: 49.97%; top: 21.82%; }
.m-chest { left: 48.65%; top: 27.64%; }
.m-upperArmL { left: 70.58%; top: 26.87%; }
.m-upperArmR { left: 28.38%; top: 26.33%; }
.m-forearmL { left: 78.74%; top: 32.78%; }
.m-forearmR { left: 21.11%; top: 32.08%; }
.m-waist { left: 36.55%; top: 35.83%; }
.m-belly { left: 63.55%; top: 39.06%; }
.m-hips { left: 49.28%; top: 51.61%; }
.m-thighL { left: 58.44%; top: 54.67%; }
.m-thighR { left: 39.52%; top: 54.47%; }
.m-calfL { left: 63.18%; top: 76.03%; }
.m-calfR { left: 35.28%; top: 75.80%; }
.shot--compare { aspect-ratio: 0.5793; }
.shot--heat { aspect-ratio: 0.6684; }
.twin-small { aspect-ratio: 0.7039; }
.y-83 { top: 75.00%; }
.y-83-5 { top: 50.00%; }
.y-84 { top: 25.00%; }
.x-0 { left: 0.00%; }
.x-21 { left: 37.50%; }
.x-49 { left: 87.50%; }
.wchart__end { top: 55.50%; }