/* ===========================================================
   雲州日日新聞 号外（架空）
   型: read(読み物) × high(高密度) × type-only(文字だけで始まる) × journalistic(報道の声)

   組版の原則:
   ・ヒーロー画像を持たない。題字と大見出しだけで始める。
   ・縦組み(writing-mode:vertical-rl)の素のブロック組みで作る。flexは使わない。
     縦組みでは「行は上から下」「行の進む向きは右から左」なので、
     ブロックを普通に並べるだけで新聞の段組みになる。
   ・段の送り(次の段へのアキ)は論理プロパティ(margin-block / border-inline-start)で書く。
     一方、天地のアキ(紙面の余白・囲みの内側)は logical だと軸が入れ替わって
     左右に化けるため、そこだけ物理プロパティ(padding: 上下 左右)で書く。
   ・罫線は 1px(細罫) / 3px(太罫) / double(境界) の3種だけ。
   =========================================================== */

:root{
  --paper:#f4efe2;
  --paper-2:#ece5d4;
  --ink:#1a1815;
  --ink-2:#4a453c;
  --ink-3:#7d7666;
  --rule:#b9b1a0;
  --red:#a8271c;

  --min:"BIZ UDPMincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --head:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --goth:"BIZ UDPGothic","Hiragino Kaku Gothic ProN",sans-serif;

  --fz:15px;
  --deck-h:52px;

  /* craft-kit: 新聞らしく、少し落ち着いた速さに */
  --ck-dur:1.05s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--min); line-height:1.95;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- craft-kit 統合：この紙面だけの調整 ----------
   ・reveal="mask" は既定だと左→右に開く（横組み前提）。
     この紙面は縦組み・右から左へ読むので、開き方も右→左（＝左からの
     クリップが 100%→0 に縮む＝右端から現れる）に上書きする。
   ・ck-load / 読了度バーは、この題材（号外・刷了）に合わせた見た目だけをここで足す。
     アニメの起動そのものは craftkit.js（CK.reveal/CK.load/CK.grain）に任せる。 */
[data-ck-reveal="mask"]{
  clip-path:inset(0 0 0 100%);
}

.ck-load{ --ck-load-bg:var(--ink); --ck-load-fg:var(--paper); }
.load-inner{ display:grid; justify-items:center; gap:14px; text-align:center; }
.load-seal{
  margin:0; font-family:var(--head); font-weight:800; font-size:22px;
  letter-spacing:.3em; color:var(--paper);
  border:3px double var(--red); border-radius:2px;
  padding:10px 14px 10px 18px; /* 号外の縦書き感を出す偏り */
  animation:load-pulse 1.15s ease-in-out infinite;
}
.load-txt{ margin:0; font-family:var(--goth); font-size:11.5px; letter-spacing:.08em; color:#cfc7b4; }
@keyframes load-pulse{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .load-seal{ animation:none; opacity:1; } }

/* ---------- 読了度（横スクロールに連動する僅かな階調） ---------- */
.rp{
  position:fixed; left:0; bottom:0; width:100%; height:3px;
  background:rgba(26,24,21,.08); z-index:40; pointer-events:none;
}
.rp > span{
  display:block; height:100%; width:calc(var(--rp, 0) * 100%);
  background:var(--red);
  transition:width .12s linear;
}
@media (prefers-reduced-motion:reduce){ .rp > span{ transition:none; } }

/* ---------- 操作卓（紙面の外・横組み） ---------- */
.deck{
  height:var(--deck-h); display:flex; align-items:center; gap:18px;
  padding:0 16px; background:var(--ink); color:var(--paper);
  font-family:var(--goth); font-size:12px; letter-spacing:.04em;
  border-bottom:3px solid var(--red);
}
.deck-t{margin:0; white-space:nowrap}
.deck-t b{font-family:var(--head); font-size:15px; letter-spacing:.12em}
.deck-g{display:flex; align-items:center; gap:5px}
.deck-l{color:#a49c8c; margin-right:3px}
.deck-b{
  font-family:var(--goth); font-size:12px; color:var(--paper);
  background:transparent; border:1px solid #55503f; border-radius:2px;
  padding:4px 10px; cursor:pointer; line-height:1;
}
.deck-b:hover{border-color:var(--paper)}
.deck-b.is-on{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.deck-b:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.deck-hint{margin:0 0 0 auto; color:#a49c8c; white-space:nowrap}
.deck-hint b{color:var(--paper)}
.deck-hint kbd{
  font-family:var(--goth); font-size:10.5px; border:1px solid #55503f;
  border-radius:2px; padding:1px 5px; margin:0 1px;
}

/* ---------- 紙面 ---------- */
.paper{
  height:calc(100% - var(--deck-h));
  overflow-x:auto; overflow-y:hidden;
  /* 第二層は #rp が更新する --rp(0..1、読了度)で、読み進むほど
     朱がわずかに紙面の奥（左）へ差す。振れ幅は極小（.06）で階調のみ。 */
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(140% 100% at calc(28% + var(--rp, 0) * 44%) 8%, rgba(168,39,28,.06), transparent 56%),
    var(--paper);
  scroll-behavior:smooth;
}
.paper:focus{outline:none}

/* 縦組みの素のブロック組み。子(section)は右から左へ並ぶ。 */
/* ⚠ 縦組みでは block/inline 軸が入れ替わり、padding-block は「左右」を指す。
   天地の余白（＝紙面の天地アキ）を確実に取りたいので、
   ここから下の余白は logical ではなく物理プロパティで書く。 */
.sheet{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  height:100%;
  width:max-content;
  padding:46px 34px 40px;      /* 天 / 小口 / 地 */
}

.col{
  display:block;
  block-size:100%;             /* 縦組みでは = 高さ方向いっぱい */
  padding:0 24px;              /* 段間のアキ */
  border-left:1px solid var(--rule);   /* 段間の細罫（物理左＝次の段との境） */
}
.col:last-child{border-left:none}

/* ---------- 題字 ---------- */
.col-flag{border-left:3px double var(--ink); padding-left:26px}
.flag-ex{
  /* 縦組みではブロックが行方向(＝高さ)いっぱいに伸びる。
     赤ベタは「号外」の2文字ぶんだけにしたいので inline-size を content に絞る。 */
  inline-size:fit-content;
  margin:0; margin-block-end:14px;
  font-family:var(--head); font-weight:800; font-size:30px;
  color:var(--paper); background:var(--red);
  padding:16px 9px;
  letter-spacing:.24em;
}
.flag-name{
  margin:0; font-family:var(--head); font-weight:800;
  font-size:clamp(34px,4.8vh,50px); letter-spacing:.16em; line-height:1.08;
}
.flag-en{
  margin:0; margin-block-end:16px;
  font-family:var(--goth); font-size:9.5px; color:var(--ink-3);
  letter-spacing:.3em; text-orientation:sideways;
}
.flag-meta{margin:0; margin-block-end:14px; font-size:11.5px; line-height:2.1; color:var(--ink-2)}
.flag-meta div{margin-block-end:8px}
.flag-meta dt{color:var(--ink-3); margin-block-end:2px}
.flag-meta dd{margin:0}
.flag-note{
  inline-size:fit-content;
  margin:0; font-size:11px; color:var(--ink-2);
  border:1px solid var(--rule);
  padding:12px 8px;
  letter-spacing:.1em;
}
.flag-name, .flag-en, .flag-meta{inline-size:fit-content}

/* ---------- 見出し ---------- */
.kicker{
  margin:0; margin-block-end:10px;
  font-family:var(--goth); font-size:12px; color:var(--red);
  letter-spacing:.2em;
  border-inline-start:3px solid var(--red);   /* 縦組みでは見出しの「上」に来る */
  padding-inline-start:7px;
}
.head-main{
  margin:0; font-family:var(--head); font-weight:800;
  font-size:clamp(44px,7.2vh,70px); line-height:1.16; letter-spacing:.06em;
}
.head-sub{
  margin:0; margin-block-end:14px;
  font-family:var(--head); font-weight:600;
  font-size:clamp(18px,2.4vh,23px); letter-spacing:.1em; color:var(--ink-2);
}
/* 段抜きの太罫（縦組みでは縦の二重罫になる） */
.rule-dbl{
  block-size:100%; inline-size:0;
  margin-block-end:14px;
  border-left:1px solid var(--ink); border-right:3px solid var(--ink);
}

.lead-txt{
  margin:0; margin-block-end:1.15em;
  font-size:calc(var(--fz) + 1px); font-weight:700; line-height:1.95;
}
.body-txt{margin:0; margin-block-end:1.15em; font-size:var(--fz); line-height:2.02}
.nm{font-weight:700; letter-spacing:.1em}
.sig{margin:0; font-size:12px; color:var(--ink-2)}

.head-box{
  margin:0; margin-block-end:12px;
  font-family:var(--head); font-weight:800; font-size:17px; letter-spacing:.1em;
  border-inline-start:3px solid var(--ink); padding-inline-start:9px;
}
.head-edit{
  margin:0; margin-block-end:14px;
  font-family:var(--head); font-weight:800; font-size:21px; letter-spacing:.12em;
  border:1px solid var(--ink);
  padding:14px 10px;
}

/* ---------- 路線図 ---------- */
.col-map{background:var(--paper-2)}
.map{margin-block-end:8px}
/* 天地の余白を増やしたので、路線図は vh 固定でなく段の高さに追従させる */
.map svg{height:100%; max-height:100%; width:auto; display:block}
.map .mline{stroke:var(--ink); stroke-width:3}
.map circle{fill:var(--paper); stroke:var(--ink); stroke-width:2.4}
.map circle.term{fill:var(--ink)}
.map circle.hub{fill:var(--red); stroke:var(--red)}
.map text{
  font-family:var(--min); font-size:11px; fill:var(--ink);
  writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.04em;
}
.map text.b{font-weight:700; fill:var(--red)}
.cap{margin:0; font-size:10.5px; color:var(--ink-3); line-height:1.85}

/* ---------- 囲み記事 ---------- */
.box{
  border:1px solid var(--ink);
  padding:18px 16px;
  margin-block-end:14px;
}
.box-num{background:var(--paper-2)}
.chrono{margin:0; font-size:12.5px; line-height:2.0}
.chrono div{margin-block-end:10px}
.chrono dt{
  font-family:var(--head); font-weight:800; color:var(--ink);
  border-inline-start:1px solid var(--rule); padding-inline-start:6px;
  margin-block-end:3px;
}
.chrono dd{margin:0; color:var(--ink-2)}
.chrono .now dt{color:var(--red); border-inline-start-color:var(--red)}
.chrono .now dd{color:var(--ink); font-weight:700}

.nums{list-style:none; margin:0; padding:0}
.nums li{margin-block-end:11px}
.nums b{font-family:var(--head); font-weight:800; font-size:25px; letter-spacing:.02em}
.nums span{font-size:10.5px; color:var(--ink-2); margin-inline-start:5px}

/* ---------- 沿線から ---------- */
.vx{margin-block-end:15px}
.vx-t{
  margin:0; margin-block-end:6px; font-size:13.5px; line-height:2.05;
  border-inline-start:1px solid var(--rule); padding-inline-start:10px;
}
.vx-n{margin:0; font-size:11px; color:var(--ink-3)}
.box-info{background:var(--paper-2)}
.info{list-style:none; margin:0; padding:0; font-size:12px; line-height:2.0}
.info li{margin-block-end:7px}
.info b{color:var(--red); font-weight:700}

/* ---------- 社説 ---------- */
.col-edit{background:var(--paper-2)}
.col-edit .body-txt{font-size:calc(var(--fz) - .5px)}

/* ---------- 本日の紙面 ---------- */
.idx{list-style:none; margin:0; margin-block-end:16px; padding:0; font-size:12.5px; line-height:2.0}
.idx li{margin-block-end:9px}
.idx b{
  font-family:var(--goth); font-size:11px; color:var(--paper); background:var(--ink);
  padding:5px 3px;
  margin-block-end:5px; letter-spacing:.08em; display:inline-block;
}
.colophon{
  border-inline-start:3px solid var(--ink); padding-inline-start:12px;
  font-size:10.5px; color:var(--ink-2); line-height:1.9;
}
.colophon p{margin:0; margin-block-end:7px}
.colophon-disc{color:var(--ink-3)}
.colophon-c{color:var(--ink-3)}

/* ---------- 狭い画面・低い画面は横組み1段へ ---------- */
@media (max-width:820px), (max-height:520px){
  body{overflow:auto}
  .paper{height:auto; overflow:visible; background:var(--paper)}
  /* #paper 自体は横スクロールしなくなる（縦のページスクロールに切替わる）ので、
     横スクロール連動の読了度バーは意味を失う＝表示しない。 */
  .rp{display:none}
  .sheet{
    writing-mode:horizontal-tb; width:auto; height:auto;
    padding:18px 16px 40px;
  }
  .col{
    writing-mode:horizontal-tb; block-size:auto; height:auto;
    border-left:none; border-bottom:1px solid var(--rule);
    padding:0 0 20px; margin-bottom:20px;
  }
  .col-flag{border-left:none; border-bottom:3px double var(--ink); padding-left:0}
  .flag-ex{display:inline-block; padding:5px 12px; font-size:19px}
  .head-main{font-size:36px; line-height:1.3}
  .rule-dbl{
    block-size:0; inline-size:auto; height:0; width:100%;
    border-left:none; border-right:none;
    border-top:1px solid var(--ink); border-bottom:3px solid var(--ink);
    padding-top:3px; margin-bottom:14px;
  }
  .map svg{height:auto; width:100%; max-width:320px; block-size:auto; inline-size:auto}
  .map text{writing-mode:horizontal-tb; text-orientation:mixed}
  .idx b{display:inline; margin-right:7px}
  .deck-hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .paper{scroll-behavior:auto}
}