/* The folio, its rails and its canvas keep the geometry and hit areas of the
   reviewed reader. These rules style the room around that object. */
@font-face {
  font-family: FushengTitle;
  src: url("assets/menghua/dream-serif.29a415936800.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ground: #eff0ec;
  --panel: #f7f7f2;
  --ink: #293d43;
  --muted: #52646a;
  --accent: #81643f;
  --line: #c3cbc8;
  --warm-line: #c8bca6;
  --faint: #e5e8e3;
  --plate: #e6eae6;
  --wash: rgb(239 240 236 / .67);
  --bookmark: #75603f;
  --mark-font: FushengTitle, var(--serif);
}

body[data-light="uv"] {
  --ground: #182128;
  --panel: #202c33;
  --ink: #e5e7df;
  --muted: #b5c1c1;
  --accent: #d9be91;
  --line: #485953;
  --warm-line: #6b685a;
  --faint: #29363a;
  --plate: #263238;
  --wash: rgb(24 33 40 / .965);
  --bookmark: #cbb38f;
}

body {
  background-color: var(--ground);
  background-image: linear-gradient(to bottom, var(--ground) 18%, var(--wash) 62%, var(--ground) 96%),
                    url("assets/home-dream-v1/river-960.webp");
  background-position: center, center 74%;
  background-size: cover;
  background-repeat: no-repeat;
}

::selection { color: var(--panel); background: var(--ink); }
:focus-visible { outline-color: var(--accent); }

/* Reveal the face selector only while it has keyboard focus. */
#book-stage div.rb10-sr:has(button:focus-visible) {
  inset: auto 8px 8px;
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  z-index: 2;
  pointer-events: none;
}
#book-stage .rb10-sr button:focus-visible {
  padding-inline: 12px;
  background: var(--panel);
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  pointer-events: auto;
}
#book-stage div.rb10-sr:has(button:focus-visible) button:not(:focus-visible) {
  position: absolute;
  opacity: 0;
}

/* The initial plate remains usable when the book cannot start. */
body:has(.book-initial) :is(.reader-header nav, .reader-dock, .spread-captions, .book-scrubber, .gesture-hint) {
  visibility: hidden;
}
.book-initial img { max-height: 62%; max-width: 80%; object-fit: contain; }
.book-alternatives { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.book-alternatives a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .32em;
}

.reader-header {
  position: relative;
  gap: clamp(18px, 2.8vw, 48px);
  padding-inline: clamp(18px, 4vw, 80px);
}
.reader-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: clamp(18px, 4vw, 80px);
  right: clamp(18px, 4vw, 80px);
  height: 1px;
  background: var(--line);
  opacity: .63;
  pointer-events: none;
}
.reader-brand {
  font: 600 24px/1.4 var(--mark-font);
  letter-spacing: .18em;
  white-space: nowrap;
}
.reader-header h1 {
  border: 0;
  padding: 0;
  font: 600 13px/1.5 var(--serif);
  letter-spacing: .14em;
}
.reader-header nav { gap: clamp(8px, 1.15vw, 24px); }
.reader-header nav button, .reader-header nav a {
  font-size: 13px;
  letter-spacing: .08em;
}
.reader-header nav .icon-button { border-inline-start: 1px solid var(--line); border-radius: 0; }
.reader-header nav button:not(.icon-button) { min-width: 44px; }

.spread-captions { gap: clamp(22px, 3vw, 54px); }
.spread-captions button { align-items: baseline; }
.spread-captions .page-number { font-size: 13px; color: var(--accent); }
.page-title { font-size: 15px; letter-spacing: .09em; }
.page-number, .paging #page-index, .image-paging, #image-fit, .catalog-caption > span {
  font-family: Georgia, var(--serif);
  font-variant-numeric: tabular-nums;
}
.spread-captions button[aria-pressed=true]::after {
  width: 19px;
  left: calc(50% - 9.5px);
  right: auto;
  bottom: 1px;
  height: 2px;
  background: var(--bookmark);
}

.reader-dock {
  inline-size: min(1180px, calc(100% - clamp(36px, 8vw, 160px)));
  margin-inline: auto;
  padding-inline: 0;
  border-top: 1px solid var(--line);
}
.reader-dock button, .image-footer button { letter-spacing: .06em; }
.reader-dock .paging { gap: 6px; }
.paging #page-index { font-size: 15px; letter-spacing: .12em; }
.reader-dock .light-controls, .info-light, .image-footer .light-controls {
  width: max-content;
  gap: 0;
}
.light-controls button, .info-light button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 52px;
}
.light-controls button::before, .info-light button::before {
  content: "";
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
button[data-light=uv]::before { background: currentColor; }
.light-controls button[aria-pressed=true], .info-light button[aria-pressed=true] {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(transparent 7px, var(--plate) 7px calc(100% - 7px), transparent calc(100% - 7px));
}
.light-controls button[aria-pressed=true]::after, .info-light button[aria-pressed=true]::after {
  content: none;
}
.light-controls button[data-light=uv][aria-pressed=true]::before,
.info-light button[data-light=uv][aria-pressed=true]::before { color: #a4b7eb; }
.view-controls { gap: 6px; }
.view-controls #single-open {
  border-inline-start: 1px solid var(--line);
  margin-inline-start: 4px;
  padding-inline-start: 14px;
}
.icon-button svg, .source-link svg, .detail-open svg { stroke-width: 1.35; }
.scrub-end { color: var(--muted); }
.scrub-ticks span.is-current { background: var(--accent); }
.gesture-hint { letter-spacing: .06em; }

.page-panel, dialog { background: var(--panel); color: var(--ink); }
.page-panel {
  border-radius: 0;
  margin-block-start: 12px;
  box-shadow: 0 4px 22px rgb(27 45 45 / .07);
}
.panel-top, .dialog-header {
  background: var(--panel);
  border-bottom-color: var(--warm-line);
}
.panel-copy { padding: 28px 26px 34px; }
.panel-copy h2, .dialog-header h2, .about-copy .about-lead {
  letter-spacing: .09em;
  text-wrap: balance;
}
.panel-copy h2 { font-size: 31px; margin-bottom: 14px; }
.page-panel .side-tabs { gap: 0; }
.page-panel .side-tabs button { padding-inline: 11px; }
.page-panel .side-tabs button[aria-pressed=true] {
  color: var(--ink);
  background: var(--faint);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--bookmark);
}
.panel-copy .info-light { margin: 0 0 13px; }
.panel-copy .geography { color: var(--accent); letter-spacing: .11em; }
.panel-copy > p:not(.geography), .about-copy p {
  color: var(--ink);
  line-height: 2;
  text-wrap: pretty;
}
.panel-copy .meaning { border-top-color: var(--warm-line); margin-top: 20px; padding-top: 17px; }
.panel-copy .detail-open { color: var(--accent); margin-top: 12px; }
.detail-open, .source-link, .download-links a { letter-spacing: .045em; }
.about-dialog { width: min(780px, calc(100vw - 48px)); }
.about-copy { padding: clamp(22px, 3.4vw, 46px); }
.binding-plate { margin: 0; }
.binding-plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.about-copy .note-edition {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 18px 0 16px;
  color: var(--muted);
  font: 12px/1.6 var(--serif);
  letter-spacing: .035em;
}
@media (max-width: 600px) {
  .about-dialog { width: 100%; }
}
.about-copy .download-links a span:last-child, .image-footer p { color: var(--muted); }

dialog::backdrop { background: rgb(20 36 40 / .48); }
.dialog-header h2 { font-size: 25px; }
.catalog-dialog { overflow-anchor: none; } /* Filtering should not pull a short viewport back to its old row. */
.catalog-dialog .dialog-header {
  display: grid;
  grid-template-columns: 1fr minmax(235px, 360px) auto;
  grid-template-areas: "title search close";
  align-items: center;
}
.catalog-dialog .dialog-header h2 { grid-area: title; }
.catalog-dialog #catalog-close { grid-area: close; }
.catalog-toolbar { grid-area: search; padding: 0; gap: 14px; }
.catalog-toolbar input, .catalog-toolbar p { font-size: 13px; }
.catalog-toolbar label { min-width: 0; flex: 1; border-color: var(--warm-line); }
.catalog-toolbar p { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.catalog-toolbar label:focus-within {
  border-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}
.catalog-toolbar input:focus-visible { outline: 0; }
@media (forced-colors: active) {
  .catalog-toolbar input:focus-visible { outline: 2px solid Highlight; }
}
.catalog-list { gap: 27px 23px; padding-top: 26px; }
.catalog-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.catalog-spread { flex: none; background: var(--plate); }
.catalog-item .catalog-caption {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: 2px 0 10px;
  gap: 12px;
}
.catalog-item .catalog-caption > span { grid-column: 2; grid-row: 1; white-space: nowrap; color: var(--accent); font-size: 12px; font-variant-numeric: lining-nums tabular-nums; }
.catalog-item .catalog-caption > strong { grid-column: 1; grid-row: 1; font: 600 16px/1.5 var(--serif); letter-spacing: .06em; }
.catalog-item[aria-current="page"] .catalog-spread { position: relative; }
.catalog-item[aria-current="page"] .catalog-spread::after {
  content: "在读" / "";
  position: absolute;
  inset: 0 9px auto auto;
  padding: 2px 7px 3px;
  border-block-end: 2px solid var(--bookmark);
  background: var(--ink);
  color: var(--panel);
  font: 600 11px/1.6 var(--serif);
  letter-spacing: .06em;
  pointer-events: none;
}
.catalog-item[aria-current="page"] .catalog-caption { border-bottom: 2px solid var(--bookmark); }
@media (forced-colors: active) {
  .catalog-item[aria-current="page"] .catalog-spread::after { border: 1px solid Highlight; }
  .catalog-item[aria-current="page"] .catalog-caption { border-bottom-color: Highlight; }
}
@media (max-height: 420px) and (min-width: 600px) and (max-width: 760px) {
  .catalog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.image-dialog { background: var(--ground); }
.image-dialog .dialog-header { background: var(--panel); }
.image-dialog .dialog-header h2 { font-size: 20px; letter-spacing: .075em; }
#image-title:focus-visible {
  outline: none;
  text-decoration: underline solid var(--accent) 2px;
  text-underline-offset: .24em;
}
@media (forced-colors: active) {
  #image-title:focus-visible { text-decoration-color: Highlight; }
}
.image-paging #image-count, .image-zoom #image-fit { font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width:761px) {
  .image-dialog .dialog-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    padding-inline: clamp(26px, 4vw, 80px);
  }
  .image-zoom { justify-self: end; }
}
.image-footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
  line-height: 1.8;
}
.image-footer p { max-width: 52ch; font-size: 14px; line-height: 1.75; text-wrap: pretty; }
.image-footer .light-controls { flex: none; }
.image-zoom { border-inline-start: 1px solid var(--line); padding-inline-start: 12px; }
button:disabled { opacity: .42; }

@media (hover:hover) {
  .reader-header nav button:hover:not(:disabled),
  .reader-dock button:hover:not(:disabled),
  .dialog-header button:hover:not(:disabled),
  .panel-top button:hover:not(:disabled) { background: var(--faint); color: var(--ink); }
  .catalog-item:hover .catalog-spread { outline: 1px solid var(--warm-line); outline-offset: 2px; }
  .catalog-item:hover .catalog-caption { border-bottom-color: var(--accent); }
}

.sources-room { min-height: 100dvh; height: auto; overflow: auto; background: var(--ground); }
.sources-room .reader-header { flex: none; min-height: 64px; }
.sources-room nav a { display: inline-flex; align-items: center; min-height: 44px; }
.credits {
  width: min(900px, calc(100% - 44px));
  margin: clamp(34px, 6vw, 82px) auto 70px;
}
.credits-intro { max-width: 57ch; padding-bottom: clamp(22px, 4vw, 46px); }
.credits h1 { font: 600 clamp(29px, 4vw, 44px)/1.5 var(--serif); letter-spacing: .10em; }
.credits .credits-intro p { font-size: 16px; margin: 13px 0 0; }
.credit-chapter {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 3.5fr);
  gap: clamp(22px, 4vw, 62px);
  padding: clamp(22px, 3.2vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.credit-chapter > div > :first-child { margin-block-start: 0; }
.credit-chapter > div > :last-child { margin-block-end: 0; }
.credits h2 {
  font: 600 20px/1.55 var(--serif);
  letter-spacing: .09em;
  margin: 0;
}
.credits p, .credits li { font-size: 14px; line-height: 2.05; margin-block: .85em; }
.credits ul { padding: 0; list-style: none; margin: 0; }
.credits li::marker { color: var(--bookmark); }
.credits a { text-decoration: underline; text-decoration-color: var(--warm-line); text-underline-offset: .3em; }
.credits .small { color: var(--muted); font-size: 13px; }
.credits footer { display: flex; justify-content: space-between; gap: 16px 30px; padding-block-start: 12px; border-top: 1px solid var(--line); }
.credits footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) {
  .credit-chapter { grid-template-columns: minmax(0, 1fr); gap: 13px; }
}

@media (max-width: 760px) {
  body { background-position: center, 68% center; }
  .reader-header { gap: 12px; }
  .reader-brand { font-size: 21px; }
  .reader-header h1 { font-size: 11px; letter-spacing: .02em; }
  .reader-header nav { gap: 0; }
  .reader-header nav button { font-size: 12px; }
  .reader-dock { inline-size: calc(100% - 24px); }
  .view-controls { gap: 0; }
  .view-controls #single-open { padding-inline: 5px; margin-inline-start: 2px; }
  .paging #page-index { font-size: 14px; }
  .page-title { font-size: 14px; }
  .spread-captions button { gap: 6px; }
  .panel-copy { padding: 18px 22px 28px; }
  .panel-copy h2 { font-size: 26px; }
  .panel-top { padding: 4px 10px; }
  .page-panel .panel-copy .info-light { margin-bottom: 8px; }
  .catalog-dialog .dialog-header {
    grid-template-areas: "title close" "search search";
    grid-template-columns: 1fr auto;
    gap: 0 8px;
    padding-block: 5px 12px;
  }
  .catalog-toolbar { align-items: center; }
  .catalog-list { gap: 22px 12px; }
  .catalog-item .catalog-caption {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 2px;
    padding-bottom: 7px;
  }
  .catalog-item .catalog-caption > strong { font-size: 14px; }
  .catalog-item .catalog-caption > span { grid-column: 1; grid-row: 2; margin: 0; font-size: 12px; }
  .image-dialog .dialog-header h2 { font-size: 17px; }
  .image-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 13px;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom));
  }
  .image-footer .light-controls { margin: 0; }
  .image-footer p { margin: 0; align-self: center; text-align: left; font-size: 13px; max-height: none; overflow: visible; }
  .light-controls button, .info-light button { min-width: 44px; gap: 4px; }
  .image-zoom { padding-inline-start: 7px; }
}
@media (max-width: 360px) {
  .reader-header { gap: 8px; padding-inline: 12px; }
  .reader-header h1 { font-size: 10px; }
}
@media (max-height:420px) and (min-width:600px) {
  .reader-header { padding-inline: 14px; }
  .reader-brand { font-size: 18px; }
}

/* A portrait folio uses the full height beside its marginal notes on a short
   landscape screen. The notes can scroll together while the paper stays put. */
@media (min-width: 480px) and (max-height: 500px) and (min-aspect-ratio: 3/2) {
  .image-dialog[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(215px, 35vw, 335px);
    grid-template-rows: max-content minmax(min-content, 1fr);
    grid-template-areas: "folio tools" "folio notes";
    overflow: hidden auto;
    scrollbar-gutter: stable;
  }
  .image-dialog .flat-image-area {
    grid-area: folio;
    position: sticky;
    top: 0;
    align-self: start;
    min-width: 0;
    height: 100dvh;
  }
  .image-dialog .dialog-header, .image-dialog .image-footer {
    border-inline-start: 1px solid var(--line);
    padding-inline: clamp(12px, 2vw, 24px);
  }
  .image-dialog .dialog-header {
    grid-area: tools;
    position: static;
    display: grid;
    grid-template: "title close" auto "paging paging" 44px "zoom zoom" 44px / minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
    padding-block: 8px;
  }
  .image-dialog .dialog-header h2 { grid-area: title; overflow-wrap: anywhere; }
  .image-dialog #image-close { grid-area: close; margin: 0; }
  .image-dialog .image-paging, .image-dialog .image-zoom {
    display: grid;
    width: 100%;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 0;
    justify-items: center;
    align-items: center;
  }
  .image-dialog .image-paging { grid-area: paging; }
  .image-dialog .image-zoom { grid-area: zoom; border: 0; padding: 0; }
  .image-dialog .dialog-header button { min-width: 44px; min-height: 44px; }
  .image-dialog .image-footer {
    grid-area: notes;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 8px;
    padding-block: 10px max(14px, env(safe-area-inset-bottom));
    border-top: 0;
  }
  .image-dialog .image-footer .light-controls,
  .image-dialog .image-footer p { margin: 0; }
  .image-dialog .image-footer p {
    align-self: stretch;
    max-height: none;
    overflow: visible;
    text-align: start;
    font-size: 14px;
  }
}