/* CTH theme layout: page frame, header, navigation, page header band, breadcrumbs,
   buttons, forms, cards, prose, pagination, footer. Values come from tokens.css. */

/* --- Frame --------------------------------------------------------------- */
.cth-container { width: 100%; max-width: calc(var(--width-content) + 2 * var(--pad-gutter)); margin: 0 auto; padding: 0 var(--pad-gutter); }
.cth-section { padding-top: var(--space-8); padding-bottom: var(--space-9); }
.cth-main { display: block; }
.cth-skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: calc(var(--z-header) + 1); background: var(--cth-black); color: var(--cth-white); padding: var(--space-3) var(--space-4); border: 0; font-weight: 700; }
.cth-skip-link:focus { top: var(--space-4); color: var(--cth-white); }

@media (max-width: 720px) {
  :root { --pad-gutter: var(--space-4); }
  .cth-section { padding-top: var(--space-7); padding-bottom: var(--space-8); }
}

/* --- Texture --------------------------------------------------------------
   A fine newsprint grain over dark bands (sidebar, page header, footer, dark rows).
   Flat color stays the ground; the grain only takes the digital flatness off it. */
.cth-grain { background-image: url("../images/grain.svg"); background-size: 220px 220px; background-repeat: repeat; }

/* --- Sidebar header (desktop) -------------------------------------------- */
:root { --sidebar-width: 280px; }
.cth-sidebar { background-color: var(--cth-black); color: var(--cth-ink-300); z-index: var(--z-header); }
.cth-sidebar a { border: 0; }
.cth-header-logo .cth-logo img, .cth-header-logo .custom-logo { width: 150px; height: auto; }
.cth-menu-toggle { display: none; }

@media (min-width: 1101px) {
  .cth-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.12); scrollbar-width: thin; scrollbar-color: var(--cth-ink-700) transparent; }
  .admin-bar .cth-sidebar { top: 32px; }
  .cth-sidebar-top { padding: var(--space-7) var(--space-6) var(--space-6); }
  /* The logo spans the sidebar, as on the old site; the Support and Tickets buttons sit below it. */
  .cth-header-logo, .cth-header-logo .cth-logo, .cth-header-logo .custom-logo-link { display: block; width: 100%; }
  .cth-header-logo .cth-logo img, .cth-header-logo .custom-logo { width: 100%; max-width: none; height: auto; }
  .cth-sidebar-panel { display: flex; flex-direction: column; flex: 1; padding: 0 var(--space-6) var(--space-6); }
  .cth-page { margin-left: var(--sidebar-width); }
  /* The page canvas carries a dark band under the sidebar, so Safari's elastic overscroll (and any
     gap below a short viewport) shows the sidebar's black, never the paper ground. */
  html { background: var(--cth-black); }
  body { background: linear-gradient(90deg, var(--cth-black) var(--sidebar-width), var(--surface-page) var(--sidebar-width)); }
  .cth-sidebar { height: 100vh; height: 100dvh; }
  .admin-bar .cth-sidebar { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
}

/* Main menu: stacked, tracked caps; submenus open as an accordion under their parent. */
.cth-menu, .cth-menu ul { list-style: none; margin: 0; padding: 0; }
.cth-menu > li { border-bottom: 1px solid rgba(255,255,255,.12); }
.cth-menu > li:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.cth-menu li { display: flex; flex-wrap: wrap; align-items: center; }
.cth-menu a { flex: 1; display: block; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; transition: color var(--dur-fast) var(--ease-out); }
.cth-menu > li > a { font-family: var(--font-condensed); font-size: 24px; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; color: var(--cth-gold-500); padding: 11px 0 9px; }
.cth-menu > li > a:hover, .cth-menu > li > a:focus-visible { color: var(--cth-white); }
.cth-menu > .current-menu-item > a, .cth-menu > .current-menu-ancestor > a, .cth-menu > .current-menu-parent > a { color: var(--cth-white); }
.cth-menu > .current-menu-item > a::before, .cth-menu > .current-menu-ancestor > a::before, .cth-menu > .current-menu-parent > a::before { content: ""; display: inline-block; width: 5px; height: 20px; background: var(--cth-red-500); margin-right: 10px; vertical-align: -1px; }
.cth-menu .sub-menu { display: none; flex-basis: 100%; padding: 0 0 var(--space-3) var(--space-3); }
.cth-menu li:is(.is-open, .is-closing) > .sub-menu { display: block; }
.cth-menu .sub-menu a { font-family: var(--font-condensed); font-size: 17px; line-height: 1.15; letter-spacing: 0.02em; color: var(--cth-ink-200); padding: 6px 0; transition: color var(--dur-fast) var(--ease-out); }
.cth-menu .sub-menu a:hover, .cth-menu .sub-menu a:focus-visible, .cth-menu .sub-menu .current-menu-item > a { color: var(--cth-gold-400); }
.cth-menu .sub-menu .sub-menu { padding-bottom: var(--space-1); }
.cth-menu .sub-menu .sub-menu a { font-size: 15px; color: var(--cth-ink-300); padding: 4px 0; }
.cth-menu .sub-menu .sub-menu a:hover, .cth-menu .sub-menu .sub-menu a:focus-visible, .cth-menu .sub-menu .sub-menu .current-menu-item > a { color: var(--cth-gold-400); }
.cth-submenu-toggle { display: grid; place-items: center; width: 36px; height: 40px; background: none; border: 0; color: var(--cth-ink-400); cursor: pointer; }
.cth-submenu-toggle:hover { color: var(--cth-gold-400); }
/* Plugins on the live site style every button:hover with a solid fill; the chevron never gets one. */
.cth-submenu-toggle, .cth-submenu-toggle:is(:hover, :focus, :active) { background: none !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; }
.cth-submenu-toggle::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-base) var(--ease-out); }
.cth-submenu-toggle[aria-expanded="true"]::before { transform: rotate(-135deg) translateY(-2px); }


/* Support: the menu's one gold filled callout. */
.cth-menu > li.cth-menu-cta { border: 0; margin: 0 0 var(--space-4); }
.cth-menu > li.cth-menu-cta + li { border-top: 1px solid rgba(255,255,255,.12); }
.cth-menu > li.cth-menu-cta > a { display: flex; justify-content: center; padding: 13px 16px 11px; font-size: 24px; background: var(--cth-gold-500); color: var(--cth-black); transition: background var(--dur-fast) var(--ease-out); }
.cth-menu > li.cth-menu-cta > a:hover, .cth-menu > li.cth-menu-cta > a:focus-visible { background: var(--cth-gold-400); color: var(--cth-black); }
.cth-menu > li.cth-menu-cta > a::before { display: none !important; }
/* Tickets: the outline partner right under Support. */
.cth-menu > li.cth-menu-cta:has(+ li.cth-menu-tickets) { margin-bottom: var(--space-2); }
.cth-menu > li.cth-menu-cta + li.cth-menu-tickets { border-top: 0; }
.cth-menu > li.cth-menu-tickets { border: 0; margin: 0 0 var(--space-4); }
.cth-menu > li.cth-menu-tickets + li { border-top: 1px solid rgba(255,255,255,.12); }
.cth-menu > li.cth-menu-tickets > a { display: flex; justify-content: center; padding: 11px 16px 9px; font-size: 22px; box-shadow: inset 0 0 0 2px var(--cth-gold-500); color: var(--cth-gold-500); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.cth-menu > li.cth-menu-tickets > a:hover, .cth-menu > li.cth-menu-tickets > a:focus-visible { background: var(--cth-gold-500); color: var(--cth-black); }
.cth-menu > li.cth-menu-tickets > a::before { display: none !important; }
.cth-topbar-actions { display: none; }

/* Gold header buttons */
.cth-sidebar-actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.cth-sidebar-actions:not(:has(*)) { display: none; }
.cth-sidebar-actions .cth-btn { width: 100%; }
.cth-cart-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border: 2px solid var(--cth-gold-500) !important; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: var(--tracking-button); text-transform: uppercase; color: var(--cth-gold-500); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.cth-cart-link:hover { background: var(--cth-gold-500); color: var(--cth-black); }
.cth-cart-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--cth-gold-500); color: var(--cth-black); border-radius: var(--radius-pill); font-size: 11px; letter-spacing: 0; }
.cth-cart-link:hover .cth-cart-count { background: var(--cth-black); color: var(--cth-gold-500); }
/* An empty bag stays a quiet text link; it becomes the gold outline once something is in it. */
/* An empty cart has no link at all, so the menu stays short; it appears once something is added. */
.cth-cart-link.is-empty { display: none !important; }

/* Announcement and social, at the foot of the sidebar */
.cth-announcement { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.12); }
.cth-announcement p { margin: 0; }
.cth-announcement-label { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cth-gold-500); margin-bottom: var(--space-2) !important; }
.cth-announcement-text { font-family: var(--font-condensed); font-weight: 700; font-size: 19px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cth-white); }
.cth-announcement-text a { color: inherit; }
.cth-announcement-text a:hover { color: var(--cth-gold-400); }
.cth-sidebar-foot { margin-top: auto; padding-top: var(--space-6); display: grid; gap: var(--space-4); }
.cth-sidebar-search { display: flex; border-bottom: 1px solid rgba(255,255,255,.25); }
.cth-sidebar .cth-sidebar-search input[type=search] { flex: 1; min-width: 0; height: auto; background: none; border: 0; box-shadow: none; padding: 8px 0; font: inherit; font-size: 13px; color: var(--cth-white); }
.cth-sidebar-search input::placeholder { color: var(--cth-ink-400); }
.cth-sidebar-search input:focus { outline: none; }
.cth-sidebar-search:focus-within { border-bottom-color: var(--cth-gold-500); }
.cth-sidebar-search button { background: none; border: 0; padding: 0 2px; color: var(--cth-ink-400); cursor: pointer; }
.cth-sidebar-search button:hover { color: var(--cth-gold-400); }
.cth-sidebar-contact { margin: 0; display: grid; gap: 4px; font-size: 12px; }
.cth-sidebar-contact a { color: var(--cth-ink-300); border: 0; }
.cth-sidebar-contact a:hover { color: var(--cth-gold-400); }
.cth-sidebar-social { margin-top: var(--space-5); }
.cth-sidebar-social .cth-social { margin: 0; }
.cth-social-icons { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.cth-social-icons a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(210,163,68,.45) !important; color: var(--cth-gold-500); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.cth-social-icons a:hover, .cth-social-icons a:focus-visible { background: var(--cth-gold-500); color: var(--cth-black); }

/* --- Top bar + slide-down menu (tablet and phone) ------------------------- */
@media (max-width: 1100px) {
  .cth-sidebar { position: sticky; top: 0; }
  .admin-bar .cth-sidebar { top: 46px; }
  .cth-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; padding: var(--space-2) var(--pad-gutter); }
  .cth-header-logo .cth-logo img, .cth-header-logo .custom-logo { width: auto; height: 52px; }
  .cth-topbar-actions { display: flex; gap: var(--space-2); margin-left: auto; }
  .cth-topbar-actions .cth-btn { padding: 9px 12px; font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; }
  .cth-topbar-actions .cth-topbar-tickets { background: transparent; box-shadow: inset 0 0 0 2px var(--cth-gold-500); color: var(--cth-gold-500); }
  .cth-topbar-actions .cth-topbar-tickets:hover { background: var(--cth-gold-500); border-color: var(--cth-gold-500); color: var(--cth-black); }
  .cth-topbar-actions + .cth-menu-toggle { margin-left: var(--space-2); }
  .cth-menu-toggle { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 0; padding: var(--space-3) 0; min-height: 44px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cth-white); cursor: pointer; }
  .cth-menu-toggle-bars, .cth-menu-toggle-bars::before, .cth-menu-toggle-bars::after { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform var(--dur-base) var(--ease-out); }
  .cth-menu-toggle-bars::before, .cth-menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .cth-menu-toggle-bars::before { top: -7px; }
  .cth-menu-toggle-bars::after { top: 7px; }
  .cth-menu-toggle[aria-expanded="true"] .cth-menu-toggle-bars { background: transparent; }
  .cth-menu-toggle[aria-expanded="true"] .cth-menu-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
  .cth-menu-toggle[aria-expanded="true"] .cth-menu-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }
  .cth-sidebar-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pad-gutter) var(--space-7); background: inherit; border-top: var(--border-heavy) solid var(--cth-red-600); }
  .cth-sidebar-panel.is-open { display: block; }
  /* Breathing room between the red rule and the panel's own Support / Tickets buttons. */
  .cth-sidebar-panel { padding-top: var(--space-5, 24px); }
  /* The open panel repeats Support and Tickets in full size, so the small top-bar copies fade out. */
  .cth-topbar-actions { transition: opacity 240ms var(--ease-out), visibility 0s linear 0s; }
  .cth-menu-open .cth-topbar-actions { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms; }
  .cth-menu > li > a { padding: 14px 0 12px; font-size: 28px; }
  .cth-submenu-toggle { width: 44px; height: 48px; }
}

/* --- Page header band: black, grain, crown cut along the bottom ----------- */
.cth-page-header { z-index: 1; margin-bottom: calc(-1 * var(--crown-edge-depth)); position: relative; background-color: var(--cth-red-700); background-image: url(../images/grain.svg), linear-gradient(155deg, var(--cth-red-600) 0%, var(--cth-red-800) 70%, var(--cth-red-900) 100%); background-size: 220px, auto; color: var(--cth-red-050); --crown-edge-depth: 50px; padding: var(--space-8) 0 calc(var(--crown-edge-depth) + var(--space-7)); }
.cth-page-header .cth-breadcrumb { margin-bottom: var(--space-5); }
.cth-page-header .cth-breadcrumb a { color: var(--cth-white); }
.cth-page-header .cth-breadcrumb [aria-current] { color: rgba(255,255,255,.7); }
.cth-page-header .cth-eyebrow { color: var(--cth-gold-500); margin-bottom: var(--space-3); }
.cth-page-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--cth-white); margin: 0; max-width: 18ch; text-wrap: balance; }
.cth-page-lead { color: var(--cth-ink-300); margin-top: var(--space-4); max-width: var(--width-prose); }
.cth-page-lead p:last-child { margin: 0; }
@media (max-width: 720px) { .cth-page-header { --crown-edge-depth: 32px; padding-top: var(--space-7); } }
@media (max-width: 720px) { .cth-page-header .cth-container { text-align: center; } .cth-page-header :is(.cth-page-title, .cth-page-lead) { margin-inline: auto; } }

.cth-crumbbar { background: var(--surface-page); border-bottom: 1px solid var(--border-hairline); padding: var(--space-3) 0; }

/* --- Breadcrumb (design system Breadcrumb: tracked caps, red slash) ------- */
.cth-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; }
.cth-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.cth-breadcrumb li + li::before { content: "/"; color: var(--cth-red-600); }
.cth-page-header .cth-breadcrumb li + li::before { color: var(--cth-gold-500); }
.cth-breadcrumb a { color: var(--text-heading); border: 0; }
.cth-breadcrumb a:hover { color: var(--cth-red-600); }
.cth-page-header .cth-breadcrumb a:hover { color: var(--cth-gold-400); }
.cth-breadcrumb [aria-current] { color: var(--text-muted); }

/* --- Buttons (design system Button) -------------------------------------- */
.cth-btn, .button, button.button, input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-sans); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none; padding: 13px 26px; border-radius: 0; border: 2px solid var(--cth-red-600); background: var(--cth-red-600); color: var(--cth-white); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.cth-btn:hover, .button:hover, input[type="submit"]:hover { background: var(--cth-red-800); border-color: var(--cth-red-800); color: var(--cth-white); }
.cth-btn:active, .button:active, input[type="submit"]:active { transform: translateY(1px); }
.cth-btn[disabled], .button.disabled, .button:disabled { opacity: 0.38; cursor: not-allowed; }
.cth-btn-sm { padding: 8px 16px; font-size: 12px; }
.cth-btn-lg { padding: 18px 38px; font-size: 15px; }
.cth-btn-secondary { background: transparent; color: var(--text-heading); border-color: var(--border-strong); }
.cth-btn-secondary:hover { background: var(--cth-black); border-color: var(--cth-black); color: var(--cth-white); }
.cth-btn-gold { background: var(--cth-gold-500); border-color: var(--cth-gold-500); color: var(--cth-black); }
.cth-btn-gold:hover { background: var(--cth-gold-600); border-color: var(--cth-gold-600); color: var(--cth-black); }
.cth-btn-inverse { background: var(--cth-white); border-color: var(--cth-white); color: var(--cth-black); }
.cth-btn-inverse:hover { background: var(--cth-gold-500); border-color: var(--cth-gold-500); color: var(--cth-black); }

/* --- Forms (design system Input: underline field, square) ---------------- */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], textarea, select, .cth-input {
  font-family: var(--font-sans); font-size: 16px; color: var(--text-heading); background: var(--surface-card); border: 0; border-bottom: var(--border-rule) solid var(--border-strong); border-radius: 0; padding: 12px 14px; width: 100%; max-width: 100%; box-shadow: inset 0 0 0 1px var(--border-hairline); transition: border-color var(--dur-fast) var(--ease-out); }
input:focus, textarea:focus, select:focus { border-bottom-color: var(--cth-red-600); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-heading); }
.cth-search-form { display: flex; gap: var(--space-3); max-width: 560px; margin: var(--space-5) 0; }

/* --- Prose (plain pages and posts) ----------------------------------------- */
.cth-prose { max-width: var(--width-prose); }
.cth-prose > * + * { margin-top: 1em; }
.cth-prose p { margin: 0; }
.cth-prose h2 { font-size: var(--text-h2); margin-top: 1.6em; }
.cth-prose h3 { font-size: var(--text-h3); margin-top: 1.4em; }
.cth-prose h4 { font-size: var(--text-h4); margin-top: 1.2em; }
.cth-prose ul, .cth-prose ol { padding-left: 1.25em; }
.cth-prose li + li { margin-top: 0.4em; }
.cth-prose blockquote:not(.cth-press-quote) { margin: 1.6em 0; padding: 0; font-weight: 300; font-size: 1.5rem; line-height: 1.35; color: var(--text-heading); }
.cth-prose blockquote:not(.cth-press-quote)::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 4rem; line-height: 0.6; height: 0.5em; color: var(--cth-red-600); }
.cth-prose blockquote cite { display: block; margin-top: var(--space-3); font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.cth-prose img, .cth-prose figure { margin: 1.6em 0; height: auto; }
.cth-prose figcaption, .wp-caption-text { font-size: var(--text-caption); font-weight: 500; color: var(--text-muted); margin-top: var(--space-2); }
.cth-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.cth-prose th, .cth-prose td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--border-hairline); }
.cth-prose th { font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: var(--border-rule) solid var(--border-strong); }
.alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }

/* --- Single post --------------------------------------------------------- */
.cth-single-meta { margin-bottom: var(--space-5); }
.cth-meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.cth-single-image { margin: 0 0 var(--space-6); max-width: 880px; }
.cth-single-image img { width: 100%; height: auto; }
.post-navigation { margin-top: var(--space-8); border-top: var(--border-rule) solid var(--border-strong); padding-top: var(--space-5); }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { border: 0; display: grid; gap: var(--space-2); color: var(--text-heading); }
.post-navigation a:hover .cth-post-nav-title { color: var(--cth-red-600); }
.cth-post-nav-title { font-weight: 700; font-size: var(--text-h4); line-height: 1.25; transition: color var(--dur-fast) var(--ease-out); }

/* --- Cards (design system Card) ------------------------------------------ */
.cth-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-cards); }
@media (max-width: 960px) { .cth-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cth-card-grid { grid-template-columns: 1fr; } }
.cth-card { background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-hairline); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.cth-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.cth-card-link { display: flex; flex-direction: column; height: 100%; border: 0; color: inherit; }
.cth-card-link:hover { color: inherit; }
.cth-card-image { aspect-ratio: 3 / 2; --mono-layer: 0.36; }
.cth-card:hover .cth-card-image { --mono-layer: 0.2; }
.cth-card-body { padding: var(--pad-card); padding-bottom: calc(var(--pad-card) + 16px); display: grid; gap: var(--space-3); align-content: start; }
.cth-card-title { font-size: 1.25rem; line-height: 1.2; }
.cth-card-excerpt { margin: 0; font-size: var(--text-small); color: var(--text-muted); }

/* --- Section header, press quote, monotone band (CTH builder elements) --- */
.cth-section-header { display: grid; gap: 10px; justify-items: start; margin-bottom: var(--space-5); }
.cth-section-header > * { margin: 0 !important; }
.cth-section-header .cth-eyebrow { margin-top: 4px !important; }
.cth-section-header .cth-lead { margin-top: 8px !important; }
.cth-section-header.is-center { justify-items: center; text-align: center; }
.cth-section-header .cth-lead { margin: 0; max-width: var(--width-prose); }
.cth-press-quote { margin: 0; display: grid; gap: 14px; }
.cth-press-quote-mark { font-family: var(--font-display); color: var(--cth-red-600); display: block; line-height: 0.6; font-size: 61px; height: 0.32em; }
.cth-press-quote p, .cth-entry-builder .cth-press-quote p { margin: 0; font-weight: 300; font-size: 28px; line-height: 1.35; color: var(--text-heading); }
.cth-press-quote.is-sm .cth-press-quote-mark { font-size: 44px; }
.cth-press-quote.is-sm p { font-size: 20px; }
.cth-press-quote.is-lg .cth-press-quote-mark { font-size: 84px; }
.cth-press-quote.is-lg p { font-size: clamp(26px, 3vw, 38px); }
.cth-press-quote p + p { margin-top: 0.6em; }
.cth-press-quote p:has(> .cth-press-quote-mark:only-child) { display: contents; }
.cth-press-quote footer { font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.cth-dark .cth-press-quote footer { color: var(--cth-gold-500); }
/* In dark and red builder rows too: gold mark and source, light quote. */
:is(.vc_row:is(.textwhite, .whitetext, .blackrow, .cth-tone-black, .cth-tone-deep, .cth-tone-red, .cth-bgimage, .cth-bgvideo), .cth-monotone-block:not(.cth-monotone-gold), .cth-dark) .cth-press-quote :is(footer, .cth-press-quote-mark) { color: var(--cth-gold-500) !important; }
:is(.vc_row:is(.textwhite, .whitetext, .blackrow, .cth-tone-black, .cth-tone-deep, .cth-tone-red, .cth-bgimage, .cth-bgvideo), .cth-monotone-block:not(.cth-monotone-gold), .cth-dark) .cth-press-quote p { color: var(--cth-white) !important; }
.cth-monotone-block { display: flex; align-items: center; padding: var(--space-8) var(--cth-band-inline, var(--pad-gutter)); color: var(--cth-white); --text-heading: var(--cth-white); --text-body: var(--cth-white); }
.cth-monotone-block.cth-monotone-gold { color: var(--cth-black); --text-heading: var(--cth-black); --text-body: var(--cth-black); }
.cth-monotone-block.is-center { justify-content: center; text-align: center; }
.cth-monotone-content { max-width: 720px; }
.cth-monotone-content h1, .cth-monotone-content h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-display-2); line-height: var(--leading-display); }

/* --- Pagination (design system Pagination) -------------------------------- */
.cth-pagination, .navigation.pagination { margin-top: var(--space-8); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--space-3); border: 0; box-shadow: inset 0 0 0 1px var(--border-hairline); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-heading); background: var(--surface-card); }
a.page-numbers:hover { box-shadow: inset 0 0 0 2px var(--border-strong); color: var(--text-heading); }
.page-numbers.current { background: var(--cth-black); color: var(--cth-white); box-shadow: none; }
.page-numbers.dots { box-shadow: none; background: none; }

/* --- Comments ------------------------------------------------------------ */
.cth-comments { margin-top: var(--space-8); border-top: var(--border-rule) solid var(--border-strong); padding-top: var(--space-6); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { border-bottom: 1px solid var(--border-hairline); padding: var(--space-5) 0; }
.comment-meta { font-size: var(--text-caption); color: var(--text-muted); }

/* --- Widgets ------------------------------------------------------------- */
.widget + .widget { margin-top: var(--space-6); }
.widget-title { margin-bottom: var(--space-4); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-hairline); }

/* --- Footer -------------------------------------------------------------- */
.cth-site-footer { background-color: var(--cth-red-800); background-image: url(../images/grain.svg); background-size: 220px; color: rgba(249,237,237,.78); margin-top: 0; }
.cth-footer-grid { max-width: calc(var(--width-content) + 2 * var(--pad-gutter)); display: grid; grid-template-columns: 1.3fr 2fr 1.2fr; gap: var(--space-7); padding-top: 56px; padding-bottom: var(--space-7); }
/* Without a signup widget the link columns take the whole width beside the logo, in even
   columns, instead of leaving the right third empty. */
.cth-footer-grid:not(:has(.cth-footer-signup)) { grid-template-columns: minmax(200px, 1fr) minmax(0, 4fr); }
.cth-footer-grid:not(:has(.cth-footer-signup)) .cth-footer-menu { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cth-footer-brand .cth-logo img { width: 170px; height: auto; }
.cth-footer-blurb { font-size: 14px; line-height: 1.6; color: rgba(249,237,237,.78); margin: 18px 0 0; max-width: 300px; }
.cth-social { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.cth-social a { border: 0; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cth-gold-500); }
.cth-social a:hover { color: var(--cth-gold-400); }

.cth-footer-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-6) var(--space-5); }
.cth-footer-menu > li > a { display: block; border: 0; font-weight: 700; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cth-gold-500); margin-bottom: var(--space-3); }
.cth-footer-menu > li > a:hover { color: var(--cth-gold-400); }
/* Columns never push past the grid's right line: long labels ("Performance Archive", the Kindful
   donate item) wrap inside their column. */
.cth-footer-grid > *, .cth-footer-menu > li { min-width: 0; }
.cth-footer-menu a, .cth-footer-menu .kindful-donate-btn-design { white-space: normal !important; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; }
.cth-footer-menu .kindful-donate-btn-design { margin-left: 0 !important; margin-right: 0 !important; }
.cth-footer-menu .sub-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cth-footer-menu .sub-menu a { border: 0; font-size: 14px; color: rgba(249,237,237,.9); }
.cth-footer-menu .sub-menu a:hover { color: var(--cth-white); }
/* The gathered top-level links (Support, Shop, Press, Contact) keep their gold heading style. */
.cth-footer-menu > li.cth-footer-links > a { display: none; }
.cth-footer-menu > li.cth-footer-links > .sub-menu { gap: var(--space-4); }
.cth-footer-menu > li.cth-footer-links > .sub-menu a { font-weight: 700; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cth-gold-500); }
.cth-footer-menu > li.cth-footer-links > .sub-menu a:hover { color: var(--cth-gold-400); }

.cth-footer-signup { color: rgba(249,237,237,.78); font-size: 14px; }
.cth-footer-signup .widget-title { color: var(--cth-gold-500); }
.cth-footer-signup input[type="email"], .cth-footer-signup input[type="text"] { background: transparent; color: var(--cth-white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.4); }
.cth-footer-signup input[type="submit"], .cth-footer-signup button { background: var(--cth-gold-500); border-color: var(--cth-gold-500); color: var(--cth-black); }

.cth-footer-legal { border-top: 1px solid rgba(255,255,255,.12); }
.cth-footer-legal-inner { max-width: calc(var(--width-content) + 2 * var(--pad-gutter)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-top: 18px; padding-bottom: 18px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(249,237,237,.6); }
.cth-legal-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.cth-legal-menu a { border: 0; color: var(--cth-ink-400); }
.cth-legal-menu a:hover { color: var(--cth-white); }

@media (max-width: 960px) {
  .cth-footer-grid, .cth-footer-grid:not(:has(.cth-footer-signup)) { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* --- Team (dt_team, carried over from The7) ------------------------------- */
.cth-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6) var(--gap-cards); margin: var(--space-5) 0; }
.cth-team-card-inner { display: grid; gap: var(--space-2); border: 0; color: inherit; }
a.cth-team-card-inner:hover { color: inherit; }
.cth-team-photo { aspect-ratio: 4 / 5; --mono-layer: 0.3; margin-bottom: var(--space-2); background: var(--cth-ink-700); }
/* Portraits are monotone at rest and reveal their color on hover. */
.cth-team-photo .cth-monotone-photo { transition: filter var(--dur-slow, 400ms) var(--ease-out), transform var(--dur-slow, 400ms) var(--ease-out); }
.cth-team-card:hover .cth-team-photo, .cth-team-card:focus-within .cth-team-photo { --mono-layer: 0; }
.cth-team-card:hover .cth-monotone-photo, .cth-team-card:focus-within .cth-monotone-photo { filter: none; transform: scale(1.03); }
.cth-team-name { font-size: var(--text-h4); line-height: 1.2; }
a.cth-team-card-inner:hover .cth-team-name { color: var(--cth-red-600); }
.cth-team-position { margin: 0; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; color: var(--text-brand); }
.cth-team-single-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.cth-team-single-photo { margin: 0; }
.cth-team-single-photo img { width: 100%; height: auto; filter: grayscale(1) contrast(1.15); transition: filter var(--dur-slow, 400ms) var(--ease-out); }
.cth-team-single-photo:hover img { filter: none; }
@media (max-width: 800px) { .cth-team-single-grid { grid-template-columns: 1fr; } .cth-team-single-photo { max-width: 360px; } }

/* --- Button wrapper (dt_default_button carry-over) ------------------------ */
.cth-btn-wrap { margin: var(--space-4) 0; }
.cth-btn-wrap.is-center { text-align: center; }
.cth-btn-wrap.is-right { text-align: right; }

/* Phones: with Support and Tickets in the top bar, Menu shows as the icon alone. */
@media (max-width: 480px) {
  .cth-topbar-actions ~ .cth-menu-toggle .cth-menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cth-sidebar-top:has(.cth-topbar-actions) { gap: var(--space-2); }
  .cth-sidebar-top:has(.cth-topbar-actions) .cth-header-logo .cth-logo img { height: 44px; }
}

/* --- Front-page "Now on stage" hero ---------------------------------------- */
/* The hero overlaps the first row by the crown depth, so the crown's valleys show that row's own color. */
.cth-hero { z-index: 1; margin-bottom: calc(-1 * var(--crown-edge-depth)); --crown-edge-depth: 64px; --mono-layer: .78; min-height: min(78vh, 760px); display: flex; align-items: flex-end; color: var(--cth-white); background-color: var(--cth-red-700); padding: var(--space-9, 96px) 0 calc(var(--crown-edge-depth) + var(--space-8)); }
.cth-hero:not(.has-image) { background-image: url(../images/grain.svg), linear-gradient(155deg, var(--cth-red-600) 0%, var(--cth-red-800) 70%, var(--cth-red-900) 100%); background-size: 220px, auto; }
.cth-hero:not(.has-image) .cth-monotone-wash { display: none; }
.cth-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(20,4,4,.55) 0%, rgba(20,4,4,0) 60%); pointer-events: none; }
/* The show's own photo in natural colour (no duotone), under a dark scrim at the bottom and left for the text. */
.cth-hero.cth-hero-natural { background-color: var(--cth-black); }
.cth-hero.cth-hero-natural .cth-monotone-photo { filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; }
.cth-hero.cth-hero-natural .cth-monotone-wash { display: none; }
.cth-hero.cth-hero-natural::before { background: linear-gradient(0deg, rgba(10,6,6,.82) 0%, rgba(10,6,6,.4) 45%, rgba(10,6,6,0) 75%), linear-gradient(90deg, rgba(10,6,6,.6) 0%, rgba(10,6,6,0) 60%); }
.cth-hero-body { position: relative; width: 100%; }
.cth-hero-tags { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
/* The display face's tall caps sit above its tight line box, so the label row needs clear air above them. */
.cth-hero-tags + .cth-hero-title { padding-top: .14em; }
.cth-hero .cth-eyebrow { color: var(--cth-gold-500); }
.cth-hero-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--cth-white); font-size: clamp(4.5rem, 11vw, 9.5rem); line-height: .86; letter-spacing: 0.005em; margin: 0 0 var(--space-4); max-width: 12ch; text-wrap: balance; }
.cth-hero-meta { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; color: var(--cth-gold-400, #e9c46a); margin: 0 0 var(--space-6); }
.cth-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cth-btn-outline-light { background: transparent; border-color: var(--cth-white); color: var(--cth-white); }
.cth-btn-outline-light:hover { background: var(--cth-white); border-color: var(--cth-white); color: var(--cth-black); }
@media (max-width: 720px) { .cth-hero { --crown-edge-depth: 36px; min-height: 0; padding-top: var(--space-8); } .cth-hero-actions .cth-btn { flex: 1 1 100%; } }

/* "Free" badge: gold block, black condensed caps (hero, show details). */
.cth-badge-free { display: inline-block; padding: 5px 10px 3px; background: var(--cth-gold-500); color: var(--cth-black); font-family: var(--font-condensed); font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; }

/* --- Show details panel (builder element) --------------------------------- */
.cth-show-details { position: relative; background-color: var(--cth-black); color: var(--cth-white); padding: var(--space-6); display: grid; gap: var(--space-5); }
.cth-show-details-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 2px solid var(--cth-red-600); }
.cth-show-details .cth-show-details-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 44px; line-height: .9; color: var(--cth-white) !important; margin: 0; }
.cth-show-details dl { margin: 0; display: grid; gap: var(--space-4); }
.cth-show-details-row { display: grid; gap: 4px; }
.cth-show-details dt { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cth-gold-500); }
.cth-show-details dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--cth-white); }
.cth-show-details .cth-btn { width: 100%; }
/* Beside the synopsis on desktop, the panel stays in view while the synopsis scrolls. */
@media (min-width: 961px) {
  .vc_row:has(> .wpb_column .cth-show-details) { display: flex; flex-wrap: wrap; }
  .wpb_column:has(.cth-show-details) > .vc_column-inner, .wpb_column:has(.cth-show-details) > .vc_column-inner > .wpb_wrapper { height: 100%; }
  .cth-show-details { position: sticky; top: var(--space-6); }
  .admin-bar .cth-show-details { top: calc(var(--space-6) + 32px); }
}

/* --- Cast and creative grid (builder element; cards from the Team page) ----- */
.cth-cast { margin: var(--space-6) 0; }
.cth-cast .cth-cast-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-display-3); line-height: var(--leading-display); margin: 0 0 var(--space-5); }
.cth-cast-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 0; }
.cth-cast-initials { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 72px; line-height: 1; color: var(--cth-gold-500); letter-spacing: 0.02em; }
.cth-team-photo:has(.cth-cast-initials) .cth-monotone-wash { display: none; }
@media (max-width: 600px) { .cth-cast-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); } }

/* --- Crown edge over the first content row -------------------------------- */
/* The page header and hero overlap the content by the crown's depth, so the valleys show
   the first row's own color (a dark row runs up into the crown instead of a paper strip).
   The first row gets a transparent top border of the same depth, which keeps its own
   background but pushes its content clear of the peaks. */
.cth-page-header + .cth-main .cth-entry-builder .cth-first-row { border-top: 50px solid transparent; }
.cth-hero + .cth-main .cth-entry-builder .cth-first-row { border-top: 64px solid transparent; }
/* A light first row sits on the paper right under the crown: the crown depth already adds
   space, so it opens with a shorter gap than the 112px band rhythm. */
:is(.cth-page-header, .cth-hero) + .cth-main .cth-entry-builder .cth-first-row:not(.cth-tone-black, .cth-tone-deep, .cth-tone-red, .cth-bgimage, .textwhite, .whitetext, .blackrow, [data-vc-stretch-content]):not(.vc_row-has-fill) { padding-top: clamp(32px, 4vw, 56px) !important; }
/* Pages that don't open on a builder row keep a paper margin under the crown. */
.cth-page-header + .cth-main:not(:has(.cth-first-row)) { padding-top: 50px; }
.cth-hero + .cth-main:not(:has(.cth-first-row)) { padding-top: 64px; }
@media (max-width: 720px) {
  .cth-page-header + .cth-main .cth-entry-builder .cth-first-row { border-top-width: 32px; }
  .cth-hero + .cth-main .cth-entry-builder .cth-first-row { border-top-width: 36px; }
  .cth-page-header + .cth-main:not(:has(.cth-first-row)) { padding-top: 32px; }
  .cth-hero + .cth-main:not(:has(.cth-first-row)) { padding-top: 36px; }
}

/* --- Red and gold duotone (hero and show key art) -------------------------- */
/* Shadows go brand red, highlights go gold: the photo multiplies onto a gold ground,
   then a red layer lightens the dark end. Team and staff photos stay monotone. */
.cth-duo-redgold { background: var(--cth-gold-500); --mono-layer: 1; }
.cth-duo-redgold .cth-monotone-photo { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.2) brightness(1.05); }
.cth-duo-redgold .cth-monotone-wash { background: var(--cth-red-800); mix-blend-mode: lighten; opacity: 1; }
.cth-hero.cth-duo-redgold::before { background: linear-gradient(0deg, rgba(40,6,6,.78) 0%, rgba(40,6,6,.35) 45%, rgba(40,6,6,0) 75%), linear-gradient(90deg, rgba(40,6,6,.55) 0%, rgba(40,6,6,0) 60%); }
.cth-monotone-block.cth-duo-redgold { color: var(--cth-white); --text-heading: var(--cth-white); --text-body: var(--cth-white); }
.cth-monotone-block.cth-duo-redgold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(40,6,6,.6), rgba(40,6,6,.1)); }

/* --- Divider lines: solid, not sawtooth ----------------------------------- */
/* Alessandro found the zigzag rules too busy. [cth_crown_rule] and the section-header stub now
   draw plain solid lines; the crown shape stays only on the page header and hero edge. */
.cth-crown-rule, .cth-crown-rule-down { -webkit-mask: none; mask: none; height: 2px; margin: var(--space-6) 0; }
.cth-crown-rule.cth-crown-sm, .cth-crown-rule-down.cth-crown-sm { height: 1px; }
.cth-crown-rule.cth-crown-lg, .cth-crown-rule-down.cth-crown-lg, .cth-crown-rule.cth-crown-xl, .cth-crown-rule-down.cth-crown-xl { height: 3px; }
.cth-crown-rule.cth-crown-stub { width: 48px; height: 4px; margin: 0; }

/* Education and other young-audience pages: gold header band, black type. */
.cth-colorful .cth-page-header { background-color: var(--cth-gold-500); background-image: url(../images/grain.svg), linear-gradient(155deg, var(--cth-gold-400) 0%, var(--cth-gold-500) 55%, var(--cth-gold-600) 100%); color: var(--cth-black); }
.cth-colorful .cth-page-header .cth-page-title { color: var(--cth-black); }
.cth-colorful .cth-page-header .cth-page-lead { color: var(--cth-ink-800, #222); }
.cth-colorful .cth-page-header .cth-breadcrumb a, .cth-colorful .cth-page-header .cth-breadcrumb [aria-current] { color: var(--cth-black); }
.cth-colorful .cth-page-header .cth-breadcrumb li + li::before { color: var(--cth-red-600); }
.cth-colorful .cth-crumbbar { background: var(--cth-gold-050); }

/* --- Sidebar ember glow (desktop) ------------------------------------------ */
/* A very quiet take on the Othello header's moving heat: two soft dark-gray glows drift behind the
   menu, clipped to the sidebar. Pure CSS, transform and opacity only (composited, no JavaScript, no blur filters);
   still for visitors who prefer reduced motion. */
@media (min-width: 1101px) {
  .cth-sidebar { clip-path: inset(0); }
  .cth-sidebar::before, .cth-sidebar::after {
    content: ""; position: fixed; left: 0; z-index: -1; pointer-events: none;
    width: var(--sidebar-width); border-radius: 50%; will-change: transform, opacity;
  }
  .cth-sidebar::before {
    top: 8vh; height: 70vh;
    background: radial-gradient(closest-side, rgba(120, 120, 120, .30), rgba(80, 80, 80, .14) 55%, transparent);
    animation: cth-ember-a 26s ease-in-out infinite alternate;
  }
  .cth-sidebar::after {
    top: 45vh; height: 80vh;
    background: radial-gradient(closest-side, rgba(70, 70, 70, .40), rgba(40, 40, 40, .18) 55%, transparent);
    animation: cth-ember-b 34s ease-in-out infinite alternate;
  }
  .admin-bar .cth-sidebar::before { top: calc(8vh + 32px); }
}
@keyframes cth-ember-a {
  0%   { transform: translate(-30%, 0) scale(1.1); opacity: .7; }
  50%  { transform: translate(15%, 12vh) scale(1.35); opacity: 1; }
  100% { transform: translate(-10%, 28vh) scale(1.15); opacity: .8; }
}
@keyframes cth-ember-b {
  0%   { transform: translate(20%, 0) scale(1.3); opacity: .9; }
  50%  { transform: translate(-25%, -18vh) scale(1.1); opacity: .65; }
  100% { transform: translate(10%, -34vh) scale(1.4); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cth-sidebar::before, .cth-sidebar::after { animation: none; }
}

/* --- Reading scale (from the competitor measurements, 2026-10-19) ---------- */
/* Bigger, calmer reading type: body 17–20px, lead 20–24px, 1.55 line height; one giant
   display title per page (the page header), set tight; buttons 54px tall. */
:root {
  --text-body-size: clamp(1.0625rem, 0.9rem + 0.4vw, 1.25rem);
  --text-lead: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  --leading-body: 1.55;
}
.cth-page-title { font-size: clamp(4rem, 9vw, 10rem); line-height: 0.85; letter-spacing: 0; }
.cth-hero-title { line-height: 0.85; letter-spacing: 0; }
.cth-btn, .button, button.button, input[type="submit"] { font-size: 15px; padding: 19px 30px; min-height: 54px; }
.cth-btn-sm { font-size: 12px; padding: 9px 16px; min-height: 0; }
.cth-btn-lg { font-size: 16px; padding: 20px 40px; min-height: 58px; }
/* Phone header buttons keep a 44px tap height (Design System: hit areas never below 44px). The
   menu toggle gets 11px of side padding (44px wide), pulled back with a negative margin so the
   bars stay aligned to the gutter. */
.cth-topbar-actions .cth-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1100px) { .cth-menu-toggle { min-width: 44px; padding-left: 11px; padding-right: 11px; margin-right: -11px; justify-content: center; } .cth-topbar-actions + .cth-menu-toggle { margin-left: 0; } }
@media (max-width: 720px) { .cth-btn, .button, button.button, input[type="submit"] { padding: 16px 24px; min-height: 50px; } }

/* --- Production tiles (builder element) ------------------------------------ */
/* Image-led: the key art fills the tile in red and gold duotone, the title sits over it,
   and the photo's own colour comes through on hover. */
.cth-productions { margin: 0 0 var(--space-6); }
.cth-productions .cth-productions-title { margin: 0 0 var(--space-5); }
.cth-production-grid { display: grid; gap: var(--gap-cards, 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cth-production-grid.cols-1 { grid-template-columns: 1fr; }
.cth-production-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cth-production { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: var(--space-6); color: var(--cth-white); border: 0 !important; text-decoration: none; overflow: hidden; }
.cth-production-grid.cols-1 .cth-production { aspect-ratio: 21 / 9; }
.cth-production::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(20,4,4,.9) 0%, rgba(20,4,4,.6) 35%, rgba(20,4,4,.15) 70%, rgba(20,4,4,0) 90%); pointer-events: none; }
.cth-production-body, .cth-production-body * { color: var(--cth-white); }
.cth-production-body { position: relative; z-index: 2; display: grid; gap: var(--space-2); justify-items: start; }
.cth-production-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.5rem, 4.5vw, 4.5rem); line-height: .85; color: var(--cth-white) !important; text-wrap: balance; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.cth-production-grid.cols-3 .cth-production-title { font-size: clamp(2rem, 3vw, 3.25rem); }
/* A short tag after the title and dates ("NYT Critic's Pick"): light Gotham caps in gold, so it reads as a tag, not a heading. */
.cth-production-note { display: block; margin-top: 8px; font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; font-size: 14px; line-height: 1.4; color: var(--cth-gold-400, #e0b85a) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.cth-production-meta { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 18px; color: var(--cth-white) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.cth-production .cth-monotone-photo { transition: transform 600ms var(--ease-out), filter 400ms var(--ease-out), mix-blend-mode 0s; }
.cth-production .cth-monotone-wash { transition: opacity 400ms var(--ease-out); }
a.cth-production:hover .cth-monotone-photo, a.cth-production:focus-visible .cth-monotone-photo { transform: scale(1.04); filter: none; mix-blend-mode: normal; }
a.cth-production:hover .cth-monotone-wash, a.cth-production:focus-visible .cth-monotone-wash { opacity: 0; }
@media (max-width: 960px) { .cth-production-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cth-production-grid, .cth-production-grid.cols-3 { grid-template-columns: 1fr; } .cth-production, .cth-production-grid.cols-1 .cth-production { aspect-ratio: 4 / 3; padding: var(--space-5); } }

/* --- Mission band ([cth_mission], or row class "cth-mission") --------------- */
/* The mission statement as a poster: one big condensed line on red (or black, gold, or a
   red and gold duotone photo or video), a short paragraph and an optional button. No crown
   edge, per the minimal-divider rule; a short gold rule sits above the statement. */
.cth-mission-band { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; margin: 0 0 var(--space-6); padding: clamp(72px, 10vw, 160px) clamp(24px, 6vw, 96px); background: var(--cth-red-700); color: var(--cth-ink-100); }
.cth-mission-black { background: var(--cth-black); }
.cth-mission-gold { background: linear-gradient(160deg, var(--cth-gold-400), var(--cth-gold-600)); color: var(--cth-black); }
.cth-mission-band.cth-duo-redgold { background: var(--cth-gold-500); }
.cth-mission-band > .cth-monotone-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cth-mission-band > .cth-monotone-wash { z-index: -1; }
.cth-mission-band.has-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(40, 6, 6, .72), rgba(40, 6, 6, .25) 70%, transparent); }
.cth-mission-body { position: relative; max-width: 1100px; }
.cth-mission-band .cth-eyebrow, .vc_row.cth-mission :is(h4, .cth-eyebrow) { color: var(--cth-gold-500) !important; margin: 0 0 var(--space-4); }
.cth-mission-gold .cth-eyebrow { color: var(--cth-black) !important; }
.cth-mission-band .cth-mission-title, .cth-entry-builder .cth-mission-band .cth-mission-title, .cth-entry-builder .vc_row.cth-mission .wpb_column :is(h1, h2) {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0;
  font-size: min(clamp(3.5rem, 8.5vw, 9rem), 14cqi) !important; line-height: 0.86; max-width: 16ch;
  margin: 0 0 0.3em; color: var(--cth-white) !important;
}
.cth-mission-title::before { content: none; }
.cth-entry-builder .cth-mission-gold .cth-mission-title, .cth-mission-gold .cth-mission-title { color: var(--cth-black) !important; }
.cth-mission-gold .cth-mission-title::before { background: var(--cth-black); }
.cth-mission-text, .vc_row.cth-mission .wpb_text_column p { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
.cth-mission-text p { margin: 0 0 1em; }
/* A band with no title: the paragraph alone, a little larger, in a shorter band. */
.cth-mission-band:not(:has(.cth-mission-title)) { padding-block: clamp(56px, 7vw, 112px); }
.cth-mission-band:not(:has(.cth-mission-title)) .cth-mission-text { font-size: clamp(1.25rem, 1.6vw, 1.6rem); line-height: 1.5; max-width: 56ch; }
.cth-mission-text > :last-child { margin-bottom: 0; }
.cth-mission-cta { margin: var(--space-6) 0 0; }

/* Sidebar logo tilt (set by navigation.js from the mouse position; flat when not set). */
@media (min-width: 1101px) {
  .cth-header-logo { perspective: 700px; }
  .cth-header-logo :is(.cth-logo, .custom-logo-link) { transform: rotateX(var(--cth-tilt-x, 0deg)) rotateY(var(--cth-tilt-y, 0deg)); transform-origin: 50% 50%; backface-visibility: hidden; }
}

/* --- Page transitions (Customize > CTH effects) ------------------------------ */
/* The sidebar is captured on its own, so it stays still while the page underneath fades and
   lifts into place; the gold marker by the current menu item glides to the new item. */
.cth-fx-transitions .cth-sidebar { view-transition-name: cth-sidebar; }
.cth-fx-transitions .cth-menu > li > a::before { content: none !important; }
.cth-menu-marker { display: inline-block; width: 5px; height: 20px; margin-right: 10px; vertical-align: -1px; background: var(--cth-gold-500); view-transition-name: cth-menu-marker; }
::view-transition-old(root) { animation: cth-vt-out 220ms var(--ease-out, ease-out) both; }
::view-transition-new(root) { animation: cth-vt-in 380ms var(--ease-out, ease-out) both; }
::view-transition-group(cth-menu-marker) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@keyframes cth-vt-out { to { opacity: 0; } }
@keyframes cth-vt-in { from { opacity: 0; transform: translateY(14px); } }

/* --- Stage spotlight (Customize > CTH effects) ------------------------------- */
/* A soft, angled warm stage light over the sidebar that follows the mouse (resting near the logo when
   the mouse is elsewhere). It replaces the drifting gray glow. Gradients placed by CSS variables
   from navigation.js; no animation runs while the mouse is still. */
@media (min-width: 1101px) {
  .cth-fx-spotlight .cth-sidebar::after { display: none; }
  .cth-fx-spotlight .cth-sidebar::before {
    top: 0; height: 100vh; border-radius: 0; animation: none; will-change: auto; transform: none;
    /* A soft, warm stage light angled in from up and to the left: a wide oval pool with its
       brightest point pushed toward the instrument. Plain dark ground, no texture. */
    --cth-spot-at: var(--cth-spot-x, 50%) var(--cth-spot-y, 16%);
    --cth-hot-at: calc(var(--cth-spot-x, 140px) - 30px) calc(var(--cth-spot-y, 16vh) - 20px);
    background:
      radial-gradient(ellipse 140px 100px at var(--cth-hot-at), rgba(255, 240, 214, .1), transparent 100%),
      radial-gradient(ellipse 300px 230px at var(--cth-spot-at), rgba(255, 232, 198, .2) 0, rgba(255, 228, 190, .1) 45%, transparent 100%);
    opacity: .55; transition: opacity .4s var(--ease-out, ease-out);
  }
  .cth-fx-spotlight .cth-sidebar.is-lit::before { opacity: 1; }
  .admin-bar.cth-fx-spotlight .cth-sidebar::before { top: 32px; }
}

/* The sidebar scrolls up and down only. A tilted logo or a long menu label must never make it
   scroll sideways (that shifted the whole menu left, clipping the labels). */
@media (min-width: 1101px) {
  .cth-sidebar { overflow-x: hidden; }
  .cth-header-logo { overflow: clip; overflow-clip-margin: 12px; }
}

/* Full-width bands built from page elements (mission band, monotone photo block) line their
   text up with the page's content column, not with the window edge. */
.cth-mission-band, .cth-monotone-block { --cth-band-inline: max(var(--pad-gutter), calc((100% - var(--width-content)) / 2)); }
.cth-mission-band { padding-left: var(--cth-band-inline); padding-right: var(--cth-band-inline); }

/* Footer: single links (Support CTH, Performance Archive) stay on one line. */
.cth-footer-menu > li.cth-footer-links > .sub-menu a { letter-spacing: 0.1em; }
@media (min-width: 900px) { .cth-footer-menu > li.cth-footer-links > .sub-menu a { white-space: nowrap; } }

/* The page's last band meets the footer directly, with no empty strip of paper between. */
.cth-entry-builder:has(.vc_row) { padding-bottom: 0; }
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > p:last-child { margin: 0; }

/* Phone: people grids go two-up instead of one full-width headshot per row (audit 20). Covers
   the theme's team grid and builder rows of three or more columns that each hold a portrait. */
@media (max-width: 600px) {
  .cth-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .cth-team-name { font-size: 18px; }
  .cth-team-position { font-size: 13px; }
}
@media (max-width: 767px) {
  .cth-entry-builder .vc_row:has(> .wpb_column:nth-child(3)):not(:has(> .wpb_column:not(:has(.wpb_single_image)))) { display: flex; flex-wrap: wrap; }
  .cth-entry-builder .vc_row:has(> .wpb_column:nth-child(3)):not(:has(> .wpb_column:not(:has(.wpb_single_image)))) > .wpb_column { width: 50%; }
}

/* Category and tag archives: larger card titles (audit 21). */
:is(.archive, .blog, .search) .cth-card-title { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; }

/* Long credit lists (funders, supporters): add the class cth-credits to the text block for small
   left-aligned body text in two or three columns (audit 19). */
.cth-credits, .cth-entry-builder .cth-credits :is(p, span, h1, h2, h3, h4, h5, h6) { font-family: var(--font-sans) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; text-align: left !important; }
.cth-credits { columns: 3 220px; column-gap: var(--space-6); }

/* --- Sculpted menu (Customize > CTH effects > spotlight) ------------------------------------
   A quieter take on a lit gold-letter wall: labels in a soft brushed-gold finish, standing well
   off the wall so a long, soft shadow falls below and to the right (plus a tight contact shadow), thin raised rails between items,
   a gold-plate Support button and framed social tiles, under a gentle diagonal beam from the top
   left. All static paint (gradients, one drop-shadow filter per label); nothing moves but
   the pointer spotlight. navigation.js moves each shadow away from the light as it follows the
   mouse (--sx/--sy/--sb per element); without a mouse, or with reduced motion, the light rests at
   the top left and the shadows stay put. Desktop only; turning the spotlight effect off restores the flat menu. */
@media (min-width: 1101px) {
  /* Gentle beam: a soft diagonal shaft from the top left, no haze. */
  .cth-fx-spotlight .cth-sidebar::after { display: block !important; content: ""; position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width); height: auto; z-index: -1; pointer-events: none; animation: none; transform: none; opacity: 1; border-radius: 0;
    background: radial-gradient(ellipse 260px 340px at 0 0, rgba(255, 238, 210, .055) 0%, rgba(255, 236, 206, .025) 50%, transparent 100%); } /* the instrument's spill: the top-left corner always catches light */
  .admin-bar.cth-fx-spotlight .cth-sidebar::after { top: 32px; }

  /* Flat gold letters with only the soft cast shadow from the stage light. No offset edge
     or duplicate layer under the letters, lit or not. */
  .cth-fx-spotlight .cth-menu > li:not(.cth-menu-cta):not(.cth-menu-tickets) > a {
    background: none; color: var(--cth-gold-500);
    filter: drop-shadow(var(--sx, 12px) var(--sy, 24px) var(--sb, 9px) rgba(0, 0, 0, var(--sa, .5)));
    -webkit-mask-image: none; mask-image: none; /* nothing may clip the long shadow */
    transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out), color var(--dur-fast) var(--ease-out), filter 160ms linear;
  }
  .cth-fx-spotlight .cth-menu > li:not(.cth-menu-cta):not(.cth-menu-tickets) > a:is(:hover, :focus-visible),
  .cth-fx-spotlight .cth-menu > :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent):not(.cth-menu-cta):not(.cth-menu-tickets) > a {
    color: #f4f1ea;
  }
  .cth-fx-spotlight .cth-menu .sub-menu a { filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, .3)); }
  .cth-fx-spotlight .cth-submenu-toggle { filter: drop-shadow(calc(var(--sx, 22px) * .6) calc(var(--sy, 20px) * .6) calc(var(--sb, 13px) * .6) rgba(0, 0, 0, var(--sa, .5))); color: #9a9da2; transition: filter 160ms linear; }

  /* Divider lines: flat and flush with the wall, one constant colour, no shadow or highlight. */
  .cth-fx-spotlight .cth-menu > li, .cth-fx-spotlight .cth-menu > li:first-child { border: 0; position: relative; }
  .cth-fx-spotlight .cth-menu > li:not(.cth-menu-cta):not(.cth-menu-tickets)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
    background: rgba(255, 255, 255, .12); box-shadow: none;
  }

  /* Support: a solid gold plate with a light top edge and a soft shadow. Tickets: a framed plate. */
  .cth-fx-spotlight .cth-menu > li.cth-menu-cta > a {
    background: linear-gradient(var(--ga, 150deg), rgba(255, 248, 225, calc(var(--hl, .2) * .55)) 0%, rgba(255, 248, 225, 0) 45%), linear-gradient(180deg, #e3bd62 0%, #d2a344 55%, #bf9136 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(.2 + var(--hl, .2) * .4)), inset 0 -1px 0 rgba(0, 0, 0, .18), 1px 2px 2px rgba(0, 0, 0, .35), var(--sx, 22px) var(--sy, 20px) calc(var(--sb, 13px) * 1.4) rgba(0, 0, 0, var(--sa, .5));
    transition: box-shadow 160ms linear, background 160ms linear;
  }
  .cth-fx-spotlight .cth-menu > li.cth-menu-cta > a:hover { background: linear-gradient(180deg, #ecca75 0%, #ddb052 55%, #c99a3e 100%); }
  .cth-fx-spotlight .cth-menu > li.cth-menu-tickets > a { box-shadow: inset 0 0 0 2px var(--cth-gold-500), var(--sx, 22px) var(--sy, 20px) calc(var(--sb, 13px) * 1.4) rgba(0, 0, 0, calc(var(--sa, .4) * .7)); transition: box-shadow 160ms linear, background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

  /* Social icons: framed gold tiles. */
  .cth-fx-spotlight .cth-sidebar .cth-social-icons a {
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .15));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(.05 + var(--hl, .2) * .3)), 1px 2px 2px rgba(0, 0, 0, .3), calc(var(--sx, 22px) * .8) calc(var(--sy, 20px) * .8) calc(var(--sb, 13px) * 1.2) rgba(0, 0, 0, var(--sa, .5));
    transition: box-shadow 160ms linear, background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .cth-fx-spotlight .cth-sidebar .cth-social-icons a svg { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)); }

  /* The logo stands off the wall too. Its wrapper normally clips (so the tilt can't widen the
     sidebar); here it lets the shadow overflow, and the sidebar's overflow-x guard still holds. */
  .cth-fx-spotlight .cth-header-logo { overflow: visible; }
  .cth-fx-spotlight .cth-sidebar .cth-logo img { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .4)) drop-shadow(var(--sx, 22px) var(--sy, 20px) calc(var(--sb, 13px) * 1.2) rgba(0, 0, 0, var(--sa, .5))); transition: filter 160ms linear; }
}
/* The stage light's pool (navigation.js): a soft disc that the script moves, turns and stretches
   into the ellipse a cone throws on the wall. It replaces the CSS pool once the script runs. */
@media (min-width: 1101px) {
  .cth-fx-spotlight .cth-sidebar.has-stage-light::before { display: none; }
  .cth-stage-pool { position: fixed; top: 0; left: 0; width: 200px; height: 200px; z-index: -1; pointer-events: none; will-change: transform, opacity;
    /* --p1/--p2/--p3 come from navigation.js: a tight, hard edge near the instrument, a broad soft one far away. */
    background: radial-gradient(circle closest-side at 44% 50%, rgba(255, 242, 218, .22) 0%, rgba(255, 236, 206, .15) var(--p1, 40%), rgba(255, 228, 190, .035) var(--p2, 76%), rgba(255, 228, 190, 0) var(--p3, 100%));
    opacity: 0; }
  /* The shaft of light from the corner to the pool: a tapered wedge, soft at its sides. */
  .cth-stage-beam { position: fixed; top: 0; left: 0; width: 100px; height: 100px; z-index: -1; pointer-events: none; transform-origin: 0 50%; will-change: transform, opacity;
    background: linear-gradient(90deg, rgba(255, 240, 214, .045) 0%, rgba(255, 236, 206, .035) 35%, rgba(255, 232, 198, .025) 75%, rgba(255, 232, 198, .045) 100%);
    clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 62%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%), linear-gradient(90deg, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%), linear-gradient(90deg, #000 85%, transparent 100%); mask-composite: intersect;
    opacity: 0; }
}
/* Follow spot (navigation.js): a gold rule and a warm wash glide to the hovered menu item. */
@media (min-width: 1101px) {
  .cth-follow-rule, .cth-follow-wash { position: absolute; top: 0; pointer-events: none; opacity: 0; will-change: transform;
    transition: transform 450ms cubic-bezier(.2, .8, .2, 1), height 450ms cubic-bezier(.2, .8, .2, 1), opacity 300ms ease; }
  .cth-follow-rule { left: 0; width: 3px; height: 0; background: var(--cth-gold-500); box-shadow: 0 0 12px rgba(210, 163, 68, .55); z-index: 2; }
  .cth-follow-wash { left: 0; right: 0; height: 0; background: linear-gradient(90deg, rgba(210, 163, 68, .12), rgba(210, 163, 68, .04) 55%, transparent 80%); z-index: -1; }
  .cth-sidebar.has-follow .cth-follow-rule, .cth-sidebar.has-follow .cth-follow-wash { opacity: 1; }
}
@media (max-width: 1100px), (prefers-reduced-motion: reduce) { .cth-follow-rule, .cth-follow-wash { transition: opacity 300ms ease; } }
@media (max-width: 1100px) { .cth-follow-rule, .cth-follow-wash { display: none; } }
@media (max-width: 1100px) { .cth-stage-pool, .cth-stage-beam { display: none; } }
@media (min-width: 1101px) and (forced-colors: active) {
  .cth-fx-spotlight .cth-menu > li > a { background: none !important; color: LinkText !important; filter: none !important; }
}

/* Crown reveal (Customize > CTH effects): where the stage light falls on the logo's crown, a
   production photo shows through inside the crown's shape (photos take turns), with a slow cross-fade and a gentle settle,
   under a red wash so the crown still reads as the crown. Desktop pointers only; navigation.js
   loads the photos on the first hover. */
.cth-crown-reveal { display: none; }
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .cth-header-logo .cth-logo { position: relative; }
  /* Two masks, intersected: the crown's shape and the stage light's pool (a soft disc at the
     light's position, --lx/--ly from navigation.js), so only the lit part of the crown shows the photo. */
  .cth-crown-reveal { display: block; position: absolute; left: 0; top: 0; width: calc(172 / 700 * 100%); height: 100%; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 700ms ease;
    -webkit-mask-image: url(../images/cth-crown-mask.png), radial-gradient(circle var(--lr, 150px) at var(--lx, -300px) var(--ly, -300px), #000 0%, rgba(0, 0, 0, .85) 40%, rgba(0, 0, 0, .35) 75%, transparent 100%);
    mask-image: url(../images/cth-crown-mask.png), radial-gradient(circle var(--lr, 150px) at var(--lx, -300px) var(--ly, -300px), #000 0%, rgba(0, 0, 0, .85) 40%, rgba(0, 0, 0, .35) 75%, transparent 100%);
    -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .cth-crown-reveal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(150, 18, 18, .26), rgba(150, 18, 18, .06) 45%, rgba(110, 10, 10, .32)); mix-blend-mode: multiply; }
  .cth-crown-photo { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.06); filter: grayscale(.6) contrast(1.1); transition: opacity 1200ms ease, transform 3600ms cubic-bezier(.2, .7, .2, 1); }
  /* A hint, not a full reveal: half-monotone, about half opacity, so the crown's red still carries it. */
  .cth-crown-photo.is-on { opacity: .55; transform: none; }
  .cth-header-logo.is-revealing .cth-crown-reveal { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cth-crown-photo { transform: none; transition: opacity 400ms ease; } }

/* --- Now playing page: show details and the reservation panel ------------- */
.cth-now-playing { background: var(--cth-black); color: var(--cth-white); padding-top: calc(var(--space-9, 96px) + 32px); }
.cth-now-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.cth-now-about .cth-prose { color: rgba(255, 255, 255, .86); font-size: clamp(17px, 1.3vw, 20px); }
.cth-now-cta { margin-top: var(--space-6, 32px); }
.cth-now-facts { border-top: 2px solid var(--cth-gold-500); padding-top: var(--space-5, 24px); }
.cth-now-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 0 0 var(--space-6, 32px); }
.cth-now-facts dt, .cth-now-times-title { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cth-gold-500); margin: 0; }
.cth-now-facts dd { margin: 0; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1.2; }
.cth-now-times-title { margin-bottom: 12px; }
.cth-now-times { list-style: none; margin: 0; padding: 0; }
.cth-now-times li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 15px; }
.cth-now-times li span:last-child { color: var(--cth-gold-500); white-space: nowrap; }
@media (max-width: 860px) { .cth-now-grid { grid-template-columns: 1fr; } }
.cth-reserve { width: min(720px, calc(100vw - 24px)); height: min(900px, calc(100dvh - 24px)); max-width: none; max-height: none; padding: 0; border: 0; background: var(--cth-black); color: var(--cth-white); box-shadow: 0 24px 80px rgba(0, 0, 0, .6); flex-direction: column; }
.cth-reserve[open] { display: flex; }
.cth-reserve::backdrop { background: rgba(11, 11, 11, .78); }
.cth-reserve-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 20px; border-bottom: 2px solid var(--cth-red-600); }
.cth-reserve-title { margin: 0; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; font-size: 22px; color: var(--cth-gold-500); }
.cth-reserve-close { width: 44px; height: 44px; border: 0; background: none; color: var(--cth-white); font-size: 32px; line-height: 1; cursor: pointer; }
.cth-reserve-frame { position: relative; flex: 1; background: #fff; }
.cth-reserve-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cth-reserve-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #555; }
.cth-reserve.is-loaded .cth-reserve-loading { display: none; }
.cth-reserve-alt { margin: 0; padding: 10px 20px; font-size: 13px; }
.cth-reserve-alt a { color: var(--cth-gold-500); }
.cth-reserve-open { overflow: hidden; }
/* Seat map (Customize > CTH now on stage): beside the form on wide screens. On phones the panel
   opens on the form's tab; the Seat map tab shows the map across the whole panel, to swipe
   sideways, with a button back to the form. */
.cth-reserve.has-map { width: min(1280px, calc(100vw - 24px)); }
.cth-reserve-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); grid-template-rows: minmax(0, 1fr); min-height: 0; }
.cth-reserve-tabs { display: none; }
.cth-reserve-map { grid-row: 1; grid-column: 1; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; background: var(--cth-black); }
.cth-reserve-body > .cth-reserve-frame { grid-row: 1; grid-column: 2; }
.cth-reserve-map-pan { min-height: 0; }
.cth-reserve-map img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: top left; }
.cth-reserve-map figcaption { order: -1; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--cth-gold-500); }
.cth-reserve-map-next { display: none; }
.cth-reserve.is-other-show :is(.cth-reserve-map, .cth-reserve-tabs) { display: none !important; }
.cth-reserve.is-other-show .cth-reserve-body { grid-template-columns: minmax(0, 1fr); }
.cth-reserve.is-other-show .cth-reserve-body > .cth-reserve-frame { grid-column: 1; grid-row: 1 / -1; }
.cth-reserve.has-map.is-other-show { width: min(720px, calc(100vw - 24px)); }
@media (max-width: 900px) {
  .cth-reserve.has-map { width: min(720px, calc(100vw - 24px)); }
  .cth-reserve-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .cth-reserve-tabs { grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; background: var(--cth-black); }
  .cth-reserve-tabs button { min-height: 48px; padding: 8px 12px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--cth-ink-300); font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; cursor: pointer; }
  .cth-reserve-tabs button[aria-selected="true"] { color: var(--cth-gold-500); border-bottom-color: var(--cth-gold-500); }
  .cth-reserve-body > .cth-reserve-frame, .cth-reserve-map { grid-row: 2; grid-column: 1; }
  .cth-reserve-map { display: none; position: relative; padding: 0; overflow: hidden; z-index: 1; }
  .cth-reserve.is-tab-map .cth-reserve-map { display: block; }
  .cth-reserve-map-next { display: inline-flex; position: absolute; right: 12px; bottom: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
  .cth-reserve.is-tab-map .cth-reserve-frame { visibility: hidden; }
  .cth-reserve-map figcaption { display: none; }
  /* The map fills the panel's height, so it reads at a useful size; swipe sideways (or pinch) to see the rest. */
  .cth-reserve-map-pan { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; background: #fff; }
  .cth-reserve-map img { width: auto; height: 100%; max-width: none; max-height: none; }
}
/* The black details band runs up behind the banner's crown cut, so no light shows through it. */
.cth-hero + .cth-main.cth-now-page { padding-top: 0; }
@media (max-width: 1100px) { .cth-now-playing { padding-top: calc(var(--space-8, 64px) + 36px); } }
.cth-now-copy p { margin: 0 0 1em; }
.cth-now-copy p:last-child { margin-bottom: 0; }
.cth-now-copy strong { color: var(--cth-gold-500); font-weight: 700; }
.cth-now-copy a { color: var(--cth-gold-500); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cth-now-divider { border: 0; height: 1px; background: rgba(210, 163, 68, .45); margin: clamp(28px, 3vw, 44px) 0; }
/* A show band placed inside a page (Literary Series): it sits in the builder's own column. */
.cth-now-playing.is-inline { padding: clamp(40px, 5vw, 72px) 0; background: none; color: inherit; }
.cth-now-playing.is-inline > .cth-container { padding: 0; max-width: none; }
.cth-now-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-display-2, clamp(2.5rem, 5vw, 4rem)); line-height: .9; margin: 0 0 var(--space-5, 24px); }
.cth-now-playing.is-inline .cth-now-about .cth-prose { color: inherit; }
.cth-next-show-between { padding: clamp(24px, 3vw, 40px) 0; }
.cth-now-playing .cth-now-facts .cth-now-times-title { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--cth-gold-500); margin: 0 0 12px; }
.cth-now-playing .cth-now-facts .cth-now-times { list-style: none; margin: 0; padding: 0; }
.cth-now-playing.is-inline .cth-now-times li { border-bottom-color: var(--border-default, rgba(0, 0, 0, .12)); }
.cth-now-playing.is-inline .cth-now-copy strong { color: var(--cth-red-600); }

/* [cth_next_show style="hero"]: the Now playing top inside a page. No crown edge (the page
   header has it), so no overlap to make room for; a little shorter than the home banner. */
.cth-next-show.is-hero .cth-next-hero { z-index: 0; margin-bottom: 0; min-height: min(62vh, 600px); padding: var(--space-9, 96px) 0 var(--space-8, 64px); }
.cth-next-show.is-hero .cth-next-hero-text { color: var(--cth-white); max-width: 56ch; margin-top: var(--space-4, 16px); }
.cth-next-show.is-hero .cth-next-hero-text a { color: var(--cth-gold-500); }
.cth-next-show.is-hero + .cth-now-playing { padding-top: var(--space-8, 64px); }
.cth-entry-builder .cth-next-show.is-hero h2.cth-hero-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(3rem, 7.5vw, 7rem); line-height: .86; color: var(--cth-white) !important; margin: 0 0 var(--space-4); max-width: 16ch; overflow-wrap: normal; }
/* Without a photo the band is near-black, not red, so it reads apart from the red page header. */
.cth-next-show.is-hero .cth-next-hero:not(.has-image) { background-color: var(--cth-black); background-image: url(../images/grain.svg), radial-gradient(120% 90% at 15% 0%, rgba(140, 20, 20, .35) 0%, rgba(10, 6, 6, 0) 60%), linear-gradient(180deg, #161010 0%, var(--cth-black) 100%); background-size: 220px, auto, auto; }
/* As the page's first band it runs up under the page header's crown edge, so the teeth cut into
   the dark band instead of showing a strip of page colour. */
.cth-page-header + .cth-main .cth-entry-builder .cth-first-row:has(.cth-next-show.is-hero) { border-top-width: 0 !important; }
.cth-page-header + .cth-main:not(:has(.cth-first-row)):has(.cth-entry-builder > .cth-next-show.is-hero:first-child) { padding-top: 0; }

/* Team and board cards: the title sits right under the name, and the name is a size up. The
   builder's heading and paragraph margins otherwise opened a gap between them. */
.cth-team-card .cth-team-card-inner { gap: 0; }
.cth-team-card .cth-team-photo { margin-bottom: var(--space-4, 16px); }
:is(.cth-entry-builder, .cth-main) .cth-team-card h3.cth-team-name { font-size: clamp(24px, 2vw, 30px); line-height: 1.05; margin: 0 0 6px; padding: 0; }
:is(.cth-entry-builder, .cth-main) .cth-team-card p.cth-team-position { margin: 0; padding: 0; }
@media (max-width: 767px) { :is(.cth-entry-builder, .cth-main) .cth-team-card h3.cth-team-name { font-size: 22px; } }

/* --- Signup forms (Bloomerang email list, and any form in the signup popup) ----------------
   Bloomerang's embed brings small boxed fields with no padding. Here: open underline fields
   that take their colour from the band they sit on (light or dark), quiet spaced labels,
   first and last name side by side, a real checkbox line and room to breathe. */
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) {
  --sf-line: color-mix(in srgb, currentColor 38%, transparent);
  --sf-soft: color-mix(in srgb, currentColor 62%, transparent);
  max-width: 560px; margin: 0; font-family: var(--font-sans);
}
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form) :is(.section, fieldset) {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 26px 24px; border: 0; padding: 0; margin: 0;
}
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form) :is(.section, fieldset) > * { grid-column: 1 / -1; min-width: 0; }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form) :is(.section, fieldset) > :is(.first-name, .last-name, [class*="first-name"], [class*="last-name"]) { grid-column: auto; }
/* Bloomerang's own "Contact Information" heading repeats the band's title. */
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form) :is(.section, fieldset) > :is(h3, h4, legend) { display: none !important; }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) .field { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) label {
  display: inline-block; margin: 0 0 6px !important; font-family: var(--font-sans) !important; font-weight: 700 !important; font-size: 11px !important; line-height: 1.4 !important;
  letter-spacing: .16em !important; text-transform: uppercase; color: var(--sf-soft) !important;
}
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(.required-star, .required-indicator, abbr) { color: var(--cth-gold-500) !important; margin-left: 4px; text-decoration: none; }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  display: block; width: 100% !important; max-width: none !important; height: auto !important; min-height: 50px; margin: 0 !important;
  padding: 10px 0 12px !important; background: transparent !important; color: inherit !important;
  font-family: var(--font-sans) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important;
  border: 0 !important; border-bottom: 1px solid var(--sf-line) !important; border-radius: 0 !important; box-shadow: none !important;
  transition: border-color var(--dur-fast, 160ms) var(--ease-out, ease), box-shadow var(--dur-fast, 160ms) var(--ease-out, ease);
}
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(input, select, textarea)::placeholder { color: var(--sf-soft); opacity: .7; }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus {
  outline: none !important; border-bottom-color: var(--cth-gold-500) !important; box-shadow: 0 1px 0 0 var(--cth-gold-500) !important;
}
/* "I want to receive emails at this address": a checkbox line in sentence case. */
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(.email-opt-in, .checkbox, .field:has(input[type="checkbox"])) { display: flex !important; align-items: center; gap: 12px; }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) input[type="checkbox"] { width: 20px !important; height: 20px !important; margin: 0 !important; flex: none; accent-color: var(--cth-gold-500); }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(.email-opt-in, .checkbox, .field:has(input[type="checkbox"])) label {
  margin: 0 !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none; color: inherit !important; opacity: .85;
}
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(.btn-group, .actions, p:has(> [type="submit"])) { margin: 32px 0 0 !important; padding: 0 !important; }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(input[type="submit"], button[type="submit"]) { min-width: 200px; margin: 0 !important; }
:is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(.error, .field-error, label.error) { color: var(--cth-gold-500) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none; font-weight: 400 !important; margin-top: 6px !important; }
@media (max-width: 560px) {
  :is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form) :is(.section, fieldset) { grid-template-columns: 1fr; gap: 22px; }
  :is(#email-registration-form, form[id*="registration-form" i], [id*="bloomerang" i] form, [class*="bloomerang" i] form, .pum-content form) :is(input[type="submit"], button[type="submit"]) { width: 100%; }
}
/* Bloomerang's real markup: labels wrap a .label span and the star, and the opt-in is a plain
   .consent sentence (no checkbox), so labels stack above their field and the consent line reads
   as a quiet note. */
:is(#email-registration-form, form[id*="registration-form" i]) label { display: block !important; }
:is(#email-registration-form, form[id*="registration-form" i]) .label { color: inherit !important; }
:is(#email-registration-form, form[id*="registration-form" i]) .consent { grid-column: 1 / -1; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.5; opacity: .75; }

/* --- Header photo: a production photo faded in on the right of the red page header -------------
   (like Impact's audience). Monotone, blended into the red so the header stays one colour, and
   fading out toward the title so the title always sits on plain red. */
.cth-page-header-photo { position: absolute; inset: 0 0 0 var(--cth-photo-left, 32%); z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.7) 14%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.7) 14%, #000 40%); }
.cth-page-header-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: .5; }
.cth-page-header-photo.is-wide img { object-position: center 62%; }
/* The photo shows only once navigation.js has placed it clear of the title (with the real font),
   so it never jumps; it fades in instead. */
.cth-page-header-photo { opacity: 0; transition: opacity 600ms var(--ease-out, ease); }
.cth-page-header-photo.is-placed { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cth-page-header-photo { transition: none; } }
.cth-page-header.has-photo > .cth-container { position: relative; z-index: 1; }
.cth-colorful .cth-page-header-photo img { mix-blend-mode: multiply; opacity: .35; }
/* Phones keep the header's own height: the photo sits faintly behind it, fading in from the top
   so the title stays on clean red and the people show lower down. */
@media (max-width: 720px) {
  .cth-page-header-photo { inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 45%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 45%, #000 100%); }
  .cth-page-header-photo img { opacity: .4; }
  .cth-page-header-photo.is-wide img { object-position: center 60%; }
}