/* ==========================================================
   Eleven15'Stu — minimal, mobile-first
   ========================================================== */
:root {
  --bg: #0E0E0D;
  --bg-2: #151514;
  --fg: #ECE7E0;
  --fg-2: rgba(236, 231, 224, .72);
  --mute: #8C877F;
  --line: rgba(236, 231, 224, .12);
  --serif: "Playfair Display", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mark: "Archivo Black", "Arial Black", sans-serif;
  --pad: 20px;
  --ease: cubic-bezier(.22, .8, .25, 1);
}
@media (min-width: 900px) { :root { --pad: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 300 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; color: var(--fg-2); text-wrap: pretty; }
em { font-style: italic; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

.wrap { width: min(1200px, 100% - 2 * var(--pad)); margin-inline: auto; }
.narrow { width: min(680px, 100% - 2 * var(--pad)); margin-inline: auto; }
.eyebrow { display: block; font: 500 11px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.center { text-align: center; }
.section { padding: 104px 0; }
@media (min-width: 900px) { .section { padding: 160px 0; } }
.section-title { font-size: clamp(2.1rem, 8vw, 3.4rem); margin: 16px 0 0; }

/* ---------- Buttons: hairline rectangles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 1px solid var(--line);
  font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { border-color: var(--fg); }
.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid:hover { background: transparent; color: var(--fg); }
.btns { display: flex; flex-direction: column; gap: 10px; }
.btns .btn { width: 100%; }
@media (min-width: 600px) { .btns { flex-direction: row; justify-content: center; } .btns .btn { width: auto; min-width: 180px; } }
.link { font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); padding-bottom: 6px; border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.link:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s; }
.site-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(14, 14, 13, .85), rgba(14, 14, 13, 0)); pointer-events: none; }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 68px; }
@media (min-width: 900px) { .nav { height: 84px; } }
.mark { font: 400 18px/1 var(--mark); letter-spacing: .02em; }
.mark sup { font-size: .55em; vertical-align: top; position: relative; top: 1px; }
.nav-links { display: none; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.lang { font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--mute); }
.lang a[aria-current] { color: var(--fg); }
.menu-btn { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; cursor: pointer; margin-right: -10px; }
.menu-btn span { width: 22px; height: 1px; background: var(--fg); transition: transform .4s var(--ease); }
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu {
  position: fixed; inset: 0; z-index: -1; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; padding: 96px var(--pad) 40px;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.menu a.big { font: 400 clamp(2.4rem, 11vw, 3.4rem)/1.25 var(--serif); }
.menu .meta { margin-top: 48px; font-size: 13px; color: var(--mute); line-height: 1.9; }
.menu-toggle:checked ~ .menu { opacity: 1; visibility: visible; }
.menu-toggle:checked ~ .nav-right .menu-btn span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle:checked ~ .nav-right .menu-btn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-toggle:focus-visible ~ .nav-right .menu-btn { outline: 1px solid var(--fg); }
@media (min-width: 900px) {
  .mark { font-size: 21px; }
  .nav-links { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
  .nav-links a { font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); transition: color .3s; }
  .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
  .menu-btn, .menu { display: none; }
}

/* ---------- Hero: Beneath the ink ---------- */
.hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 92px var(--pad) 84px; position: relative; }
.hero h1 { margin: 0; }
.hero .kw { display: block; font: 500 11px/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); margin-bottom: 26px; }
.hero .t { display: block; font-size: clamp(4.6rem, 23vw, 15rem); line-height: .88; letter-spacing: -.025em; }
@media (min-width: 900px) { .hero .t { font-size: clamp(6rem, min(15vw, 25vh), 15rem); } }
.ink {
  font-style: italic; color: transparent;
  background: var(--ink-img, url("assets/img/floral-thigh-peony-640.webp")) 50% 40% / cover;
  -webkit-background-clip: text; background-clip: text;
  padding: .06em .12em .2em; margin: -.06em -.12em -.2em;
  animation: pan 24s ease-in-out infinite alternate;
}
@media (min-width: 900px) { .ink { --ink-img: url("assets/img/floral-thigh-peony.webp"); } }
@keyframes pan { to { background-position: 50% 78%; } }
.cue { position: absolute; left: 50%; bottom: 26px; width: 1px; height: 44px; background: var(--line); overflow: hidden; }
.cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--fg); animation: drip 2.4s ease-in-out infinite; }
@keyframes drip { to { top: 100%; } }
.hero h1 { animation: fade 1.6s .1s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Works rail ---------- */
.works-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 40px; }
.rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--pad) 8px; scroll-padding: 0 var(--pad); scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.work { flex: 0 0 80%; scroll-snap-align: start; margin: 0; }
.work img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bg-2); }
.work figcaption { padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.work b { font: 400 19px/1.3 var(--serif); }
.work span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.rail-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.swipe { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
@media (min-width: 900px) {
  .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 20px; overflow: visible; width: min(1200px, 100% - 2 * var(--pad)); margin-inline: auto; padding: 0; }
  .work { flex: none; }
  .rail .work figcaption { flex-direction: column; gap: 4px; }
  .swipe { display: none; }
  .rail-foot { justify-content: center; margin-top: 56px; }
}

/* ---------- Book ---------- */
.book .lead { max-width: 460px; margin: 18px auto 34px; }
.details { list-style: none; padding: 0; margin: 64px auto 0; display: grid; gap: 22px; text-align: center; }
.details small { display: block; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.details span, .details a { font: 400 18px/1.4 var(--serif); }
@media (min-width: 900px) { .details { grid-template-columns: repeat(3, 1fr); } }
.map { margin-top: 64px; height: 360px; background: var(--bg-2); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.85); }
@media (min-width: 900px) { .map { height: 440px; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 72px 0 36px; font-size: 14px; }
.foot-grid { display: grid; gap: 40px; }
.foot-grid h4 { font: 500 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--fg-2); }
.foot-grid a:hover { color: var(--fg); }
.foot-brand p { margin-top: 12px; font: italic 400 16px var(--serif); color: var(--mute); }
.foot-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Inner pages ---------- */
.page-head { padding: 140px 0 56px; }
@media (min-width: 900px) { .page-head { padding: 190px 0 80px; } }
.page-head h1 { font-size: clamp(2.8rem, 12vw, 6rem); line-height: .98; margin: 18px 0 22px; }
.page-head .ink { --ink-img: url("assets/img/floral-thigh-peony-640.webp"); }
.page-head p { max-width: 560px; }
.crumbs { list-style: none; padding: 0; margin: 0 0 28px; display: flex; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .5; }

.filters { position: absolute; opacity: 0; pointer-events: none; }
.chips { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)) 36px; padding: 0 var(--pad) 10px; }
.chips::-webkit-scrollbar { display: none; }
.chips label { flex: none; cursor: pointer; font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); padding-bottom: 8px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
#f-all:checked ~ .chips [for=f-all], #f-fine:checked ~ .chips [for=f-fine], #f-real:checked ~ .chips [for=f-real],
#f-bg:checked ~ .chips [for=f-bg], #f-color:checked ~ .chips [for=f-color] { color: var(--fg); border-color: var(--fg); }
#f-fine:checked ~ .grid .work:not(.fine), #f-real:checked ~ .grid .work:not(.real),
#f-bg:checked ~ .grid .work:not(.bg), #f-color:checked ~ .grid .work:not(.color) { display: none; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; }
.grid .work figcaption { flex-direction: column; gap: 4px; padding-top: 10px; }
.grid .work b { font-size: 16px; }
.grid .work span { font-size: 10px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 56px 24px; } .grid .work b { font-size: 19px; } }

.prose h2 { font-size: clamp(1.7rem, 6.6vw, 2.4rem); margin: 64px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 22px; margin: 32px 0 8px; }
.prose ul { padding-left: 18px; color: var(--fg-2); margin: 0 0 1em; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--fg); font-weight: 500; }
.prose figure { margin: 36px 0; }
.prose figure img { width: 100%; }
.prose figcaption { font-size: 12px; color: var(--mute); margin-top: 10px; }
.prose .num { font-family: var(--serif); font-style: italic; color: var(--mute); margin-right: 6px; }

.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; font: 400 19px/1.4 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 22px/1 var(--sans); color: var(--mute); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; margin: 0; }

.cta-end { border-top: 1px solid var(--line); }
.cta-end h2 { font-size: clamp(2.2rem, 9vw, 4rem); margin: 16px 0 28px; }

.brief { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; counter-reset: b; }
.brief li { border-top: 1px solid var(--line); padding-top: 18px; }
.brief li::before { counter-increment: b; content: "0" counter(b); font: italic 400 14px var(--serif); color: var(--mute); display: block; margin-bottom: 8px; }
.brief b { display: block; font: 400 20px var(--serif); margin-bottom: 4px; }
@media (min-width: 900px) { .brief { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ==========================================================
   Beneath the ink — chapters
   ========================================================== */
.hero { padding-bottom: 96px; }
.hero .kw { margin-bottom: 30px; }
.chapter { padding: 112px 0; }
.chapter + .chapter { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .chapter { padding: 168px 0; } }
.ch-head { margin-bottom: 44px; max-width: 620px; }
.ch-head.center { margin-inline: auto; }
.ch-title { font-size: clamp(3.4rem, 16vw, 7.5rem); line-height: .95; margin: 14px 0 22px; }
.ch-head p { max-width: 460px; margin: 0; }
.ch-head.center p { margin-inline: auto; }
.book .btns { margin-top: 8px; }

.split .frame { margin: 0; }
.split .frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .split .ch-head { margin-bottom: 0; }
  .split .frame img { aspect-ratio: 5 / 4; }
}
.bleed { margin: 0; }
.bleed img { width: 100%; height: min(80svh, 760px); object-fit: cover; filter: grayscale(1) brightness(.75); }

/* rising out of the ink */
.js .reveal, .js .work { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); }
.js .reveal.in, .js .work.in { clip-path: inset(0 0 0 0); }
.js .rail .work:nth-child(2) { transition-delay: .08s; } .js .rail .work:nth-child(3) { transition-delay: .16s; } .js .rail .work:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .reveal, .js .work { clip-path: none; } }
@media (min-width: 900px) { .split .ch-title { font-size: clamp(3.4rem, 6.2vw, 6rem); white-space: nowrap; } }

/* ==========================================================
   Showcase: one artwork per screen, dissolving into the black
   ========================================================== */
.show { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.art { position: absolute; z-index: -1; margin: 0; inset: 0 0 26% 0; }
.art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 55%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.show-text { position: relative; padding-bottom: 72px; }
.show-title { font-size: clamp(4rem, 19vw, 9rem); font-style: italic; line-height: .9; margin: 14px 0 24px; text-shadow: 0 8px 60px rgba(0,0,0,.6); }
.plate { display: flex; flex-direction: column; gap: 4px; margin: 0 0 26px; }
.plate b { font: 400 19px/1.3 var(--serif); color: var(--fg); }
.plate span { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }

@media (min-width: 900px) {
  .show { min-height: 112svh; align-items: center; }
  .show-text { padding: 0; }
  .show-title { font-size: clamp(5rem, 9vw, 10rem); }
  .show--right .art { inset: 0 0 0 34%; }
  .show--right .art img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); }
  .show--left .art { inset: 0 34% 0 0; }
  .show--left .art img { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); }
  .show--left .show-text { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .show--left .plate { align-items: flex-end; }
  .show--center { align-items: flex-end; }
  .show--center .art { inset: 0 12% 18% 12%; }
  .show--center .art img { object-position: 50% 40%; -webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 46%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 52% 56% at 50% 46%, #000 52%, transparent 100%); }
  .show--center .show-text { text-align: center; display: flex; flex-direction: column; align-items: center; padding-bottom: 96px; }
  .show--center .plate { align-items: center; }
}

/* artwork surfaces from the ink */
.js .art.reveal { clip-path: none; opacity: 0; transform: scale(1.06); transition: opacity 1.8s var(--ease), transform 2.4s var(--ease); }
.js .art.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .art.reveal { opacity: 1; transform: none; } }

/* showcase refinements */
@media (min-width: 900px) {
  .show--right .art { inset: 0 0 0 40%; }
  .show--right .art img, .show--left .art img { object-position: 50% 35%; }
  .show--center { min-height: 120svh; }
  .show--center .art { inset: 0 20% 26% 20%; }
  .show--center .art img { object-position: 50% 30%; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 45%, transparent 100%); }
  .show--center .show-text { padding-bottom: 120px; }
}
@media (min-width: 900px) { .show--center .art { inset: 0 20% 36% 20%; } .show--center .show-text { padding-bottom: 104px; } }
@media (max-width: 899px) {
  .art { inset: 0 0 30% 0; }
  .art img { -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); }
  .show-text .eyebrow { text-shadow: 0 1px 12px #000; }
}
/* closing question: the loudest line after the hero */
.book .ch-title { font-size: clamp(4.4rem, 21vw, 11rem); margin: 18px 0 28px; }
.book.chapter { padding-top: 140px; }
@media (min-width: 900px) { .book.chapter { padding-top: 200px; } }
.book .ch-head { max-width: none; } .book .ch-head p { max-width: 480px; }

/* ==========================================================
   The book (home): every screen is a page
   ========================================================== */
.is-book { --paper: #ECE6DC; --ink: #161413; --ink-2: #4A4541; --ink-mute: #857E76; --rule: rgba(22, 20, 19, .16); }
.is-book main { display: block; }

.pg { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 16px var(--pad) 12px;
  background: var(--paper); color: var(--ink); overflow: hidden; }
.pg p { color: var(--ink-2); }
.pg .eyebrow { color: var(--ink-mute); }
@media (min-width: 900px) { .pg { padding: 26px 48px 20px; } }

/* paper: subtle grain + gutter shadow on the left */
.pg:not(.pg-cover) > .leaf::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0) 34px), radial-gradient(120% 90% at 60% 40%, rgba(255,255,255,.35), transparent 70%); }

/* running head + folio */
.rh { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule);
  font: 500 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); }
.rh-mark { font: 400 13px/1 var(--mark); letter-spacing: .02em; color: var(--ink); }
.rh-mark sup { font-size: .55em; vertical-align: top; }
.rh-title { display: none; }
.rh-toc { cursor: pointer; padding: 8px 0 8px 12px; margin: -8px 0; color: var(--ink); }
@media (min-width: 900px) { .rh-title { display: block; } }
.fo { position: relative; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--rule); }
.fo button { all: unset; cursor: pointer; padding: 8px 12px; margin: -4px -12px; font: 400 18px/1 var(--serif); color: var(--ink); }
.fo button:focus-visible { outline: 1px solid var(--ink); }
.fo-num { font: italic 400 15px/1 var(--serif); color: var(--ink); }
.fo-num i { color: var(--ink-mute); }
.no-js .fo button { visibility: hidden; }

.pg-body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 18px 0; min-height: 0; }
.pg-body--col { gap: 0; }
.pg-title { font-size: clamp(2.8rem, 12.5vw, 5.6rem); font-style: italic; line-height: 1; margin: 10px 0 14px; color: var(--ink); }
.pg-copy p { margin: 0; max-width: 440px; font-size: 15.5px; }

/* photo pages: the work printed as a plate */
.plate-fig { margin: 0; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.plate-fig img { height: min(46svh, 520px); width: auto; max-width: 100%; object-fit: cover; aspect-ratio: 4 / 5; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 18px 34px -22px rgba(30,20,10,.55); }
.plate-fig figcaption { margin-top: 10px; font: 400 12.5px/1.4 var(--serif); color: var(--ink-mute); text-align: center; }
.plate-fig figcaption i { color: var(--ink); }
@media (min-width: 900px) {
  .pg-photo .pg-body { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; width: min(1100px, 100%); margin-inline: auto; }
  .plate-fig img { height: min(70svh, 660px); }
}

/* collection page */
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 18px; }
.pl img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pl span { display: block; margin-top: 5px; font: italic 400 12px/1.3 var(--serif); color: var(--ink-2); }
.ink-link { align-self: flex-start; font: 500 10.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
@media (min-width: 900px) { .pg-plates .pg-body, .pg-colophon .pg-body { width: min(1100px, 100%); margin-inline: auto; } .plates { grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 26px 0 30px; } .pl span { font-size: 14px; } }

/* final page */
.final-title { font-size: clamp(3.2rem, 15vw, 8rem); font-style: italic; line-height: 1; margin: 12px 0 14px; color: var(--ink); }
.define { font: 400 15px/1.5 var(--serif); margin: 0 0 14px; }
.define i { color: var(--ink); }
.final-text { max-width: 440px; margin: 0 auto; font-size: 15px; }
.hook { font: italic 400 clamp(21px, 5.6vw, 28px)/1.3 var(--serif); color: var(--ink) !important; margin: 18px 0 22px; }
.pg-final .btns { width: 100%; max-width: 340px; margin: 0 auto; }
@media (min-width: 600px) { .pg-final .btns { max-width: none; } }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: transparent; color: var(--ink); }
.btn--line { color: var(--ink); border-color: var(--rule); }
.btn--line:hover { border-color: var(--ink); }
.pg .btn { min-height: 48px; }
.free { display: block; margin-top: 12px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-mute); }

/* colophon */
.colo-lead { font: 400 clamp(19px, 5vw, 24px)/1.45 var(--serif); color: var(--ink) !important; margin: 14px 0 24px; max-width: 560px; }
.colo { display: grid; grid-template-columns: 92px 1fr; gap: 10px 14px; margin: 0 0 24px; font-size: 14.5px; }
.colo dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-mute); padding-top: 3px; }
.colo dd { margin: 0; color: var(--ink); }
.colo-nav { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 22px; font: italic 400 16px var(--serif); }
.colo-copy { margin: 18px 0 0; font-size: 12px; color: var(--ink-mute) !important; }

/* cover: black, with the title cut out of it */
.pg-cover { background: transparent; padding: 0; display: block; }
.cover-knock { position: absolute; inset: 0; background: #000; mix-blend-mode: multiply; display: grid; place-items: center; }
.cut { margin: 0; text-align: center; color: #fff; font-size: clamp(4.4rem, 21vw, 15rem); line-height: .88; letter-spacing: -.02em; padding: 0 var(--pad); }
@media (min-width: 900px) { .cut { font-size: clamp(6rem, min(16vw, 27vh), 16rem); } }
.cut span { display: block; }
.cut em { font-style: italic; }
.cover-meta { position: absolute; inset: 0; padding: 16px var(--pad) 22px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; pointer-events: none; }
.cover-meta > * { pointer-events: auto; }
.rh--dark { width: 100%; border-color: rgba(236, 231, 224, .14); color: var(--mute); }
.rh--dark .rh-mark { color: var(--fg); }
.rh-lang a[aria-current] { color: var(--fg); }
.cover-kw { position: absolute; top: 22svh; left: 0; right: 0; text-align: center; font: 500 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.cover-turn { all: unset; cursor: pointer; font: 500 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--fg); padding: 14px 10px; }
.cover-turn span { display: inline-block; margin-left: 8px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
@media (min-width: 900px) { .cover-meta { padding: 26px 48px 30px; } }

/* contents overlay */
.toc-toggle { position: absolute; opacity: 0; pointer-events: none; }
.toc { position: fixed; inset: 0; z-index: 100; background: var(--paper); color: var(--ink); padding: 64px var(--pad) 32px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.toc-toggle:checked ~ .toc { opacity: 1; visibility: visible; }
.toc .eyebrow { color: var(--ink-mute); }
.toc-close { position: absolute; top: 14px; right: var(--pad); font: 300 32px/1 var(--sans); cursor: pointer; padding: 6px; }
.toc-list { list-style: none; padding: 0; margin: 18px 0 32px; border-top: 1px solid var(--rule); }
.toc-list li { border-bottom: 1px solid var(--rule); }
.toc-list button { all: unset; cursor: pointer; display: flex; gap: 18px; align-items: baseline; width: 100%; padding: 14px 0; font: italic 400 clamp(22px, 6vw, 30px)/1.2 var(--serif); }
.toc-list button span { width: 34px; flex: none; font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .2em; color: var(--ink-mute); }
.toc-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
.toc-lang a[aria-current] { color: var(--ink); font-weight: 500; }
@media (min-width: 900px) { .toc { padding: 90px max(48px, calc((100vw - 760px) / 2)); } }

/* ---- book mode (book.js): pages stack in one cell; DOM order paints the cover on top ---- */
.book-on, .book-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.book-on .book { position: fixed; inset: 0; display: grid; }
.book-on .pg { grid-area: 1 / 1; min-height: 0; height: 100%; }
.book-on .pg.is-gone { visibility: hidden; }
.turn-edge { display: none; }
.book-on .turn-edge { display: block; grid-area: 1 / 1; justify-self: start; width: 70px; margin-left: -35px; height: 100%; pointer-events: none; opacity: 0; order: 99;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.22) 46%, rgba(255,255,255,.55) 50%, rgba(0,0,0,.08) 56%, rgba(0,0,0,0)); transform: translateX(var(--x, 100vw)); }
.cover-meta .rh--dark { border-color: rgba(236,231,224,.12); }

/* ---- photo pages: the work is the page, printed full-bleed on black ---- */
.pg-photo { background: #0B0B0A; color: var(--fg); --rule: rgba(236,231,224,.16); }
.pg-photo > .leaf::before { display: none; }
.pg-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 50% 35%); }
.pg-photo > .leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,10,.55) 0, rgba(11,11,10,0) 18%, rgba(11,11,10,0) 42%, rgba(11,11,10,.92) 74%, #0B0B0A 100%); }
.pg-photo > .leaf > * { position: relative; z-index: 1; }
.pg-photo > .leaf > .pg-bg { position: absolute; z-index: 0; }
.pg-photo .rh, .pg-photo .fo { color: rgba(236,231,224,.6); }
.pg-photo .rh-mark, .pg-photo .rh-toc, .pg-photo .fo button, .pg-photo .fo-num { color: var(--fg); }
.pg-photo .fo-num i { color: rgba(236,231,224,.5); }
.pg-photo .pg-body { justify-content: flex-end; padding-bottom: 10px; }
.pg-photo .eyebrow { color: rgba(236,231,224,.6); }
.pg-photo .pg-title { color: var(--fg); }
.pg-photo .pg-copy p { color: rgba(236,231,224,.78); }
.pg-plate { margin-top: 18px !important; font: 400 13px/1.4 var(--serif); color: rgba(236,231,224,.55) !important; }
.pg-plate i { color: var(--fg); }
.pg-photo[data-page="1"] { --bgpos: 62% 30%; }
.pg-photo[data-page="2"] { --bgpos: 50% 62%; }
.pg-photo[data-page="3"] { --bgpos: 40% 30%; }
@media (min-width: 900px) {
  .pg-photo .pg-bg { left: 34%; width: 66%; }
  .pg-photo > .leaf::after { background:
     linear-gradient(90deg, #0B0B0A 30%, rgba(11,11,10,.85) 40%, rgba(11,11,10,0) 62%),
     linear-gradient(180deg, rgba(11,11,10,.6), transparent 16%, transparent 84%, rgba(11,11,10,.7)); }
  .pg-photo .pg-body { justify-content: center; width: min(1200px, 100%); margin-inline: auto; padding: 0; }
  .pg-photo .pg-copy { max-width: 520px; }
  .pg-photo .pg-title { font-size: clamp(4rem, 7vw, 7.4rem); }
}
/* each page is its own layer, so nothing from the page beneath bleeds through */
.pg { isolation: isolate; }
/* while the cover is closed, page I shows only its artwork through the cut-out letters */
.pg-photo > .leaf > :not(.pg-bg), .pg-photo > .leaf::after { transition: opacity .7s var(--ease); }
.pg-photo .pg-bg { transition: filter .9s var(--ease); }
.cover-up .pg[data-page="1"] > .leaf > :not(.pg-bg), .cover-up .pg[data-page="1"] > .leaf::after { opacity: 0; }
.cover-up .pg[data-page="1"] .pg-bg { filter: brightness(1.9) contrast(1.05); }
.cover-up .pg[data-page="1"] { --bgpos: 55% 45%; }
@media (min-width: 900px) { .cover-up .pg[data-page="1"] .pg-bg { left: 0; width: 100%; } }
.pg-cover { isolation: auto; }
/* cover: letters are windows onto page I's artwork (brightened print of it) */
.pg-cover { background: #050505; isolation: isolate; }
.cover-knock { mix-blend-mode: normal; background: transparent; }
.cut { color: transparent; background: url("assets/img/floral-thigh-peony-640.webp") 50% 40% / cover no-repeat; -webkit-background-clip: text; background-clip: text; }
.cover-up .pg[data-page="1"] .pg-bg { filter: none; }
@media (min-width: 900px) { .cut { background-image: url("assets/img/floral-thigh-peony.webp"); } }
/* the whole book is printed on black */
.is-book { --paper: #0B0B0A; --ink: #ECE7E0; --ink-2: rgba(236,231,224,.74); --ink-mute: #8C877F; --rule: rgba(236,231,224,.14); }
.pg:not(.pg-cover):not(.pg-photo) > .leaf::before { background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0) 34px); }
.pl img { box-shadow: 0 0 0 1px rgba(236,231,224,.06); }

/* ---- sleeker book: no rules, no controls; a running head and a folio, like print ---- */
.rh { border-bottom: 0; padding-bottom: 0; }
.rh-menu { display: grid; gap: 6px; width: 40px; height: 40px; place-content: center end; cursor: pointer; margin: -8px -4px -8px 0; }
.rh-menu span { display: block; width: 22px; height: 1px; background: currentColor; }
.rh-menu span + span { width: 14px; justify-self: end; }
.rh { color: var(--ink); }
.pg-photo .rh-menu { color: var(--fg); }
.fo { border-top: 0; padding-top: 0; justify-content: flex-end; }
.folio { font: italic 400 13px/1 var(--serif); letter-spacing: .08em; color: var(--ink-mute); }
.pg-photo .folio { color: rgba(236,231,224,.55); }
.toc-title { display: block; font: italic 400 15px/1 var(--serif); color: var(--ink-mute); }
.toc-close { font-weight: 200; }

/* ---- IV. a collection: a slow, living wall of work ---- */
.pg-wall { background: #070707; }
.pg-wall > .leaf::before { display: none; }
.wall { position: absolute; inset: -4%; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; transform: rotate(-4deg) scale(1.08); }
.wall-col { overflow: hidden; }
.wall-col:nth-child(n+4) { display: none; }
.wall-track { display: grid; gap: 6px; animation: wall var(--dur, 60s) linear infinite; }
.wall-col:nth-child(even) .wall-track { animation-direction: reverse; }
.wall-track img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.85) brightness(.55) contrast(1.1); }
@keyframes wall { to { transform: translateY(calc(-50% - 3px)); } }
.pg-wall > .leaf::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 46% at 50% 50%, rgba(7,7,7,.92) 0%, rgba(7,7,7,.75) 45%, rgba(7,7,7,.15) 100%),
              linear-gradient(#070707, transparent 14%, transparent 86%, #070707); }
.pg-wall > .leaf > .rh, .pg-wall > .leaf > .pg-body, .pg-wall > .leaf > .fo { position: relative; z-index: 1; }
.wall-copy { align-items: center; }
.wall-title { font-size: clamp(3.4rem, 15vw, 8.5rem); font-style: italic; line-height: 1; margin: 12px 0 16px; color: var(--fg); }
.wall-copy p { max-width: 360px; margin: 0 auto 28px; color: rgba(236,231,224,.78); }
.wall-link { font: 500 10.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--fg); padding-bottom: 6px; border-bottom: 1px solid rgba(236,231,224,.5); }
.wall-link:hover { border-color: var(--fg); }
@media (min-width: 900px) {
  .wall { grid-template-columns: repeat(5, 1fr); gap: 10px; inset: -10% -4%; }
  .wall-col:nth-child(n+4) { display: block; }
  .wall-track { gap: 10px; }
  @keyframes wall { to { transform: translateY(calc(-50% - 5px)); } }
}
@media (prefers-reduced-motion: reduce) { .wall-track { animation: none; } }

/* ---- colophon: map as a printed plate ---- */
.colo { grid-template-columns: 78px 1fr; margin-bottom: 18px; }
.colo-map { position: relative; display: block; height: 30svh; min-height: 170px; margin: 0 0 18px; overflow: hidden; border: 1px solid var(--rule); }
.colo-map iframe { width: 100%; height: calc(100% + 60px); margin-top: -30px; border: 0; pointer-events: none; filter: grayscale(1) invert(.9) contrast(.9) brightness(.9); }
.colo-map span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(11,11,10,.92));
  font: 500 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg); }
.colo-lead { margin: 12px 0 18px !important; }
.colo-nav a { color: var(--fg); }
@media (min-width: 900px) {
  .pg-colophon .pg-body { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 64px; align-content: center; }
  .pg-colophon .pg-body > * { grid-column: 1; }
  .pg-colophon .colo-map { grid-column: 2; grid-row: 1 / span 5; height: 56svh; margin: 0; }
}
.fo { min-height: 6px; }
.colo { grid-template-columns: max-content 1fr; column-gap: 22px; } .colo dt { white-space: nowrap; }
/* collection: show the work in full color; darken only a small pool behind the title */
.wall-track img { filter: none; }
.pg-wall > .leaf::after { background:
  radial-gradient(ellipse 46% 26% at 50% 50%, rgba(7,7,7,.86) 0%, rgba(7,7,7,.6) 55%, rgba(7,7,7,0) 100%),
  linear-gradient(rgba(7,7,7,.75), transparent 12%, transparent 88%, rgba(7,7,7,.75)); }
@media (max-width: 899px) { .pg-wall > .leaf::after { background:
  radial-gradient(ellipse 78% 24% at 50% 50%, rgba(7,7,7,.9) 0%, rgba(7,7,7,.62) 58%, rgba(7,7,7,0) 100%),
  linear-gradient(rgba(7,7,7,.75), transparent 12%, transparent 88%, rgba(7,7,7,.75)); } }
.wall-title, .wall-copy p, .wall-copy .eyebrow, .wall-link { text-shadow: 0 2px 18px rgba(0,0,0,.75); }

/* ---- IV. a collection: a still triptych ---- */
.tri { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tri-panel { position: relative; margin: 0; overflow: hidden; }
.tri-panel img { width: 100%; height: 100%; object-fit: cover; }
.tri-panel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 10px 16px; text-align: center;
  font: italic 400 13px/1.2 var(--serif); color: rgba(236,231,224,.85); background: linear-gradient(transparent, rgba(7,7,7,.8)); }
@media (min-width: 900px) { .tri { gap: 8px; } .tri-panel figcaption { font-size: 16px; padding-bottom: 28px; } }
.pg-wall > .leaf::after { z-index: 0; background:
  radial-gradient(ellipse 60% 22% at 50% 50%, rgba(7,7,7,.82) 0%, rgba(7,7,7,.5) 60%, rgba(7,7,7,0) 100%),
  linear-gradient(rgba(7,7,7,.7), transparent 14%); }
@media (max-width: 899px) { .pg-wall > .leaf::after { background:
  radial-gradient(ellipse 95% 22% at 50% 50%, rgba(7,7,7,.88) 0%, rgba(7,7,7,.55) 60%, rgba(7,7,7,0) 100%),
  linear-gradient(rgba(7,7,7,.7), transparent 14%); } }

/* ---- IV. a collection, option B: a plate index (3 x 3) ---- */
.ix { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; }
.ix-cell { position: relative; margin: 0; overflow: hidden; }
.ix-cell img { width: 100%; height: 100%; object-fit: cover; }
.ix-cell figcaption { position: absolute; left: 8px; bottom: 7px; font: italic 400 12px/1 var(--serif); color: rgba(236,231,224,.9); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
@media (min-width: 900px) { .ix { gap: 6px; } .ix-cell figcaption { left: 14px; bottom: 12px; font-size: 14px; } }

/* ---- IV. a collection: same language as pages I–III, an art-book collage instead of one plate ---- */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); grid-auto-flow: dense; gap: 3px; background: #0B0B0A; }
.mo-tile { margin: 0; overflow: hidden; }
.mo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-a { grid-column: span 2; grid-row: span 2; }
.mo-t { grid-row: span 2; }
.mo-w { grid-column: span 2; }
.pg-mosaic .wall-link { display: inline-block; margin-top: 22px; text-shadow: none; }
@media (min-width: 900px) {
  .mosaic { gap: 6px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
  .mo-a { grid-column: span 2; grid-row: span 2; }
}
.mo-x { display: none; }
@media (min-width: 900px) { .mo-x { display: block; } }

/* ---- collection collage, art-book rhythm ---- */
.mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); grid-auto-flow: row; gap: 4px; }
.mo-tile { position: relative; }
.mo-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(0,0,0,.45); }
.t1 { grid-area: 1 / 1 / 4 / 4; }
.t3 { grid-area: 1 / 4 / 3 / 5; }
.t2 { grid-area: 3 / 4 / 5 / 5; }
.t4 { grid-area: 4 / 1 / 7 / 2; }
.t5 { grid-area: 4 / 2 / 5 / 3; }
.t8 { grid-area: 4 / 3 / 5 / 4; }
.t7 { grid-area: 5 / 2 / 7 / 3; }
.t6 { grid-area: 5 / 3 / 7 / 4; }
.t9 { grid-area: 5 / 4 / 6 / 5; }
.t10 { grid-area: 6 / 4 / 7 / 5; display: block; }
/* a small print laid on the page: breaks the grid rhythm */
.t5 { padding: 14%; background: #0B0B0A; }
.t5::after { inset: 14%; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 7px; }
  .t1 { grid-area: 1 / 1 / 5 / 4; }
  .t2 { grid-area: 1 / 4 / 3 / 6; }
  .t3 { grid-area: 1 / 6 / 4 / 7; }
  .t4 { grid-area: 3 / 4 / 6 / 5; }
  .t5 { grid-area: 3 / 5 / 4 / 6; }
  .t6 { grid-area: 4 / 5 / 6 / 7; }
  .t7 { grid-area: 5 / 1 / 7 / 3; }
  .t8 { grid-area: 5 / 3 / 7 / 4; }
  .t9 { grid-area: 6 / 4 / 7 / 5; }
  .t10 { grid-area: 6 / 5 / 7 / 7; }
  .t5 { padding: 16%; }
}
/* small print: a thin black mat, not a heavy frame */
.t5 { padding: 6px; }
.t5::after { inset: 6px; }
@media (min-width: 900px) { .t5 { padding: 12px; } .t5::after { inset: 12px; } }

/* ---- collection as live tiles: one square grid, three tile sizes ---- */
.mosaic { --cols: 4; --gap: 5px; --cell: calc((100vw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: none; grid-auto-rows: var(--cell); grid-auto-flow: row dense;
  gap: var(--gap); align-content: start; }
.tile { position: relative; margin: 0; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-m { grid-column: span 2; grid-row: span 2; }
.tile-w { grid-column: span 4; grid-row: span 2; }
.tile figcaption { position: absolute; left: 7px; bottom: 6px; font: 500 9px/1 var(--sans); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.tile-s figcaption { display: none; }
@media (min-width: 900px) {
  .mosaic { --cols: 6; --gap: 7px; --cell: calc((66vw - 5 * var(--gap)) / 6); }
  .tile figcaption { left: 10px; bottom: 9px; font-size: 11px; }
  .tile-s figcaption { display: block; }
}
@media (min-width: 900px) {
  .mosaic .tile:nth-child(6)  { grid-area: 1 / 1; }          /* archer (in the fade) */
  .mosaic .tile:nth-child(7)  { grid-area: 2 / 1; }          /* night garden */
  .mosaic .tile:nth-child(1)  { grid-area: 1 / 2 / 3 / 4; }  /* cyber muse */
  .mosaic .tile:nth-child(2)  { grid-area: 1 / 4 / 3 / 6; }  /* red dragon */
  .mosaic .tile:nth-child(3)  { grid-area: 1 / 6; }          /* butterflies */
  .mosaic .tile:nth-child(4)  { grid-area: 2 / 6; }          /* lotus ornament */
  .mosaic .tile:nth-child(11) { grid-area: 3 / 1 / 5 / 3; }  /* script */
  .mosaic .tile:nth-child(8)  { grid-area: 3 / 3 / 5 / 5; }  /* lily */
  .mosaic .tile:nth-child(5)  { grid-area: 3 / 5 / 5 / 7; }  /* spine bloom */
  .mosaic .tile:nth-child(9)  { grid-area: 5 / 1 / 7 / 3; }  /* zeus */
  .mosaic .tile:nth-child(10) { grid-area: 5 / 3 / 7 / 7; }  /* archangel, wide */
}

/* ---- live tiles: explicit layout (no labels) ---- */
.mosaic .tile figcaption { display: none; }
.mosaic .tile.k-angel  { grid-area: 1 / 1 / 3 / 5; }
.mosaic .tile.k-fly    { grid-area: 3 / 1; }
.mosaic .tile.k-orn    { grid-area: 3 / 2; }
.mosaic .tile.k-arch   { grid-area: 4 / 1; }
.mosaic .tile.k-night  { grid-area: 4 / 2; }
.mosaic .tile.k-zeus   { grid-area: 3 / 3 / 5 / 5; }
.mosaic .tile.k-lily   { grid-area: 5 / 1 / 7 / 3; }
.mosaic .tile.k-s1     { grid-area: 5 / 3; }
.mosaic .tile.k-s2     { grid-area: 5 / 4; }
.mosaic .tile.k-s3     { grid-area: 6 / 3; }
.mosaic .tile.k-s4     { grid-area: 6 / 4; }
.mosaic .tile.k-muse   { grid-area: 7 / 1 / 9 / 3; }
.mosaic .tile.k-dragon { grid-area: 7 / 3 / 9 / 5; }
.mosaic .tile.k-script { display: none; }
@media (min-width: 900px) {
  .mosaic .tile.k-arch   { grid-area: 1 / 1; }
  .mosaic .tile.k-night  { grid-area: 2 / 1; }
  .mosaic .tile.k-angel  { grid-area: 1 / 2 / 3 / 6; }
  .mosaic .tile.k-fly    { grid-area: 1 / 6; }
  .mosaic .tile.k-orn    { grid-area: 2 / 6; }
  .mosaic .tile.k-script { display: block; grid-area: 3 / 1 / 5 / 3; }
  .mosaic .tile.k-lily   { grid-area: 3 / 3 / 5 / 5; }
  .mosaic .tile.k-zeus   { grid-area: 3 / 5 / 5 / 7; }
  .mosaic .tile.k-s1     { grid-area: 5 / 1; }
  .mosaic .tile.k-s2     { grid-area: 5 / 2; }
  .mosaic .tile.k-s3     { grid-area: 6 / 1; }
  .mosaic .tile.k-s4     { grid-area: 6 / 2; }
  .mosaic .tile.k-muse   { grid-area: 5 / 3 / 7 / 5; }
  .mosaic .tile.k-dragon { grid-area: 5 / 5 / 7 / 7; }
}
.mosaic .tile.k-s1 { grid-area: 5 / 3 / 7 / 5; }
@media (min-width: 900px) { .mosaic .tile.k-s1 { grid-area: 5 / 1 / 7 / 3; } }
.pg-photo[data-page="1"] { --bgpos: 32% 30%; } @media (min-width: 900px) { .pg-photo[data-page="1"] { --bgpos: 50% 30%; } }
.pg-photo[data-page="1"] { --bgpos: 74% 30%; } @media (min-width: 900px) { .pg-photo[data-page="1"] { --bgpos: 50% 30%; } }

/* ---- colophon v2: one narrow column, map as a small inset plate ---- */
.pg-colophon .pg-body { display: flex !important; flex-direction: column; justify-content: center; width: min(640px, 100%) !important; margin-inline: auto; }
.pg-colophon .pg-body > * { grid-column: auto !important; }
.colo-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; margin-bottom: 22px; }
.colo-row .colo { margin: 0; }
.colo-map { display: block; height: auto !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; overflow: visible !important; grid-column: auto !important; grid-row: auto !important; }
.colo-map-frame { position: relative; display: block; width: 104px; height: 104px; overflow: hidden; border-radius: 50%; border: 1px solid var(--rule); }
.colo-map-frame iframe { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: 0 !important; transform: translate(-50%, -50%); border: 0;
  pointer-events: none; filter: grayscale(1) invert(.9) contrast(.9) brightness(.95); }
.colo-map-frame::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 5px rgba(236,231,224,.18); }
.colo-map-cap { position: static !important; display: block; margin-top: 10px; padding: 0 !important; background: none !important; text-align: center;
  font: 500 9.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.colo-map:hover .colo-map-cap { color: var(--fg); }
@media (min-width: 900px) { .colo-map-frame { width: 132px; height: 132px; } .colo-row { gap: 40px; } }
@media (max-width: 380px) { .colo-row { grid-template-columns: 1fr; } .colo-map { justify-self: start; } }
.colo-map span.colo-map-frame { position: relative; left: auto; right: auto; bottom: auto; padding: 0; background: none; }
.colo-map span.colo-map-cap { position: static; padding: 0; background: none; width: 104px; }
.colo-row { grid-template-columns: 1fr 104px; }
@media (min-width: 900px) { .colo-row { grid-template-columns: 1fr 132px; } .colo-map span.colo-map-cap { width: 132px; } }
.colo-map-frame::after { display: none; }
.colo-map-frame iframe { top: calc(50% + 18px); }
@media (max-width: 899px) {
  .colo-row { grid-template-columns: 1fr; gap: 20px; }
  .colo-map { display: flex !important; align-items: center; gap: 14px; }
  .colo-map span.colo-map-frame { width: 64px; height: 64px; flex: none; }
  .colo-map span.colo-map-cap { width: auto; margin: 0; text-align: left; color: var(--fg); }
}
.colo-row { grid-template-columns: 1fr !important; }
.map-link { display: inline-block; margin-top: 6px; font: 500 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.map-link:hover { color: var(--fg); border-color: var(--fg); }

/* ---- desktop refinements ---- */
@media (min-width: 900px) {
  /* photo pages: the plate fits the page height (no over-zoom), anchored right, edges dissolve into black */
  .pg-photo:not(.pg-mosaic) .pg-bg { left: auto; right: 7%; width: auto; height: 100%; max-width: 62%; object-fit: cover; object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 82%, transparent 100%), linear-gradient(transparent 0, #000 10%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 82%, transparent 100%), linear-gradient(transparent 0, #000 10%, #000 88%, transparent 100%); mask-composite: intersect; }
  .pg-photo:not(.pg-mosaic) > .leaf::after { background: linear-gradient(90deg, #0B0B0A 34%, rgba(11,11,10,0) 52%); }
  /* collection: clear the top-right corner */
  .mosaic .tile.k-fly, .mosaic .tile.k-orn { display: none; }
}
@media (min-width: 900px) { .pg-photo[data-page="3"] .pg-bg { max-width: 44%; right: 6%; object-position: 32% 40%; } }
@media (min-width: 900px) {
  /* plates: a touch larger than the page height allows, never stretched to the page width */
  .pg-photo:not(.pg-mosaic) .pg-bg { width: 47vw; max-width: none; height: 100%; right: 5%; object-position: 50% 35%; }
  .pg-photo[data-page="3"] .pg-bg { width: 47vw; max-width: none; right: 5%; object-position: 40% 35%; }
  /* collection: the wide tile extends right to fill the corner */
  .mosaic .tile.k-angel { grid-area: 1 / 2 / 3 / 7; }
}
@media (min-width: 900px) { .pg-photo[data-page="3"] .pg-bg { right: -2%; } }
.rh { height: 24px; padding: 0; align-items: center; } .rh-menu { height: 40px; margin: -8px -4px -8px 0; } .rh-lang { margin-right: -4px; padding: 0 4px; }
/* "Book" jump in the running head */
.rh-right { display: flex; align-items: center; gap: 22px; }
.rh-book { font: 500 10.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--fg); padding: 7px 0 5px; border-bottom: 1px solid rgba(236,231,224,.45); }
.rh-book:hover { border-color: var(--fg); }
.pg-final .rh-book { visibility: hidden; }
@media (min-width: 900px) { .rh-right { gap: 30px; } }
/* "Book" lives in the bottom margin, where a thumb rests */
.fo { justify-content: flex-end; align-items: center; min-height: 22px; }
.fo-book { font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-mute); padding: 10px 0 6px; transition: color .3s; }
.fo-book span { display: inline-block; margin-left: 6px; transition: transform .3s var(--ease); }
.fo-book:hover { color: var(--fg); }
.fo-book:hover span { transform: translateX(4px); }
.pg-photo .fo-book { color: rgba(236,231,224,.6); }
.pg-final .fo-book { visibility: hidden; }
.fo-book--cover { position: absolute; right: var(--pad); bottom: 22px; color: var(--mute); }
@media (min-width: 900px) { .fo-book--cover { right: 48px; bottom: 30px; } }
/* cover bottom row: turn left, book right */
.cover-meta { align-items: stretch; }
.cover-turn { position: absolute; left: var(--pad); bottom: 22px; padding: 10px 0 6px; font-size: 10px; letter-spacing: .24em; }
.cover-meta .rh--dark { width: auto; }
@media (min-width: 900px) { .cover-turn { left: 48px; bottom: 30px; } }
/* one footer for every page: same position as the cover's bottom row */
.pg .fo { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; min-height: 0; padding: 0; z-index: 3; }
.fo-book, .fo-book--cover { padding: 10px 0 6px; font-size: 10px; letter-spacing: .24em; line-height: 1; }
.pg:not(.pg-cover) { padding-bottom: 66px; }
@media (min-width: 900px) {
  .pg .fo { left: 48px; right: 48px; bottom: 30px; }
  .pg:not(.pg-cover) { padding-bottom: 80px; }
}
/* keep the footer legible over photographs */
.pg-photo .fo-book { color: rgba(236,231,224,.72); }
.pg .fo { display: flex; justify-content: space-between; align-items: center; }
.fo-turn { all: unset; cursor: pointer; font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg); padding: 10px 0 6px; }
.fo-turn span { display: inline-block; margin-left: 6px; }
.fo-turn:focus-visible { outline: 1px solid var(--fg); }
.pg-final .fo-book { visibility: hidden; }
.pg .fo .fo-turn { all: unset; cursor: pointer; margin: 0; padding: 10px 0 6px; font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg); } .pg .fo .fo-turn span { display: inline-block; margin-left: 6px; }
/* I–IV: the text block starts at the same point on every page */

/* V. a độc bản — set like the cover: the word cut from the black, skin beneath */
.final-title { margin: 6px 0 18px; line-height: .9; }
.final-a { display: block; font: italic 400 clamp(22px, 6vw, 30px)/1 var(--serif); color: var(--ink-mute); margin-bottom: 6px; }
.final-cut { display: block; font-style: normal; font-size: clamp(4.2rem, 20vw, 11rem); letter-spacing: -.02em; color: transparent;
  background: url("assets/img/floral-thigh-peony-640.webp") 50% 45% / cover no-repeat; -webkit-background-clip: text; background-clip: text;
  padding: .08em .1em .16em; margin: -.08em -.1em -.16em; }
@media (min-width: 900px) { .final-cut { background-image: url("assets/img/floral-thigh-peony.webp"); font-size: clamp(6rem, min(13vw, 22vh), 12rem); } }
.pg-final { background: #050505; }

.plate-link { margin-left: 14px; font: 500 9.5px/1 var(--sans); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--fg); white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid rgba(236,231,224,.5); }
.pg-mosaic .pg-plate { white-space: nowrap; }
@media (min-width: 900px) { .pg-mosaic .pg-copy > p:not(.pg-plate) { min-height: 3.4em; } }

/* I–IV: pin the chapter line + title to the same point on every page; text flows down from there */
.pg-photo .pg-body { position: static; }
.pg-photo .pg-copy { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); top: calc(100svh - 272px); }
.pg-mosaic .pg-copy > p:not(.pg-plate) { min-height: 0; }
@media (min-width: 900px) {
  .pg-photo .pg-copy { left: max(48px, calc((100vw - 1200px) / 2)); right: auto; width: min(520px, 40vw); top: calc(50svh - 132px); }
  .pg-photo .pg-title { white-space: nowrap; }
}
.pg-photo .pg-copy { top: calc(100svh - 282px); } @media (min-width: 900px) { .pg-photo .pg-copy { top: calc(50svh - 132px); } }
/* "a độc bản." as one line, italic like the chapter titles, filled like the cover */
.final-cut { font-style: italic; font-size: clamp(3.4rem, 15vw, 9rem); white-space: nowrap; letter-spacing: -.015em; }
@media (min-width: 900px) { .final-cut { font-size: clamp(5rem, min(10vw, 19vh), 10rem); } }
/* bigger: two lines on phones (like the cover), one line on desktop */
.final-cut { white-space: normal; font-size: clamp(4.4rem, 22vw, 9rem); line-height: .9; }
.final-cut > span { display: block; }
@media (min-width: 900px) {
  .final-cut { white-space: nowrap; font-size: clamp(6rem, min(13vw, 23vh), 13rem); }
  .final-cut > span { display: inline; }
}
@media (min-width: 900px) { .pg-final .final-title { margin-bottom: 34px; } }
/* like the cover: plain first line, image-filled italic second line, same size */
.final-2 { font-size: clamp(4.4rem, 22vw, 9rem); line-height: .9; margin: 6px 0 22px; }
.final-2 > span { display: block; }
.final-plain { font-style: normal; color: var(--fg); letter-spacing: -.02em; }
.final-2 .final-cut { font-size: 1em; font-style: italic; white-space: nowrap; }
@media (min-width: 900px) { .final-2 { font-size: clamp(5.5rem, min(11vw, 19vh), 11rem); margin-bottom: 34px; } }
/* "a" filled too, upright like "Beneath" */
.final-plain { color: transparent; background: url("assets/img/floral-thigh-peony-640.webp") 50% 45% / cover no-repeat;
  -webkit-background-clip: text; background-clip: text; padding: .06em .1em .1em; margin: -.06em -.1em -.1em; }
@media (min-width: 900px) { .final-plain { background-image: url("assets/img/floral-thigh-peony.webp"); } }
/* cover + độc bản: skin-only texture, no wall or clothing behind the letters */
.cut, .final-cut, .final-plain { background-image: url("assets/img/skin-ink.webp") !important; background-size: cover !important; background-position: 50% 50% !important; }
/* sharper skin: high-quality upscaled texture, sized to the letters, not the screen */
.cut, .final-cut, .final-plain { background-image: url("assets/img/skin-ink-m.webp") !important; }
@media (min-width: 900px) { .cut, .final-cut, .final-plain { background-image: url("assets/img/skin-ink.webp") !important; } }
.cut { inset: auto !important; position: relative !important; padding: .06em .14em .18em !important; }
.pg-cover .cover-knock { display: grid; place-items: center; }
/* one continuous skin surface across both lines, sized to the words (not the page width) */
.final-2 { display: inline-block; align-self: center; color: transparent; padding: .06em .14em .18em; margin-left: auto; margin-right: auto;
  background: url("assets/img/skin-ink-m.webp") 50% 50% / cover no-repeat; -webkit-background-clip: text; background-clip: text; }
@media (min-width: 900px) { .final-2 { background-image: url("assets/img/skin-ink.webp"); } }
.final-2 > .final-plain, .final-2 > .final-cut { background: none !important; color: transparent; padding: 0; margin: 0; }
.book-on .turn-edge { z-index: 50; }
/* page V scales with screen height too (Safari toolbars leave less room) */
@media (max-width: 899px) {
  .final-2 { font-size: clamp(3.2rem, min(22vw, 11.5svh), 9rem); margin-bottom: 14px; }
  .pg-final .pg-body { padding-top: 8px; }
  .pg-final .hook { margin: 12px 0 16px; }
  .pg-final .define { margin-bottom: 8px; }
  .pg-final .btns { gap: 8px; }
  .pg-final .btn { min-height: 44px; }
}
/* short phones (iPhone SE / mini): booking buttons side by side, tighter type */
@media (max-width: 899px) and (max-height: 640px) {
  .final-2 { font-size: clamp(3rem, 10svh, 5rem); margin-bottom: 10px; }
  .pg-final .define { font-size: 13px; }
  .pg-final .final-text { font-size: 14px; }
  .pg-final .hook { font-size: 20px; margin: 8px 0 12px; }
  .pg-final .btns { flex-direction: row; max-width: none; }
  .pg-final .btns .btn { flex: 1; width: auto; min-width: 0; padding: 0 6px; letter-spacing: .14em; }
  .pg-final .free { margin-top: 8px; }
}
@media (max-width: 899px) and (max-height: 640px) { .pg-photo .pg-copy { top: calc(100svh - 330px); } .pg-photo .pg-copy p { font-size: 14.5px; } }

/* drawn arrow icons (never rendered as emoji) */
.ic { display: inline-block; width: .95em; height: .95em; margin-left: .45em; vertical-align: -.08em; flex: none; transition: transform .3s var(--ease); }
a:hover > .ic { transform: translate(2px, -2px); }
.fo-book .ic { width: 1.25em; vertical-align: -.2em; }
.fo-book:hover .ic { transform: translateX(3px); }
.fo-book span { display: none; }

/* ==========================================================
   Audit fixes
   ========================================================== */
/* 1. thumb-sized hit areas, visual size unchanged */
.rh-mark, .rh-lang a, .plate-link, .colo-nav a, .map-link, .fo-book, .fo-turn { position: relative; }
.rh-mark::after, .rh-lang a::after, .plate-link::after, .colo-nav a::after, .fo-book::after, .fo-turn::after {
  content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
.rh-lang a { padding: 0 2px; }

/* 2. very narrow phones: the styles line may wrap */
@media (max-width: 360px) { .pg-mosaic .pg-plate { white-space: normal; } .plate-link { margin-left: 0; display: inline-block; margin-top: 8px; } }

/* 3. tablets in portrait: a little more room above the footer */
@media (min-width: 600px) and (max-width: 899px) { .pg-photo .pg-copy { top: calc(100svh - 312px); } }

/* 4. phones in landscape: compact book */
@media (max-height: 500px) and (orientation: landscape) {
  .pg { padding: 12px 24px 10px; }
  .rh { height: 22px; }
  .pg .fo { bottom: 10px; left: 24px; right: 24px; }
  .pg:not(.pg-cover) { padding-bottom: 40px; }
  .cut { font-size: min(13vw, 30svh) !important; }
  .cover-kw { top: 15svh; }
  .fo-book--cover { right: 24px; bottom: 10px; }
  .rh--dark { padding: 0; }
  .cover-meta { padding: 12px 24px 10px; }
  /* photo pages: art on the right, text on the left, like desktop */
  .pg-photo:not(.pg-mosaic) .pg-bg { left: auto; right: 0; width: 55%; }
  .pg-photo > .leaf::after { background: linear-gradient(90deg, #0B0B0A 40%, rgba(11,11,10,.6) 55%, rgba(11,11,10,0) 75%) !important; }
  .pg-photo .pg-copy { top: 50svh; transform: translateY(-50%); left: 24px; right: auto; width: 48%; }
  .pg-photo .pg-title { font-size: min(9vw, 17svh); margin: 4px 0 8px; }
  .pg-photo .pg-copy p { font-size: 13px; line-height: 1.5; }
  .pg-plate { margin-top: 8px !important; }
  .mosaic { left: 45% !important; }
  /* page V */
  .pg-final .pg-body { padding: 0; }
  .final-2 { font-size: min(9vw, 15svh) !important; margin: 0 0 6px; }
  .pg-final .eyebrow { display: none; }
  .pg-final .define { font-size: 12px; margin-bottom: 2px; }
  .pg-final .final-text { font-size: 12.5px; line-height: 1.45; }
  .pg-final .hook { font-size: 17px; margin: 4px 0 8px; }
  .pg-final .btns { flex-direction: row; max-width: 520px; }
  .pg-final .btns .btn { flex: 1; min-height: 38px; width: auto; min-width: 0; }
  .pg-final .free { margin-top: 4px; }
  /* colophon: two columns */
  .pg-colophon .pg-body { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 32px; align-content: center; width: 100% !important; padding: 0; }
  .pg-colophon .pg-body > .eyebrow, .pg-colophon .colo-lead { grid-column: 1; }
  .pg-colophon .colo-row { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .colo-lead { font-size: 17px !important; margin: 6px 0 10px !important; }
  .colo { font-size: 13px; gap: 6px 14px; }
  .colo-nav { grid-column: 1; padding-top: 10px; font-size: 14px; }
  .colo-copy { grid-column: 1; margin-top: 8px; }
}
/* keep the cover's Book link pinned bottom-right (the hit-area rule above made it relative) */
.fo-book--cover { position: absolute; }
/* menu numerals: legible serif, like the chapter numbers */
.toc-list button span { width: 38px; font: italic 400 14px/1 var(--serif); letter-spacing: 0; color: var(--ink-mute); }
@media (max-width: 360px) { .plate-link { display: table; margin: 10px 0 0; } }
/* "Next" cue, bottom-left of every page */
.pg .fo .fo-turn .ic, .fo-turn--cover .ic { width: 1.25em; vertical-align: -.2em; }
.fo-turn:hover .ic { transform: translateX(3px); }
.fo-turn--cover { all: unset; position: absolute; left: var(--pad); bottom: 22px; cursor: pointer; padding: 10px 0 6px;
  font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg); }
.fo-turn--cover::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
@media (min-width: 900px) { .fo-turn--cover { left: 48px; bottom: 30px; } }
@media (max-height: 500px) and (orientation: landscape) { .fo-turn--cover { left: 24px; bottom: 10px; } }
.pg-final .fo-book { visibility: hidden; }
.fo-turn--cover { pointer-events: auto; }

/* desktop: text block on the page margin, lower third — one left edge from wordmark to "Next" */
@media (min-width: 900px) and (min-height: 501px) {
  .pg-photo .pg-copy { left: 48px; top: calc(100svh - 430px); width: min(560px, 42vw); }
}
/* desktop: plates drawn in toward the centre, still on the right */
@media (min-width: 900px) and (min-height: 501px) {
  .pg-photo:not(.pg-mosaic) .pg-bg, .pg-photo[data-page="3"] .pg-bg { width: 44vw; right: 12vw; }
  .pg-photo[data-page="3"] .pg-bg { object-position: 34% 35%; }
}
/* "Next" arrow centred on the capital letters */
.pg .fo .fo-turn, .fo-turn--cover { display: inline-flex; align-items: center; }
.pg .fo .fo-turn .ic, .fo-turn--cover .ic { width: 1.25em; height: .9em; margin-left: .55em; vertical-align: 0; transform: translateY(-.04em); }
.fo-turn:hover .ic { transform: translate(3px, -.04em); }
/* arrows stay still on hover */
a:hover > .ic, .fo-book:hover .ic { transform: none; }
.fo-turn:hover .ic, .pg .fo .fo-turn:hover .ic, .fo-turn--cover:hover .ic { transform: translateY(-.04em); }
.ic { transition: none; }

/* ==========================================================
   Leaf wrapper: page turns use transforms only (GPU, smooth on iPhone)
   ========================================================== */
.leaf { position: absolute; inset: 0; padding: inherit; display: inherit; grid-template-rows: inherit; isolation: isolate; }
.no-leaf-js .leaf { position: relative; }
.book-on .pg.turning, .book-on .pg.turning > .leaf { will-change: transform; }
.book-on .turn-edge { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: 1px; margin: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: rgba(236, 231, 224, .55); box-shadow: -14px 0 28px rgba(0, 0, 0, .55); transform: translate3d(var(--x, 100vw), 0, 0); will-change: transform, opacity; }
/* one warm grey for small labels everywhere (the cover's tone) */
.pg .eyebrow, .pg-photo .eyebrow, .pg .fo-book, .pg-photo .fo-book, .fo-book--cover { color: #8C877F !important; }
.pg .fo-book:hover, .fo-book--cover:hover { color: var(--fg) !important; }
.pg .fo .fo-turn, .fo-turn--cover { color: #8C877F !important; }
.pg .fo .fo-turn:hover, .fo-turn--cover:hover { color: var(--fg) !important; }
/* room for Vietnamese diacritics between the two title lines */
.final-2 { line-height: 1.04; }
html[lang="vi"] .cut { line-height: .98; }
.final-2 { line-height: 1.16; }
.final-2 { line-height: 1.24; }
@media (max-width: 899px) { .final-2 { font-size: clamp(3.2rem, min(20vw, 10svh), 8rem); } }
@media (min-width: 900px) { .final-2 { font-size: clamp(4.5rem, min(11vw, 15.5vh), 11rem); } }