/* CTH theme: WPBakery Page Builder output, restyled to the design system.
   Existing page content is untouched; these rules re-skin what WPBakery prints.
   !important is used only where WPBakery writes inline styles (custom button colors,
   rounded image/button shapes) that would otherwise override the brand. */

/* --- Rows and columns ---------------------------------------------------- */
.cth-entry-builder { padding-bottom: var(--space-8); }
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:first-child:not([data-vc-full-width]) { margin-top: 0; }
.vc_row[data-vc-full-width] { margin-bottom: 0; }
.vc_row.vc_row-has-fill { padding-top: var(--space-7); padding-bottom: var(--space-6); }
.vc_row[data-vc-stretch-content] .vc_column-inner { padding-left: var(--pad-gutter); padding-right: var(--pad-gutter); }
.vc_row[data-vc-stretch-content].vc_row-no-padding .vc_column-inner { padding-left: 0; padding-right: 0; }
.wpb_content_element, .vc_btn3-container, .vc_separator { margin-bottom: var(--space-6); }

/* Row helper classes the site's pages already use (el_class), defined for the new theme. */
.vc_row.textwhite, .vc_row.whitetext { --text-heading: var(--cth-white); --text-body: var(--cth-ink-200); --text-link: var(--cth-gold-500); --text-link-hover: var(--cth-gold-400); color: var(--cth-ink-200); }
.vc_row.headingswhite { --text-heading: var(--cth-white); }
/* Dark tone rows (picked in the builder or found from the row colour) read light, like .textwhite. */
.vc_row:is(.cth-tone-black, .cth-tone-deep, .cth-tone-red) { --text-heading: var(--cth-white); --text-body: var(--cth-ink-200); --text-link: var(--cth-gold-500); --text-link-hover: var(--cth-gold-400); --border-hairline: rgba(255,255,255,.14); color: var(--cth-ink-200); }
.vc_row.blackrow { background-color: var(--cth-black); --text-heading: var(--cth-white); --text-body: var(--cth-ink-300); --text-link: var(--cth-gold-500); --text-link-hover: var(--cth-gold-400); --border-hairline: rgba(255,255,255,.14); color: var(--cth-ink-300); }
.vc_row.hiddenrow { display: none; }

/* --- Text blocks --------------------------------------------------------- */
.wpb_text_column { font-size: var(--text-body-size); line-height: var(--leading-body); color: var(--text-body); }
.wpb_text_column > .wpb_wrapper > *:last-child { margin-bottom: 0; }
.wpb_text_column p { margin: 0 0 1em; }
.cth-entry-builder h1, .cth-entry-builder h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: var(--leading-display); margin: 0 0 0.35em; }
.cth-entry-builder h1 { font-size: var(--text-display-1); }
.cth-entry-builder h2 { font-size: var(--text-display-2); }
.cth-entry-builder h3 { font-size: var(--text-h3); margin: 0 0 0.5em; }
.cth-entry-builder h4 { font-size: var(--text-h4); margin: 0 0 0.5em; }
.cth-entry-builder h5, .cth-entry-builder h6 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-brand); margin: 0 0 0.75em; }
.cth-entry-builder ul, .cth-entry-builder ol { padding-left: 1.25em; margin: 0 0 1em; }
.cth-entry-builder blockquote:not(.cth-press-quote) { margin: 1.4em 0; font-weight: 300; font-size: 1.5rem; line-height: 1.35; color: var(--text-heading); }
.cth-entry-builder 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); }

/* --- Buttons: every vc_btn becomes a design system Button ----------------- */
.vc_btn3-container .vc_general.vc_btn3 {
  font-family: var(--font-sans) !important; font-weight: 700; font-size: 13px !important; line-height: 1 !important; letter-spacing: var(--tracking-button); text-transform: uppercase;
  padding: 13px 26px !important; min-height: 0 !important; border-radius: 0 !important; border: 2px solid var(--cth-red-600) !important; border-bottom-width: 2px !important;
  background: var(--cth-red-600) !important; background-image: none !important; color: var(--cth-white) !important; box-shadow: none !important; text-shadow: none;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; transform: none !important;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.vc_btn3-container .vc_general.vc_btn3:hover, .vc_btn3-container .vc_general.vc_btn3:focus { background: var(--cth-red-800) !important; border-color: var(--cth-red-800) !important; color: var(--cth-white) !important; }
.vc_btn3-container .vc_general.vc_btn3:active { transform: translateY(1px) !important; }
.vc_btn3-container .vc_btn3.vc_btn3-size-xs, .vc_btn3-container .vc_btn3.vc_btn3-size-sm { padding: 8px 16px !important; font-size: 12px !important; }
.vc_btn3-container .vc_btn3.vc_btn3-size-lg, .vc_btn3-container .vc_btn3.vc_btn3-size-xlg { padding: 18px 38px !important; font-size: 15px !important; }
.vc_btn3-container .vc_btn3 .vc_btn3-icon { position: static !important; font-size: 14px !important; transform: none !important; margin: 0 !important; }
.vc_btn3-container .vc_btn3.vc_btn3-icon-right, .vc_btn3-container .vc_btn3.vc_btn3-icon-left { padding: 13px 26px !important; }

/* Outline styles read as the secondary button; white or inverse colors as the inverse button. */
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline,
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline-custom { background: transparent !important; color: var(--text-heading) !important; border-color: var(--border-strong) !important; }
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline:hover,
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline-custom:hover { background: var(--cth-black) !important; border-color: var(--cth-black) !important; color: var(--cth-white) !important; }
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-white,
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-inverse,
.textwhite .vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline-custom,
.blackrow .vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline-custom { background: var(--cth-white) !important; border-color: var(--cth-white) !important; color: var(--cth-black) !important; }
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-white:hover,
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-inverse:hover,
.textwhite .vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline-custom:hover,
.blackrow .vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline-custom:hover { background: var(--cth-gold-500) !important; border-color: var(--cth-gold-500) !important; color: var(--cth-black) !important; }
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-orange,
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-warning,
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-yellow { background: var(--cth-gold-500) !important; border-color: var(--cth-gold-500) !important; color: var(--cth-black) !important; }
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-orange:hover,
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-warning:hover,
.vc_btn3-container .vc_general.vc_btn3.vc_btn3-color-yellow:hover { background: var(--cth-gold-600) !important; border-color: var(--cth-gold-600) !important; }

/* --- Separators: hairline or 2px black rule ------------------------------ */
.vc_separator .vc_sep_line { border-color: var(--border-hairline) !important; }
.vc_separator.vc_sep_border_width_2 .vc_sep_line, .vc_separator.vc_sep_border_width_3 .vc_sep_line, .vc_separator.vc_sep_border_width_4 .vc_sep_line, .vc_separator.vc_sep_border_width_5 .vc_sep_line { border-color: var(--border-strong) !important; border-top-width: 2px !important; }
.vc_separator h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-brand); }

/* --- Images and galleries: square corners, no frames ---------------------- */
.wpb_single_image .vc_single_image-wrapper, .wpb_single_image img, .wpb_gallery img { border-radius: 0 !important; }
.wpb_single_image .vc_single_image-wrapper.vc_box_border, .wpb_single_image .vc_single_image-wrapper.vc_box_outline,
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow, .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border { box-shadow: none !important; border: 0 !important; padding: 0 !important; background: none !important; }
.wpb_single_image .vc_figure-caption { font-size: var(--text-caption); font-weight: 500; color: var(--text-muted); margin-top: var(--space-2); }
.wpb_single_image a { border: 0; }

/* --- Video ---------------------------------------------------------------- */
.wpb_video_widget .wpb_wrapper { background: var(--cth-black); }
/* A video WPBakery can't embed (e.g. a Vimeo On Demand page) leaves only a bare link: drop the
   empty 16:9 box and show the link as a button instead. */
.wpb_video_widget .wpb_wrapper:not(:has(iframe, video, object, embed)) { background: none; }
.wpb_video_widget .wpb_video_wrapper:not(:has(iframe, video, object, embed)) { padding: 0 !important; height: auto !important; aspect-ratio: auto !important; }
.wpb_video_widget .wpb_video_wrapper:not(:has(iframe, video, object, embed)) > a {
  position: static !important; display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border: 2px solid var(--cth-red-600);
  background: var(--cth-red-600); color: var(--cth-white); font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: var(--tracking-button); text-transform: uppercase; word-break: break-all;
}
.wpb_video_widget .wpb_video_wrapper:not(:has(iframe, video, object, embed)) > a:hover { background: var(--cth-red-800); border-color: var(--cth-red-800); }
.vc_row:is(.textwhite, .whitetext, .blackrow) .wpb_video_widget .wpb_video_wrapper:not(:has(iframe, video, object, embed)) > a { background: var(--cth-gold-500); border-color: var(--cth-gold-500); color: var(--cth-black); }

/* --- Tabs, tours and accordions (design system Tabs) ---------------------- */
.vc_tta.vc_general .vc_tta-panel-heading, .vc_tta.vc_general .vc_tta-tab > a, .vc_tta.vc_general .vc_tta-panel-body { border-radius: 0 !important; }
.vc_tta.vc_general .vc_tta-panel-title, .vc_tta.vc_general .vc_tta-tab > a { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.vc_tta.vc_tta-accordion .vc_tta-panel-heading { background: var(--surface-card) !important; border: 0 !important; border-bottom: 1px solid var(--border-hairline) !important; }
.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading { border-bottom: var(--border-heavy) solid var(--cth-red-600) !important; }
.vc_tta.vc_tta-accordion .vc_tta-panel-title > a { color: var(--text-heading) !important; padding: 18px 20px; }
.vc_tta.vc_tta-accordion .vc_tta-panel-body { background: var(--surface-card) !important; border: 0 !important; padding: 20px !important; }
.vc_tta.vc_tta-accordion .vc_tta-controls-icon::before, .vc_tta.vc_tta-accordion .vc_tta-controls-icon::after { border-color: var(--cth-red-600) !important; }
.vc_tta-tabs .vc_tta-tabs-list { border-bottom: 1px solid var(--border-hairline); }
.vc_tta.vc_general .vc_tta-tab > a { background: transparent !important; border: 0 !important; border-bottom: var(--border-heavy) solid transparent !important; color: var(--text-muted) !important; }
.vc_tta.vc_general .vc_tta-tab.vc_active > a { color: var(--text-heading) !important; border-bottom-color: var(--cth-red-600) !important; }

/* --- Post grid (vc_basic_grid): cards ------------------------------------- */
.vc_grid-container .vc_grid-item-mini { 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); }
.vc_grid-container .vc_grid-item-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.vc_grid-container .vc_gitem-zone-img, .vc_grid-container .vc_gitem-zone-a img { filter: grayscale(1) contrast(1.15); }
.vc_grid-container .vc_gitem-post-data-source-post_title h4,
.vc_grid-container .vc_gitem-post-data-source-post_title div { font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.vc_grid-container .vc_gitem-post-data-source-post_date { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.vc_grid-container .vc_gitem-post-data-source-post_excerpt { font-size: var(--text-small); color: var(--text-muted); }
.vc_grid-pagination .vc_grid-pagination-list li a, .vc_grid-load-more .vc_btn3 { border-radius: 0 !important; }
.vc_grid-filter .vc_grid-filter-item span { font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.vc_grid-filter .vc_grid-filter-item.vc_active span { color: var(--cth-red-600); }

/* --- Google map: monotone ------------------------------------------------- */
.wpb_gmaps_widget iframe { filter: grayscale(1) contrast(1.05); }
.wpb_gmaps_widget .wpb_wrapper { background: none; padding: 0; }

/* --- Ultimate Addons video (used on artist pages) ------------------------- */
.ult-video { border-radius: 0 !important; }

/* --- Phones --------------------------------------------------------------- */
@media (max-width: 767px) {
  .vc_row.vc_row-has-fill { padding-top: var(--space-6); padding-bottom: var(--space-5); }
  .wpb_column + .wpb_column { margin-top: var(--space-5); }
}

/* Stretched rows are 100vw wide; clip the sideways overflow that leaves when a scrollbar is visible. */
.cth-site-content { overflow-x: clip; }

/* Older pages sized headings inline for The7 (e.g. a span at 2.5em, or 55px on the h1).
   Display headings already carry the brand scale, so those inline sizes are ignored. */
.cth-entry-builder h1[style*="font-size"] { font-size: var(--text-display-1) !important; }
.cth-entry-builder h2[style*="font-size"] { font-size: var(--text-display-2) !important; }
/* Relative sizes (2.5em) inside headings would multiply the display size; pixel sizes are the author's intent and stay. */
.cth-entry-builder :is(h1, h2) [style*="font-size"]:not([style*="px"]):not([style*="pt"]) { font-size: inherit !important; }
.cth-entry-builder :is(h1, h2, h3) { overflow-wrap: break-word; }
/* Display headings scale to their column, so a long word in a narrow column shrinks
   instead of breaking mid-word ("MISS / ION"). */
.cth-entry-builder .wpb_column > .vc_column-inner { container-type: inline-size; }
/* No !important and :where() keeps the weight low, so a size a page sets in its own CSS
   (Othello's clamp() title) wins over this default. */
.cth-entry-builder :where(.wpb_column) h1 { font-size: min(var(--text-display-1), 16cqi); }
.cth-entry-builder :where(.wpb_column) h2 { font-size: min(var(--text-display-2), 14cqi); }
.cth-entry-builder .wpb_column :is(h1, h2) { min-width: 0; }
/* wpautop leaves empty paragraphs around rows; their margins would open a gap above the first row. */
.cth-entry-builder { display: flow-root; }
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > p:empty { display: none; }

/* --- Strict brand enforcement --------------------------------------------- */
/* Older pages set their own fonts and text colors inline for The7. The design system
   owns type and color, so inline font families and text colors give way to it. */
.cth-entry-builder [style*="font-family"], .cth-entry-builder font[face] { font-family: inherit !important; }
.cth-entry-builder :is(h1, h2) [style*="font-family"] { font-family: var(--font-display) !important; }
.cth-entry-builder :is(p, span, li, a, strong, em, b, i, td, h3, h4, h5, h6)[style*="color"],
.cth-entry-builder font[color] { color: inherit !important; }
.cth-entry-builder :is(h1, h2)[style*="color"], .cth-entry-builder :is(h1, h2) [style*="color"] { color: var(--text-heading) !important; }
.cth-entry-builder :is(p, span, li, div)[style*="font-size"]:not(.vc_custom_heading):not(:is(h1, h2, h3) *) { font-size: inherit !important; }
.cth-entry-builder :is(p, span, h3, h4)[style*="text-align: justify"], .cth-entry-builder [style*="text-align:justify"] { text-align: left !important; }

/* Inline line heights sized for The7 make display headings collide; the brand leading applies. */
.cth-entry-builder :is(h1, h2, h3, .vc_custom_heading)[style*="line-height"], .cth-entry-builder :is(h1, h2, h3) [style*="line-height"] { line-height: var(--leading-display) !important; }
.cth-entry-builder :is(h3, h4, h5, h6)[style*="line-height"] { line-height: 1.2 !important; }

/* Section headings (h2) take the brand red on light rows, as the current site does. */
.cth-entry-builder .vc_row:not(.textwhite):not(.whitetext):not(.blackrow) h2 { color: var(--cth-red-600); }
.cth-entry-builder .vc_row:not(.textwhite):not(.whitetext):not(.blackrow) .vc_row:is(.textwhite, .whitetext, .blackrow) h2 { color: var(--text-heading); }

/* Builder h4 reads as the red eyebrow label above a heading. */
.cth-entry-builder h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-brand); margin: 0 0 0.75em; }
.cth-entry-builder h3 { font-family: var(--font-condensed, var(--font-sans)); text-transform: uppercase; letter-spacing: 0.02em; }

/* Monotone photography: every builder and post photo is grayscale with brand contrast. */
.cth-entry-builder :is(.wpb_single_image, .vc_single_image-wrapper, .wpb_gallery, .vc_images_carousel, .ult-banner-block, .cth-team-card) img,
.cth-entry-content img:not(.emoji):not(.wp-smiley),
.cth-card img, .cth-single-image img, .cth-prose img:not(.emoji) { filter: grayscale(1) contrast(1.15); }
/* Rows with a background photo (tagged cth-bgimage by the theme): the photo turns monotone
   by blending it with a neutral ground, so the row's text and buttons keep their color. */
.cth-entry-builder .vc_row.cth-bgimage, .cth-entry-builder .wpb_column.cth-bgimage > .vc_column-inner { background-color: var(--cth-paper) !important; background-blend-mode: luminosity; }
.cth-entry-builder .vc_row.cth-bgimage.textwhite { background-color: var(--cth-black) !important; box-shadow: inset 0 0 0 100vmax rgba(11,11,11,.5); }
/* Ultimate Addons draws row photos in their own layer: monotone and dimmed so light text reads. */
.cth-entry-builder .vc_row.textwhite .upb_row_bg, .cth-entry-builder .vc_row.textwhite + .upb_row_bg, .cth-entry-builder .vc_row.textwhite .vc_parallax-inner { filter: grayscale(1) contrast(1.15) brightness(.5) !important; }
.cth-entry-builder .upb_row_bg, .cth-entry-builder .vc_parallax-inner { filter: grayscale(1) contrast(1.15); }
/* Video backgrounds (tagged cth-bgvideo by the theme) play in full color, dimmed just enough
   for white text: a black ground, the video at 60% brightness, no monotone. */
.cth-entry-builder .vc_row.cth-bgvideo { background-color: var(--cth-black) !important; background-image: none !important; }
.cth-entry-builder .vc_row.cth-bgvideo :is(.upb_row_bg, .vc_video-bg, .upb_video-bg), .cth-entry-builder .vc_row.cth-bgvideo + .upb_row_bg { filter: brightness(.6) !important; mix-blend-mode: normal !important; }
.cth-entry-builder .vc_row.cth-bgvideo::before { display: none; }

/* Tones for near-black rows (set by the theme in turn): deep red, black, brand red. */
.cth-entry-builder .vc_row.cth-tone-deep { background-color: var(--cth-red-800) !important; background-image: linear-gradient(160deg, var(--cth-red-700), var(--cth-red-900)) !important; }
.cth-entry-builder .vc_row.cth-tone-black { background-color: var(--cth-black) !important; }
.cth-entry-builder .vc_row.cth-tone-red { background-color: var(--cth-red-600) !important; background-image: linear-gradient(160deg, var(--cth-red-600), var(--cth-red-800)) !important; }
.cth-entry-builder .vc_row:is(.cth-tone-deep, .cth-tone-red) { --text-body: var(--cth-red-050); color: var(--cth-red-050); }

/* Dark rows: black ground, grain texture, gold buttons, gold links. */
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) { position: relative; isolation: isolate; }
/* ::before, because WPBakery's clearfix uses the row's ::after. */
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url(../images/grain.svg); background-size: 220px; opacity: 1;
}
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) h4 { color: var(--cth-gold-500); }
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) .vc_btn3-container .vc_general.vc_btn3 { background: var(--cth-gold-500) !important; border-color: var(--cth-gold-500) !important; color: var(--cth-black) !important; }
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) .vc_btn3-container .vc_general.vc_btn3:hover { background: var(--cth-gold-400) !important; border-color: var(--cth-gold-400) !important; color: var(--cth-black) !important; }
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) .vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline { background: transparent !important; color: var(--cth-gold-500) !important; }
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) .vc_btn3-container .vc_general.vc_btn3.vc_btn3-style-outline:hover { background: var(--cth-gold-500) !important; color: var(--cth-black) !important; }
/* Outline buttons on dark tone rows stay gold (light text variables would otherwise make them white). */
.cth-entry-builder .vc_row:is(.cth-tone-black, .cth-tone-deep, .cth-tone-red) .vc_btn3-container .vc_general.vc_btn3:is(.vc_btn3-style-outline, .vc_btn3-style-outline-custom) { background: transparent !important; border-color: var(--cth-gold-500) !important; color: var(--cth-gold-500) !important; }
.cth-entry-builder .vc_row:is(.cth-tone-black, .cth-tone-deep, .cth-tone-red) .vc_btn3-container .vc_general.vc_btn3:is(.vc_btn3-style-outline, .vc_btn3-style-outline-custom):hover { background: var(--cth-gold-500) !important; border-color: var(--cth-gold-500) !important; color: var(--cth-black) !important; }
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) .cth-btn:not(.cth-btn-inverse) { background: var(--cth-gold-500); border-color: var(--cth-gold-500); color: var(--cth-black); }
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) .vc_separator .vc_sep_line { border-color: var(--cth-gold-500) !important; }

/* Separators in light rows take the brand red, never a stray legacy color. */
.cth-entry-builder .vc_separator .vc_sep_line { border-top-color: var(--border-hairline) !important; }
.cth-entry-builder .vc_separator.vc_separator_align_center:is(.vc_sep_color_orange, .vc_sep_color_blue, .vc_sep_color_turquoise, .vc_sep_color_pink, .vc_sep_color_violet, .vc_sep_color_sky, .vc_sep_color_green, .vc_sep_color_chino, .vc_sep_color_mulled_wine, .vc_sep_color_peacoc, .vc_sep_color_vista_blue, .vc_sep_color_juicy_pink, .vc_sep_color_sandy_brown, .vc_sep_color_purple, .vc_sep_color_black) .vc_sep_line { border-top-color: var(--cth-red-600) !important; }

/* Hand-written <button> elements in old pages (e.g. "Performances have concluded") read as brand buttons. */
.cth-entry-builder button:not([class]) {
  display: inline-block; max-width: 100%; white-space: normal; border-radius: 0 !important; border: 2px solid var(--cth-gold-500) !important;
  background: var(--cth-gold-500) !important; color: var(--cth-black) !important; padding: 14px 24px !important; height: auto !important; width: auto !important;
  font-family: var(--font-sans) !important; font-weight: 700; font-size: 13px !important; letter-spacing: var(--tracking-button); text-transform: uppercase; line-height: 1.35 !important; box-shadow: none !important;
}
.cth-entry-builder button:not([class]) * { font-size: inherit !important; color: inherit !important; line-height: inherit !important; }

/* Ultimate Addons buttons (ubtn) and dual buttons follow the brand button. */
.cth-entry-builder :is(.ubtn, .ult_dual_button .ult_ivan_button, .ult-dual-btn-1, .ult-dual-btn-2) {
  background: var(--cth-red-600) !important; background-image: none !important; border: 2px solid var(--cth-red-600) !important; border-radius: 0 !important; color: var(--cth-white) !important; box-shadow: none !important;
}
.cth-entry-builder :is(.ubtn, .ult_dual_button .ult_ivan_button, .ult-dual-btn-1, .ult-dual-btn-2):hover { background: var(--cth-red-800) !important; border-color: var(--cth-red-800) !important; }
.cth-entry-builder .ubtn-data, .cth-entry-builder .ubtn .ubtn-text { font-family: var(--font-sans) !important; font-weight: 700; font-size: 13px !important; letter-spacing: var(--tracking-button); text-transform: uppercase; color: inherit !important; }
.cth-entry-builder .ubtn-hover { display: none !important; }
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) :is(.ubtn, .ult-dual-btn-1, .ult-dual-btn-2) { background: var(--cth-gold-500) !important; border-color: var(--cth-gold-500) !important; color: var(--cth-black) !important; }

/* Hand-made gradient boxes in old pages (e.g. Bacchae's cyan "browse more" bar) become a gold callout. */
.cth-entry-builder div[style*="gradient"] { background: var(--cth-gold-500) !important; background-image: none !important; border-radius: 0 !important; }
.cth-entry-builder div[style*="gradient"], .cth-entry-builder div[style*="gradient"] * { color: var(--cth-black) !important; border-color: transparent !important; }
.cth-entry-builder div[style*="gradient"] p { font-size: 13px !important; letter-spacing: var(--tracking-button); }

/* Small caption headings (h5, h6) read gold on dark rows instead of red. */
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) :is(h5, h6), .cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow) :is(h5, h6) * { color: var(--cth-gold-500) !important; }
/* Empty paragraphs WordPress leaves around block shortcodes (e.g. a press quote typed on its own lines). */
.cth-entry-builder .wpb_text_column p:empty { display: none; }

/* Opt-out of monotone: charts, logos and anything that must keep its colors.
   Tag the element, its row or column with el_class "cth-keep-color". */
.cth-keep-color img, img.cth-keep-color, .cth-keep-color .upb_row_bg, .cth-keep-color.upb_row_bg { filter: none !important; mix-blend-mode: normal !important; }
.cth-entry-builder .vc_row.cth-bgimage.cth-keep-color, .cth-entry-builder .wpb_column.cth-bgimage.cth-keep-color > .vc_column-inner { background-blend-mode: normal !important; }

/* Dark, red and photo grounds: headings go paper, eyebrows and small labels go gold
   (brand red disappears on these grounds). */
.cth-entry-builder :is(.textwhite, .whitetext, .blackrow, .cth-tone-black, .cth-tone-deep, .cth-tone-red, .cth-bgimage, .cth-monotone-block, .cth-dark) :is(h1, h2, h3) { color: var(--cth-white) !important; }
.cth-entry-builder :is(.textwhite, .whitetext, .blackrow, .cth-tone-black, .cth-tone-deep, .cth-tone-red, .cth-bgimage, .cth-monotone-block, .cth-dark) :is(h4, .cth-eyebrow) { color: var(--cth-gold-500) !important; }
.cth-entry-builder .cth-monotone-gold.cth-monotone-block :is(h1, h2, h3, h4, .cth-eyebrow) { color: var(--cth-black) !important; }
/* Signup forms (Bloomerang, Mailchimp) on those grounds: light labels and help text. */
.cth-entry-builder :is(.textwhite, .whitetext, .blackrow, .cth-tone-black, .cth-tone-deep, .cth-tone-red, .cth-bgimage, .cth-monotone-block, .cth-dark) form :is(label, legend, .label, .field-label, .description, small, p) { color: var(--cth-ink-200) !important; }
.cth-entry-builder :is(.textwhite, .whitetext, .blackrow, .cth-tone-black, .cth-tone-deep, .cth-tone-red, .cth-bgimage, .cth-monotone-block, .cth-dark) form :is(.required, abbr[title]) { color: var(--cth-gold-500) !important; }

/* --- Warmer look for young audiences (body.cth-colorful: the Education section) --- */
/* Photos in full color, a gold page header with black type, red bands instead of black. */
.cth-colorful .cth-entry-builder img, .cth-colorful .cth-entry-content img, .cth-colorful .cth-card img,
.cth-colorful .upb_row_bg, .cth-colorful .vc_parallax-inner, .cth-colorful .vc_grid-container .vc_gitem-zone-img,
.cth-colorful .vc_grid-container .vc_gitem-zone-a img { filter: none !important; }
.cth-colorful .cth-entry-builder .vc_row.textwhite :is(.upb_row_bg, .vc_parallax-inner), .cth-colorful .cth-entry-builder .vc_row.textwhite + .upb_row_bg { filter: brightness(.6) !important; }
.cth-colorful .cth-entry-builder .vc_row.cth-bgimage, .cth-colorful .cth-entry-builder .wpb_column.cth-bgimage > .vc_column-inner { background-blend-mode: normal; }
.cth-colorful .cth-team-photo { --mono-layer: 0; }
.cth-colorful .cth-team-photo .cth-monotone-photo { filter: none; }
.cth-colorful .cth-entry-builder .vc_row:is(.cth-tone-black, .blackrow) { background-color: var(--cth-red-600) !important; background-image: linear-gradient(160deg, var(--cth-red-600), var(--cth-red-800)) !important; --text-body: var(--cth-red-050); color: var(--cth-red-050); }
.cth-colorful .cth-entry-builder .vc_row.cth-tone-deep { background-color: var(--cth-gold-500) !important; background-image: linear-gradient(160deg, var(--cth-gold-400), var(--cth-gold-600)) !important; --text-heading: var(--cth-black); --text-body: var(--cth-black); --text-link: var(--cth-black); color: var(--cth-black); }
.cth-colorful .cth-entry-builder .vc_row.cth-tone-deep :is(h1, h2, h3, h4, h5, h6, p, li, span, .cth-eyebrow) { color: var(--cth-black) !important; }
.cth-colorful .cth-entry-builder .vc_row.cth-tone-deep .vc_btn3-container .vc_general.vc_btn3, .cth-colorful .cth-entry-builder .vc_row.cth-tone-deep .cth-btn { background: var(--cth-black) !important; border-color: var(--cth-black) !important; color: var(--cth-gold-500) !important; }
/* Light builder panels (the grey boxes) turn warm gold-tinted, with a gold edge. */
.cth-colorful .cth-entry-builder .vc_row.vc_row-has-fill:not(.textwhite):not(.whitetext):not(.blackrow):not(.cth-bgimage):not([class*="cth-tone-"]),
.cth-colorful .cth-entry-builder .vc_row:not(.textwhite):not(.whitetext):not(.blackrow) .vc_column_container.vc_col-has-fill > .vc_column-inner { background-color: var(--cth-gold-050) !important; border-left-color: var(--cth-gold-500) !important; }
/* Photo bands keep their photo in color under a warm red scrim instead of black. */
.cth-colorful .cth-entry-builder .vc_row.cth-bgimage.textwhite { background-color: var(--cth-red-800) !important; box-shadow: inset 0 0 0 100vmax rgba(90,10,14,.5); }

/* --- One type scale and spacing rhythm for page content -------------------- */
/* The page title in the red header is the only giant type on a page. Headings inside the
   content step down from it on one scale, whatever size the old page asked for:
   h1 36–56px, h2 32–48px, h3 24px condensed, h4 eyebrow. Photo and video bands, which
   act as posters, get one step up. */
.cth-entry-builder { --text-display-1: clamp(2.25rem, 3.8vw, 3.75rem); --text-display-2: clamp(2.25rem, 3.8vw, 3.75rem); }
.cth-entry-builder .vc_row:is(.cth-bgimage, .cth-bgvideo) { --text-display-1: clamp(2.5rem, 5vw, 4.5rem); --text-display-2: clamp(2.5rem, 5vw, 4.5rem); }
.cth-entry-builder :is(h1, h2) { margin-bottom: 0.4em; }
.cth-entry-builder :is(h1, h2) [style*="font-size"] { font-size: inherit !important; }
.cth-entry-builder h3[style*="font-size"], .cth-entry-builder h3 [style*="font-size"] { font-size: var(--text-h3) !important; }
.cth-entry-builder h4[style*="font-size"], .cth-entry-builder h4 [style*="font-size"] { font-size: var(--text-eyebrow) !important; }
/* A heading that follows text in the same block opens a new section. */
.cth-entry-builder .wpb_text_column :is(p, ul, ol, blockquote, figure, table) + :is(h1, h2) { margin-top: 1.25em; }
.cth-entry-builder .wpb_text_column :is(p, ul, ol, blockquote, figure, table) + :is(h3, h4) { margin-top: 1.5em; }

/* Section spacing: one rhythm for every top-level band, 112px on desktop easing to 64px on
   phones, instead of each page's own padding (some had 150px, some none). Two plain bands
   in a row share one gap; full-height bands keep their height. */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row { padding-top: clamp(64px, 7.8vw, 112px) !important; padding-bottom: clamp(64px, 7.8vw, 112px) !important; }
/* Full-height rows keep the page's own padding and fill the screen with min-height only: an
   inline height left by a background add-on (3,061px on Othello) never stretches the band. */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row[data-vc-full-height], :is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row.vc_row-o-full-height { padding-top: 0 !important; padding-bottom: 0 !important; height: auto !important; }
/* Phones drop the screen height, so a padded band gets its padding back and text never touches
   the edge (the ICONS 3 band); flush edge-to-edge rows stay flush. */
@media (max-width: 767px) {
  :is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:is([data-vc-full-height], .vc_row-o-full-height):not(.cth-mission) { min-height: 0 !important; height: auto !important; }
  :is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:is([data-vc-full-height], .vc_row-o-full-height):not(.cth-mission):not(.vc_row-no-padding) { padding-top: 56px !important; padding-bottom: 56px !important; }
}
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:not(.vc_row-has-fill):not(.cth-bgimage):not(.cth-bgvideo):not([class*="cth-tone-"]):not(.blackrow):not(.textwhite):not(.whitetext):not(.cth-mission) + .vc_row-full-width + .vc_row:not(.vc_row-has-fill):not(.cth-bgimage):not(.cth-bgvideo):not([class*="cth-tone-"]):not(.blackrow):not(.textwhite):not(.whitetext):not(.cth-mission),
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:not(.vc_row-has-fill):not(.cth-bgimage):not(.cth-bgvideo):not([class*="cth-tone-"]):not(.blackrow):not(.textwhite):not(.whitetext):not(.cth-mission) + .vc_row:not(.vc_row-has-fill):not(.cth-bgimage):not(.cth-bgvideo):not([class*="cth-tone-"]):not(.blackrow):not(.textwhite):not(.whitetext):not(.cth-mission) { padding-top: 0 !important; }
.cth-entry-builder .wpb_content_element { margin-bottom: var(--space-5); }
.cth-entry-builder .wpb_column > .vc_column-inner > .wpb_wrapper > :last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  /* Stacked columns get a consistent gap. */
  .cth-entry-builder .wpb_column + .wpb_column { margin-top: var(--space-6); }
}
/* Comfortable line length: text in wide columns stops at about 68 characters. */
.cth-entry-builder .wpb_text_column :is(p, ul, ol, blockquote:not(.cth-press-quote)) { max-width: var(--width-prose); }
.cth-entry-builder .wpb_text_column :is(p, ul, ol)[style*="center"], .cth-entry-builder .wpb_text_column [style*="center"] :is(p, ul, ol), .cth-entry-builder .vc_row[class*="center"] .wpb_text_column :is(p, ul, ol) { margin-left: auto; margin-right: auto; }
/* Builder buttons match the theme's 54px primary button. */
.cth-entry-builder .vc_btn3.vc_btn3-size-md, .cth-entry-builder .vc_btn3.vc_btn3-size-lg { font-size: 15px !important; padding: 19px 30px !important; min-height: 54px; }

/* Gold accent band (every fourth dark band): black type, black buttons with gold text. */
.cth-entry-builder .vc_row.cth-tone-gold { background-color: var(--cth-gold-500) !important; background-image: linear-gradient(160deg, var(--cth-gold-400), var(--cth-gold-600)) !important; --text-heading: var(--cth-black); --text-body: var(--cth-black); --text-link: var(--cth-black); --text-link-hover: var(--cth-red-700); --border-hairline: rgba(0,0,0,.18); color: var(--cth-black); }
.cth-entry-builder .vc_row.cth-tone-gold :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, .cth-eyebrow, blockquote, footer, label) { color: var(--cth-black) !important; }
.cth-entry-builder .vc_row.cth-tone-gold a:not(.cth-btn):not(.vc_btn3) { color: var(--cth-black) !important; }
.cth-entry-builder .vc_row.cth-tone-gold :is(.vc_btn3-container .vc_general.vc_btn3, .cth-btn, button, input[type="submit"]) { background: var(--cth-black) !important; border-color: var(--cth-black) !important; color: var(--cth-gold-500) !important; }
.cth-entry-builder .vc_row.cth-tone-gold .vc_separator .vc_sep_line { border-color: var(--cth-black) !important; }

/* Hover reveals a photo's true color (team cards and production tiles already do this).
   Photos with text over them (row backgrounds, duotone key art) stay as they are, so the
   text keeps its contrast. Touch screens keep the monotone. */
.cth-entry-builder :is(.wpb_single_image, .vc_single_image-wrapper, .wpb_gallery, .vc_images_carousel, .ult-banner-block) img,
.cth-entry-content img:not(.emoji):not(.wp-smiley), .cth-card img, .cth-single-image img, .cth-prose img:not(.emoji),
.vc_grid-container .vc_gitem-zone-img, .vc_grid-container .vc_gitem-zone-a img { transition: filter var(--dur-slow, 400ms) var(--ease-out, ease-out); }
@media (hover: hover) {
  .cth-entry-builder :is(.wpb_single_image, .vc_single_image-wrapper, .wpb_gallery, .vc_images_carousel, .ult-banner-block) img:hover,
  .cth-entry-builder :is(.wpb_single_image, .ult-banner-block) a:is(:hover, :focus-visible) img,
  .cth-entry-content img:not(.emoji):not(.wp-smiley):hover, .cth-prose img:not(.emoji):hover, .cth-single-image img:hover,
  .cth-card:is(:hover, :focus-within) img, .cth-team-single-photo img:hover,
  .vc_grid-container .vc_grid-item-mini:is(:hover, :focus-within) :is(.vc_gitem-zone-img, .vc_gitem-zone-a img) { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cth-entry-builder img, .vc_grid-container .vc_gitem-zone-img { transition: none; }
}

/* --- Band fit (0.9.2) ------------------------------------------------------- */
/* Two plain rows in a row read as one section: they sit 64px apart instead of a full band gap.
   (Rows with a fill, photo or video keep the full 112px rhythm.) */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:not(.vc_row-has-fill):not(.cth-bgimage):not(.cth-bgvideo):not([class*="cth-tone-"]):not(.blackrow):not(.textwhite):not(.whitetext):not(.cth-mission):is(:has(+ .vc_row:not(.vc_row-has-fill):not(.cth-bgimage):not(.cth-bgvideo):not([class*="cth-tone-"]):not(.blackrow):not(.textwhite):not(.whitetext):not(.cth-mission)), :has(+ .vc_row-full-width + .vc_row:not(.vc_row-has-fill):not(.cth-bgimage):not(.cth-bgvideo):not([class*="cth-tone-"]):not(.blackrow):not(.textwhite):not(.whitetext):not(.cth-mission))) { padding-bottom: clamp(40px, 4.5vw, 64px) !important; }
/* A filled band that isn't stretched sits exactly on the content grid (WPBakery's negative row
   margins pushed its edge 20px past the images above), with its own inner padding. */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:is(.vc_row-has-fill, [class*="cth-tone-"], .cth-bgimage, .cth-bgvideo):not([data-vc-full-width]):not(.cth-stretch):not(.cth-mission) { margin-left: 0; margin-right: 0; padding-left: clamp(8px, 3vw, 40px); padding-right: clamp(8px, 3vw, 40px); padding-top: clamp(48px, 6vw, 88px) !important; padding-bottom: clamp(48px, 6vw, 88px) !important; }
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row.vc_row-has-fill > .vc_column_container > .vc_column-inner { padding-top: 0; }
/* A column holding only a button lines up with the middle of the text beside it. */
@media (min-width: 768px) {
  .cth-entry-builder .vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > :is(.vc_btn3-container, .cth-btn-wrap):only-child):has(> .wpb_column + .wpb_column) { display: flex; flex-wrap: wrap; align-items: center; }
  .cth-entry-builder .vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > :is(.vc_btn3-container, .cth-btn-wrap):only-child):has(> .wpb_column + .wpb_column)::before,
  .cth-entry-builder .vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > :is(.vc_btn3-container, .cth-btn-wrap):only-child):has(> .wpb_column + .wpb_column)::after { display: none; }
  .cth-entry-builder .wpb_column > .vc_column-inner > .wpb_wrapper > :is(.vc_btn3-container, .cth-btn-wrap):only-child { margin-bottom: 0; }
}
/* The short rule above a section heading shows on dark and red bands (gold) and on gold (black). */
.cth-entry-builder :is(.textwhite, .whitetext, .blackrow, .cth-tone-black, .cth-tone-deep, .cth-tone-red, .cth-bgimage, .cth-bgvideo) .cth-crown-stub { background-color: var(--cth-gold-500) !important; }
.cth-entry-builder .cth-tone-gold .cth-crown-stub { background-color: var(--cth-black) !important; }

/* Edge-to-edge rows ("stretch row and content, no paddings") hold their own band, so they add no gap. */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row.vc_row-no-padding:is([data-vc-stretch-content], .cth-stretch-content):not(.vc_row-has-fill):not(.cth-bgimage):not(.cth-bgvideo) { padding-top: 0 !important; padding-bottom: 0 !important; }
/* A row that only holds an empty spacer adds just the spacer, not another band gap. */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:has(.vc_empty_space):not(:has(.wpb_wrapper > :not(.vc_empty_space))) { padding-top: 0 !important; padding-bottom: 0 !important; }

/* No small labels over section headings (Alessandro, 2026-10-19: extraneous; few theatre sites
   use them). The label and its short rule are hidden and the heading leads the section. Labels
   that carry information stay: the home banner's "Now on stage / Up next", product categories. */
.cth-section-header :is(.cth-eyebrow, .cth-crown-stub),
.cth-entry-builder p.cth-eyebrow:not(.cth-next-hero *), .cth-entry-content p.cth-eyebrow:not(.cth-next-hero *),
.cth-mission-band .cth-eyebrow, .cth-entry-builder .vc_row.cth-mission :is(.cth-eyebrow, h4) { display: none !important; }

/* Product grids placed in a page (e.g. the home page merch row) keep the shop's card titles,
   not the builder's display heading size. */
.cth-entry-builder .wpb_column ul.products li.product :is(.woocommerce-loop-product__title, h2, h3) { font-family: var(--font-condensed) !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; text-transform: uppercase; margin: 0 0 var(--space-2) !important; }
@media (max-width: 420px) { .cth-entry-builder .wpb_column ul.products li.product :is(.woocommerce-loop-product__title, h2, h3) { font-size: 17px !important; } }

/* Mission row: when it is also set to full height, the statement sets the height instead of
   the window, so there is no empty space above and below it. */
.cth-entry-builder .vc_row.vc_row.cth-mission.cth-mission { padding-top: clamp(72px, 9vw, 128px) !important; padding-bottom: clamp(72px, 9vw, 128px) !important; }
.cth-entry-builder .vc_row.cth-mission:is([data-vc-full-height], .vc_row-o-full-height) { min-height: 0 !important; height: auto !important; }
.cth-entry-builder .vc_row.cth-mission .wpb_column :is(h1, h2)::before { content: none; }
/* Older pages typed the label as a small heading right above the big one ("READ:" over
   "News and Reviews"); those go too. */
.cth-entry-builder :is(h4, h5, h6):has(+ :is(h1, h2)) { display: none !important; }

/* Video bands: a still shows at once and the video fades in over it once it is playing. */
.cth-entry-builder .vc_row.cth-bgvideo { position: relative; isolation: isolate; overflow: hidden; }
.cth-video-poster { position: absolute; inset: 0; z-index: -1; background: var(--cth-black) center / cover no-repeat; filter: brightness(.6); pointer-events: none; }
.cth-entry-builder .vc_row.cth-bgvideo .vc_video-bg, .cth-bg-video { opacity: 0; transition: opacity 1.2s var(--ease-out, ease-out); }
.cth-entry-builder .vc_row.cth-bgvideo.is-playing .vc_video-bg, .vc_row.is-playing .cth-bg-video { opacity: 1 !important; } /* beats the inline first-paint opacity */
.cth-bg-video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cth-bg-video { display: none; } }
/* With no show to announce, the mission band opens the home page as its header. */
.cth-entry-builder .vc_row.cth-mission-top { min-height: clamp(520px, 78vh, 880px); display: flex; flex-wrap: wrap; align-items: center; }
.cth-entry-builder .vc_row.cth-mission-top::before, .cth-entry-builder .vc_row.cth-mission-top::after { display: none; }
.cth-entry-builder .vc_row.cth-mission-top > .wpb_column { width: 100%; }

/* Buttons on red grounds (red and deep-red bands, red monotone or duotone photo blocks, photo
   and video bands, the mission band) turn gold with black text, so a red button never sits on
   red. Outline, white and gold buttons keep their look. */
:is(.cth-entry-builder .vc_row:is(.cth-tone-red, .cth-tone-deep, .cth-bgimage, .cth-bgvideo, .cth-mission), .cth-monotone-block:not(.cth-monotone-gold), .cth-mission-band:not(.cth-mission-gold), .cth-hero)
  :is(.vc_btn3-container .vc_general.vc_btn3:not(.vc_btn3-style-outline):not(.vc_btn3-color-warning):not(.vc_btn3-color-white):not(.vc_btn3-color-black), a.cth-btn:not(.cth-btn-gold):not(.cth-btn-inverse):not(.cth-btn-secondary)) {
  background: var(--cth-gold-500) !important; border-color: var(--cth-gold-500) !important; color: var(--cth-black) !important;
}
:is(.cth-entry-builder .vc_row:is(.cth-tone-red, .cth-tone-deep, .cth-bgimage, .cth-bgvideo, .cth-mission), .cth-monotone-block:not(.cth-monotone-gold), .cth-mission-band:not(.cth-mission-gold), .cth-hero)
  :is(.vc_btn3-container .vc_general.vc_btn3:not(.vc_btn3-style-outline):not(.vc_btn3-color-warning):not(.vc_btn3-color-white):not(.vc_btn3-color-black), a.cth-btn:not(.cth-btn-gold):not(.cth-btn-inverse):not(.cth-btn-secondary)):hover {
  background: var(--cth-gold-400) !important; border-color: var(--cth-gold-400) !important;
}

/* Ultimate Addons "full browser" row backgrounds: keep the wrapper on the content column and let
   navigation.js fit the row to the content area once (see fitRows). Without this the wrapper's
   window-edge offset and the theme's stretch were both applied and the row started off-screen. */
.cth-page .upb-background-text-wrapper { left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; }
.cth-page .upb-background-text-wrapper > .vc_row, .cth-page .upb-background-text-wrapper .vc_row.upb-background-text { left: var(--cth-fit-left, 0px) !important; width: var(--cth-fit-width, auto) !important; }

/* Contrast (audit 8). Post grid cards are light even inside a dark band, so their titles and
   links stay ink (gold on a light card read at 2.1:1). Shop prices inside dark bands are gold
   instead of brand red (red on black read at 2.4:1); on the gold band they are black. */
.cth-entry-builder .vc_row .vc_grid-container .vc_grid-item-mini { color: var(--cth-ink-800, #222); }
.cth-entry-builder .vc_row .vc_grid-container .vc_grid-item-mini :is(h1, h2, h3, h4, h5, h6, a) { color: var(--cth-black) !important; }
.cth-entry-builder .vc_row .vc_grid-container .vc_grid-item-mini a:is(:hover, :focus-visible) { color: var(--cth-red-600) !important; }
.cth-entry-builder .vc_row:is(.textwhite, .whitetext, .blackrow, .cth-tone-red, .cth-tone-black, .cth-tone-deep) .woocommerce ul.products li.product .price { color: var(--cth-gold-500) !important; }
.cth-entry-builder .vc_row.cth-tone-gold .woocommerce ul.products li.product .price { color: var(--cth-black) !important; }

/* Legacy Ultimate Addons overlay patterns (dotted/striped tiles) and short background images
   left visible bands (audit 12). Patterns are hidden and row backgrounds always cover. */
.cth-entry-builder .upb_bg_overlay_pattern { display: none !important; }
.cth-entry-builder :is(.vc_row, .upb_row_bg) { background-size: cover !important; }
.cth-entry-builder .upb_row_bg[data-bg-repeat], .cth-entry-builder .vc_row[class*="vc_custom_"] { background-repeat: no-repeat !important; }

/* Legacy justified paragraphs leave rivers in narrow columns (audit 22). */
.cth-entry-builder :is(p, div, span, li)[style*="justify"], .cth-entry-builder [align="justify"] { text-align: left !important; }

/* Phone: light text on a full-colour photo row (Education, cth-keep-color) gets a dark scrim so
   it never sits on a raw photo (audit 13). Monotone photo rows already sit under a dark wash. */
@media (max-width: 767px) {
  :is(.cth-colorful .cth-entry-builder .vc_row.cth-bgimage, .cth-entry-builder .vc_row.cth-bgimage.cth-keep-color).textwhite { position: relative; isolation: isolate; }
  :is(.cth-colorful .cth-entry-builder .vc_row.cth-bgimage, .cth-entry-builder .vc_row.cth-bgimage.cth-keep-color).textwhite::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10, 6, 6, .82) 0%, rgba(10, 6, 6, .55) 55%, rgba(10, 6, 6, .25) 100%); }
  :is(.cth-colorful .cth-entry-builder .vc_row.cth-bgimage, .cth-entry-builder .vc_row.cth-bgimage.cth-keep-color).textwhite > :is(.wpb_column, .vc_column_container, .vc_row_inner) { position: relative; z-index: 1; }
}

/* Bloomerang signup forms bring their own light, oversized button (audit 23): match the brand button. */
:is([id*="bloomerang" i], [class*="bloomerang" i]) :is(input[type="submit"], button[type="submit"], .btn-submit-email, .btn) {
  font-family: var(--font-sans) !important; font-weight: 700 !important; font-size: 13px !important; line-height: 1 !important;
  letter-spacing: var(--tracking-button) !important; text-transform: uppercase !important;
  padding: 16px 28px !important; min-height: 50px; border-radius: 0 !important;
  border: 2px solid var(--cth-red-600) !important; background: var(--cth-red-600) !important; color: var(--cth-white) !important; width: auto;
}
:is([id*="bloomerang" i], [class*="bloomerang" i]) :is(input[type="submit"], button[type="submit"], .btn-submit-email, .btn):hover { background: var(--cth-red-800) !important; border-color: var(--cth-red-800) !important; }
:is(.textwhite, .whitetext, .blackrow, .cth-tone-red, .cth-tone-black, .cth-tone-deep, .cth-dark) :is([id*="bloomerang" i], [class*="bloomerang" i], #email-registration-form) :is(input[type="submit"], button[type="submit"], .btn-submit-email, .btn) { background: var(--cth-gold-500) !important; border-color: var(--cth-gold-500) !important; color: var(--cth-black) !important; }

/* Stretched rows are full width from the first paint (the self-hosted home video used to show
   at content width with blank edges until navigation.js ran, which WP Rocket can delay).
   .cth-page is a size container, so 100cqw is the content area beside the sidebar. Once
   navigation.js fits a row it adds .cth-fitted and its exact inline sizing takes over. */
.cth-page { container-type: inline-size; }
.cth-page .vc_row:is(.cth-stretch, [data-vc-full-width]):not(.cth-fitted) { position: relative; box-sizing: border-box; left: 0 !important; width: auto !important; max-width: none; margin-left: calc(50% - 50cqw) !important; margin-right: calc(50% - 50cqw) !important; }
.cth-page .vc_row:is(.cth-stretch, [data-vc-full-width]):not(.cth-stretch-content):not([data-vc-stretch-content]):not(.cth-fitted) { padding-left: calc(50cqw - 50% - 15px); padding-right: calc(50cqw - 50% - 15px); } /* WPBakery rows carry -15px margins that the column padding offsets */

/* One content grid (0.9.25). Every band's text, buttons and media start and end on the same two
   vertical lines as the page container, whatever padding each row or column carries in the page
   markup (the home rows had 40px column paddings, 40px row paddings and "stretch content"
   rows that ran text to the gutter). --cth-grid-in is the distance from the edge of the content
   area to those lines; navigation.js sets it exactly, the fallback computes it from the page
   width. Columns with their own fill stay boxes, with the box on the line. */
.cth-page { --cth-grid-fallback: max(var(--pad-gutter), calc((100cqw - var(--width-content)) / 2)); }
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:not(.vc_row-no-padding) > .wpb_column:not(.vc_col-has-fill):not(.cth-bgimage) > .vc_column-inner { padding-left: 15px !important; padding-right: 15px !important; }
/* Column-level custom paddings ("Design options" on the column) would push its text off the line. */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row > .wpb_column { padding-left: 0 !important; padding-right: 0 !important; }
/* Text blocks with their own side padding (Design options on the text block) would do the same. */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_text_column[class*="vc_custom_"]:not(.cth-filled),
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row > .vc-row-translate-wrapper > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_text_column[class*="vc_custom_"]:not(.cth-filled) { padding-left: 0 !important; padding-right: 0 !important; }
/* Text blocks with their own background (navigation.js marks them .cth-filled) keep their padding anywhere. Text blocks inside inner rows are often filled boxes (program bios on grey or red): they keep their own padding. */
/* Stretched rows, with or without "stretch content": the band bleeds, the content sits on the grid. */
.cth-page :is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper, .upb-background-text-wrapper) > .vc_row:is([data-vc-full-width], .cth-stretch):not(.vc_row-no-padding) {
  padding-left: calc(var(--cth-grid-in, var(--cth-grid-fallback)) - 15px) !important; padding-right: calc(var(--cth-grid-in, var(--cth-grid-fallback)) - 15px) !important;
}
/* Boxed rows with a fill (not stretched): the box grows into the gutter so its text stays on the line. */
:is(.cth-entry-builder, .cth-entry-builder > .wpb-content-wrapper) > .vc_row:is(.vc_row-has-fill, [class*="cth-tone-"], .cth-bgimage, .cth-bgvideo):not([data-vc-full-width]):not(.cth-stretch):not(.cth-mission) {
  --cth-box-pad: min(clamp(8px, 3vw, 40px), var(--cth-grid-in, var(--pad-gutter)));
  margin-left: calc(-1 * var(--cth-box-pad)) !important; margin-right: calc(-1 * var(--cth-box-pad)) !important; padding-left: calc(var(--cth-box-pad) - 15px) !important; padding-right: calc(var(--cth-box-pad) - 15px) !important;
}
/* Edge-to-edge rows ("no paddings"): photos and video still bleed; a column holding text puts that
   text on the grid line on its outer side. */
.cth-page .vc_row.vc_row-no-padding > .wpb_column:first-child:has(.wpb_text_column, .vc_custom_heading, .vc_btn3-container, .cth-btn-wrap) > .vc_column-inner { padding-left: var(--cth-grid-in, var(--cth-grid-fallback)) !important; }
.cth-page .vc_row.vc_row-no-padding > .wpb_column:last-child:has(.wpb_text_column, .vc_custom_heading, .vc_btn3-container, .cth-btn-wrap) > .vc_column-inner { padding-right: var(--cth-grid-in, var(--cth-grid-fallback)) !important; }
.cth-page .vc_row.vc_row-no-padding > .wpb_column:first-child:not(:last-child):has(.wpb_text_column, .vc_custom_heading, .vc_btn3-container, .cth-btn-wrap) > .vc_column-inner { padding-right: clamp(24px, 4vw, 64px) !important; }
.cth-page .vc_row.vc_row-no-padding > .wpb_column:last-child:not(:first-child):has(.wpb_text_column, .vc_custom_heading, .vc_btn3-container, .cth-btn-wrap) > .vc_column-inner { padding-left: clamp(24px, 4vw, 64px) !important; }
@media (max-width: 767px) {
  .cth-page .vc_row.vc_row-no-padding > .wpb_column:has(.wpb_text_column, .vc_custom_heading, .vc_btn3-container, .cth-btn-wrap) > .vc_column-inner { padding-left: var(--cth-grid-in, var(--cth-grid-fallback)) !important; padding-right: var(--cth-grid-in, var(--cth-grid-fallback)) !important; }
}
/* Mission bands and theme bands inside a full-bleed row put their text on the grid too. */
.cth-page .vc_row.vc_row-no-padding .cth-mission-band { padding-left: var(--cth-grid-in, var(--pad-gutter)); padding-right: var(--cth-grid-in, var(--pad-gutter)); }
/* Inner rows keep WPBakery's -15px margins, so their columns need the matching 15px back, even in
   an edge-to-edge row (whose "no paddings" applies to its own columns only). */
.cth-page .vc_row :is(.vc_row_inner, .vc_row.vc_inner) { margin-left: -15px !important; margin-right: -15px !important; padding-left: 0 !important; padding-right: 0 !important; }
.cth-page .vc_row :is(.vc_row_inner, .vc_row.vc_inner) > .wpb_column { padding-left: 0 !important; padding-right: 0 !important; }
.cth-page .vc_row :is(.vc_row_inner, .vc_row.vc_inner) > .wpb_column > .vc_column-inner { padding-left: 15px !important; padding-right: 15px !important; }
/* Buttons start on the line too (the mission band's button carried a 15px left margin); a row of
   buttons spaces itself from the right. */
.cth-entry-builder .vc_btn3-container, .cth-entry-builder .vc_btn3-container > .vc_btn3 { margin-left: 0 !important; }
.cth-entry-builder .vc_btn3-container.vc_btn3-inline { margin-right: var(--space-3); }
/* An edge-to-edge row whose other column is empty (the home mission band: a blank spacer column
   beside the text) has nothing to keep a gutter from, so the text takes the grid line instead. */
.cth-page .vc_row.vc_row-no-padding > .wpb_column:not(:has(.wpb_wrapper *)) + .wpb_column:last-child > .vc_column-inner { padding-left: var(--cth-grid-in, var(--cth-grid-fallback)) !important; }
.cth-page .vc_row.vc_row-no-padding > .wpb_column:first-child:has(+ .wpb_column:last-child:not(:has(.wpb_wrapper *))) > .vc_column-inner { padding-right: var(--cth-grid-in, var(--cth-grid-fallback)) !important; }
/* The home mission row stacks its columns full width (inside Ultimate's translate wrapper on dev), so each one is both first and last on the line. */
.cth-page .vc_row.vc_row-no-padding.cth-mission-top.cth-mission-top.cth-mission-top > .wpb_column.wpb_column.wpb_column > .vc_column-inner, .cth-page .vc_row.vc_row-no-padding.cth-mission-top.cth-mission-top > .vc-row-translate-wrapper > .wpb_column.wpb_column.wpb_column > .vc_column-inner { padding-left: var(--cth-grid-in, var(--cth-grid-fallback)) !important; padding-right: var(--cth-grid-in, var(--cth-grid-fallback)) !important; }
/* Program bio rows (a filled name card beside a filled bio box): a real gutter between the two
   boxes and one steady rhythm between bios, instead of 0px across and 100px down. The gutter is a
   transparent border, so the columns keep their widths and their fills stop short of it. */
.cth-entry-builder :is(.vc_row_inner, .vc_row.vc_inner):has(> .wpb_column:is(.vc_col-has-fill, .vc_row-has-fill)) { margin-bottom: clamp(32px, 4vw, 56px) !important; }
.cth-entry-builder :is(.vc_row_inner, .vc_row.vc_inner):has(> .wpb_column:is(.vc_col-has-fill, .vc_row-has-fill)) > .wpb_column + .wpb_column { box-sizing: border-box; border-left: 20px solid transparent !important; background-clip: padding-box !important; }
@media (max-width: 767px) {
  .cth-entry-builder :is(.vc_row_inner, .vc_row.vc_inner):has(> .wpb_column:is(.vc_col-has-fill, .vc_row-has-fill)) > .wpb_column + .wpb_column { border-left: 0 !important; }
}

/* Partner logos that must always keep their own colours (WNYC). Matched by file name, alt text,
   a link to wnyc.org or the logo's media ID, so they escape every monotone rule wherever they appear. */
:is(img[src*="wnyc" i], img[alt*="wnyc" i], img[srcset*="wnyc" i], a[href*="wnyc" i] img, img.wp-image-20365) { filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; }
:is(.vc_gitem-zone-img, .upb_row_bg, .vc_parallax-inner)[style*="wnyc" i] { filter: none !important; mix-blend-mode: normal !important; }
.vc_grid-container .vc_gitem-zone-img:has(+ * img[src*="wnyc" i]) { filter: none !important; }
/* WNYC's red logo needs a light plate to read on CTH's red and black bands. */
:is(img[src*="wnyc" i], img[alt*="wnyc" i], a[href*="wnyc" i] img, img.wp-image-20365) { background: #fff; padding: clamp(8px, 1vw, 14px) clamp(12px, 1.4vw, 20px); box-sizing: content-box; border-radius: 2px; max-width: calc(100% - 2 * clamp(12px, 1.4vw, 20px)); height: auto; }

/* Press quotes stacked one after another get room between them. */
.cth-press-quote:not(:last-child) { margin-bottom: clamp(32px, 4vw, 56px); }
.wpb_content_element:has(.cth-press-quote) + .wpb_content_element:has(.cth-press-quote),
.vc_row:has(> .wpb_column .cth-press-quote) + .vc_row:has(> .wpb_column .cth-press-quote):not(.vc_row-has-fill) { margin-top: clamp(32px, 4vw, 56px); }
/* Phones: empty spacer columns (common in older layouts) would each add a stacking gap. */
@media (max-width: 767px) { .cth-entry-builder .wpb_column:has(> .vc_column-inner > .wpb_wrapper:empty), .cth-entry-builder .wpb_column:has(> .vc_column-inner:empty) { display: none !important; } }

/* --- The CTH video player (inc/video-player.php) ------------------------------------------
   Every YouTube/Vimeo video: a poster with a gold play button over the real player. Built for
   Home and Press, now the standard. The WPBakery Video element's own 16:9 padding box steps aside. */
.cth-film{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#0b0b0b;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.cth-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cth-film-cover{position:absolute;inset:0;z-index:2;pointer-events:none;background:#0b0b0b center/cover no-repeat;transition:opacity .5s ease,visibility 0s linear .5s}
.cth-film-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 100%);transition:background .4s}
.cth-film:hover .cth-film-cover::after{background:linear-gradient(180deg,rgba(0,0,0,.1) 30%,rgba(0,0,0,.78) 100%)}
.cth-film.is-playing .cth-film-cover{opacity:0;visibility:hidden}
.cth-film-play{position:absolute;z-index:2;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--cth-gold-500,#d2a344);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .35s ease}
.cth-film-play::before{content:"";position:absolute;left:35px;top:27px;border-style:solid;border-width:17px 0 17px 27px;border-color:transparent transparent transparent #111}
.cth-film:hover .cth-film-play{transform:scale(1.08)}
.cth-film-cap{position:absolute;z-index:2;left:28px;right:28px;bottom:22px;text-align:left;color:#fff;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.cth-film-cap span{display:block;margin-top:6px;font-weight:400;letter-spacing:.04em;text-transform:none;font-size:15px;opacity:.85}
@media (max-width:640px){.cth-film-play{width:64px;height:64px;margin:-32px 0 0 -32px}
.cth-film-play::before{left:25px;top:19px;border-width:13px 0 13px 20px}
.cth-film-cap{left:16px;right:16px;bottom:12px;font-size:10px}
.cth-film-cap span{display:none}
}
.wpb_video_widget .wpb_video_wrapper:has(> .cth-film) { padding-top: 0 !important; height: auto !important; }
.wpb_video_widget .wpb_wrapper:has(.cth-film) { background: none; }
.wp-block-embed__wrapper:has(> .cth-film)::before { content: none; }
.cth-film + .cth-film { margin-top: var(--space-6, 32px); }