/* Conwalk lab. 公式サイト
   構造: 測量図・フィールドノートの視覚文法／統合ジャーニー／特大明朝＋表紙の暗色セクション
   配色: 野帳システム（紙・墨・信号緑・表紙深緑・箔金。ダークは見開き反転） */

:root {
  color-scheme: light dark;
  --paper: #ecebe1;
  --paper-deep: #dcdbcf;
  --ink: #1b1d19;
  --ink-soft: #5e625a;
  --line: rgba(27, 29, 25, 0.18);
  --line-soft: rgba(27, 29, 25, 0.08);
  /* 信号緑: 情報を運ぶ小要素用（中明度・紙上4.8:1）。深緑は面（表紙）専用 */
  --field: #2a7350;
  --cover: #143026;
  --foil: #b6975a;
  --hover-wash: rgba(221, 216, 203, 0.4);
  --paper-on-ink: rgba(236, 235, 225, 0.9);
  --paper-on-ink-soft: rgba(236, 235, 225, 0.74);
  --max: 1540px;
  --gutter: clamp(22px, 4.2vw, 72px);
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Arial, sans-serif;
  --serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

/* 内容がビューポートより短いページでもフッターを最下部へ（2026-07-19 A2） */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.015em;
  overflow-x: hidden;
}

.nowrap {
  white-space: nowrap;
}

a {
  color: inherit;
  text-decoration: none;
}

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

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

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

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

.paper-grid {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), var(--line-soft) 1px),
    linear-gradient(to bottom, transparent calc(100% - 1px), rgba(27, 29, 25, 0.035) 1px);
  background-size: 8.333333vw 40px;
  mask-image: linear-gradient(to bottom, black 0 84%, transparent 100%);
}

/* 座標リードアウト（2026-07-18 レビュー後決定: 全画面常駐をやめジャーニー内限定に。
   座標値も画面座標でなく測点タグと同じ 1000×600 のSVG座標系。
   紙色の地を敷く（合成モードは面によって沈む・飛ぶため使わない） */
.field-readout {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 12px;
  padding: 3px 6px;
  background: var(--paper);
  font: 9px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.field-readout.is-active {
  opacity: 1;
}

/* ポインタ精度のない環境（タッチ）では意味を持たないため出さない */
@media (hover: none), (pointer: coarse) {
  .field-readout {
    display: none;
  }
}

/* ── ヘッダー ─────────────────────────────── */

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  width: 100%;
  padding: 30px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.site-header--sub {
  position: relative;
  background: var(--paper);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  justify-self: start;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.wordmark__con {
  color: var(--field);
}

/* 橋は Con と walk を接続する構造として静止させる
   （呼吸アニメーションは測量・野帳上の機能を持たないため廃止 2026-07-18） */
.wordmark__bridge {
  width: 22px;
  height: 1px;
  margin: 0 5px 4px;
  background: currentColor;
}

.header-note {
  margin: 0;
  text-align: center;
  font: 9px/1.45 var(--mono);
  letter-spacing: 0.14em;
}

.site-header nav {
  display: flex;
  justify-self: end;
  align-items: baseline;
  gap: 28px;
}

/* mono二層化（2026-07-18 レビュー後決定）: 計測ラベル=8〜10px・非操作、
   機能リンク=12〜13px・操作面積つき。書体は野帳の道具体系として mono で統一 */
.site-header nav a {
  position: relative;
  padding: 12px 2px;
  font: 12px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── ヒーロー ─────────────────────────────── */

/* IA v2 調整（2026-07-19）: ヒーローは測量マークとタグラインの表紙。
   地形線・歩行点は撤去し、曲線の図面はジャーニー1枚に絞る。
   86svh に抑え、次の図面の縁を覗かせてスクロールを誘う */
.hero {
  position: relative;
  min-height: 86vh;
  min-height: 86svh;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero__index {
  position: absolute;
  z-index: 2;
  top: 150px;
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  font: 9px/1.5 var(--mono);
  letter-spacing: 0.14em;
}

.hero__copy {
  position: relative;
  z-index: 4;
  width: min(84vw, 1220px);
  margin-left: var(--gutter);
  padding-top: clamp(230px, 30vh, 330px);
}

.eyebrow {
  margin: 0 0 24px;
  font: 10px/1.2 var(--mono);
  letter-spacing: 0.17em;
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(56px, 7.6vw, 120px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero h1 em {
  color: var(--field);
  font-style: normal;
}

.hero h1 .line {
  display: block;
  white-space: nowrap;
}

.hero h1 .line--indent {
  margin-left: 0.52em;
}

/* 測量モチーフ（決定 2026-07-18: 漢字ウォーターマークの置換） */
.hero__marks {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.hero__marks > * {
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}

.mark-cross {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 28px;
  height: 28px;
}

.mark-cross::before,
.mark-cross::after {
  content: "";
  position: absolute;
  background: var(--field);
  opacity: 0.55;
}

.mark-cross::before {
  top: 13px;
  left: 0;
  width: 28px;
  height: 1px;
}

.mark-cross::after {
  top: 0;
  left: 13px;
  width: 1px;
  height: 28px;
}

.mark-ring {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  opacity: 0.5;
}

.js .journey__path:not(.is-ready) {
  opacity: 0;
}

/* 道標（scroll-cue）は廃止（2026-07-20 オーナー決定）:
   「下に続く」はヒーロー 86svh が覗かせる次の図面の縁が既に伝えており、
   跳び先はナビと同一。横棒は指し先のない偽の引出線だった */

/* ── 統合ジャーニー（決定 2026-07-18: 屋号の文法に従う二拍構成）──
   語彙は context（名詞）と connect / walk（動詞）のみ。
   無言の測点＝文脈が線で接続され、その線を歩行点が歩く。
   注記はタグラインの半身2つだけ。レール・OBSERVE・観測語は廃止 */

.journey {
  position: relative;
  height: 260vh;
  height: 260svh;
  border-bottom: 1px solid var(--line);
}

.journey__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 0 var(--gutter);
  overflow: hidden;
}

.journey__field {
  position: relative;
  height: 100%;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  overflow: hidden;
}

/* 超ワイド対応（2026-07-18 レビュー後決定）: 方眼＝紙の地は全幅のまま、
   記入された図（経路・測点・注記・歩行点）だけを max 内へ。境界の罫線や面は見せない */
.journey__plot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: var(--max);
  margin-inline: auto;
}

.journey__plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.journey__path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.75;
}

/* 文脈の測点: 散布位置(--sx/--sy)から線上の位置(--px/--py)へ。接続されると朱が入る */
.jnode {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  background: var(--paper);
}

/* 朱ならぬ野帳緑は、線が到達した点から順に入る（.is-linked） */
.jnode i {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--field);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--field);
  opacity: 0;
  transition: opacity 320ms ease;
}

.jnode.is-linked i {
  opacity: 1;
}

/* 座標タグは名を持たない測点（終端＝次の文脈）だけに残す。
   2026-07-20 オーナー指摘: 静止した訪問者に何も伝わらない・不可視のリンクが
   タップ可能になるため、「無名→命名」の演出を廃止し領域名は常時表示。
   接続の物語は線の描画と測点の緑化（.is-linked）が引き続き担う */
.jnode em {
  position: absolute;
  left: 16px;
  top: -2px;
  font: 8px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 320ms ease;
}

.jnode:nth-of-type(-n+4) em {
  display: none;
}

.jnode.is-linked em {
  opacity: 0;
}

/* 領域ラベル＝各領域ページへのリンク（IA v2・2026-07-19）。常時表示（2026-07-20） */
.jnode a {
  position: absolute;
  left: 18px;
  top: -9px;
  padding: 4px 6px;
  margin: -4px -6px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  text-shadow: 0 0 3px var(--paper), 0 0 8px var(--paper), 0 0 14px var(--paper);
  transition: color 200ms ease;
}

/* ラベルは線の局所形状から逃がす: 山頂は上、谷底は下、棚は右下 */
.jnode:nth-of-type(2) a {
  left: -10px;
  top: -38px;
}

.jnode:nth-of-type(3) a {
  left: -8px;
  top: 18px;
}

.jnode:nth-of-type(4) a {
  left: 8px;
  top: 16px;
}

.jnode a:hover {
  color: var(--field);
}

.jnode a:focus-visible {
  outline: 1px solid var(--field);
  outline-offset: 2px;
}

/* EN の第4ノード（Community）はラベルが長く、狭幅では谷のポケット幅を超えて
   どこに置いても線と交差する（2026-07-20 実測: 320px はポケット68px vs ラベル109px）。
   ①EN の領域ラベルを14pxに縮小（4つ同サイズで階級の不整合を避ける）
   ②Community は右余白アンカー（プロット右端−6px に右揃え。jnode 基準の固定 px と違い
     全幅で成立する: 右辺 = jnode右 − right = 100vw − 28px）で上昇線の右ポケットへ（2026-07-19 A4 の改訂） */
@media (max-width: 480px) {
  html[lang="en"] .jnode a {
    font-size: 14px;
  }

  html[lang="en"] .jnode:nth-of-type(4) a {
    left: auto;
    right: calc(18px - 28vw);
    top: 16px;
  }
}

/* 線に拾われない迷い点 */
.jstray {
  opacity: 0.6;
}

/* 線の外の実在点 EXIPRA（2026-07-19）: 4領域の線に乗らないが公開済みの点。
   ラベルは計測文法（mono）——線上の領域名（明朝）と区別する */
.jstray-link {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin: -8px;
  font: 10px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  opacity: 0.85;
  transition: color 200ms ease, opacity 200ms ease, font-size 300ms ease;
}

/* 接続完了後（領域名が出た後）は座標階級から機能リンク階級へ上がる
   （mono 12〜13px。明朝の領域名との区別は書体で維持。2026-07-19 指摘対応） */
.journey__plot.is-connected .jstray-link {
  font-size: 13px;
  color: var(--ink);
  opacity: 1;
}

.jstray-link .mark-cross {
  position: static;
  width: 18px;
  height: 18px;
}

.jstray-link .mark-cross::before {
  top: 8.5px;
  left: 0;
  width: 18px;
}

.jstray-link .mark-cross::after {
  top: 0;
  left: 8.5px;
  height: 18px;
}

.jstray-link:hover,
.jstray-link:focus-visible {
  color: var(--field);
  opacity: 1;
}

.jstray-link:focus-visible {
  outline: 1px solid var(--field);
  outline-offset: 2px;
}

/* 注記: タグラインの半身が、動きの起きた場所に捺される */
.jcap {
  position: absolute;
  padding: 4px 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  font: 9px/1 var(--mono);
  letter-spacing: 0.14em;
  opacity: 0;
}

/* 注記は線が入らない上帯（y<15%）に置く */
.jcap--connect { left: 21%; top: 8%; }
.jcap--walk { right: 3.5%; top: 7%; }

.journey__walker {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--field);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--field);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.journey .walk-grid {
  opacity: 0;
}

/* JS無効・外部JS失敗時は「完成状態」を静的表示する（歩行点も終点に置く） */
html:not(.js) .jnode { left: var(--px); top: var(--py); }
html:not(.js) .jnode i { opacity: 1; }
html:not(.js) .jnode em { opacity: 0; }
html:not(.js) .jcap { opacity: 1; }
html:not(.js) .journey .walk-grid { opacity: 1; }
html:not(.js) .jstray { opacity: 0.25; }
html:not(.js) .journey__walker { opacity: 1; left: 90%; top: 20%; }
html:not(.js) .jstray-link { font-size: 13px; color: var(--ink); opacity: 1; }

.walk-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.walk-grid span {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* ── 黒セクション ─────────────────────────── */

/* 野帳の表紙: 深緑の面に箔押しの題字 */
.thesis {
  position: relative;
  min-height: 95vh;
  min-height: 95svh;
  padding: clamp(150px, 20vh, 240px) var(--gutter) 120px calc(var(--gutter) + 8.333vw);
  color: var(--paper);
  background: var(--cover);
  overflow: hidden;
}

.thesis::after {
  content: "";
  position: absolute;
  right: -10vw;
  bottom: -35vw;
  width: 72vw;
  aspect-ratio: 1;
  border: 1px solid rgba(236, 235, 225, 0.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 7vw rgba(20, 48, 38, 1),
    0 0 0 calc(7vw + 1px) rgba(236, 235, 225, 0.12),
    0 0 0 14vw rgba(20, 48, 38, 1),
    0 0 0 calc(14vw + 1px) rgba(236, 235, 225, 0.08);
}

/* 目盛の数字は廃止（2026-07-20 オーナー決定: 何も測っていない数字は置かない。
   数字を持つ計器は実参照を持つものだけ＝測点座標・EXIPRA座標・リードアウト）。
   表紙上端の印刷罫だけを残す */
.thesis__measure {
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  border-top: 1px solid rgba(236, 235, 225, 0.28);
}

.thesis h2 {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 70px 0;
  font-family: var(--serif);
  font-size: clamp(45px, 7vw, 112px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.07em;
}

/* 表紙上の強調は箔金（野帳の箔押し） */
.thesis h2 em {
  color: var(--foil);
  font-style: normal;
}

/* コントラスト修正: 本文の明度を引き上げ */
/* 改行は HTML 側の語句単位 nowrap でのみ許可し、行の配分は balance で均す
   （2026-07-20。非対応ブラウザでも語句単位の折返しは nowrap が保証する） */
.thesis__body {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin-left: 38vw;
  color: var(--paper-on-ink);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 2.1;
  text-wrap: balance;
}

.thesis__meta {
  position: relative;
  z-index: 2;
  margin: 30px 0 0 38vw;
  color: var(--paper-on-ink-soft);
  font: 10px/1 var(--mono);
  letter-spacing: 0.16em;
}

/* ── 台帳部品（領域ページのプロダクト一覧） ── */

.field-ledger {
  max-width: 880px;
}

.ledger-row {
  border-top: 1px solid var(--line);
  padding: 26px 8px 28px;
  transition: background 250ms ease;
}

.ledger-row:last-child {
  border-bottom: 1px solid var(--line);
}

.ledger-row:hover {
  background: var(--hover-wash);
}

.ledger-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ledger-row__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ledger-row__name .yomi {
  margin-left: 0.6em;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0.18em;
}

.ledger-row__tags {
  display: flex;
  gap: 7px;
  margin: 8px 0 0;
}

.chip {
  padding: 1px 9px;
  border: 1px solid var(--ink-soft);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.chip-plain {
  border-color: var(--line);
  color: var(--ink-soft);
}

.ledger-row__desc {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2;
}

.ledger-row__link {
  margin: 14px 0 0;
  font: 12px/1 var(--mono);
  letter-spacing: 0.05em;
}

.ledger-row__link a {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.ledger-row__link a + a {
  margin-left: 22px;
}

.ledger-row__link a:hover {
  color: var(--field);
  border-color: var(--field);
}

/* 印判（A案から移植・回転なし） */
.stamp {
  flex-shrink: 0;
  padding: 2px 9px;
  border: 1.5px solid var(--field);
  border-radius: 3px;
  color: var(--field);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  white-space: nowrap;
}

/* 全体opacityは文字コントラストを道連れにするため使わない（枠だけ淡く）。
   ink-soft 素のままで紙上 5.2:1（実測 2026-07-18） */
.stamp--quiet {
  border-color: var(--line);
  color: var(--ink-soft);
}

/* 公開間近（状態語彙は仮）: 枠は信号緑の破線、文字は墨soft */
.stamp--soon {
  border-style: dashed;
  border-width: 1px;
  border-color: var(--field);
  color: var(--ink-soft);
}

/* ── Contact ─────────────────────────────── */

.contact {
  position: relative;
  min-height: 62vh;
  min-height: 62svh;
  padding: clamp(110px, 16vh, 180px) var(--gutter) 90px;
  overflow: hidden;
}

.contact__line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 32%;
  border-top: 1px solid var(--line);
}

.contact__line::before,
.contact__line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.contact__line::before { left: 24%; }
.contact__line::after { right: 24%; }

.contact__line span {
  position: absolute;
  top: -7px;
  left: 24%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--field);
  border: 4px solid var(--paper);
  box-shadow: 0 0 0 1px var(--field);
  border-radius: 50%;
}

.contact .contact__label {
  margin: 0 0 46px 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.contact__mail {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(930px, 100%);
  margin-left: 18vw;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: clamp(16px, 2.1vw, 32px);
  letter-spacing: -0.03em;
  transition: color 200ms ease, padding 200ms ease;
}

.contact__mail:hover,
.contact__mail:focus-visible {
  padding-right: 12px;
  padding-left: 12px;
  color: var(--field);
}

/* ── フッター ─────────────────────────────── */

.site-footer {
  margin-top: auto;
  padding: 24px var(--gutter) 60px;
  color: var(--paper);
  background: var(--cover);
}

.site-footer__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font: 10px/1.4 var(--mono);
  letter-spacing: 0.1em;
}

.site-footer__row p {
  margin: 0;
}

.site-footer__row p:nth-child(2) { text-align: center; }
.site-footer__row p:nth-child(3) { text-align: right; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(236, 235, 225, 0.24);
  font: 12px/1.4 var(--mono);
  letter-spacing: 0.06em;
}

.site-footer__links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--paper-on-ink);
}

.site-footer__links a:hover {
  color: var(--foil);
}

/* ── 下層ページ共通（A案の抑制部品） ───────── */

.subpage {
  max-width: 880px;
  min-height: 62vh;
  min-height: 62svh;
  margin: 0 auto;
  padding: clamp(60px, 9vh, 110px) var(--gutter) clamp(80px, 10vh, 120px);
}

.subpage .eyebrow {
  color: var(--ink-soft);
}

/* 機能ページの見出しは主張しない（トップの「記録」と同じ規律） */
.subpage h1 {
  margin: 0 0 clamp(32px, 4vh, 48px);
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

/* 領域ページの一行（開業届文言ベース・仮置き） */
.field-lead {
  max-width: 34em;
  margin: 0 0 clamp(36px, 5vh, 56px);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2;
}

/* hairline罫の定義表 */
.fact-table {
  margin: 0;
}

.fact-table .row {
  display: flex;
  border-top: 1px solid var(--line);
  padding: 13px 6px;
  font-size: 14px;
}

.fact-table .row:last-child {
  border-bottom: 1px solid var(--line);
}

/* dt は最長の項目名（返品・キャンセル）が折れない幅を取る（2026-07-19 A3） */
.fact-table dt {
  flex-shrink: 0;
  width: 10em;
  padding-top: 2px;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.fact-table dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fact-table a {
  border-bottom: 1px solid var(--ink);
}

.fact-table a:hover {
  color: var(--field);
  border-color: var(--field);
}

.subpage .stub-note {
  max-width: 34em;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2;
}

/* 法定ページ本文（草案） */
.legal-body {
  margin-top: 20px;
}

.legal-body h2 {
  margin: 36px 0 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.legal-body p {
  max-width: 40em;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2;
}

.subpage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 44px;
  font: 12px/1 var(--mono);
  letter-spacing: 0.06em;
}

.subpage-links a {
  display: inline-block;
  padding: 8px 0;
}

.subpage-links a:hover {
  color: var(--field);
}

/* ── 英語版用の上書き（/en/ 作成時に html lang="en" で適用） ──
   和文用の詰め字間はラテン文字には過剰なため、見出しのみ緩める */

html[lang="en"] .hero h1,
html[lang="en"] .thesis h2,
html[lang="en"] .subpage h1 {
  letter-spacing: -0.03em;
}

/* ── 出現アニメーション ───────────────────── */

/* reveal は限定使用（ヒーローのタグライン・Thesis h2。2026-07-18 レビュー後決定、
   IA v2 で Record 見出しは対象から消滅）。移動量も短い一回限りに抑える */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── レスポンシブ ─────────────────────────── */

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr 1fr;
    padding-top: 22px;
  }

  .header-note { display: none; }

  .site-header nav {
    gap: 14px;
  }

  .hero__copy {
    width: calc(100% - (2 * var(--gutter)));
    padding-top: 230px;
  }

  .hero h1 {
    font-size: clamp(40px, 7.5vw, 64px);
  }

  .hero h1 .line--indent { margin-left: 0.18em; }

  .journey__field {
    border-right: 0;
  }

  .thesis {
    padding-left: var(--gutter);
  }

  .thesis__body {
    margin-left: 16vw;
  }

  .thesis__meta {
    margin-left: 16vw;
  }

  .contact__mail { margin-left: 0; }
}

@media (max-width: 600px) {
  .paper-grid {
    background-size: 20vw 32px;
  }

  /* ナビは語中で折らず、入り切らない幅ではナビごと次の行へ回す（2026-07-19 A1） */
  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 16px;
  }

  .site-header nav {
    margin-left: auto;
    gap: 14px;
  }

  .hero {
    min-height: 86vh;
    min-height: 86svh;
  }

  /* ナビが2行に折り返す幅ではヘッダー下端が 120px に達するため、
     罫線と重ならない位置へ下げる（2026-07-20 指摘: 折返しはフォント計測次第で
     iOS Safari は 430pt でも起きる。幅でなく余白で回避する） */
  .hero__index {
    top: 132px;
  }

  .hero__copy {
    padding-top: clamp(170px, 26vh, 250px);
    padding-top: clamp(170px, 26svh, 250px);
  }

  .hero h1 {
    font-size: clamp(26px, 9vw, 36px);
    line-height: 1.2;
  }

  .hero h1 .line--indent {
    margin-top: 4px;
    margin-left: 0.3em;
  }

  .mark-cross { width: 20px; height: 20px; }
  .mark-cross::before { top: 9px; width: 20px; }
  .mark-cross::after { left: 9px; height: 20px; }

  .journey {
    height: 240vh;
    height: 240svh;
  }

  .jnode em {
    display: none;
  }

  /* 横圧縮でラベル文字列が右へ伸び、下降する線の帯（y≈180 は x≈385/845 で交差）に
     届いて線と重なるため、測点（X 550 · Y 180）は動かさずテキストだけ上へ逃がす
     （A4 の Community 退避と同じ「点は保持・ラベルを逃がす」対処。2026-07-20 指摘） */
  .jstray-link span {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 6px;
  }

  .jcap {
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  .thesis {
    padding-top: 150px;
  }

  .thesis h2 {
    margin-top: 58px;
    font-size: 48px;
  }

  .thesis__body {
    width: 91%;
    margin-top: 70px;
    margin-left: 9%;
    font-size: 14px;
  }

  .ledger-row__name {
    font-size: 20px;
  }

  .contact {
    min-height: 460px;
    padding-top: 120px;
  }

  .contact__mail {
    font-size: 14px;
  }

  .site-footer__row {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }

  .site-footer__row p:nth-child(2) {
    grid-row: 2;
    grid-column: 1 / -1;
    text-align: left;
  }

  .site-footer__links {
    flex-direction: column;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .journey {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .journey__path {
    stroke-dashoffset: 0;
  }
}

/* ── ダークモード（A-darkトークン・docs/colors.html 参照）──
   見開きの反転: ライト=紙が地・表紙が差し込み ⇄ ダーク=表紙が地・紙が差し込み。
   変数は役割で定義してあるため、再定義が全部品に波及する。
   ※このブロックは source order で勝つ必要があるため必ずファイル末尾に置く */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10201a;
    --paper-deep: #182b22;
    --ink: #e7e6db;
    --ink-soft: #99a296;
    --line: rgba(231, 230, 219, 0.2);
    --line-soft: rgba(231, 230, 219, 0.07);
    /* 信号は淡緑（暗地上8:1） */
    --field: #7cbf9c;
    /* 反転: 「表紙」の面は紙になり、箔は紙上で読める濃さに */
    --cover: #e7e6db;
    --foil: #8a6f35;
    --hover-wash: rgba(231, 230, 219, 0.05);
    --paper-on-ink: rgba(27, 29, 25, 0.9);
    --paper-on-ink-soft: rgba(27, 29, 25, 0.64);
  }

  .paper-grid {
    background-image:
      linear-gradient(to right, transparent calc(100% - 1px), var(--line-soft) 1px),
      linear-gradient(to bottom, transparent calc(100% - 1px), rgba(231, 230, 219, 0.03) 1px);
  }

  .thesis::after {
    border-color: rgba(27, 29, 25, 0.14);
    box-shadow:
      0 0 0 7vw #e7e6db,
      0 0 0 calc(7vw + 1px) rgba(27, 29, 25, 0.12),
      0 0 0 14vw #e7e6db,
      0 0 0 calc(14vw + 1px) rgba(27, 29, 25, 0.08);
  }

  .thesis__measure {
    border-top-color: rgba(27, 29, 25, 0.28);
  }

  .site-footer__links {
    border-top-color: rgba(27, 29, 25, 0.22);
  }

  /* 反転した明色面（差し込みの紙）上の hover は、暗箔 3.8:1 では不足するため
     表紙の深緑を使う（#e7e6db 上 6.7:1・実測 2026-07-18） */
  .site-footer__links a:hover {
    color: #1f5741;
  }
}