/* Cover + contents page */
.cover { padding-top: var(--bar-h); background: var(--ink); }
.cover-photo { position: relative; height: clamp(320px, 62svh, 760px); overflow: hidden; background: var(--ink); }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.cover-fallback { height: 100%; display: grid; place-items: center; color: var(--paper); }
.cover-fallback .svgi { width: 22vw; }
.halftone { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(0, 0, 0, .28) 1px, transparent 1.7px); background-size: 5px 5px; mix-blend-mode: multiply; }
.cover-title { background: var(--paper); border-block: var(--line) solid var(--ink); display: grid; place-items: center; padding: clamp(36px, 6vw, 72px) var(--gutter); text-align: center; }
.cover-title .t-title { font-size: clamp(44px, 7vw, 104px); }
.cover-foot { position: relative; display: grid; place-items: center; padding: clamp(36px, 5vw, 64px) var(--gutter); color: var(--paper); }
.cover-pill { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 12px 34px 10px; font-size: clamp(16px, 1.6vw, 20px); display: inline-block; }
.cover-year { position: absolute; right: var(--gutter); bottom: 22px; font-size: 13px; opacity: .7; }

.contents { position: relative; padding: clamp(80px, 12vw, 160px) var(--gutter); overflow: hidden; display: grid; place-items: center; }
.contents-bg { position: absolute; inset: 0; z-index: -1; background: #7fa3c8; }
.contents-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.contents-card { width: min(980px, 100%); background: var(--paper); border: var(--line) solid var(--ink); border-radius: clamp(24px, 4vw, 48px); padding: clamp(28px, 5vw, 70px) clamp(20px, 6vw, 90px); }
.contents-card .t-title { text-align: center; font-size: clamp(40px, 5vw, 72px); margin-bottom: clamp(20px, 3vw, 36px); }
.toc { display: grid; gap: 2px; }
.toc-row { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 10px; font-family: var(--font-mono); font-weight: 500; font-size: clamp(15px, 1.6vw, 20px); isolation: isolate; overflow: hidden; }
.toc-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--row-bg); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); }
a.toc-row:hover, a.toc-row:focus-visible { color: var(--row-ink); }
a.toc-row:hover::before, a.toc-row:focus-visible::before { transform: scaleX(1); }
.toc-num { font-size: .72em; opacity: .5; }
.toc-dots { height: 2px; margin-bottom: .32em; align-self: end; background-image: radial-gradient(circle, currentColor 1px, transparent 1.4px); background-size: 7px 2px; background-repeat: repeat-x; transform-origin: left; }
.toc-page { font-variant-numeric: tabular-nums; }
.toc-soon { font-family: var(--font-accent); text-transform: uppercase; font-size: .7em; padding: 3px 8px 1px; border: 2px solid currentColor; border-radius: 999px; }
.toc-row.is-off { opacity: .45; }
.next--cover { margin-top: 0; }