/* Book · the look — closed leather book on the cover, open book after; gilt and oxblood. Tokens: css/deck.css.
   Geometry: the open book is two boards of 696 × 860 meeting at the stage centre; the closed book is one board,
   centred (so it sits 348 design px left of where its right-hand board ends up — see fx.css). */
:root {
  --board-w: calc(696 * var(--px));
  --board-h: calc(860 * var(--px));
  --book-top: calc(20 * var(--px));
  --book-x: calc(24 * var(--px));
  --closed-shift: calc(-348 * var(--px));
  --page-inset: calc(12 * var(--px));
}

.deck { background: radial-gradient(80% 80% at 50% 45%, #15130f 0%, #000 75%); }
.slide { padding: 0; color: var(--ink); }

/* shared leather grain (static) */
.leather {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(110% 120% at 45% 30%, var(--leather-hi), var(--leather) 55%, var(--leather-deep));
}

.gilt {
  background: linear-gradient(180deg, var(--gilt-hi) 0%, var(--gilt) 55%, var(--gilt-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 calc(2 * var(--px)) 0 rgba(0, 0, 0, 0.45));
}

/* ================= cover (closed book, one board) ================= */
.cover-face { position: absolute; overflow: hidden; border-radius: 0 calc(10 * var(--px)) calc(10 * var(--px)) 0; }
.book-cover .cover-face {
  left: calc(50% - var(--board-w) / 2);
  top: var(--book-top);
  width: var(--board-w);
  height: var(--board-h);
  box-shadow: 0 calc(30 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, 0.7);
}

.spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(64 * var(--px));
  background:
    linear-gradient(180deg,
      transparent 15%, rgba(0, 0, 0, 0.35) 15.3%, rgba(255, 255, 255, 0.08) 16%, transparent 16.6%,
      transparent 36%, rgba(0, 0, 0, 0.35) 36.3%, rgba(255, 255, 255, 0.08) 37%, transparent 37.6%,
      transparent 62%, rgba(0, 0, 0, 0.35) 62.3%, rgba(255, 255, 255, 0.08) 63%, transparent 63.6%,
      transparent 83%, rgba(0, 0, 0, 0.35) 83.3%, rgba(255, 255, 255, 0.08) 84%, transparent 84.6%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 40%, rgba(255, 255, 255, 0.05) 70%, rgba(0, 0, 0, 0.35));
}
.spine::after { /* hinge groove */
  content: "";
  position: absolute;
  right: calc(-12 * var(--px)); top: 0; bottom: 0;
  width: calc(12 * var(--px));
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.06) 60%, transparent);
}

.gilt-frame, .cover-content {
  position: absolute;
  top: calc(40 * var(--px));
  bottom: calc(40 * var(--px));
  left: calc(104 * var(--px));
  right: calc(40 * var(--px));
}
.gilt-frame {
  border: calc(2 * var(--px)) solid var(--gilt);
  outline: calc(1 * var(--px)) solid rgba(201, 168, 98, 0.6);
  outline-offset: calc(8 * var(--px));
  opacity: 0.85;
}
.gilt-frame i {
  position: absolute;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border: calc(2 * var(--px)) solid var(--gilt);
  background: var(--leather);
  transform: rotate(45deg);
}
.gilt-frame i:nth-child(1) { top: calc(-11 * var(--px)); left: calc(-11 * var(--px)); }
.gilt-frame i:nth-child(2) { top: calc(-11 * var(--px)); right: calc(-11 * var(--px)); }
.gilt-frame i:nth-child(3) { bottom: calc(-11 * var(--px)); left: calc(-11 * var(--px)); }
.gilt-frame i:nth-child(4) { bottom: calc(-11 * var(--px)); right: calc(-11 * var(--px)); }

.cover-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-3);
  text-align: center;
}
.cover-group {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-right: -0.42em;
}
.cover-orn { margin: var(--s-1) 0 var(--s-2); font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.cover-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-title); line-height: 1.1; }
.cover-num { font-family: var(--font-display); font-weight: 600; font-size: 8.2rem; line-height: 0.95; }
.cover-rule {
  position: relative;
  width: calc(300 * var(--px));
  height: calc(3 * var(--px));
  flex-shrink: 0;
  margin: var(--s-3) 0 var(--s-2);
  background: linear-gradient(90deg, transparent, var(--gilt) 20%, var(--gilt) 80%, transparent);
}
.cover-rule i {
  position: absolute;
  left: calc(50% - 7 * var(--px));
  top: calc(-6 * var(--px));
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
  background: var(--gilt);
  transform: rotate(45deg);
}
.cover-sub { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 3.4rem; line-height: 1.15; }
.cover-topic { margin-top: var(--s-1); font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm); white-space: nowrap; color: var(--paper); opacity: 0.9; }
.cover-by { margin-top: var(--s-3); }
.cover-by span { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--t-xs); color: var(--paper); opacity: 0.75; }
.cover-by p {
  margin-top: calc(4 * var(--px));
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ================= open book: two boards, two pages ================= */
.book-open {
  position: absolute;
  left: var(--book-x);
  right: var(--book-x);
  top: var(--book-top);
  height: var(--board-h);
  perspective: calc(2600 * var(--px));
}
.half { position: absolute; top: 0; bottom: 0; width: 50%; }
.half.l { left: 0; }
.half.r { left: 50%; }
.board { position: absolute; inset: 0; }
.half.l .board, .leaf-face.l .board { border-radius: calc(10 * var(--px)) 0 0 calc(10 * var(--px)); }
.half.r .board, .leaf-face.r .board { border-radius: 0 calc(10 * var(--px)) calc(10 * var(--px)) 0; }

.page { position: absolute; top: var(--page-inset); bottom: var(--page-inset); padding: calc(44 * var(--px)) calc(52 * var(--px)); }
.page.l {
  left: var(--page-inset);
  right: 0;
  background:
    radial-gradient(2.4% 2% at 16% 82%, rgba(150, 100, 50, 0.16), transparent),
    radial-gradient(1.8% 1.4% at 76% 12%, rgba(150, 100, 50, 0.14), transparent),
    radial-gradient(130% 110% at 60% 50%, var(--paper) 55%, var(--paper-age) 100%),
    var(--paper);
  box-shadow:
    inset calc(-46 * var(--px)) 0 calc(44 * var(--px)) calc(-22 * var(--px)) rgba(80, 50, 20, 0.5),
    calc(-2 * var(--px)) calc(2 * var(--px)) 0 var(--edge-a), calc(-4 * var(--px)) calc(4 * var(--px)) 0 var(--edge-b),
    calc(-6 * var(--px)) calc(6 * var(--px)) 0 var(--edge-a), calc(-8 * var(--px)) calc(8 * var(--px)) 0 var(--edge-c);
  border-radius: calc(4 * var(--px)) 0 0 calc(4 * var(--px));
}
.page.r {
  left: 0;
  right: var(--page-inset);
  background:
    radial-gradient(2.2% 1.8% at 84% 74%, rgba(150, 100, 50, 0.15), transparent),
    radial-gradient(130% 110% at 40% 50%, var(--paper) 55%, var(--paper-age) 100%),
    var(--paper);
  box-shadow:
    inset calc(46 * var(--px)) 0 calc(44 * var(--px)) calc(-22 * var(--px)) rgba(80, 50, 20, 0.5),
    calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--edge-a), calc(4 * var(--px)) calc(4 * var(--px)) 0 var(--edge-b),
    calc(6 * var(--px)) calc(6 * var(--px)) 0 var(--edge-a), calc(8 * var(--px)) calc(8 * var(--px)) 0 var(--edge-c);
  border-radius: 0 calc(4 * var(--px)) calc(4 * var(--px)) 0;
}

.frame {
  position: absolute;
  inset: calc(24 * var(--px)) calc(28 * var(--px));
  border: calc(1.5 * var(--px)) solid rgba(122, 31, 43, 0.55);
  outline: calc(1 * var(--px)) solid rgba(122, 31, 43, 0.35);
  outline-offset: calc(5 * var(--px));
}
.frame i {
  position: absolute;
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  border: calc(1.5 * var(--px)) solid rgba(122, 31, 43, 0.6);
  transform: rotate(45deg);
  background: var(--paper);
}
.frame i:nth-child(1) { top: calc(-10 * var(--px)); left: calc(-10 * var(--px)); }
.frame i:nth-child(2) { top: calc(-10 * var(--px)); right: calc(-10 * var(--px)); }
.frame i:nth-child(3) { bottom: calc(-10 * var(--px)); left: calc(-10 * var(--px)); }
.frame i:nth-child(4) { bottom: calc(-10 * var(--px)); right: calc(-10 * var(--px)); }
/* each page wears its work's colour */
.page.l .frame, .page.l .frame i { border-color: color-mix(in srgb, var(--vn) 60%, transparent); }
.page.l .frame { outline-color: color-mix(in srgb, var(--vn) 35%, transparent); }
.page.r .frame, .page.r .frame i { border-color: color-mix(in srgb, var(--ap) 55%, transparent); }
.page.r .frame { outline-color: color-mix(in srgb, var(--ap) 30%, transparent); }

.content { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.runhead { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-sm); color: var(--ink-soft); }
.chapter {
  margin-top: calc(34 * var(--px));
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.fleuron { margin: var(--s-1) 0 calc(14 * var(--px)); font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--oxblood); }
.title { margin: 0; font-size: var(--t-title); }
.title .cap {
  display: inline-block;
  padding: 0 var(--s-1);
  margin-right: calc(4 * var(--px));
  color: var(--paper);
  background: var(--oxblood);
  line-height: 1.05;
}
.source { margin: calc(12 * var(--px)) 0 var(--s-3); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-md); color: var(--ink-soft); }
.hook { margin-top: auto; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-lg); line-height: 1.25; }
.hook em { font-style: normal; font-weight: 600; color: var(--oxblood); }
.across {
  margin: calc(18 * var(--px)) 0 calc(30 * var(--px));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2rem;
  color: var(--oxblood);
}
.page.l .across { align-self: flex-end; margin-right: calc(-12 * var(--px)); }
.page.r .across { align-self: flex-start; margin-left: calc(-12 * var(--px)); }

.ribbon {
  position: absolute;
  z-index: 6;
  left: calc(50% - 11 * var(--px));
  top: var(--page-inset);
  width: calc(22 * var(--px));
  height: calc(600 * var(--px));
  background: linear-gradient(90deg, var(--oxblood-deep), var(--oxblood) 45%, var(--oxblood-deep));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 95%, 0 100%);
}

/* ================= content pages =================
   Left page is always Vợ nhặt, right page always Vợ chồng A Phủ; --c is the page's work colour.
   Shared points (true of both works) sit on an oxblood .banner across the spine. */
.page.l { --c: var(--vn); --c-soft: var(--vn-soft); --c-tint: var(--vn-tint); }
.page.r { --c: var(--ap); --c-soft: var(--ap-soft); --c-tint: var(--ap-tint); }
.chapter { color: var(--c, var(--oxblood)); }
.page .content { z-index: 1; }

/* page number in the outer top corner, on the running head's line (the banner covers the foot of the page) */
.folio {
  position: absolute;
  z-index: 1;
  top: calc(44 * var(--px));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}
.page.l .folio { left: calc(52 * var(--px)); }
.page.r .folio { right: calc(52 * var(--px)); }

/* faint ink-wash landscape along the foot of each page: delta hamlet (Vợ nhặt), mountain ridges (A Phủ) */
.page::after {
  content: "";
  position: absolute;
  left: calc(30 * var(--px));
  right: calc(30 * var(--px));
  bottom: calc(26 * var(--px));
  height: calc(150 * var(--px));
  background: no-repeat center bottom / 100% 100%;
  opacity: 0.2;
  pointer-events: none;
}
.page.l::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 150' preserveAspectRatio='none'%3E%3Cg fill='%2394570f'%3E%3Cpath opacity='.45' d='M0 104C90 88 170 108 260 98S440 86 600 100V150H0Z'/%3E%3Cpath d='M360 102L404 70L448 102ZM372 102H436V122H372Z' opacity='.8'/%3E%3Cpath d='M440 108L472 86L504 108ZM448 108H496V124H448Z' opacity='.7'/%3E%3Cpath d='M120 98C122 70 126 52 130 40M130 40C120 34 108 36 100 30M130 52C142 46 150 40 160 38M126 66C116 62 108 60 98 62' stroke='%2394570f' stroke-width='3' fill='none' opacity='.8'/%3E%3Cpath d='M0 124C150 116 300 128 600 118V150H0Z' opacity='.6'/%3E%3C/g%3E%3Cg stroke='%2394570f' stroke-width='2' opacity='.55'%3E%3Cpath d='M20 136H580M40 144H560'/%3E%3C/g%3E%3C/svg%3E");
}
.page.r::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 150' preserveAspectRatio='none'%3E%3Cg fill='%232b3a7a'%3E%3Cpath opacity='.35' d='M0 92L60 56L110 76L170 28L232 72L292 44L352 82L420 32L482 66L540 40L600 70V150H0Z'/%3E%3Cpath opacity='.6' d='M0 118L80 86L140 106L210 70L282 102L360 80L430 110L500 78L600 102V150H0Z'/%3E%3Cpath d='M0 136C120 126 260 140 400 130S540 128 600 134V150H0Z'/%3E%3C/g%3E%3C/svg%3E");
}

.pg { align-items: stretch; text-align: left; gap: calc(18 * var(--px)); }
.pg > .runhead { text-align: center; }
.panel { gap: calc(18 * var(--px)); }
.foot-orn { margin-top: auto; text-align: center; font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--c); opacity: 0.7; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

.work {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: calc(4 * var(--px));
  color: var(--c);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.work::before, .work::after { content: ""; flex: 1; height: calc(1.5 * var(--px)); background: currentColor; opacity: 0.4; }
.work span { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--t-sm); letter-spacing: 0.04em; text-transform: none; opacity: 0.85; }

.lede, .defs dd { font-family: var(--font-body); font-size: 1.45rem; line-height: 1.4; color: var(--ink); }
.lede b, .defs dd b { font-weight: 650; }

.label, .defs dt {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  color: var(--c);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.label::before, .defs dt::before {
  content: "";
  flex: none;
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
  background: var(--c);
  transform: rotate(45deg);
}
.label.c { justify-content: center; }
.defs { display: flex; flex-direction: column; gap: var(--s-3); }
.defs dd { margin-top: calc(4 * var(--px)); padding-left: calc(21 * var(--px)); }
.defs .chips { justify-content: flex-start; margin-top: calc(6 * var(--px)); }

/* highlighter stroke in the page's colour */
.mark {
  padding: 0 0.08em;
  background: linear-gradient(transparent 56%, var(--c-soft) 56%, var(--c-soft) 94%, transparent 94%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--px)) calc(12 * var(--px)); }
.chips li {
  padding: calc(9 * var(--px)) calc(18 * var(--px)) calc(11 * var(--px));
  border: calc(2 * var(--px)) solid var(--c);
  border-radius: 999px;
  background: var(--c-tint);
  color: var(--c);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1;
}

/* real photo, tipped in with corner mounts; the tilt lives here, so never animate .photo itself */
.photo {
  position: relative;
  align-self: center;
  width: calc(var(--w, 540) * var(--px));
  padding: calc(10 * var(--px)) calc(10 * var(--px)) calc(6 * var(--px));
  background: #f8f1df;
  box-shadow: 0 calc(6 * var(--px)) calc(14 * var(--px)) rgba(60, 35, 10, 0.35), 0 calc(1 * var(--px)) calc(2 * var(--px)) rgba(0, 0, 0, 0.3);
  transform: rotate(var(--tilt, -1.2deg));
}
.photo img { display: block; width: 100%; height: calc(var(--h, 260) * var(--px)); object-fit: cover; filter: sepia(0.3) contrast(1.05) saturate(0.85); }
.photo figcaption {
  margin-top: calc(5 * var(--px));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-xs);
  line-height: 1.2;
  text-align: center;
  color: var(--ink-soft);
}
.photo::before, .photo::after {
  content: "";
  position: absolute;
  width: calc(34 * var(--px));
  height: calc(34 * var(--px));
}
.photo::before { left: calc(-6 * var(--px)); top: calc(-6 * var(--px)); background: linear-gradient(135deg, #3d2c1e 50%, transparent 50%); }
.photo::after { right: calc(-6 * var(--px)); bottom: calc(-6 * var(--px)); background: linear-gradient(-45deg, #3d2c1e 50%, transparent 50%); }

/* storybook plate: the illustration bleeds softly into the paper */
.plate { align-self: center; width: 100%; }
.plate img {
  display: block;
  width: 100%;
  height: calc(var(--h, 300) * var(--px));
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  -webkit-mask-image: radial-gradient(75% 72% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(75% 72% at 50% 50%, #000 60%, transparent 100%);
}

/* erosion-glow picture (js/erosion-glow.js draws it; the glow spills 120px, so neighbours that must stay
   readable sit above it). Page-turn copies have no canvas: they show the plain img, softened like a .plate. */
.eg { flex: none; width: 100%; height: calc(var(--h, 300) * var(--px)); }
.pg > .runhead, .pg > .work, .panel > .defs, .panel > .cue { position: relative; z-index: 1; }
.leaf .erosion-canvas, .turn-under .erosion-canvas { display: none; }
.leaf .erosion-glow > img, .turn-under .erosion-glow > img, .erosion-glow.is-dom > img {
  opacity: 1;
  -webkit-mask-image: radial-gradient(75% 72% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(75% 72% at 50% 50%, #000 60%, transparent 100%);
}

/* author portrait in a gilt oval */
.author { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-1) 0 var(--s-2); }
.medal {
  flex: none;
  width: calc(176 * var(--px));
  height: calc(214 * var(--px));
  padding: calc(6 * var(--px));
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gilt-hi), var(--gilt) 45%, var(--gilt-lo));
  box-shadow: 0 calc(8 * var(--px)) calc(18 * var(--px)) rgba(60, 35, 10, 0.4);
}
.medal img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: var(--pos, 50% 30%); filter: sepia(0.3) contrast(1.05); }
.author h3 { font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; line-height: 1; color: var(--ink); }
.author p { margin-top: calc(6 * var(--px)); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-md); color: var(--ink-soft); line-height: 1.2; }

/* "to be continued" cue on a page that will burn away */
.cue {
  margin-top: auto;
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--c);
}
.cue::before {
  content: "";
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  border-radius: 50%;
  background: radial-gradient(circle, #ffd27a, #ff7a1a 60%, transparent 70%);
  box-shadow: 0 0 calc(10 * var(--px)) #ff8a2a;
  animation: cueGlow 1.6s ease-in-out infinite alternate;
}
@keyframes cueGlow { from { opacity: 0.35; } to { opacity: 1; } }

/* ribbon banner across the spine: a point both works share */
.banner {
  position: absolute;
  z-index: 6;
  left: 50%;
  width: calc(var(--bw, 860) * var(--px));
  margin-left: calc(var(--bw, 860) * -0.5 * var(--px));
  bottom: calc(38 * var(--px));
}
.banner.top { bottom: auto; top: calc(40 * var(--px)); }
.banner::before, .banner::after {
  content: "";
  position: absolute;
  top: calc(14 * var(--px));
  bottom: calc(-14 * var(--px));
  width: calc(72 * var(--px));
  background: linear-gradient(180deg, #4a0f19, var(--oxblood-deep));
}
.banner::before { left: calc(-48 * var(--px)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
.banner::after { right: calc(-48 * var(--px)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 70% 50%); clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
.banner-body {
  position: relative;
  z-index: 1;
  padding: calc(14 * var(--px)) calc(44 * var(--px)) calc(16 * var(--px));
  text-align: center;
  background: linear-gradient(180deg, #92293a, var(--oxblood) 55%, var(--oxblood-deep));
  box-shadow:
    inset 0 calc(3 * var(--px)) 0 calc(-1 * var(--px)) rgba(239, 219, 160, 0.55),
    inset 0 calc(-3 * var(--px)) 0 calc(-1 * var(--px)) rgba(239, 219, 160, 0.4),
    0 calc(10 * var(--px)) calc(22 * var(--px)) rgba(0, 0, 0, 0.45);
}
.banner-body p { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.15; white-space: nowrap; }
.banner-body small { display: block; margin-bottom: calc(4 * var(--px)); font-family: var(--font-body); font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gilt-hi); opacity: 0.8; }
.has-banner .pg { padding-bottom: calc(66 * var(--px)); }
/* the scroll's rolled ends, only seen while it unrolls / rolls up */
.banner .roll {
  position: absolute;
  z-index: 2;
  top: calc(-7 * var(--px));
  bottom: calc(-7 * var(--px));
  width: calc(26 * var(--px));
  border-radius: calc(7 * var(--px));
  background: linear-gradient(90deg, #3d0a12, #8f2636 28%, #c4596a 46%, #8f2636 64%, #3d0a12);
  box-shadow:
    inset 0 calc(3 * var(--px)) 0 calc(-1 * var(--px)) rgba(239, 219, 160, 0.6),
    inset 0 calc(-3 * var(--px)) 0 calc(-1 * var(--px)) rgba(239, 219, 160, 0.5),
    0 calc(6 * var(--px)) calc(12 * var(--px)) rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
}
.banner .roll.l { left: calc(-13 * var(--px)); }
.banner .roll.r { right: calc(-13 * var(--px)); }

/* table of contents */
.pg-title { margin-top: var(--s-2); font-family: var(--font-display); font-weight: 600; font-size: 3.6rem; line-height: 1.02; text-align: center; color: var(--ink); }
.pg-sub { margin-top: var(--s-2); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-md); line-height: 1.25; text-align: center; color: var(--ink-soft); }
.toc { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.toc li { display: grid; grid-template-columns: calc(78 * var(--px)) 1fr; align-items: baseline; column-gap: var(--s-2); }
.toc .num { font-family: var(--font-display); font-weight: 600; font-size: 3rem; line-height: 1; text-align: right; color: var(--oxblood); }
.toc .txt {
  padding-bottom: calc(12 * var(--px));
  border-bottom: calc(2 * var(--px)) dotted rgba(94, 79, 62, 0.45);
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
}
.route { margin-top: auto; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.7rem; color: var(--ink-soft); }
.duo { display: flex; justify-content: center; align-items: center; gap: var(--s-2); margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; }
.duo .v { color: var(--vn); }
.duo .a { color: var(--ap); }
.duo i { font-style: normal; color: var(--gilt-lo); }

/* bookmark tabs peeking out of the right page, one per comparison angle */
.tabs { position: absolute; z-index: 1; right: calc(-18 * var(--px)); top: 0; width: calc(40 * var(--px)); height: 100%; }
.tabs i {
  position: absolute;
  right: 0;
  width: calc(40 * var(--px));
  height: calc(54 * var(--px));
  border-radius: 0 calc(6 * var(--px)) calc(6 * var(--px)) 0;
  box-shadow: calc(2 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.4);
}

.compass { display: block; align-self: center; width: calc(268 * var(--px)); height: calc(268 * var(--px)); margin-top: var(--s-2); overflow: visible; }
.compass text { font-family: var(--font-display); font-weight: 600; font-size: 22px; fill: var(--oxblood); text-anchor: middle; dominant-baseline: central; }
.compass .ring { transform-origin: 0 0; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= II–III · comparison spreads =================
   A point both works share is the claim on the banner (.claim: small label + one or two lines); each page
   carries its own work's evidence. Difference spreads drop the banner. */
.claim .banner-body p { font-size: 1.55rem; }
.claim .banner-body p + p { margin-top: calc(4 * var(--px)); }
.has-banner.c1 .pg { padding-bottom: calc(100 * var(--px)); }
.has-banner.c2 .pg { padding-bottom: calc(138 * var(--px)); }

.ctx { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-md); line-height: 1.25; color: var(--ink-soft); }
.quote {
  position: relative;
  padding-left: calc(52 * var(--px));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.15rem;
  line-height: 1.18;
  color: var(--ink);
}
.quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: calc(-12 * var(--px));
  font-size: 4.6rem;
  line-height: 1;
  color: var(--c);
  opacity: 0.75;
}
.kw { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1.08; color: var(--c); }
.defs dd .kw { display: block; margin-top: calc(2 * var(--px)); }

/* a character's road, one stone per stage; the last stone is lit */
.path { list-style: none; position: relative; display: flex; flex-direction: column; gap: calc(10 * var(--px)); padding-left: calc(36 * var(--px)); }
.path::before {
  content: "";
  position: absolute;
  left: calc(10 * var(--px));
  top: calc(16 * var(--px));
  bottom: calc(16 * var(--px));
  width: calc(2 * var(--px));
  background: var(--c);
  opacity: 0.45;
}
.path li { position: relative; font-family: var(--font-body); font-size: 1.4rem; line-height: 1.3; color: var(--ink); }
.path li::before {
  content: "";
  position: absolute;
  left: calc(-36 * var(--px));
  top: calc(6 * var(--px));
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  border-radius: 50%;
  border: calc(2 * var(--px)) solid var(--c);
  background: var(--paper);
}
.path li:last-child { font-weight: 650; color: var(--c); }
.path li:last-child::before { background: var(--c); box-shadow: 0 0 0 calc(4 * var(--px)) var(--c-tint), 0 0 calc(14 * var(--px)) var(--gilt); }

/* short chain on one line: cam chịu → hồi sinh → … */
.arc { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; row-gap: calc(4 * var(--px)); font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.2; color: var(--c); }
.arc li + li::before { content: "\2192"; margin: 0 calc(10 * var(--px)); font-weight: 500; color: var(--gilt-lo); }

/* who changed, from → to */
.shift { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: calc(12 * var(--px)) calc(12 * var(--px)); }
.shift b { padding: calc(6 * var(--px)) calc(14 * var(--px)) calc(8 * var(--px)); border-radius: 999px; background: var(--c); color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1; text-align: center; white-space: nowrap; }
.shift span { font-family: var(--font-body); font-size: 1.3rem; line-height: 1.3; color: var(--ink-soft); }
.shift span.to { font-weight: 650; color: var(--c); }
.shift i { font-style: normal; font-family: var(--font-display); font-size: 1.8rem; color: var(--gilt-lo); }

/* words of the region, stamped like seals */
.stamps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(12 * var(--px)) calc(14 * var(--px)); }
.stamps li {
  padding: calc(8 * var(--px)) calc(16 * var(--px)) calc(10 * var(--px));
  border: calc(3 * var(--px)) double var(--c);
  background: var(--c-tint);
  color: var(--c);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  transform: rotate(var(--r, -2deg));
}
.stamps li:nth-child(2n) { --r: 1.6deg; }
.stamps li:nth-child(3n) { --r: -0.8deg; }
.stamps.soft li { border-style: solid; border-width: calc(1.5 * var(--px)); font-weight: 600; font-style: italic; font-size: 1.5rem; }

/* events stacking up to a climax */
.stairs { list-style: none; display: flex; align-items: flex-end; gap: calc(8 * var(--px)); height: calc(230 * var(--px)); padding-top: calc(30 * var(--px)); }
.stairs li {
  position: relative;
  flex: 1;
  height: calc(70 * var(--px) + var(--n) * 34 * var(--px));
  padding: calc(8 * var(--px)) calc(8 * var(--px)) 0;
  border-top: calc(3 * var(--px)) solid var(--c);
  background: linear-gradient(180deg, var(--c-tint), transparent);
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}
.stairs li:last-child { background: linear-gradient(180deg, var(--c-soft), transparent); font-weight: 650; color: var(--c); }
.stairs li:last-child::after {
  content: "cao trào";
  position: absolute;
  left: 50%;
  top: calc(-34 * var(--px));
  transform: translateX(-50%);
  padding: calc(3 * var(--px)) calc(10 * var(--px)) calc(5 * var(--px));
  border-radius: 999px;
  background: var(--oxblood);
  color: var(--gilt-hi);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.2rem;
  white-space: nowrap;
}

/* same craft, shown once for both books */
.page.shared { --c: var(--oxblood); --c-soft: rgba(168, 67, 79, 0.28); --c-tint: rgba(122, 31, 43, 0.07); }
.cards { display: flex; flex-direction: column; gap: var(--s-2); }
.card {
  position: relative;
  padding: calc(14 * var(--px)) calc(22 * var(--px)) calc(16 * var(--px));
  border: calc(1.5 * var(--px)) solid color-mix(in srgb, var(--c) 55%, transparent);
  outline: calc(1 * var(--px)) solid color-mix(in srgb, var(--c) 25%, transparent);
  outline-offset: calc(4 * var(--px));
  background: var(--c-tint);
}
.card dt { color: var(--c); font-family: var(--font-body); font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; }
.card dd { margin-top: calc(4 * var(--px)); font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; line-height: 1.12; color: var(--ink); }
.pair { display: flex; justify-content: center; align-items: center; gap: var(--s-2); }
.pair figure { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.pair .medal { width: calc(210 * var(--px)); height: calc(250 * var(--px)); }
.pair figcaption { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--t-md); line-height: 1.15; text-align: center; color: var(--c); }
.pair > i { font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 3rem; color: var(--gilt-lo); }

/* chapter opener */
.part-num {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11rem;
  line-height: 0.9;
  text-align: center;
  color: var(--oxblood);
  text-shadow: 0 calc(3 * var(--px)) 0 rgba(201, 168, 98, 0.55);
}
.part-num + .pg-title { margin-top: 0; }

/* gold thread laid across the open book (design px: the book is 1392 × 860) */
.thread { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thread path { fill: none; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(239, 219, 160, 0.9)) drop-shadow(0 2px 1px rgba(60, 35, 10, 0.35)); }
.thread .gold { stroke: var(--gilt); }
.thread .vn { stroke: #c08a2c; }
.thread .ap { stroke: #4a5cab; }
.thread text { font-family: var(--font-display); font-weight: 600; font-size: 34px; text-anchor: middle; }

/* seal pinned on the spine ("Độc đáo") */
.seal {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(-6 * var(--px));
  width: max-content;
  margin: 0 auto;
  padding: calc(8 * var(--px)) calc(22 * var(--px)) calc(10 * var(--px));
  white-space: nowrap;
  border-radius: 0 0 calc(10 * var(--px)) calc(10 * var(--px));
  background: linear-gradient(180deg, #92293a, var(--oxblood) 55%, var(--oxblood-deep));
  box-shadow: inset 0 calc(-3 * var(--px)) 0 calc(-1 * var(--px)) rgba(239, 219, 160, 0.45), 0 calc(8 * var(--px)) calc(16 * var(--px)) rgba(0, 0, 0, 0.45);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--gilt-hi);
}

/* small vs wide picture: the scale of each story's world */
.scale { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.scale .ctx { text-align: center; }
.shift.stack { grid-template-columns: auto 1fr; }
.shift.stack i { justify-self: center; line-height: 1; }
.shift.stack span { font-size: 1.4rem; }

/* ================= IV–V · lý giải, đánh giá, kết ================= */
.toc .txt small { display: block; margin-top: calc(6 * var(--px)); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-md); line-height: 1.2; color: var(--ink-soft); }
.has-banner.c3 .pg { padding-bottom: calc(168 * var(--px)); }
.has-banner.c3 .claim .banner-body p { font-size: 1.45rem; }
.has-banner.c3 .claim .banner-body p + p { margin-top: calc(2 * var(--px)); }
.author.sm { margin: 0; }
.author.sm .medal { width: calc(92 * var(--px)); height: calc(112 * var(--px)); }
.author.sm h3 { font-size: 2.6rem; }

/* reasons, numbered to match the banner lines; rows line up across the spine */
.why { list-style: none; counter-reset: why; display: flex; flex-direction: column; gap: var(--s-2); }
.why li { counter-increment: why; position: relative; min-height: calc(46 * var(--px)); padding-left: calc(62 * var(--px)); }
.why li::before {
  content: counter(why);
  position: absolute;
  left: 0;
  top: calc(2 * var(--px));
  width: calc(44 * var(--px));
  height: calc(44 * var(--px));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(4 * var(--px)) var(--c-tint);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
}
.why small { display: block; font-family: var(--font-body); font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.why b { display: block; margin-top: calc(2 * var(--px)); font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: var(--c); }

/* before → after, two pictures; the first one drained of colour */
.dip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-1); }
.dip figure { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--px)); }
.dip img {
  display: block;
  width: 100%;
  height: calc(var(--h, 260) * var(--px));
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  -webkit-mask-image: radial-gradient(72% 70% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(72% 70% at 50% 50%, #000 58%, transparent 100%);
}
.dip figure:first-child img { filter: grayscale(0.65) brightness(0.92); }
.dip figcaption { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--t-md); line-height: 1.15; text-align: center; color: var(--ink-soft); }
.dip figure:last-child figcaption { color: var(--c); }
.dip > i { font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; color: var(--gilt-lo); }

/* three small medallions in a row */
.tri { display: flex; justify-content: center; gap: var(--s-3); }
.tri figure { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.tri .medal { width: calc(162 * var(--px)); height: calc(194 * var(--px)); }
.tri figcaption { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.4rem; line-height: 1.12; text-align: center; color: var(--c); }

.kw.big { font-size: 3.6rem; text-align: center; }

/* author in a gilt laurel */
.laureate { display: flex; flex-direction: column; align-items: center; }
.laurel { position: relative; display: grid; place-items: center; width: calc(280 * var(--px)); height: calc(260 * var(--px)); }
.laurel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.laurel path.draw { fill: none; stroke: var(--gilt-lo); stroke-width: 2.5; stroke-linecap: round; }
.laurel .medal { width: calc(168 * var(--px)); height: calc(204 * var(--px)); }
.laureate h3 { margin-top: calc(6 * var(--px)); font-family: var(--font-display); font-weight: 600; font-size: 3rem; line-height: 1; color: var(--ink); }
.merits { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.merits li { position: relative; padding-left: calc(40 * var(--px)); font-family: var(--font-body); font-size: 1.45rem; line-height: 1.4; color: var(--ink); }
.merits li::before { content: "\2766\FE0E"; position: absolute; left: 0; top: calc(-2 * var(--px)); font-family: var(--font-display); font-size: 1.8rem; line-height: 1.2; color: var(--c); }

/* closing spread: set small and quiet, like the last printed page of a book */
.finale .runhead { margin-bottom: auto; }
.finale .chapter { margin-top: 0; font-size: var(--t-xs); letter-spacing: 0.36em; }
.finale .fleuron { margin: calc(10 * var(--px)) 0; font-size: 1.3rem; }
.finale .title { font-size: 2.6rem; font-style: italic; font-weight: 500; line-height: 1.1; color: var(--ink); }
.finale .source { margin: calc(10 * var(--px)) 0 0; font-size: var(--t-xs); letter-spacing: 0.04em; }
.finale .hook {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: calc(1 * var(--px)) solid rgba(94, 79, 62, 0.35);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.finale .hook em { font-style: italic; font-weight: 500; color: var(--oxblood); }
.finale .across { margin-top: auto; margin-bottom: calc(30 * var(--px)); font-weight: 500; font-size: 1.3rem; letter-spacing: 0.02em; }

/* back cover: the closed book seen from behind, spine on the right */
.back-face { border-radius: calc(10 * var(--px)) 0 0 calc(10 * var(--px)); }
.back-face .spine { left: auto; right: 0; transform: scaleX(-1); }
.back-face .gilt-frame, .back-face .cover-content { left: calc(40 * var(--px)); right: calc(104 * var(--px)); }
.back-cover { left: 0; top: 0; width: 50%; height: 100%; box-shadow: 0 calc(30 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, 0.7); }
.end-thanks { font-family: var(--font-display); font-weight: 600; font-size: 6.6rem; line-height: 1.05; }
.back-face .cover-topic { margin-top: var(--s-3); font-size: var(--t-md); }
.end-group { margin-top: var(--s-4); }