/* ============================================================================
   slides.css — 面ごとのHTML部品（表紙・引用・締め・コピー札など）
   ========================================================================= */

/* ---- 表紙 --------------------------------------------------------------- */
.cover { position: absolute; left: 120px; top: 108px; width: 930px; z-index: 3; }
.cv-kicker { display: flex; align-items: baseline; gap: 22px; font: 700 26px/1 var(--f-gothic); letter-spacing: .04em; }
.cv-kicker span { font: 500 22px/1 var(--f-mono); color: var(--tan); letter-spacing: .04em; }
.cover h1 {
  margin-top: 112px;
  font-family: var(--f-mincho); font-weight: 900;
  font-size: 82px; line-height: 1.28; letter-spacing: -.02em;
}
.cv-lead { display: block; margin-bottom: 20px; font-size: 50px; font-weight: 700; color: var(--ink-2); }
.cv-sub { margin-top: 52px; font: 700 34px/1.5 var(--f-gothic); }
.cv-note { margin-top: 6px; font: 500 26px/1.5 var(--f-gothic); color: var(--tan); }
.cv-meta { margin-top: 64px; display: flex; font: 500 23px/1 var(--f-gothic); color: var(--ink-2); }
.cv-meta span + span { margin-left: 24px; padding-left: 24px; border-left: 2px solid var(--kei); }

/* ---- 引用：面を敷かず、上下の罫で組む。どの面でも同じ位置・同じ組み ----- */
.q {
  position: absolute; left: 120px; right: 120px; bottom: 98px; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end;
  padding: 18px 0 20px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--kei);
}
.q blockquote { font: 600 31px/1.55 var(--f-mincho); letter-spacing: .01em; color: var(--ink); }
.q blockquote b { font-weight: 900; }
.q figcaption { font: 500 20px/1.5 var(--f-gothic); color: var(--tan); text-align: right; white-space: nowrap; }
.q figcaption b { display: block; font-weight: 700; color: var(--ink-2); }

/* ---- 締め --------------------------------------------------------------- */
.closing { position: absolute; left: 120px; top: 118px; width: 1020px; z-index: 3; }
.closing .big { font-family: var(--f-mincho); font-weight: 700; font-size: 70px; line-height: 1.5; letter-spacing: -.015em; }
.closing .big .p { color: var(--tan); font-weight: 600; font-size: 44px; display: block; margin-bottom: 12px; }
.closing .big b { font-weight: 900; }

/* ---- コピー札（SVGの中） -------------------------------------------------- */
.art .copy-btn { cursor: pointer; }
.art .copy-btn rect { fill: var(--ink); transition: fill .15s; }
.art .copy-btn text { fill: var(--sheet); font-family: var(--f-mono); font-size: 20px; font-weight: 500; letter-spacing: .14em; }
.art .copy-btn:hover rect { fill: var(--ink-2); }
.art .copy-btn .ok-label { display: none; }
.art .copy-btn.done .ok-label { display: inline; }
.art .copy-btn.done .copy-label { display: none; }

/* ---- 打ち込み（S13） ----------------------------------------------------- */
.art .typed { clip-path: inset(0 100% 0 0); }
.art [data-step].on .typed { animation: type 1.5s steps(30) forwards; animation-delay: var(--d, .2s); }
@keyframes type { to { clip-path: inset(0 0 0 0); } }

/* ---- 窓（画面の中を見せる物）：角丸8は「窓」の印 ------------------------- */
.art .win-frame { fill: var(--sheet); stroke: var(--ink); stroke-width: 3; }
.art .win-bar { fill: var(--sunk); }
.art .win-title { font-family: var(--f-mono); font-size: 20px; font-weight: 500; fill: var(--tan); }

/* ---- S07 賢さのつまみ ---------------------------------------------------- */
.art .knob { transition: transform 1.4s var(--ease); transform: translateX(0); }
.slide[data-at]:not([data-at="0"]) .art .knob { transform: translateX(var(--knob-x, 520px)); }

/* ---- 全景・印刷・動きを減らす設定では、描き起こし系を最初から見せる ---- */
.thumb .art .typed { clip-path: none; }
.thumb .art .draw { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .art .typed { clip-path: none !important; } }
@media print { .art .typed { clip-path: none !important; } .art .draw { stroke-dashoffset: 0 !important; } }