/* ProductionPro show page.
   Values from the Phase 2 handoff (HANDOFF.md §2) and assets/design-tokens.json.
   Scoped to .ppshow-show so nothing here can leak into Blade or Elementor pages. */

.ppshow-show {
  --ink: rgb(80,83,87);
  --ink-muted: rgb(110,115,120);
  --ink-faint: rgb(170,176,182);
  --navy: rgb(59,96,128);
  --periwinkle: rgb(86,105,198);
  --orange: rgb(251,170,25);
  --orange-text: rgb(178,110,0);
  --sky: rgb(237,245,252);
  --band: #F6F9FC;
  --border: rgb(196,212,226);
  --border-soft: rgb(207,223,236);
  --radius-card: 20px;
  --radius-btn: 8px;
  --display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --content: 1248px;

  font-family: var(--body);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
}
.ppshow-show *, .ppshow-show *::before, .ppshow-show *::after { box-sizing: border-box; }
.ppshow-show h1, .ppshow-show h2, .ppshow-show h3, .ppshow-show h4 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); margin: 0;
}
.ppshow-show a { color: var(--navy); text-decoration: none; }
/* No gold on hover anywhere (HANDOFF 6, 8 Nov): the colour stays and an
   underline appears. Changed at source so a new link in a new wrapper can
   never pick the old behaviour back up. */
.ppshow-show a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ppshow-show a:focus-visible, .ppshow-show button:focus-visible {
  outline: 2px solid var(--periwinkle); outline-offset: 2px; border-radius: 4px;
}
.ppshow-show .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* one arrow, one class (HANDOFF §6) */
.ppshow-arrow {
  display: inline-block; width: .7em; height: .7em; margin-left: .35em;
  vertical-align: -0.02em; background: currentColor;
  -webkit-mask: var(--arrow) center/contain no-repeat; mask: var(--arrow) center/contain no-repeat;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ppshow-arrow--down { transform: rotate(90deg); }
.ppshow-arrow--up   { transform: rotate(-90deg); }

/* layout ------------------------------------------------------------------ */
.ppshow-show > * { max-width: var(--content); margin-inline: auto; padding-inline: 24px; }
.ppshow-section { padding-block: 48px; }
.ppshow-section + .ppshow-section { border-top: 1px solid var(--border-soft); }
.ppshow-section > h2 { font-size: 32px; line-height: 1.2; margin-bottom: 16px; }
.ppshow-section__intro { color: var(--ink-muted); margin: 0 0 24px; max-width: 70ch; }

.ppshow-breadcrumb { padding-top: 24px; font-size: 14px; color: var(--ink-muted); }
.ppshow-breadcrumb span { color: var(--ink); }

.ppshow-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--periwinkle); margin: 0 0 12px;
}

/* hero -------------------------------------------------------------------- */
.ppshow-hero { padding-block: 16px 40px; }
/* The hero is ONE column (HANDOFF §2.3, Alex 7 Nov). The logo is no longer a
   large image in a right-hand column: it sits in a tile directly left of the
   H1, the same tile as the finder and "Shows like" cards. */
.ppshow-hero__text { max-width: 660px; }
.ppshow-hero__titlerow { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.ppshow-hero__titlerow .ppshow-h1 { margin-bottom: 0; min-width: 0; }
.ppshow-hero__tile {
  flex: none; width: 120px; height: 120px; padding: 12px;
  border: 1px solid var(--border-soft); border-radius: 16px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* contain, never crop or stretch: the rendered ratio must equal the natural one */
.ppshow-hero__logo-img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

.ppshow-h1 { margin: 0 0 20px; }
.ppshow-h1__name { display: block; font-size: 60px; line-height: 1.05; font-style: italic; }
.ppshow-h1__sub  { display: block; font-size: 26px; line-height: 1.25; color: var(--periwinkle); margin-top: 8px; }

.ppshow-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.ppshow-chip {
  font-size: 13px; line-height: 1; padding: 8px 12px; border-radius: 999px;
  background: var(--sky); color: var(--navy); white-space: nowrap;
}

.ppshow-scriptline {
  background: rgba(251,170,25,.12); border: 1px solid rgba(251,170,25,.35);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 20px;
}
.ppshow-scriptline a { color: var(--orange-text); font-weight: 700; }


/* about + at a glance ------------------------------------------------------ */
.ppshow-credits { color: var(--ink-muted); font-size: 15px; margin: 0 0 16px; }
.ppshow-synopsis p { margin: 0 0 1em; max-width: 72ch; }
.ppshow-quiet { color: var(--ink-muted); font-size: 14px; margin: 16px 0 0; }

.ppshow-glance {
  margin: 28px 0 0; padding: 20px 24px; background: var(--sky);
  border-radius: var(--radius-card); display: grid; gap: 4px 32px; max-width: 760px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ppshow-glance__row { display: flex; gap: 12px; padding: 6px 0; align-items: baseline; }
.ppshow-glance dt { font-weight: 700; color: var(--navy); min-width: 11em; font-size: 14px; }
.ppshow-glance dd { margin: 0; font-size: 15px; }

/* characters + songs ------------------------------------------------------- */
.ppshow-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ppshow-table th, .ppshow-table td { text-align: left; padding: 12px 16px 12px 0; vertical-align: top; }
.ppshow-table thead th {
  font-family: var(--body); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-muted); border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.ppshow-table tbody tr { border-bottom: 1px solid var(--border-soft); }
.ppshow-table tbody th { font-weight: 700; color: var(--ink); }
.ppshow-none { color: var(--ink-faint); }

/* Collapsed rows stay in the HTML - hidden with CSS, never loaded later, so
   Google reads every character and song (HANDOFF §2.1). */
.ppshow-row--extra { display: none; }
.ppshow-section.is-open .ppshow-row--extra { display: table-row; }
.ppshow-songs .ppshow-row--extra { display: none; }
.ppshow-songs.is-open .ppshow-row--extra { display: list-item; }
.ppshow-about .ppshow-row--extra { display: none; }
.ppshow-about.is-open .ppshow-row--extra { display: block; }

.ppshow-songlist { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 48px; font-size: 15px; }
.ppshow-songlist li { margin: 0 0 6px; break-inside: avoid; }

.ppshow-toggle {
  margin-top: 20px; background: none; border: 0; padding: 10px 0; min-height: 44px;
  font: 700 15px/1 var(--body); color: var(--navy); cursor: pointer;
}
.ppshow-toggle:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* how to get the script ---------------------------------------------------- */
.ppshow-answer { font-size: 17px; max-width: 72ch; }
.ppshow-get-script h3 { font-size: 20px; margin: 32px 0 16px; }
.ppshow-licensing { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; }
.ppshow-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; }
.ppshow-card h4 { font-size: 18px; margin: 0 0 8px; }
.ppshow-card p { margin: 0 0 16px; color: var(--ink-muted); }
.ppshow-card--mine { border-color: var(--orange); background: rgba(251,170,25,.06); }

.ppshow-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 11px 18px; border-radius: var(--radius-btn);
  font: 700 15px/1.2 var(--body); cursor: pointer; border: 1px solid transparent;
  text-align: center;
}
/* Orange buttons are the live /theatre .pp-btn, value for value (HANDOFF §6,
   Alex 7 Nov): #FBAA19 on #1F3A52 text, which also clears 4.5:1 at 6.09:1.
   The hover rules are scoped through `a.` because `.ppshow-show a:hover`
   (which paints links orange) otherwise outranks a bare class+pseudo. */
/* `.ppshow-show a` sets font-family at 0,1,1, so a bare modifier class loses
   the family half of the shorthand and the button renders in Roboto. Scoping
   through .ppshow-show puts these at 0,2,0 and DM Sans sticks. */
.ppshow-show .ppshow-btn--orange {
  background: var(--orange); color: #1F3A52; border-color: var(--orange);
  font: 700 17px/1.2 var(--display); min-height: 52px; padding: 0 32px; border-radius: 8px;
}
.ppshow-show a.ppshow-btn--orange:hover,
.ppshow-btn--orange:hover { background: rgb(245,157,0); border-color: rgb(245,157,0); color: #1F3A52; }
.ppshow-btn--ghost { background: #fff; color: var(--navy); border-color: var(--border); }
.ppshow-show a.ppshow-btn--ghost:hover,
.ppshow-btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
/* The two outline share buttons, also straight from /theatre: 2px navy, 10px
   radius, 52px, DM Sans 700 16px, and no hover change. */
.ppshow-show .ppshow-btn--share {
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
  font: 700 16px/1.2 var(--display); min-height: 52px; padding: 0 16px; border-radius: 10px;
}
.ppshow-show a.ppshow-btn--share:hover,
.ppshow-btn--share:hover { color: var(--navy); border-color: var(--navy); background: #fff; }
.ppshow-icon { flex: none; }
.ppshow-share .ppshow-btn { gap: 8px; }
/* Full-width orange, then Text it / Copy link side by side (HANDOFF §2.5) */
.ppshow-share { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 460px; }
.ppshow-share__email { grid-column: 1 / -1; padding: 0 16px; }

/* keep browsing ------------------------------------------------------------ */
.ppshow-keep-browsing {
  background: var(--band); border-top: 1px solid var(--border-soft);
  max-width: none; padding-block: 48px;
}
.ppshow-keep-browsing > * { max-width: var(--content); margin-inline: auto; }
.ppshow-keep-browsing__head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.ppshow-keep-browsing h2 { font-size: 28px; }
.ppshow-keep-browsing h2 em { font-style: italic; }
.ppshow-similar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.ppshow-similar__item a {
  display: flex; flex-direction: column; gap: 4px; background: #fff; height: 100%;
  border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; min-height: 64px;
}
.ppshow-similar__item a:hover { border-color: var(--navy); }
.ppshow-similar__title { font-family: var(--display); font-weight: 700; color: var(--navy); }
.ppshow-similar__meta { font-size: 13px; color: var(--ink-muted); }

/* mobile ------------------------------------------------------------------- */
@media (max-width: 719px) {
  .ppshow-show > *, .ppshow-keep-browsing > * { padding-inline: 16px; }
  .ppshow-section { padding-block: 36px; }
  .ppshow-section > h2 { font-size: 24px; }
  /* The tile is 88px on phones with a 14px gap and a 14px radius (HANDOFF §2.3) */
  .ppshow-hero__titlerow { gap: 14px; }
  .ppshow-hero__tile { width: 88px; height: 88px; padding: 9px; border-radius: 14px; }
  .ppshow-h1__name { font-size: 40px; }
  .ppshow-h1__sub { font-size: 20px; }

  .ppshow-songlist { columns: 1; }
  .ppshow-glance { grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 16px; }
  .ppshow-glance__row { flex-direction: column; gap: 0; }
  .ppshow-glance dt { min-width: 0; }

  /* the characters table becomes a list (HANDOFF §2.7) */
  .ppshow-characters .ppshow-table, .ppshow-characters .ppshow-table tbody,
  .ppshow-characters .ppshow-table tr, .ppshow-characters .ppshow-table td,
  .ppshow-characters .ppshow-table th { display: block; width: auto; }
  .ppshow-characters .ppshow-table thead { display: none; }
  .ppshow-characters .ppshow-table tr { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
  .ppshow-characters .ppshow-table th { padding: 0; font-size: 16px; }
  .ppshow-characters .ppshow-table td { padding: 2px 0 0; font-size: 14px; color: var(--ink-muted); }

}

.ppshow-show .ppshow-act { font-size: 18px; margin: 24px 0 8px; color: var(--navy); }
.ppshow-show .ppshow-act:first-child { margin-top: 0; }

/* ===================================================================
 * Design-board pass (MainTrim). Appended after the base rules, so the
 * few selectors repeated here deliberately win over their earlier
 * versions: the glance card, the song columns and the toggle control.
 * =================================================================== */

/* --- hero: eyebrow row with the popularity badge ------------------ */
.ppshow-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.ppshow-hero__eyebrow .ppshow-eyebrow { margin: 0; }
.ppshow-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(251, 170, 25, 0.16);
	color: rgb(166, 109, 3);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.ppshow-badge__star {
	width: 11px;
	height: 11px;
	flex: none;
	background: rgb(251, 170, 25);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* The one-line hook, between the chips and the script line. */
.ppshow-hook {
	max-width: 560px;
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgb(125, 130, 135);
}

/* --- about: synopsis beside the At a glance card ------------------- */
.ppshow-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}
.ppshow-about__main { min-width: 0; max-width: 680px; }

.ppshow-glance-card {
	background: rgb(237, 245, 252);
	border-radius: 20px;
	padding: 24px;
}
.ppshow-glance-card h3 {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.3;
	color: rgb(80, 83, 87);
}
/* Repeats the base rule on purpose: inside the card the list is a
   two-column grid, with the long rows spanning both. */
.ppshow-glance {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
	margin: 0;
}
.ppshow-glance__row { display: block; grid-column: 1 / -1; margin: 0; padding: 0; }
.ppshow-glance-card .ppshow-glance dt { min-width: 0; font-weight: 500; }
.ppshow-glance__row--half { grid-column: span 1; }
.ppshow-glance dt {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgb(125, 130, 135);
}
.ppshow-glance dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: rgb(80, 83, 87);
}

/* The show name is italic in every section heading. */
.ppshow-show h2 em,
.ppshow-show h3 em { font-style: italic; }

.ppshow-credits {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: rgb(125, 130, 135);
}

/* The act-by-act synopsis only appears once the toggle is pressed. */
.ppshow-fullsyn { margin-top: 24px; }
.ppshow-fullsyn .ppshow-act:first-child { margin-top: 0; }

/* --- the expand control is a plain link, not a button ------------- */
.ppshow-show button.ppshow-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 16px 0 0;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: rgb(86, 105, 198);
	cursor: pointer;
}
.ppshow-show button.ppshow-toggle:hover { text-decoration: underline; color: rgb(86, 105, 198); }

/* --- characters: the table sits in a bordered white card ---------- */
.ppshow-tablecard {
	border: 1px solid rgb(207, 223, 236);
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
}
.ppshow-tablecard .ppshow-table { margin: 0; width: 100%; border-collapse: collapse; }
.ppshow-tablecard .ppshow-table th,
.ppshow-tablecard .ppshow-table td { padding: 14px 20px; }
.ppshow-tablecard .ppshow-table tbody tr + tr th,
.ppshow-tablecard .ppshow-table tbody tr + tr td { border-top: 1px solid rgb(237, 243, 249); }

/* --- songs: three columns, numbering running down each ------------ */
.ppshow-songlist {
	columns: 3;
	column-gap: 40px;
	margin: 0;
	padding-left: 20px;
}
.ppshow-songlist li {
	break-inside: avoid;
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.5;
}

/* --- "What is a digital script?" (HANDOFF 2.4) -------------------- */
.ppshow-digital { background: #fff; }
.ppshow-digital__top {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.ppshow-digital__text h2 { font-size: 32px; line-height: 1.25; margin: 8px 0 12px; }

/*
 * The laptop slot. ONE rule for every show: the image is fixed, and only
 * the logo and the credit line change. The numbers are locked by the
 * design board (LogoFit) - a tilt of 3.9deg and a lean of -8.8deg - and
 * are expressed in cqw so they track the image at any width.
 */
.ppshow-laptop {
	position: relative;
	container-type: inline-size;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}
.ppshow-laptop__img { display: block; width: 100%; height: auto; }
.ppshow-laptop__zone {
	position: absolute;
	left: 36%;
	top: 34.05%;
	width: 9.9cqw;
	height: 12.6cqw;
	transform-origin: 0 0;
	transform: matrix(1, 0.0682, -0.1548, 1, 0, 0);
	pointer-events: none;
}
.ppshow-laptop__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
}
.ppshow-laptop__logo {
	max-width: 84%;
	max-height: 63%;
	width: auto;
	height: auto;
	object-fit: contain;
	transform-origin: 50% 50%;
	transform: perspective(40cqw) rotateY(-4.5deg) matrix(1, -0.0035, -0.0017, 1, 0, 0);
}
.ppshow-laptop__credit {
	margin: 0.4cqw 0 0;
	font-family: Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
	font-weight: 500;
	font-size: 0.75cqw;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: #5F656B;
	transform: rotate(0.6deg);
}

.ppshow-devices { text-align: center; margin: 56px auto 0; max-width: 560px; }
.ppshow-devices__icons {
	display: flex;
	justify-content: center;
	gap: 16px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.ppshow-devices__icon { border: 2px solid rgb(116, 135, 215); border-radius: 4px; }
.ppshow-devices__icon--laptop { width: 34px; height: 22px; }
.ppshow-devices__icon--tablet { width: 20px; height: 26px; border-radius: 3px; }
.ppshow-devices__icon--phone  { width: 13px; height: 24px; border-radius: 3px; }
.ppshow-devices p:last-child { font-size: 15px; color: rgb(125, 130, 135); margin: 8px 0 0; }

.ppshow-quote {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: 620px;
	margin: 56px auto 0;
}
.ppshow-quote__face { width: 56px; height: 56px; border-radius: 999px; flex: none; }
.ppshow-quote blockquote { margin: 0; }
.ppshow-quote blockquote p {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 500;
	color: rgb(80, 83, 87);
}
.ppshow-quote figcaption { margin-top: 8px; font-size: 14px; color: rgb(125, 130, 135); }

.ppshow-more {
	border: 1px solid rgb(207, 223, 236);
	border-radius: 20px;
	padding: 32px;
	margin: 56px auto 0;
	max-width: 900px;
	text-align: center;
}
.ppshow-more h3 { margin: 8px auto 28px; max-width: 520px; font-size: 20px; line-height: 1.4; }
.ppshow-more__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
.ppshow-more__list li { display: flex; gap: 12px; align-items: flex-start; }
.ppshow-more__icon { width: 28px; height: 28px; border-radius: 999px; flex: none; }
.ppshow-more__icon--orange     { background: rgb(251, 170, 25); }
.ppshow-more__icon--periwinkle { background: rgb(116, 135, 215); }
.ppshow-more__icon--teal       { background: rgb(57, 194, 166); }
.ppshow-more__text { display: block; font-size: 14px; line-height: 1.5; color: rgb(125, 130, 135); }
.ppshow-more__text strong { display: block; color: rgb(80, 83, 87); margin-bottom: 2px; }
.ppshow-more__link { margin: 24px 0 0; }

.ppshow-directors {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 620px;
	margin: 48px auto 0;
}
.ppshow-directors__faces { width: 240px; height: auto; flex: none; }
.ppshow-directors p { margin: 0 0 4px; font-size: 15px; line-height: 1.5; }

/* --- keep browsing: the cards carry the show logo ----------------- */
.ppshow-similar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}
.ppshow-similar__item a {
	display: block;
	height: 100%;
	background: #fff;
	border: 1px solid rgb(207, 223, 236);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
}
.ppshow-similar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 110px;
	padding: 16px;
	background: #fff;
	border-bottom: 1px solid var(--border-soft);
}
.ppshow-similar__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ppshow-similar__title {
	display: block;
	padding: 14px 16px 0;
	font-size: 15px;
	font-weight: 500;
	color: rgb(80, 83, 87);
}
.ppshow-similar__meta {
	display: block;
	padding: 4px 16px 16px;
	font-size: 13px;
	line-height: 1.45;
	color: rgb(125, 130, 135);
}

/* --- narrow screens ----------------------------------------------- */
@media (max-width: 1023px) {
	.ppshow-about__grid { grid-template-columns: 1fr; gap: 32px; }
	.ppshow-digital__top { grid-template-columns: 1fr; gap: 24px; }
	.ppshow-similar { grid-template-columns: repeat(2, 1fr); }
	.ppshow-songlist { columns: 2; }
}
@media (max-width: 719px) {
	.ppshow-glance { grid-template-columns: 1fr 1fr; }
	.ppshow-songlist { columns: 1; }
	.ppshow-more__list { grid-template-columns: 1fr; }
	.ppshow-directors { flex-direction: column; align-items: flex-start; }
	.ppshow-digital__text h2 { font-size: 24px; }
	.ppshow-tablecard { overflow-x: auto; }
}

.ppshow-quote blockquote {
	border: 0;
	padding: 0;
	background: none;
	font-style: normal;
}
.ppshow-quote blockquote::before,
.ppshow-quote blockquote::after { content: none; }

/* ===================================================================
 * Full-bleed.
 *
 * Blade wraps page and single content in .grve-container, which is capped at
 * 1170px. That cap is narrower than the site header's own 1200px content box,
 * and - worse - it clipped the backgrounds that are meant to run to the window
 * edge: the Keep browsing band painted from 98px to 1268px instead of 0 to the
 * full width. Our pages set their own measure, so the container is released for
 * them and only for them.
 * =================================================================== */
.grve-container:has(> .ppshow-show),
.grve-container:has(> .ppfind) {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.ppshow-show, .ppfind { width: 100%; }

/* ===================================================================
 * TABLET AND PHONE (TABLET.md, HANDOFF 2.7)
 *
 * The show page has no separate tablet design: the desktop template
 * reflows. What changes is the order of two blocks - facts come before
 * the synopsis on anything narrower than the sidebar layout - and the
 * places where a desktop row would wrap badly.
 * =================================================================== */

/* --- 720-959px: the desktop template, reflowing --------------------- */
@media (max-width: 959px) {
	/* "Facts first on phones and tablets" (Alex, 7 Nov). wrap-reverse puts the
	   aside above the main column while the HTML order - and so the reading
	   order for search engines - stays synopsis first. */
	.ppshow-about__grid {
		display: flex;
		flex-wrap: wrap-reverse;
		gap: 28px;
	}
	.ppshow-about__main { flex: 1 1 100%; max-width: none; }
	.ppshow-glance-card { flex: 1 1 100%; }
	.ppshow-glance { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

	/* The characters table keeps its columns and scrolls inside the card
	   rather than squeezing the description to one word per line. */
	.ppshow-tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ppshow-tablescroll .ppshow-table { min-width: 640px; }

	.ppshow-similar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppshow-songlist { columns: 2; }
}

/* The "more included" features stack in ONE centred column whenever the card
   is narrower than 920px - never 2 + 1 (Alex, 7 Nov). */
@media (max-width: 991px) {
	.ppshow-more__list { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
	.ppshow-more__list li { justify-content: flex-start; }
}

@media (max-width: 767px) {
	.ppshow-licensing { grid-template-columns: 1fr; }
	.ppshow-card--mine .ppshow-btn--orange { width: 100%; }
}

/* --- below 720px: the phone board ----------------------------------- */
@media (max-width: 719px) {
	/* Hero rhythm. Alex, 7 Nov: it felt squished. 18px between hero blocks,
	   32px below the hero before the divider. */
	.ppshow-hero { padding-block: 8px 32px; }
	.ppshow-hero__eyebrow { margin-bottom: 18px; }
	.ppshow-h1, .ppshow-hero__titlerow { margin-bottom: 18px; }
	.ppshow-chips { margin-bottom: 18px; }
	.ppshow-hook { margin-top: 0; margin-bottom: 18px; }
	.ppshow-scriptline { margin-bottom: 0; }
	.ppshow-hero__text { max-width: 100%; }

	.ppshow-glance { grid-template-columns: 1fr 1fr; }
	.ppshow-glance__row--half { grid-column: span 1; }

	/* Characters become a list: name and vocal range on one line, then
	   "written as · description" underneath. The cells carry their own
	   classes because the columns are conditional. */
	.ppshow-tablecard { border: 0; border-radius: 0; }
	.ppshow-tablescroll { overflow: visible; }
	.ppshow-tablescroll .ppshow-table { min-width: 0; }
	.ppshow-characters .ppshow-table tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 2px 12px;
		padding: 12px 0;
		border-bottom: 1px solid var(--border-soft);
	}
	.ppshow-characters .ppshow-cell--name  { grid-column: 1; grid-row: 1; padding: 0; font-size: 16px; }
	.ppshow-characters .ppshow-cell--range { grid-column: 2; grid-row: 1; padding: 0; font-size: 14px; color: var(--ink-muted); text-align: right; white-space: nowrap; }
	.ppshow-characters .ppshow-cell--written,
	.ppshow-characters .ppshow-cell--desc  { grid-column: 1 / -1; padding: 0; font-size: 14px; color: var(--ink-muted); }
	/* Rule 5: a blank leaves nothing behind on a phone - no dash, and no stray
	   separator. Line 2 exists only if "written as" or the description does. */
	.ppshow-characters td.ppshow-cell--blank { display: none; }
	.ppshow-characters .ppshow-cell--written { grid-row: 2; }
	.ppshow-characters .ppshow-cell--desc { grid-row: 2; margin-left: 0; }
	.ppshow-characters .ppshow-cell--written:not(.ppshow-cell--blank) ~ .ppshow-cell--desc:not(.ppshow-cell--blank)::before {
		content: ' · ';
	}
	.ppshow-characters .ppshow-cell--written,
	.ppshow-characters .ppshow-cell--desc { display: inline; }

	/* Licensing: stacked, with full-width buttons and three equal share buttons. */
	.ppshow-licensing { grid-template-columns: 1fr; }
	.ppshow-card { padding: 20px; }
	.ppshow-card--mine .ppshow-btn--orange { width: 100%; }

	/* Digital section: heading, then the laptop full width. */
	.ppshow-digital__top { display: flex; flex-direction: column; gap: 20px; }
	.ppshow-laptop { max-width: none; }
	.ppshow-devices, .ppshow-quote, .ppshow-more, .ppshow-directors { margin-top: 48px; }
	.ppshow-digital { padding-bottom: 48px; }

	/* Tony's quote is centred, with a 48px photo beside his NAME underneath. */
	.ppshow-quote { display: block; text-align: center; }
	.ppshow-quote__face { width: 48px; height: 48px; margin: 0; }
	.ppshow-quote figcaption {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 14px;
	}
	.ppshow-quote .ppshow-quote__face { order: -1; }
	.ppshow-directors { flex-direction: column; align-items: center; text-align: center; }

	/* Keep browsing is a list of rows, each row the whole link, 64px minimum. */
	.ppshow-similar { grid-template-columns: 1fr; gap: 0; }
	.ppshow-similar__item a {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) 16px;
		align-items: center;
		gap: 0 14px;
		min-height: 64px;
		padding: 12px 0;
		border: 0;
		border-bottom: 1px solid var(--border-soft);
		border-radius: 0;
		background: none;
	}
	.ppshow-similar__logo {
		grid-column: 1; grid-row: 1 / span 2;
		height: 48px; padding: 4px;
		background: #fff; border: 1px solid var(--border-soft); border-radius: 6px;
	}
	.ppshow-similar__title { grid-column: 2; grid-row: 1; padding: 0; font-size: 15px; }
	.ppshow-similar__meta  { grid-column: 2; grid-row: 2; padding: 0; font-size: 12px; }
	.ppshow-similar__chev {
		grid-column: 3; grid-row: 1 / span 2;
		width: 9px; height: 9px;
		border-right: 2px solid var(--navy);
		border-top: 2px solid var(--navy);
		transform: rotate(45deg);
		justify-self: end;
	}

	/* Every touch target at least 44px. */
	.ppshow-show button.ppshow-toggle { min-height: 44px; }
	.ppshow-show button.ppshow-toggle { display: inline-flex; align-items: center; }
}

/* The chevron belongs to the phone list only. */
.ppshow-similar__chev { display: none; }
@media (max-width: 719px) { .ppshow-similar__chev { display: block; } }
/* ===================================================================
 * Blade sets the body font to Arial from the theme options, with a
 * selector that beats inheritance from .ppshow-show. Setting the family
 * on the container alone therefore did nothing for paragraphs, list items
 * and table cells, and the page rendered in Arial while the self-hosted
 * Roboto sat unused. Name the elements so our scope wins.
 * =================================================================== */
.ppshow-show p,
.ppshow-show li,
.ppshow-show td,
.ppshow-show th,
.ppshow-show dd,
.ppshow-show dt,
.ppshow-show span,
.ppshow-show a,
.ppshow-show button,
.ppshow-show input,
.ppshow-show figcaption,
.ppshow-show blockquote,
.ppshow-show label,
.ppshow-show legend { font-family: var(--body); }
.ppshow-show h1,
.ppshow-show h2,
.ppshow-show h3,
.ppshow-show h4 { font-family: var(--display); }
.ppshow-show h1 span,
.ppshow-show h2 span,
.ppshow-show h3 span,
.ppshow-show h4 span,
.ppshow-show h1 em,
.ppshow-show h2 em,
.ppshow-show h3 em { font-family: inherit; }

/* ===================================================================
 * G-06/G-09: link and button colour.
 *
 * Blade colours links with a selector that outranks `.ppshow-show a`, so
 * every link and both button styles were rendering in the theme's blue
 * rgb(116,135,215) instead of navy #3B6080. Attribute selectors lift our
 * scope above it without resorting to !important.
 * =================================================================== */
.ppshow-show a[href],
.ppfind a[href] { color: var(--navy); }
.ppshow-show a[href]:hover,
.ppfind a[href]:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* The /theatre button colours have to survive the a[href] rule above. */
.ppshow-show a[href].ppshow-btn--orange,
.ppshow-show a[href].ppshow-btn--orange:hover { color: #1F3A52; }
.ppshow-show a[href].ppshow-btn--ghost,
.ppshow-show a[href].ppshow-btn--ghost:hover,
.ppshow-show a[href].ppshow-btn--share,
.ppshow-show a[href].ppshow-btn--share:hover { color: var(--navy); }
/* The script box keeps its own orange link treatment (HANDOFF 2.2). */
.ppshow-show .ppshow-scriptline a[href] { color: var(--orange-text); }
/* Card titles are ink until hovered, on both pages. */
.ppshow-show .ppshow-similar__item a[href] { color: var(--ink); }
.ppshow-show .ppshow-similar__item a[href]:hover .ppshow-similar__title { color: var(--navy); }
.ppshow-show .ppshow-similar__title { color: inherit; }
.ppfind .ppfind-card__title a[href] { color: var(--ink); }

/* G-07: every target at least 44px tall, at every width (the phone block
 * already did this; the rule belongs everywhere). Inline links inside a
 * paragraph are excepted by the check itself. */
.ppshow-show .ppshow-btn,
.ppshow-show button.ppshow-toggle {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
/* ...and the two buttons borrowed from /theatre are taller still. The extra
   class is there to beat the 44px rule above on specificity, not on order. */
.ppshow-show .ppshow-btn.ppshow-btn--orange,
.ppshow-show .ppshow-btn.ppshow-btn--share { min-height: 52px; }
.ppshow-show .ppshow-similar__item a { min-height: 44px; }
.ppshow-show .ppshow-keep-browsing__head a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ===================================================================
 * QA pass, 7 Nov ("Staging fixes", items B1-B27).
 *
 * Appended last on purpose: several of these correct an earlier block
 * that wins on order or specificity rather than on intent. Every
 * `!important` here answers an `!important` in the Blade theme and
 * says which one.
 * =================================================================== */

/* B10 - running text is Roboto 400. Blade sets `body, p { font-weight: 300 }`
   at 0,0,1, so one scoped rule is enough to take it back. */
.ppshow-show p, .ppshow-show li, .ppshow-show dd, .ppshow-show dt,
.ppshow-show td, .ppshow-show th, .ppshow-show blockquote,
.ppshow-show figcaption, .ppshow-show label { font-weight: 400; }

/* B9 - the hook is 18px ink, not 16px grey. */
.ppshow-show .ppshow-hook { font-size: 18px; color: var(--ink); font-weight: 400; }

/* B15 - fact chips: 13px 700, 4px 12px (board `.chip`). */
.ppshow-show .ppshow-chip { font-weight: 700; padding: 4px 12px; }

/* B16/B22 - every section H2 is 32px, and the synopsis block breathes at
   14px between the H2, the credits line, the text and the MTI note. */
.ppshow-show .ppshow-section > h2 { font-size: 32px; margin-bottom: 14px; }
.ppshow-show .ppshow-credits { margin: 0 0 14px; }
.ppshow-show .ppshow-about .ppshow-quiet { margin-top: 14px; }

/* B8 - At a glance: 340px so values stop wrapping to four lines, 22px
   heading, values flush left under their label. */
.ppshow-show .ppshow-about__grid { grid-template-columns: minmax(0, 1fr) 340px; }
.ppshow-show .ppshow-glance-card h3 { font-size: 22px; }
.ppshow-show .ppshow-glance dd { margin: 0; }

/* B11/B12 - standalone text links are navy 700 and go orange on hover. The
   script-box link was orange at rest, which made it the only link on the page
   that didn't follow HANDOFF 6. */
.ppshow-show .ppshow-synopsis a[href],
.ppshow-show .ppshow-answer a[href],
.ppshow-show .ppshow-quiet a[href],
.ppshow-show .ppshow-scriptline a[href],
.ppshow-show .ppshow-more a[href],
.ppshow-show .ppshow-directors a[href],
.ppshow-show .ppshow-keep-browsing__head a[href] { font-weight: 700; color: var(--navy); }
.ppshow-show .ppshow-scriptline a[href]:hover { color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* B13 - Blade styles every button as Arial 13px 700 with !important
   (`button:not(.mfp-arrow)`), which is why the toggles came out in a fallback
   font. Ours has to be !important too; the selector is more specific, so it
   wins. */
.ppshow-show button.ppshow-toggle {
	font-family: var(--body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--navy);
}
.ppshow-show button.ppshow-toggle:hover { color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* B23 - the hero ends with 40px, a hairline, then 40px above the synopsis. */
.ppshow-show .ppshow-hero { border-bottom: 1px solid rgb(226, 234, 242); }
.ppshow-show .ppshow-about { padding-top: 40px; }

/* B27 - the header isn't sticky today, but these ids are linked from
   elsewhere and would land under it if it ever becomes sticky. */
.ppshow-show .ppshow-section[id], .ppshow-show [id="what-digital"] { scroll-margin-top: 96px; }

@media (max-width: 1023px) {
	/* B3 - the card is a flex item once the columns wrap, and `min-width: auto`
	   stops a flex item shrinking below its content's min-content width, so the
	   glance grid pushed it 28px past the right gutter at 768. */
	.ppshow-show .ppshow-glance-card { min-width: 0; }
	.ppshow-show .ppshow-glance { max-width: none; }
}

@media (max-width: 959px) {
	/* B25 - a vocal range must never wrap to two lines. The unconditional
	   `td.ppshow-cell--range` rule below does this at every width now; the
	   header is deliberately left free to wrap (HANDOFF 2.2 item 5). */
}

@media (max-width: 719px) {
	/* B24 - one numbered column on phones. A later `max-width: 959px` block was
	   putting the two-column rule back on order. */
	.ppshow-show .ppshow-songlist { columns: 1; }

	/* B1 - the row was a grid, and a grid item's `display` is blockified, so
	   the `inline` meant to let "written as" and the description flow as one
	   sentence could never take: both cells were placed in the same grid area
	   and painted on top of each other ("Female" over "The quintessential").
	   A block row with the vocal range pinned top-right gives the two lines
	   the design asks for and lets the second one wrap properly. */
	.ppshow-show .ppshow-characters .ppshow-table tbody tr {
		display: block;
		position: relative;
		padding: 12px 0;
	}
	.ppshow-show .ppshow-characters .ppshow-table th.ppshow-cell--name {
		display: block;
		padding: 0 96px 2px 0;
		border: 0;
	}
	.ppshow-show .ppshow-characters .ppshow-table td.ppshow-cell--range {
		position: absolute;
		top: 12px;
		right: 0;
		padding: 0;
	}
	/* The card styling pads every cell 14px 20px and draws a rule between
	   them. Inline cells have to shed both, or "Female" sits in what looks
	   like a boxed cell with a divider (the QA note: no boxes, no divider). */
	.ppshow-show .ppshow-characters .ppshow-table td.ppshow-cell--written,
	.ppshow-show .ppshow-characters .ppshow-table td.ppshow-cell--desc {
		display: inline;
		padding: 0;
		border: 0;
	}
	.ppshow-show .ppshow-characters .ppshow-table td.ppshow-cell--blank { display: none; }

	/* B2 - the same `display` rules beat the collapse, so all 8 characters
	   showed while the "Show all 8 characters" button still sat under them. */
	.ppshow-show .ppshow-characters .ppshow-table tbody tr.ppshow-row--extra { display: none; }
	.ppshow-show .ppshow-section.is-open .ppshow-table tbody tr.ppshow-row--extra { display: block; }
}

/* ===================================================================
 * QA pass, 7 Nov, part two: the proof block and Keep browsing
 * (B17-B20). Appended last for the same reason as the block above.
 * =================================================================== */

/* B17 - the three circles were empty discs. They hold a white mark, and the
   feature titles are DM Sans 700 17px, not Roboto 700 14px. */
.ppshow-show .ppshow-more__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.ppshow-show .ppshow-more__text strong {
	font-family: var(--display);
	font-size: 17px;
	line-height: 1.3;
	margin-bottom: 4px;
}

/* B18 - the figure laid its three children out as three columns: photo,
   quote, name. A two-column grid puts the photo on the left of both, with
   the attribution directly under the quote, and needs no extra markup. */
.ppshow-show .ppshow-quote {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 8px;
	align-items: start;
}
.ppshow-show .ppshow-quote__face { grid-column: 1; grid-row: 1 / span 2; }
.ppshow-show .ppshow-quote blockquote { grid-column: 2; grid-row: 1; }
.ppshow-show .ppshow-quote figcaption { grid-column: 2; grid-row: 2; margin-top: 0; }
.ppshow-show .ppshow-quote blockquote p {
	font-family: var(--display);
	font-weight: 700;
	font-size: 18px;
}

/* B19 - the directors line is DM Sans 700 17px, and the call to action takes
   the small orange play mark from the board. */
.ppshow-show .ppshow-directors p:first-child {
	font-family: var(--display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
}
.ppshow-show .ppshow-directors__cta { display: inline-flex; align-items: center; gap: 8px; }
.ppshow-show .ppshow-playdot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--orange);
	color: #1F3A52;
	flex: none;
	padding-left: 2px;
}

/* B20 - the head laid out eyebrow | H2 | link across one row, which centred
   the H2; and the card list had lost the auto margin that centres the page
   column, so the cards started 45px left of the heading above them. */
.ppshow-show .ppshow-keep-browsing__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 24px;
	row-gap: 4px;
	align-items: baseline;
	justify-content: initial;
}
.ppshow-show .ppshow-keep-browsing__head .ppshow-eyebrow { grid-column: 1 / -1; margin: 0; }
.ppshow-show .ppshow-keep-browsing__head h2 { grid-column: 1; }
.ppshow-show .ppshow-keep-browsing__head a { grid-column: 2; justify-self: end; }
.ppshow-keep-browsing > .ppshow-similar { margin-inline: auto; }

@media (max-width: 719px) {
	/* The link drops under the heading rather than squeezing beside it. */
	.ppshow-show .ppshow-keep-browsing__head {
		grid-template-columns: minmax(0, 1fr);
	}
	.ppshow-show .ppshow-keep-browsing__head a { grid-column: 1; justify-self: start; }

	/* B18 on a phone: the quote centred, then the 48px photo beside his name.
	   The old rule made the figcaption a flex row, and its 10px gap fell
	   between "Tony Souza" and the comma. */
	.ppshow-show .ppshow-quote {
		grid-template-columns: auto auto;
		justify-content: center;
		column-gap: 10px;
		row-gap: 14px;
		text-align: center;
	}
	.ppshow-show .ppshow-quote blockquote { grid-column: 1 / -1; grid-row: 1; }
	.ppshow-show .ppshow-quote__face { grid-column: 1; grid-row: 2; align-self: center; }
	.ppshow-show .ppshow-quote figcaption {
		grid-column: 2;
		grid-row: 2;
		display: block;
		text-align: left;
		align-self: center;
	}
}

/* ===================================================================
 * Alex, 7 Nov: the characters table and the At a glance card, checked
 * against the MainTrim board rather than adjusted by eye.
 * =================================================================== */

/* At a glance.
 *
 * The <dl> carries its own `padding: 20px 24px` and background from the
 * base rules - it used to BE the card - and the design-board pass then
 * wrapped it in .ppshow-glance-card with another 24px. The double padding
 * left the two value columns 112px wide where the board has 132px, which
 * is why "Full-length · 2 acts" and "Contemporary Broadway, Pop/Rock"
 * wrapped onto two lines here and sit on one in the design.
 * Board values: 340px wide, 28px padding, 18px/20px gap, 22px heading. */
.ppshow-show .ppshow-glance-card { padding: 28px; }
.ppshow-show .ppshow-glance-card .ppshow-glance {
	padding: 0;
	margin: 0;
	background: none;
	border-radius: 0;
	max-width: none;
	gap: 18px 20px;
}
/* Blade indents every <dd> by 15px. That is the indent B8 asked to remove,
   and it is also what pushed "Full-length · 2 acts" onto two lines: the text
   needs 121px and the column is 132px, but only 117px of it was usable. */
.ppshow-show .ppshow-glance dt,
.ppshow-show .ppshow-glance dd { padding-left: 0; margin-left: 0; }

/* Characters table.
 *
 * The column PROPORTIONS already match the board (measured at 1440:
 * 285/222/243/447 against the board's 260/207/235/405 - the same split
 * to within a percent), because neither sets column widths and auto
 * layout spreads the spare width. What differs is the cell padding: the
 * board uses 12px, this build used 20px either side, which pushed every
 * column 16px wider and opened up the gaps. These are the board's. */
.ppshow-show .ppshow-tablecard { padding: 8px 16px; }
.ppshow-show .ppshow-tablecard .ppshow-table th { padding: 10px 12px; }
.ppshow-show .ppshow-tablecard .ppshow-table td { padding: 12px; }
/* Blade draws a 1px rule down the right of every cell. The board has only
   horizontal rules, and a 2px one under the header. */
.ppshow-show .ppshow-table th,
.ppshow-show .ppshow-table td { border-left: 0; border-right: 0; }
.ppshow-show .ppshow-table thead th { border-bottom: 2px solid var(--border); }

/* ===================================================================
 * QA round 2, 7 Nov. Items 1.1-1.12 and 2.1-2.4 of
 * "Staging fixes round 2". Appended last; every `!important` here
 * answers one of Blade's and says so.
 * =================================================================== */

/* 1.1 - "Copy link" is the only share control that is a <button>, and
   Blade styles `button:not(.mfp-arrow)` as uppercase Arial 13px with
   !important. The markup already says "Copy link" in sentence case; it
   was CSS turning it into COPY LINK. */
.ppshow-show button.ppshow-btn {
	font-family: var(--display) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: none;
	letter-spacing: normal;
}

/* 1.2 - the synopsis H2 sits inside .ppshow-about__main, so the earlier
   `.ppshow-section > h2` rule never matched it and it kept Blade's 36px;
   "Shows like" was 28px. Every section H2 is one size. */
.ppshow-show .ppshow-section h2 { font-size: 32px; }
/* 1.3 - and the synopsis H2 had no margin at all, so the credits line
   touched it. */
.ppshow-show .ppshow-about__main > h2 { margin-bottom: 14px; }

/* 1.4 - a vocal range must never break mid-value, at any width. The rule
   was inside a max-width: 959px block, so 1024 still wrapped. The HEADER is
   allowed to wrap per word ("VOCAL / RANGE"); only the values are nowrap, so
   that the header can never set the column's width (HANDOFF 2.2 item 5). */
.ppshow-show .ppshow-table td.ppshow-cell--range { white-space: nowrap; }

/* 1.5 - the quote is DM Sans 700 21px (18px on phones). */
.ppshow-show .ppshow-quote blockquote p { font-size: 21px; line-height: 1.4; }

/* 1.6 - 40px circles with a 22px mark and a 14px gap to the text. */
.ppshow-show .ppshow-more__icon { width: 40px; height: 40px; border-radius: 20px; }
.ppshow-show .ppshow-more__icon .ppshow-icon { width: 22px; height: 22px; }
.ppshow-show .ppshow-more__list li { gap: 14px; }

/* 1.7 - the Keep browsing band used its own container: its children were
   the full 1248px measure while every section is 1248px WITH 24px of
   padding, so the band ran 24px wider on each side. Same container now;
   only the pale background stays full-bleed. */
.ppshow-keep-browsing { padding-inline: 0; }
.ppshow-keep-browsing > * {
	max-width: var(--content);
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}

/* 1.12 - standalone text links need a 44px target. "See what that looks
   like" ends a sentence, so it gets padding and a matching negative
   margin instead, which grows the box without moving the line. */
.ppshow-show .ppshow-more__link a[href],
.ppshow-show .ppshow-directors__cta,
.ppshow-show .ppshow-card--mine .ppshow-quiet a[href] {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.ppshow-show .ppshow-answer a[href] { padding-block: 12px; margin-block: -12px; }

@media (max-width: 719px) {
	/* 1.2 - 26px on phones. */
	.ppshow-show .ppshow-section h2 { font-size: 26px; }

	/* 1.5 - the quote centred, then ONE centred row of photo + name. The
	   grid could not do this: the blockquote spans both columns, so its
	   width drove the track sizing and pushed the photo and the name to
	   opposite edges, 105px apart. Flex with a full-width first item
	   breaks the line and lets the pair centre as a group. */
	.ppshow-show .ppshow-quote {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 14px 12px;
		text-align: center;
	}
	.ppshow-show .ppshow-quote blockquote { flex: 1 1 100%; }
	.ppshow-show .ppshow-quote blockquote p { font-size: 18px; }
	.ppshow-show .ppshow-quote__face { flex: none; order: 2; }
	/* `min-width: 0` matters: a flex item's automatic minimum size is its
	   min-content width, so the caption refused to shrink beside the 48px
	   photo and wrapped onto a line of its own. */
	.ppshow-show .ppshow-quote figcaption {
		flex: 0 1 auto;
		min-width: 0;
		max-width: calc(100% - 72px);
		order: 3;
		text-align: left;
		margin: 0;
	}

	/* 2.1 - "Legally Blonde The Musical" ran to three 40px lines in the
	   256px left beside the tile, and the tile floated halfway down it. */
	.ppshow-show .ppshow-hero__titlerow { align-items: flex-start; }
	.ppshow-show .ppshow-h1__name { font-size: clamp(30px, 8.5vw, 40px); }
	.ppshow-show .ppshow-h1__sub { font-size: 18px; }

	/* 2.2 - the table card's 16px padding is for the desktop card. On a
	   phone there is no card, so it only pushed the character rows 16px
	   out of line with every paragraph above them. */
	.ppshow-show .ppshow-tablecard { padding: 0; }
}

/* ===================================================================
 * Characters table: column widths by rule (Alex, 8 Nov —
 * HANDOFF §2.2 item 5, board `.roles`). Auto layout gave the three
 * short columns a share of the spare width, so "Female" sat alone in
 * a 222px column. Character is fixed so it can't jump from show to
 * show, the two short columns shrink to their content, and the
 * description takes everything that's left.
 *
 * Board reference at 1440: 228 / 96 / 94 / 701.
 * =================================================================== */
/* 720px and up only. Below that there is no table - the rows are two lines
   of text - and a 560px floor would push them off the side of a 390px phone,
   where `body { overflow-x: hidden }` would quietly clip the text rather than
   scroll it. */
@media (min-width: 720px) {
	.ppshow-show .ppshow-tablecard .ppshow-table { min-width: 560px; }
}
/* The board's `.roles th` is the HEADER row only - its body rows use <td>
   for the name. Ours uses <th scope="row">, which is better for screen
   readers, so the header rules have to say `thead` or the character names
   get bottom-aligned and sit at the foot of tall rows. */
.ppshow-show .ppshow-tablecard .ppshow-table thead th { padding: 10px 16px; vertical-align: bottom; }
.ppshow-show .ppshow-tablecard .ppshow-table tbody th,
.ppshow-show .ppshow-tablecard .ppshow-table td { padding: 12px 16px; vertical-align: top; }
.ppshow-show .ppshow-tablecard .ppshow-table th:first-child,
.ppshow-show .ppshow-tablecard .ppshow-table td:first-child { padding-left: 12px; }
.ppshow-show .ppshow-tablecard .ppshow-table th:last-child,
.ppshow-show .ppshow-tablecard .ppshow-table td:last-child { padding-right: 12px; }
/* The board writes `width: 200px` and renders 228 with the padding, because
   nothing there sets box-sizing. These cells inherit `border-box` from
   `.ppshow-show *`, so the same column is 228px here - which leaves exactly
   the 200px of content the design asks for. */
.ppshow-show .ppshow-table .ppshow-cell--name { width: 228px; }
/* `width: 1%` is the shrink-to-content idiom for a table column. */
.ppshow-show .ppshow-table .ppshow-cell--written,
.ppshow-show .ppshow-table .ppshow-cell--range { width: 1%; }
.ppshow-show .ppshow-table td.ppshow-cell--written { white-space: nowrap; }

@media (min-width: 720px) and (max-width: 959px) {
	/* The scroll box is only a fallback now; the table fits from 720px up. */
	.ppshow-tablescroll .ppshow-table { min-width: 560px; }
}

@media (max-width: 719px) {
	/* No table on a phone: the row becomes two lines of text, so the column
	   widths have to go or they'd size the blocks instead. */
	.ppshow-show .ppshow-table .ppshow-cell--name,
	.ppshow-show .ppshow-table .ppshow-cell--written,
	.ppshow-show .ppshow-table .ppshow-cell--range { width: auto; }
}

/* The <table> element itself carries a 1px rgb(228,228,228) border from
   Blade. With the cell borders already off, that was the only thing left
   drawing a line inside the rounded card - down the left of CHARACTER and
   across the top - which the design doesn't have (Alex, 8 Nov). The rules
   between rows come from `tbody tr` and the header, not from the table. */
.ppshow-show .ppshow-table { border: 0; }

/* ===================================================================
 * QA pack pass 1 → fixes (8 Nov): S-03, S-26, G-04, G-05, G-07.
 * =================================================================== */

/* S-03 - the eyebrow lost its weight to my own round-2 rule
   `.ppshow-show p { font-weight: 400 }` (0,1,1), which outranks a
   single-class component rule. The board's `.eyebrow` is 700 at .2em. */
.ppshow-show .ppshow-eyebrow { font-weight: 700; letter-spacing: .2em; }

/* G-04 - body line-height is 1.6, not Blade's 1.75. */
.ppshow-show p, .ppshow-show li, .ppshow-show dd,
.ppshow-show td, .ppshow-show th, .ppshow-show blockquote { line-height: 1.6; }

/* G-05 - four colours back to what the board draws. Muted text is
   rgb(110,115,120) per HANDOFF 6 and the board's `.muted`; note that
   design-tokens.json calls rgb(125,130,135) "pp-ink-muted", which is a
   conflict between the two docs - raised in the report, board wins. The
   circles and the badge are read straight off MainTrim. */
.ppshow-show .ppshow-quote figcaption,
.ppshow-show .ppshow-more__text,
.ppshow-show .ppshow-devices p:last-child { color: var(--ink-muted); }
.ppshow-show .ppshow-tablecard .ppshow-table tbody tr + tr td,
.ppshow-show .ppshow-tablecard .ppshow-table tbody tr + tr th { border-top-color: var(--border-soft); }
.ppshow-show .ppshow-more__icon--periwinkle { background: rgb(86, 105, 198); }
.ppshow-show .ppshow-more__icon--teal { background: #37AC94; }
.ppshow-show .ppshow-devices__icon { border-color: rgb(86, 105, 198); }
.ppshow-show .ppshow-badge { background: #FFF4DE; color: rgb(178, 110, 0); }

/* G-07 - the breadcrumb link is one line of text, so it grows its hit area
   with padding and a matching negative margin rather than a height. */
.ppshow-show .ppshow-breadcrumb a[href] {
	display: inline-block;
	padding-block: 14px;
	margin-block: -14px;
}

/* S-26 - the three features stack by the CARD's width, not the viewport's.
   HANDOFF: three need 920px; below that one centred column, max 420px,
   built as `@container (max-width: 919px)` on the card. The 900px cap went
   with it - it made a card that could never hold the three it was drawn
   with. Flex with `flex: 0 1 280px`, as the board. */
.ppshow-show .ppshow-more { max-width: none; container-type: inline-size; }
.ppshow-show .ppshow-more__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 40px;
	grid-template-columns: none;
	max-width: none;
	margin-inline: 0;
}
.ppshow-show .ppshow-more__list li { flex: 0 1 280px; }
@container (max-width: 919px) {
	.ppshow-show .ppshow-more__list { flex-direction: column; align-items: center; }
	.ppshow-show .ppshow-more__list li { flex: none; width: 100%; max-width: 420px; }
}

/* ===================================================================
 * Interaction states (HANDOFF §6, 8 Nov). ONE rule: no gold.
 *
 * The old "text links turn orange on hover" line is withdrawn.
 * rgb(178,110,0) must not appear on hover anywhere on these two pages.
 * The colour stays as it is and a 2px underline appears 4px below.
 * =================================================================== */

/* 1.1 / 1.2 - the hover selectors have to be at least as specific as the
   B11 block that set the resting colours. They weren't, which is why six
   of these links had NO hover state at all: `.ppshow-show .ppshow-more
   a[href]` (0,3,1) and `.ppshow-show a[href]:hover` (0,3,1) tie, and the
   resting rule came later. The arrow span is `display: inline-block`, so
   the underline stops before it. */
.ppshow-show a[href]:hover,
.ppshow-show .ppshow-breadcrumb a[href]:hover,
.ppshow-show .ppshow-synopsis a[href]:hover,
.ppshow-show .ppshow-answer a[href]:hover,
.ppshow-show .ppshow-quiet a[href]:hover,
.ppshow-show .ppshow-scriptline a[href]:hover,
.ppshow-show .ppshow-more a[href]:hover,
.ppshow-show .ppshow-directors a[href]:hover,
.ppshow-show .ppshow-keep-browsing__head a[href]:hover,
.ppshow-show button.ppshow-toggle:hover {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 1.3 - "Shows like" cards now behave like the finder cards: navy border,
   the title keeps its ink colour and takes the same underline. The link
   itself carries no decoration, or the facts line would be underlined too. */
.ppshow-show .ppshow-similar__item a[href]:hover {
	color: var(--ink);
	text-decoration: none;
}
.ppshow-show .ppshow-similar__item a[href]:hover .ppshow-similar__title {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 1.6 - the clipboard fallback, shown only when the write is refused. */
.ppshow-show .ppshow-copyfallback {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-top: 10px;
}
.ppshow-show .ppshow-copyfallback input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 8px 10px;
	font: 400 14px/1.4 var(--body);
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
}
.ppshow-show .ppshow-copyfallback span { font-size: 13px; color: var(--ink-muted); }

/* Buttons are not text links: the underline rule above must not reach them.
   HANDOFF §6 gives the orange buttons a fill change only, and "Text it" /
   "Copy link" no change at all (open question 6). Caught by the X-HOVER-02
   inventory, which is exactly what that check is for. */
.ppshow-show .ppshow-btn:hover,
.ppshow-show a[href].ppshow-btn:hover,
.ppshow-show button.ppshow-btn:hover { text-decoration: none; }

/* ===================================================================
 * Round 4 (HANDOFF §2.2 hero + item 4, 8 Nov): the hero spans the
 * container, and nothing caps the synopsis column.
 * =================================================================== */

/* The page measure is the board's: `.wrap { max-width: 1200px; padding: 0 24px }`,
   so 1152px of content at 1440. This build had been running 1248/1200 - 48px
   wider than every board - which is why the round-4 numbers (synopsis 764,
   script box aligned) could not come out right, and why the characters table's
   Description column measured 754 against the board's 701. One token. */
.ppshow-show { --content: 1200px; }

/* 1 - the hero text column is no longer capped at 660px: with the logo in a
   tile there is no right-hand column to leave room for. `text-wrap: balance`
   stops a long title breaking as "…The Musical / JR." with JR. stranded. */
.ppshow-show .ppshow-hero__text { max-width: none; }
.ppshow-show .ppshow-h1__name { text-wrap: balance; }
/* The hook and the script box stop at the synopsis column's width so their
   right edges line up with the text below them.
   764px is that width at 1440 and 1280, but at 1024 the synopsis column is
   588px, and a fixed 764 would overhang it by 176px - the right edges would
   stop lining up, which is the whole point of the rule. The column is
   `1fr 340px` with a 48px gap, so it is always the container less 388px:
   `min()` gives 764 where there is room and the real column width where
   there isn't. Below 1024 the row is one column, so there is nothing to
   line up with and the cap lifts. */
.ppshow-show .ppshow-hook,
.ppshow-show .ppshow-scriptline { box-sizing: border-box; }
@media (min-width: 1024px) {
	.ppshow-show .ppshow-hook,
	.ppshow-show .ppshow-scriptline { max-width: min(764px, calc(100% - 388px)); }
}

/* 2 - the synopsis column fills minmax(0, 1fr). The 680px cap left a 132px
   dead gap before the card and made it look detached. The card stays 340px
   with the 48px gap, and both columns stay top-aligned so the card doesn't
   stretch when "Read the full synopsis" is open. */
.ppshow-show .ppshow-about__main { max-width: none; }
.ppshow-show .ppshow-about__grid { align-items: start; }

/* ---------------------------------------------------------------------------
 * 8 Nov, round 5 - "Works on any device" and the Tony Souza quote.
 * Board: MainTrim (desktop) and ShowMobile (phone).
 * ------------------------------------------------------------------------ */

/* The three device icons were CSS border boxes: three bare rounded rectangles
   at roughly half the board's size, with no laptop base line and no home bar
   on the tablet or phone. They are the board's own outline SVGs now.
   One height drives all three, because each viewBox carries its own aspect:
   at 54px that gives 66 / 54 / 45 wide, the board's numbers exactly, and at
   41px it gives 50 / 41 / 34, the phone board's numbers exactly. */
.ppshow-show .ppshow-devices__icons {
	gap: 18px;
	align-items: flex-end;
	margin: 0 0 16px;
}
.ppshow-show .ppshow-devices__icon {
	border: 0;
	border-radius: 0;
	width: auto;
	height: auto;
	display: flex;
	align-items: flex-end;
	color: rgb(86, 105, 198);
}
.ppshow-show .ppshow-devices__svg { display: block; height: 54px; width: auto; }
.ppshow-show .ppshow-devices p:last-child { font-size: 17px; }

/* `.elementor img { border-radius: 0 }` (0,1,1) was beating
   `.ppshow-quote__face` (0,1,0), so Tony's photo rendered as a square. Same
   shape as the round-3 gold hover: a global rule from outside reaching into
   these templates and winning on specificity. Scoping to .ppshow-show (0,2,0)
   settles it. The board also rings the photo in 2px periwinkle at 72px. */
.ppshow-show .ppshow-quote__face {
	width: 72px;
	height: 72px;
	border-radius: 999px;
	border: 2px solid rgb(116, 135, 215);
	object-fit: cover;
}
/* Board: an 820px card, 20px between photo and text, 6px between the quote
   and the attribution, and the photo centred against the pair. Confined to
   720px and up so it cannot reach the phone layout below, which is a
   different arrangement (quote, then photo beside the name). */
@media (min-width: 720px) {
	.ppshow-show .ppshow-quote {
		max-width: 820px;
		column-gap: 20px;
		row-gap: 6px;
		align-items: center;
	}
	.ppshow-show .ppshow-quote figcaption { font-size: 15px; }
}
@media (max-width: 719px) {
	.ppshow-show .ppshow-devices__icons { gap: 14px; margin-bottom: 12px; }
	.ppshow-show .ppshow-devices__svg { height: 41px; }
	.ppshow-show .ppshow-devices p:last-child { font-size: 15px; }
	.ppshow-show .ppshow-quote__face { width: 48px; height: 48px; }
	.ppshow-show .ppshow-quote figcaption { font-size: 14px; line-height: 1.35; }
}

/* ---------------------------------------------------------------------------
 * 8 Nov - the stub of a line above every vocal range on a phone.
 *
 * The desktop card draws its between-row rule on the CELLS:
 *   .ppshow-tablecard .ppshow-table tbody tr + tr th,
 *   .ppshow-tablecard .ppshow-table tbody tr + tr td { border-top: 1px ... }
 * On a phone the row is re-laid-out and each cell sheds that border - except
 * `.ppshow-cell--range`, whose rule sets position/top/right/padding and was
 * never given `border: 0`. Because that cell is `position: absolute; top: 12px;
 * right: 0`, its 1px top border painted as a short detached line floating just
 * above the vocal range, on every row but the first (the rule is `tr + tr`).
 *
 * Killing it per cell would leave the same trap for the next cell added, so the
 * card's between-row rule comes off the whole characters table at this width.
 * The row separator the design asks for is drawn by `tr { border-bottom }` and
 * is untouched.
 * ------------------------------------------------------------------------ */
@media (max-width: 719px) {
	.ppshow-show .ppshow-characters .ppshow-table tbody tr + tr th,
	.ppshow-show .ppshow-characters .ppshow-table tbody tr + tr td { border-top: 0; }
}

/* ---------------------------------------------------------------------------
 * 8 Nov - character names sat ~12px right of their own descriptions on phones.
 *
 * Not a theme rule this time, one of ours, and it was source order rather than
 * specificity. The card gives its outer columns a little inner padding:
 *
 *   .ppshow-show .ppshow-tablecard .ppshow-table th:first-child,
 *   .ppshow-show .ppshow-tablecard .ppshow-table td:first-child { padding-left: 12px; }
 *
 * That is (0,4,1) and carries no media query. The phone rule that zeroes the
 * name cell's padding is also (0,4,1) - and sits EARLIER in the file, inside
 * `@media (max-width: 719px)`. Equal specificity, so the later one wins at
 * every width, and the name kept 12px of left padding while the description
 * (a <td> that is neither first nor last... except it IS last) kept its 0.
 * Hence the name alone reading as indented.
 *
 * The same pair also gave `padding-right: 12px` to `:last-child`, which on a
 * phone is the description cell, pulling its wrap point 12px short of the
 * separator above it.
 *
 * Both are desktop-card values. They come off the stacked list entirely.
 * ------------------------------------------------------------------------ */
@media (max-width: 719px) {
	.ppshow-show .ppshow-characters .ppshow-table th:first-child,
	.ppshow-show .ppshow-characters .ppshow-table td:first-child { padding-left: 0; }
	.ppshow-show .ppshow-characters .ppshow-table th:last-child,
	.ppshow-show .ppshow-characters .ppshow-table td:last-child { padding-right: 0; }
}

/* ---------------------------------------------------------------------------
 * 9 Nov - the laptop slot: the logo wins, the credit yields.
 * render.php drops the credit past its 56-character budget, but these two rules
 * make the failure mode safe if anything ever slips through: the logo keeps its
 * reserved share instead of being shrunk to nothing (which is how Disney's High
 * School Musical JR. ended up with a 0 x 0 logo), and nothing can paint outside
 * the laptop screen.
 * ------------------------------------------------------------------------ */
.ppshow-show .ppshow-laptop__logo { flex: none; }
.ppshow-show .ppshow-laptop__zone { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * STAGING-FIXES-8 7.1 - "Text it" and "Copy link" get a light-blue fill on
 * hover. Border and text stay navy; nothing else changes. The same hover is
 * applied to /theatre's own share buttons so the two pages match.
 * ------------------------------------------------------------------------ */
.ppshow-show .ppshow-btn--share:hover {
	background: #EDF5FC !important;
	border-color: var(--navy) !important;
	color: var(--navy) !important;
}

/* ---------------------------------------------------------------------------
 * Hero logo tile, rule B (STAGING-FIXES-8 §1, Alex 9 Nov).
 * The height is fixed; the width comes from render.php as --tile-w / --tile-w-m,
 * computed from the logo's stored aspect ratio. Nothing is measured in the
 * browser, so the tile never resizes after first paint.
 * ------------------------------------------------------------------------ */
.ppshow-show .ppshow-hero__tile { width: var(--tile-w, 120px); height: 120px; padding: 12px; }

@media (max-width: 719px) {
	.ppshow-show .ppshow-hero__tile { width: var(--tile-w-m, 88px); height: 88px; padding: 8px; }
	/* Round 25: EVERY logo takes its own line above the H1 below 720px,
	   left-aligned with it, and the title gets the full column width. */
	.ppshow-show .ppshow-hero__titlerow--wide {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.ppshow-show .ppshow-hero__titlerow--wide .ppshow-hero__tile {
		/* Round 25: the tile keeps the phone geometry above the H1 - 88 tall,
		   padding 8, radius 14 - instead of dropping to a 64px band, so a
		   squarish logo is no smaller than it was beside the title. Only the
		   width still needs clamping. */
		max-width: 100%;          /* never wider than the column */
	}
	.ppshow-show .ppshow-hero__titlerow--wide .ppshow-h1 { width: 100%; }
}

/* The logo must FILL its tile, not sit at its own intrinsic size.
 * With `width: auto`, an image lays out at its intrinsic width divided by the
 * density the browser worked out from `sizes` + srcset - so once `sizes` said
 * 176px, Les Misérables School Edition rendered 176x45 inside a 194x50 box and
 * came up 45px tall against the 48px the spec asks for. `object-fit: contain`
 * fills the slot and still guarantees the rendered ratio equals the natural
 * one: contain never crops and never stretches. */
.ppshow-show .ppshow-hero__logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* The copy of the toggle that appears at the top of a long open section
   (Alex, 9 Nov). Same control, so it inherits .ppshow-toggle entirely; this
   only gives it room under the heading. */
/* Round 23 - "Show less" sits beside the "Full synopsis" heading, which is the
   spot "Read the full synopsis" occupied before the section opened (Alex,
   9 Nov). Inline-block rather than a flex wrapper, so the heading keeps its
   place in the document outline and the PHP needs no restructuring. The
   :first-child guard matters: the act headings inside the full synopsis carry
   .ppshow-act too, and they must stay on their own lines. */
.ppshow-show .ppshow-fullsyn > .ppshow-act:first-child { display: inline-block; margin-right: 16px; }
.ppshow-show .ppshow-toggle--top { margin: 0 0 8px; }

/* Scroll anchoring moves the page itself while a section collapses, which
   fought the scroll correction in show.js. Same answer as the finder's result
   list in round 2: take the sections out of anchoring and let the script place
   the page. */
.ppshow-show .ppshow-section { overflow-anchor: none; }