/* ============================================================
   test-a.css — Component layer / Phase 6 TEST A
   PROFILE A（STATIC PREMIUM） × MODE 1（EDITORIAL）
   ------------------------------------------------------------
   docs/06 §2.0 TD-3：Component は Semantic だけを参照する。
   本ファイルに Primitive（--p-*）と生の色値を書かない。

   視覚文法（TEST B と共有しない）
     ・紙の面と潮の面の2種だけ。面の切り替えで章を分ける
     ・区切りは罫線。箱・カード・影・角丸を使わない
     ・見出しは明朝。意味単位の span（.u）で改行位置を確定させる
     ・数字を図版として扱う（粒径・残量・採水日数）
     ・縦組みを1箇所だけ使う（ブランドステートメント）
     ・動きは出現のみ。主役演出を持たない

   アクセント（--color-accent）を使ってよい箇所
     1. 主CTAの面        .btn--primary
     2. フォーカスリング  :focus-visible
     3. 章番号の標識      .eyebrow::before / .chapter::before
     4. 結晶図の線        .crystal
     5. 残量ゲージの帯    .step__bar / .calendar__bar
   これ以外にアクセントを使わない。
   ============================================================ */

/* ---------- 0. reset（最小） ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, p, figure, figcaption, dl, dd, ol, ul { margin: 0; }

ol, ul { padding: 0; list-style: none; }

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

button { font: inherit; color: inherit; background: none; border: 0; }

summary::-webkit-details-marker { display: none; }


/* ---------- 1. base ---------- */

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-feature-settings: "palt" 1;
  line-break: strict;
}

/* 見出しの改行制御：意味単位を inline-block にして、単位の境界だけで折る。
   CSS の word-break へ依存しない（Phase 5 視覚NOTE 1）。 */
.u { display: inline-block; }

a { color: inherit; }

:focus-visible {
  outline: var(--border-strong) solid var(--color-focus);
  outline-offset: 3px;
}

.on-inverse :focus-visible { outline-color: var(--color-focus-inverse); }


/* ---------- 2. layout primitives ---------- */

.shell {
  width: 100%;
  max-width: calc(var(--layout-max) + var(--space-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.skip-link {
  position: absolute;
  left: var(--space-gutter);
  top: 0;
  z-index: var(--z-skip);
  transform: translateY(-140%);
  display: inline-block;
  padding: var(--space-inline) var(--space-element);
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  text-decoration: none;
  font-size: var(--text-caption);
}

.skip-link:focus { transform: translateY(0); }


/* ---------- 3. 検証サンプル注記（要約1行＋詳細は開閉） ---------- */

.sample {
  background-color: var(--color-surface-sunken);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  font-size: var(--text-caption);
}

.sample__sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em 0.9em;
  padding-block: 0.55rem;
  cursor: pointer;
  list-style: none;
  min-height: 2.75rem;
  align-content: center;
}

/* 注記は残すが、本体ブランドより前に出さない。罫は細く、色は控えめの本文色。
   コントラストは「muted body on paper」の実測ペアで担保する。 */
.sample__tag {
  flex: none;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  border: var(--border-hairline) solid var(--color-rule);
  color: var(--color-text-muted);
  padding: 0.1em 0.55em;
}

/* モバイルでは要約を独立した行へ落とす。ラベルと開閉語のあいだへ押し込むと
   「検証用／サンプルです。」のように文節の途中で折れる。 */
.sample__lead { flex: 1 1 100%; order: 2; min-width: 0; color: var(--color-text-muted); }

.sample__more {
  flex: none;
  margin-left: auto;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-label);
  font-size: var(--text-label);
  white-space: nowrap;
}

.sample__more::after { content: " +"; }
.sample__d[open] .sample__more::after { content: " −"; }

.sample__body {
  padding-bottom: var(--space-element);
  max-width: 56em;
  color: var(--color-text-muted);
  line-height: var(--leading-lead);
}


/* ---------- 4. masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--color-surface);
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-element);
  min-height: 3.25rem;
}

.mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75em;
  text-decoration: none;
  min-height: 2.75rem;
  align-content: center;
  flex-wrap: wrap;
}

.mark__latin {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.mark__ja {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding-inline: var(--space-inline);
  cursor: pointer;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  border-bottom: var(--border-strong) solid var(--color-rule-strong);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 1.05rem;
  height: var(--border-hairline);
  background-color: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--border-hairline);
  background-color: currentColor;
}

.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

.site-nav { display: none; }
.site-nav[data-open="true"] { display: block; }

.site-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: var(--color-surface-raised);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  box-shadow: var(--shadow-floating);
  max-height: calc(100vh - 3.25rem);
  overflow-y: auto;
}

.site-nav__list { display: flex; flex-direction: column; }

.site-nav__list a {
  display: block;
  padding: var(--space-inline) var(--space-gutter);
  min-height: 2.75rem;
  text-decoration: none;
  border-top: var(--border-hairline) solid var(--color-rule);
  letter-spacing: var(--tracking-label);
}

.site-nav__cta {
  padding: var(--space-element) var(--space-gutter) var(--space-row);
  border-top: var(--border-hairline) solid var(--color-rule);
}

/* JS 無効時：開閉ボタンを出さず、ナビを常時表示する（docs/07 §3.7）。 */
.no-js .nav-toggle { display: none; }
.no-js .masthead__inner { flex-wrap: wrap; }

.no-js .site-nav {
  display: block;
  position: static;
  flex: 1 0 100%;
  background: none;
  border-bottom: 0;
  box-shadow: none;
  max-height: none;
  overflow: visible;
  padding-bottom: var(--space-inline);
}

.no-js .site-nav__list { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-element); }
.no-js .site-nav__list a { padding-inline: 0; border-top: 0; }
.no-js .site-nav__cta { padding: var(--space-inline) 0 0; border-top: 0; }


/* ---------- 5. buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75em 2em;
  border-radius: var(--radius-control);
  font-size: var(--text-body);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  cursor: not-allowed;
}

/* 潮の面では、アクセントの藍が地の色に近くなり面が沈む。
   反転面用のアクセントへ入れ替える（実測ペア accent_on_dark × inverse_surface）。 */
.on-inverse .btn--primary {
  background-color: var(--color-accent-on-inverse);
  color: var(--color-inverse-surface);
}

.btn--quiet {
  border: var(--border-hairline) solid var(--color-rule-strong);
  color: var(--color-text);
}

.btn--quiet:hover { background-color: var(--color-rule-strong); color: var(--color-surface); }

.btn[aria-disabled="true"] { cursor: not-allowed; }

.cta-note {
  margin-top: var(--space-inline);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: 34em;
}


/* ---------- 6. typography helpers ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: var(--border-strong);
  background-color: var(--color-accent);
}

.chapter {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.chapter__idx {
  font-family: var(--font-numeric);
  font-size: var(--text-h3);
  letter-spacing: 0;
  color: var(--color-accent);
}

.on-inverse .chapter__idx { color: var(--color-accent-on-inverse); }

.chapter__title {
  margin-top: var(--space-element);
  font-size: var(--text-h2);
  max-width: 20em;
}

.chapter__lead {
  margin-top: var(--space-element);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  max-width: var(--layout-measure);
  color: var(--color-text-muted);
}

.on-inverse .chapter__lead { color: var(--color-inverse-muted); }

/* 長文は段落の間で息を入れる。モバイルでも段落境界が視覚的に分かる量を取る。 */
.prose { margin-top: var(--space-block); max-width: var(--layout-measure); }
.prose p + p { margin-top: var(--space-row); }

.footnote {
  margin-top: var(--space-element);
  font-size: var(--text-caption);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
  max-width: 46em;
}

.figure-cap {
  margin-top: var(--space-element);
  padding-top: var(--space-inline);
  border-top: var(--border-hairline) solid var(--color-rule);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: 40em;
}


/* ---------- 7. hero ---------- */

/* 下の余白は章の面（.band）が自分の上余白を持つため、ここでは重ねない。
   両方が --space-section を持つと、初期表示の直後に意味のない空白が二段できる。 */
.hero { padding-block: clamp(2.25rem, 1rem + 5vw, 4.5rem) clamp(1.75rem, 1rem + 2.5vw, 3rem); }

.hero__grid { display: grid; gap: var(--space-block); }

.hero__title {
  margin-top: var(--space-element);
  font-size: var(--text-h1);
}

.hero__lead {
  margin-top: var(--space-block);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  max-width: 28em;
}

.hero__cta { margin-top: var(--space-block); }

.hero__fig { align-self: start; }

.crystal {
  width: 100%;
  color: var(--color-accent);
}

.hero__cap {
  margin-top: var(--space-element);
  padding-top: var(--space-inline);
  border-top: var(--border-hairline) solid var(--color-rule);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: 30em;
}

/* 7.1 工程軸（図版が示した順序へ日数を与える。カードにしない） */

.hero__axis {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--border-hairline) solid var(--color-rule);
}

.hax {
  padding-top: var(--space-inline);
  padding-right: 0.5em;
  border-right: var(--border-hairline) solid var(--color-rule);
  display: grid;
  gap: 0.15em;
  align-content: start;
  min-width: 0;
}

.hax:last-child { border-right: 0; padding-right: 0; }

.hax__no {
  font-family: var(--font-numeric);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.hax__name {
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-heading);
}

.hax__term {
  font-family: var(--font-numeric);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 残量。工程が進むほど短くなる＝濃縮が進む。 */
.hax__bar {
  margin-top: 0.4em;
  display: block;
  height: 0.3rem;
  width: calc(var(--r) * 1%);
  min-width: 0.3rem;
  background-color: var(--color-accent);
}

.hero__meta {
  padding-top: var(--space-element);
  border-top: var(--border-strong) solid var(--color-rule-strong);
  display: grid;
  gap: var(--space-inline);
}

.hero__meta div { display: flex; gap: var(--space-element); align-items: baseline; font-size: var(--text-caption); }
.hero__meta dt { flex: none; width: 5.5em; letter-spacing: var(--tracking-label); color: var(--color-text-muted); }
.hero__meta dd { margin: 0; }


/* ---------- 8. band（章の面） ---------- */

.band {
  padding-block: var(--space-section);
  border-top: var(--border-hairline) solid var(--color-rule);
}

.band--sunken {
  background-color: var(--color-surface-sunken);
  border-top: 0;
}

.band--tide {
  background-color: var(--color-inverse-surface);
  color: var(--color-inverse-text);
  border-top: 0;
}


/* ---------- 9. statement（縦組みを1箇所だけ使う） ---------- */

.statement { display: grid; gap: var(--space-block); }

.statement__vertical {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: 1.8;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  border-left: var(--border-strong) solid var(--color-accent);
  padding-left: var(--space-element);
}

.statement__main { min-width: 0; }


/* ---------- 10. pillars（価値＝粒径と用途の対応表。3列カードにしない） ----------
   章の視覚文法：横に伸びる台帳の行。左に記号、右に数値。
   商品ライン（3列の貼り札）とも、体制（台帳）とも組み方を変える。 */

.pillars {
  margin-top: var(--space-block);
  display: grid;
  gap: var(--space-block);
}

.pillar {
  border-top: var(--border-strong) solid var(--color-rule-strong);
  padding-top: var(--space-element);
  min-width: 0;
}

.pillar__idx {
  font-family: var(--font-numeric);
  font-size: var(--text-caption);
  letter-spacing: 0.34em;
  color: var(--color-text-muted);
}

.pillar__label { margin-top: 0.15em; font-size: var(--text-h3); }

.pillar__lead {
  margin-top: var(--space-inline);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.pillar__body {
  margin-top: var(--space-element);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: var(--layout-measure);
}

.pillar__fact {
  margin-top: var(--space-element);
  padding-top: var(--space-inline);
  border-top: var(--border-hairline) solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.pillar__num {
  font-family: var(--font-numeric);
  font-size: var(--text-h2);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pillar__flabel {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}


/* ---------- 11. craft（原料・工程） ---------- */

.materials {
  margin-top: var(--space-block);
  display: grid;
  gap: var(--space-row);
  border-top: var(--border-hairline) solid var(--color-rule);
  padding-top: var(--space-element);
}

.materials li { min-width: 0; }

.materials__name {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.materials__v { display: flex; align-items: baseline; gap: 0.35em; margin-top: 0.1em; }

.materials__num {
  font-family: var(--font-numeric);
  font-size: var(--text-figure);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.materials__unit { font-size: var(--text-caption); letter-spacing: 0.1em; color: var(--color-text-muted); }

.materials__body {
  margin-top: var(--space-inline);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.steps { margin-top: var(--space-block); }

/* 工程は途切れない。番号の列に1本の縦罫を通し、5工程を1つの連続した
   時間の図として読ませる（各工程を独立した箱にしない）。 */
.step {
  --step-col: 2.5rem;
  position: relative;
  border-top: var(--border-hairline) solid var(--color-rule);
  padding-block: var(--space-row);
  display: grid;
  gap: 0 var(--space-element);
  grid-template-columns: var(--step-col) minmax(0, 1fr);
  min-width: 0;
}

/* 番号と本文のあいだの空きに縦罫を通す。工程の境目で切れない。 */
.step::before {
  content: "";
  position: absolute;
  left: calc(var(--step-col) + var(--space-element) / 2);
  top: 0;
  bottom: 0;
  width: var(--border-hairline);
  background-color: var(--color-rule);
}

.step:first-child::before { top: var(--space-row); }
.step:last-child::before { bottom: var(--space-row); }

.step:last-child { border-bottom: var(--border-hairline) solid var(--color-rule); }

/* 工程番号だけが1列目。見出し・本文・ゲージはすべて2列目へ置く。
   自動配置に任せると本文が1列目へ折り返し、極端に細い段になる。 */
.step__name,
.step__body,
.step__gauge { grid-column: 2; }

.step__no {
  font-family: var(--font-numeric);
  font-size: var(--text-caption);
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  padding-top: 0.4em;
}

.step__name {
  font-size: var(--text-h3);
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  flex-wrap: wrap;
}

.step__term {
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  border: var(--border-hairline) solid var(--color-rule);
  padding: 0.1em 0.6em;
}

.step__body {
  margin-top: var(--space-inline);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: var(--layout-measure);
}

/* 残量は「軌道」と「帯」の2層で描く。軌道が全長を示すため、工程をまたいで
   帯が短くなっていくことが、1本の連続した図として読める。 */
.step__gauge {
  margin-top: var(--space-element);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-element);
}

.step__track {
  display: block;
  height: 0.45rem;
  background-color: var(--color-rule);
}

.step__bar {
  display: block;
  height: 100%;
  width: calc(var(--r) * 1%);
  min-width: 0.45rem;
  background-color: var(--color-accent);
}

.step__ratio {
  flex: none;
  font-family: var(--font-numeric);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.step__pct { letter-spacing: 0; }


/* ---------- 12. origin（島。月別採水日数） ---------- */

.origin { display: grid; gap: var(--space-block); }

.calendar {
  display: grid;
  gap: 0.35rem;
  border-top: var(--border-hairline) solid var(--color-rule);
  padding-top: var(--space-element);
}

.calendar__i {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) 2.6em;
  align-items: center;
  gap: 0 0.6em;
  font-size: var(--text-caption);
  min-height: 1.9rem;
}

.calendar__m {
  order: -1;
  font-family: var(--font-numeric);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.calendar__m::after { content: "月"; font-family: var(--font-body); font-size: 0.82em; }

.calendar__bar {
  display: block;
  height: 0.55rem;
  width: calc(var(--d) / 26 * 100%);
  background-color: var(--color-accent);
}

.calendar__v {
  font-family: var(--font-numeric);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.calendar__note {
  grid-column: 2 / 4;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}


/* ---------- 13. lineup（貼り札の組版。粒径を実寸比で見せる） ----------
   章の視覚文法：商品名を中央に据えた「札」。囲み枠・角丸・影は持たず、
   上下の罫と中央揃えだけでラベルの体裁を作る。 */

.lineup { margin-top: var(--space-block); }

.product {
  border-top: var(--border-strong) solid var(--color-rule-strong);
  padding-block: var(--space-row);
  display: grid;
  gap: 0 var(--space-block);
  min-width: 0;
}

.product__label {
  text-align: center;
  padding-bottom: var(--space-element);
  border-bottom: var(--border-hairline) solid var(--color-rule-strong);
}

.product__idx {
  font-family: var(--font-numeric);
  font-size: var(--text-label);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--color-text-muted);
}

.product__grainfig {
  margin-top: var(--space-inline);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
}

.product__grain {
  display: block;
  width: calc(0.5rem + var(--g) * 1.35rem);
  height: calc(0.5rem + var(--g) * 1.35rem);
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

.product__name {
  margin-top: var(--space-inline);
  font-size: var(--text-h2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}

.product__reading {
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-indent: var(--tracking-label);
  color: var(--color-text-muted);
}

.product__spec {
  margin-top: var(--space-element);
  font-size: var(--text-caption);
}

.product__spec div {
  display: flex;
  gap: var(--space-element);
  padding-block: 0.5em;
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.product__spec dt { flex: none; width: 5em; letter-spacing: var(--tracking-label); color: var(--color-text-muted); }
.product__spec dd { margin: 0; }

.product__body {
  margin-top: var(--space-element);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: var(--layout-measure);
}


/* ---------- 14. trust（記録帳の情報設計） ----------
   章の視覚文法：台帳。項目が左、数値が右、行ごとに罫。
   ここだけは「読む」ではなく「照合する」ために組む。 */

.figures {
  margin-top: var(--space-block);
  display: grid;
  border-top: var(--border-strong) solid var(--color-rule-strong);
}

.figures li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 var(--space-element);
  padding-block: var(--space-element);
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.figures__v { display: flex; align-items: baseline; gap: 0.3em; order: 2; }

.figures__num {
  font-family: var(--font-numeric);
  font-size: var(--text-h2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.figures__unit { font-size: var(--text-caption); letter-spacing: 0.08em; color: var(--color-text-muted); }

.figures__label {
  order: 1;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  min-width: 0;
}

.rules { margin-top: var(--space-block); border-top: var(--border-hairline) solid var(--color-rule); }

.rules li {
  padding-block: var(--space-element);
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.rules h3 { font-size: var(--text-body); }
.rules p { margin-top: 0.3em; font-size: var(--text-caption); color: var(--color-text-muted); }


/* ---------- 15. contact（潮の面） ---------- */

.contact { display: grid; gap: var(--space-block); }

.contact__vp {
  margin-top: var(--space-block);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-lead);
  letter-spacing: var(--tracking-heading);
  max-width: 24em;
}

.contact .cta-note { color: var(--color-inverse-muted); }

.contact__side { min-width: 0; }

.terms {
  padding-top: var(--space-element);
  border-top: var(--border-strong) solid var(--color-accent-on-inverse);
  display: grid;
  gap: var(--space-inline);
  font-size: var(--text-caption);
  color: var(--color-inverse-text);
}

.terms li { display: flex; gap: 0.7em; }
.terms li::before { content: "—"; flex: none; color: var(--color-inverse-muted); }

.contact__scope {
  margin-top: var(--space-block);
  font-size: var(--text-caption);
  line-height: var(--leading-lead);
  color: var(--color-inverse-muted);
  border-top: var(--border-hairline) solid var(--color-inverse-rule);
  padding-top: var(--space-element);
  max-width: 34em;
}


/* ---------- 16. colophon ---------- */

.colophon {
  padding-block: var(--space-block);
  border-top: var(--border-hairline) solid var(--color-rule);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.colophon__brand {
  display: flex;
  align-items: baseline;
  gap: 1em;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--color-text);
}

.colophon__latin {
  font-size: var(--text-label);
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
}

.colophon__facts { margin-top: var(--space-element); display: grid; gap: var(--space-inline); }
.colophon__facts div { display: flex; gap: var(--space-element); }
.colophon__facts dt { flex: none; width: 6em; letter-spacing: var(--tracking-label); }
.colophon__facts dd { margin: 0; }

.legal {
  margin-top: var(--space-block);
  padding-top: var(--space-element);
  border-top: var(--border-hairline) solid var(--color-rule);
  display: grid;
  gap: var(--space-inline);
  max-width: 62em;
}

.legal li { display: flex; gap: 0.6em; }
.legal li::before { content: "※"; flex: none; }

.colophon__copy {
  margin-top: var(--space-block);
  padding-top: var(--space-element);
  border-top: var(--border-hairline) solid var(--color-rule);
}


/* ============================================================
   17. RESPONSIVE — モバイルファースト（docs/06 §3.4）
   3段（mobile / tablet / desktop）。4段上限を超えない。
   ============================================================ */

@media (min-width: 48rem) {

  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    column-gap: var(--space-block);
    row-gap: var(--space-block);
  }

  .hero__text { grid-column: 1; grid-row: 1; }
  .hero__fig { grid-column: 2; grid-row: 1; padding-top: 0.5rem; }
  .hero__axis { grid-column: 1 / -1; grid-row: 2; }
  .hero__meta { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-element); }
  .hero__meta div { display: block; }
  .hero__meta dt { width: auto; }
  .hero__meta dd { margin-top: 0.35em; }

  .sample__lead { flex: 1 1 12em; order: 0; }

  .hax { padding-right: var(--space-element); }
  .hax__name { font-size: var(--text-body); }
  .hax__bar { margin-top: 0.7em; }

  .statement { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--space-block); }

  .statement__vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-left: 0;
    border-right: var(--border-strong) solid var(--color-accent);
    padding-left: 0;
    padding-right: var(--space-element);
    max-height: 22em;
  }

  /* 価値は台帳の行として組む（記号・本文・数値の3帯）。
     商品の3列とも、原料の3列とも別の骨格にする。 */
  .pillars { gap: var(--space-row); }

  .pillar {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 16rem);
    column-gap: var(--space-block);
    align-items: start;
  }

  .pillar__idx { grid-column: 1; grid-row: 1 / span 4; padding-top: 0.4em; }
  .pillar__label { grid-column: 2; }
  .pillar__lead { grid-column: 2; }
  .pillar__body { grid-column: 2; }

  .pillar__fact {
    grid-column: 3;
    grid-row: 1 / span 4;
    margin-top: 0;
    padding-top: 0.35em;
    border-top: 0;
    align-self: start;
  }

  .materials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block); }

  .step { --step-col: 3.5rem; }

  .origin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-block); align-items: start; }

  /* タブレット以上：月別採水日数を柱状グラフへ組み替える */
  .calendar {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 0 0.3rem;
    padding-top: var(--space-block);
  }

  .calendar__i {
    display: grid;
    grid-template-rows: auto 9rem auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    justify-items: center;
    gap: 0.35em 0;
    min-height: 0;
    text-align: center;
  }

  .calendar__bar { width: 100%; height: calc(var(--d) / 26 * 9rem); align-self: end; }
  .calendar__v { order: -1; text-align: center; font-size: var(--text-label); }
  .calendar__m { order: 3; font-size: var(--text-label); }
  .calendar__note { display: none; }

  .lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block); }
  .product { border-top-width: var(--border-strong); }

  /* 台帳のまま横に伸ばす。3列カードへ戻さない。 */
  .figures li { grid-template-columns: minmax(0, 1fr) 12rem; }
  .figures__v { justify-content: flex-end; }

  .rules li { display: grid; grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--space-block); align-items: baseline; }
  .rules p { margin-top: 0; }

  .contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--space-block); align-items: start; }

  .colophon__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-inline) var(--space-block); }
}

@media (min-width: 64rem) {

  .masthead__inner { min-height: 4.25rem; }

  .nav-toggle { display: none; }

  .site-nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  .site-nav__inner { display: flex; align-items: center; gap: var(--space-block); }
  .site-nav__list { flex-direction: row; gap: var(--space-element); }

  .site-nav__list a {
    padding: 0.85rem 0;
    border-top: 0;
    border-bottom: var(--border-strong) solid transparent;
    font-size: var(--text-caption);
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .site-nav__list a:hover { border-bottom-color: var(--color-accent); }
  .site-nav__cta { padding: 0; border-top: 0; }

  /* 章の標識を版面の外へ出し、左右非対称の版面をつくる。
     縦組み・図版で既に非対称になっている章（statement / origin / contact）へは掛けない。 */
  .chapters {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--space-block);
    align-items: start;
  }

  .chapters > * { grid-column: 2; }

  .chapters > .chapter {
    grid-column: 1;
    grid-row: 1 / span 30;
    align-self: start;
    display: block;
    padding-top: 0.35em;
    border-top: var(--border-strong) solid var(--color-rule-strong);
  }

  .chapters > .chapter .chapter__idx { display: block; }
  .chapters > .chapter .chapter__label { display: block; margin-top: 0.35em; }
  .chapters > .chapter__title { margin-top: 0; }

  .statement { grid-template-columns: auto minmax(0, 1fr); }
  .statement__vertical { max-height: 26em; }

  /* 図版は文章と工程軸の2行にまたがる。左の段が図版より先に終わって
     大きな空きが残る状態を、版面の構造そのもので解消する。 */
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .hero__text { grid-column: 1; grid-row: 1; }
  .hero__fig { grid-column: 2; grid-row: 1 / span 2; padding-top: 0.25rem; }
  .hero__axis { grid-column: 1; grid-row: 2; }
  .hero__meta { grid-column: 1 / -1; grid-row: 3; }
  .hero__title { max-width: 12em; }
  .hero__lead { margin-top: var(--space-element); }

  .step { --step-col: 4.5rem; }
  .step__gauge { max-width: 34rem; }

  .contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); }

  .colophon__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .colophon__facts div { display: block; }
  .colophon__facts dt { width: auto; }
  .colophon__facts dd { margin-top: 0.3em; }
}


/* ============================================================
   18. MOTION（docs/07 §3.2・§3.6）
   出現1種のみ。主役演出を持たない。
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  .js .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition: opacity var(--duration-reveal) var(--ease-standard),
                transform var(--duration-reveal) var(--ease-standard);
  }

  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* reduced-motion 時：情報は最初から全表示。フォーカス表示は残す（M-6） */
@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}