/* Japan Book — minimal, Apple-like typography. Light & dark via system preference. */

:root {
  --bg: #ffffff;
  --fg: #1d1d1f;
  --fg-soft: #6e6e73;
  --accent: #b3261e;          /* a quiet vermilion, 朱色 */
  --hairline: rgba(0, 0, 0, 0.10);
  --card: rgba(0, 0, 0, 0.03);
  --radius: 14px;
  --content: 44rem;
  --nav-h: 3.25rem;
}

/* Dark palette applies when the system asks for it (theme: auto)
   or when the book forces it (theme: dark). theme: light ignores both. */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #111113;
    --fg: #f5f5f7;
    --fg-soft: #98989d;
    --accent: #ff6b5e;
    --hairline: rgba(255, 255, 255, 0.14);
    --card: rgba(255, 255, 255, 0.05);
  }
}

html[data-theme="dark"] {
  --bg: #111113;
  --fg: #f5f5f7;
  --fg-soft: #98989d;
  --accent: #ff6b5e;
  --hairline: rgba(255, 255, 255, 0.14);
  --card: rgba(255, 255, 255, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---------- Cover ---------- */

.cover {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 2rem;
}

.cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* favour the water, but never at the cost of the pagoda roof */
  object-position: center 55%;
}

/* The wider the window, the harder a 4:3 photo is cropped vertically —
   shift the crop up so the roof survives. */
@media (min-aspect-ratio: 15/8) {
  .cover-bg { object-position: center 40%; }
}

@media (min-aspect-ratio: 11/5) {
  .cover-bg { object-position: center 30%; }
}

.cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0.20) 0%,
              rgba(0, 0, 0, 0.05) 40%,
              rgba(0, 0, 0, 0.45) 100%);
}

.cover-inner { position: relative; }

/* With a photo cover the title block sinks to the lower third
   (onto the water), reading order: title, kicker, date. */
.cover-has-photo {
  justify-content: flex-end;
  padding-bottom: 9svh;
}

.cover-has-photo .cover-kicker { margin: 1.1rem 0 0; }
.cover-has-photo .cover-subtitle { margin: 0.5rem 0 0; font-size: 1rem; }
.cover-has-photo .cover-start { margin-top: 2rem; }

.cover-has-photo .cover-kicker,
.cover-has-photo .cover-subtitle { color: rgba(255, 255, 255, 0.88); }

.cover-has-photo .cover-title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.cover-has-photo .cover-start {
  background: #fff;
  color: #1d1d1f;
}

.cover-has-photo .cover-scroll { color: #fff; position: absolute; }

.cover-kicker {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.cover-title {
  margin: 0;
  font-size: clamp(3.5rem, 12vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.cover-subtitle {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  color: var(--fg-soft);
}

.cover-start {
  display: inline-block;
  margin-top: 2.75rem;
  padding: 0.8rem 1.9rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.cover-start:hover { transform: scale(1.03); opacity: 0.9; }

.cover-scroll {
  position: absolute;
  bottom: 2rem;
  text-decoration: none;
  color: var(--fg-soft);
  font-size: 1.25rem;
  animation: drift 2.4s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- Table of contents ---------- */

.toc {
  max-width: var(--content);
  margin: 0 auto;
  padding: 5rem 1.5rem 7rem;
}

.toc-heading {
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.1rem 0.25rem;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  transition: background 0.15s ease;
}

.toc-list li:last-child .toc-item { border-bottom: 1px solid var(--hairline); }
.toc-item:hover { background: var(--card); }

.toc-date { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.toc-title { font-weight: 500; }
.toc-meta { color: var(--fg-soft); font-size: 0.875rem; white-space: nowrap; }

@media (max-width: 32rem) {
  .toc-item { grid-template-columns: 1fr; gap: 0.15rem; }
  .toc-meta { display: none; }
}

/* ---------- Scroll layout ---------- */

.day-header {
  max-width: var(--content);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 3.5rem) 1.5rem 2.5rem;
  text-align: center;
}

.flow {
  padding: 0 0 2rem;
}

.fig {
  margin: 1.6rem auto;
  padding: 0 1rem;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fig .photo,
.fig .video {
  max-height: 78svh;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
}

/* Photo pairs and trios sit side by side only where there is room;
   on phones they stack full-width for comfortable reading. */
.fig-duo, .fig-trio { gap: 1.6rem; }

@media (min-width: 26rem) {
  .fig-duo, .fig-trio {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .fig-duo .photo, .fig-trio .photo {
    flex: 1 1 0;
    min-width: 0;
    object-fit: cover;
  }

  .fig-duo .photo { max-width: calc(50% - 0.375rem); }
  .fig-trio .photo { max-width: calc(33.333% - 0.5rem); }

  .fig-duo .caption, .fig-trio .caption,
  .fig-duo .photo-nums, .fig-trio .photo-nums { flex-basis: 100%; }

  /* on its own line under the row, the badge becomes plain centered text */
  .fig-duo .photo-nums, .fig-trio .photo-nums {
    background: none;
    text-align: center;
  }
}

.flow .caption {
  margin-top: 0.9rem;
  max-width: 38rem;
}

/* Temporary proofing numbers under photos (show_numbers in config) */
.photo-nums {
  margin-top: 0.5rem;
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  background: var(--card);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.flow .prose {
  max-width: 36rem;
  margin: 2.25rem auto;
  padding: 0 1.25rem;
  font-size: 1.0938rem;
  line-height: 1.75;
}

.prose h3 {
  margin: 2.25rem 0 0.5rem;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.prose p { margin: 1rem 0; }

.day-close {
  text-align: center;
  padding: 3rem 0 1rem;
}

/* ---------- Pager (scroll layout) ---------- */

.pager {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--hairline);
  font-weight: 600;
  font-size: 0.9375rem;
}

.pager a { text-decoration: none; color: var(--accent); }
.pager-top { color: var(--fg-soft) !important; font-weight: 500; }
.pager-end { color: var(--fg-soft); font-weight: 500; }

/* ---------- Reader chrome ---------- */

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--nav-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.875rem;
}

.topnav-toc { text-decoration: none; color: var(--accent); font-weight: 600; white-space: nowrap; }

.topnav-day {
  color: var(--fg-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topnav-counter {
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Pages ---------- */

/* Without JS the pages simply stack and scroll; reader.js adds .paged. */
.page {
  min-height: 100svh;
  padding: calc(var(--nav-h) + 1.25rem) 4.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.paged .page { display: none; }

.paged .page.is-active {
  display: flex;
  height: 100svh;
  min-height: 0;
  overflow-y: auto;
  animation: page-in 0.28s ease;
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

.paged.turn-back .page.is-active { animation-name: page-in-back; }

@keyframes page-in-back {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* Chapter opener */

.page-chapter { text-align: center; }

.day-date {
  margin: 0 0 0.6rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

.day-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.day-hint {
  margin: 1.25rem 0 0;
  color: var(--fg-soft);
  font-size: 0.9375rem;
}

/* Media pages */

.spread {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 100%;
  min-height: 0;
}

.photo {
  display: block;
  max-width: 100%;
  max-height: min(66svh, 46rem);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  cursor: zoom-in;
  background: var(--card);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.spread-duo .photo { max-width: calc(50% - 0.5rem); max-height: min(62svh, 42rem); }

.video {
  display: block;
  max-width: 100%;
  max-height: min(66svh, 46rem);
  border-radius: var(--radius);
  background: #000;
}

.caption {
  max-width: 38rem;
  margin-top: 1.25rem;
  text-align: center;
  color: var(--fg-soft);
  font-size: 0.9688rem;
  line-height: 1.55;
}

.caption a { color: var(--accent); }

/* Text pages */

.page-text .prose {
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.75;
}

.prose a { color: var(--accent); }

/* End page */

.page-end { text-align: center; }

.end-mark { margin: 0; color: var(--accent); font-size: 1.5rem; }

.end-date {
  margin: 0.75rem 0 2.5rem;
  color: var(--fg-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

.end-next {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}

.end-fin { color: var(--fg-soft); }

.end-toc {
  display: block;
  margin-top: 1.5rem;
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 0.875rem;
}

.end-toc:hover { color: var(--accent); }

/* Page-turn buttons */

.turn {
  position: fixed;
  top: var(--nav-h);
  bottom: 0;
  width: 4.5rem;
  z-index: 5;
  border: none;
  background: none;
  color: var(--fg-soft);
  font-size: 2rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.turn:hover { opacity: 0.9; }
.turn-prev { left: 0; }
.turn-next { right: 0; }

@media (hover: none) {
  .turn { display: none; }  /* on touch screens: swipe */
}

@media (max-width: 40rem) {
  .page { padding-left: 1rem; padding-right: 1rem; }
  .spread-duo { flex-direction: column; }
  .spread-duo .photo { max-width: 100%; max-height: 40svh; }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lightbox-img {
  max-width: 96vw;
  max-height: 96svh;
  border-radius: 6px;
}

.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 1.1rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}

.lightbox-close:hover { opacity: 1; }