/* ===========================================================================
   Gamarjoba — 共通コンポーネント
   ⛔ 同じ役割の部品を画面ごとに別実装しない。ここにあるものを使う。
   ⛔ 値は必ず tokens.css の変数から取る。生の数値を書かない。
   状態は 通常 / :hover / :focus-visible / 無効 / エラー の5つを全部定義する。
   =========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  min-width: 320px;            /* 対応下限。これ以下で崩れるより横スクロールさせる */
  color-scheme: light;
  font-synthesis: none;        /* 偽ボールド・偽イタリックを全面禁止（vivapulse.jp より） */
}

/* 選択色。細部だが「作られている」感触に効く（vivapulse.jp より） */
::selection { background: var(--c-gold-soft); color: var(--c-ink); }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font: var(--w-normal) var(--t-body)/var(--lh-body) var(--f-body);
}

/* 見出し。font-synthesis を切るのは、システムserifの偽ボールドを避けるため */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: var(--w-normal);
  font-synthesis-weight: none;
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }

p, ul, ol { margin: 0 0 var(--s4); max-width: var(--measure); text-wrap: pretty; }
/* ⚠️ 見出し直後の間隔はこの順序（p の後）でなければ効かない。
   Beyond Nomad で p{margin} を先に書いて全見出しの下余白が消えた。動かさない。 */
h2 + *, h3 + * { margin-top: var(--s4); }
:where(p, ul, ol):last-child { margin-bottom: 0; }

a { color: var(--c-teal); text-underline-offset: 0.15em; }
a:hover { color: var(--c-ink); }

/* フォーカスは全部品共通。個別に消さない */
:focus-visible {
  outline: var(--focus-w) solid var(--focus-c);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-w) * 2 + var(--focus-offset)) var(--c-ink);
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--wrap-pad); }
.lede { font-size: var(--t-lede); line-height: var(--lh-snug); color: var(--c-ink-2); }
.small, .caption { font-size: var(--t-small); color: var(--c-ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---- ボタン ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--ctrl-h); min-width: var(--tap);
  padding: 0 var(--s5);
  border: 1px solid transparent; border-radius: var(--r-md);
  font: var(--w-medium) var(--t-label)/1 var(--f-body);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--primary   { background: var(--c-clay); color: var(--c-paper); }
.btn--primary:hover, .btn--primary.is-hover { background: #632214; }
.btn--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-border); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--c-paper-2); border-color: var(--c-ink); }
.btn--quiet     { background: transparent; color: var(--c-teal); padding-inline: var(--s2); }
.btn--quiet:hover, .btn--quiet.is-hover { color: var(--c-ink); text-decoration: underline; }
.btn.is-focus {
  outline: var(--focus-w) solid var(--focus-c); outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-w) * 2 + var(--focus-offset)) var(--c-ink);
}
.btn[disabled], .btn.is-disabled {
  background: var(--c-stone); color: var(--c-ink-muted);
  border-color: transparent; cursor: not-allowed;
}
/* quiet は面を持たない部品なので、無効時も面を持たせない。
   UIカタログで発見：共通の [disabled] 規則が --c-stone の塗りを継承し、
   透明なはずのボタンが塗りつぶしになっていた。 */
.btn--quiet[disabled], .btn--quiet.is-disabled {
  background: transparent; text-decoration: none;
}

/* ---- フォーム部品 -------------------------------------------------------- */
.field { display: grid; gap: var(--s2); max-width: var(--measure); }
.field__label { font-size: var(--t-label); font-weight: var(--w-medium); }
.field__hint  { font-size: var(--t-small); color: var(--c-ink-3); }
.field__error { font-size: var(--t-small); color: var(--c-err); font-weight: var(--w-medium); }

.input, .select, .textarea {
  block-size: var(--ctrl-h);        /* input と select の高さを厳密に揃える */
  min-height: var(--ctrl-h); width: 100%;
  padding: 0 var(--s3);
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  font: var(--w-normal) var(--t-body)/1.4 var(--f-body);
}
.textarea { block-size: auto; min-height: calc(var(--ctrl-h) * 2.5); padding: var(--s3); resize: vertical; }
.input:hover, .select:hover, .is-hover.input { border-color: var(--c-ink); }
.input.is-focus, .select.is-focus {
  outline: var(--focus-w) solid var(--focus-c); outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-w) * 2 + var(--focus-offset)) var(--c-ink);
}
.input[disabled], .select[disabled], .textarea[disabled] {
  background: var(--c-stone); color: var(--c-ink-muted); border-color: transparent; cursor: not-allowed;
}
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--c-err); border-width: 2px; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
                    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position: right var(--s4) center, calc(100% - var(--s3)) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s7);
}

/* チェックボックス：タップ領域を44pxまで広げる */
.check { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); cursor: pointer; }
.check input { inline-size: 22px; block-size: 22px; accent-color: var(--c-clay); margin: 0; }
.check.is-disabled { color: var(--c-ink-muted); cursor: not-allowed; }

/* ---- タブ --------------------------------------------------------------- */
.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--c-rule); overflow-x: auto; }
.tab {
  min-height: var(--tap); padding: 0 var(--s1);
  display: inline-flex; align-items: center; white-space: nowrap;
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--c-ink-3); font: var(--w-medium) var(--t-label)/1 var(--f-body); cursor: pointer;
}
.tab:hover, .tab.is-hover { color: var(--c-ink); }
.tab[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-clay); }
.tab[disabled], .tab.is-disabled { color: var(--c-ink-muted); cursor: not-allowed; }

/* ---- カード ------------------------------------------------------------- */
.card {
  background: var(--c-paper-2);
  border: 1px solid var(--c-rule); border-radius: var(--r-lg);
  padding: var(--s5);
  display: grid; gap: var(--s3);
}
.card__title { font-family: var(--f-display); font-size: var(--t-h3); line-height: var(--lh-snug); }
.card--link:hover, .card--link.is-hover { border-color: var(--c-border); background: var(--c-paper); }
.card.is-disabled { background: var(--c-stone); color: var(--c-ink-muted); }

/* ---- 表：横スクロールを許可する唯一の場所 -------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: var(--t-body); }
.table th, .table td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--c-rule); }
.table thead th { background: var(--c-paper-2); font-weight: var(--w-bold); font-size: var(--t-label); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- 通知 --------------------------------------------------------------- */
.notice {
  display: grid; gap: var(--s1);
  padding: var(--s4);
  border-left: 4px solid var(--c-border);
  background: var(--c-paper-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-body);
}
.notice__title { font-weight: var(--w-bold); font-size: var(--t-label); }
.notice--ok   { border-left-color: var(--c-ok); }
.notice--warn { border-left-color: var(--c-warn); }
.notice--err  { border-left-color: var(--c-err); }
.notice--ok   .notice__title { color: var(--c-ok); }
.notice--warn .notice__title { color: var(--c-warn); }
.notice--err  .notice__title { color: var(--c-err); }

/* ---- ダイアログ ---------------------------------------------------------- */
.dialog {
  border: 0; border-radius: var(--r-lg); padding: var(--s6);
  max-width: 32rem; width: calc(100% - var(--s6));
  background: var(--c-paper); color: var(--c-ink);
  box-shadow: var(--shadow-dialog);
}
.dialog::backdrop { background: rgb(26 22 19 / 55%); }
.dialog__actions { display: flex; gap: var(--s3); justify-content: flex-end; margin-top: var(--s5); flex-wrap: wrap; }
/* モバイルでは下から出る全幅シート */
@media (max-width: 599px) {
  .dialog { width: 100%; max-width: none; margin: auto auto 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .dialog__actions .btn { flex: 1 1 auto; }
}

/* ---- 面（セクションの地）------------------------------------------------- */
.band          { padding-block: var(--s8); }
.band--paper2  { background: var(--c-paper-2); }
.band--moss    { background: var(--c-moss); color: var(--c-paper); }
.band--moss h1, .band--moss h2, .band--moss h3 { color: var(--c-paper); }
.band--moss a  { color: var(--c-gold); }
.band--gold    { background: var(--c-gold-soft); }


/* ===========================================================================
   レイアウト部品（ページ実装で追加。UIカタログにも同時に追加すること）
   =========================================================================== */

/* ---- 下書きの印：⛔ 公開版に残してはいけない --------------------------------
   オーナーに見せる下書き専用。二次情報から書いた箇所と、確認したい箇所を示す。
   check.py がこのクラスの残存でビルドを落とす。 */
.draft-note {
  display: block;
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  background: var(--c-gold-soft);
  border-left: 4px solid var(--c-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-small);
  color: var(--c-ink);
  max-width: var(--measure);
}
.draft-note b { font-weight: var(--w-bold); }

/* ---- フォールド：文字は写真の上に置かない（分割する）---------------------- */
.fold { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) {
  .fold { grid-template-columns: 1.1fr 1fr; gap: var(--s7); }
}
.fold__media img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }
.fold__text > * + * { margin-top: var(--s4); }

/* ---- 要点リスト：疲れた人が3秒で読む所 ------------------------------------ */
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.facts li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--c-rule);
  align-items: baseline;
}
.facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt, .facts .facts__k {
  font-weight: var(--w-bold); font-size: var(--t-label);
}
@media (max-width: 599px) {
  .facts li { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ---- 本文と図の並び ------------------------------------------------------- */
.split { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 370px; gap: var(--s7); align-items: start; } }
.fig { margin: 0; }
.fig img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.fig figcaption { margin-top: var(--s2); font-size: var(--t-small); color: var(--c-ink-3); }

/* ---- 小さい図を並べる（元画像が370pxしかないため大きくしない）------------- */
.figs { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* ---- 連絡先の行 ----------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.contact-list a { min-height: var(--tap); display: inline-flex; align-items: center; }


/* ===========================================================================
   ページ用の追加部品（2026-08-17）。UIカタログにも追加すること（規約7）
   =========================================================================== */

/* ---- 全幅の画像帯。文字は絶対に載せない ---------------------------------- */
.hero { display: block; background: var(--c-moss); }
.hero img { display: block; width: 100%; height: auto; }
/* 縦に長すぎる端末で帯が画面を占領しないよう上限をかける */
@media (min-width: 900px) { .hero img { max-height: 62vh; object-fit: cover; } }
.hero--band img { max-height: 30vh; object-fit: cover; }

/* ---- フォールド：画像の下、紙の面に文字を置く ----------------------------- */
.band--fold { padding-block: var(--s7) var(--s8); }
.fold { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .fold { grid-template-columns: minmax(0, 34rem) 1fr; gap: var(--s8); align-items: end; }
}
.fold__text > * + * { margin-top: var(--s4); }
.fold__note { max-width: 22rem; }
@media (min-width: 900px) { .fold__note { margin-bottom: var(--s2); } }

.eyebrow {
  font-size: var(--t-small); font-weight: var(--w-medium);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--c-ink-3); margin: 0;
}

/* ---- 要点リスト：疲れた人が最初に読む所。1行目だけ大きくする -------------- */
.facts--lead li:first-child { padding-bottom: var(--s4); }
.facts__v { font-size: var(--t-body); }
.facts__v--strong {
  font-family: var(--f-display); font-size: var(--t-h3);
  line-height: var(--lh-snug); color: var(--c-ink);
}

/* ---- 本文の行長を締める箱 ------------------------------------------------ */
.measure { max-width: var(--measure); }

/* ---- 一行だけ大きく置く。ページ全体で1回しか使わない --------------------- */
.statement {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.35rem);
  line-height: var(--lh-tight);
  max-width: 40rem;
  margin: var(--s8) 0 0;
  padding-top: var(--s6);
  border-top: 2px solid var(--c-gold);
  text-wrap: balance;
}

/* ---- 幅の広い分割（本文＋図）--------------------------------------------- */
.split--wide { align-items: start; }
@media (min-width: 760px) { .split--wide { grid-template-columns: 1fr minmax(0, 26rem); } }

/* ---- 連絡先 --------------------------------------------------------------- */
/* minmax(12rem,…) は 2列分の最小幅 400px を親へ押し上げ、390px で 26px あふれていた。
   min() を挟むと、容器が 12rem を切ったときにトラックが容器幅まで縮む。 */
.contact-list { margin-top: var(--s7); display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); max-width: 40rem; }
.contact-list > li { min-width: 0; }
.ask__grid > * { min-width: 0; }
.contact__who { display: block; font-family: var(--f-display); font-size: var(--t-h3); }
.contact__lang { display: block; font-size: var(--t-small); color: var(--c-gold-soft); }
.btn--gold { background: var(--c-gold); color: var(--c-ink); }
.btn--gold:hover, .btn--gold.is-hover { background: var(--c-gold-soft); }


/* ===========================================================================
   額と壁ラベル（アートディレクション 10-art-direction.md §1・§6-3）
   ---------------------------------------------------------------------------
   この家は「額装する家」である。写真は置くのではなく掛ける。
   ⛔ ただし額を許すのは Fridon の作品だけ。部屋や風景は既存 .fig（枠なし）。
      額が Fridon の作品にしか付かないから、額に意味が出る。
   =========================================================================== */
.plate { margin: 0; }
.plate__frame {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--s2);                /* 内側のマット */
  background: var(--c-paper);
}
.plate__frame img { display: block; width: 100%; height: auto; border-radius: 0; }
.plate__label {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 2px solid var(--c-gold);
  max-width: var(--measure);
  display: grid; gap: var(--s1);
}
.plate__label p { margin: 0; font-size: var(--t-body); color: var(--c-ink-2); }
.label {
  font: var(--w-medium) var(--t-small)/var(--lh-snug) var(--f-body);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--c-ink-3);
}
/* 写真が届くまでの「まだ掛けていない場所」。壊れて見せない */
.plate--empty .plate__frame {
  background: var(--c-paper-2);
  aspect-ratio: 4 / 5;               /* 既定は縦長（部屋・室内） */
  display: grid; place-items: center;
}
/* 被写体の形に額を合わせる。長机やパノラマは横長 */
.plate--wide.plate--empty .plate__frame { aspect-ratio: 3 / 2; }

/* ⚠️ 既存不具合の修正（アートディレクターが検出）
   .lede は color:var(--c-ink-2) #4A4239 を持つ。これが .band--moss #26301B の上に
   載ると 1.9:1 で読めない。個別画面で style="color:..." を書いて回避するのは
   実装規約3違反なので、面の側で直す。 */
.band--moss .lede,
.band--moss .facts__v { color: var(--c-paper); }
.band--moss .caption, .band--moss .small { color: var(--c-gold-soft); }


/* ---- 節の中の間隔は CSS が引き受ける。マークアップに margin を書かない --------
   ⚠️ Beyond Nomad では、CSSの記述順バグを補うために style="margin-top:…" が
      マークアップ側に40箇所以上書かれた。あれはデザイン判断ではなく手当てだった。
      同じことをしないために、繰り返し出る間隔はここで持つ。 */
.facts  { margin-top: var(--s7); max-width: 44rem; }
/* ⚠️ p/ul/ol の max-width:34rem（散文の行長）は、2列の台帳には狭すぎる。
   .facts は散文ではないので独自の幅を持つ。inline style で上書きしない。 */
.plate  { margin-top: var(--s7); }
.btn-row{ margin-top: var(--s5); }
.band--tight { padding-block: var(--s6); }
.split .fig { margin-top: 0; }


/* ===========================================================================
   Gamarjoba 本ページのアートディレクション
   _docs/10-art-direction.md — 「この家は額装する家である」
   =========================================================================== */

/* キーボード利用者だけに見える本文への近道 */
.skip-link {
  position: fixed; inset-block-start: var(--s3); inset-inline-start: var(--s3);
  z-index: 10; transform: translateY(-200%);
  padding: var(--s3) var(--s4); background: var(--c-ink); color: var(--c-paper);
  border-radius: var(--r-md);
}
.skip-link:focus { transform: translateY(0); }

/* 上帯。sticky にせず、320px の画面を奪わない */
.site-head { border-bottom: 1px solid var(--c-rule); }
.site-head__inner {
  min-height: var(--s8); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s4);
}
.site-name {
  font-family: var(--f-display); font-size: var(--t-h3); color: var(--c-ink);
  text-decoration: none;
}
.site-head__ask {
  min-height: var(--tap); display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-label); font-weight: var(--w-medium); text-decoration: none;
}

/* Fridon の絵の幾何だけを借りた静止した印 */
.sun {
  display: block; inline-size: var(--s9); block-size: auto;
  margin-inline: auto;
}
.sun--small { inline-size: var(--s8); }
.sun__rays { fill: var(--c-teal); }
.sun__disc { fill: var(--c-gold); }
.sun__drip { fill: var(--c-clay); }

/* 金の点は装飾だけ。状態や意味を担わせない */
.rule-sun {
  display: flex; align-items: center; gap: var(--s4);
  margin-block: var(--s5); border: 0;
}
.rule-sun::before, .rule-sun::after {
  content: ""; flex: 1 1 0; block-size: 1px; background: var(--c-rule);
}
.rule-sun > span {
  flex: none; inline-size: var(--s2); block-size: var(--s2);
  border-radius: 50%; background: var(--c-gold);
}
.rule-sun--dot-only::before, .rule-sun--dot-only::after { background: transparent; }

/* 扉：第一画面を文字と印だけで成立させる */
.frontis { padding-block: var(--s7) var(--s6); text-align: center; }
.frontis > .wrap > * { margin-inline: auto; }
.frontis .eyebrow { margin-block-start: var(--s5); }
.frontis__title {
  font-size: var(--t-hero); max-inline-size: 14ch;
  margin-block-start: var(--s3); text-wrap: balance;
}
.frontis .lede {
  max-inline-size: 34ch; margin-block-start: var(--s5); color: var(--c-ink-2);
}
.frontis__actions {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: center; margin-block-start: var(--s6);
}
.frontis-facts {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: var(--s3); row-gap: var(--s1); max-inline-size: none;
  color: var(--c-ink-2); font-size: var(--t-label);
}
.frontis-facts li + li::before {
  content: "\00B7"; color: var(--c-ink-3); margin-inline-end: var(--s3);
}
@media (min-width: 900px) { .frontis { padding-block-start: var(--s8); } }

/* 家族の看板は、それ単独で静かに置く */
.sign { padding-block-start: 0; }
.plate--sign { margin-top: 0; }
.plate--sign .plate__label { max-width: var(--measure); }

.section-head { max-width: var(--measure); }
.section-head .eyebrow + h2 { margin-top: var(--s2); }
.section-head h2 + .lede { margin-top: var(--s4); }

/* 部屋写真。Fridon の「額」と混同しない、裸の写真スロット */
.room-slot { margin: 0; }
.room-slot img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.room-slot__space {
  aspect-ratio: 3 / 2; display: grid; place-items: center;
  background: var(--c-paper-2); border-block: 1px solid var(--c-border);
}
.room-slot figcaption {
  margin-top: var(--s3); color: var(--c-ink-3); font-size: var(--t-small);
}
.room-gallery { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .split--rooms { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
  .room-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 食卓：夜の不在を暗い面で受け止める */
.table-story { display: grid; gap: var(--s8); }
.pull { margin: 0; max-inline-size: var(--measure); }
.pull::before {
  content: ""; display: block; inline-size: var(--s7); block-size: 2px;
  background: var(--c-gold); margin-block-end: var(--s5);
}
.pull p {
  margin: 0; font-family: var(--f-display); font-size: var(--t-h2);
  font-weight: var(--w-normal); line-height: var(--lh-snug); text-wrap: balance;
}
.table-story__body { max-width: var(--measure); }
.band--moss .eyebrow { color: var(--c-gold-soft); }
@media (min-width: 900px) {
  .table-story { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }
}

/* ギャラリー：文字の落差をページの感情的な頂点にする */
.gallery { padding-block: var(--s9); }
.peak { text-align: center; }
.peak .eyebrow { margin-top: var(--s5); }
.peak .eyebrow + h2 { margin-top: var(--s2); }
.peak .lede, .peak .peak__small { max-inline-size: 34ch; margin-inline: auto; }
.peak .lede { margin-block-start: var(--s5); }
.peak__small {
  margin-block-start: var(--s8); font-family: var(--f-display);
  font-size: var(--t-h2); line-height: var(--lh-snug); color: var(--c-ink-2);
}
.statement--peak {
  font-size: var(--t-hero); max-inline-size: 16ch; margin-inline: auto;
  border-top: 0; padding-top: 0; margin-block-start: var(--s3);
}
.gallery__plate { max-width: var(--measure); margin-inline: auto; text-align: start; }
.gallery__plate.plate--empty .plate__frame { aspect-ratio: 4 / 3; }

/* 場所：全幅写真を「村の写真」として明示する */
.where-intro { padding-block-end: var(--s6); }
.place-image { margin: 0; background: var(--c-moss); }
.place-image img {
  display: block; width: 100%; max-height: 40vh; min-height: var(--s9);
  object-fit: cover;
}
.place-image figcaption {
  padding-block: var(--s3); color: var(--c-paper-2); font-size: var(--t-small);
}
.place-details { padding-block-start: var(--s7); }
.place-facts { margin-top: 0; }
@media (min-width: 760px) {
  .place-details .split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 連絡：番号とURLが未確認でも、下書きとして破綻させない */
.ask__grid { display: grid; gap: var(--s8); }
.ask__grid .eyebrow + h2 { margin-top: var(--s2); }
.contact-list { margin-top: 0; }
.contact__who { color: var(--c-paper); }
@media (min-width: 760px) {
  .ask__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}

.footer-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); }
.footer-line p { margin: 0; }

@media (max-width: 599px) {
  .site-head__inner { min-height: var(--s7); }
  .frontis__actions { align-items: stretch; }
  .frontis__actions .btn--primary { flex-basis: 100%; }
  .frontis-facts { display: grid; gap: var(--s1); }
  .frontis-facts li + li::before { content: none; }
  .sign { padding-block-end: var(--s7); }
  .facts { margin-top: var(--s6); }
  .table-story { gap: var(--s7); }
  .peak__small { margin-block-start: var(--s7); }
  .gallery__plate { margin-top: var(--s7); }
  .ask__grid { gap: var(--s7); }
}

/* 連絡先が実リンクになったので、リンクだと分かる形にする（moss面・金） */
.ask__grid a.contact__who {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.ask__grid a.contact__who:hover,
.ask__grid a.contact__who.is-hover { color: var(--c-paper); }
.ask__note { margin-top: var(--s5); }

/* 縦位置の写真。表示幅を絞らないと、縦長のまま画面を占有してしまう */
.plate--portrait { max-width: 26rem; margin-inline: auto; }