/*
Theme Name: 辞世の句
Theme URI: https://jisei.bou-tou.net/
Description: 辞世の句を縦書きで見せるためのテーマ。トップは一句ずつの「一句一景」、一覧は短冊が並ぶ壁。色は「外観 → カスタマイズ → 色」で変えられます。
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: jisei
*/

/* ------------------------------------------------------------------
   色は :root の既定値（生成り）を置き、カスタマイザーの設定があれば
   functions.php が wp_head でこの上から同じ変数を上書きします。
   → 既定値を変えるときは functions.php の jisei_default_colors() も
     必ず同じ値に揃えること。
   ------------------------------------------------------------------ */
:root{
  --paper:#f4f2ec;   /* 背景（生成り） */
  --paper-2:#faf8f3; /* 少し明るい面 */
  --sumi:#221f1b;    /* 本文の文字（墨） */
  --usu:#6d6862;     /* 補助の文字（作者名・訳など） */
  --keshi:#c9c3b8;   /* 罫線・いちばん薄い文字 */
  --ai:#4a5b6e;      /* リンク・ホバー（藍） */

  /* 場所ごとの文字色。カスタマイザーで個別に変えられる。
     未設定なら、上の色から引き継ぐ。 */
  --ku:var(--sumi);    /* 句そのもの */
  --sig:var(--usu);    /* 作者名・没年 */
  --soft:var(--usu);   /* 「この句を読む」など、小さなリンク */

  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;

  /* 文字の大きさ。カスタマイザーで変えられる。
     句は長さに応じて自動で縮むので、--ku-max は「上限」として効く。 */
  --ku-max:22px;        /* 句の上限（トップ） */
  --ku-max-single:22px; /* 句の上限（句のページ） */
  --fs-entry:15px;   /* 本文 */
  --fs-cover:26px;   /* トップのサイト名 */
  --fs-tz:17px;      /* 全句一覧の句 */
  --fs-yaku:13px;    /* 現代語訳・注記 */

  /* 句と、その下の現代語訳とのあいだ。パソコンとスマホで別々に決められる。
     広げると下の帯も同じだけ高くなるので、訳やリンクが切れることはない。 */
  --band-gap:26px;    /* パソコン */
  --band-gap-sp:48px; /* スマホ */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--sumi);font-family:var(--serif);
  -webkit-font-smoothing:antialiased;line-height:1.95;
  font-feature-settings:"palt";
  /* 日本語の禁則処理。句読点や閉じ括弧が行頭に来ないようにする */
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- ヘッダ ---------- */
.gnav{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;background:var(--paper)}
.gnav .brand{font-size:13px;letter-spacing:.42em;text-indent:.42em}
.gnav .links{display:flex;gap:26px;font-size:11px;letter-spacing:.22em;color:var(--usu)}
.gnav .links a:hover{color:var(--ai)}
.gnav .links ul{list-style:none;display:flex;gap:26px}

/* ---------- フッタ ---------- */
.foot{border-top:1px solid var(--keshi);padding:52px 32px 64px;text-align:center}
.foot .fl{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.2em;color:var(--usu);list-style:none}
.foot .fl a:hover{color:var(--ai)}
.foot .cr{margin-top:26px;font-size:10.5px;letter-spacing:.16em;color:var(--keshi)}

/* ================= トップ：一句一景 ================= */
.snap{scroll-snap-type:y proximity}
/* 1画面 = [上の余白][句の場（可変・中央寄せ）][下の帯（訳とリンク・高さ固定）]
   スマホの 100vh はアドレスバーぶん実際の画面より高くなり、中身が下へずれる。
   対応している端末では svh（実際に見えている高さ）を使う。 */
.pane{height:100vh;height:100svh;scroll-snap-align:start;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:78px 24px 24px}
.pane .stage{flex:1 1 auto;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center}
/* 下の帯。106px は訳とリンクぶんの高さで、そこに「句とのあいだ」を足す。
   あいだを広げれば帯も高くなるため、中身がはみ出さない。 */
.pane .band{flex:0 0 calc(106px + var(--band-gap));width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:var(--band-gap);gap:22px}

/* 表紙 */
.cover h1{writing-mode:vertical-rl;font-size:var(--fs-cover);font-weight:400;
  letter-spacing:.5em;line-height:1}
.cover .sub{margin-top:34px;font-size:11.5px;letter-spacing:.3em;color:var(--usu)}
.cover .lead{margin-top:30px;max-width:30em;text-align:center;
  font-size:13px;line-height:2.2;color:var(--usu)}
.scrollcue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.3em;color:var(--keshi)}
.scrollcue::after{content:"";display:block;width:1px;height:34px;margin:12px auto 0;
  background:linear-gradient(var(--keshi),transparent)}

/* 句のひと画面 ── 句は右から、署名（作者・没年）は左下に。
   縦組みは位置がつかみにくいので、署名は絶対指定で決める。 */
/* 余白は左右そろえて取る。左だけにすると、署名ぶんの幅だけ句が右へずれる */
.pane .ku-wrap{writing-mode:vertical-rl;position:relative;padding:0 48px}
.pane .ku{font-size:var(--ku-max);letter-spacing:.24em;line-height:1.95;color:var(--ku)}
/* 句の欄で改行が入っていれば、そこで列が分かれる（五七五 ／ 七七） */
.ku .ln{display:block}
/* 組み終わるまでは句を出さない（大きさが変わって見えるのを防ぐ）。
   この印は jisei.js が自分で付け外しするので、JSが無い環境では効かない。 */
.ku-fitting .pane .ku,
.ku-fitting .kakejiku .ku,
.ku-fitting .tz .ku{visibility:hidden}
.pane .meta{position:absolute;left:0;bottom:0;
  font-size:11.5px;letter-spacing:.28em;color:var(--sig);white-space:nowrap}
.pane .yaku{text-align:center;max-width:34em;
  font-size:var(--fs-yaku);color:var(--usu);letter-spacing:.12em;line-height:1.9;
  opacity:0;transform:translateY(6px);transition:opacity 1.4s .5s,transform 1.4s .5s}
.pane.on .yaku{opacity:1;transform:none}
.pane .more{text-align:center;font-size:11.5px;letter-spacing:.26em;color:var(--soft);
  opacity:0;transition:opacity 1.4s .9s}
.pane.on .more{opacity:1}
.pane .more a{border-bottom:1px solid currentColor;padding-bottom:4px}
.pane .more a:hover{color:var(--ai)}
.pane .idx{position:absolute;right:34px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-size:10px;letter-spacing:.2em;color:var(--keshi)}

/* 最終ペイン（全句一覧へ） */
.tail{gap:26px}
.tail .t{writing-mode:vertical-rl;font-size:15px;letter-spacing:.4em}
.tail .btn{font-size:11.5px;letter-spacing:.28em;color:var(--usu);
  border:1px solid var(--keshi);padding:14px 30px}
.tail .btn:hover{color:var(--ai);border-color:var(--ai)}

/* トップの最後に置く広告。
   句のスクロールから切り離すため、画面吸着（scroll-snap）の対象にしない。
   上に線と広い余白を取り、句の続きではないことをはっきりさせる。 */
.frontad{border-top:1px solid var(--keshi);max-width:720px;
  margin:0 auto;padding:70px 24px 10px;scroll-snap-align:none}
.frontad .adbox{margin-bottom:0}

/* 動きを減らす設定の人には、ふわっとした表示をしない */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .snap{scroll-snap-type:none}
  .pane .yaku,.pane .more{opacity:1;transform:none;transition:none}
}

/* ================= 全句一覧：短冊の壁 ================= */
.page-head{padding:118px 32px 26px;text-align:center}
.page-head h1{font-size:17px;font-weight:400;letter-spacing:.44em;text-indent:.44em}
.page-head .n{margin-top:14px;font-size:11px;letter-spacing:.24em;color:var(--usu)}
.page-head .rule{width:34px;height:1px;background:var(--keshi);margin:24px auto 0}
.page-head .lead{margin:20px auto 0;max-width:32em;font-size:13px;
  line-height:2.2;color:var(--usu)}

.sort{display:flex;justify-content:center;gap:22px;padding:6px 0 30px;
  font-size:11px;letter-spacing:.2em;color:var(--keshi);flex-wrap:wrap}
.sort a{padding-bottom:4px}
.sort a:hover{color:var(--usu)}
.sort a.cur{color:var(--sumi);border-bottom:1px solid var(--sumi)}

.wallwrap{max-width:1120px;margin:0 auto;padding:0 30px 80px}
.wall{display:flex;flex-direction:row-reverse;flex-wrap:wrap;
  align-items:flex-start;justify-content:flex-start}
/* 短冊を入れる枠。ふだんは中身の幅そのまま。
   スマホでは幅を固定して、1行に並ぶ数を揃える（句の長さで幅が変わるため） */
.cell{display:flex;justify-content:center;flex:0 0 auto}
.tz{writing-mode:vertical-rl;position:relative;display:block;
  padding:34px 20px 30px 58px;margin-bottom:26px}
.tz::after{content:"";position:absolute;top:34px;bottom:30px;left:0;
  width:1px;background:var(--keshi);opacity:.5}
/* 高さの上限は .ku ではなく行（.ln）ごとに置く。
   .ku に置くと、改行を指定した行までそこで折り返され、
   「二行のはずが三列」になってしまう。 */
.tz .ku{font-size:var(--fs-tz);letter-spacing:.2em;line-height:1.85;color:var(--ku)}
.tz .ln{max-height:400px}
/* 改行が指定されている句は、その行数を必ず守る（上限で折り返さない） */
.tz .ku.multi .ln{max-height:none}
.tz .by{position:absolute;left:36px;bottom:30px;font-size:11px;
  letter-spacing:.2em;color:var(--sig)}
.tz .yr{position:absolute;left:20px;bottom:30px;font-size:10px;
  letter-spacing:.14em;color:var(--sig);opacity:.65}
.tz:hover .ku,.tz:hover .by{color:var(--ai)}

/* ================= 個別の句のページ ================= */
.single{max-width:720px;margin:0 auto;padding:0 32px}
.kakejiku{padding:112px 0 22px;display:flex;justify-content:center}
/* 余白は左右そろえて取る（句を中心に乗せるため） */
.kakejiku .in{writing-mode:vertical-rl;position:relative;padding:0 46px}
.kakejiku .ku{font-size:var(--ku-max-single);letter-spacing:.26em;line-height:2.05;color:var(--ku)}
.kakejiku .meta{position:absolute;left:0;bottom:0;
  font-size:11.5px;letter-spacing:.26em;color:var(--sig);white-space:nowrap}
.yomi{text-align:center;font-size:12px;letter-spacing:.24em;color:var(--usu);
  padding:26px 0 0}
/* 句についての断り書き（本人の作ではない、など） */
.kunote{max-width:34em;margin:26px auto 0;padding:0 32px;text-align:center;
  font-size:var(--fs-yaku);line-height:2;color:var(--usu)}
.divider{width:34px;height:1px;background:var(--keshi);margin:44px auto}

.sec{margin:0 0 52px}
.sec h2{font-size:11.5px;letter-spacing:.34em;color:var(--usu);font-weight:400;
  margin-bottom:20px}
.yakubox{border-left:1px solid var(--keshi);padding:2px 0 2px 24px;
  font-size:calc(var(--fs-entry) + 0.5px);line-height:2.3}

/* 記事本文（WordPressのエディタから出てくるもの） */
.entry{font-size:var(--fs-entry);line-height:2.3}
.entry p{margin-bottom:1.6em}
.entry h2{font-size:14px;letter-spacing:.2em;margin:2.4em 0 1em;font-weight:400}
.entry h3{font-size:13.5px;letter-spacing:.16em;margin:2em 0 .8em;font-weight:400}
.entry a{color:var(--ai);border-bottom:1px solid var(--keshi)}
.entry a:hover{border-color:var(--ai)}
.entry blockquote{border-left:1px solid var(--keshi);padding-left:22px;
  margin:2em 0;color:var(--usu)}
.entry ul,.entry ol{margin:0 0 1.6em 1.6em}
.entry li{margin-bottom:.5em}
.entry img{margin:1.5em 0}

/* 広告。線で囲わず、上下に余白だけ取って本文と切り離す */
/* アドセンスの枠は、幅を持ったふつうのブロックのままにしておくこと。
   flex + align-items:center で包むと <ins> の幅が 0 になり、
   アドセンスが「置き場所がない」と判断して広告を返さなくなる。
   中央寄せは <ins> 自身の左右マージンで行う（下の指定）。 */
.adbox{margin:0 0 46px;text-align:center;width:100%}
.adlabel{display:block;font-size:10px;letter-spacing:.28em;color:var(--keshi);
  margin-bottom:12px}
/* 幅の決まった広告（336x280 など）はこれで中央に来る。
   幅いっぱいの広告（レスポンシブ）はそのまま横いっぱいに広がる。 */
.adbox ins.adsbygoogle{display:block;margin-left:auto;margin-right:auto}
.adbox iframe{max-width:100%}

/* SNSのシェア。線だけの控えめな見た目にする */
.share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:flex-end;padding:26px 0 6px;margin-bottom:44px}
.share-lb{font-size:10.5px;letter-spacing:.28em;color:var(--sig);margin-right:2px}
.share a,.share-copy{font-family:inherit;font-size:11.5px;letter-spacing:.14em;
  color:var(--soft);border:1px solid var(--keshi);border-radius:2px;
  padding:8px 14px;background:none;cursor:pointer;line-height:1;white-space:nowrap}
.share a:hover,.share-copy:hover{color:var(--ai);border-color:var(--ai)}
.share-copy.done{color:var(--ai);border-color:var(--ai)}

.author{border-top:1px solid var(--keshi);border-bottom:1px solid var(--keshi);
  padding:30px 0;margin:0 0 52px}
.author .nm{font-size:14px;letter-spacing:.24em;margin-bottom:12px}
.author .yr{font-size:11px;letter-spacing:.16em;color:var(--keshi);margin-bottom:14px}
.author p{font-size:13.5px;line-height:2.2;color:var(--usu)}

/* 前後の句 */
.neighbors{display:flex;border-top:1px solid var(--keshi);margin-top:10px}
.neighbors a{flex:1;padding:30px 20px;font-size:12.5px;line-height:2;color:var(--usu)}
.neighbors a:first-child{border-right:1px solid var(--keshi)}
.neighbors .lb{display:block;font-size:10px;letter-spacing:.24em;
  color:var(--keshi);margin-bottom:10px}
.neighbors a:hover{color:var(--ai);background:var(--paper-2)}
.neighbors .empty{flex:1;padding:30px 20px}

/* ================= 固定ページ・読み物・404 ================= */
.simple{max-width:680px;margin:0 auto;padding:132px 32px 80px}
.simple h1{font-size:17px;font-weight:400;letter-spacing:.3em;
  text-align:center;margin-bottom:14px}
.simple .date{text-align:center;font-size:10.5px;letter-spacing:.2em;
  color:var(--keshi);margin-bottom:44px}
.simple .rule{width:34px;height:1px;background:var(--keshi);margin:0 auto 48px}

.archive-list{list-style:none;max-width:680px;margin:0 auto;padding:0 32px 80px}
.archive-list li{border-bottom:1px solid var(--keshi)}
.archive-list a{display:block;padding:26px 4px;font-size:14px;line-height:1.9}
.archive-list a:hover{color:var(--ai)}
.archive-list .d{display:block;font-size:10px;letter-spacing:.2em;
  color:var(--keshi);margin-top:8px}

.pager{display:flex;justify-content:center;gap:24px;padding:40px 0 80px;
  font-size:11.5px;letter-spacing:.2em;color:var(--usu)}
.pager a:hover{color:var(--ai)}

/* ================= 狭い画面 ================= */
/* 短い文が中央寄せで折り返すとき、行の長さを揃える。
   スマホで「変なところで改行される」のを防ぐ。 */
.cover .lead,.pane .yaku,.kunote,.yomi,.page-head .lead,.tail .t,
.page-head h1,.neighbors a{text-wrap:balance}

@media(max-width:700px){
  .gnav{padding:16px 20px}
  .gnav .brand{font-size:12px;letter-spacing:.3em}
  .gnav .links,.gnav .links ul{gap:14px}
  .gnav .links{font-size:10px;letter-spacing:.12em}
  .cover h1{font-size:calc(var(--fs-cover) * 0.85)}
  .pane{padding:60px 18px 20px}
  /* スマホは別の値を使う */
  :root{--band-gap:var(--band-gap-sp)}
  .pane .band{flex-basis:calc(102px + var(--band-gap))}

  /* 表紙は、上の固定メニューぶんを見込んで少し上へ寄せる。
     下の余白を厚くすることで、見た目の中心が上に上がる。 */
  .cover{padding-bottom:104px}
  .cover .lead{margin-top:24px;font-size:12.5px}
  .cover .sub{margin-top:28px}

  /* シェアは3つだけなので、スマホでも一列に収まる */
  .share{gap:10px}
  .share-lb{display:none}
  .share a,.share-copy{padding:9px 14px;font-size:11.5px;letter-spacing:.08em}
  .page-head{padding:100px 24px 20px}
  .frontad{padding:56px 18px 10px}
  .wallwrap{padding:0 12px 60px}
  /* 1行に必ず2つ。句の長さで短冊の幅が変わっても、並びが崩れない */
  .cell{flex:0 0 50%}
  .tz{padding:28px 10px 26px 42px;margin-bottom:20px}
  .tz .ku{font-size:calc(var(--fs-tz) * 0.92)}
  .tz .ln{max-height:350px}
  .tz .ku.multi .ln{max-height:none}
  .tz .by{left:24px}
  .tz .yr{left:10px}
  .kakejiku{padding:110px 0 20px}
  .single,.simple{padding-left:22px;padding-right:22px}
  .neighbors{flex-direction:column}
  .neighbors a:first-child{border-right:0;border-bottom:1px solid var(--keshi)}
}