/* umineko.myvn.blog — landing for the two Final Analysis volumes.
   Same room as myvn.blog (ink ground, paper text, one lamp-amber accent); the two jackets stand on a board
   under their own lamps, and opening one dims the room to the book's dark cover. */

@font-face {
  font-family: "Umi Serif";
  src: url("/fonts/umineko-serif-v2.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Shelf Italic";
  src: url("/fonts/shelf-italic-v1.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #0a0b0a;
  --ink-soft: #121412;
  --paper: #eee9df;
  --text: #d8d5cd;
  --muted: #a6aaa2;
  --faint: #747b74;
  --amber: #b89b68;
  --lamp: 224 196 142;
  --line: rgb(238 233 223 / .1);
  --line-strong: rgb(238 233 223 / .22);
  --board-top: #24231d;
  --board-face: #131310;
  --cover-dark: #18150f;           /* book.css .book-cover start colour */
  --serif: "Umi Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --italic: "Shelf Italic", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(16px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font: 400 15px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 560px at 10% -12%, rgb(var(--lamp) / .05), transparent 70%),
    radial-gradient(760px 520px at 104% -6%, rgb(129 153 138 / .035), transparent 72%);
}

a { color: inherit; text-decoration: none; }

.page {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: clip;               /* lamp pools and the board run past the column */
  animation: room-in .9s var(--ease) both;
}

@keyframes room-in { from { opacity: 0; } }

/* ── bar ─────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--line);
}

.back {
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .35s var(--ease);
}

.back::before { content: "← "; color: var(--faint); }
.back:hover { color: var(--paper); }

.eyebrow {
  margin: 0;
  font: 400 12px/1.4 var(--serif);
  letter-spacing: .32em;
  color: var(--faint);
}

/* ── hero ────────────────────────────────────────── */

.hero {
  max-width: 720px;
  padding: clamp(56px, 10vw, 112px) 0 clamp(40px, 7vw, 72px);
}

.kicker {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--amber);
}

.hero h1 {
  margin: 0;
  font: 600 clamp(30px, 5.4vw, 52px)/1.2 var(--serif);
  letter-spacing: .04em;
  color: var(--paper);
}

.hero-en {
  margin: 14px 0 0;
  font: italic 400 clamp(17px, 2.2vw, 22px)/1.4 var(--italic);
  color: var(--muted);
}

.lede {
  margin: 30px 0 0;
  max-width: 34em;
  font: 400 16px/1.95 var(--serif);
  color: var(--text);
}

/* ── volumes on the board ────────────────────────── */

.volumes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 6vw, 72px);
  padding-bottom: clamp(56px, 9vw, 96px);
}

.volume {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(300px, 34vw, 380px);
  padding-top: 40px;
  isolation: isolate;
}

/* lamp pool on the wall behind the jacket */
.spot {
  position: absolute;
  inset: -10% -20% 0;
  z-index: -1;
  background: radial-gradient(48% 62% at 50% 46%, rgb(var(--lamp) / .16), rgb(var(--lamp) / .05) 52%, transparent 74%);
  opacity: .8;
  transition: opacity .6s var(--ease);
}

.jacket {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 1px;
  box-shadow:
    0 22px 38px -18px rgb(0 0 0 / .9),
    0 0 0 1px rgb(255 255 255 / .05);
  transform-origin: 50% 100%;
  transition: transform .6s var(--ease), filter .6s var(--ease);
  filter: saturate(.92) brightness(.94);
}

.stage:hover .spot,
.stage:focus-visible .spot { opacity: 1; }

.stage:hover .jacket,
.stage:focus-visible .jacket {
  transform: translateY(-8px);
  filter: none;
}

.stage:focus-visible { outline: none; }
.stage:focus-visible .jacket { outline: 1px solid var(--amber); outline-offset: 6px; }

.board {
  height: 12px;
  margin: 0 -6%;
  background: linear-gradient(var(--board-top), var(--board-face));
  border-top: 1px solid rgb(238 233 223 / .15);
  box-shadow: 0 18px 30px -12px rgb(0 0 0 / .8);
}

.caption { padding-top: 26px; }

.vol-label {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0;
  font: 600 13px/1.4 var(--serif);
  letter-spacing: .3em;
  color: var(--amber);
}

.vol-label span {
  font: 400 12px/1.4 var(--sans);
  letter-spacing: .12em;
  color: var(--faint);
}

.caption h2 {
  margin: 12px 0 0;
  font: 600 clamp(19px, 2.2vw, 23px)/1.45 var(--serif);
  letter-spacing: .03em;
  color: var(--paper);
}

.vol-en {
  margin: 4px 0 0;
  font: italic 400 16px/1.4 var(--italic);
  color: var(--muted);
}

.contents {
  margin: 16px 0 0;
  font: 400 13px/1.9 var(--serif);
  color: var(--muted);
}
.contents span { white-space: nowrap; }
.contents span:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--faint); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  margin: 22px 0 0;
  font-size: 13px;
  letter-spacing: .08em;
}

.actions a {
  position: relative;
  padding: 4px 0;
  color: var(--text);
  transition: color .35s var(--ease);
}

.actions a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transform-origin: left;
  transition: opacity .35s var(--ease);
}

.actions a:hover { color: var(--paper); }
.actions a:hover::after { opacity: .9; }
.actions a.primary { color: var(--amber); }
.actions a.primary::before { content: "→ "; }
.actions a.primary:hover { color: var(--paper); }

.date {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
}

/* ── notes ───────────────────────────────────────── */

.notes {
  padding: 40px 0 64px;
  border-top: 1px solid var(--line);
}

.notes h2 {
  margin: 0 0 26px;
  font: 600 13px/1.4 var(--serif);
  letter-spacing: .5em;
  color: var(--amber);
}

.notes dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 4vw, 48px);
  margin: 0;
}

.notes dt {
  margin-bottom: 8px;
  font: 600 15px/1.5 var(--serif);
  color: var(--paper);
}

.notes dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--muted);
}

/* ── colophon ────────────────────────────────────── */

.colophon {
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--faint);
}

.colophon p { margin: 0 0 6px; }
.colophon a { color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.colophon a:hover { color: var(--paper); }

/* ── opening a volume ────────────────────────────── */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: var(--cover-dark);
  opacity: 0;
  transition: opacity .42s var(--ease);
}

body.is-leaving .curtain { opacity: 1; }
.volume.is-opening .jacket { transform: translateY(-14px) scale(1.03); filter: none; }
.volume.is-opening .spot { opacity: 1; }

/* ── small screens ───────────────────────────────── */

@media (max-width: 760px) {
  .volumes { grid-template-columns: 1fr; gap: 56px; }
  .stage { height: 320px; }
  .notes dl { grid-template-columns: 1fr; gap: 22px; }
  .eyebrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
  .jacket, .spot, .curtain { transition: none; }
}