/* ki-japan.app — 紹介のページ（依頼#1061）
   墨が主、和紙は読む帯。差し色は朱ひとつ。動きは呼吸の速さ。外部への要求は無い。
   書体は自前（Shippori Mincho・Cormorant Garamond・Newsreader、すべて SIL OFL 1.1、ページの字だけに間引き）。 */

@property --km { syntax: "<integer>"; inherits: false; initial-value: 1106; }

@font-face {
  font-family: "Shippori Mincho";
  src: url("/assets/fonts/shippori-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("/assets/fonts/shippori-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("/assets/fonts/cormorant.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}

:root {
  /* 墨 */
  --sumi: oklch(18.3% 0.004 286);
  --sumi-deep: oklch(13% 0.004 286);
  --sumi-surface: oklch(21.6% 0.006 301);
  --sumi-line: oklch(30% 0.008 308);
  --kinari: oklch(92% 0.014 85);
  --kinari-soft: oklch(92% 0.014 85 / 0.76);
  --kinari-faint: oklch(92% 0.014 85 / 0.56);
  /* 和紙 */
  --washi: oklch(92% 0.014 85);
  --washi-deep: oklch(89.7% 0.022 83);
  --washi-line: oklch(84% 0.022 83);
  --ink: oklch(22.4% 0.007 67);
  --ink-mid: oklch(39% 0.014 72);
  --ink-faint: oklch(45.3% 0.017 74);
  /* 朱 */
  --shu: oklch(54.1% 0.151 33);
  --shu-ink: oklch(48.8% 0.136 33);
  --shu-night: oklch(66% 0.14 36);

  --serif-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --serif-en: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display-en: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --ui: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.95vw, 2rem);
  --step-3: clamp(1.85rem, 1.45rem + 1.8vw, 2.7rem);
  --step-5: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
  --step-7: clamp(4rem, 2.2rem + 9vw, 9.5rem);

  --gutter: clamp(20px, 5vw, 64px);
  --ease-breath: cubic-bezier(.22, .61, .36, 1);
  --ease-turn: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--sumi);
  color: var(--kinari);
  font-family: var(--serif-ja);
  font-size: var(--step-0);
  line-height: 1.95;
  letter-spacing: 0.04em;
  text-rendering: optimizeLegibility;
}
body:lang(en) { font-family: var(--serif-en); line-height: 1.6; letter-spacing: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--shu-night); outline-offset: 4px; }
::selection { background: oklch(54% 0.15 33 / 0.45); color: var(--kinari); }

:lang(ja) {
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  text-autospace: normal;
  text-spacing-trim: trim-start;
}
h1, h2, h3, .lead { text-wrap: balance; }
p { text-wrap: pretty; margin: 0 0 1em; }
:lang(ja) h1, :lang(ja) h2 { font-feature-settings: "palt" 1; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--kinari); color: var(--ink); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* 墨の粒（動かさない） */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .07; mix-blend-mode: soft-light;
}

.wrap { padding-inline: var(--gutter); max-width: 1320px; margin-inline: auto; }
.measure { max-inline-size: 34em; }
:lang(en) .measure { max-inline-size: 32em; }
.kicker {
  font-family: var(--ui); font-size: var(--step--1); letter-spacing: .22em;
  color: var(--kinari-faint); margin: 0 0 1.2em; text-transform: uppercase;
}
:lang(ja) .kicker { letter-spacing: .32em; }
.h2 { font-size: var(--step-3); font-weight: 600; line-height: 1.4; margin: 0 0 .8em; letter-spacing: .06em; }
:lang(en) .h2 { font-family: var(--display-en); font-weight: 500; font-size: calc(var(--step-3) * 1.12); line-height: 1.1; letter-spacing: 0; }
.lead { font-size: var(--step-1); color: var(--kinari-soft); line-height: 1.9; }
:lang(en) .lead { line-height: 1.55; }
.caption { font-family: var(--ui); font-size: var(--step--1); color: var(--kinari-faint); letter-spacing: .04em; line-height: 1.7; }
.mark { color: var(--shu-night); }
section { position: relative; }
.pad { padding-block: clamp(96px, 16vh, 200px); }

/* ── 上の帯 ── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 14px;
  background: linear-gradient(oklch(13% 0.004 286 / .62), transparent);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; view-transition-name: ki-mark; }
.brand img { width: 26px; height: auto; }
.brand span { font-family: var(--display-en); font-size: 24px; letter-spacing: .04em; }
.topnav { display: flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 13px; }
.topnav a { color: var(--kinari-soft); text-decoration: none; padding: 10px 10px; min-height: 44px; display: inline-flex; align-items: center; }
.topnav a[aria-current="true"] { color: var(--kinari); }
.topbar { transition: background-color .4s ease-out, backdrop-filter .4s ease-out; }
.topbar.solid { background: oklch(15% 0.004 286 / .74); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 oklch(92% 0.014 85 / .06); }
.btn-sound {
  font: inherit; font-family: var(--ui); font-size: 13px; color: var(--kinari);
  background: oklch(92% 0.014 85 / .08); border: 1px solid oklch(92% 0.014 85 / .22);
  border-radius: 999px; padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: background .18s ease-out, border-color .18s ease-out;
}
.btn-sound:hover { background: oklch(92% 0.014 85 / .14); }
.btn-sound[aria-pressed="true"] { border-color: var(--shu-night); }
.btn-sound .bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.btn-sound .bars i { width: 2px; background: currentColor; height: 4px; border-radius: 1px; }
.btn-sound .bars i:nth-child(2) { height: 8px; }
.btn-sound .bars i:nth-child(3) { height: 6px; }

/* ── 0 ヒーロー ── */
.hero { min-height: 100svh; display: grid; align-items: end; overflow: clip; }
.hero__scene { position: absolute; inset: 0; }
.hero__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 63% 60%; }
.hero__scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, oklch(18% 0.004 286 / .35) 0%, transparent 28%, transparent 46%, oklch(18% 0.004 286 / .78) 74%, var(--sumi) 100%);
}
.hero__body { position: relative; width: 100%; padding-bottom: clamp(56px, 12vh, 120px); }
.hero h1 {
  font-size: var(--step-5); font-weight: 600; letter-spacing: .14em; line-height: 1.35; margin: 0 0 .4em;
  text-shadow: 0 2px 30px oklch(13% 0.004 286 / .6);
}
:lang(en) .hero h1 { font-family: var(--display-en); font-weight: 400; letter-spacing: .01em; line-height: 1.02; font-size: calc(var(--step-5) * 1.18); }
.hero__sub { font-size: var(--step-1); color: var(--kinari-soft); letter-spacing: .18em; margin: 0 0 2.4em; }
:lang(en) .hero__sub { letter-spacing: .02em; font-style: italic; }
.hero__note { font-family: var(--ui); font-size: var(--step--1); color: var(--kinari-faint); letter-spacing: .12em; display: flex; gap: 1.4em; flex-wrap: wrap; }
.hero__phone { width: 64px; margin-bottom: 28px; color: var(--kinari); }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 1px; height: 46px; background: linear-gradient(var(--kinari-faint), transparent); }

/* 端末の線画（裏返る） */
.phone-turn { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .phone-turn { animation: turn 2.4s var(--ease-turn) .8s both; }
  @keyframes turn {
    0% { transform: perspective(500px) rotateX(0deg); }
    100% { transform: perspective(500px) rotateX(180deg); }
  }
}
.phone-turn .back { opacity: 0; }

/* ── 和紙の帯 ── */
.washi {
  position: relative; isolation: isolate;
  background: linear-gradient(var(--washi), var(--washi-deep));
  color: var(--ink); color-scheme: light;
}
.washi::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/img/washi.webp") 0 0 / 640px; opacity: .09; mix-blend-mode: multiply;
}
.washi .kicker { color: var(--ink-faint); }
.washi .lead { color: var(--ink-mid); }
.washi .caption { color: var(--ink-faint); }
.washi .mark { color: var(--shu-ink); }
.washi a { color: var(--shu-ink); }

/* ── 1 静けさの約束 ── */
.promise__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.promise ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--washi-line); }
.promise li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 1em; padding: 1.5em 0; border-bottom: 1px solid var(--washi-line); }
.promise .num { font-size: var(--step-2); color: var(--shu-ink); line-height: 1.2; }
:lang(en) .promise .num { font-family: var(--display-en); }
.promise h3 { font-size: var(--step-1); font-weight: 600; margin: 0 0 .25em; letter-spacing: .08em; }
:lang(en) .promise h3 { font-family: var(--display-en); font-size: calc(var(--step-1) * 1.15); font-weight: 600; letter-spacing: 0; }
.promise p { margin: 0; color: var(--ink-mid); }
.promise__aside { position: sticky; top: 120px; }

/* ── 2 ただ坐る ── */
.sit { background: var(--sumi); }
.sit__track { position: relative; height: 340vh; }
.sit__stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: clip; background: var(--sumi); }
.sit__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sit__rings i { position: absolute; width: min(70vmin, 560px); aspect-ratio: 1; border-radius: 50%; border: 1px solid oklch(92% 0.014 85 / .5); opacity: 0; scale: .2; }
.sit__phone { position: relative; width: clamp(80px, 12vmin, 120px); color: var(--kinari); z-index: 2; }
.sit__time {
  position: absolute; z-index: 3; font-family: var(--display-en); font-weight: 300; font-size: var(--step-7);
  letter-spacing: .01em; line-height: 1; opacity: 0; font-variant-numeric: lining-nums;
}
.sit__time small { font-size: .42em; vertical-align: .9em; margin-left: .04em; }
.sit__steps { position: absolute; left: var(--gutter); bottom: clamp(32px, 10vh, 96px); z-index: 4; max-width: 30em; }
.sit__step { margin: 0; font-size: var(--step-1); color: var(--kinari-soft); }
.sit__step b { display: block; font-weight: 600; color: var(--kinari); font-size: var(--step-2); letter-spacing: .1em; margin-bottom: .2em; }
:lang(en) .sit__step b { font-family: var(--display-en); letter-spacing: 0; font-weight: 500; }
.sit__intro { padding-top: clamp(96px, 16vh, 200px); }
.sit__after { padding-block: clamp(80px, 12vh, 160px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sheet { width: min(100%, 360px); border-radius: 6px; box-shadow: 0 30px 80px oklch(8% 0 0 / .55); }
.demo {
  font: inherit; font-family: var(--ui); font-size: 15px; letter-spacing: .06em;
  background: var(--shu); color: oklch(98% 0.01 85); border: 0; border-radius: 999px;
  min-height: 48px; padding: 0 26px; cursor: pointer; transition: filter .15s ease-out;
}
.demo:hover { filter: brightness(1.08); }
.demo-note { font-family: var(--ui); font-size: var(--step--1); color: var(--kinari-faint); margin-top: 14px; }

/* 伏せてみる（全面の黒） */
.blackout {
  position: fixed; inset: 0; z-index: 60; background: #000; color: oklch(92% 0.014 85 / .55);
  display: grid; place-items: center; text-align: center; font-family: var(--ui); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease-breath);
}
.blackout[hidden] { display: none; }
.blackout .hint { position: absolute; bottom: 14vh; inset-inline: 24px; margin: 0; letter-spacing: .12em; }
.blackout.on { opacity: 1; pointer-events: auto; cursor: pointer; }
.blackout .t { font-family: var(--display-en); font-weight: 300; font-size: var(--step-7); color: var(--kinari); opacity: 0; transition: opacity .9s var(--ease-breath); }
.blackout.done .t { opacity: 1; }
.blackout .ring { position: absolute; width: 40vmin; aspect-ratio: 1; border-radius: 50%; border: 1px solid oklch(92% 0.014 85 / .35); opacity: 0; }
.blackout .ring.go { animation: bell 2.8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes bell { from { scale: .2; opacity: .6; } to { scale: 1.8; opacity: 0; } }

/* ── 3 日本の音 ── */
.sounds__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78vw, 1fr);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  --rail-edge: max(var(--gutter), calc((100% - 1320px) / 2 + var(--gutter)));
  padding: 8px var(--rail-edge) 28px;
  scrollbar-width: thin; scrollbar-color: var(--sumi-line) transparent;
  scroll-padding-inline: var(--rail-edge);
}
@media (min-width: 760px) { .sounds__rail { grid-auto-columns: minmax(420px, 34vw); } }
.sounds__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rail-nav { display: flex; gap: 10px; flex: none; margin-bottom: 1em; }
.rail-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid oklch(92% 0.014 85 / .3); background: transparent;
  color: var(--kinari); font: 400 24px/1 var(--display-en); cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease-out, opacity .2s ease-out;
}
.rail-btn:hover { background: oklch(92% 0.014 85 / .08); }
.rail-btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 860px) { .rail-nav { display: none; } }
.place { scroll-snap-align: start; position: relative; margin: 0; }
.place__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--sumi-surface); }
.place__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.6s var(--ease-breath); }
.place:hover .place__img img { scale: 1.02; }
.place figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; }
.place .name { font-size: var(--step-1); letter-spacing: .08em; }
:lang(en) .place .name { font-family: var(--display-en); font-size: calc(var(--step-1) * 1.15); letter-spacing: 0; }
.place .where { display: block; font-family: var(--ui); font-size: var(--step--1); color: var(--kinari-faint); letter-spacing: .08em; }
.play {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid oklch(92% 0.014 85 / .3);
  background: transparent; color: var(--kinari); cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s ease-out, background .15s ease-out;
}
.play:hover { background: oklch(92% 0.014 85 / .08); }
.play[aria-pressed="true"] { border-color: var(--shu-night); color: var(--shu-night); }
.play svg { width: 14px; height: 14px; }
.play .i-stop, .play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-stop { display: inline; }
.btn-sound[aria-pressed="true"] .bars i { animation: bar 1.1s ease-in-out infinite alternate; }
.btn-sound[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.4s; }
.btn-sound[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.8s; }
@keyframes bar { from { height: 3px; } to { height: 11px; } }
@media (prefers-reduced-motion: reduce) { .btn-sound .bars i { animation: none !important; } }

/* ── 4 参道から一枚へ ── */
.approach__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); align-items: start; }
.approach figure { margin: 0; }
.approach .shot { width: 100%; aspect-ratio: 720 / 1561; object-fit: cover; border-radius: clamp(18px, 3vw, 32px); border: 1px solid var(--sumi-line); background: var(--sumi-surface); }
.approach figcaption { padding-top: 12px; }

/* ── 5 今日の一句 ── */
.phrase__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.phrase__print { position: relative; margin: 0; }
.phrase__print img { width: auto; max-width: 100%; max-height: 82vh; outline: 2px solid var(--washi-deep); outline-offset: -2px; box-shadow: 0 24px 60px oklch(22% 0.007 67 / .25); }
.tate {
  writing-mode: vertical-rl; text-orientation: mixed; font-feature-settings: "vpal" 1;
  font-size: var(--step-3); font-weight: 600; letter-spacing: .18em; line-height: 1.6; margin: 0;
}
.phrase__word { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 1.4em; }
.phrase__gloss { margin: .8em 0 0; color: var(--ink-mid); }
.sky__now { margin: -.6em 0 1.4em; }
.sheet-fig { margin: 0; justify-self: center; }
.people { padding-top: clamp(80px, 12vh, 140px); }
.people__note { margin-top: 32px; }
.get__lead { margin-inline: auto; }
.sit__step { list-style: none; }
.sit__steps { padding: 0; }
.phrase__reading { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .14em; margin-top: .4em; }
.phrase__q { font-size: var(--step-1); line-height: 1.9; border-left: 2px solid var(--shu-ink); padding-left: 1em; margin: 1.6em 0; }
.phrase__meta { display: flex; gap: 10px 22px; flex-wrap: wrap; }

/* ── 6 暦と空 ── */
.sky__ko { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 6vh, 72px); }
.sky__ko .tate { font-size: var(--step-5); letter-spacing: .12em; color: var(--kinari); }
.seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.seasons figure { margin: 0; }
.seasons img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 63% 60%; width: 100%; border-radius: 2px; }
.seasons figcaption { padding-top: 8px; }
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
.screen { margin: 0; }
.screen img { border-radius: clamp(18px, 3vw, 36px); border: 1px solid var(--sumi-line); width: 100%; }
.screen figcaption { padding-top: 12px; }
.washi .screen img { border-color: var(--washi-line); }

/* ── 7 修行の道 ── */
.paths__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 5vw, 64px) clamp(16px, 2vw, 28px); margin-top: clamp(32px, 5vh, 56px); }
.path { margin: 0; display: flex; flex-direction: column; }
.path__art { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: var(--washi-deep); }
.path__art img { width: 100%; height: 100%; object-fit: cover; }
.path--a .path__art img { object-position: 50% 62%; }
.path--b .path__art img { object-position: 50% 40%; }
.path--c .path__art img { object-position: 50% 55%; }
.path--d .path__art img { object-position: 63% 60%; }
.path h3 { font-size: var(--step-2); font-weight: 600; letter-spacing: .1em; margin: .8em 0 .15em; }
:lang(en) .path h3 { font-family: var(--display-en); font-weight: 500; letter-spacing: 0; }
.path .len { font-family: var(--ui); font-size: var(--step--1); letter-spacing: .1em; color: var(--ink-faint); margin: 0 0 .6em; padding-bottom: .8em; border-bottom: 1px solid var(--washi-line); }
.path p { color: var(--ink-mid); margin: 0; }
.path--text { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px) clamp(24px, 3vw, 40px); border-top: 1px solid var(--washi-line); padding-top: 32px; }
.path--text h3 { font-size: var(--step-1); margin-top: 0; }

/* ── 8 四国遍路 ── */
.henro__track { height: 220vh; position: relative; }
.henro__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: clamp(24px, 5vw, 80px); }
.henro__map { width: 100%; height: auto; max-height: 80vh; display: block; margin-inline: auto; }
.henro__map .land { fill: var(--washi); opacity: .94; }
.henro__map .route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.henro__map .route--base { stroke: oklch(22% 0.007 67 / .28); stroke-width: 2; stroke-dasharray: 3 6; }
.henro__map .route--glow { stroke: var(--shu); stroke-width: 18; opacity: .22; }
.henro__map .route--walk { stroke: var(--shu); stroke-width: 6; }
.henro__map .temple { fill: oklch(22% 0.007 67 / .55); }
.henro__map .pin { fill: var(--washi); stroke: var(--shu-ink); stroke-width: 5; }
.henro__map .pin--end { fill: var(--shu); }
.henro__map .pin-label { font-family: var(--ui); font-size: 26px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--washi); stroke-width: 7px; stroke-linejoin: round; letter-spacing: .04em; }
.henro__map .walker { display: none; fill: var(--shu); stroke: var(--washi); stroke-width: 5; filter: drop-shadow(0 0 6px oklch(54% .15 33 / .7)); }
.km-live { display: none; }
.henro__fig { margin: 0; }
.henro__attr { margin-top: 10px; font-size: 11px; }
.henro__big { font-family: var(--display-en); font-weight: 300; font-size: var(--step-5); line-height: 1; margin: .2em 0 .3em; }

/* ── 9 記録 ── */
.records__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.records__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }

/* ── 10 つくり手と協力者 ── */
.people__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--washi-line); padding-top: 36px; }
.people h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: .08em; margin: 0 0 .5em; }
:lang(en) .people h3 { font-family: var(--display-en); font-size: calc(var(--step-1) * 1.15); letter-spacing: 0; }
.people p { color: var(--ink-mid); }

/* ── 11 はじめる ── */
.get { text-align: center; }
.get .h2 { margin-bottom: .4em; }
.get .phone-small { width: 54px; margin: 0 auto 40px; color: var(--kinari); }
.store { display: inline-flex; align-items: center; gap: 12px; border: 1px solid oklch(92% 0.014 85 / .3); border-radius: 12px; padding: 12px 22px; font-family: var(--ui); color: var(--kinari-soft); min-height: 52px; }
.store svg { width: 20px; height: 20px; }

/* ── フッター ── */
.foot { border-top: 1px solid var(--sumi-line); padding-block: 40px 56px; font-family: var(--ui); font-size: 13px; color: var(--kinari-faint); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 28px; }
.foot a { color: var(--kinari-soft); text-decoration: none; margin-right: 18px; display: inline-block; min-height: 32px; }
.foot a:hover { color: var(--kinari); }
.foot .quiet { color: var(--kinari-soft); }

/* ── 動き（スクロール連動、CSS だけ） ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    @keyframes reveal { from { opacity: 0; translate: 0 18px; } }
    .drift img { animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { translate: 0 -2.5%; } to { translate: 0 2.5%; } }

    .sit__track { view-timeline: --sit block; }
    .sit__stage { animation: sink linear both; animation-timeline: --sit; animation-range: contain 34% contain 52%; }
    @keyframes sink { to { background-color: oklch(4% 0 0); } }
    .sit__phone { animation: flip linear both; animation-timeline: --sit; animation-range: contain 8% contain 30%; }
    @keyframes flip { 0% { transform: perspective(500px) rotateX(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: perspective(500px) rotateX(180deg); opacity: 0; } }
    .sit__rings i:nth-child(1) { animation: ring linear both; animation-timeline: --sit; animation-range: contain 34% contain 50%; }
    .sit__rings i:nth-child(2) { animation: ring linear both; animation-timeline: --sit; animation-range: contain 44% contain 60%; }
    .sit__rings i:nth-child(3) { animation: ring linear both; animation-timeline: --sit; animation-range: contain 54% contain 70%; }
    @keyframes ring { from { scale: .2; opacity: 0; } 12% { opacity: .55; } to { scale: 1.7; opacity: 0; } }
    .sit__time { animation: appear linear both; animation-timeline: --sit; animation-range: contain 78% contain 92%; }
    @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
    .sit__steps { display: grid; }
    .sit__step { grid-area: 1 / 1; }
    .sit__step { animation: step linear both; animation-timeline: --sit; opacity: 0; }
    .sit__step:nth-child(1) { animation-range: contain 0% contain 26%; }
    .sit__step:nth-child(2) { animation-range: contain 26% contain 50%; }
    .sit__step:nth-child(3) { animation-range: contain 50% contain 76%; }
    .sit__step:nth-child(4) { animation-range: contain 76% contain 100%; }
    @keyframes step { 0% { opacity: 0; translate: 0 10px; } 18%, 82% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -8px; } }
    .sit__step:nth-child(4) { animation-name: step-last; }
    @keyframes step-last { 0% { opacity: 0; translate: 0 10px; } 30%, 100% { opacity: 1; translate: 0 0; } }

    .sit__after { background: linear-gradient(oklch(4% 0 0), var(--sumi) 40%); }
    .sit__after { margin-inline: 0; max-width: none; padding-inline: max(var(--gutter), calc((100% - 1320px) / 2 + var(--gutter))); }
    .henro__track { view-timeline: --walk block; }
    .henro__map .route--walk, .henro__map .route--glow { stroke-dasharray: 1 1; animation: walk linear both; animation-timeline: --walk; animation-range: contain 4% contain 86%; }
    @keyframes walk { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    .henro__map .walker.on { display: inline; animation: walker linear both; animation-timeline: --walk; animation-range: contain 4% contain 86%; }
    @keyframes walker { from { offset-distance: 0%; } to { offset-distance: 100%; } }
    @supports (counter-reset: km calc(1)) {
      .km-static { display: none; }
      .km-live { display: inline; counter-reset: km var(--km); animation: km linear both; animation-timeline: --walk; animation-range: contain 4% contain 86%; }
      .km-live::before { content: counter(km); }
      @keyframes km { from { --km: 0; } to { --km: 1106; } }
    }
  }
}
/* スクロール連動の無いブラウザ・動きを減らす設定：最終の形で見せる */
@supports not (animation-timeline: view()) {
  .sit__track { height: auto; }
  .sit__stage { position: relative; height: auto; min-height: 80svh; padding-block: 80px; }
  .sit__steps { position: relative; left: auto; bottom: auto; padding-inline: var(--gutter); margin-top: 40px; }
  .sit__time { position: relative; opacity: 1; }
  .sit__phone { display: none; }
  .henro__track { height: auto; }
  .henro__stage { position: relative; height: auto; padding-block: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .sit__track { height: auto; }
  .sit__stage { position: relative; height: auto; min-height: 80svh; padding-block: 80px; }
  .sit__steps { position: relative; left: auto; bottom: auto; padding-inline: var(--gutter); margin-top: 40px; }
  .sit__step { opacity: 1; }
  .sit__time { position: relative; opacity: 1; }
  .sit__phone { display: none; }
  .sit__rings i { opacity: .25; scale: 1; }
  .sit__rings i:nth-child(2) { scale: .7; } .sit__rings i:nth-child(3) { scale: .4; }
  .henro__track { height: auto; }
  .henro__stage { position: relative; height: auto; padding-block: 80px; }
  .phone-turn { transform: perspective(500px) rotateX(180deg); }
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 500ms; animation-timing-function: ease-in-out; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── 狭い画面 ── */
@media (max-width: 860px) {
  .promise__grid, .sit__after, .phrase__grid, .records__grid, .henro__stage { grid-template-columns: minmax(0, 1fr); }
  .promise__aside { position: static; }
  .approach__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62vw, 300px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .approach__grid figure { scroll-snap-align: start; }
  .seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screens .screen:nth-child(3) { display: none; }
  .paths__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path--text { grid-template-columns: minmax(0, 1fr); }
  .people__grid { grid-template-columns: minmax(0, 1fr); }
  .henro__track { height: 180vh; }
  .henro__stage { align-content: center; gap: 12px; }
  .henro__map { width: 100%; height: auto; max-height: none; aspect-ratio: 1000 / 797; }
  .henro .lead { font-size: var(--step-0); line-height: 1.8; }
  .henro__map .pin-label { font-size: 42px; stroke-width: 10px; }
  .henro__map .route--walk { stroke-width: 9; }
  .henro__stage { padding-top: 64px; }
  .henro__stage .caption:not(.henro__attr) { display: none; }
  .henro__attr { font-size: 10px; line-height: 1.5; }
  .henro__big { font-size: var(--step-3); margin: 0 0 .2em; }
  .sky__ko { grid-template-columns: minmax(0, 1fr); }
  .sky__ko .tate { writing-mode: horizontal-tb; font-size: var(--step-3); }
  .topnav .hide-sm { display: none; }
}

/* ── 見つからないページ ── */
.lost { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 0; }
.lost__links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--ui); font-size: 14px; }
.lost__links a { color: var(--shu-night); min-height: 44px; display: inline-flex; align-items: center; }