@charset "UTF-8";
/* ============================================================
   祈りの杜 polish.css — 見やすさの仕上げ
   読み込み順は最後（readability-scale.css の後）。HTML・JSは変更せず、
   見た目だけを整える。!important は使わない。
   1. 文字色のコントラスト   2. 日本語の改行と行間
   3. ヘッダー・ナビ          4. トップの御縁日欄
   5. カードと区切りの統一    6. フッター
   ============================================================ */

/* ------------------------------------------------------------
   1. 文字色: 補足文のグレーを濃くし、紙色の上で約7:1を確保する
   ------------------------------------------------------------ */
:root{
  --muted:#4b5046;
  --line:#cfcbbb;
  --p-surface:#fbfaf6;
  --p-surface-edge:#e2dfd2;
  --p-shadow:0 1px 2px #24392f0d,0 6px 18px -10px #24392f26;
}

/* ------------------------------------------------------------
   2. 日本語の組版: 見出しは文節で改行、本文は行末の偏りを減らす
   ------------------------------------------------------------ */
h1,h2,h3,h4{word-break:auto-phrase;text-wrap:balance;overflow-wrap:anywhere}
/* 長い漢字の名前（陀羅尼名など）は、収まらないときだけ語の途中で折り返す。
   ふりがな付きの見出しは balance が幅を誤るため通常の折り返しにする */
:is(h1,h2,h3,h4):has(ruby){text-wrap:wrap}
main p,main li,main dd{line-break:strict;text-wrap:pretty}
main p a:not([class]),main li a:not([class]){text-decoration:underline;text-decoration-color:#9aa48f;text-underline-offset:.28em}
main p a:not([class]):hover,main li a:not([class]):hover{text-decoration-color:currentColor}

/* 長い本文の一行を読みやすい長さに収める（トップの紹介・見出し下の説明） */
.page-heading>p,.intro-text,.hero-description{max-width:40em}

/* ------------------------------------------------------------
   3. ヘッダー: ナビの現在地と触れたときの反応をはっきりさせる
   ------------------------------------------------------------ */
.site-header nav a{transition:color var(--ease)}
.site-header nav a:hover{color:var(--green)}
.site-header nav a[aria-current]{color:var(--green);font-weight:600}
@media(min-width:761px){
  .site-header nav a::before{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--ease);opacity:.45}
  .site-header nav a:hover::before{transform:scaleX(1)}
  .site-header nav a[aria-current]::before{display:none}
}

/* ------------------------------------------------------------
   4. トップの御縁日欄: 長い一覧を2列にし、要約カードを面で区切る
   ------------------------------------------------------------ */
.today-section .today-heading{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:26px}
.today-section .ennichi-time-introduction{border-radius:6px}

/* 要約カード（この日の御縁日と、時間） */
.today-section .ennichi-day-overview{background:var(--p-surface);border:1px solid var(--p-surface-edge);border-radius:8px;box-shadow:var(--p-shadow)}
.today-section .ennichi-day-overview>ul>li{background:#fff;border:1px solid var(--p-surface-edge);border-radius:6px;padding:16px 18px}
.today-section .ennichi-day-overview>ul>li>a strong{color:var(--ink)}

/* 今日の挨拶文 */
.today-section .today-greeting{font-family:var(--serif);line-height:1.9}
.today-section .today-greeting strong{color:var(--green);font-weight:600}

/* 各まとまり（三十日秘仏・十二支など）の見出しを目立たせる */
.today-section .ennichi-group>h3{padding-left:14px;border-left:3px solid #8f7d55;line-height:1.5}
.today-section .ennichi-group+.ennichi-group{margin-top:44px}

/* 広い画面では御縁日の詳細を2列に並べ、縦の長さを抑える */
@media(min-width:1051px){
  .today-section .ennichi-links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .today-section .ennichi-entry:nth-child(2){border-top:1px solid var(--line)}
}

/* 右列「今日の暦」を、ひと続きの面としてまとめる */
.today-section .today-calendar{background:var(--p-surface);border:1px solid var(--p-surface-edge);border-radius:8px;padding:28px 26px;align-self:start;box-shadow:var(--p-shadow)}
.today-section .today-calendar>h3{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
@media(max-width:760px){.today-section .today-calendar{padding:22px 18px}}

/* 時刻・注記のラベル */
.ennichi-prayer-label{color:var(--muted)}
.ennichi-prayer-value{color:var(--ink)}

/* ------------------------------------------------------------
   5. カードと区切り: 角丸・影・触れたときの反応を揃える
   ------------------------------------------------------------ */
.destination-card .card-landscape,.selection-grid .card-landscape{border-radius:6px}
.destination-card{transition:border-color var(--ease)}
.destination-card:hover{border-bottom-color:var(--green)}
.text-link{transition:border-color var(--ease),color var(--ease)}
.text-link:hover{border-bottom-color:var(--green);color:var(--green)}
.button{border-radius:4px}
.gentle-note,.policy-intro{border-radius:6px}
details>summary{cursor:pointer}

/* ------------------------------------------------------------
   6. フッター: 読み物へのリンクを揃った格子に並べる
   ------------------------------------------------------------ */
.site-footer .footer-reading-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 28px;width:min(1152px,100%);margin:0 auto 34px;padding-bottom:26px;border-bottom:1px solid #ffffff1f}
.site-footer .footer-reading-links>a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:0;padding-block:8px;border-bottom:1px solid #ffffff26;color:#eef0e6;transition:color var(--ease),border-color var(--ease)}
.site-footer .footer-reading-links>a:hover{color:#d9c99f;border-bottom-color:#d9c99f}
@media(max-width:760px){.site-footer .footer-reading-links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}}
@media(max-width:360px){.site-footer .footer-reading-links{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   7. スマートフォン: 大見出しを語の途中で折り返さない
   ------------------------------------------------------------ */
@media(max-width:760px){
  .hero-copy h1{font-size:min(35px,8.4vw);letter-spacing:.1em}
  .site-footer .footer-reading-links>a{font-size:13.5px;line-height:1.6}
}

/* ------------------------------------------------------------
   8. 暦: 狭い画面ではマス目の中の注記を元の大きさに保つ
   ------------------------------------------------------------ */
.month-navigation #calendar-today{white-space:nowrap}
@media(max-width:420px){
  .month-table button > small{font-size:12px}
  .month-table button > .cell-note{font-size:10px}
}

/* ------------------------------------------------------------
   9. ダンマパダ・スッタニパータの読書画面
   ふりがなが9pxで付いていることが分からないほど小さかったため、
   本文では11px以上、本文以外の案内文では10px以上にする。
   訳者の補足語〔 〕は文字を変えずに色だけ淡くし、本文の流れを追いやすくする。
   ------------------------------------------------------------ */
[data-pali-furigana] ruby[data-pali-ruby] rt{font-size:max(.6em,10px);line-height:1.25}
[data-pali-furigana] .pali-source-text ruby[data-pali-ruby] rt{font-size:max(.56em,11px);letter-spacing:.02em;color:#3c4a40}
.pali-source-text .add{color:#646a5e}
.pali-source-text .add ruby[data-pali-ruby] rt{color:#646a5e}

/* ------------------------------------------------------------
   10. トップ「本日の御縁日」: 要点を先に、詳しい説明は折りたたみ
   ------------------------------------------------------------ */
.today-section .today-greeting{margin:0 0 22px;font-size:20px}
.today-section .ennichi-time-introduction{margin-top:22px}
.today-details{margin-top:22px;border:1px solid var(--p-surface-edge);border-radius:8px;background:var(--p-surface)}
.today-details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 22px;font-family:var(--serif);font-size:17px;letter-spacing:.05em;border-radius:8px}
.today-details>summary::-webkit-details-marker{display:none}
.today-details>summary:hover{background:#f1efe6}
.today-details-hint{flex-shrink:0;font:13.5px var(--sans);color:var(--green);display:inline-flex;align-items:center;gap:8px}
.today-details-hint::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--ease)}
.today-details[open]>summary{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.today-details[open] .today-details-hint::after{transform:translateY(2px) rotate(-135deg)}
.today-details[open] .today-details-hint{font-size:0}
.today-details[open] .today-details-hint::before{content:"閉じる";font-size:13.5px}
.today-details-body{padding:26px 24px 20px}
@media(min-width:1051px){
  .today-details-body .ennichi-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
  .today-section .today-details-body .ennichi-links{grid-template-columns:1fr}
  .today-section .ennichi-group+.ennichi-group{margin-top:0}
  .today-details-body .ennichi-group{margin-bottom:36px}
}
/* 今日の暦: 横に3つの面を並べる */
.today-section .today-calendar{margin-top:40px;padding:30px 30px 22px;border-left:1px solid var(--p-surface-edge)}
.today-calendar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:start;margin-top:18px}
.today-calendar-grid>div{min-width:0}
.today-calendar-grid .calendar-day-story{margin:0}
.today-calendar-grid .calendar-explanation{margin:0}
.today-calendar-grid .calendar-facts{margin-top:0}
.today-calendar>.text-link{margin-top:18px}
@media(max-width:1050px){.today-calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.today-calendar-facts{grid-column:1/-1}}
@media(max-width:760px){
  .today-calendar-grid{grid-template-columns:1fr;gap:22px}
  .today-section .today-calendar{padding:22px 18px 16px;margin-top:30px}
  .today-details>summary{padding:12px 16px;font-size:16px}
  .today-details-body{padding:20px 16px 14px}
  .today-section .today-greeting{font-size:18px}
}

/* ------------------------------------------------------------
   11. トップ「読む・たずねる」: 5つの入口をカードの格子に
   ------------------------------------------------------------ */
.home-readings{padding:64px 0 24px;border-top:1px solid var(--line)}
.home-readings-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.home-readings-grid>*{width:auto;margin:0;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:28px 28px 22px;border:1px solid var(--p-surface-edge);border-radius:8px;background:var(--p-surface);box-shadow:var(--p-shadow)}
.home-readings-grid>.kojiki-home,.home-readings-grid>.learning-entry{grid-column:span 3}
.home-readings-grid>.places-home,.home-readings-grid>.ganying-home,.home-readings-grid>.waka-home{grid-column:span 2}
.home-readings-grid h2{font-size:23px;line-height:1.6;margin:10px 0 12px;letter-spacing:.06em}
.home-readings-grid h2 br{display:none}
.home-readings-grid p:not(.eyebrow){font-size:15px;line-height:1.95;color:var(--muted)}
.home-readings-grid p:not(.eyebrow) br{display:none}
.home-readings-grid .text-link{margin-top:auto;align-self:flex-start}
.home-readings-grid>*>div{min-width:0}
.home-readings-grid>*>div:last-of-type{flex:1;display:flex;flex-direction:column}
.home-readings-grid .kojiki-home>div+div{margin-top:4px}
.home-readings-grid .kojiki-home-links{margin-top:auto;padding-top:10px;gap:0 22px}
.home-readings-grid .kojiki-home .text-link{margin-top:0}
.home-readings-grid .places-home>a,.home-readings-grid .ganying-home>a,.home-readings-grid .waka-home>a{margin-top:18px}
.home-readings-grid .waka-home{position:relative}
.home-readings-grid .waka-home-mark{position:absolute;top:22px;right:22px;width:56px;min-height:62px;font-size:34px}
.home-readings-grid .waka-home>div:nth-child(2){padding-right:64px;flex:1}
.home-readings-grid .learning-entry-links{grid-template-columns:1fr;gap:10px;margin-top:16px}
.home-readings-grid .learning-entry-links a{min-height:64px;padding:12px 16px;border-color:var(--p-surface-edge);border-radius:6px;background:#fff}
@media(max-width:1050px){
  .home-readings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-readings .home-readings-grid>*{grid-column:auto}
  .home-readings .home-readings-grid>.learning-entry{grid-column:1/-1;order:-1}
  .home-readings-grid .learning-entry-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .home-readings{padding-top:44px}
  .home-readings-grid{grid-template-columns:1fr;gap:16px}
  .home-readings-grid>*{padding:22px 20px 16px}
  .home-readings .home-readings-grid>.learning-entry{grid-column:auto}
  .home-readings-grid .learning-entry-links{grid-template-columns:1fr}
}
.home-readings-grid .waka-home>.text-link{margin-left:0}

/* ------------------------------------------------------------
   12. ナビ「古典を読む」: 広い画面はドロップダウン、狭い画面とJSなしは展開表示
   ------------------------------------------------------------ */
.nav-group{display:contents}
.nav-group-menu{display:contents}
.nav-group-toggle[hidden]{display:none}
.site-header nav.has-dropdown .nav-group{display:flex;position:relative}
.site-header nav.has-dropdown .nav-group-menu{display:grid;position:absolute;top:calc(100% + 6px);left:-18px;z-index:40;min-width:210px;padding:8px;background:var(--paper);border:1px solid var(--p-surface-edge);border-radius:8px;box-shadow:0 12px 32px -12px #24392f40,0 2px 6px #24392f14}
.site-header nav.has-dropdown .nav-group-menu[hidden]{display:none}
.site-header nav.has-dropdown .nav-group-menu a{display:flex;min-height:44px;padding:0 14px;border-radius:5px;white-space:nowrap}
.site-header nav.has-dropdown .nav-group-menu a:hover{background:#ebeee4;color:var(--green)}
.site-header nav.has-dropdown .nav-group-menu a::before{display:none}
.site-header nav.has-dropdown .nav-group-menu a[aria-current]::after{left:0;right:auto;top:10px;bottom:10px;width:3px;height:auto;border-radius:2px}
.nav-group-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;white-space:nowrap;position:relative}
.nav-group-toggle::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--ease)}
.nav-group-toggle[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}
.nav-group-toggle:hover,.nav-group-toggle[aria-expanded=true]{color:var(--green)}
.nav-group-toggle.is-current{color:var(--green);font-weight:600}
.nav-group-toggle.is-current::before{content:"";position:absolute;left:0;right:14px;bottom:1px;height:2px;background:var(--green)}
@media(max-width:760px){
  .site-header #site-navigation .nav-group{display:block;grid-column:1/-1;margin:4px 0;padding:6px 0 4px;border-block:1px solid var(--line)}
  .site-header #site-navigation .nav-group-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .site-header #site-navigation .nav-group-menu::before{content:"古典を読む";grid-column:1/-1;font-size:12px;color:var(--muted);letter-spacing:.08em;padding-top:4px}
}
@media print{.nav-group-toggle{display:none}}

/* ------------------------------------------------------------
   13. 神様・仏様の案内図（スマートフォン）: 文字を大きくした分、余白を詰めて
       案内図の始まりを最初の画面に収める
   ------------------------------------------------------------ */
@media(max-width:760px){
  .world-page .dragon-entry{margin:12px 0 16px;padding:10px 0;min-height:0}
  .world-page .dragon-entry img{width:52px;height:64px}
  .world-page .kami-finder{margin-bottom:10px}
}

/* ------------------------------------------------------------
   14. 静かなモーション（motion.js と組み合わせる）
   すべて html.allow-motion のときだけ。「動きを減らす」や端末の設定では、
   styles.css の .reduce-motion 規則で止まり、何も隠れない。
   動かすのは opacity と transform だけ（重くならず、レイアウトも崩さない）。
   ------------------------------------------------------------ */
@keyframes inori-fade{from{opacity:0}to{opacity:1}}
@keyframes inori-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* 1. ページの切り替え: 本文全体をふわりと表示し、見出しだけ少し浮かび上がらせる。
      main 自体には transform を使わない（固定表示の道具バーの位置を崩さないため） */
.allow-motion main.page-enter{animation:inori-fade .42s ease-out both}
.allow-motion main.page-enter :is(.page-heading,.pali-heading,.pali-reader-heading,.atlas-heading)>*{animation:inori-rise .6s cubic-bezier(.2,.7,.2,1) both}
.allow-motion main.page-enter :is(.page-heading,.pali-heading,.pali-reader-heading,.atlas-heading)>:nth-child(2){animation-delay:.06s}
.allow-motion main.page-enter :is(.page-heading,.pali-heading,.pali-reader-heading,.atlas-heading)>:nth-child(n+3){animation-delay:.12s}

/* 2. スクロールで現れる動き: 画面に入ったときに一度だけ */
.allow-motion .reveal{transition:opacity .8s ease-out,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.allow-motion .reveal:not(.is-visible){opacity:0;transform:translate3d(0,22px,0)}
@media print{.reveal{opacity:1;transform:none}}

/* 3. トップの森: 呼吸のようにゆっくり近づき、木漏れ日がかすかに揺れる */
@keyframes inori-forest{from{transform:scale(1.02)}to{transform:scale(1.09) translate3d(-1.2%,-.8%,0)}}
@keyframes inori-komorebi{0%{opacity:.35;transform:translate3d(-2%,0,0) rotate(0deg)}50%{opacity:.75}100%{opacity:.45;transform:translate3d(3%,-1%,0) rotate(1.5deg)}}
.allow-motion .home-hero .hero-figure>.landscape img{animation:inori-forest 28s ease-in-out infinite alternate;transform-origin:62% 40%;will-change:transform}
.home-hero .hero-figure::before{content:"";position:absolute;inset:-15%;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse 18% 70% at 68% 0%,#fff3c94d,transparent 70%),radial-gradient(ellipse 10% 55% at 80% 5%,#fff6d83d,transparent 72%),radial-gradient(ellipse 14% 60% at 55% 0%,#fdf1cc29,transparent 70%)}
.allow-motion .home-hero .hero-figure::before{animation:inori-komorebi 16s ease-in-out infinite alternate}
.home-hero .vertical-poem{z-index:2}
/* 最初の表示: 文章が順に浮かび、縦書きの詩が少し遅れて現れる */
.allow-motion main.page-enter .hero-copy>*{animation:inori-rise .9s cubic-bezier(.2,.7,.2,1) both}
.allow-motion main.page-enter .hero-copy>:nth-child(2){animation-delay:.12s}
.allow-motion main.page-enter .hero-copy>:nth-child(3){animation-delay:.24s}
.allow-motion main.page-enter .hero-copy>:nth-child(n+4){animation-delay:.36s}
.allow-motion main.page-enter .home-hero .vertical-poem{animation:inori-fade 1.6s ease-out .6s both}