/* =========================================================================
 * TASTE OF COUNTRY DIGITAL COVER — TEMPLATE
 * Stylesheet. Paired with toc-cover.js.
 *
 * All rules are scoped to #toc-cover-dollyparton so nothing leaks into the
 * surrounding WordPress theme.
 * ========================================================================= */

#toc-cover-dollyparton {
  /* Brand tokens — Taste of Country: modern farmhouse — dusty rose pink,
     whitewashed white, soft navy-charcoal ink */
  --toc-pink: #c2447c;
  --toc-pink-deep: #8a2f59;
  --ink: #1b2733;
  --paper: #f7f5f1;
  --paper-dim: #e7e3da;
  --hot-white: #ffffff;

  /* Type — light, delicate serif display + soft handwritten script accent */
  --font-display: 'Fraunces', Georgia, serif;
  --font-accent: 'Caveat', 'Segoe Script', cursive;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Whitewashed-shiplap texture for the paper sections (chapter/dek/photo-credit
     backgrounds) — plank grooves (paired shadow+highlight per board edge for
     depth) plus soft grain blotches. Applied with mix-blend-mode: multiply
     (see usages) so it reads as shading in the paper, not flat lines on top. */
  --paper-texture:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0.045) 0px, rgba(0,0,0,0.045) 2px,
      rgba(255,255,255,0.25) 2px, rgba(255,255,255,0.25) 3px,
      transparent 3px, transparent 46px),
    radial-gradient(ellipse 60% 40% at 18% 20%, rgba(0,0,0,0.015), transparent 60%),
    radial-gradient(ellipse 50% 35% at 78% 55%, rgba(0,0,0,0.013), transparent 65%),
    radial-gradient(ellipse 55% 30% at 40% 88%, rgba(0,0,0,0.013), transparent 60%);

  /* Stay inside the WP post column. All inner typography sizes use
     container query units (cqi) so they scale to THIS element's width,
     not the browser viewport. */
  container-type: inline-size;
  container-name: lwcover;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: clip; /* harder than `hidden` — never produces a scroll context */
  margin: 0 0 30px;
  border-radius: 0;
  isolation: isolate;

  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

#toc-cover-dollyparton * { box-sizing: border-box; }
#toc-cover-dollyparton img { max-width: 100%; display: block; }
#toc-cover-dollyparton a { color: inherit; }
#toc-cover-dollyparton mark,
#toc-cover-dollyparton em { font-weight: inherit; font-style: inherit; }

/* Kill theme-injected decorations on quote elements (the Townsquare theme
   adds ::before/::after with stylized quotation marks to blockquote/q,
   which clash with our own typography). */
#toc-cover-dollyparton blockquote,
#toc-cover-dollyparton q,
#toc-cover-dollyparton .toc-quote__text {
  margin: 0;
  padding: 0;
  quotes: none;
}
#toc-cover-dollyparton blockquote::before,
#toc-cover-dollyparton blockquote::after,
#toc-cover-dollyparton q::before,
#toc-cover-dollyparton q::after,
#toc-cover-dollyparton .toc-quote__text::before,
#toc-cover-dollyparton .toc-quote__text::after {
  content: none !important;
  display: none !important;
}

/* ---------- Halftone + grain textures (pure CSS) ---------- */
#toc-cover-dollyparton .toc-halftone {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.18) 1px, transparent 1.5px);
  background-size: 6px 6px;
}
#toc-cover-dollyparton .toc-grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: 0.12;
  mix-blend-mode: overlay;
}

/* ---------- MASTHEAD ----------
   Full-width nameplate bar above the hero — same pattern as XXL's cover
   (see ~/xxl-cover .toc-masthead). Replaces the small rotated "Digital
   Cover" badge that used to sit overlaid on the hero photo top-left. */
#toc-cover-dollyparton .toc-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(16px, 4cqi, 36px);
  background: var(--ink);
  border-bottom: 2px solid var(--toc-pink);
}
#toc-cover-dollyparton .toc-masthead__nameplate {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(7px, 1.2cqi, 11px);
}
#toc-cover-dollyparton .toc-masthead__brand,
#toc-cover-dollyparton .toc-masthead__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(18px, 3.4cqi, 26px);
  line-height: 1;
  letter-spacing: 0.01em;
}
#toc-cover-dollyparton .toc-masthead__brand { color: var(--toc-pink); }
#toc-cover-dollyparton .toc-masthead__title { color: var(--paper); }
#toc-cover-dollyparton .toc-masthead__issue {
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(10px, 1.4cqi, 12px);
  font-weight: 600;
  color: var(--paper-dim);
  text-align: right;
}
@container lwcover (max-width: 460px) {
  #toc-cover-dollyparton .toc-masthead__issue { display: none; }
}

/* ---------- HERO ---------- */
#toc-cover-dollyparton .toc-hero {
  position: relative;
  width: 100%;
  height: clamp(560px, 115cqi, 820px);
  overflow: hidden;
  background: var(--ink);
}
#toc-cover-dollyparton .toc-hero__bg,
#toc-cover-dollyparton .toc-hero__scrim,
#toc-cover-dollyparton .toc-hero__fg {
  position: absolute; inset: 0;
  will-change: transform;
}
#toc-cover-dollyparton .toc-hero__bg {
  /* background-image set via inline style from CONTENT.heroBgImage.
     Over-scaled vertically; position biased toward the top so a subject's
     head isn't cropped (was fully bottom-anchored, which cut off the head
     on a close-up tour photo — tune background-position per hero image if
     it changes again).

     top: -25% (overriding the shared inset:0 above) gives this layer extra
     box height ABOVE the container, not just a bigger background image.
     That extra room matters because the desktop parallax below
     (gsap.to('.toc-hero__bg', {yPercent: 15, scrollTrigger: {scrub:true}}))
     is scroll-scrubbed, not scroll-triggered — it applies a partial
     downward offset immediately on load if the hero starts partway up the
     viewport (always true once this sits below a WP post's own header),
     not just once the user actually scrolls. That downward shift moves
     this whole layer down, exposing #toc-cover-dollyparton .toc-hero's own
     --ink background above it as a visible gap — background-size/position
     can't fix that, since they only control the image within the box, not
     the box's own position. The old bottom-anchored version never showed
     this because bottom-anchoring already parked all the spare height
     above the container as slack; top-anchoring removed that slack, so it
     has to come back some other way. */
  top: -10%;
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transform-origin: 50% 0%;
}
#toc-cover-dollyparton .toc-hero__scrim {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.1) 35%, rgba(10,10,10,0.75) 72%, rgba(10,10,10,0.96) 100%),
    radial-gradient(80% 60% at 50% 40%, transparent 0%, rgba(225,38,28,0.18) 100%);
  pointer-events: none;
}
#toc-cover-dollyparton .toc-hero__fg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 4cqi, 36px);
  z-index: 3;
}
#toc-cover-dollyparton .toc-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 12px;
  color: var(--paper);
  background: var(--toc-pink);
  padding: 8px 14px;
  align-self: flex-start;
  margin-top: clamp(20px, 5cqi, 48px);
  transform: rotate(-1.5deg);
  box-shadow: 4px 4px 0 var(--ink);
}
#toc-cover-dollyparton .toc-eyebrow::before {
  content: '●';
  color: var(--paper);
  font-size: 10px;
}
#toc-cover-dollyparton .toc-hero__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(22px, 4.8cqi, 42px);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: auto 0 12px;
  color: var(--paper);
  /* Default: white text with red dropshadow */
  text-shadow: 0 3px 0 var(--toc-pink), 0 6px 24px rgba(0,0,0,0.6);
}
#toc-cover-dollyparton .toc-hero__headline .ln {
  display: block;
  overflow: hidden;
  padding: 0.04em 0; /* room for descenders + entrance animation */
}
#toc-cover-dollyparton .toc-hero__headline .ln span {
  display: inline-block;
}
/* Lines 1–2 (first + last name) — dominant; outsized red wordmark anchored at bottom. */
#toc-cover-dollyparton .toc-hero__headline .ln:nth-child(-n+2) span {
  font-size: clamp(56px, 14cqi, 124px);
  line-height: 0.85;
  color: var(--toc-pink);
  text-shadow: 2px 3px 0 #fff, 0 8px 28px rgba(0,0,0,0.7);
  transform: rotate(-1.5deg);
  letter-spacing: -0.02em;
}

#toc-cover-dollyparton .toc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--paper-dim);
}
#toc-cover-dollyparton .toc-hero__meta b { color: var(--paper); font-weight: 800; }

@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-eyebrow {
    margin-top: 0;
    font-size: 10px;
    padding: 6px 10px;
    letter-spacing: 0.2em;
  }
  #toc-cover-dollyparton .toc-hero__meta {
    line-height: 1.2;
    gap: 4px 16px;
  }
  /* Mobile: scale the band photo up to 165% so it fills the hero. The
     headline + meta sit over the lower portion via the dark scrim gradient,
     with no empty dark space below. */
  #toc-cover-dollyparton .toc-hero {
    height: clamp(420px, 110cqi, 500px);
  }
  #toc-cover-dollyparton .toc-hero__fg {
    padding-bottom: 16px;
  }
  #toc-cover-dollyparton .toc-hero__bg {
    /* Reset top back to 0 — the desktop rule's top offset exists only to
       give the scroll-scrubbed parallax room to move without exposing a
       gap — mobile never runs that parallax (see initAnimations' isMobile
       branch), so the extra box height isn't needed there. 169% zooms the
       photo in on mobile (tuned for this hero image specifically). */
    top: 0;
    background-size: 169% auto;
    background-position: center top;
    background-repeat: no-repeat;
    transform: none;
  }
  /* Line 1's base clamp floors at 72px regardless of container width —
     fine on desktop (bleed off the edge is intentional) but on a narrow
     mobile viewport a long name at 72px+ black-italic-caps runs wider
     than the hero's own padded width and overflows/clips. Lower floor
     + ceiling so it scales down with the container instead. */
  #toc-cover-dollyparton .toc-hero__headline .ln:nth-child(-n+2) span {
    font-size: clamp(30px, 12cqi, 50px);
  }
}

#toc-cover-dollyparton .toc-scroll-hint {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--paper-dim);
  animation: toc-bob 2.4s ease-in-out infinite;
}
@keyframes toc-bob {
  0%,100% { transform: translate(-50%, 0); opacity: 0.7; }
  50%     { transform: translate(-50%, 8px); opacity: 1; }
}

/* ---------- SOCIAL SHARE STRIP ---------- */
/* Slot directly under the hero. The WP-rendered .social-share.bignsexy <ul>
   is moved into [data-social-share-target] at boot; section stays hidden
   until that migration succeeds. */
#toc-cover-dollyparton .toc-social-share {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(18px, 2.6cqi, 28px) clamp(16px, 4cqi, 36px);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#toc-cover-dollyparton .toc-social-share__inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#toc-cover-dollyparton .toc-social-share__kicker {
  display: inline-block;
  font-family: var(--font-accent);
  color: var(--hot-white);
  font-size: clamp(14px, 2cqi, 18px);
  transform: rotate(-1.5deg);
  letter-spacing: 0.02em;
}
/* Reset and style the migrated <ul> as horizontal pill buttons. */
#toc-cover-dollyparton .toc-social-share__slot ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
#toc-cover-dollyparton .toc-social-share__slot li {
  margin: 0;
  padding: 0;
}
#toc-cover-dollyparton .toc-social-share__slot a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--toc-pink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--paper);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
#toc-cover-dollyparton .toc-social-share__slot a:hover,
#toc-cover-dollyparton .toc-social-share__slot a:focus-visible {
  background: var(--toc-pink-deep);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--paper);
  outline: none;
}
#toc-cover-dollyparton .toc-social-share__slot .social-icon-svg-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#toc-cover-dollyparton .toc-social-share__slot svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
/* Show the "Share on …" label inline next to each icon. */
#toc-cover-dollyparton .toc-social-share__slot .share-title {
  display: inline-block;
  white-space: nowrap;
}

/* ---------- COVER REVEAL ---------- */
#toc-cover-dollyparton .toc-cover-reveal {
  position: relative;
  padding: clamp(48px, 8cqi, 96px) clamp(20px, 5cqi, 48px);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
#toc-cover-dollyparton .toc-cover-reveal__bg {
  position: absolute; inset: 0;
  /* background-image set via inline style from CONTENT.coverReveal.image */
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.4) saturate(1.4);
  transform: scale(1.2);
  z-index: 0;
}
#toc-cover-dollyparton .toc-cover-reveal__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(212,0,79,0.25) 50%, rgba(10,10,10,0.85) 100%);
}
#toc-cover-dollyparton .toc-cover-reveal__inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
#toc-cover-dollyparton .toc-cover-reveal__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
#toc-cover-dollyparton .toc-cover-reveal__tag {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(11px, 1.4cqi, 13px);
  color: var(--toc-pink);
}
#toc-cover-dollyparton .toc-cover-reveal__issue {
  font-family: var(--font-accent);
  font-size: clamp(16px, 2.4cqi, 22px);
  color: var(--paper);
  transform: rotate(-1deg);
}
#toc-cover-dollyparton .toc-cover-reveal__frame {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
  transform: rotate(-1.5deg);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
#toc-cover-dollyparton .toc-cover-reveal__frame:hover {
  transform: rotate(0deg) scale(1.02);
}
#toc-cover-dollyparton .toc-cover-reveal__frame img {
  display: block;
  width: 100%;
  height: auto;
}
#toc-cover-dollyparton .toc-cover-reveal__corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 3px solid var(--toc-pink);
  pointer-events: none;
}
#toc-cover-dollyparton .toc-cover-reveal__corner--tl { top: -6px; left: -6px;  border-right: 0; border-bottom: 0; }
#toc-cover-dollyparton .toc-cover-reveal__corner--tr { top: -6px; right: -6px; border-left: 0;  border-bottom: 0; }
#toc-cover-dollyparton .toc-cover-reveal__corner--bl { bottom: -6px; left: -6px;  border-right: 0; border-top: 0; }
#toc-cover-dollyparton .toc-cover-reveal__corner--br { bottom: -6px; right: -6px; border-left: 0;  border-top: 0; }

#toc-cover-dollyparton .toc-cover-reveal__caption {
  margin: 24px 0 0;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* ---------- DEK ---------- */
#toc-cover-dollyparton .toc-dek {
  position: relative;
  padding: clamp(48px, 7cqi, 80px) clamp(20px, 5cqi, 48px);
  background: var(--paper);
  color: var(--ink);
}
#toc-cover-dollyparton .toc-dek::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--paper-texture);
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
#toc-cover-dollyparton .toc-dek__wrap {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
#toc-cover-dollyparton .toc-dek__subhead {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(28px, 6cqi, 38px);
  line-height: 1;
  margin: 0 0 28px;
  color: var(--ink);
}
#toc-cover-dollyparton .toc-dek__subhead em {
  font-style: italic;
  background: var(--toc-pink);
  color: var(--paper);
  padding: 0 0.2em;
  display: inline-block;
  transform: rotate(-1deg);
}
/* Lede treatment applies to the WHOLE dek block for this story (not just
   the opening paragraph) — every graf above the purple rule reads at the
   larger intro size. Drop cap still marks only the true first letter. */
#toc-cover-dollyparton .toc-dek p {
  font-size: clamp(21px, 3.4cqi, 21px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1.2em;
  opacity: 0;
  transform: translateY(24px);
}
#toc-cover-dollyparton .toc-dek p:last-of-type {
  margin-bottom: clamp(28px, 4cqi, 40px);
  padding-bottom: clamp(20px, 3cqi, 32px);
  border-bottom: 3px solid var(--toc-pink);
}
/* Inline links in body copy — red, underlined, with a deeper red on hover. */
#toc-cover-dollyparton .toc-dek a,
#toc-cover-dollyparton .toc-chapter a {
  color: var(--toc-pink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
#toc-cover-dollyparton .toc-dek a:hover,
#toc-cover-dollyparton .toc-chapter a:hover {
  color: var(--toc-pink-deep);
}
#toc-cover-dollyparton .toc-dek em,
#toc-cover-dollyparton .toc-chapter em {
  font-style: italic;
}
/* Album title — red italic. The italic + red treatment is enough to mark
   the album title in body text; no auto-quotes wrapping needed. */
#toc-cover-dollyparton em.toc-album {
  font-style: italic;
  color: var(--toc-pink);
  font-weight: 600;
}
/* On red backgrounds (CHUCK15 promo banner, marker quote) the album-title
   red blends into the bg — fall back to paper-white for legibility. */
#toc-cover-dollyparton .toc-merch-promo em.toc-album,
#toc-cover-dollyparton .toc-quote--marker em.toc-album {
  color: var(--paper);
}
/* Links that wrap an album title keep their underline + red color cohesive. */
#toc-cover-dollyparton a > em.toc-album,
#toc-cover-dollyparton em.toc-album {
  color: var(--toc-pink);
}
#toc-cover-dollyparton .toc-dek p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  float: left;
  font-size: 4em;
  line-height: 0.82;
  padding: 4px 3px 0 0;
  color: var(--toc-pink);
}

/* ---------- CHAPTERS ---------- */
#toc-cover-dollyparton .toc-chapter {
  /* Default = paper (tan) theme */
  position: relative;
  padding: clamp(48px, 7cqi, 80px) clamp(20px, 5cqi, 48px);
  background: var(--paper);
  color: var(--ink);
  border-top: 2px dashed rgba(0,0,0,0.15);
  overflow: hidden;
}
/* Decorative corner-peek image (optional, per-section via CONTENT — see
   `decor` field) — same bleeds-off-the-edge, clipped-by-overflow language
   as the video section's wagon wheel. Sits behind the text column
   (z-index 0, below .toc-chapter__inner's z-index 1) so it never competes
   with readable copy even if the two overlap at narrow widths. */
#toc-cover-dollyparton .toc-chapter__decor {
  position: absolute;
  bottom: clamp(-30px, -4cqi, 0px);
  left: clamp(-40px, -5cqi, -10px);
  width: clamp(160px, 22cqi, 300px);
  aspect-ratio: 792 / 1536;
  background-size: contain;
  background-position: bottom left;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transform: scaleX(-1);
}
@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-chapter__decor {
    opacity: 0.4;
  }
}
/* Decorative butterfly accents — sprinkled at a few points through the
   story (Dolly's own well-known personal motif). Each instance sets its
   own position/size/rotation/opacity inline for a scattered, non-uniform
   feel; sits behind section content (z-index 0, inserted before the
   content wrapper in DOM order) so it never competes with readable copy. */
#toc-cover-dollyparton .toc-butterfly {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
#toc-cover-dollyparton .toc-butterfly img {
  display: block;
  width: 100%;
  height: 100%;
}
@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-butterfly {
    opacity: 0.2;
  }
}
#toc-cover-dollyparton .toc-chapter::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--paper-texture);
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
#toc-cover-dollyparton .toc-chapter__inner {
  position: relative;
  z-index: 1;
}
#toc-cover-dollyparton .toc-chapter--ink {
  background: var(--ink);
  color: var(--paper);
  border-top-color: rgba(255,255,255,0.12);
}
#toc-cover-dollyparton .toc-chapter--ink::before {
  display: none; /* no dotted texture on dark sections */
}
#toc-cover-dollyparton .toc-chapter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 100%;
  margin: 0 auto;
}
#toc-cover-dollyparton .toc-chapter__rail {
  display: none;
}
#toc-cover-dollyparton .toc-chapter__kicker {
  font-family: var(--font-accent);
  font-size: 18px;
  color: var(--toc-pink);
  margin-top: 12px;
  transform: rotate(-1.5deg);
  display: inline-block;
}
#toc-cover-dollyparton .toc-chapter__kicker--mobile {
  margin: -4px 0 18px;
}
@container lwcover (min-width: 640px) {
  #toc-cover-dollyparton .toc-chapter__inner {
    grid-template-columns: 180px 1fr;
    gap: 40px;
  }
  #toc-cover-dollyparton .toc-chapter__rail {
    display: block;
    position: relative;
  }
  #toc-cover-dollyparton .toc-chapter__kicker--mobile {
    display: none;
  }
}
#toc-cover-dollyparton .toc-chapter__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 6.5cqi, 38px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 20px;
  letter-spacing: -0.005em;
}
#toc-cover-dollyparton .toc-chapter__heading::after {
  content: '';
  display: block;
  width: 80px; height: 6px;
  background: var(--toc-pink);
  margin-top: 16px;
}
#toc-cover-dollyparton .toc-chapter p {
  font-size: clamp(16px, 2cqi, 18px);
  line-height: 1.7;
  margin: 0 0 1.1em;
}
/* Only the data-reveal paragraphs start hidden; nested embeds (merch promo,
   etc.) inside a chapter must stay visible regardless of scroll position. */
#toc-cover-dollyparton .toc-chapter p[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}

/* Inline editorial photo within a chapter — tape-secured, tilted polaroid
   that floats next to body copy on wider columns and stacks on narrow. */
#toc-cover-dollyparton .toc-chapter__photo {
  position: relative;
  margin: 8px 0 20px;
  padding: 15px 15px 50px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 18px 36px rgba(0,0,0,0.35);
  transform: rotate(-2deg);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
  width: 100%;
  max-width: 100%;
}
#toc-cover-dollyparton .toc-chapter__photo::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 90px; height: 22px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(255,255,255,0.6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#toc-cover-dollyparton .toc-chapter__photo:hover { transform: rotate(0deg) scale(1.02); }
#toc-cover-dollyparton .toc-chapter__photo img:not(.toc-photo-logo) {
  width: 100%;
  aspect-ratio: 3 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: contrast(1.04) saturate(1.08);
}

/* Optional photo-partner badge (e.g. a co-branded magazine logo) — stamped on
   photos when CONTENT.photoLogo is set (see photoLogo() in the JS); disabled
   by default. background-image is set inline by the JS, per CONTENT.photoLogo.src.
   Shared by chapter photos and gallery items via the .toc-photo-frame wrapper. */
#toc-cover-dollyparton .toc-photo-frame {
  position: relative;
}
#toc-cover-dollyparton .toc-photo-logo {
  /* The source PNG has heavy transparent padding around the mark itself
     (only the center ~33% width / ~78% height is visible), so an <img> can
     never sit flush in a corner. This crops it via background-size/position
     math instead — the visible mark's aspect ratio is 659:227. */
  position: absolute;
  top: 12px;
  right: 12px;
  width: clamp(45px, 8cqi, 65px);
  aspect-ratio: 659 / 227;
  background-repeat: no-repeat;
  background-size: 303.5% 128.6%;
  background-position: 52.5% 44.6%;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
#toc-cover-dollyparton .toc-photo-logo--hero {
  position: absolute;
  top: auto;
  bottom: clamp(16px, 3cqi, 28px);
  right: clamp(16px, 3cqi, 28px);
  width: clamp(90px, 13cqi, 130px);
  aspect-ratio: 659 / 227;
  background-repeat: no-repeat;
  background-size: 303.5% 128.6%;
  background-position: 52.5% 44.6%;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7));
}
@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-photo-logo--hero {
    top: clamp(16px, 3cqi, 28px);
    bottom: auto;
  }
}
#toc-cover-dollyparton .toc-chapter__photo figcaption {
  margin-top: 10px;
  font-family: var(--font-accent);
  font-size: clamp(16px, 2.8cqi, 22px);
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  transform: rotate(-1.5deg);
}
@container lwcover (min-width: 560px) {
  #toc-cover-dollyparton .toc-chapter__photo {
    max-width: 46%;
    padding: 15px 15px 50px;
  }
  #toc-cover-dollyparton .toc-chapter__photo--right {
    float: right;
    margin: 4px 0 16px 28px;
    transform: rotate(2deg);
  }
  #toc-cover-dollyparton .toc-chapter__photo--left {
    float: left;
    margin: 4px 28px 16px 0;
    transform: rotate(-2deg);
  }
}

/* ---------- VIDEO EMBED — RETRO TV ---------- */
/* =========================================================================
 * VIDEO — modeled on the XXL cover's "classy theater" video treatment (soft
 * glow, thin gradient-bordered frame, "Now Playing" badge, a large slow-
 * spinning decorative disc peeking from the corner), recolored to this
 * brand's blue/white palette. XXL's spinning vinyl record became a spinning
 * wagon wheel — on-brand for Taste of Country (and a quiet nod to "Wagon
 * Wheel," the Old Crow/Darius Rucker country standard) instead of a record.
 * ========================================================================= */
#toc-cover-dollyparton .toc-video {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 7cqi, 80px) clamp(20px, 5cqi, 48px);
  overflow: hidden;
}
/* Soft glow behind the frame. */
#toc-cover-dollyparton .toc-video::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 58%, rgba(62,100,131,0.22) 0%, transparent 65%),
    radial-gradient(45% 40% at 50% 45%, rgba(62,100,131,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#toc-cover-dollyparton .toc-video__inner {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
#toc-cover-dollyparton .toc-video__kicker {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: clamp(14px, 2cqi, 20px);
  color: var(--hot-white);
  margin-bottom: 8px;
  transform: rotate(-1.5deg);
}
#toc-cover-dollyparton .toc-video__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 6cqi, 52px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: var(--paper);
}

/* TV housing (sizing wrapper only — the frame itself is .toc-video__frame) */
#toc-cover-dollyparton .toc-tv {
  position: relative;
  max-width: 85%;
  margin: 0 auto;
}
@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-tv {
    max-width: 100%;
  }
}
/* Thin blue rule beneath the frame as an editorial divider. */
#toc-cover-dollyparton .toc-tv::after {
  content: '';
  display: block;
  width: clamp(80px, 12cqi, 140px);
  height: 1px;
  background: var(--toc-pink);
  margin: clamp(20px, 3cqi, 32px) auto 0;
  opacity: 0.6;
}

/* Frame: thin metallic-blue gradient border via the dual-background trick —
   the padding-box layer paints the inside ink, the border-box layer paints
   the gradient. .toc-tv__static stays as an element for the JS lazy-load
   hook (see boot()); it's a soft shimmer, not noise/grain. */
#toc-cover-dollyparton .toc-video__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--hot-white), var(--hot-white)) padding-box,
    linear-gradient(135deg, var(--toc-pink-deep) 0%, var(--toc-pink) 30%, var(--hot-white) 50%, var(--toc-pink) 70%, var(--toc-pink-deep) 100%) border-box;
  box-shadow: 0 32px 70px rgba(0,0,0,0.55);
}
#toc-cover-dollyparton .toc-video__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
/* Placeholder shown when the YouTube ID hasn't been added yet — white with a
   subtle grain overlay (same noise recipe as the loading shimmer's sibling
   texture below), matching the frame's whitewashed fill. */
#toc-cover-dollyparton .toc-video__placeholder {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hot-white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
  font-size: clamp(22px, 4.4cqi, 38px);
}
#toc-cover-dollyparton .toc-video__placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* "Now Playing" pill — dark with a thin blue border. */
#toc-cover-dollyparton .toc-video__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(27,39,51,0.85);
  color: var(--hot-white);
  border: 1px solid var(--toc-pink);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 12px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
}
#toc-cover-dollyparton .toc-video__badge::before {
  content: '\25B6\00A0\00A0'; /* ▶ + breathing room */
  font-size: 9px;
  font-style: normal;
  position: relative;
  top: -1px;
}
#toc-cover-dollyparton .toc-video--placeholder .toc-video__badge,
#toc-cover-dollyparton .toc-video__badge.is-hidden {
  display: none;
}

/* Loading shimmer — soft diagonal sweep while the iframe loads. */
@keyframes toc-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}
#toc-cover-dollyparton .toc-tv__static {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: toc-shimmer 2.2s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
#toc-cover-dollyparton .toc-video__frame:hover .toc-tv__static,
#toc-cover-dollyparton .toc-tv__static.is-off {
  opacity: 0;
}

/* Spinning wagon wheel — peeks from the top-right corner, half clipped by
   the section's overflow: hidden. Real photo asset (transparent-bg wagon
   wheel, hosted alongside the other template assets) instead of the old
   CSS-gradient approximation — a wheel's dimensional wood spokes/grain/
   shading are a shape pure CSS gradients only ever faked, per the original
   build notes. drop-shadow (not box-shadow) since the PNG has transparent
   gaps between spokes that a box-shadow would square off. */
#toc-cover-dollyparton .toc-video__wheel {
  position: absolute;
  top: clamp(20px, 3cqi, 60px);
  right: clamp(-70px, -7cqi, -28px);
  width: clamp(240px, 42cqi, 380px);
  aspect-ratio: 1;
  background-image: url('https://s3.amazonaws.com/Taste-of-Country/Digital%20Cover%20Template/images/wagon-wheel.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,0.45));
  z-index: 0;
  pointer-events: none;
  animation: toc-wheel-spin 40s linear infinite;
}
@keyframes toc-wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-video__wheel {
    width: clamp(130px, 34cqi, 200px);
    top: clamp(135px, 32cqi, 210px);
    right: clamp(-30px, -4cqi, -10px);
  }
}

/* ---------- PODCAST EMBED — RETRO RADIO ---------- */
#toc-cover-dollyparton .toc-podcast {
  position: relative;
  background: var(--toc-pink);
  color: var(--paper);
  padding: clamp(48px, 7cqi, 80px) clamp(20px, 5cqi, 48px);
  overflow: hidden;
}
#toc-cover-dollyparton .toc-podcast::before {
  display: none;
}
#toc-cover-dollyparton .toc-podcast__inner {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

/* Podcast player card — "marquee bar" treatment. Reuses the same visual
   language as .toc-masthead (dark ink strip, italic nameplate, blue
   bottom rule) as its header, so this section reads as an intentional
   variation on a pattern already established in the cover rather than
   a one-off widget style. Body panel below is plain whitewashed white. */
#toc-cover-dollyparton .toc-podcast-player {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}
#toc-cover-dollyparton .toc-podcast-player__marquee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(18px, 4cqi, 30px);
  background: var(--ink);
  border-bottom: 2px solid var(--toc-pink);
}
#toc-cover-dollyparton .toc-podcast-player__nameplate {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(7px, 1.2cqi, 11px);
  min-width: 0;
}
#toc-cover-dollyparton .toc-podcast-player__brand,
#toc-cover-dollyparton .toc-podcast-player__kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(15px, 2.6cqi, 19px);
  line-height: 1;
  white-space: nowrap;
}
#toc-cover-dollyparton .toc-podcast-player__brand { color: var(--toc-pink); }
#toc-cover-dollyparton .toc-podcast-player__kicker {
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
}
#toc-cover-dollyparton .toc-podcast-player__tag {
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(10px, 1.4cqi, 12px);
  font-weight: 600;
  color: var(--paper-dim);
  white-space: nowrap;
}
#toc-cover-dollyparton .toc-podcast-player__body {
  background: var(--hot-white);
  padding: clamp(24px, 4cqi, 34px) clamp(20px, 4cqi, 32px);
}
#toc-cover-dollyparton .toc-podcast-player__slot {
  min-width: 0;
}

/* --- Townsquare .ondemand-podcast-player inside radio ---
   Transparent background, no red header — content sits directly on radio surface */

#toc-cover-dollyparton .ondemand-podcast-player {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  transform: none !important;
  /* Fallback for any text this stylesheet doesn't specifically target below
     — this widget now sits on a white card (.toc-podcast-player), not the
     old dark radio body, so anything left at its original near-white
     default would be invisible. */
  color: var(--ink) !important;
}

/* Hide the red banner header entirely */
#toc-cover-dollyparton .ondemand-podcast-player .playlist-title {
  display: none !important;
}

#toc-cover-dollyparton .ondemand-podcast-player .player {
  background: transparent !important;
}
#toc-cover-dollyparton .ondemand-podcast-player .playlist-wrapper {
  background: transparent !important;
}
#toc-cover-dollyparton .ondemand-podcast-player .playlist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
#toc-cover-dollyparton .ondemand-podcast-player .playlist li {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
}
#toc-cover-dollyparton .ondemand-podcast-player .info {
  background: transparent !important;
}

#toc-cover-dollyparton .ondemand-podcast-player .track-meta .date,
#toc-cover-dollyparton .ondemand-podcast-player .track-meta .dur-min {
  color: var(--toc-pink) !important;
  font-family: var(--font-accent) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

#toc-cover-dollyparton .ondemand-podcast-player h3.title {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: none !important;
  font-size: clamp(16px, 2.8cqi, 22px) !important;
  line-height: 1.2 !important;
  margin: 4px 0 6px !important;
}

#toc-cover-dollyparton .ondemand-podcast-player .description {
  color: rgba(27,39,51,0.65) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#toc-cover-dollyparton .ondemand-podcast-player .play-icon {
  width: 44px !important;
  height: 44px !important;
  cursor: pointer;
  border-radius: 50%;
  background: var(--toc-pink);
  transition: transform 0.15s ease, background 0.15s ease !important;
}
#toc-cover-dollyparton .ondemand-podcast-player .play-icon .circle,
#toc-cover-dollyparton .ondemand-podcast-player .play-icon circle {
  fill: var(--toc-pink) !important;
}
#toc-cover-dollyparton .ondemand-podcast-player .play-icon .inner,
#toc-cover-dollyparton .ondemand-podcast-player .play-icon path,
#toc-cover-dollyparton .ondemand-podcast-player .play-icon polygon {
  fill: #fff !important;
}
#toc-cover-dollyparton .ondemand-podcast-player .play-icon:hover {
  transform: scale(1.1) !important;
  background: var(--toc-pink-deep);
}
#toc-cover-dollyparton .ondemand-podcast-player .play-icon:hover .circle {
  fill: var(--toc-pink-deep) !important;
}

#toc-cover-dollyparton .toc-podcast__fallback {
  font-size: 14px;
  color: var(--ink);
  background: rgba(0,0,0,0.05);
  border: 1px dashed rgba(0,0,0,0.2);
  padding: 16px;
  border-radius: 4px;
  text-align: left;
}
#toc-cover-dollyparton .toc-podcast__fallback code {
  background: rgba(0,0,0,0.08);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ---------- PULL QUOTES ---------- */
#toc-cover-dollyparton .toc-quote {
  position: relative;
  padding: clamp(48px, 8cqi, 96px) clamp(20px, 5cqi, 48px);
  overflow: hidden;
  text-align: center;
}
/* Highlight quote — text is immediately readable on a dark stage; a pink
   highlighter swatch sweeps across the marked phrase as you scroll in. */
#toc-cover-dollyparton .toc-quote--highlight {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding-top: clamp(48px, 7cqi, 88px);
  padding-bottom: clamp(48px, 7cqi, 88px);
}
#toc-cover-dollyparton .toc-quote--highlight .toc-quote__mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 10cqi, 96px);
  line-height: 0.5;
  color: var(--toc-pink);
  margin: 0 auto 16px;
  user-select: none;
  font-style: italic;
}
#toc-cover-dollyparton .toc-quote--highlight .toc-quote__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(24px, 5.5cqi, 44px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 auto 20px;
  text-transform: none;
  max-width: 88%;
}
#toc-cover-dollyparton .toc-hl {
  --hl-w: 0%;
  font-weight: inherit;
  font-style: inherit;
  background:
    linear-gradient(120deg, var(--toc-pink) 0%, var(--toc-pink-deep) 100%)
    no-repeat;
  background-size: var(--hl-w) 100%;
  background-position: 0 75%;
  color: inherit;
  padding: 0 0.1em;
  transition: background-size 0.05s linear; /* GSAP drives --hl-w */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Framed quote — calm card on the whitewashed shiplap texture. Replaces the
   base template's "typewriter" style, which read too retro/office for this
   brand's modern-farmhouse look. No motion beyond the standard fade/rise
   (.toc-quote__text uses data-reveal, same as body paragraphs). */
#toc-cover-dollyparton .toc-quote--framed {
  background: var(--paper-dim);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(27,39,51,0.08);
  border-bottom: 1px solid rgba(27,39,51,0.08);
}
#toc-cover-dollyparton .toc-quote--framed::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--paper-texture);
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
#toc-cover-dollyparton .toc-quote--framed .toc-quote__card {
  position: relative;
  background: var(--hot-white);
  border: 1px solid var(--toc-pink);
  padding: clamp(32px, 6cqi, 56px) clamp(28px, 6cqi, 64px);
  max-width: 720px;
  width: min(92%, 720px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}
#toc-cover-dollyparton .toc-quote--framed .toc-quote__mark {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 7cqi, 60px);
  line-height: 1;
  color: var(--toc-pink);
  margin-bottom: 4px;
}
#toc-cover-dollyparton .toc-quote--framed .toc-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 4cqi, 34px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 16px;
}
#toc-cover-dollyparton .toc-quote--framed .toc-quote__attr {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(16px, 2.2cqi, 20px);
  color: var(--toc-pink-deep);
}

/* Overlay quote — full-bleed cover photo with the quote laid over it, same
   structural pattern as ~/xxl-cover's .toc-quote--overlay (bg layer + scrim +
   centered fg), restyled to this brand's italic serif + slate-blue palette
   instead of XXL's uppercase display type + holo-gradient accents. */
#toc-cover-dollyparton .toc-quote--overlay {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: clamp(380px, 55cqi, 520px);
  background: var(--ink);
  isolation: isolate;
}
#toc-cover-dollyparton .toc-overlay__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
#toc-cover-dollyparton .toc-overlay__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27,39,51,0.35) 0%, rgba(27,39,51,0.58) 55%, rgba(27,39,51,0.88) 100%);
}
#toc-cover-dollyparton .toc-overlay__fg {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(44px, 6cqi, 84px) clamp(20px, 5cqi, 48px);
}
#toc-cover-dollyparton .toc-overlay__mark {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 7cqi, 60px);
  line-height: 1;
  color: var(--paper);
  opacity: 0.75;
  margin-bottom: 4px;
}
#toc-cover-dollyparton .toc-overlay__text {
  margin: 0 0 16px;
  max-width: 780px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 5cqi, 46px);
  line-height: 1.2;
  color: var(--paper);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
#toc-cover-dollyparton .toc-overlay__attr {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(16px, 2.2cqi, 20px);
  color: var(--paper);
  opacity: 0.9;
}
#toc-cover-dollyparton .toc-overlay__text[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}

#toc-cover-dollyparton .toc-quote--ransom {
  background: var(--ink);
  color: var(--paper);
}
#toc-cover-dollyparton .toc-quote--ransom .toc-quote__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 7cqi, 64px);
  line-height: 0.95;
  text-transform: uppercase;
  max-width: 100%;
  margin: 0 auto;
}
#toc-cover-dollyparton .toc-quote--ransom .toc-quote__text .w {
  display: inline-block;
  margin: 0.06em 0.1em;
  padding: 0 0.15em;
  transform: rotate(var(--r, 0deg));
}
/* On the dark stage, the "blank" words read in paper; the colored swatches stay punchy. */
#toc-cover-dollyparton .toc-quote--ransom .toc-quote__text .w:nth-child(3n)   { background: var(--toc-pink); color: var(--paper); --r: -2deg; }
#toc-cover-dollyparton .toc-quote--ransom .toc-quote__text .w:nth-child(5n+1) { background: var(--paper); color: var(--ink);   --r: 1.5deg; }
#toc-cover-dollyparton .toc-quote--ransom .toc-quote__text .w:nth-child(7n+2) { background: var(--toc-pink); color: var(--paper); --r: -1deg; }

#toc-cover-dollyparton .toc-quote--ransom .toc-quote__attr { color: var(--paper); }

/* Mobile cleanup: gentler rotations + tighter type so a long ransom quote
   doesn't break the column. */
@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-quote--ransom .toc-quote__text {
    font-size: clamp(22px, 6.4cqi, 32px);
    line-height: 1.15;
  }
  #toc-cover-dollyparton .toc-quote--ransom .toc-quote__text .w {
    margin: 0.05em 0.08em;
    padding: 0 0.12em;
  }
  #toc-cover-dollyparton .toc-quote--ransom .toc-quote__text .w:nth-child(3n)   { --r: -1.25deg; }
  #toc-cover-dollyparton .toc-quote--ransom .toc-quote__text .w:nth-child(5n+1) { --r: 1deg; }
  #toc-cover-dollyparton .toc-quote--ransom .toc-quote__text .w:nth-child(7n+2) { --r: -0.75deg; }
}

#toc-cover-dollyparton .toc-quote--huge {
  background: var(--toc-pink-deep);
  color: var(--paper);
}
#toc-cover-dollyparton .toc-quote--huge .toc-quote__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 9cqi, 80px);
  line-height: 0.95;
  text-transform: uppercase;
  max-width: 100%;
  margin: 0 auto;
}

#toc-cover-dollyparton .toc-quote__attr {
  display: block;
  margin-top: 28px;
  font-family: var(--font-accent);
  font-size: 22px;
  letter-spacing: 0.05em;
  transform: rotate(-2deg);
}
/* Marquee was removed; ransom now sits on ink (handled by its own rule above). */

/* ---------- MARKER QUOTE (handwritten manifesto on red) ---------- */
#toc-cover-dollyparton .toc-quote--marker {
  background: var(--toc-pink-deep);
  color: var(--paper);
  position: relative;
}
#toc-cover-dollyparton .toc-quote--marker::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.18), transparent 45%);
  pointer-events: none;
}
#toc-cover-dollyparton .toc-quote--marker .toc-quote__text {
  position: relative;
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(26px, 5.4cqi, 52px);
  line-height: 1.22;
  color: var(--hot-white);
  max-width: 80%;
  margin: 0 auto;
  padding-bottom: 14px;
  display: block;
}
#toc-cover-dollyparton .toc-quote--marker .toc-quote__marker-text {
  display: inline-block;
  transform: rotate(-1.25deg);
  transform-origin: left center;
}
#toc-cover-dollyparton .toc-quote--marker .toc-quote__underline {
  display: block;
  width: min(560px, 92%);
  height: 26px;
  margin: 14px auto 0;
  overflow: visible;
}
#toc-cover-dollyparton .toc-quote--marker .toc-quote__underline path {
  fill: none;
  stroke: var(--paper);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35));
}
#toc-cover-dollyparton .toc-quote--marker .toc-quote__attr {
  color: var(--paper);
}
@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-quote--marker .toc-quote__text {
    font-size: clamp(24px, 7.8cqi, 40px);
    max-width: 92%;
  }
  #toc-cover-dollyparton .toc-quote--marker .toc-quote__underline path {
    stroke-width: 4;
  }
}

/* ---------- TAPED PHOTO ---------- */
#toc-cover-dollyparton .toc-photo {
  position: relative;
  max-width: 720px;
  margin: 60px auto;
  padding: 18px 18px 64px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  transform: rotate(-1.5deg);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
#toc-cover-dollyparton .toc-photo:hover { transform: rotate(0.5deg) scale(1.02); }
#toc-cover-dollyparton .toc-photo::before {
  content: '';
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 120px; height: 28px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#toc-cover-dollyparton .toc-photo img {
  width: 100%;
  filter: contrast(1.05) saturate(1.1);
}
#toc-cover-dollyparton .toc-photo figcaption {
  position: absolute;
  bottom: 12px; left: 18px; right: 18px;
  font-family: var(--font-accent);
  font-size: 16px;
}

/* ---------- PHOTO CREDIT NOTE ---------- */
#toc-cover-dollyparton .toc-photo-credit {
  position: relative;
  background: var(--paper);
  padding: clamp(40px, 6cqi, 72px) clamp(20px, 6cqi, 48px);
  text-align: center;
}
#toc-cover-dollyparton .toc-photo-credit::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--paper-texture);
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
#toc-cover-dollyparton .toc-photo-credit__text {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: clamp(18px, 2.4cqi, 21px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.95;
}
#toc-cover-dollyparton .toc-photo-credit__text a {
  color: var(--toc-pink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
#toc-cover-dollyparton .toc-photo-credit__text a:hover {
  color: var(--toc-pink-deep);
}

/* ---------- GALLERY ---------- */
#toc-cover-dollyparton .toc-gallery {
  position: relative;
  background: var(--ink);
  padding: clamp(56px, 9cqi, 120px) clamp(20px, 5cqi, 48px);
  overflow: hidden;
}
#toc-cover-dollyparton .toc-gallery__header {
  text-align: center;
  margin-bottom: clamp(32px, 5cqi, 56px);
}
#toc-cover-dollyparton .toc-gallery__kicker {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: clamp(16px, 2.4cqi, 22px);
  color: var(--toc-pink);
  transform: rotate(-1.5deg);
  margin-bottom: 12px;
}
#toc-cover-dollyparton .toc-gallery__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 8cqi, 72px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: var(--paper);
}
#toc-cover-dollyparton .toc-gallery__heading::after {
  content: '';
  display: block;
  width: 80px; height: 6px;
  background: var(--toc-pink);
  margin: 16px auto 0;
}

/* Polaroid pile — overlapping tilted frames with hover lift. */
#toc-cover-dollyparton .toc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 4cqi, 40px);
  max-width: 100%;
  margin: 0 auto;
}
/* 2-col layout: if total item count is odd, center the last orphan
   in the row it sits alone in. */
@container lwcover (min-width: 421px) and (max-width: 639.98px) {
  #toc-cover-dollyparton .toc-gallery__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(10px, 2cqi, 20px));
  }
}
/* 3-col layout: use a 6-track grid and have items span 2 tracks. That
   lets us shift the last row's orphans inward so 1 orphan centers in
   tracks 3–4, and 2 orphans center as a pair in tracks 2–3 and 4–5. */
@container lwcover (min-width: 640px) {
  #toc-cover-dollyparton .toc-gallery__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  #toc-cover-dollyparton .toc-gallery__item {
    grid-column: span 2;
  }
  /* 1 orphan (total % 3 == 1) — center the lone last item. */
  #toc-cover-dollyparton .toc-gallery__item:last-child:nth-child(3n + 1) {
    grid-column: 3 / span 2;
  }
  /* 2 orphans (total % 3 == 2) — center the pair. */
  #toc-cover-dollyparton .toc-gallery__item:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
  }
  #toc-cover-dollyparton .toc-gallery__item:last-child:nth-child(3n + 2) {
    grid-column: 4 / span 2;
  }
}
@container lwcover (max-width: 420px) {
  #toc-cover-dollyparton .toc-gallery__grid {
    grid-template-columns: 1fr;
  }
}
#toc-cover-dollyparton .toc-gallery__item {
  position: relative;
  margin: 0;
  padding: 14px 14px 40px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 18px 36px rgba(0,0,0,0.45);
  transform: rotate(var(--r, 0deg));
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s, z-index 0s;
  cursor: pointer;
  z-index: 1;
}
#toc-cover-dollyparton .toc-gallery__item::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 90px; height: 22px;
  transform: translateX(-50%) rotate(calc(var(--r, 0deg) * -0.5));
  background: rgba(255,255,255,0.6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#toc-cover-dollyparton .toc-gallery__item:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 32px 60px rgba(0,0,0,0.6);
  z-index: 5;
}
#toc-cover-dollyparton .toc-gallery__item img:not(.toc-photo-logo) {
  width: 100%;
  aspect-ratio: 3 / 3;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.1);
  display: block;
}
#toc-cover-dollyparton .toc-gallery__item figcaption {
  margin: 10px 4px 0;
  font-family: var(--font-accent);
  font-size: clamp(15px, 2.5cqi, 20px);
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
}

#toc-cover-dollyparton .toc-gallery__credit {
  margin: clamp(32px, 5cqi, 56px) 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
#toc-cover-dollyparton .toc-gallery__credit a {
  color: var(--toc-pink);
  text-decoration: none;
}

/* In-chapter embed wrapper — used when a merch promo is dropped between two
   chapter paragraphs. Escapes the chapter's horizontal padding so the embed
   reads full-bleed across the cover component. */
#toc-cover-dollyparton .toc-chapter__break {
  /* Full-bleed inline embed (merchPromo banner, inline huge pull-quote).
     Escapes the chapter's horizontal padding via negative margins, and
     clears any floated chapter photo so the embed always spans edge-to-edge
     instead of colliding with the polaroid on desktop. */
  clear: both;
  margin-top: clamp(32px, 5cqi, 56px);
  margin-bottom: clamp(32px, 5cqi, 56px);
  margin-left: calc(-1 * clamp(20px, 5cqi, 48px));
  margin-right: calc(-1 * clamp(20px, 5cqi, 48px));
}
#toc-cover-dollyparton .toc-chapter__break .toc-merch-promo {
  padding-top: clamp(22px, 3.5cqi, 36px);
  padding-bottom: clamp(22px, 3.5cqi, 36px);
}
@container lwcover (min-width: 640px) {
  #toc-cover-dollyparton .toc-chapter__break {
    /* extra -220px on the left to swallow the chapter rail column */
    margin-left: calc(-1 * clamp(20px, 5cqi, 48px) - 220px);
  }
}

/* Inline pull-quote — sits between two paragraphs inside a chapter,
   styled like a magazine pull-out with red rules above and below. */
#toc-cover-dollyparton .toc-chapter__pullquote {
  position: relative;
  margin: clamp(28px, 4cqi, 44px) 0;
  padding: clamp(20px, 3cqi, 32px) 4px;
  text-align: center;
  border-top: 3px solid var(--toc-pink);
  border-bottom: 3px solid var(--toc-pink);
}
#toc-cover-dollyparton .toc-chapter__pullquote-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(22px, 3.6cqi, 34px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--toc-pink-deep);
  margin: 0;
}
#toc-cover-dollyparton .toc-chapter__pullquote-attr {
  display: block;
  margin-top: 12px;
  font-family: var(--font-accent);
  font-size: clamp(13px, 1.6cqi, 16px);
  color: var(--ink);
  opacity: 0.7;
  letter-spacing: 0.04em;
  transform: rotate(-1deg);
}
@container lwcover (max-width: 560px) {
  #toc-cover-dollyparton .toc-chapter__pullquote {
    padding: 16px 2px;
  }
  #toc-cover-dollyparton .toc-chapter__pullquote-text {
    font-size: clamp(20px, 5.4cqi, 30px);
  }
}

/* ---------- MID-ARTICLE PROMO BANNER ---------- */
#toc-cover-dollyparton .toc-merch-promo {
  position: relative;
  background: var(--toc-pink);
  color: var(--paper);
  padding: clamp(36px, 6cqi, 64px) clamp(20px, 5cqi, 48px);
  overflow: hidden;
}
#toc-cover-dollyparton .toc-merch-promo::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 12px, transparent 12px 24px);
  pointer-events: none;
}
#toc-cover-dollyparton .toc-merch-promo__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5cqi, 24px);
  align-items: center;
  text-align: center;
}
@container lwcover (min-width: 640px) {
  #toc-cover-dollyparton .toc-merch-promo__inner {
    grid-template-columns: minmax(180px, 240px) 1fr;
    text-align: left;
    gap: clamp(24px, 3.5cqi, 36px);
  }
}
#toc-cover-dollyparton .toc-merch-promo__art {
  display: block;
  position: relative;
  width: clamp(120px, 30cqi, 170px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: var(--ink);
  box-shadow: 0 14px 28px rgba(0,0,0,0.4), 0 0 0 2px var(--paper);
  transform: rotate(-2deg);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
  text-decoration: none;
}
@container lwcover (min-width: 640px) {
  #toc-cover-dollyparton .toc-merch-promo__art {
    width: 100%;
    max-width: 240px;
  }
}
#toc-cover-dollyparton .toc-merch-promo__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (hover: hover) {
  #toc-cover-dollyparton .toc-merch-promo__art:hover {
    transform: rotate(0deg) scale(1.03);
  }
}
#toc-cover-dollyparton .toc-merch-promo__body {
  min-width: 0;
}
#toc-cover-dollyparton .toc-merch-promo__kicker {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: clamp(14px, 2cqi, 18px);
  color: var(--paper);
  margin-bottom: 4px;
  transform: rotate(-1.5deg);
}
#toc-cover-dollyparton .toc-merch-promo__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(24px, 4.6cqi, 40px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--paper);
}
#toc-cover-dollyparton .toc-merch-promo__blurb {
  font-size: clamp(14px, 1.8cqi, 16px);
  line-height: 1.45;
  margin: 0 0 clamp(14px, 2cqi, 20px);
  color: var(--paper);
  opacity: 0.92;
  max-width: 44ch;
  text-wrap: pretty; /* avoid lone-word orphans on the last line */
}
#toc-cover-dollyparton .toc-merch-promo__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  justify-content: center;
}
@container lwcover (min-width: 640px) {
  #toc-cover-dollyparton .toc-merch-promo__row {
    justify-content: flex-start;
  }
}
#toc-cover-dollyparton .toc-merch-promo__code {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(20px, 3cqi, 28px);
  letter-spacing: 0.06em;
  color: var(--toc-pink);
  background: var(--paper);
  padding: 10px 18px;
  border: 2px dashed var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
/* The merch CTA is a button-style anchor; it must NOT inherit the chapter
   body's underlined-link treatment when embedded inside a chapter. */
#toc-cover-dollyparton a.toc-merch-promo__cta,
#toc-cover-dollyparton a.toc-merch-promo__cta:hover {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--toc-pink);
  background: var(--paper);
  padding: 14px 22px;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
#toc-cover-dollyparton .toc-merch-promo__cta-arrow {
  display: inline-block;
  transition: transform 0.25s;
  text-decoration: none;
}
/* Also strip underline from the album-art anchor wrapping the image. */
#toc-cover-dollyparton a.toc-merch-promo__art,
#toc-cover-dollyparton a.toc-merch-promo__art:hover,
#toc-cover-dollyparton a.toc-merch__art,
#toc-cover-dollyparton a.toc-merch__art:hover {
  text-decoration: none;
}
@media (hover: hover) {
  #toc-cover-dollyparton .toc-merch-promo__cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
  }
  #toc-cover-dollyparton .toc-merch-promo__cta:hover .toc-merch-promo__cta-arrow {
    transform: translateX(4px);
  }
}

/* ---------- MERCH / ALBUM CTA ---------- */
#toc-cover-dollyparton .toc-merch {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  /* Bottom padding tightened — this is the cover's last section, directly
     followed by the native photo gallery below; the old symmetric padding
     plus that section's own top padding left a large empty gap. */
  padding: clamp(48px, 7cqi, 80px) clamp(20px, 5cqi, 48px) 24px;
  overflow: hidden;
}
#toc-cover-dollyparton .toc-merch::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(225,38,28,0.18) 0%, transparent 55%);
  pointer-events: none;
}
#toc-cover-dollyparton .toc-merch__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4cqi, 48px);
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
@container lwcover (min-width: 640px) {
  #toc-cover-dollyparton .toc-merch__inner {
    grid-template-columns: minmax(180px, 280px) 1fr;
    text-align: left;
  }
}
#toc-cover-dollyparton .toc-merch__art {
  display: block;
  position: relative;
  width: clamp(180px, 40cqi, 280px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  transform: rotate(-2deg);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
  text-decoration: none;
}
#toc-cover-dollyparton .toc-merch__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#toc-cover-dollyparton .toc-merch__body {
  min-width: 0;
}
#toc-cover-dollyparton .toc-merch__kicker {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: clamp(14px, 2cqi, 20px);
  color: var(--toc-pink);
  margin-bottom: 8px;
  transform: rotate(-1.5deg);
}
#toc-cover-dollyparton .toc-merch__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(32px, 7cqi, 64px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--paper);
}
#toc-cover-dollyparton .toc-merch__blurb {
  font-size: clamp(15px, 2.1cqi, 18px);
  line-height: 1.6;
  margin: 0 0 clamp(20px, 3cqi, 28px);
  color: var(--paper-dim);
}
#toc-cover-dollyparton .toc-merch__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--paper);
  background: var(--toc-pink);
  padding: 14px 24px;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--paper);
  transition: transform 0.2s, box-shadow 0.2s;
}
#toc-cover-dollyparton .toc-merch__cta-arrow {
  display: inline-block;
  transition: transform 0.25s;
}
@media (hover: hover) {
  #toc-cover-dollyparton .toc-merch__art:hover {
    transform: rotate(0deg) scale(1.02);
  }
  #toc-cover-dollyparton .toc-merch__cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--paper);
  }
  #toc-cover-dollyparton .toc-merch__cta:hover .toc-merch__cta-arrow {
    transform: translateX(4px);
  }
}

/* ---------- Hover micro-interactions ---------- */
#toc-cover-dollyparton .toc-glitch {
  display: inline-block;
  position: relative;
  transition: text-shadow 0.15s;
}
#toc-cover-dollyparton .toc-glitch:hover {
  text-shadow:
    2px 0 0 var(--toc-pink),
    -2px 0 0 #00f2ff,
    0 0 12px rgba(255,26,107,0.4);
  animation: toc-shake 0.3s linear infinite;
}
@keyframes toc-shake {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(-1px, 1px); }
  50%     { transform: translate(1px, -1px); }
  75%     { transform: translate(-1px, -1px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #toc-cover-dollyparton *,
  #toc-cover-dollyparton *::before,
  #toc-cover-dollyparton *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #toc-cover-dollyparton .toc-dek p,
  #toc-cover-dollyparton .toc-chapter p {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
 * Host page safety — prevent horizontal scroll caused by anything the cover
 * story renders. Scoped via :has() so it only activates on pages that
 * actually contain the component.
 * ========================================================================== */

html:has(#toc-cover-dollyparton),
body:has(#toc-cover-dollyparton) {
  overflow-x: clip;
  max-width: 100%;
}

#toc-cover-dollyparton iframe,
#toc-cover-dollyparton video,
#toc-cover-dollyparton embed,
#toc-cover-dollyparton object {
  max-width: 100%;
}

/* ==========================================================================
 * Townsquare WordPress Specific Styles
 * DO NOT REMOVE — required overrides for the host theme on Townsquare blogs.
 * These rules intentionally target the WP theme (not #toc-cover-dollyparton) so
 * they fall outside the component's scope.
 * ========================================================================== */

section, .divider, .footer-inner {
  z-index: 0;
}

.main-content > .wrapper.post-wrapper .content {
  padding: 0px;
}

.page-header, h1.article, h2.article {
  display: none;
}

.mobile .post .content-wrap, .mobile .main-content > .wrapper.post-wrapper .content, body {
  padding: 0px;
}

.mainContent article {
  background-color: unset;
}

.main-aside.carbon-post-sidebar {
  display: none;
}

.site-content main#main-content {
  border-right: 0;
}

html.layout-clean .container-inner {
  padding: 0px;
}

/* Keep the podcast source div hidden until our JS moves its contents */
#toc-podcast-source {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================================
 * Townsquare Mobile App Specific Styles
 * DO NOT REMOVE — required overrides for the Townsquare mobile app webview.
 * The app wraps content in .mainContent (not .pod-content). It always renders
 * at "mobile" look regardless of webview width. The component's own CSS is
 * scoped to #toc-cover-dollyparton and uses container queries (cqi), so it
 * auto-adapts. These rules handle the app's host page environment.
 *
 * See APP-CSS-HANDOFF.md for full documentation on dual-environment CSS.
 * ========================================================================== */

/* Reset the app's content wrapper padding so the component goes edge-to-edge */
.mainContent {
  padding: 0 !important;
}
.mainContent article {
  background-color: unset;
}

/* App view duplicates the lead image as a figure.article-thumbnail at the top
   of the article; the cover hero already serves that role, so hide the first
   one in the app only. The figure sits OUTSIDE .mainContent, so we scope to
   the html.toc-is-app class the cover JS adds when it detects the app webview. */
html.toc-is-app figure.article-thumbnail:first-of-type {
  display: none !important;
}

/* Overflow containment — same as the WP rules but without :has() fallback
   for older webview engines that may not support :has(). The WP :has() rules
   above also cover the app if :has() is supported; these are belt-and-suspenders. */
.mainContent {
  overflow-x: clip;
  max-width: 100%;
}

/* Force the component to fill the app wrapper */
.mainContent #toc-cover-dollyparton {
  margin: 0;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
}

/* Hide hovers in the app — touch devices get phantom hover on first tap.
   Wrap in @media (hover: hover) so only real pointer devices get hover effects. */
@media (hover: none) {
  #toc-cover-dollyparton .toc-gallery__item:hover {
    transform: rotate(var(--r, 0deg));
    box-shadow: 0 18px 36px rgba(0,0,0,0.45);
    z-index: 1;
  }
  #toc-cover-dollyparton .toc-chapter__photo:hover {
    transform: rotate(-2deg);
  }
  #toc-cover-dollyparton .toc-glitch:hover {
    text-shadow: none;
    animation: none;
  }
}

/* The TV should always be full-width in the app */
.mainContent #toc-cover-dollyparton .toc-tv {
  max-width: 100%;
}

/* =========================================================================
 * Native "Carbon Gallery" widget restyle
 *
 * Townsquare's built-in photo-gallery shortcode renders its own markup
 * (.photogallery-wrapper > .photogallery-container > .photogallery-item)
 * as a separate block AFTER this Custom HTML embed — outside
 * #toc-cover-dollyparton, so none of it can be scoped under that ID. These
 * rules target the widget's real global class names directly instead.
 * Safe to do unscoped: this stylesheet is only <link>ed on this specific
 * post, not loaded site-wide, so it can't leak onto other posts' galleries.
 * Brand tokens are hardcoded here (not var()) since the CSS custom
 * properties declared on #toc-cover-dollyparton aren't inherited by this
 * sibling markup. Default theme layout was unstyled block-stacked
 * full-width images (~18,000px tall for 23 photos, no max-width at all) —
 * kept the stacked single-column layout (Bryan's call after seeing a grid
 * version) but constrained it to a readable column width with side padding
 * so each photo isn't stretched edge-to-edge on a wide viewport.
 * ========================================================================= */
.photogallery-wrapper {
  position: relative;
  background: #f7f5f1;
  /* Top padding tightened — this section sits directly below the cover's
     merch CTA (dark ink background); a smaller top gap here plus the
     merch section's own tightened bottom padding closes the large empty
     stretch that used to sit between them. */
  padding: 24px 20px clamp(48px, 7vw, 96px);
}
/* Same shiplap paper texture as the rest of the cover (--paper-texture on
   #toc-cover-dollyparton) — copied as a literal value since that custom
   property isn't inherited by this sibling markup. */
.photogallery-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0.045) 0px, rgba(0,0,0,0.045) 2px,
      rgba(255,255,255,0.25) 2px, rgba(255,255,255,0.25) 3px,
      transparent 3px, transparent 46px),
    radial-gradient(ellipse 60% 40% at 18% 20%, rgba(0,0,0,0.015), transparent 60%),
    radial-gradient(ellipse 50% 35% at 78% 55%, rgba(0,0,0,0.013), transparent 65%),
    radial-gradient(ellipse 55% 30% at 40% 88%, rgba(0,0,0,0.013), transparent 60%);
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.photogallery-title,
.photogallery-description,
.photogallery-credit,
.photogallery-container {
  position: relative;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.photogallery-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  line-height: 1.15 !important;
  color: #1b2733 !important;
  margin: 0 auto 16px !important;
}
.photogallery-description {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #1b2733 !important;
  margin: 0 auto 12px !important;
}
.photogallery-credit {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-style: italic;
  color: rgba(27, 39, 51, 0.55) !important;
  margin: 0 auto clamp(32px, 5vw, 48px) !important;
}
.photogallery-item {
  max-width: 100%;
  margin: 0 auto 32px !important;
  float: none !important;
  border-bottom: none !important;
}
.photogallery-item .frameme {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #ffffff;
  border: 6px solid #ffffff;
  box-shadow: 0 10px 24px rgba(27, 39, 51, 0.18);
  /* The site theme's own base.css sets a blanket
     ".post .entry article .pod-content figure { min-height: 441px }" for
     ALL figures in any article body — that floor was flattening every
     photo toward the same boxy ~441px height regardless of its true
     orientation (portrait photos never looked taller than landscape ones).
     Overriding it here so height is governed purely by each image's own
     aspect ratio. */
  min-height: 0 !important;
}
/* Mobile-only theme stylesheet also sets its own fixed aspect-ratio: 3/2
   directly on the figure itself (separate from the .theframe one already
   overridden above) via a much more specific selector — matched exactly
   here (same specificity, later in cascade order since this stylesheet
   loads after the theme's) so this wins instead. Without this, portrait
   photos rendered correctly inside .theframe but got clipped back down to
   a fixed landscape box by this outer figure constraint + overflow:hidden. */
.post .entry .photogallery-wrapper .photogallery-container figure.v3 {
  aspect-ratio: auto !important;
}
/* !important wins over whatever pixel width/height the widget's own JS may
   set inline (it measures its container to preserve aspect ratio) — forcing
   responsive 100%-wide/auto-height here keeps every photo at its natural,
   uncropped aspect ratio within our narrower constrained column. */
.photogallery-item .theframe {
  width: 100% !important;
  height: auto !important;
  position: static !important;
  /* The theme also sets a fixed aspect-ratio: 3/2 on .theframe (its own
     built-in crop window) — that, not min-height, was the actual reason
     every photo (including genuinely portrait ones) rendered at the same
     landscape-ish box: overflow:hidden was clipping anything taller than
     that fixed ratio to fit it. */
  aspect-ratio: auto !important;
}
.photogallery-item .theframe img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.photogallery-item .item-meta {
  padding: 10px 4px 0 !important;
}
.photogallery-item .caption {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgba(27, 39, 51, 0.55) !important;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 560px) {
  .photogallery-title,
  .photogallery-description,
  .photogallery-credit,
  .photogallery-container {
    padding-left: 12px;
    padding-right: 12px;
  }
}