/* 椨屋 — site.css
   プロトタイプ（data/execution_plans/IDEA-500/site_design/prototype_top.html・承認済み）のデザイン言語を
   全ページへ展開したもの。配色6色・書体3層・モーション（にじむ・流れる・暮れる・降りる・気配）は同一。
   英語版は :lang(en) で組版だけを上書きする（CSSを言語別に分けない＝design_concept.md §9.2）。 */

/* ── Tokens ─────────────────────────────────────────── */
:root{
  --kasumi:#B7BCB3;   /* 暮霞  dusk mist: 逢魔時の空 */
  --usuzumi:#6B726C;  /* 薄墨  fog shadow */
  --tabu:#26352D;     /* 椨葉  タブノキの濃い葉色 */
  --yoru:#121714;     /* 夜苔  night: 真黒ではなく苔の闇 */
  --rin:#A6C4BA;      /* 燐    狐火のような青白い光（リンク・焦点のみ） */
  --shu:#8A4E3E;      /* 褪朱  創作の印のみ */
  --ink:#1B211D;
  --paper-night:#D3D6CE;
  --dim-night:#8B938C;   /* 夜の上の補助文字（5.7:1） */
  --faint-night:#929A93; /* 旧 #5d665f 等（3:1前後）の置き換え。補助文字は 4.5:1 を割らない */
  --rule:#2c3531;

  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-util:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --ls-display:.14em; --ls-body:.02em; --ls-util:.2em;

  --slow:cubic-bezier(.22,.61,.36,1);
}
:lang(en){
  --f-display:"IM Fell English","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Spectral","Iowan Old Style",Georgia,serif;
  --f-util:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --ls-display:.01em; --ls-body:0; --ls-util:.08em;
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  background:var(--yoru);color:var(--paper-night);
  font-family:var(--f-body);font-size:17px;line-height:2;letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body:lang(en){font-size:18px;line-height:1.75}
a{color:inherit}
:focus-visible{outline:1px solid var(--rin);outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--yoru);color:var(--rin);padding:8px 14px;font-family:var(--f-util);font-size:13px;text-decoration:none;border:1px solid var(--rin)}
.skip:focus{top:12px}

/* ── Header ──────────────────────────────────────────
   mix-blend-mode はやめ、霧の上/夜の上で文字色クラスを切り替える（§9.4 ヘッダーのコントラスト） */
.mast{
  position:fixed;inset:0 0 auto 0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px clamp(16px,4vw,40px);
  font-family:var(--f-util);font-size:12px;letter-spacing:var(--ls-util);
  color:#cfd3cc;transition:color .8s var(--slow),background-color .8s var(--slow);
}
.mast.scrolled{background:linear-gradient(180deg,rgba(18,23,20,.86),rgba(18,23,20,0))}
.mast.on-light{color:var(--ink);background:none}
.mast.on-light :focus-visible{outline-color:var(--tabu)}
.mark{font-family:var(--f-display);font-size:20px;letter-spacing:.3em;text-decoration:none;line-height:1}
.mark ruby rt{font-family:var(--f-util);font-size:9px;letter-spacing:.4em}
.mark:lang(en){letter-spacing:.3em}
.mast-r{display:flex;align-items:center;gap:clamp(12px,2.4vw,26px)}
.mast-r a{text-decoration:none}
.mast-r a:hover{text-decoration:underline;text-underline-offset:5px}
.lang a[aria-current="true"]{opacity:.55;pointer-events:none;text-decoration:none}
.lang .sep{opacity:.5;margin:0 .3em}
.sound{
  background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:6px 0;position:relative;
}
.sound .wave{display:inline-flex;gap:2px;align-items:center;height:12px}
.sound .wave i{width:1px;height:3px;background:currentColor;transition:height .6s var(--slow)}
.sound[aria-pressed="true"] .wave i{animation:wv 2.4s ease-in-out infinite}
.sound[aria-pressed="true"] .wave i:nth-child(2){animation-delay:-.8s}
.sound[aria-pressed="true"] .wave i:nth-child(3){animation-delay:-1.6s}
@keyframes wv{50%{height:12px}}
.mast-r{position:relative}
.sound-hint{position:absolute;right:0;top:100%;margin-top:6px;white-space:nowrap;font-size:11px;letter-spacing:.06em;opacity:0;transition:opacity .8s;pointer-events:none}
.sound-hint.show{opacity:.85}

/* ── Hero: 逢魔時（トップ）/ 下層の霧の帯 ─────────────── */
.hero{
  position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
  background:linear-gradient(180deg,#9DA49C 0%,var(--kasumi) 48%,#A9AFA5 70%,var(--usuzumi) 100%);
  color:var(--ink);
}
.hero.sub{height:74vh;height:74svh;min-height:520px}
/* 滞在するほど暮れていく（見出しのコントラスト4.5:1を割らない .4 で止める） */
.hero .dusk{position:absolute;inset:0;background:linear-gradient(180deg,#2a3330,#151b18);opacity:0;animation:dusk 140s linear forwards;pointer-events:none}
@keyframes dusk{to{opacity:.4}}
.fog{position:absolute;left:-50%;width:200%;pointer-events:none;will-change:transform}
.fog.f1{bottom:12%;height:40%;background:radial-gradient(ellipse 30% 50% at 30% 60%,rgba(214,218,210,.55),transparent 70%),radial-gradient(ellipse 25% 40% at 75% 50%,rgba(214,218,210,.4),transparent 70%);animation:drift 90s linear infinite}
.fog.f2{bottom:-4%;height:34%;background:radial-gradient(ellipse 35% 60% at 55% 55%,rgba(190,196,188,.6),transparent 72%);animation:drift 140s linear infinite reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(25%)}}
.treeline{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;pointer-events:none}
.hero.sub .treeline{height:40%}
.treeline .far{fill:#737a73;opacity:.75}
.treeline .near{fill:var(--tabu)}
/* 気配: 入力が止まると木立の間に立つ（js が opacity/transform を与える） */
.presence{transition:opacity 7s var(--slow),transform 7s var(--slow);opacity:0;transform-origin:50% 100%;transform-box:fill-box}
.presence.gone{transition:opacity .5s linear}

.headline{
  position:absolute;top:max(50%,300px);right:clamp(24px,12vw,180px);transform:translateY(-54%);
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(26px,min(4.4vw,5.6svh),52px);line-height:1.9;letter-spacing:var(--ls-display);white-space:nowrap;
  color:var(--ink);z-index:2;
}
.headline span{display:block}
.headline span:nth-child(2){padding-top:2.2em}
.lede{
  position:absolute;left:clamp(16px,6vw,72px);top:max(26%,96px);max-width:21em;
  font-size:15px;line-height:2.1;color:#1f2521;z-index:3;
}
.lede small{display:block;margin-top:.6em;font-family:var(--f-util);font-size:11px;letter-spacing:.18em;color:#39413b}
.cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  font-family:var(--f-util);font-size:11px;letter-spacing:.3em;color:#c7ccc3;text-decoration:none;
  writing-mode:vertical-rl;
}
.cue::after{content:"";display:block;margin:10px auto 0;width:1px;height:36px;background:currentColor;animation:line 3s ease-in-out infinite}
@keyframes line{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 下層ヒーロー: 縦書きの話番号＋見出し、左に索引の位置（パンくず） */
/* 下層の縦書き見出し: ヘッダーの下から始め、杉林にかからない高さで折り返す（長い題は次の行＝左の列へ） */
.sub .headline{top:84px;transform:none;font-size:clamp(24px,min(3.6vw,4.6svh),42px);white-space:normal;height:calc(58% - 96px);line-height:1.7}
.sub .tale-mark{display:block;font-size:.62em;letter-spacing:.2em;color:#39413b;padding-left:.6em}
.crumbs{position:absolute;left:clamp(16px,6vw,72px);top:max(22%,88px);z-index:3;font-family:var(--f-util);font-size:12px;letter-spacing:.14em;color:#2e3631;max-width:24em;line-height:2}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 .2em}
.crumbs li:not(:last-child)::after{content:"／";margin:0 .4em;opacity:.6}
.crumbs a{text-decoration:none;border-bottom:1px solid rgba(27,33,29,.35)}
.crumbs a:hover{border-color:var(--ink)}
.crumbs .sub-lede{display:block;margin-top:1.4em;font-family:var(--f-body);font-size:15px;letter-spacing:.04em;line-height:2.1;color:#1f2521}

/* 最初に現れる（墨のにじみ）: JS が動く時だけ隠す（§9.4 JSが動かないと表示されない問題） */
html.js .seep{opacity:0;filter:blur(8px);animation:seep 3.2s var(--slow) forwards}
html.js .headline span:nth-child(2).seep{animation-delay:1.6s}
html.js .lede.seep,html.js .crumbs.seep{animation-duration:2.4s;animation-delay:2.6s}
html.js .cue.seep{animation-duration:2s;animation-delay:4.4s}
@keyframes seep{to{opacity:1;filter:blur(0)}}

/* ── 暮れていく帯 ──────────────────────────────────── */
.dusk-band{height:60vh;background:linear-gradient(180deg,var(--tabu),#1a221e 45%,var(--yoru));display:flex;align-items:center;justify-content:center}
.dusk-band.short{height:34vh;min-height:340px}
.dusk-band p{writing-mode:vertical-rl;font-family:var(--f-display);font-size:15px;letter-spacing:.5em;color:#aeb4ab;opacity:.8}

/* ── Section frame ─────────────────────────────────── */
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,5vw,48px)}
.sec{padding:clamp(80px,14vh,150px) 0}
.sec.tight{padding-top:clamp(40px,8vh,90px)}
.eyebrow{font-family:var(--f-util);font-size:11px;letter-spacing:.34em;color:var(--dim-night)}
h2{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,3vw,32px);letter-spacing:.16em;line-height:1.6;margin:.5em 0 1.4em}
h2:lang(en){letter-spacing:.01em;font-weight:400;font-size:clamp(26px,3.2vw,36px);line-height:1.3}

/* reveal on scroll（JSが動く時だけ隠す）。ぼかしは大画面・マウス環境のみ（低性能端末の負荷を下げる） */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity 1.8s var(--slow),transform 1.8s var(--slow)}
html.js .rv.in{opacity:1;transform:none}
@media (min-width:821px) and (hover:hover){
  html.js .rv{filter:blur(4px);transition:opacity 1.8s var(--slow),transform 1.8s var(--slow),filter 1.8s var(--slow)}
  html.js .rv.in{filter:none}
}

/* ── 今宵の一話 / 話ページの本文 ───────────────────── */
.tonight{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,6vw,80px);align-items:start}
.tale-no{writing-mode:vertical-rl;font-family:var(--f-display);font-size:clamp(40px,6vw,72px);letter-spacing:.1em;line-height:1;color:#65716a;user-select:none}
.tale-no:lang(en){writing-mode:horizontal-tb;font-variant:small-caps;letter-spacing:.08em;font-size:clamp(22px,2.6vw,30px);color:#56625b;white-space:nowrap}
.tale h3{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,2.4vw,27px);letter-spacing:.1em;line-height:1.6;margin-bottom:1em}
.tale h3:lang(en){font-weight:400;letter-spacing:.01em;font-size:clamp(24px,2.8vw,31px);line-height:1.3}
.tale h3 a{text-decoration:none}
.tale h3 a:hover{color:var(--rin)}
.tale .body{max-width:33em;font-size:18px;line-height:2.2;min-height:8.8em}
.tale .body:lang(en){max-width:34em;font-size:19px;line-height:1.8;min-height:7em}
/* 一文字（英語は一語）ずつ。見た目用の span は aria-hidden、読み上げは .sr の全文（§9.4） */
.ink .ch{opacity:0;filter:blur(5px);transition:opacity 1.1s var(--slow),filter 1.4s var(--slow)}
.ink .ch.on{opacity:1;filter:none}
.ink.lite .ch{filter:none}
.tale dl,.record dl{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:2em;font-family:var(--f-util);font-size:12px;letter-spacing:.12em;color:var(--dim-night)}
.tale dl:lang(en),.record dl:lang(en){letter-spacing:.04em;font-size:13px}
.tale dt,.record dt{display:inline;color:var(--faint-night);margin-right:.6em}
.tale dd,.record dd{display:inline}
.tale dd a,.record dd a{text-decoration:none;border-bottom:1px solid #3d4943;transition:color .6s,border-color .6s}
.tale dd a:hover,.record dd a:hover{color:var(--rin);border-color:var(--rin)}
.tale-actions{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:2.4em}
.relight,.textlink{
  background:none;border:0;border-bottom:1px solid #46514b;text-decoration:none;
  color:var(--rin);font-family:var(--f-util);font-size:13px;letter-spacing:.24em;padding:6px 0;cursor:pointer;
  transition:border-color .6s
}
.relight:lang(en),.textlink:lang(en){letter-spacing:.06em}
.relight:hover,.textlink:hover{border-color:var(--rin)}

/* 話ページ（記録） */
.record{display:grid;grid-template-columns:minmax(0,1fr) 15em;gap:clamp(32px,6vw,72px);align-items:start}
.record .main{min-width:0}
.record .body{font-size:18px;line-height:2.25;max-width:33em}
.record .body:lang(en){font-size:19px;line-height:1.8}
.record .note{margin-top:2.2em;font-family:var(--f-util);font-size:12px;line-height:2;letter-spacing:.06em;color:var(--dim-night);max-width:40em}
.record .note:lang(en){letter-spacing:.02em;font-size:13px;line-height:1.75}
.record aside{font-family:var(--f-util);font-size:12.5px;line-height:2;letter-spacing:.06em;color:var(--dim-night);border-left:1px solid var(--rule);padding-left:22px}
.record aside h3{font-family:var(--f-display);font-weight:500;font-size:15px;letter-spacing:.18em;color:var(--paper-night);margin-bottom:.6em}
.record aside h3:lang(en){letter-spacing:.02em}
.record aside ul{list-style:none}
.record aside a{text-decoration:none}
.record aside a:hover{color:var(--rin)}
.pager{display:flex;justify-content:space-between;gap:24px;margin-top:4em;padding-top:1.6em;border-top:1px solid var(--rule);font-family:var(--f-util);font-size:13px;letter-spacing:.1em}
.pager a{text-decoration:none;color:var(--dim-night);max-width:48%}
.pager a:hover{color:var(--rin)}
.pager .next{text-align:right;margin-left:auto}
.pager small{display:block;font-size:11px;letter-spacing:.2em;color:var(--faint-night)}

/* ── 索引: 三つの入口 ───────────────────────────────── */
.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,64px)}
.index-col h3{font-family:var(--f-display);font-weight:500;font-size:19px;letter-spacing:.2em;padding-bottom:.8em;border-bottom:1px solid #2f3934;margin-bottom:.6em}
.index-col h3:lang(en){letter-spacing:.02em;font-size:21px;font-weight:400}
.index-col h3 small{font-family:var(--f-util);font-size:11px;letter-spacing:.14em;color:var(--dim-night);margin-left:.8em}
.idx{list-style:none}
.idx a{display:flex;align-items:baseline;gap:8px;text-decoration:none;padding:.42em 0;font-size:15.5px;line-height:1.6;transition:color .8s var(--slow)}
.idx a:lang(en){font-size:16.5px}
.idx a .code{font-family:var(--f-util);font-size:10px;letter-spacing:.1em;color:var(--faint-night);width:2.6em;flex:none}
.idx a .lead{flex:1;border-bottom:1px dotted #333d38;transform:translateY(-4px);min-width:12px}
.idx a .n{font-family:var(--f-util);font-size:12px;color:var(--dim-night);font-variant-numeric:tabular-nums}
.idx a:hover,.idx a:focus-visible{color:var(--rin)}
.idx a:hover .lead{border-color:#4f6660}
.idx-note{margin-top:1.4em;font-family:var(--f-util);font-size:11.5px;line-height:1.9;letter-spacing:.06em;color:var(--dim-night)}

/* ── 土地 ─────────────────────────────────────────── */
.lands{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#252d29;border:1px solid #252d29;margin-top:.4em}
.lands.one{grid-template-columns:1fr}
.land{background:var(--yoru);padding:28px 24px 30px;text-decoration:none;display:block;position:relative;overflow:hidden;transition:background 1.2s var(--slow)}
.land:hover,.land:focus-visible{background:#18201c}
.land .pref{font-family:var(--f-util);font-size:11px;letter-spacing:.24em;color:var(--dim-night)}
.land .name{font-family:var(--f-display);font-size:26px;letter-spacing:.2em;margin:.3em 0 .5em;line-height:1.4}
.land .name:lang(en){letter-spacing:.02em;font-size:27px}
.land .src{font-size:13.5px;line-height:1.8;color:#9aa29b;padding-right:84px;position:relative;z-index:1}
.land .src b{display:block;font-weight:400;font-family:var(--f-util);font-size:11.5px;letter-spacing:.14em;color:var(--dim-night);margin-top:.4em}
.land .count{position:absolute;right:18px;bottom:6px;font-family:var(--f-display);font-size:64px;line-height:1;color:#1f2824;letter-spacing:-.02em;transition:color 1.2s}
.land:hover .count{color:#2c3a34}

/* ── 一覧（類型・存在・土地・全話） ─────────────────── */
.talelist{list-style:none;border-top:1px solid var(--rule)}
.talelist li{border-bottom:1px solid var(--rule)}
.talelist a{display:grid;grid-template-columns:5.2em 1fr;gap:4px 20px;padding:18px 4px 20px;text-decoration:none;transition:background 1s var(--slow)}
.talelist a:hover,.talelist a:focus-visible{background:#161c19}
.talelist .no{font-family:var(--f-display);font-size:14px;letter-spacing:.1em;color:var(--dim-night);padding-top:.25em}
.talelist .no:lang(en){font-variant:small-caps;letter-spacing:.04em;font-size:15px}
.talelist .tt{font-family:var(--f-display);font-size:18px;letter-spacing:.1em;line-height:1.6;transition:color .8s}
.talelist .tt:lang(en){letter-spacing:.01em;font-size:20px;line-height:1.35}
.talelist a:hover .tt{color:var(--rin)}
.talelist .ex{grid-column:2;font-size:14px;line-height:1.95;color:#9aa29b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.talelist .ex:lang(en){font-size:15.5px;line-height:1.6}
.talelist .meta{grid-column:2;font-family:var(--f-util);font-size:11px;letter-spacing:.12em;color:var(--dim-night)}
.group-h{font-family:var(--f-display);font-weight:500;font-size:19px;letter-spacing:.2em;margin:3.2em 0 1em;display:flex;align-items:baseline;gap:.8em}
.group-h:lang(en){letter-spacing:.02em;font-size:21px;font-weight:400}
.group-h small{font-family:var(--f-util);font-size:11px;letter-spacing:.14em;color:var(--dim-night)}
.group-h:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0 0 3em}
.chips a{display:inline-block;padding:4px 12px;border:1px solid #2f3934;font-family:var(--f-util);font-size:12px;letter-spacing:.1em;text-decoration:none;color:var(--dim-night);transition:color .6s,border-color .6s}
.chips a:hover,.chips a[aria-current="page"]{color:var(--rin);border-color:#4f6660}
.lead-p{max-width:38em;font-size:15.5px;line-height:2.1;color:#aab1a9;margin-bottom:2.6em}
.lead-p:lang(en){font-size:17px;line-height:1.7}

/* ── 読み物 (創作) ─────────────────────────────────── */
.yomimono{background:linear-gradient(180deg,var(--yoru),#1a201c 30%,#1a201c)}
.yomi-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.yomi-head p{max-width:28em;font-size:14.5px;line-height:2;color:#9aa29b}
.seal{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--shu);color:#b5725f;font-family:"Shippori Mincho B1","Yu Mincho",serif;font-size:13px;letter-spacing:0;border-radius:2px;flex:none;vertical-align:middle;margin-right:.6em}
.seal-note{font-family:var(--f-util);font-size:11px;letter-spacing:.14em;color:#b5725f}
.shelf{list-style:none;margin-top:3em;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0}
.shelf li{border-top:1px solid var(--rule)}
.shelf a{display:flex;gap:16px;padding:22px 8px 24px 0;text-decoration:none}
.shelf .t{writing-mode:vertical-rl;font-family:var(--f-display);font-size:19px;letter-spacing:.18em;line-height:1.5;min-height:7.2em;transition:color .8s}
.shelf .m{font-family:var(--f-util);font-size:11px;line-height:1.9;letter-spacing:.08em;color:var(--dim-night);padding-top:2px}
.shelf .m b{display:block;font-weight:400;color:#a3aba3}
.shelf a:hover .t,.shelf a:focus-visible .t{color:var(--rin)}
/* 英語: 横書きタイトル＋細い縦罫で背表紙に見立てる */
.shelf:lang(en) a{flex-direction:column;gap:6px;border-left:1px solid var(--rule);padding-left:16px;margin-left:0}
.shelf:lang(en) .t{writing-mode:horizontal-tb;min-height:0;letter-spacing:.01em;font-size:20px;line-height:1.3}

/* 読み物ページ */
.story{max-width:36em;margin:0 auto}
.story .badge{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid #3b2e29;background:#191512;font-family:var(--f-util);font-size:12.5px;line-height:1.9;letter-spacing:.05em;color:#c9b3aa;margin-bottom:3em}
.story .text p{font-size:17.5px;line-height:2.25;text-indent:1em;margin-bottom:1.1em}
.story .basedon{margin-top:3.6em;padding-top:1.6em;border-top:1px solid var(--rule);font-family:var(--f-util);font-size:12.5px;line-height:2.1;letter-spacing:.06em;color:var(--dim-night)}
.story .basedon a{color:var(--rin);text-decoration:none;border-bottom:1px solid #3d4943}
.hero.fiction{background:linear-gradient(180deg,#8f958d 0%,#a3a89f 50%,#6B726C 100%)}

/* ── 本文ページ（椨屋について） ─────────────────────── */
.prose{max-width:38em}
.prose h2{margin-top:2.4em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:16px;line-height:2.1;color:#bfc4bc;margin-bottom:1em}
.prose:lang(en) p,.prose:lang(en) li{font-size:17px;line-height:1.75}
.prose ul{padding-left:1.2em}
.prose a{color:var(--rin)}

/* ── Footer ───────────────────────────────────────── */
footer{border-top:1px solid #222a26;padding:56px 0 72px;font-family:var(--f-util);font-size:11.5px;line-height:2.1;letter-spacing:.05em;color:var(--dim-night)}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
footer strong{font-weight:500;color:#a3aba3}
footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:2.4em}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--rin)}
footer .ai{margin-top:1.6em}

/* ── 英語版の組版（縦書き→横書きフォールバック・§9.2） ── */
.headline:lang(en){
  writing-mode:horizontal-tb;right:clamp(20px,8vw,140px);left:auto;top:max(38%,200px);transform:translateY(-50%);
  font-weight:400;font-size:clamp(30px,min(4.6vw,7svh),60px);line-height:1.18;letter-spacing:.005em;white-space:normal;text-align:right;max-width:13em
}
.headline:lang(en) span:nth-child(2){padding-top:0;margin-right:1.6em}
.sub .headline:lang(en){font-size:clamp(28px,min(4vw,6svh),50px);max-width:14em;top:max(40%,210px);transform:translateY(-50%);height:auto}
.sub .headline:lang(en) .tale-mark{display:block;font-size:.42em;letter-spacing:.14em;font-variant:small-caps;padding:0 0 .5em}
.lede:lang(en){font-size:16px;line-height:1.7;max-width:22em}
.lede:lang(en) small,.crumbs:lang(en){letter-spacing:.06em}
.crumbs:lang(en) .sub-lede{font-size:16px;line-height:1.7}
.cue:lang(en){writing-mode:horizontal-tb;letter-spacing:.14em;text-align:center}
.dusk-band p:lang(en){writing-mode:horizontal-tb;letter-spacing:.3em;font-style:italic;font-size:17px;text-align:center;padding:0 16px}
.eyebrow:lang(en){letter-spacing:.24em;text-transform:uppercase;font-size:10.5px}

/* ── Responsive ───────────────────────────────────── */
@media (max-width:820px){
  .index-grid,.lands{grid-template-columns:1fr}
  .tonight{grid-template-columns:1fr}
  .tale-no{writing-mode:horizontal-tb;font-size:40px}
  .record{grid-template-columns:1fr}
  .record aside{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:22px}
  footer .cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .headline{right:14px;top:40%;font-size:24px}
  .sub .headline{top:76px;font-size:22px;height:calc(58% - 84px)}
  .lede{left:16px;top:auto;bottom:calc(46% + 8px);font-size:13.5px;max-width:13em}
  .crumbs{left:16px;top:84px;max-width:13.5em;font-size:11px}
  .crumbs .sub-lede{font-size:13px}
  .lede small{letter-spacing:.1em}
  .cue{display:none}
  .shelf{grid-template-columns:repeat(2,1fr)}
  .shelf .t{font-size:17px;min-height:6.4em}
  .mast{padding:12px 16px;gap:10px}
  .mast-r .idxlink{display:none}
  .sound .label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .talelist a{grid-template-columns:3.6em 1fr;gap:4px 12px}
  .headline:lang(en){left:16px;right:16px;top:84px;transform:none;font-size:29px;max-width:none;text-align:left}
  .headline:lang(en) span:nth-child(2){margin-right:0;margin-left:1.2em}
  .sub .headline:lang(en){top:auto;bottom:calc(40% + 18px);transform:none;font-size:26px}
  .lede:lang(en){bottom:calc(46% + 8px);font-size:14.5px;max-width:15em}
  .shelf:lang(en){grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .seep,html.js .rv,.ink .ch{opacity:1!important;filter:none!important;transform:none!important}
}