/* Kawa Musubi サイト共通の見た目（2026-10-29 作り直し。同日 v3: 藍墨の地・12列の格子）
 *
 * 値の出所: /brand-tokens.css（= docs/brand/tokens.css の写し。正本は docs/brand/BRAND.md）。
 * 書体: Source Serif 4 / Source Sans 3 を欧文だけにサブセットして自前配信する。
 *   OFL の予約フォント名 'Source' があるので、サブセット（改変物）は KM Serif / KM Sans に名前を替えている。
 *   和文は「その日に握る。かわむすび」の12字だけを Noto Serif JP から切り出した KM Mincho（8.6KB）。
 *   ライセンス文は /fonts/OFL-*.txt。元の TTF は assets/fonts/。
 * 色（2026-10-30 v4。BRAND.md §1「面の色は2つ＋点2つ」に戻した）:
 *   面は2つ。藍墨 #171C2A の「表紙」（最初の画面・Goed voor de stad. の章・フッター）と、
 *   生成り #F7F3EA の「頁」（.paper。人と品と注文・チーム・場所と問い）を交互に置く。
 *   v3 は藍墨1色で、章の区切りが見えず、注文の頁まで暗い地で読ませていた。
 *   部品は --bg / --fg 系の変数だけを使うので、.paper を付けるだけで色が替わる。
 *   点は2つ。朱は品を選んだ印（数の下線）だけ、抹茶は vegan の印だけ。どちらも生成りの頁の中だけで使う
 *   （藍の地では読めない）。真鍮は線だけ。
 * 格子: 幅 1440px・12列・溝 24px。左端は2本だけ（1列目の始まりと 8列目の始まり）。
 *   写真と見出しは 1〜6列、本文はすべて 8〜12列。
 * 字の大きさ: 11 / 14 / 17 / 22 / 34 / 56 の6段（主の対句だけ 56）。
 * 操作の型は3つだけ: 塗りのボタン（支払う、1つだけ）／細い線の枠のボタン（.btn）／下線の文字リンク（.text-link）。
 * 規則: グラデーション・影・角丸を使わない。絵文字を使わない。左揃え。和文は縦組みの1行だけ。
 */

@font-face { font-family: "KM Serif"; src: url("/fonts/km-serif-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "KM Serif"; src: url("/fonts/km-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "KM Serif"; src: url("/fonts/km-serif-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "KM Sans"; src: url("/fonts/km-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "KM Sans"; src: url("/fonts/km-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "KM Mincho"; src: url("/fonts/km-mincho-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --serif: "KM Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "KM Sans", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --mincho: "KM Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --gutter: 20px;
  --head-h: 60px;
  --wrap: 1440px;
  --col-gap: 24px;
  --measure: 34rem;

  --bg: var(--km-aizumi);                    /* 地 */
  --bg-raised: var(--km-aizumi-raised);      /* 浮かせる面（チームの帯・特典の選択） */
  --bg-deep: var(--km-aizumi-deep);          /* フッター */
  --fg: var(--km-kinari-screen);             /* 文字 */
  --fg-soft: rgba(237, 230, 214, 0.84);      /* 本文の2段目 */
  --fg-muted: rgba(237, 230, 214, 0.6);      /* 副次の文字。藍墨の地で 6.6:1 */
  --rule: rgba(237, 230, 214, 0.12);         /* 罫線 */
  --rule-strong: rgba(237, 230, 214, 0.3);   /* 区切りの強い罫線 */
  --brass: var(--km-shinchu);                /* 真鍮。線だけに使う */
  --fill-hover: rgba(237, 230, 214, 0.06);
  --fill-off: rgba(237, 230, 214, 0.12);     /* 押せない塗りのボタン */
  --fill-strong-hover: var(--km-shironeri);  /* 塗りのボタンに指を合わせたとき */
  --focus: var(--brass);
  --pick: var(--brass);                      /* 選んだ品の印 */
  --plant: var(--fg-muted);                  /* vegan の印 */
  /* 主の対句と章の見出しの大きさ。1行を折らないので幅で縮める（縦書きの列 溝20 + 列52 = 72px に重ねない。
     8.4 は最も長い行の幅 ÷ 字の大きさ 8.08 に余裕を足した値） */
  --couplet-size: min(34px, calc((100vw - 72px) / 8.4));
  color-scheme: dark;
}
@media (min-width: 900px) {
  /* 8〜12列（5列分）に収まる大きさ。幅 1274px 未満で縮む（以前は 900〜1100px で右へはみ出していた） */
  :root { --gutter: 56px; --couplet-size: min(56px, calc(4.96vw - 7.2px)); }
}

/* 生成りの頁。罫線と副次の文字は藍墨の透明度で作る（副次の文字 66% で 5.4:1） */
.paper {
  --bg: var(--km-kinari);
  --bg-raised: var(--km-shironeri);
  --bg-deep: var(--km-line);
  --fg: var(--km-aizumi);
  --fg-soft: rgba(23, 28, 42, 0.84);
  --fg-muted: rgba(23, 28, 42, 0.66);
  --rule: rgba(23, 28, 42, 0.14);
  --rule-strong: rgba(23, 28, 42, 0.36);
  --fill-hover: rgba(23, 28, 42, 0.05);
  --fill-off: rgba(23, 28, 42, 0.08);
  --fill-strong-hover: var(--km-ai);
  --focus: var(--km-aizumi);
  --pick: var(--km-shu);
  --plant: var(--km-matcha);
  background: var(--bg); color: var(--fg); color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--brass); color: var(--bg); }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--rule-strong); }
a:hover { text-decoration-color: currentColor; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; }
strong { font-weight: 600; }
.lang-hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; }

/* ── 縦組みの和文1行（その日に握る。／かわむすび） ── */
.tate {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--mincho); font-weight: 400; font-size: 16px; line-height: 1;
  letter-spacing: 0.42em; color: var(--fg-soft);
}

/* ── ヘッダ: 活字の店名と Order だけ。左右の端を本文の格子に合わせる ── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  background: var(--km-aizumi);
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  font-family: var(--serif); font-weight: 400; font-size: 13px; line-height: 1;
  letter-spacing: 0.28em; color: var(--fg); text-decoration: none; white-space: nowrap;
}
.head-right { display: flex; align-items: center; gap: 22px; }
.lang-switch { display: flex; gap: 2px; }
.lang-btn {
  font-family: var(--sans); font-size: 11px; line-height: 1; letter-spacing: 0.18em;
  background: none; border: 0; padding: 8px 5px; color: var(--fg-muted); cursor: pointer;
}
.lang-btn.active { color: var(--fg); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 0.6em; }
.head-order {
  font-family: var(--serif); font-size: 17px; line-height: 1; letter-spacing: 0.01em;
  color: var(--fg); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--brass);
}

/* ── 面: 藍墨の表紙と生成りの頁。同じ面が続くときの区切りは余白だけ ── */
.sec { padding: 96px 0; }
.sec-ai { background: var(--bg-raised); }
.sec.paper + .sec.paper,
.sec:not(.paper) + .sec:not(.paper) { padding-top: 0; }
.sec.paper + .sec.paper::before,
.sec:not(.paper) + .sec:not(.paper)::before {
  content: ""; display: block; height: 1px; background: var(--rule);
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto 96px;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }

/* 小見出し: 真鍮の短い罫＋大文字の小さな字（ロックアップの罫と同じ型） */
.label {
  font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 1.4;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
  margin: 0 0 28px;
}
.label::before { content: ""; display: block; width: 28px; height: 1px; background: var(--brass); margin: 0 0 18px; }
.sec-title {
  font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.15;
  letter-spacing: -0.008em; margin: 0 0 28px;
}
.sec-photo { display: none; transition: opacity 0.2s ease; }
.sec-photo.show-m { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; margin: 28px 0 36px; }
#people .sec-photo { aspect-ratio: 5 / 4; object-position: 50% 80%; }
/* 人と朝の横長の写真はスマホでも出す */
.sec-photo-wide { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; margin: 28px 0 36px; }
.lede { font-size: 19px; line-height: 1.55; color: var(--fg-soft); }
.note { font-family: var(--sans); font-size: 14px; line-height: 1.7; letter-spacing: 0.01em; color: var(--fg-muted); }

.text-link {
  font-family: var(--serif); font-size: 17px; line-height: 1.4; letter-spacing: 0.01em;
  color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 3px;
}
.text-link:hover { border-bottom-color: var(--fg); }
/* ボタン: 細い線の枠と矢印。押すと反転する */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 56px; padding: 0 22px 0 26px; border: 1px solid var(--fg); border-radius: 0;
  background: transparent; color: var(--fg);
  font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn::after { content: "\2192"; font-family: var(--sans); font-size: 14px; }
.btn:hover { background: var(--fg); color: var(--bg); }

/* ── 主の対句: 2行を1つの塊として組む（間に段落を挟まない） ── */
.couplet {
  font-family: var(--serif); font-weight: 300; font-size: var(--couplet-size); line-height: 1.06;
  letter-spacing: -0.012em; margin: 0;
}
.couplet > span { display: block; white-space: nowrap; }
/* 英語のページだけ、対句の下に英訳を小さく1行（2026-10-30 Kenji「yes」）。対句はオランダ語のまま */
.couplet-gloss { margin: 14px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; color: var(--fg-muted); }
/* 章の見出しは対句の1行をそのまま使う（Goed voor jou. / Goed voor je team. / Goed voor de stad.）。別の標語を作らない。
   大きさは 34px（最初の画面の対句 56px より一段下げ、繰り返しに見せない）。狭い幅では縮める */
.chapter-title {
  font-family: var(--serif); font-weight: 300; font-size: min(34px, calc((100vw - 40px) / 8.4)); line-height: 1.06;
  letter-spacing: -0.012em; white-space: nowrap; margin: 0 0 32px;
}
/* スタンプカードの図: 札の枠と店名、10個の丸。9個は押した印（塗り）、10個目は真鍮の輪（そこで選ぶ）。角は丸めない */
.stamp-card { display: inline-grid; justify-self: start; gap: 22px; margin: 40px 0 48px; padding: 22px 26px 26px; border: 1px solid var(--rule-strong); }
.stamp-card-mark { margin: 0; font-family: var(--serif); font-size: 12px; line-height: 1; letter-spacing: 0.28em; color: var(--fg-muted); }
.stamps { display: grid; grid-template-columns: repeat(5, 24px); gap: 14px 18px; margin: 0; padding: 0; list-style: none; }
.stamps li { width: 24px; height: 24px; border-radius: 50%; background: var(--fg-soft); }
.stamps li:last-child { background: transparent; border: 1px solid var(--brass); }
/* 対句の下の証拠は2つ並べる（スマホは縦に積む） */
.proofs { display: grid; gap: 20px; margin-top: 32px; }
.proof { padding-top: 14px; border-top: 1px solid var(--rule); }
.pair-proof { font-size: 17px; line-height: 1.6; color: var(--fg); margin: 0; }
.team-proof { font-size: 17px; line-height: 1.7; max-width: 34rem; margin-top: 28px; }
.team-link { margin: 36px 0 0; }
/* our-story の見出し（対句ではない1文） */
.pair-line {
  font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.1;
  letter-spacing: -0.012em; margin: 0;
}
.first-text .pair-line + .story .lede { font-size: 17px; line-height: 1.7; color: var(--fg-soft); margin-top: 32px; }

/* ── 最初の画面: 写真と文字を分ける（写真の上に文字を載せない）。和文の縦1行を写真の脇に置く ── */
.first { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.first-photo { grid-column: 1 / -1; }
.first-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.first-text { grid-column: 1; grid-row: 2; padding: 52px 0 72px var(--gutter); }
.first .tate { grid-column: 2; grid-row: 2; padding: 58px var(--gutter) 0 16px; }  /* 行を固定しないと文字が縦書きの下へ回る */
.first-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 22px 32px; margin-top: 44px; }
.place {
  font-family: var(--sans); font-size: 14px; line-height: 1.8; letter-spacing: 0.01em; color: var(--fg-soft);
  margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); max-width: 22rem;
}

/* ── 12列の格子（900px 以上） ── */
@media (min-width: 900px) {
  .sec { padding: 120px 0; }
  .lede { font-size: 22px; }
  .first-text .pair-line { font-size: 56px; line-height: 1.06; }
  .proofs { max-width: 30rem; margin-top: 44px; }

  .first,
  .sec > .wrap:has(> .sec-title, > h2.label, > .sec-aside, > .couplet, > .chapter-title),
  .sec > .wrap.story {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  }
  .first {
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); align-items: stretch;
  }
  /* 写真は上と左の端まで（格子の外の余白ぶん左へ出す） */
  .first-photo { grid-column: 1 / 7; grid-row: 1; margin-left: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--wrap)) / 2))); }
  .first-photo img {
    width: 100%; height: calc(100vh - var(--head-h)); height: calc(100svh - var(--head-h));
    min-height: 560px; max-height: 1000px; aspect-ratio: auto; object-fit: cover;
  }
  .first .tate { grid-column: 7; grid-row: 1; justify-self: center; align-self: start; padding: 72px 0 0; }
  .first-text { grid-column: 8 / 13; grid-row: 1; align-self: end; padding: 72px 0 80px; }

  /* 本文はすべて 8〜12列。:where で詳細度を0にして、見出しの規則が勝つようにする */
  :where(.sec > .wrap:has(> .sec-title, > h2.label, > .sec-aside, > .couplet, > .chapter-title)) > *,
  :where(.sec > .wrap.story) > * { grid-column: 8 / 13; }
  /* 見出しは 1〜6列に止める */
  .sec > .wrap > .sec-title,
  .sec > .wrap > .chapter-title,
  .sec > .wrap > h2.label,
  .sec > .wrap > .sec-aside {
    grid-column: 1 / 7; grid-row: 1 / span 40; align-self: start;
    position: sticky; top: calc(var(--head-h) + 56px); margin: 0;
  }
  .sec > .wrap > .sec-aside { grid-column: 1 / 6; }
  .sec-aside .sec-title, .sec-aside .chapter-title, .sec-aside .label { margin: 0; }
  .sec-aside .stamp-card { margin: 48px 0 0; padding: 30px 38px 38px; gap: 30px; }
  .sec-aside .stamps { grid-template-columns: repeat(5, 36px); gap: 22px 30px; }
  .sec-aside .stamps li { width: 36px; height: 36px; }
  .sec-photo.sec-photo-wide { aspect-ratio: 5 / 3; margin-bottom: 0; }
  .sec-photo.show-m { aspect-ratio: 4 / 5; margin: 40px 0 0; }
  .sec.paper + .sec.paper::before,
  .sec:not(.paper) + .sec:not(.paper)::before { margin-bottom: 120px; }
  .sec-photo {
    display: block; width: 100%; margin-top: 40px;
    aspect-ratio: 4 / 5; max-height: calc(100vh - var(--head-h) - 220px); object-fit: cover;
  }
  /* チームの帯: 対句は 1〜7列、本文は 8〜12列で下揃え */
  .sec > .wrap > .couplet { grid-column: 1 / 8; grid-row: 1 / span 3; align-self: end; }
  .sec-ai > .wrap { align-items: end; }
  .sec-ai .team-proof { margin-top: 0; }
}

/* ── モバイルの固定注文ボタン（#order に入ったら隠す） ── */
.sticky-order {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 0 var(--gutter) env(safe-area-inset-bottom);
  background: var(--bg-raised); color: var(--fg); text-decoration: none;
  border-top: 1px solid var(--brass);
  font-family: var(--serif); font-size: 17px; letter-spacing: 0.01em;
  transition: transform 0.2s ease;
}
.sticky-order::after { content: "\2192"; font-family: var(--sans); font-size: 14px; }
.sticky-order.is-hidden { transform: translateY(110%); }
.sticky-next { display: none; }
.sticky-order.is-next .sticky-go { display: none; }
.sticky-order.is-next .sticky-next { display: inline; }
.sticky-total { font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 899px) {
  body.has-sticky { padding-bottom: 60px; }
}
@media (min-width: 900px) {
  .sticky-order { display: none; }
}

/* ── FAQ（details で畳む） ── */
.faq-item { border-top: 1px solid var(--rule); }
#faq .sec-title { padding-top: 14px; }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 40px 22px 0; font-size: 17px; line-height: 1.4;
}
@media (min-width: 900px) { .faq-item summary { font-size: 22px; } }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 17px; line-height: 1; color: var(--fg-muted);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { margin: 0; padding: 0 0 26px; max-width: var(--measure); color: var(--fg-soft); }

/* ── フッター: 縦組みの「かわむすび」と店名 ── */
.site-foot { background: var(--bg-deep); padding: 80px 0 104px; font-family: var(--sans); font-size: 14px; line-height: 1.75; letter-spacing: 0.01em; color: var(--fg-muted); }
.site-foot .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 36px; }
.site-foot .wrap > * { grid-column: 2; }
.site-foot .wrap > .tate { grid-column: 1; grid-row: 1 / span 3; font-size: 17px; letter-spacing: 0.5em; color: var(--fg); }
@media (min-width: 900px) {
  .site-foot .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .site-foot .wrap > * { grid-column: 8 / 13; }
  .site-foot .wrap > .tate { grid-column: 7; justify-self: center; }
}
/* Instagram は1行。字は本文の段の 22px（対句と同じ大きさにすると見出しと競る） */
.foot-follow { margin: 0 0 48px; }
.foot-follow .label { margin-bottom: 14px; }
.foot-follow a {
  font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 3px; white-space: nowrap;
}
.foot-follow a:hover { border-bottom-color: var(--fg); }
.foot-mark { font-family: var(--serif); font-size: 13px; letter-spacing: 0.28em; color: var(--fg); margin: 0 0 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; padding: 0; margin: 0 0 28px; }
.foot-links a { color: var(--fg-soft); text-decoration: none; }
.foot-links a:hover { color: var(--fg); }
.foot-legal { margin: 0; }

/* ── サブページの本文 ── */
.facts { margin: 0; padding: 0; list-style: none; }
.facts > li, .facts > .fact { padding: 20px 0; border-top: 1px solid var(--rule); }
.facts > li:last-child, .facts > .fact:last-child { border-bottom: 1px solid var(--rule); }
.facts p { margin: 0; }
.facts p + p { margin-top: 8px; }
.areas { margin: 10px 0 8px; padding: 0; list-style: none; }
.areas li { position: relative; margin: 2px 0; padding-left: 24px; }
.areas li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 12px; height: 1px; background: var(--brass); }
.story-sign { font-family: var(--sans); font-size: 14px; letter-spacing: 0.04em; color: var(--fg-muted); margin-top: 36px; }
.first-text .lede { margin-top: 20px; }
.sec-head { padding-bottom: 0; }