/* lp.css — Bean & Stone LP（新デザイン）＋ 索引「今日の石」セクションの視覚の正。
   fable.css の後に読み込む（head() が順に link）。
   ・LP 系の全規則は body.lp（.lp / .lp-ja / .lp-en）配下に閉じ込め、fable.css・索引側と
     クラス名が衝突しても影響しないようにしてある（プロト styles.css / ja/ja.css を移植）。
   ・索引ページ用の「今日の石」セクション（.today-* / .archive-start）は固有クラス名で衝突なし、
     fable.css の CSS 変数（--shu/--ai/--hair/--serif-*…）を参照する（プロト stones/index-hybrid.css を移植）。
   フォントはプロトの "EB Garamond"/"Noto Serif JP" 直書きをやめ、本体が実際に読み込む
   fable.css の --serif-en / --serif-jp に載せ替えてある。 */

/* ===========================================================================
   LP（body.lp 配下） — プロト styles.css の移植
   =========================================================================== */
.lp {
  --paper:#f3eee2; --paper-deep:#e7deca; --ink:#20221f; --muted:#6f6b61;
  --verm:#a13a28; --indigo:#243b56; --line:rgba(32,34,31,.22); --white:#fffdf6;
  margin:0; min-width:320px;
  color:var(--ink); background:var(--paper);
  font-family:var(--serif-en); line-height:1.55; font-synthesis:none;
}
.lp *{box-sizing:border-box}
.lp a,.lp button{-webkit-tap-highlight-color:transparent}
.lp a:focus-visible,.lp button:focus-visible{outline:3px solid var(--verm);outline-offset:4px}
.lp .skip-link{position:fixed;z-index:20;top:.5rem;left:.5rem;padding:.7rem 1rem;color:var(--white);background:var(--ink);transform:translateY(-160%)}
.lp .skip-link:focus{transform:none}
.lp .site-head{min-height:5rem;padding:1rem clamp(1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line)}
.lp .brand{display:flex;align-items:center;gap:.75rem;margin:0;color:inherit;text-decoration:none;font-size:1.08rem;letter-spacing:.04em}
/* 2026-07-17: fable.css の .brand{margin-bottom:1.6rem} がフレックス中央揃えをマージン込みでずらすため LP では打ち消す */
.lp .brand .seal{width:2.1rem;height:2.1rem;flex:none}
.lp .place{color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.lp .head-side{display:flex;align-items:center;gap:1.4rem}
/* 2026-07-17: 所在ラベル（.place）を撤去。ワードマークと言語リンクの高さを揃えるため
   .site-head/.head-side は align-items:center のまま、langlink は nowrap で二段折れを防ぐ。 */
.lp .langlink{display:inline-flex;align-items:center;line-height:1;color:var(--ink);font-family:var(--serif-jp);font-size:.82rem;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.1rem;white-space:nowrap}
.lp .langlink:hover{color:var(--verm);border-color:var(--verm)}
.lp .hero{min-height:calc(100svh - 5rem);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);border-bottom:1px solid var(--line)}
.lp .hero-copy{padding:clamp(2.75rem,5vw,5rem) clamp(1.25rem,6vw,7rem);align-self:center}
.lp .eyebrow,.lp .folio{margin:0 0 1rem;color:var(--verm);font-size:.69rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.lp h1,.lp h2,.lp h3,.lp p{font-weight:400}
.lp h1{max-width:900px;margin:0;font-size:clamp(3.2rem,7.2vw,7rem);line-height:.86;letter-spacing:-.045em}
.lp .lead{max-width:690px;margin:2rem 0 0;font-size:clamp(1.05rem,1.8vw,1.32rem);line-height:1.65}
.lp .hero-actions{margin-top:2.25rem;display:flex;align-items:stretch;gap:.75rem;flex-wrap:wrap}
.lp .button{min-height:3.25rem;padding:.85rem 1.1rem;display:inline-flex;align-items:center;justify-content:space-between;gap:1.5rem;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:.95rem}
.lp .button.primary{color:var(--white);background:var(--indigo);border-color:var(--indigo)}
.lp .button.secondary{background:transparent}
.lp .button:hover{box-shadow:inset 0 -3px 0 var(--verm)}
.lp .button .btn-icon{width:1.15em;height:1.15em;flex:none}
.lp .field-note{padding:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:center;color:var(--white);background:var(--indigo)}
.lp .field-note .folio{color:#d9bd91;text-align:center}
/* 説明文は藍のパネル下部（図版の下）へ置く＝ヒーロー左は h1 が単独で立つ（2026-07-19）。
   図版と同じ幅に収め、キャプションとは間隔で切り分ける。 */
.lp .field-note .panel-lede{margin:clamp(1.5rem,3vw,2.25rem) 0 0;color:rgba(255,255,255,.78);
  font-size:.86rem;line-height:1.8}
/* 冒頭の一文だけ一段大きく＝太字にしない。藍地×白文字では bold が滲んで（halation）
   かえって読みにくく、静かなパネルが宣伝的に転ぶため（2026-07-20・Sol所見と一致）。 */
.lp .field-note .panel-lede-open{margin:clamp(1.5rem,3vw,2.25rem) 0 0;color:rgba(255,255,255,.92);
  font-size:1.02rem;line-height:1.6}
.lp .field-note .panel-lede-open+.panel-lede{margin-top:.9rem}
/* コンセプト図版（湯気→道）＝藍の野帖に貼った紙片として置く。
   multiply 等のブレンドは藍地と掛け算されて青変するため使わない（2026-07-18実測） */
.lp .concept-fig{margin:.2rem 0 0}
/* 2026-07-23: 図版を今日の小径（walks/）へのリンクに変更＝a.concept-link が img+figcaption を
   包む。可視のリンク名は figcaption（画像は alt=""）。藍地の上の朱フォーカスリングは
   コントラスト1.72:1しかないため、このリンクだけ白へ上書き（#fffdf6＝11.24:1）。 */
.lp .concept-link{display:block;color:inherit;text-decoration:none}
.lp .concept-link:focus-visible{outline-color:var(--white)}
/* バッチ3(2026-07-24): 縁の処理＝裏に何も敷かない（影・角丸なし＝元画像のギザギザ感を残す）。
   mix-blend-mode:lighten で黒い縁のピクセルは背景の藍がそのまま透け、明るい紙面は残る。 */
.lp .concept-fig img{display:block;width:100%;height:auto;mix-blend-mode:lighten;transition:transform .28s ease}
.lp .concept-link:hover img,.lp .concept-link:focus-visible img{transform:translateY(-2px)}
.lp .concept-fig figcaption{margin-top:.95rem;font-size:.66rem;letter-spacing:.16em;color:#f3eee2;text-align:center}
.lp .ready-made h2,.lp .shelf h2{margin:0;font-size:clamp(2.4rem,4.8vw,5rem);line-height:.95;letter-spacing:-.035em}
/* Ready-made 小径（2026-07-19・LP主力 Quiet Walks 転換）＝ヒーロー直下の帯。
   意匠は撤去した .door と .shelf の語彙を引き継ぎ、朱は増やさない（eyebrow のみ朱）。
   カード全面をリンクにするため a 要素そのものをカードにする（副リンクが無いので
   擬似リンク方式は要らない）。 */
.lp .ready-made{padding:clamp(3rem,6vw,6rem) clamp(1rem,6vw,6rem);border-bottom:1px solid var(--line)}
.lp .ready-made>header{max-width:44rem;margin:0 0 clamp(2rem,4vw,3rem)}
.lp .ready-made>header p:last-child{margin:1rem 0 0;color:var(--muted);font-size:.9rem}
/* 2026-07-23: 3列グリッド→横スクロール帯に転換（4枚目「あなたの小径」の発見性を確保）。
   padding-block で浮き上がり・box-shadow・フォーカスリングが容器端で切れないようにする。
   scroll-padding-inline はスナップ先頭がコンテナ左端でぴったり止まるように。 */
/* バッチ3(2026-07-24): カードは常に1枚センター（左右チラ見え廃止）。mandatory スナップで
   スワイプで弾いても次カードが正位置に収まる。傾き検知の染み出しは --tiltX（translate は
   transform と独立に合成されるため hover の transform と衝突しない）。 */
.lp .walk-cards{display:flex;gap:clamp(1rem,2vw,1.5rem);overflow-x:auto;
  padding:1rem 0 1.4rem;margin:-1rem 0 -1.4rem;scroll-snap-type:x mandatory;
  scroll-padding-inline:0;scrollbar-width:thin}
.lp .walk-cards::-webkit-scrollbar{height:6px}
.lp .walk-cards::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.lp .walk-cards>.walk-card{translate:var(--tiltX,0) 0}
.lp .walk-card{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;padding:clamp(1.5rem,2.5vw,2rem);display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--white);color:inherit;text-decoration:none;
  transition:transform .28s ease,box-shadow .28s ease}
.lp .walk-card:hover,.lp .walk-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 20px -14px rgba(32,34,31,.55)}
.lp .walk-card .roman{margin:0;color:var(--verm);font-size:.7rem;letter-spacing:.16em}
/* 見出しが1行の札と2行の札が混ざるとメタ罫線の高さが揃わない＝2行分を確保して揃える。 */
.lp .walk-card h3{margin:.6rem 0 0;min-height:2.3em;font-size:1.6rem;line-height:1.15}
.lp .walk-card .walk-meta{margin:.8rem 0 0;padding:.55rem 0;display:flex;flex-wrap:wrap;gap:.15rem .9rem;
  border-block:1px solid var(--line);color:var(--ink);font-size:.78rem;letter-spacing:.04em}
.lp .walk-card .walk-lede{margin:.9rem 0 1.4rem;color:var(--muted);font-size:.88rem;line-height:1.7}
.lp .walk-card .walk-open{margin:auto 0 0;font-size:.8rem}
.lp .walk-card .walk-open span{display:inline-block;transition:transform .24s ease}
.lp .walk-card:hover .walk-open span{transform:translateX(4px)}
/* 4枚目「あなたの小径」＝藍地（--indigo）。既存の朱・muted は藍地でコントラスト不足になる
   ため文字色を白系へ明示上書き。フォーカスリングも白（藍地での朱1.72:1対策・改修1と同様）。 */
.lp .walk-card-blank{background:var(--indigo);border-color:var(--indigo)}
.lp .walk-card-blank .roman{color:#f3eee2}
.lp .walk-card-blank h3{color:var(--white)}
.lp .walk-card-blank .walk-lede{margin-bottom:1.4rem;color:#f3eee2}
.lp .walk-card-blank .walk-open{color:var(--white)}
.lp .walk-card-blank:focus-visible{outline-color:var(--white)}
.lp .walk-build{margin:clamp(1.75rem,3vw,2.5rem) 0 0;color:var(--muted);font-size:.88rem}
.lp .walk-build a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.lp .walk-build a:hover{color:var(--verm);border-color:var(--verm)}
@media (prefers-reduced-motion:reduce){
  .lp .walk-card,.lp .walk-card .walk-open span,.lp .concept-fig img{transition:none}
  .lp .walk-card:hover,.lp .walk-card:focus-visible{transform:none}
  .lp .walk-card:hover .walk-open span{transform:none}
  .lp .concept-link:hover img,.lp .concept-link:focus-visible img{transform:none}
}
.lp .shelf{display:grid;grid-template-columns:.8fr 1fr}
/* 左右の padding は .ready-made（section 側 clamp(1rem,6vw,6rem)）と揃える＝
   見出しの左端が節をまたいで一直線に並ぶ。四辺同値だと狭い画面で中央寄りに見えた。 */
.lp .shelf>header{grid-row:1/5;padding:clamp(3rem,6vw,6rem) clamp(1rem,6vw,6rem);border-right:1px solid var(--line)}
.lp .shelf>a{min-height:8rem;padding:1.6rem clamp(1rem,4vw,4rem);display:grid;grid-template-columns:3rem 1fr auto;gap:.15rem 1rem;align-content:center;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.lp .shelf>a:hover{background:var(--paper-deep)}
.lp .shelf .roman{grid-row:1/3;color:var(--verm);font-size:.7rem}
.lp .shelf strong{font-size:1.4rem;font-weight:400}
.lp .shelf small{grid-column:2;color:var(--muted)}
.lp .shelf b{grid-column:3;grid-row:1/3;align-self:center;font-size:.68rem;font-weight:400}
.lp .shelf em{margin-left:.4rem;padding:.2rem .4rem;border:1px solid var(--verm);color:var(--verm);font-size:.58rem;font-style:normal;text-transform:uppercase;letter-spacing:.09em}
.lp .truth-note{padding:clamp(3rem,7vw,7rem) clamp(1rem,18vw,18rem);border-block:1px solid var(--line);text-align:center}
.lp .truth-note p:last-child{margin:0;font-size:clamp(1.25rem,2.6vw,2.2rem);line-height:1.35}
/* 写真ギャラリー（truth-note の後ろ）＝自動横流しマーキー。
   ストリップ2連を -50% までスクロールして無限ループ。gap でなく margin-right で
   間隔を取る＝2連の継ぎ目も等間隔になり繋ぎ目が見えない */
.lp .gallery{padding:clamp(2.5rem,6vw,5rem) 0;border-bottom:1px solid var(--line);overflow:hidden;scroll-margin-top:1rem}
.lp .gallery .eyebrow{text-align:center;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.lp .gallery-track{display:flex;width:max-content;animation:lp-gallery 70s linear infinite}
.lp .gallery-track:hover{animation-play-state:paused}
.lp .gallery-track{touch-action:pan-y;will-change:transform}
.lp .gallery-strip{display:flex}
.lp .gallery-strip img{width:clamp(11rem,26vw,17rem);height:auto;aspect-ratio:1;object-fit:cover;display:block;margin-right:clamp(.6rem,1.5vw,1rem);border-radius:1px;cursor:pointer;user-select:none;-webkit-user-drag:none}
@keyframes lp-gallery{to{transform:translateX(-50%)}}
/* ライトボックス（lp-home.js が生成）＝写真以外を暗く・ぼかして1枚に集中させる */
.lp .gallery-lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);background:rgba(32,34,31,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);cursor:zoom-out;animation:lp-lb .18s ease-out}
.lp .gallery-lightbox img{max-width:min(92vw,60rem);max-height:84vh;box-shadow:0 24px 70px -22px rgba(0,0,0,.65);border-radius:2px}
@keyframes lp-lb{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .lp .gallery{overflow-x:auto}
  .lp .gallery-track{animation:none}
  .lp .gallery-strip[aria-hidden]{display:none}
}
.lp footer{padding:2rem clamp(1rem,4vw,4rem);display:flex;justify-content:space-between;gap:1rem;color:var(--paper);background:var(--verm)}
.lp footer p{margin:0}
.lp .classic-line{font-size:.72rem;opacity:.82}
.lp .classic-line a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.lp .classic-line a:hover{opacity:1}
.lp .foot-dev{font-size:.72rem;opacity:.72}
@media(max-width:980px){
  .lp .hero{grid-template-columns:1fr}
  .lp .field-note{min-height:32rem}
  .lp .shelf{grid-template-columns:1fr}
  .lp .shelf>header{grid-row:auto;border-bottom:1px solid var(--line)}
}
@media(max-width:640px){
  .lp .site-head{min-height:4.25rem}
  .lp .place{max-width:9rem;text-align:right;font-size:.58rem}
  .lp .hero{min-height:auto}
  .lp .hero-copy{padding-block:4rem}
  .lp h1{font-size:clamp(3rem,15vw,5rem)}
  .lp .hero-actions{display:grid}
  .lp .button{width:100%}
  .lp .field-note{min-height:29rem}
  .lp .shelf>a{grid-template-columns:2rem 1fr}
  .lp .shelf b{grid-column:2;grid-row:auto;margin-top:.5rem}
  .lp .truth-note{text-align:left}
  .lp footer{flex-direction:column}
}

/* ---------------------------------------------------------------------------
   日本語版オーバーライド（body.lp-ja） — プロト ja/ja.css の移植。
   縦書きアクセント型: ヒーロー見出しのみ縦組み、本文は横組みの日本語組版最適化。
   --------------------------------------------------------------------------- */
.lp-ja{font-family:var(--serif-jp);line-height:1.85}
.lp-ja .eyebrow,.lp-ja .folio{letter-spacing:.32em;font-weight:500}
.lp-ja h1,.lp-ja h2,.lp-ja h3{letter-spacing:.06em}
.lp-ja .hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow eyebrow" "body headline";gap:0 clamp(2rem,6vw,6rem);align-items:center}
.lp-ja .hero-copy .eyebrow{grid-area:eyebrow}
.lp-ja .hero-copy h1{grid-area:headline;writing-mode:vertical-rl;text-orientation:mixed;margin:0;
  font-family:var(--serif-jp);font-weight:500;
  font-size:clamp(2.3rem,4.6vw,4.4rem);line-height:2.1;letter-spacing:.16em;
  max-block-size:min(58svh,19em)}
.lp-ja .hero-body{grid-area:body}
.lp-ja .lead{line-height:2.05;font-size:clamp(1rem,1.6vw,1.2rem)}
.lp-ja .ready-made h2,.lp-ja .shelf h2{font-size:clamp(1.9rem,4vw,3.6rem);line-height:1.4;letter-spacing:.08em}
.lp-ja .truth-note p:last-child{font-size:clamp(1.05rem,2.1vw,1.7rem);line-height:2}
.lp-ja .shelf strong{font-size:1.25rem}
.lp-ja .shelf b{letter-spacing:.12em}
.lp-ja .roman{letter-spacing:.1em}
.lp-ja footer p:first-child{font-family:var(--serif-jp);font-size:.9rem;letter-spacing:.1em}
@media(max-width:980px){
  .lp-ja .hero-copy{grid-template-areas:"eyebrow eyebrow" "headline headline" "body body"}
  .lp-ja .hero-copy h1{justify-self:end;max-block-size:min(52svh,15em)}
}
@media(max-width:640px){
  .lp-ja .hero-copy h1{font-size:clamp(2rem,8.5vw,2.5rem);max-block-size:min(55svh,15em)}
}

/* ===========================================================================
   索引「今日の石」セクション — プロト stones/index-hybrid.css の移植。
   固有クラス名（.today-* / .archive-start）で衝突なし。fable.css の変数を参照。
   =========================================================================== */
.today-stone{margin-top:clamp(3rem,8vh,5.5rem);border-block:1px solid var(--hair-2);display:grid;grid-template-columns:minmax(11rem,.65fr) minmax(0,1.35fr)}
.today-intro{padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,3vw,2rem) clamp(1.5rem,4vw,2.5rem) 0;border-right:1px solid var(--hair)}
.today-kicker{margin:0 0 .7rem;color:var(--shu);font-family:var(--serif-en);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.today-intro h2,.archive-start h2{margin:0;font-family:var(--serif-en);font-size:clamp(1.9rem,4.6vw,3rem);font-weight:400;line-height:1}
.today-intro>p:last-child{margin:1.2rem 0 0;color:var(--ink-3);font-family:var(--serif-en);font-size:.86rem;line-height:1.55}
.today-page{padding:clamp(1.5rem,4vw,2.5rem);background:rgba(221,214,198,.24)}
.today-register{margin:0;color:var(--ink-3);font-size:.78rem;letter-spacing:.04em}
.today-page h3{margin:.9rem 0 0;font-family:var(--serif-en);font-size:clamp(1.8rem,4.8vw,3rem);font-weight:400;line-height:1.05}
.today-story{margin:1.2rem 0 0;font-family:var(--serif-en);font-size:1.03rem;line-height:1.65}
.today-story.missing{color:var(--ink-3);font-style:italic}
.today-coffee{margin:1rem 0 0;color:var(--ink-2);font-size:.88rem}
.today-actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.65rem}
.today-actions a{min-height:2.8rem;padding:.55rem .75rem;display:inline-flex;align-items:center;justify-content:space-between;gap:1.2rem;border:1px solid var(--ink);text-decoration:none}
.today-actions a:last-child{color:var(--paper);background:var(--ai);border-color:var(--ai)}
.today-turn{margin:1.35rem 0 0;padding-top:.9rem;display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--hair);font-size:.78rem}
.archive-start{padding-top:clamp(3rem,8vh,5rem);scroll-margin-top:1rem}
/* 日本語索引では今日の石も明朝で組む（--serif-en は EB Garamond で漢字を持たないため） */
html[lang="ja"] .today-kicker,html[lang="ja"] .today-intro h2,html[lang="ja"] .archive-start h2,
html[lang="ja"] .today-intro>p:last-child,html[lang="ja"] .today-page h3,html[lang="ja"] .today-story{font-family:var(--serif-jp)}
@media (max-width:38rem){
  .today-stone{grid-template-columns:1fr}
  .today-intro{padding-right:0;border-right:0;border-bottom:1px solid var(--hair)}
  .today-page{padding-inline:1rem}
  .today-actions{display:grid}
  .today-actions a{width:100%}
  .today-turn{align-items:flex-start;flex-direction:column}
}