/* ============================================================
   Limerick Press — Modern & minimal editorial styles
   ============================================================ */

:root {
  --bg: #FAFAF7;          /* warm off-white */
  --ink: #1E1C1A;         /* deep charcoal */
  --ink-soft: #4A4642;
  --ink-faint: #8A847D;
  --accent: #B33A2A;      /* desaturated brick red */
  --accent-dark: #8E2C1E;
  --line: #E4E0D8;
  --card: #FFFFFF;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-verse: 'Fraunces', 'Georgia', serif;

  --maxw: 1180px;
  --prose: 65ch;
  --gut: clamp(1.25rem, 4vw, 4rem);

  --t-xs: 0.78rem;
  --t-sm: 0.9rem;
  --t-base: 1.0625rem;   /* 17px body */
  --t-lg: 1.25rem;
  --t-xl: 1.6rem;
  --t-2xl: clamp(2rem, 4vw, 2.9rem);
  --t-3xl: clamp(2.6rem, 6vw, 4.5rem);
  --t-hero: clamp(3.6rem, 14vw, 10rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-dark); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 200; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

.rule {
  width: 56px; height: 3px; background: var(--accent); border-radius: 2px; margin: 1.6rem 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 .6rem;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 247, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: padding .25s ease, border-color .25s ease, background .25s ease;
}
.nav.shrink {
  border-bottom-color: var(--line);
  background: rgba(250, 250, 247, 0.94);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gut);
  transition: padding .25s ease;
}
.nav.shrink .nav-inner { padding-top: .55rem; padding-bottom: .55rem; }

.wordmark {
  display: flex; align-items: center; gap: .55rem;
  color: var(--ink); font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.01em; font-size: 1.05rem;
}
.wordmark:hover { color: var(--ink); }
.logo-mark { color: var(--accent); flex: none; transition: transform .3s; }
.wordmark:hover .logo-mark { transform: rotate(-6deg); }
.wordmark-text { white-space: nowrap; }

.nav-links { display: flex; gap: 1.35rem; align-items: center; }
.nav-links a {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--accent); transition: width .22s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(3rem, 8vw, 7rem) var(--gut) clamp(4rem, 9vw, 8rem); }
/* On narrow screens, shrink hero side padding so the headline can run nearly edge-to-edge */
@media (max-width: 600px) {
  .hero { padding-left: 6px; padding-right: 6px; }
}
.hero-inner { max-width: 920px; margin: 0 auto; text-align: center; }

.site-smallcaps {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.32em;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-faint);
  margin: 0 0 1.4rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Sized so "Dumb Daddy Jokes" fills the width on one line at every viewport */
  font-size: clamp(1.9rem, 9.7vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-subtitle {
  font-family: var(--font-body);
  /* Sized so the subtitle width matches the title width on one line at every viewport */
  font-size: clamp(0.95rem, 4.85vw, 2.7rem);
  color: var(--ink-soft);
  max-width: none;
  margin: 0.8rem auto 0;
  font-weight: 500;
  white-space: nowrap;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  margin: 1.1rem 0 0;
}

.hero-cover {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 620px;
}
.hero-cover img {
  width: 100%; border-radius: 6px;
  box-shadow: 0 30px 70px -28px rgba(30, 28, 26, 0.45), 0 4px 14px rgba(30,28,26,.08);
}

.soft-warning {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 560px;
  text-align: left;
  border: 1px solid rgba(179, 58, 42, 0.35);
  border-left: 4px solid var(--accent);
  background: rgba(179, 58, 42, 0.05);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
}
.soft-warning .warn-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 600; color: var(--accent); margin-bottom: .4rem;
}
.soft-warning p { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; }

.hero-credit {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: var(--t-sm); color: var(--ink-faint);
}
.hero-credit strong { color: var(--ink); font-weight: 600; }

.hero-toc { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.toc-label {
  font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin: 0 0 1rem;
}
.toc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  max-width: 680px; margin: 0 auto;
}
.toc-chip {
  display: flex; align-items: center; gap: .55rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: .8rem 1rem; color: var(--ink); font-family: var(--font-display);
  font-weight: 500; font-size: var(--t-sm); text-align: left; letter-spacing: -0.01em;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.toc-chip:hover {
  color: var(--ink); border-color: var(--accent);
  transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(30,28,26,.35);
}
.toc-num {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--accent); color: #fff; border-radius: 50%;
  font-size: var(--t-xs); font-weight: 700;
}

/* ============================================================
   INTRODUCTION
   ============================================================ */
.intro { padding: clamp(3rem, 7vw, 6rem) var(--gut); max-width: 980px; margin: 0 auto; }
.intro-head { margin-bottom: 2.5rem; }
.intro-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-2xl);
  letter-spacing: -0.02em; line-height: 1.05; margin: 0;
}
.prose { max-width: var(--prose); margin: 0 auto; }
.prose-p { margin: 0 0 1.5rem; color: var(--ink-soft); }

/* intro limerick blocks */
.intro-lim {
  margin: 2.6rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2rem 0;
}
.intro-lim.with-art {
  display: grid; grid-template-columns: 1fr 40%; gap: 1.8rem; align-items: center;
}
.intro-lim-art img {
  border-radius: 6px; box-shadow: 0 14px 34px -18px rgba(30,28,26,.4);
  width: 100%;
}
.intro-lim.text-only .intro-lim-text.center { text-align: center; }

/* ============================================================
   VERSE + TITLE (shared)
   ============================================================ */
.lim-title {
  font-family: var(--font-body);
  font-weight: 800; font-size: var(--t-lg);
  letter-spacing: 0; line-height: 1.2;
  /* Aug 10 canonical title protocol: always centered over the left-justified
     verse (spread rule below already centered; now the base rule matches). */
  text-align: center;
  margin: 0 0 .35rem; color: var(--ink);
  /* Never clip: if the title is longer than the card, wrap onto a second line
     rather than truncate. word-break: break-word handles rare monster words. */
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  hyphens: auto;
}
.lim-title u {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--ink);
  text-underline-offset: 6px;
}
/* Body-limerick verse: upright sans-serif, regular weight (match screenshot reference) */
.lim-text .verse {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}
.verse {
  font-family: var(--font-verse);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.verse-line { display: block; }
.center .verse { display: inline-block; text-align: left; }

/* ============================================================
   AUDIO PLACEHOLDER
   ============================================================ */
.audio-soon {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.4rem; padding: .5rem .9rem .5rem .55rem;
  border: 1px dashed var(--line); border-radius: 999px;
  background: rgba(138,132,125,0.06);
  color: var(--ink-faint); cursor: not-allowed; user-select: none;
}
.audio-btn {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #EDEAE2; color: var(--ink-faint);
}
.audio-label {
  font-family: var(--font-display); font-size: var(--t-xs);
  letter-spacing: 0.04em; font-weight: 500;
}
.audio-lock { opacity: .7; }
.center .audio-soon { margin-left: auto; margin-right: auto; }

/* Live audio button — replaces the placeholder once a recording exists.
   Same pill silhouette, but enabled: solid border, ink text, brick-red
   play disc. JS swaps the class and wires the toggle. */
.audio-live {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.4rem; padding: .5rem .9rem .5rem .55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  cursor: pointer; user-select: none;
  font: inherit; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, box-shadow .2s;
}
.audio-live:hover { border-color: var(--accent); }
.audio-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.audio-live .audio-btn {
  background: var(--accent); color: #fff;
  transition: background .2s;
}
.audio-live:hover .audio-btn { background: var(--accent-dark); }
.audio-live .audio-label { color: var(--ink); }
.audio-live .ic-pause { display: none; }
.audio-live.playing .ic-play { display: none; }
.audio-live.playing .ic-pause { display: block; }
.center .audio-live { margin-left: auto; margin-right: auto; }

/* ============================================================
   PARTS
   ============================================================ */
.part { padding: clamp(3.5rem, 8vw, 7rem) var(--gut); max-width: var(--maxw); margin: 0 auto; scroll-margin-top: 64px; }
.part:nth-of-type(odd) { } /* hook for future */
.part-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 6vw, 4rem); text-align: center; }
.part-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-3xl); line-height: 0.98; letter-spacing: -0.03em;
  margin: 0; text-transform: uppercase;
}
.part-pairing {
  font-family: var(--font-verse); font-style: italic;
  font-size: var(--t-base); color: var(--accent); margin: 1rem 0 0;
}
.part-desc { color: var(--ink-soft); margin: 1.2rem 0 0; font-size: var(--t-base); }
.part-head .rule { margin: 1.8rem auto 0; }

/* Body Part headers: make the eyebrow ("Part One", "Part Two", etc.) the
   dominant element and the section title 75% as large. Applied ONLY to body
   .part sections — the introduction is unaffected because it uses .intro-head
   (not .part-head) and .intro-title (not .part-title). */
section.part > .part-head .eyebrow {
  font-size: var(--t-3xl);     /* match current title size */
  line-height: 0.98;
  letter-spacing: 0.04em;      /* relax tracking at large display size */
  margin-bottom: 0.4rem;
  /* keep accent (red) color and uppercase from base .eyebrow */
}
section.part > .part-head .part-title {
  /* 75% of the eyebrow font size (eyebrow is var(--t-3xl)). */
  font-size: clamp(1.95rem, 4.5vw, 3.375rem);
  line-height: 1;
  margin-top: 0.1rem;
  color: var(--ink);           /* black/charcoal */
  letter-spacing: -0.01em;
}

.part-lims { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 6.5rem); }

/* Body limerick: text first (centered on page, left-justified within),
   illustration second (centered, below). Title centered, verse lines left-justified. */
.lim.spread {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.4rem, 3.5vw, 2.4rem);
  text-align: center;
  border: 1px solid #2b2724;
  border-radius: 8px;
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 3vw, 2rem);
}
.lim.spread .lim-text {
  display: inline-block;
  text-align: left;
  max-width: 38rem;
  margin: 0 auto;
  width: auto;
  order: 1;
}
.lim.spread .lim-title {
  text-align: center;
}
.lim.spread .lim-art {
  order: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.lim.spread .audio-soon { margin: 0 auto; order: 3; }

.lim-art img {
  width: 100%; max-height: 70vh; object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 56px -26px rgba(30,28,26,.45), 0 3px 10px rgba(30,28,26,.06);
}
.lim-text .verse { margin-top: .1rem; }

/* part six text feature */
.lim.text-feature {
  text-align: center; padding: clamp(3rem, 8vw, 6rem) 0;
}
.lim.text-feature .lim-text.center { max-width: 40ch; margin: 0 auto; }
.lim.text-feature .lim-title { font-size: var(--t-xl); margin-bottom: 1.4rem; }
.lim.text-feature .verse { font-size: 1.45rem; line-height: 1.6; }

/* ============================================================
   CLOSING
   ============================================================ */
.closing {
  padding: clamp(4rem, 9vw, 8rem) var(--gut);
  text-align: center; max-width: 720px; margin: 0 auto;
}
.closing-art { max-width: 240px; margin: 0 auto 2.5rem; }
.closing-art img {
  border-radius: 6px; box-shadow: 0 18px 40px -22px rgba(30,28,26,.4);
}
.closing-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-3xl); letter-spacing: -0.03em; margin: 0; text-transform: uppercase; line-height: .98;
}
.closing-tagline {
  font-family: var(--font-verse); font-style: italic;
  font-size: var(--t-xl); color: var(--ink-soft); margin: 1.2rem 0 0;
}
.closing .rule { margin: 2.2rem auto; }
.closing-credit {
  display: flex; align-items: center; justify-content: center; gap: 1.6rem;
  font-size: var(--t-base); color: var(--ink);
}
.closing-credit strong { font-family: var(--font-display); font-weight: 600; }
.closing-credit .role { font-size: var(--t-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.14em; }
.closing-credit .amp { color: var(--accent); font-family: var(--font-verse); font-style: italic; font-size: var(--t-xl); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: 2.5rem var(--gut); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center;
}
.copyright { font-family: var(--font-display); font-weight: 600; margin: 0; font-size: var(--t-sm); }
.phase { margin: 0; font-size: var(--t-sm); color: var(--ink-faint); max-width: 46ch; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .toc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1rem;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.open { max-height: 420px; }
  .nav-links a { padding: .7rem 0; width: 100%; font-size: 1rem; }
  .nav-toggle { display: flex; }

  /* stack spreads, illustration first */
  .lim.spread { gap: 1.4rem; }
  .lim.spread .lim-art { order: 2; }
  .lim.spread .lim-text { order: 1; }
  .lim-art img { max-height: 60vh; }

  .intro-lim.with-art { grid-template-columns: 1fr; }
  .intro-lim-art { max-width: 280px; }

  .toc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .closing-credit { flex-direction: column; gap: .8rem; }
}

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

/* ===== Introduction scaffold slots ===== */
.slot {
  border: 2px dashed #C9C5BA;
  background: #F4F0E6;
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0;
}
.slot-label {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B33A2A;
  margin: 0 0 0.3rem 0;
}
.slot-hint {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.92rem;
  color: #4A4940;
  margin: 0;
  font-style: italic;
}

/* ===== Inline cartoons inside the intro ===== */
.intro-cartoon {
  margin: 1.8rem auto;
  max-width: 520px;
  text-align: center;
}
.intro-cartoon img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.intro-cartoon figcaption {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  color: #4A4940;
  margin-top: 0.55rem;
}

/* ===== Part headings inside the intro ===== */
.intro-part-head {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  color: #1A1A18;
  margin: 2.2rem 0 0.6rem 0;
  letter-spacing: -0.01em;
}

/* ===== Indented italic caption lines (cartoon-style asides in prose) ===== */
.intro-caption {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #4A4940;
  margin: 0.4rem 0 1.6rem 2.5rem;
  line-height: 1.45;
}
.intro-caption .caption-line {
  display: block;
}

/* ===== Verse title (e.g. “All The World Is But A Stage”) ===== */
.intro-verse-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #1A1A18;
  margin: 2.0rem 0 0.7rem 0;
  letter-spacing: -0.005em;
}

/* ===== Intro body-style capsules (Rushdie + Elegant Gent) ===== */
#intro-rushdie {
  margin-top: 1.8rem;
  margin-bottom: 4.5rem;
}
#intro-guam {
  margin-top: 1.2rem;
  margin-bottom: 1.6rem;
}
#intro-rushdie .lim-art {
  max-width: 347px;          /* keep chair illustration one-third smaller than default */
}
#intro-rushdie .lim-caption,
#intro-rushdie-cap .lim-caption,
#intro-guam .lim-caption {
  display: block;
  margin-top: 0.7rem;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 900;
  /* 75% of title size: title is clamp(20.62px ... 24.85px) */
  font-size: clamp(15.47px, calc(15.47px + 3.17 * (100vw - 375px) / 55), 18.64px);
  color: #2b2724;
  text-align: center;
}
.intro-cartoon-caption {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1A1A18;
  text-align: center;
  margin: 0.7rem 0 0 0;
  line-height: 1.45;
}

/* ===== Part title-page illustration ===== */
.part-title-art {
  margin: 1.4rem auto 2.2rem auto;
  max-width: 720px;
  width: 100%;
  text-align: center;
}
.part-title-art img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 24px 56px -26px rgba(30,28,26,.45), 0 3px 10px rgba(30,28,26,.06);
}
@media (max-width: 640px) {
  .part-title-art {
    max-width: 100%;
    margin: 1rem auto 1.4rem auto;
  }
  .part-title-art img {
    max-height: 60vh;
  }
}

/* ============================================================
   Strip-only capsule (back-cover comic strip) — image fills capsule
   ============================================================ */
.lim.spread.strip-only {
  padding: clamp(0.6rem, 1.8vw, 1rem);
  gap: clamp(0.6rem, 2vw, 1rem);
  background: #ffffff;
}
.lim.spread.strip-only .lim-art {
  max-width: 100%;
  width: 100%;
  margin: 0;
}
.lim.spread.strip-only .lim-art img {
  width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

/* ------------------------------------------------------------------
   iOS pinch-zoom stability for ebook illustrations
   Without these hints, iOS Safari sometimes interprets pinches on
   images as long-press/drag actions instead of viewport zoom. That
   can trigger "Open Image in New Tab" (which lands on the raw S3
   presigned URL), jump anchor navigation, or drop the user out of
   Safari entirely. Explicitly declaring pinch-zoom behavior and
   disabling the long-press callout + drag-away gesture prevents
   the browser from second-guessing the gesture.

   touch-action is `pan-y pinch-zoom` (not bare `pinch-zoom`) so a
   vertical drag that STARTS on a cartoon still scrolls the page —
   bare pinch-zoom made the whole image surface dead to scrolling.
   Horizontal stays reserved so the slideshow's swipe nav is unaffected.
   ------------------------------------------------------------------ */
.hero-cover img,
.intro-cartoon img,
.lim-art img,
.intro-lim-art img,
.closing-art img,
.part-title-art img {
  touch-action: pan-y pinch-zoom;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}