/* ╔════════════════════════════════════════════════╗
   ║  v4 additions — push to 100                    ║
   ║  numbers, voices, before/after, divider, now   ║
   ╚════════════════════════════════════════════════╝ */

/* ── NUMBERS strip ─────────────────────────── */
.numbers{
  background:var(--ink);color:var(--paper);
  padding:64px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.numbers .head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;letter-spacing:.24em;color:#a9b3c4;font-weight:700;
  border-bottom:1px solid #2d3a55;padding-bottom:16px;margin-bottom:36px;
}
.numbers .head b{color:#fff}
.numbers .grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
}
@media(max-width:960px){.numbers .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.numbers .grid{grid-template-columns:1fr}}
.numbers .stat{
  padding:18px 22px;border-right:1px solid #2d3a55;display:flex;flex-direction:column;gap:8px;
  position:relative;
}
.numbers .stat:last-child{border-right:none}
@media(max-width:960px){
  .numbers .stat:nth-child(2n){border-right:none}
  .numbers .stat:nth-child(-n+3){border-bottom:1px solid #2d3a55;padding-bottom:24px;margin-bottom:8px}
}
@media(max-width:520px){
  .numbers .stat{border-right:none;border-bottom:1px solid #2d3a55;padding:20px 0}
  .numbers .stat:last-child{border-bottom:none}
}
.numbers .stat .lab{font-size:10px;letter-spacing:.24em;color:#a9b3c4;font-weight:700;text-transform:uppercase}
.numbers .stat .val{
  font-size:96px;line-height:.92;font-weight:900;letter-spacing:-.04em;color:#fff;
  font-feature-settings:"tnum" 1;display:flex;align-items:baseline;gap:8px;
}
@media(max-width:1100px){.numbers .stat .val{font-size:72px}}
@media(max-width:720px){.numbers .stat .val{font-size:64px}}
.numbers .stat .val .u{font-size:18px;font-weight:700;color:#a9b3c4;letter-spacing:.04em}
.numbers .stat .val.y{color:var(--yellow)}
.numbers .stat .note{font-size:12px;color:#cfd6e0;letter-spacing:.02em;line-height:1.7;margin:0}

/* ── VOICES chorus ─────────────────────────── */
.voices-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:64px 0 18px;border-top:1px solid var(--ink);padding-top:18px;
  font-size:11px;letter-spacing:.22em;color:var(--ink-3);font-weight:700;
}
.voices-head b{color:var(--ink)}
.voices-head .note{color:var(--ink-3);font-weight:500;letter-spacing:.02em;font-size:11px}
.voices{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
@media(max-width:960px){.voices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.voices{grid-template-columns:1fr}}
.voice{
  border:1px solid var(--ink);background:#fff;padding:18px 20px;
  display:flex;flex-direction:column;gap:8px;min-height:160px;position:relative;
}
.voice .meta{
  font-size:10px;letter-spacing:.18em;color:var(--ink-3);font-weight:700;
  display:flex;justify-content:space-between;align-items:baseline;
}
.voice .meta b{color:var(--ink);letter-spacing:.04em;font-size:13px}
.voice .q{
  font-size:15px;line-height:1.65;font-weight:500;color:var(--ink);margin:0;flex:1;letter-spacing:.005em;
}
.voice .q::before{content:"「";color:var(--yellow-ink)}
.voice .q::after{content:"」";color:var(--yellow-ink)}
.voice .ward{font-size:11px;letter-spacing:.04em;color:var(--ink-3);margin:0;border-top:1px dashed var(--line-2);padding-top:8px}
.voice.y{background:var(--paper)}
.voice.y .meta b{background:var(--yellow);padding:2px 6px}

/* ── DIVIDER — chapter cover ─────────────── */
.divider{
  background:var(--ink);color:#e7eaf0;padding:140px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  position:relative;overflow:hidden;
}
.divider .grid{
  display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center;
}
@media(max-width:820px){.divider{padding:80px 0}.divider .grid{grid-template-columns:1fr;gap:32px}}
.divider .vert{
  writing-mode:vertical-rl;text-orientation:upright;
  font-weight:900;font-size:160px;letter-spacing:.02em;line-height:1.05;color:#fff;
  white-space:nowrap;
}
.divider .vert .y{box-shadow:inset .3em 0 0 var(--yellow);padding:.1em 0}
@media(max-width:820px){.divider .vert{font-size:96px;writing-mode:horizontal-tb}}
.divider .copy .lab{
  font-size:11px;letter-spacing:.24em;color:#a9b3c4;font-weight:700;display:block;margin-bottom:18px;
}
.divider .copy h2{
  font-size:54px;line-height:1.4;font-weight:900;letter-spacing:.005em;color:#fff;margin:0 0 18px;text-wrap:balance;
}
@media(max-width:820px){.divider .copy h2{font-size:32px}}
.divider .copy h2 em{font-style:normal;box-shadow:inset 0 -.22em 0 var(--yellow);padding:0 .08em}
.divider .copy .att{font-size:13px;color:#cfd6e0;letter-spacing:.04em;font-weight:500}
.divider .copy .att b{color:#fff;letter-spacing:.18em;font-size:11px;display:block;margin-bottom:6px}

/* ── BEFORE / AFTER ────────────────────────── */
.ba-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:48px 0 18px;font-size:11px;letter-spacing:.22em;color:var(--ink-3);font-weight:700;
}
.ba-head b{color:var(--ink);font-size:14px;letter-spacing:.005em}
.ba{
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;
}
@media(max-width:820px){.ba{grid-template-columns:1fr}}
.ba .col{
  background:#fff;border:1px solid var(--ink);padding:24px;display:flex;flex-direction:column;gap:14px;
}
.ba .col .tag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:10px;letter-spacing:.22em;font-weight:700;
}
.ba .col .tag .d{width:8px;height:8px;background:var(--ink-4);display:inline-block}
.ba .col h4{font-size:18px;font-weight:700;line-height:1.55;margin:0;letter-spacing:.005em}
.ba .col .frag{
  border:1px dashed var(--line);padding:14px;font-size:13px;line-height:1.8;color:var(--ink-2);
  display:flex;flex-direction:column;gap:6px;
}
.ba .col .frag .row{display:flex;align-items:baseline;gap:8px}
.ba .col .frag .row .t{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:var(--ink-3);font-weight:700;flex:none;letter-spacing:.06em}
.ba .col .frag .row .v{font-size:13px}
.ba .col .frag .row .v s{text-decoration:line-through;color:var(--ink-3);text-decoration-color:var(--ink-4)}
.ba .col.before .tag{color:var(--ink-3)}
.ba .col.before h4{color:var(--ink-3)}
.ba .col.before .frag .v{color:var(--ink-3)}
.ba .col.after .tag{color:var(--ink)}
.ba .col.after .tag .d{background:var(--yellow)}
.ba .col.after .frag{background:var(--paper)}
.ba .col.after .frag .v em{font-style:normal;font-weight:700;box-shadow:inset 0 -4px 0 var(--yellow);padding:0 2px}
.ba .arrow{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-size:11px;letter-spacing:.18em;color:var(--ink-3);font-weight:700;padding:0 8px;
}
.ba .arrow .line{width:1px;flex:1;background:var(--ink-3);min-height:48px}
.ba .arrow .head-ar{
  width:14px;height:14px;border-top:1.5px solid var(--ink-3);border-right:1.5px solid var(--ink-3);
  transform:rotate(45deg);
}
@media(max-width:820px){
  .ba .arrow{flex-direction:row;padding:8px 0}
  .ba .arrow .line{height:1px;width:auto;min-height:auto;min-width:48px}
  .ba .arrow .head-ar{transform:rotate(135deg)}
}

/* ── NOW / 進行中 ──────────────────────────── */
.now-board{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media(max-width:900px){.now-board{grid-template-columns:1fr}}
.note-card{
  background:var(--paper);border:1px solid var(--ink);padding:24px;
  display:flex;flex-direction:column;gap:12px;position:relative;
  box-shadow:4px 4px 0 var(--ink);
  min-height:200px;
}
.note-card .pin{
  position:absolute;top:-8px;left:24px;
  font-size:9px;letter-spacing:.22em;color:var(--ink);font-weight:700;
  background:var(--yellow);padding:3px 10px;border:1px solid var(--ink);
}
.note-card h4{font-size:18px;line-height:1.5;font-weight:700;margin:6px 0 4px;letter-spacing:.005em}
.note-card p{font-size:13px;line-height:1.85;color:var(--ink-2);margin:0}
.note-card .when{
  margin-top:auto;font-size:10px;letter-spacing:.18em;color:var(--ink-3);font-weight:700;
  border-top:1px dashed var(--line);padding-top:10px;display:flex;justify-content:space-between;
}
.note-card .when b{color:var(--ink)}

/* ── Hero cover stamp ──────────────────────── */
.cover-stamp{
  position:absolute;top:64px;right:32px;z-index:3;
  border:1px solid var(--ink);background:var(--paper);
  padding:12px 14px;font-size:9px;letter-spacing:.2em;color:var(--ink-3);font-weight:700;
  line-height:1.7;transform:rotate(2deg);
}
.cover-stamp b{color:var(--ink);display:block;font-size:11px;letter-spacing:.18em;margin-bottom:3px}
.cover-stamp .ser{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink);font-size:10px}
@media(max-width:1100px){.cover-stamp{display:none}}

/* ── Chapter marginalia (page-number) ─────── */
.chap .head{position:relative}
.chap .pg{
  position:absolute;top:0;right:0;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;color:var(--ink-3);letter-spacing:.12em;font-weight:700;
}
@media(max-width:820px){.chap .pg{position:static;display:block;margin-bottom:8px}}

/* ── Mobile floating CTA ───────────────────── */
.float-cta{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:55;
  display:none;
}
.float-cta a{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--yellow);color:var(--ink);border:1px solid var(--ink);
  padding:14px 18px;font-weight:700;font-size:15px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.float-cta a small{display:block;font-size:10px;letter-spacing:.18em;color:var(--ink);opacity:.6;font-weight:700}
.float-cta a .ar{display:inline-block;width:22px;height:1px;background:currentColor;position:relative}
.float-cta a .ar::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
@media(max-width:820px){
  .float-cta{display:block}
  body{padding-bottom:80px}
}
body.fcta-hidden .float-cta{transform:translateY(140%);opacity:0;transition:transform .3s,opacity .3s;pointer-events:none}

/* ── Fade-up reveal (JS-gated, fail-open) ──── */
.js .fade-up{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .fade-up.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .fade-up{opacity:1;transform:none;transition:none}
}