/*
Theme Name: Headline Hangover
Theme URI: https://headlinehangovershow.com
Author: Headline Hangover
Description: The Headline Hangover show theme. Built to MK-242 Brand Guidelines: near black ground, neon on near black as the signature pairing, decisive hierarchy, sharp corners, no rounded friendliness, 16px minimum body text and every color pairing above 7 to 1 contrast. Block theme with patterns for every section of the site.
Version: 2.9.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: headline-hangover
Tags: full-site-editing, blog, entertainment, block-patterns, one-column, wide-blocks, custom-colors, custom-menu, editor-style
*/

/* --------------------------------------------------------------------------
   Everything below is design that theme.json cannot express.
   Brand tokens live in theme.json. Do not hard code a color here that is
   already a palette entry; use the var so one change moves the whole site.
   -------------------------------------------------------------------------- */

:root{
  --hh-line: rgba(245,241,236,.14);
  --hh-panel-hover: #0A0F17;
}

body{ -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--wp--preset--color--neon); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- the skewed display treatment ---------- */
/* Zing Rust Base is a heavy condensed italic. Anton plus a skew stands in for it
   until the licensed face is loaded. Replace the font family in theme.json when
   Zing Rust is licensed for web and the skew can come off. */
.hh-skew,
.wp-block-site-title a,
h1.wp-block-post-title,
.hh-hero h1,
.hh-tier .hh-tier-name{
  transform: skewX(-6deg);
  transform-origin: left bottom;
}

/* ---------- eyebrows, section rules, captions ---------- */
.hh-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--wp--preset--color--neon); margin:0 0 14px;
}
.hh-eyebrow.is-muted{ color:var(--wp--preset--color--silver); }

.hh-rule{
  font-size:13px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--wp--preset--color--warm); display:flex; align-items:center; gap:16px;
  font-family:var(--wp--preset--font-family--sans); margin:0 0 26px;
}
.hh-rule::after{ content:""; flex:1; height:1px; background:var(--hh-line); }

/* WordPress constrained layout centers every child with margin-inline:auto and marks
   it !important, so pinning a lede to the left has to match that weight. A lede is a
   column of running text, not a centered element.

   IMPORTANT for anyone editing templates: hh-lede must sit inside a section group,
   never as a direct child of a template's main. A constrained container centers its
   children inside the content column; a child that is narrower than that column and
   has margin-left:0 aligns to the CONTAINER edge instead, which on a 1240 wide main
   throws it out past the column. Wrap it in a group and it behaves. */
.hh-lede{
  font-size:19px; color:#D9D4CE;
  /* !important because the content column is now 1240 and WordPress prints its own
     max-width on every direct child of a constrained container. Without it the lede
     runs the full page width and stops being a readable measure. */
  max-width:62ch !important;
  margin-left:0 !important; margin-right:auto !important;
}
/* Running text still needs a readable measure even though the content column is
   now the full 1240. Cap the line length and keep it left aligned; never center it. */
main > .wp-block-group > p:not([class*="hh-"]),
main > p:not([class*="hh-"]){ max-width:72ch; margin-left:0 !important; margin-right:auto !important; }
.hh-note{ font-size:13px; color:var(--wp--preset--color--silver); }

/* ---------- chips and labels ---------- */
.hh-chip{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 10px; border:1px solid var(--wp--preset--color--char);
  color:var(--wp--preset--color--silver);
}
.hh-chip.is-neon{ background:var(--wp--preset--color--neon); color:var(--wp--preset--color--ink); border-color:var(--wp--preset--color--neon); }
.hh-chip.is-live{ border-color:#E4573D; color:#E4573D; }

/* The four segment labels. Every episode carries them. */
.hh-label{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; padding:3px 7px; border:1px solid; }
.hh-label.is-fact{ border-color:var(--wp--preset--color--neon); color:var(--wp--preset--color--neon); }
.hh-label.is-reported{ border-color:#7FA7C4; color:#7FA7C4; }
.hh-label.is-analysis{ border-color:var(--wp--preset--color--silver); color:var(--wp--preset--color--silver); }
.hh-label.is-opinion{ border-color:#E4A03D; color:#E4A03D; }

/* ---------- header ---------- */
.hh-header{
  position:sticky; top:0; z-index:60;
  background:rgba(5,8,14,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hh-line);
}
.hh-header .wp-block-site-logo img{ width:168px; height:auto; }
.hh-header .wp-block-navigation{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
/* Nav link color. Core prints its own rules for .wp-block-navigation-item__content
   and theme.json prints a link color of its own, so name the content class
   explicitly rather than trusting a bare a selector to win. */
.hh-header .wp-block-navigation a,
.hh-header .wp-block-navigation a:visited,
.hh-header .wp-block-navigation .wp-block-navigation-item__content{
  color:#BFBAB4; text-decoration:none;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.hh-header .wp-block-navigation a:hover,
.hh-header .wp-block-navigation .wp-block-navigation-item__content:hover{
  color:var(--wp--preset--color--warm); text-decoration:none;
}

/* Current page. A custom link never receives core's current-menu-item class, so
   functions.php adds hh-current by comparing the link path to the request path.
   The other selectors cover menus built from real page links, where core does
   mark the item itself. */
.hh-header .wp-block-navigation .hh-current > a,
.hh-header .wp-block-navigation .hh-current > .wp-block-navigation-item__content,
.hh-header .wp-block-navigation .current-menu-item > a,
.hh-header .wp-block-navigation .current_page_item > a,
.hh-header .wp-block-navigation a[aria-current="page"]{
  color:var(--wp--preset--color--neon);
  border-bottom-color:var(--wp--preset--color--neon);
}

/* outline button variant, used for secondary actions */
.wp-block-button.is-style-hh-outline .wp-block-button__link{
  background:transparent; color:var(--wp--preset--color--neon);
  border:1px solid var(--wp--preset--color--neon);
}
.wp-block-button.is-style-hh-outline .wp-block-button__link:hover{
  background:var(--wp--preset--color--neon); color:var(--wp--preset--color--ink);
}
.wp-block-button.is-style-hh-quiet .wp-block-button__link{
  background:transparent; color:var(--wp--preset--color--warm);
  border:1px solid var(--wp--preset--color--char);
}
.wp-block-button.is-style-hh-quiet .wp-block-button__link:hover{
  background:var(--wp--preset--color--warm); color:var(--wp--preset--color--ink);
  border-color:var(--wp--preset--color--warm);
}

/* ---------- hero ---------- */
.hh-hero{ padding-block:74px 64px; }
.hh-hero h1{ margin:0; }
.hh-hero .hh-art{ position:relative; }
.hh-hero .hh-art img{ border:1px solid var(--hh-line); width:100%; }

.hh-listen{ display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding-top:26px; border-top:1px solid var(--hh-line); }
.hh-listen .hh-listen-label{ font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--wp--preset--color--silver); margin-right:6px; }
.hh-listen a{ font-size:12px; font-weight:600; letter-spacing:.08em; padding:8px 13px;
  border:1px solid var(--wp--preset--color--char); color:#CFCAC4; text-decoration:none; }
.hh-listen a:hover{ border-color:var(--wp--preset--color--neon); color:var(--wp--preset--color--neon); text-decoration:none; }

/* ---------- hairline grids: cards separated by a hairline, never by shadow ----------
   Each child draws its own outline into the 2px gap rather than the parent painting a
   background behind them. A row with fewer children than columns then leaves empty
   space rather than a slab of divider color. */
.hh-grid{ background:transparent; gap:2px !important; }
.hh-grid > *{
  background:var(--wp--preset--color--ink);
  outline:1px solid var(--hh-line);
  padding:26px 24px 28px;
  margin:0;
  /* A card is a column with its meta row pushed to the floor, so the labels and
     runtime line up across all three cards no matter how long the summaries are. */
  display:flex; flex-direction:column; gap:12px; min-height:100%;
}
.hh-grid > * > *{ margin-top:0; margin-bottom:0; }
.hh-grid .wp-block-post-excerpt,
.hh-grid .wp-block-post-excerpt p{ font-size:15px; color:#B6B1AB; margin:0; }
.hh-grid > *:hover{ background:var(--hh-panel-hover); }

.hh-card-no{ font-family:var(--wp--preset--font-family--display); font-size:13px;
  letter-spacing:.14em; color:var(--wp--preset--color--neon); margin:0 0 10px; }
.hh-meta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--silver); margin-top:14px; }

/* ---------- day strip ---------- */
.hh-day .hh-day-name{
  font-family:var(--wp--preset--font-family--display); font-size:38px;
  text-transform:uppercase; color:var(--wp--preset--color--neon);
  transform:skewX(-6deg); transform-origin:left bottom; margin:0 0 10px; line-height:1;
}

/* ---------- membership tiers ---------- */
.hh-tier{ padding:34px 28px 32px !important; display:flex; flex-direction:column; }
.hh-tier.is-featured{ background:#0B1119 !important; outline:1px solid var(--wp--preset--color--neon); outline-offset:-1px; }
.hh-tier .hh-tier-name{ font-family:var(--wp--preset--font-family--display); font-size:30px;
  text-transform:uppercase; color:var(--wp--preset--color--warm); margin:0 0 6px; line-height:1; }
.hh-tier .hh-tier-price{ font-size:15px; font-weight:700; letter-spacing:.1em;
  color:var(--wp--preset--color--neon); margin:0 0 22px; }
.hh-tier ul{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.hh-tier li{ font-size:15px; color:var(--wp--preset--color--body); padding-left:20px; position:relative; }
.hh-tier li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:2px;
  background:var(--wp--preset--color--neon); }
.hh-tier .wp-block-buttons{ margin-top:auto; }

/* ---------- newsletter, the one neon field on the site ---------- */
.hh-news{ background:var(--wp--preset--color--neon) !important; color:var(--wp--preset--color--ink) !important;
  padding:52px 44px !important; }
.hh-news h2, .hh-news h3, .hh-news p, .hh-news a{ color:var(--wp--preset--color--ink) !important; }
.hh-news h2{ font-family:var(--wp--preset--font-family--display); transform:skewX(-6deg);
  transform-origin:left bottom; line-height:.94; }
.hh-news .wp-block-button__link{ background:var(--wp--preset--color--ink) !important;
  color:var(--wp--preset--color--neon) !important; border-color:var(--wp--preset--color--ink) !important; }

/* ---------- split panels ---------- */
.hh-split{ border:1px solid var(--hh-line); background:var(--hh-line); gap:1px !important; }
.hh-split > .wp-block-column{ background:var(--wp--preset--color--ink); padding:40px 36px; }
/* The panel headings are display type at 40px with no skew. The skew is for the
   hero and the section rules; on a 40px heading inside a bordered panel it reads
   as noise rather than emphasis. */
.hh-split h3{ line-height:0.96; letter-spacing:0.01em; margin:16px 0 14px !important; }
.hh-split p{ color:#B6B1AB; }
.hh-split p{ max-width:46ch; }

/* ---------- tables: corrections, events, press ---------- */
.wp-block-table{ overflow-x:auto; }
.wp-block-table table{ border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
.wp-block-table th{ text-align:left; font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wp--preset--color--silver);
  padding:0 18px 14px 0; border-bottom:1px solid var(--hh-line); }
.wp-block-table td{ padding:18px 18px 18px 0; border-bottom:1px solid var(--hh-line);
  vertical-align:top; color:var(--wp--preset--color--body); }
.wp-block-table strong{ color:var(--wp--preset--color--warm); font-weight:600; }

/* ---------- posts and episodes ---------- */
.wp-block-post-title a{ color:var(--wp--preset--color--warm); text-decoration:none; }
.wp-block-post-title a:hover{ color:var(--wp--preset--color--neon); }
.wp-block-post-date, .wp-block-post-terms{ font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--silver); }
.wp-block-post-excerpt__excerpt{ color:var(--wp--preset--color--body); }
.entry-content > *{ max-width:var(--wp--style--global--content-size); margin-left:auto; margin-right:auto; }
.entry-content > .alignwide{ max-width:var(--wp--style--global--wide-size); }
.entry-content > .alignfull{ max-width:none; }

/* ---------- footer ---------- */
.hh-footer{ border-top:1px solid var(--hh-line); padding-block:56px 44px; }
.hh-footer .wp-block-navigation{ font-size:14px; }
.hh-footer .wp-block-navigation a{ color:#A9A49E; text-decoration:none; }
.hh-footer .wp-block-navigation a:hover{ color:var(--wp--preset--color--neon); }
.hh-footer h4{ font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.hh-footer-lockup img{ width:230px; height:auto; }
.hh-footer-bottom{ margin-top:44px; padding-top:26px; border-top:1px solid var(--hh-line);
  font-size:12.5px; color:var(--wp--preset--color--silver); }

/* ---------- form fields ----------
   Search, comments and anything else with an input. Left unstyled these arrive as
   white boxes on a near black page, which is the one thing the brand rules cannot
   tolerate. */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"], textarea, select{
  background:var(--hh-panel-hover);
  border:1px solid var(--wp--preset--color--char);
  color:var(--wp--preset--color--warm);
  font-family:inherit; font-size:16px; padding:13px 15px; border-radius:0;
}
input::placeholder, textarea::placeholder{ color:var(--wp--preset--color--silver); }
input:focus, textarea:focus, select:focus{ border-color:var(--wp--preset--color--neon); }

.wp-block-search__inside-wrapper{ border:none; }
.wp-block-search__button{
  background:var(--wp--preset--color--neon); color:var(--wp--preset--color--ink);
  border:1px solid var(--wp--preset--color--neon); border-radius:0;
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 22px; cursor:pointer; margin-left:8px;
}
.wp-block-search__button:hover{
  background:var(--wp--preset--color--warm); border-color:var(--wp--preset--color--warm);
}

.wp-block-post-comments-form input[type="submit"],
.wp-block-button__link[type="submit"]{
  background:var(--wp--preset--color--neon); color:var(--wp--preset--color--ink);
  border:1px solid var(--wp--preset--color--neon); border-radius:0;
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 22px; cursor:pointer;
}
.comment-form label{ font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--wp--preset--color--silver); display:block; margin-bottom:8px; }

/* ---------- accessibility helper ---------- */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link:focus{ position:fixed; top:12px; left:12px; z-index:999; width:auto; height:auto;
  clip:auto; padding:12px 18px; background:var(--wp--preset--color--neon);
  color:var(--wp--preset--color--ink); font-weight:800; }

/* ---------- responsive ---------- */
@media (max-width: 781px){
  .hh-news{ padding:36px 24px !important; }
  .hh-split > .wp-block-column{ padding:28px 24px; }
  .hh-grid > .wp-block-column{ padding:24px 20px; }
  .hh-header{ position:static; }
}


/* ==========================================================================
   1.1.0  Community, clips, the latest episode bar, and the header actions.
   ========================================================================== */

/* ---------- header action buttons: Sign in, Alerts ---------- */
.hh-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.wp-block-button.is-style-hh-action .wp-block-button__link{
  background:transparent; color:#CFCAC4;
  border:1px solid var(--wp--preset--color--char);
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 12px;
}
.wp-block-button.is-style-hh-action .wp-block-button__link:hover{
  border-color:var(--wp--preset--color--neon); color:var(--wp--preset--color--neon);
  background:transparent;
}

/* Alerts carries a small neon dot. The dot is decoration only, so it is drawn
   rather than typed, and it never claims a count the site cannot back up. */
.wp-block-button.hh-alerts .wp-block-button__link{ position:relative; padding-right:22px; }
.wp-block-button.hh-alerts .wp-block-button__link::after{
  content:""; position:absolute; top:8px; right:9px;
  width:6px; height:6px; border-radius:50%;
  background:var(--wp--preset--color--neon);
}

/* ---------- the community block ---------- */
.hh-comm{ display:grid; grid-template-columns:1fr 320px; gap:44px; }
.hh-post{ border:1px solid var(--hh-line); padding:22px 24px; display:flex; gap:16px; }
.hh-post + .hh-post{ margin-top:2px; }
.hh-av{ width:42px; height:42px; flex:none; background:var(--wp--preset--color--neon);
  color:var(--wp--preset--color--ink); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; }
.hh-av.is-quiet{ background:var(--wp--preset--color--char); color:var(--wp--preset--color--warm); }
.hh-side .hh-box{ border:1px solid var(--hh-line); padding:22px; }
.hh-side .hh-box + .hh-box{ margin-top:2px; }
.hh-side h4{ font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--wp--preset--color--warm); margin:0 0 16px; }
.hh-rooms{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.hh-rooms li{ font-size:14.5px; color:var(--wp--preset--color--warm); font-weight:600; }
.hh-rooms li span{ display:block; font-size:13px; font-weight:400;
  color:var(--wp--preset--color--silver); margin-top:2px; }
.hh-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.hh-tags a, .hh-tags span{ font-size:12.5px; font-weight:600; color:var(--wp--preset--color--neon);
  border:1px solid rgba(213,223,69,.3); padding:5px 9px; text-decoration:none; }
.hh-tags a:hover{ background:var(--wp--preset--color--neon); color:var(--wp--preset--color--ink); }

/* ---------- clip cards ---------- */
.hh-clip .hh-thumb{ aspect-ratio:16/9; background:linear-gradient(135deg,#12161E,#080C13);
  border:1px solid var(--hh-line); position:relative; display:flex; align-items:flex-end;
  padding:14px; margin-bottom:16px; }
.hh-clip .hh-cc{ position:absolute; top:12px; left:14px; font-size:10px; font-weight:800;
  letter-spacing:.14em; background:var(--wp--preset--color--neon);
  color:var(--wp--preset--color--ink); padding:3px 7px; }
.hh-clip .hh-dur{ font-size:11px; font-weight:800; letter-spacing:.1em;
  background:var(--wp--preset--color--ink); border:1px solid var(--hh-line);
  padding:4px 8px; color:var(--wp--preset--color--warm); }
.hh-clip .wp-block-post-featured-image img{ aspect-ratio:16/9; object-fit:cover; }

/* ---------- episode cards ----------
   The card carries only what a real post actually holds. The neon line is the
   post's category, the chips are its tags. A post with neither renders neither,
   which is the point: nothing on the card is invented. */
.hh-cardmeta{
  font-family:var(--wp--preset--font-family--display);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--neon); margin:0;
}
.hh-cardmeta a{ color:var(--wp--preset--color--neon); text-decoration:none; }
.hh-cardmeta a:hover{ color:var(--wp--preset--color--warm); text-decoration:none; }

.hh-cardfoot{
  margin-top:auto !important; padding-top:14px; align-items:center;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--silver);
}
.hh-cardlabels{ display:flex; gap:6px; flex-wrap:wrap; margin:0; }
.hh-cardlabels a{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; padding:3px 7px;
  border:1px solid var(--wp--preset--color--char);
  color:var(--wp--preset--color--silver); text-decoration:none;
}
.hh-cardlabels a:hover{ border-color:var(--wp--preset--color--neon); color:var(--wp--preset--color--neon); text-decoration:none; }
.hh-cardtime{
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--silver); margin:0;
}

/* The search block is a control, not a band. The prototype holds it well short of
   the full width so it reads as one object rather than a rule across the page. */
.wp-block-search{ max-width:820px; margin-left:0 !important; margin-right:auto !important; }

/* ---------- the player bar ----------
   Printed from functions.php at wp_footer, so it survives any template edit.
   The seek bar is a real range input driving a real audio element; the times
   are read off the file. Nothing here animates on its own. */
.hh-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--hh-panel-hover); border-top:1px solid var(--wp--preset--color--neon);
  padding:10px 24px;
}
body{ padding-bottom:82px; }

.hh-bar-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:18px;
}
.hh-bar-id{ display:flex; align-items:center; gap:14px; min-width:0; flex:none; max-width:340px; }
.hh-bar-id img{ width:46px; height:46px; object-fit:cover; flex:none; }
.hh-bar-text{ min-width:0; }
.hh-bar-label{ font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wp--preset--color--silver); margin:0; }
.hh-bar-title{ display:block; font-size:14px; font-weight:600; margin-top:2px;
  color:var(--wp--preset--color--warm); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-bar-title:hover{ color:var(--wp--preset--color--neon); text-decoration:none; }
.hh-bar-note{ font-size:12px; color:var(--wp--preset--color--silver); margin:0 auto 0 0; }

.hh-bar-play{
  flex:none; width:42px; height:42px; cursor:pointer;
  background:var(--wp--preset--color--neon); border:1px solid var(--wp--preset--color--neon);
  position:relative;
}
.hh-bar-play:hover{ background:var(--wp--preset--color--warm); border-color:var(--wp--preset--color--warm); }
/* Play is a triangle, pause is two bars. Both drawn, so there is no icon file. */
.hh-bar-play[data-state="paused"]::before{
  content:""; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%);
  border-left:12px solid var(--wp--preset--color--ink);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.hh-bar-play[data-state="playing"]::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:12px; height:14px;
  border-left:4px solid var(--wp--preset--color--ink);
  border-right:4px solid var(--wp--preset--color--ink);
}

.hh-bar-time{ font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--wp--preset--color--silver); flex:none; font-variant-numeric:tabular-nums; }

.hh-bar-seek{
  flex:1 1 auto; min-width:80px; height:4px; cursor:pointer;
  appearance:none; -webkit-appearance:none; background:rgba(245,241,236,.18);
}
.hh-bar-seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--wp--preset--color--neon); border:none; margin-top:-4px;
}
.hh-bar-seek::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:var(--wp--preset--color--neon); border:none;
}
.hh-bar-seek::-moz-range-progress{ height:4px; background:var(--wp--preset--color--neon); }

.hh-bar-switch{ display:flex; gap:0; flex:none; }
.hh-bar-mode{
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 14px; border:1px solid var(--wp--preset--color--char);
  color:var(--wp--preset--color--silver); text-decoration:none;
}
.hh-bar-mode + .hh-bar-mode{ border-left:none; }
.hh-bar-mode:hover{ color:var(--wp--preset--color--neon); text-decoration:none; }
.hh-bar-mode.is-on{ background:var(--wp--preset--color--warm); color:var(--wp--preset--color--ink);
  border-color:var(--wp--preset--color--warm); }

.hh-bar-close{
  flex:none; background:none; border:none; cursor:pointer; font-size:22px; line-height:1;
  color:var(--wp--preset--color--silver); padding:4px 2px;
}
.hh-bar-close:hover{ color:var(--wp--preset--color--warm); }

@media (max-width: 900px){
  .hh-comm{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width: 900px){
  .hh-bar-label{ display:none; }
  .hh-bar-switch{ display:none; }
}
@media (max-width: 700px){
  .hh-bar{ padding:8px 14px; }
  .hh-bar-inner{ gap:12px; }
  .hh-bar-id{ max-width:none; flex:1 1 auto; }
  .hh-bar-seek, .hh-bar-time{ display:none; }
}

/* ---------------------------------------------------------------
   Clip cards. The thumb runs flush to the card edge the way the
   prototype draws it, with the captions badge sitting on top of it
   and the duration in the footer.
   --------------------------------------------------------------- */
.hh-clipgrid > *{ padding:0 !important; gap:0 !important; }
.hh-clipthumb{ position:relative; margin:0 !important; border-bottom:1px solid var(--hh-line); }
.hh-clipthumb .wp-block-post-featured-image{ margin:0; }
.hh-clipthumb img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.hh-clipthumb::before{
  content:"CC"; position:absolute; top:12px; left:14px; z-index:2;
  font-family:var(--wp--preset--font-family--sans);
  font-size:10px; font-weight:800; letter-spacing:.14em; line-height:1;
  background:var(--wp--preset--color--neon); color:var(--wp--preset--color--ink);
  padding:4px 7px;
}
.hh-clipgrid h3{ margin:0 !important; padding:18px 20px 0; }
.hh-clipgrid .hh-cardfoot{ margin-top:auto !important; padding:12px 20px 20px; border:0; }

/* ---------------------------------------------------------------
   Filter row. Same shape as the prototype's tabs: a hairline rule
   with the live one carrying a neon underline. These are real links
   to real archives, so they work with JavaScript switched off.
   --------------------------------------------------------------- */
.hh-tabs{ display:flex; gap:0; flex-wrap:wrap; border-bottom:1px solid var(--hh-line); margin-bottom:34px !important; }
.hh-tabs .wp-block-navigation__container,
.hh-tabs ul{ display:flex; gap:0; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.hh-tabs a{
  display:block; color:#BFBAB4; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:14px 20px 12px;
  border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none;
}
.hh-tabs a:hover{ color:var(--wp--preset--color--warm); }
.hh-tabs a.is-on,
.hh-tabs .hh-current a{ color:var(--wp--preset--color--neon); border-bottom-color:var(--wp--preset--color--neon); }

/* The four things every episode page carries. */
.hh-everyep > *{ background:var(--wp--preset--color--panel); outline:1px solid var(--hh-line); padding:26px 24px 28px; margin:0; }
.hh-everyep h3{ margin:0 0 10px; font-size:18px; }
.hh-everyep p{ margin:0; font-size:15px; color:#B6B1AB; }
.hh-stars{ color:var(--wp--preset--color--neon); font-size:20px; letter-spacing:3px; margin:0 0 8px !important; }

/* ---------------------------------------------------------------
   Segment labels, coloured from the link itself.
   WordPress gives term links no per term class, so the colour comes
   off the href. No PHP involved, which matters because the host
   firewall will not accept PHP edits from the browser.
   --------------------------------------------------------------- */
.hh-cardlabels a[href*="/tag/verified"]{ border-color:var(--wp--preset--color--neon); color:var(--wp--preset--color--neon); }
.hh-cardlabels a[href*="/tag/reported"]{ border-color:#7FA7C4; color:#7FA7C4; }
.hh-cardlabels a[href*="/tag/analysis"]{ border-color:var(--wp--preset--color--silver); color:var(--wp--preset--color--silver); }
.hh-cardlabels a[href*="/tag/opinion"]{ border-color:#E4A03D; color:#E4A03D; }
.hh-cardlabels a[href*="/tag/verified"]:hover,
.hh-cardlabels a[href*="/tag/reported"]:hover,
.hh-cardlabels a[href*="/tag/analysis"]:hover,
.hh-cardlabels a[href*="/tag/opinion"]:hover{ filter:brightness(1.25); }

/* ---------------------------------------------------------------
   Corrections, three fixes.
   1. The panel eyebrows were being greyed by .hh-split p, which is
      more specific than .hh-eyebrow. They are neon in the design.
   2. The star row was being greyed by .hh-everyep p for the same
      reason.
   3. An episode title at hero size swamps the page it sits on. The
      hero keeps its size; a single post title comes down to where a
      two line title still fits the measure.
   --------------------------------------------------------------- */
.hh-split p.hh-eyebrow{ color:var(--wp--preset--color--neon); }
.hh-everyep .hh-stars{ color:var(--wp--preset--color--neon); }

body.single-post .wp-block-post-title,
body.single-post h1.wp-block-post-title{
  font-size:clamp(32px, 4.4vw, 60px) !important;
  line-height:0.98;
  max-width:22ch;
}

/* The line under the episode grid is a note, not a lede. Give it air
   so it does not read as part of the last card. */
.hh-gridnote{ margin-top:44px !important; padding-top:28px;
  border-top:1px solid var(--hh-line); max-width:72ch; }

/* ---------------------------------------------------------------
   Vertical rhythm around the member plugin's sections.
   The shortcodes print their own headings and lists, which arrive in
   the page flow with no margins of their own, so a section can land
   hard against the button row above it.
   --------------------------------------------------------------- */
main > .wp-block-buttons{ margin-bottom:46px; }

.hh-spaces h2.hh-rule,
.hh-livewrap h2.hh-rule{ margin-top:52px; }
.hh-spaces > h2.hh-rule:first-child{ margin-top:0; }
.hh-spaces .hh-empty,
.hh-livewrap .hh-empty{ margin:16px 0 0; }
.hh-space-form,
.hh-take-form{ margin-top:20px; }
.hh-livewrap .hh-fineprint{ margin-top:18px; }
.hh-spaces .hh-space-card:first-of-type{ border-top:1px solid var(--hh-line); }

/* Past streams cards carry a line of context under the title. */
.hh-streamnote{ margin:0 !important; padding:0 20px; font-size:14px;
  color:var(--wp--preset--color--silver); }
.hh-clipthumb.is-stream::before{ content:"REPLAY"; }

/* The events table: a ticket button lives in the last cell. */
.hh-events table{ table-layout:auto; }
.hh-events td{ vertical-align:top; }
.hh-events td:first-child{ white-space:normal; width:24%; }
.hh-events td:last-child{ text-align:right; white-space:nowrap; }
.hh-tix{ display:inline-block; background:none !important;
  border:1px solid var(--hh-line) !important; color:var(--wp--preset--color--warm) !important;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 16px !important; text-decoration:none; }
.hh-tix:hover{ border-color:var(--wp--preset--color--neon) !important;
  color:var(--wp--preset--color--neon) !important; }
@media (max-width:760px){ .hh-events td:last-child{ text-align:left; } }


/* ===============================================================
   Round two of the artifact comparison. Grouped by what was wrong
   rather than by selector, so the reason survives the next edit.
   =============================================================== */

/* 1. Cards were losing their footer.
   min-height:100% on a grid child resolves against the row track and
   then overflows it, so the label and runtime row was being painted
   underneath the next row. Stretch does the same job without the bug. */
.hh-grid > *{ min-height:0 !important; height:100%; }

/* 2. Explainer panels. The prototype draws these as columns divided by a
   single hairline, not as four outlined boxes, and the heading is white
   with its own neon eyebrow above it where there is one. */
.hh-everyep,
.hh-panels{ gap:0 !important; }
.hh-everyep > *,
.hh-panels > *{
  background:none !important; outline:0 !important; border:0 !important;
  border-left:1px solid var(--hh-line) !important;
  padding:8px 30px 8px !important; margin:0 !important;
}
.hh-everyep > *:first-child,
.hh-panels > *:first-child{ border-left:0 !important; padding-left:0 !important; }
.hh-everyep h3,
.hh-panels h3{ color:var(--wp--preset--color--neon); margin:0 0 10px !important; font-size:19px; }
.hh-everyep p,
.hh-panels p{ margin:0; font-size:15px; color:#B6B1AB; }
.hh-panel-time{
  font-family:var(--wp--preset--font-family--sans);
  font-size:12px; font-weight:800; letter-spacing:.16em;
  color:var(--wp--preset--color--neon); margin:0 0 8px !important;
}
@media (max-width:781px){
  .hh-everyep > *,
  .hh-panels > *{ border-left:0 !important; padding-left:0 !important;
    border-top:1px solid var(--hh-line) !important; padding-top:24px !important; }
  .hh-everyep > *:first-child,
  .hh-panels > *:first-child{ border-top:0 !important; padding-top:0 !important; }
}

/* 3. Rate it: the stars belong on the heading line so all four panels
   start from the same baseline. */
.hh-rating-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.hh-rating-head h2{ margin:0 !important; }
.hh-rating-head .hh-stars{ margin:0 !important; font-size:19px; letter-spacing:3px;
  color:var(--wp--preset--color--neon); }

/* 4. Hover, taken from the prototype's own rules. */
.hh-grid > *:hover,
.hh-post:hover,
.hh-moment:hover,
.hh-space-card:hover,
.hh-dir-card:hover{ background:var(--wp--preset--color--panel) !important; }
.wp-block-button__link:hover{ background:var(--wp--preset--color--neon);
  color:var(--wp--preset--color--ink); border-color:var(--wp--preset--color--neon); }
.wp-block-button:not(.is-style-hh-outline):not(.is-style-hh-quiet):not(.is-style-outline):not(.is-style-hh-action) .wp-block-button__link:hover{
  background:var(--wp--preset--color--warm); color:var(--wp--preset--color--ink);
  border-color:var(--wp--preset--color--warm); }
.wp-block-button.is-style-hh-quiet .wp-block-button__link:hover{
  background:var(--wp--preset--color--warm); color:var(--wp--preset--color--ink);
  border-color:var(--wp--preset--color--warm); }
.hh-header .wp-block-navigation a:hover{ color:var(--wp--preset--color--warm); }
.hh-cardlabels a:hover{ background:var(--wp--preset--color--neon) !important;
  color:var(--wp--preset--color--ink) !important; }
.hh-footer .wp-block-navigation a:hover{ color:var(--wp--preset--color--neon); }

/* 5. Button rows. The earlier rule only caught buttons that were direct
   children of main, and on these pages they sit inside a group. */
.wp-block-buttons{ margin-bottom:46px; }
.wp-block-buttons:last-child{ margin-bottom:0; }
.hh-hero .wp-block-buttons,
.hh-tier .wp-block-buttons{ margin-bottom:0; }

/* 6. Forms. Fields ran the full 1240 and the box around them is not in
   the design. */
.hh-take-form,
.hh-space-form,
.hh-rate-form,
.hh-read-form,
.hh-dm-form{ border:0 !important; padding:0 !important; max-width:660px; }
.hh-take-form input,
.hh-take-form select,
.hh-take-form textarea,
.hh-space-form input,
.hh-space-form textarea,
.hh-rate-form textarea{ width:100%; max-width:660px; }
.hh-take-form textarea{ min-height:120px; }
.hh-space-form textarea{ min-height:80px; }
.hh-take-form .hh-label-txt,
.hh-space-form .hh-label-txt{ margin-top:18px; }
.hh-take-form .hh-label-txt:first-of-type,
.hh-space-form .hh-label-txt:first-of-type{ margin-top:0; }
.hh-take-form .hh-btn,
.hh-space-form .hh-btn{ align-self:flex-start; width:auto; margin-top:20px; }
.hh-space-form input[type="datetime-local"]{
  color-scheme:dark;
  background:var(--wp--preset--color--panel); color:var(--wp--preset--color--warm);
  border:1px solid var(--hh-line); padding:12px 14px; font:inherit;
}

/* 7. Past streams. The badge was landing on the cover art, and the
   duration belongs inside the thumb the way the prototype draws it. */
.hh-clipthumb.is-stream::before{ content:"REPLAY"; }
.hh-clipgrid .hh-cardfoot{ position:relative; }
.hh-streamnote{ margin:0 !important; padding:6px 20px 0; font-size:14px;
  color:var(--wp--preset--color--silver); }

/* 8. The events table: rows, not a grid of boxes. */
.hh-events table,
.hh-events td,
.hh-events th{ border:0 !important; }
.hh-events thead th{ border-bottom:1px solid var(--hh-line) !important;
  padding:0 0 14px !important; }
.hh-events tbody tr{ border-bottom:1px solid var(--hh-line); }
.hh-events td{ padding:26px 24px 26px 0 !important; vertical-align:top; }
.hh-events td:first-child{ width:24%; }
.hh-events td:last-child{ text-align:left; padding-right:0 !important; }

/* 9. Moment results. */
.hh-searchtabs{ margin-top:22px; }
.hh-moments{ border-top:1px solid var(--hh-line); }
.hh-moment{ display:grid; grid-template-columns:110px 1fr; gap:0 24px;
  padding:22px 16px 22px 0; border-bottom:1px solid var(--hh-line);
  text-decoration:none; align-items:start; }
.hh-moment-at{ font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--wp--preset--color--neon); padding-top:3px; }
.hh-moment-said{ margin:0 0 10px !important; font-size:17px; line-height:1.5;
  color:var(--wp--preset--color--warm); max-width:80ch; }
.hh-moment-said em{ font-style:normal; font-weight:800; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--wp--preset--color--silver); margin-right:8px; }
.hh-hit{ background:none; color:var(--wp--preset--color--neon); font-weight:700; }
.hh-moment-foot{ margin:0 !important; display:flex; gap:18px; flex-wrap:wrap;
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--silver); }
.hh-moment-foot a{ color:var(--wp--preset--color--silver); text-decoration:none; }
.hh-moment-foot a:hover{ color:var(--wp--preset--color--neon); }
.hh-moment-note{ margin-top:26px; }
@media (max-width:640px){ .hh-moment{ grid-template-columns:1fr; gap:8px; } }

/* 10. The member directory sized to its cards, not stretched to two. */
.hh-directory{ display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; gap:2px !important; }
.hh-dir-card{ background:var(--wp--preset--color--panel);
  outline:1px solid var(--hh-line); padding:22px 20px; text-decoration:none;
  display:flex; flex-direction:column; gap:10px; }


/* ===============================================================
   Round three. Every item from the page by page pass.
   =============================================================== */

/* 1. Panel headings go back to white. They were only ever meant to be
   neon on Explore, where the four are the point of the page. */
.hh-everyep h3,
.hh-panels h3{ color:var(--wp--preset--color--warm) !important; }
.hh-explore-panels h3{ color:var(--wp--preset--color--neon) !important; }

/* 2. Panels take the same hover lift as a card. */
.hh-everyep > *,
.hh-panels > *{ padding:22px 30px 26px !important; transition:background .12s linear; }
.hh-everyep > *:first-child,
.hh-panels > *:first-child{ padding-left:0 !important; }
.hh-everyep > *:hover,
.hh-panels > *:hover{ background:var(--wp--preset--color--panel) !important; }

/* 3. Rate it, and the action link under each panel. */
.hh-panel-stars{ margin:0 !important; color:var(--wp--preset--color--neon);
  font-size:17px; letter-spacing:3px; }
.hh-panel-do{ display:inline-block; margin-top:14px !important;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--silver); text-decoration:none; }
.hh-panel-do:hover{ color:var(--wp--preset--color--neon); }
.hh-headrow{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.hh-headrow h3{ margin:0 !important; }

/* 4. Button rows. */
.wp-block-buttons{ margin-top:26px !important; margin-bottom:52px !important; }
.wp-block-buttons:last-child{ margin-bottom:0 !important; }
.hh-hero .wp-block-buttons,
.hh-tier .wp-block-buttons,
.hh-everyep .wp-block-buttons,
.hh-panels .wp-block-buttons{ margin-bottom:0 !important; }

/* 5. Section separators. */
.hh-sep{ border:0; border-top:1px solid var(--hh-line); margin:56px 0 !important;
  height:0; padding:0; }
main > .wp-block-separator{ border:0; border-top:1px solid var(--hh-line);
  margin:56px 0; opacity:1; }

/* 6. Explore spacing. */
.hh-moment-form{ margin-top:6px !important; margin-bottom:0 !important; }
.hh-searchtabs{ margin-top:30px !important; }
.hh-searchtabs + .hh-empty,
.hh-searchtabs + .hh-moment-count,
.hh-searchtabs + .hh-moments,
.hh-searchtabs + .hh-directory{ margin-top:34px !important; }

/* 7. Every select matches the fields under it. */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:var(--wp--preset--color--panel);
  color:var(--wp--preset--color--warm);
  border:1px solid var(--hh-line);
  padding:14px 44px 14px 16px; font:inherit; font-size:15px; line-height:1.3;
  background-image:linear-gradient(45deg,transparent 50%,var(--wp--preset--color--neon) 50%),
                   linear-gradient(135deg,var(--wp--preset--color--neon) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
select:focus{ border-color:var(--wp--preset--color--neon); outline:0; }

/* 8. Past streams: the duration sits in the thumb. */
.hh-clipgrid > *{ position:relative; }
.hh-clipgrid .hh-cardtime{
  position:absolute; left:14px; top:calc(56.25% - 34px); z-index:2;
  background:var(--wp--preset--color--ink); border:1px solid var(--hh-line);
  padding:4px 8px; font-size:11px; font-weight:800; letter-spacing:.1em;
  color:var(--wp--preset--color--warm);
}
.hh-clipgrid .hh-cardfoot{ display:none; }

/* 9. The events table. */
.hh-events{ margin-top:0 !important; }
.hh-events table, .hh-events td, .hh-events th{ border:0 !important; }
.hh-events thead th{ border-bottom:1px solid var(--hh-line) !important;
  padding:0 40px 14px 0 !important; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--silver) !important; background:none !important; }
.hh-events tbody tr{ border-bottom:1px solid var(--hh-line); }
.hh-events td{ padding:30px 40px 30px 0 !important; vertical-align:top; }
.hh-events td:first-child{ width:23%; white-space:normal; }
.hh-events td:nth-child(3){ width:16%; }
.hh-events td:last-child{ width:15%; text-align:left; padding-right:0 !important; }

/* 10. Tell us and Read out loud are display type, one box, no divider. */
.hh-split h3{ font-family:var(--wp--preset--font-family--display);
  font-weight:400; font-size:34px; letter-spacing:.01em; }
.hh-split{ gap:0 !important; background:none !important; }
.hh-split > .wp-block-column + .wp-block-column{ border-left:0 !important; }

/* 11. The Hangover landing page. */
.hh-features{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:2px; margin-top:8px; }
.hh-feature{ background:var(--wp--preset--color--panel);
  outline:1px solid var(--hh-line); padding:24px 22px 26px; }
.hh-feature:hover{ background:#0E141D; }
.hh-feature h3{ margin:0 0 8px !important; font-size:17px;
  color:var(--wp--preset--color--warm); }
.hh-feature p{ margin:0; font-size:14.5px; color:#B6B1AB; }
.hh-cta{ border:1px solid var(--hh-line); padding:44px 40px; margin-top:56px;
  text-align:center; }
.hh-cta h2{ margin:0 0 10px !important; }
.hh-cta p{ margin:0 auto 8px; max-width:62ch; }

/* 12. The shop grid. */
.hh-shopgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1px; background:var(--hh-line); border:1px solid var(--hh-line); }
.hh-item{ background:var(--wp--preset--color--ink); display:flex; flex-direction:column; }
.hh-item:hover{ background:var(--wp--preset--color--panel); }
.hh-item-art{ aspect-ratio:1; display:grid; place-items:center; padding:26px;
  background:linear-gradient(135deg,#12161E,#080C13);
  border-bottom:1px solid var(--hh-line); }
.hh-item-art span{ font-family:var(--wp--preset--font-family--display);
  font-weight:400; font-size:30px; line-height:1.02; text-align:center;
  color:var(--wp--preset--color--warm); text-transform:uppercase;
  transform:skewX(-6deg); }
.hh-item-name{ margin:0 !important; padding:18px 20px 0; font-size:16px;
  font-weight:700; color:var(--wp--preset--color--warm); }
.hh-item-price{ margin:0 !important; padding:6px 20px 22px; font-size:14px;
  color:var(--wp--preset--color--neon); }

/* ============================================================================
   ROUND FOUR. Every value below was read out of the prototype source rather
   than judged by eye, so the live site and the prototype now agree by
   measurement. Grouped by the defect each block fixes.
   ============================================================================ */

/* ---------- 1. The display face ----------
   Anton ships in a single weight. The theme was asking for bold, so the browser
   drew a synthetic bold by thickening the outline, which is what read as heavy
   and slightly blurred next to the prototype. The prototype asks for 400 and a
   .92 line height. Nothing else about the type changes. */
.hh-skew,
h1.hh-skew,
h2.hh-skew,
.wp-block-site-title a,
h1.wp-block-post-title,
.hh-hero h1,
.hh-tier .hh-tier-name,
.hh-day .hh-day-name,
.hh-card-no,
.hh-stat,
.hh-news h2,
.hh-item-art span,
.hh-moment-at,
.hh-counts b,
.hh-profile-name{
  font-weight:400 !important;
  font-synthesis-weight:none;
}
.hh-skew,
h1.wp-block-post-title,
.hh-hero h1{ line-height:.92; letter-spacing:.005em; }

/* ---------- 2. The stub rule ----------
   WordPress core pins a separator that is not styled wide to exactly 100px, so
   every hh-sep was drawing an inch long line at the left margin instead of a
   full width rule. This showed on Live, Spaces, Shop and Contact. */
hr.wp-block-separator.hh-sep,
hr.wp-block-separator.alignwide.hh-sep{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-top:1px solid var(--hh-line) !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  height:0 !important;
  opacity:1 !important;
}

/* ---------- 3. Card metadata sits under the text, not on the floor ----------
   The cards stretch to a common height, and the meta row was pushed to the
   bottom of whichever card was tallest. Pinning it to a fixed distance below
   the summary puts it where the prototype has it. */
.hh-grid > *{ min-height:0 !important; height:100%; }
.hh-cardfoot{ margin-top:14px !important; padding-top:0 !important; }
.hh-clipgrid .hh-cardfoot{ margin-top:0 !important; }

/* ---------- 4. The four segment labels on Editorial Standards ----------
   These were inheriting the column paragraph size and rendering at 15px, half
   again the size of the prototype, with no gap before the heading. */
.hh-grid .hh-label,
.hh-panels .hh-label,
.hh-explore-panels .hh-label,
p.hh-label{
  font-size:10px !important;
  line-height:1.6 !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  padding:3px 7px !important;
  border-width:1px !important;
  margin:0 0 12px !important;
  align-self:flex-start;
  width:auto;
}

/* ---------- 5. Filter chips on Episodes ----------
   The prototype filters are chips in a row, not underlined text tabs. */
.hh-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.hh-filters a,
.hh-filters .hh-chip{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 10px;
  border:1px solid var(--wp--preset--color--char);
  color:var(--wp--preset--color--silver); text-decoration:none;
}
.hh-filters a:hover{ border-color:var(--wp--preset--color--neon); color:var(--wp--preset--color--neon); }
.hh-filters a.is-on,
.hh-filters .hh-chip.is-neon{
  background:var(--wp--preset--color--neon);
  color:var(--wp--preset--color--ink);
  border-color:var(--wp--preset--color--neon);
}

/* ---------- 6. The events table ----------
   The header rule was drawing heavy and bright. The prototype uses the same
   hairline as every other divider on the site. */
.hh-events th{
  border-bottom:1px solid var(--hh-line) !important;
  padding:0 18px 14px 0 !important;
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--silver);
}
.hh-events td{
  border-bottom:1px solid var(--hh-line) !important;
  padding:18px 18px 18px 0 !important;
}
.hh-events td:first-child{ white-space:nowrap; width:22%; }

/* ---------- 7. Clip cards ----------
   The duration chip and the source episode line were missing, and the text
   block was taller than the space the card gave it, so titles were cut off. */
.hh-clipgrid > *{ padding:0 !important; height:100%; min-height:0 !important; }
.hh-clip-body{ padding:18px 20px 22px; }
.hh-clip-body h3,
.hh-clip-body .hh-clip-title{ font-size:16px; font-weight:700; line-height:1.25; margin:0; }
.hh-clip-from{ font-size:14px; color:#B6B1AB; margin:8px 0 0; }
.hh-clipthumb .hh-dur{
  position:absolute; left:16px; bottom:16px;
  font-size:11px; font-weight:800; letter-spacing:.1em;
  background:var(--wp--preset--color--ink); border:1px solid var(--hh-line);
  padding:4px 8px; color:var(--wp--preset--color--warm);
}

/* ---------- 8. Contact routing lines ----------
   These were running on as the tail of the paragraph. In the prototype they are
   their own small uppercase caption with a gap above. */
.hh-goes{
  display:block; margin-top:16px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--silver);
}

/* ---------- 9. Spaces cards ----------
   The status chip and the listener or time reading sit on one line above the
   title, with the action on its own line at the bottom. */
.hh-space-head{
  display:flex; gap:12px; align-items:center; margin:0 0 6px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--silver);
}
.hh-space-act{
  margin-top:14px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--silver);
}

/* ---------- 10. Press audience panels ---------- */
.hh-stat{
  font-family:var(--wp--preset--font-family--display);
  font-size:56px; line-height:1; color:var(--wp--preset--color--neon);
  transform:skewX(-6deg); transform-origin:left bottom; margin:0 0 10px;
}

/* ---------- 11. The clip card, rendered by the plugin ---------- */
.hh-clipgrid .hh-clip{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--wp--preset--color--ink); outline:1px solid var(--hh-line);
  height:100%; padding:0;
}
.hh-clipgrid .hh-clip:hover{ background:var(--hh-panel-hover); }
.hh-clipgrid .hh-clipthumb{
  display:block; position:relative; border-bottom:1px solid var(--hh-line);
  aspect-ratio:16/9; overflow:hidden;
}
.hh-clipgrid .hh-clipthumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.hh-clipgrid .hh-clip-body{ display:block; padding:18px 20px 22px; }
.hh-clipgrid .hh-clip-title{
  display:block; font-size:16px; font-weight:700; line-height:1.25;
  color:var(--wp--preset--color--warm);
}
.hh-clipgrid .hh-clip-from{ display:block; font-size:14px; color:#B6B1AB; margin-top:8px; }
.hh-clipgrid .hh-dur{
  position:absolute; left:16px; bottom:16px;
  font-size:11px; font-weight:800; letter-spacing:.1em;
  background:var(--wp--preset--color--ink); border:1px solid var(--hh-line);
  padding:4px 8px; color:var(--wp--preset--color--warm);
}

/* the plugin rendered grids need their own display, the block grids get it from the block */
div.hh-clipgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
div.hh-spacegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
@media (max-width:960px){ div.hh-clipgrid{ grid-template-columns:repeat(2,1fr); } div.hh-spacegrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ div.hh-clipgrid, div.hh-spacegrid{ grid-template-columns:1fr; } }

/* ---------- 12. Explore ---------- */
.hh-moment-form{ margin-top:30px !important; }
.hh-searchtabs{ margin-top:34px !important; padding-top:34px; border-top:1px solid var(--hh-line); }

/* ---------- 13. Contact routing lines ---------- */
.hh-panels .hh-fineprint,
.hh-explore-panels .hh-fineprint{
  display:block; margin-top:16px !important;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--silver);
}

/* ---------- 14. The Hangover tier cards ---------- */
.hh-tier li{ font-size:14.5px; line-height:1.45; }
.hh-tier ul{ gap:9px; }

/* ---------- 15. Profile badges, earned rather than typed ---------- */
.hh-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.hh-badge{
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--wp--preset--color--neon);
  color:var(--wp--preset--color--neon);
}
.hh-badge.is-quiet{ border-color:var(--wp--preset--color--char); color:var(--wp--preset--color--silver); }
.hh-counts{ display:flex; gap:34px; flex-wrap:wrap; margin-top:18px; }
.hh-counts b{ display:block; font-family:var(--wp--preset--font-family--display);
  font-size:28px; line-height:1; color:var(--wp--preset--color--warm);
  transform:skewX(-6deg); transform-origin:left bottom; }
.hh-counts span{ display:block; font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--wp--preset--color--silver); margin-top:6px; }

/* ---------- 16. Space cards in the Live now grid ---------- */
.hh-spacegrid .hh-space-card{
  display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit;
  background:var(--wp--preset--color--ink); outline:1px solid var(--hh-line);
  padding:26px 24px 28px; height:100%;
}
.hh-spacegrid .hh-space-card:hover{ background:var(--hh-panel-hover); }
.hh-spacegrid .hh-space-title{ display:block; font-size:21px; font-weight:700; line-height:1.25;
  color:var(--wp--preset--color--warm); margin:0; }
.hh-spacegrid .hh-space-desc{ display:block; font-size:15px; color:#B6B1AB; }
.hh-spacegrid .hh-space-host{ display:block; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--silver); }
.hh-spacegrid .hh-space-act{ margin-top:auto; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--silver); }
.hh-spacegrid .hh-space-card:hover .hh-space-act{ color:var(--wp--preset--color--neon); }

/* ---------- 17. The take form's room specific fields ---------- */
.hh-take-field[hidden]{ display:none !important; }
.hh-take-form select{ width:100%; }

/* ---------- 18. The live audio room ---------- */
.hh-room-audio{ margin:22px 0 0; min-height:0; }
.hh-room-audio.is-open{ min-height:420px; border:1px solid var(--hh-line); }
.hh-room-audio iframe{ display:block; width:100%; border:0; }

/* ============================================================================
   ROUND FIVE. The modifications document, checked page by page.
   ============================================================================ */

/* ---------- 19. A section heading centered between two rules ---------- */
.hh-rule.hh-rule-center{ justify-content:center; text-align:center; }
.hh-rule.hh-rule-center::before,
.hh-rule.hh-rule-center::after{ content:""; flex:1; height:1px; background:var(--hh-line); }
.hh-lede.hh-center{ text-align:center; margin-left:auto !important; margin-right:auto !important; max-width:60ch; }

/* ---------- 20. Episode card metadata on one row ----------
   The labels and runtime were following the summary, so three cards of
   different text length put them at three different heights. Clamping the
   title and the summary to a fixed number of lines makes every card's text
   block the same height, so the metadata lands on the same row across the
   grid AND stays close to the text rather than being pushed to the floor. */
.hh-grid .wp-block-post-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.5em;
}
.hh-grid .wp-block-post-excerpt__excerpt,
.hh-grid .wp-block-post-excerpt p{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; min-height:4.5em;
}
.hh-cardfoot{ margin-top:18px !important; padding-top:0 !important; }

/* ---------- 21. The Rooms panel ---------- */
.hh-rooms{ padding:22px 22px 20px !important; }
.hh-rooms h4{ margin:0 0 18px !important; }
.hh-rooms .hh-room{
  display:grid !important; grid-template-columns:1fr auto;
  align-items:baseline; column-gap:16px; padding:0 0 16px; margin:0;
}
.hh-rooms .hh-room:last-child{ padding-bottom:0; }
.hh-rooms .hh-room-name{ grid-column:1; }
.hh-rooms .hh-room-count{ grid-column:2; justify-self:end; }
.hh-rooms .hh-room-desc{ grid-column:1 / -1; margin-top:5px; }

/* ---------- 22. Trending tags in the brand neon ---------- */
.hh-tags a, .hh-trend-tags a, .hh-side-box .hh-tags a{
  color:var(--wp--preset--color--neon) !important;
  border-color:rgba(213,223,69,.32) !important;
}
.hh-tags a:hover, .hh-trend-tags a:hover{
  background:var(--wp--preset--color--neon) !important;
  color:var(--wp--preset--color--ink) !important;
}

/* ---------- 23. The Monthly Mix, two by two ---------- */
.hh-news{
  display:grid !important;
  grid-template-columns:1.1fr .9fr;
  column-gap:40px; row-gap:14px; align-items:end;
  background:var(--wp--preset--color--neon);
  color:var(--wp--preset--color--ink);
  padding:52px 44px;
}
.hh-news > *{ margin:0 !important; }
.hh-news .hh-news-title{
  font-family:var(--wp--preset--font-family--display); font-weight:400;
  text-transform:uppercase; line-height:.94;
  transform:skewX(-6deg); transform-origin:left bottom;
  color:var(--wp--preset--color--ink);
}
.hh-news .hh-news-sub{ font-size:16px; font-weight:500; align-self:start; }
.hh-news .hh-news-fine{ font-size:13px; font-weight:500; align-self:start; }
@media (max-width:820px){ .hh-news{ grid-template-columns:1fr; padding:36px 24px; } }

/* ---------- 24. Explore, the gap above the search row ---------- */
.hh-moment-form{ margin-top:26px !important; }
.hh-lede + .hh-moment-form,
.hh-lede + * .hh-moment-form{ margin-top:26px !important; }

/* ---------- 25. Empty paragraphs must not take a grid cell ---------- */
.hh-news > p:empty{ display:none !important; }
.hh-news .hh-read-form{ margin:0 !important; align-self:end; }

/* ---------- 26. The Monthly Mix, placed explicitly ----------
   The wpautop paragraphs around the form are not truly empty, they hold a
   newline, so :empty never matched them and they kept taking grid cells.
   Naming the four areas removes the guesswork entirely. */
.hh-news{ grid-template-areas: "title form" "sub   fine"; }
.hh-news .hh-news-title{ grid-area:title; }
.hh-news .hh-read-form,
.hh-news form{ grid-area:form; align-self:end; }
.hh-news .hh-news-sub{ grid-area:sub; }
.hh-news .hh-news-fine{ grid-area:fine; }
.hh-news > p:not([class]){ display:none !important; }
@media (max-width:820px){ .hh-news{ grid-template-areas:"title" "form" "sub" "fine"; } }

/* ============================================================================
   ROUND SIX. The Live page: the player, the off air panel, and the chat.
   The channel embed draws its own error box when nothing is streaming, so it
   is only ever put on the page inside the show window. Outside it the panel
   below says when to come back, which is what somebody landing here on a
   Tuesday actually wants.
   ============================================================================ */

.hh-live-player{
  position:relative; width:100%; aspect-ratio:16 / 9;
  background:#000; border:1px solid var(--hh-line); margin:0 0 8px;
}
.hh-live-player iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

.hh-live-next{
  border:1px solid var(--hh-line); background:var(--wp--preset--color--panel);
  padding:44px 40px; margin:0 0 8px;
}
.hh-live-off{
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wp--preset--color--silver); margin:0 0 14px;
}
.hh-live-when{
  font-family:var(--wp--preset--font-family--display); font-weight:400;
  font-synthesis-weight:none; text-transform:uppercase;
  transform:skewX(-6deg); transform-origin:left bottom;
  font-size:clamp(28px,4vw,44px); line-height:.92; letter-spacing:.005em;
  color:var(--wp--preset--color--warm); margin:0;
}
.hh-live-count{
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--neon); margin:14px 0 0;
}
.hh-live-body{ color:#B6B1AB; margin:18px 0 0; max-width:56ch; }
.hh-live-actions{ margin:24px 0 0; }

.hh-livechat{ margin-top:8px; }
.hh-livechat h2.hh-rule{ margin-top:52px; }
.hh-livechat .hh-chat-lines{
  border:1px solid var(--hh-line); background:var(--wp--preset--color--panel);
  padding:18px 20px; min-height:220px; max-height:420px; overflow-y:auto;
}
.hh-livechat .hh-chat-line{ margin:0 0 10px; font-size:15px; line-height:1.5; }
.hh-livechat .hh-chat-line strong{
  color:var(--wp--preset--color--neon); font-weight:800;
  letter-spacing:.04em; margin-right:6px;
}
.hh-livechat .hh-chat-form{ display:flex; gap:10px; margin-top:14px; }
.hh-livechat .hh-chat-say{
  flex:1 1 auto; background:var(--wp--preset--color--ink);
  border:1px solid var(--hh-line); color:var(--wp--preset--color--warm);
  padding:12px 14px; font-size:15px;
}
.hh-livechat .hh-chat-say:focus{ outline:none; border-color:var(--wp--preset--color--neon); }
.hh-livechat .hh-fineprint{ margin-top:14px; }

@media (max-width:640px){
  .hh-live-next{ padding:32px 24px; }
  .hh-livechat .hh-chat-form{ flex-direction:column; }
}

/* ============================================================================
   ROUND SEVEN. Consistency pass: one field box, one table rhythm.
   ============================================================================ */

/* ---------- 28. Every form field on the site is the same box ----------
   Fields were coming out at 660, 690, 692 and 697 across four pages, because
   selects carried extra right padding, some fields were sized content box and
   two competing rules set 15px and 16px text. One rule now sets the box for
   every field, so a select, a text input and a textarea line up on both edges
   wherever they appear. The arrow on a select still gets its room, but as
   inset rather than as extra width. */
.hh-take-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.hh-take-form select,
.hh-take-form textarea,
.hh-contact-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.hh-contact-form select,
.hh-contact-form textarea,
.hh-moment-form input[type="search"],
.hh-moment-form input[type="text"],
.hh-reply-form textarea,
.hh-read-form input[type="email"],
.hh-space-form input,
.hh-space-form textarea,
.hh-space-form select{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0;
  font-family:var(--wp--preset--font-family--sans) !important;
  font-size:15px !important;
  line-height:1.5 !important;
  padding:13px 15px !important;
  border:1px solid var(--hh-line) !important;
  border-radius:0 !important;
  background-color:var(--wp--preset--color--ink) !important;
  color:var(--wp--preset--color--warm) !important;
}

/* A date picker draws its own control, which comes out two pixels taller than
   a plain input. Fixing the height makes every field type land on one line. */
.hh-take-form input,
.hh-take-form select,
.hh-contact-form input,
.hh-contact-form select,
.hh-moment-form input,
.hh-read-form input,
.hh-space-form input,
.hh-space-form select{ height:50px !important; }
.hh-contact-form .hh-hp input{ height:auto !important; }

/* The honeypot stays exactly as hidden as it was. */
.hh-contact-form .hh-hp,
.hh-contact-form .hh-hp input{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden; }

/* Room for the arrow, taken out of the padding rather than added to the box. */
.hh-take-form select,
.hh-contact-form select,
.hh-space-form select{ padding-right:42px !important; appearance:none; -webkit-appearance:none; }

/* Textareas differ from inputs only in height, and they agree with each other. */
.hh-take-form textarea,
.hh-contact-form textarea,
.hh-reply-form textarea,
.hh-space-form textarea{ min-height:140px !important; resize:vertical; }

/* A field sitting in a row beside its button takes the rest of the row. */
.hh-moment-row,
.hh-read-row{ display:flex; gap:10px; align-items:stretch; }
.hh-moment-row input,
.hh-read-row input{ flex:1 1 auto; }
.hh-moment-row .hh-btn,
.hh-read-row .hh-btn,
.hh-moment-row button,
.hh-read-row button{ flex:0 0 auto; }

/* ---------- 29. One table rhythm ----------
   Events rows were 85px and the Corrections row 62px, so two tables built from
   the same component did not read as the same component. Height on a table row
   behaves as a minimum, so this sets the floor every row shares and a row
   carrying more text still grows rather than clipping it. That matters most on
   Corrections, which exists to show the whole of what was wrong. */
.hh-events tbody tr{ height:86px; }
.hh-events th,
.hh-events td{ vertical-align:top; }
.hh-events td{ padding:18px 24px 18px 0 !important; }
.hh-events td:last-child{ padding-right:0 !important; }
.hh-events th{ padding:0 24px 14px 0 !important; }
.hh-events th:last-child{ padding-right:0 !important; }

/* ---------- 30. The table header rule is the same hairline as every other ----------
   The thead element itself was carrying a 2.4px light border from the block
   editor's table defaults, stacked on top of the header cells' own hairline.
   That made the one rule on the page that is not a hairline sit at the top of
   every table. */
.hh-events thead,
.hh-events tfoot,
.hh-events table,
.hh-events tbody{ border:0 !important; }
.hh-events thead th{ border-bottom:1px solid var(--hh-line) !important; }

/* ---------- 31. The three tier cards are one height ----------
   The cards were 669, 536 and 515 tall, so three panels sitting side by side
   ended at three different places and the three Join buttons sat on three
   different lines. The cause was a height:100% inherited from the card grid
   rules: a percentage height against a column whose own height is decided by
   its content resolves to auto, and an item with an auto height opts itself
   out of the stretch it would otherwise get for free. Letting them stretch and
   pushing the button down with the leftover space puts every card on the same
   bottom edge, whatever the lists do. */
.hh-tier{
  height:auto !important;
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column !important;
}
.hh-tier > .wp-block-buttons,
.hh-tier > .wp-block-button{ margin-top:auto !important; margin-bottom:0 !important; }

/* ---------- 32. The Monthly Mix field is the one field that is not a dark box ----------
   Every other field on the site sits on the near black ground, so the shared
   field rule paints it ink with warm text. This one sits on the neon, where
   that reads as a black hole punched in the panel. It also forced the field to
   the full width of its row, which pushed the button onto a second line.
   The prototype makes the field and its button a single unit: one ink border
   around both, the field transparent so the neon runs through it, and the
   button flush against it rather than beside it. */
.hh-news .hh-read-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  border:2px solid var(--wp--preset--color--ink);
  align-items:stretch;
}
.hh-news .hh-read-form input[type="email"]{
  flex:1 1 auto !important;
  width:auto !important;
  height:auto !important;
  background-color:transparent !important;
  color:var(--wp--preset--color--ink) !important;
  border:0 !important;
  padding:15px 16px !important;
}
.hh-news .hh-read-form input[type="email"]::placeholder{ color:rgba(5,8,14,.55) !important; }
.hh-news .hh-read-row .hh-btn,
.hh-news .hh-read-row button{
  flex:0 0 auto !important;
  background:var(--wp--preset--color--ink) !important;
  color:var(--wp--preset--color--neon) !important;
  border:0 !important;
  margin:0 !important;
  padding:15px 22px !important;
}

/* ============================================================================
   ROUND EIGHT. The card grid rebuilt the way the prototype builds it, plus the
   Episodes hero and the rating stars.
   ============================================================================ */

/* ---------- 33. The card grid ----------
   Three differences from the prototype, and the middle one is the defect.

   The prototype draws no border on a card. It paints the grid container in the
   hairline color and leaves a 2px gap, so every line between cards is the
   container showing through: continuous both ways, never doubled where two
   cards meet, never missing at the ends.

   It sizes a card with min-height:100%, not height:100%. That is the whole
   mess. A percentage height resolves against a grid row whose own height is
   auto, so each card declared itself shorter than its content, overflowed its
   row, and the following row began underneath it. Cards bled into each other
   and no two rows lined up.

   And it pushes the meta row down with margin-top:auto rather than holding it
   in place by clamping the title and summary to a fixed number of lines. The
   clamp only lined the metadata up for text of the length it was tuned for,
   and truncated real titles to do it. */
.hh-grid.wp-block-post-template,
.hh-clipgrid{
  /* Painting the container and letting it show through the gap draws the lines
     but also tints any empty cell in a short last row, and a 2px gap reads
     heavier than the 1px dividers used everywhere else. So each card draws its
     own hairline on its right and bottom edge instead: where two cards meet the
     two lines land on the same pixel, an empty cell draws nothing, and the
     outermost lines fall outside the container and are clipped away, which is
     what leaves the grid with no outer border. */
  background:transparent !important;
  gap:0 !important;
  overflow:hidden;
}
.hh-grid.wp-block-post-template > *,
.hh-clipgrid > *{
  background:var(--wp--preset--color--ink) !important;
  /* No height and no min-height. A grid item with an auto height is stretched
     to its row for free, and the row sizes itself to the tallest card. Naming
     either one as a percentage puts the row and the card in a loop: the row
     wants the card's height, the card wants the row's, and the browser breaks
     the tie by sizing the row from a different pass, which is how a card ends
     up taller than the row it lives in. */
  height:auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  border:0 !important;
}
.hh-grid.wp-block-post-template .hh-cardfoot,
.hh-clipgrid .hh-cardfoot{
  margin-top:auto !important;
  padding-top:14px !important;
}
/* The metadata lines up because the cards are equal height, not because the
   text above it was cut to fit, so the clamps come off. */
.hh-grid .wp-block-post-title,
.hh-grid .wp-block-post-excerpt__excerpt,
.hh-grid .wp-block-post-excerpt p{
  display:block !important;
  -webkit-line-clamp:none !important;
  min-height:0 !important;
  overflow:visible !important;
}

/* ---------- 34. The Episodes hero ----------
   The prototype gives the filter row a full section break before the cards:
   64px, a hairline, 64px. The live page had 24px and no rule, which is what
   made the head of the page feel crowded. The heading spacing follows the
   prototype's own margins too. */
.hh-eyebrow + h1.wp-block-heading{ margin-top:14px !important; }
h1.wp-block-heading + .hh-lede{ margin-top:26px !important; }
.hh-filters{ margin-top:32px !important; margin-bottom:64px !important; }
.hh-filters + .wp-block-query{
  padding-top:64px !important;
  border-top:1px solid var(--hh-line);
}

/* ---------- 35. The rating stars ----------
   They were pushed to the far edge of the panel by space-between and drawn in
   the body grey. They belong beside the heading, in the brand neon. */
.hh-headrow{ justify-content:flex-start !important; gap:14px !important; align-items:baseline !important; }
.hh-panel-stars{ color:var(--wp--preset--color--neon) !important; margin:0 !important; letter-spacing:.06em; }

/* ---------- 36. Stacked day columns line up on the left ----------
   The day columns carry a 30px left padding as their gutter. Stacked on a
   phone that gutter became an indent on every day but Monday. */
@media (max-width:781px){
  .hh-day{ padding-left:0 !important; padding-right:0 !important; }
}

/* ---------- 37. Cards answer the pointer ----------
   The hairlines between cards come from the grid showing through the gap, so a
   card cannot be outlined on hover without drawing a line where there is not
   one. It lifts off the ground instead: the panel tone, which is the same
   treatment the item rows already use, and the episode number brightens. */
.hh-grid.wp-block-post-template > *,
.hh-clipgrid > *{
  box-shadow:1px 0 0 0 var(--hh-line), 0 1px 0 0 var(--hh-line);
  transition:background-color .18s ease;
}
.hh-grid.wp-block-post-template > *:hover,
.hh-grid.wp-block-post-template > *:focus-within,
.hh-clipgrid > *:hover,
.hh-clipgrid > *:focus-within{
  background:var(--wp--preset--color--panel) !important;
}
.hh-grid.wp-block-post-template > *:hover .hh-card-no,
.hh-clipgrid > *:hover .hh-card-no{ color:var(--wp--preset--color--warm); }
@media (prefers-reduced-motion:reduce){
  .hh-grid.wp-block-post-template > *,
  .hh-clipgrid > *{ transition:none; }
}

/* ============================================================================
   ROUND NINE. Phone and tablet. The layouts already stack and no page scrolls
   sideways at 390px; what was wrong was spacing tuned for a 1440px screen and
   a player bar built for one.
   ============================================================================ */

/* ---------- 38. The top of a page on a phone ----------
   main contributed 24px of margin and 64px of padding, and the hero another
   74px on top of that: 162px of nothing above the first word, which is a third
   of a phone screen spent before the page starts. The proportions that are
   right at 1440px are not right at 390px. */
@media (max-width:781px){
  main.wp-block-group{ margin-top:12px !important; padding-top:28px !important; }
  .hh-hero{ padding-top:24px !important; padding-bottom:44px !important; }
  .hh-day{ padding-left:0 !important; padding-right:0 !important; }
}

/* ---------- 39. The player bar on a phone ----------
   The bar gave 125px to a status line and 181px to the episode, so the title
   was cut to three words while "Audio has not been added to this episode yet"
   wrapped onto three lines and set the height of the whole bar. The status
   line is for whoever is loading the episode, not for a listener on a phone,
   so on a small screen the episode gets the room instead and its title ends in
   an ellipsis rather than mid word. */
@media (max-width:640px){
  .hh-bar-note{ display:none !important; }
  .hh-bar-id{ flex:1 1 auto !important; min-width:0 !important; }
  .hh-bar-text{ min-width:0; }
  .hh-bar-title{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  }
}

/* ---------- 40. Panels and tables on a phone ----------
   A four column table cannot become readable at 390px by wrapping, so it
   scrolls inside its own box rather than pushing the page sideways, and the
   row height floor comes off so a scrolled row is only as tall as it needs. */
@media (max-width:781px){
  .hh-events{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hh-events table{ min-width:560px; }
  .hh-events tbody tr{ height:auto; }
  .hh-live-next{ padding:28px 20px !important; }
  .hh-rooms{ padding:18px !important; }
}

/* ---------- 41. The Spaces grid, same build as the card grid ----------
   This grid was still on the old treatment: a border around every card, which
   drew a box around the whole block, and a 2px gap. It now matches the episode
   and clip grids exactly, so the three grids on the site are one component:
   three columns, a 1px hairline between cards drawn by the cards themselves,
   nothing around the outside, and the action pushed to the bottom so every
   card's action sits on the same line however long its description runs.
   The host line comes off because the prototype's card does not carry one; the
   description says who is in the room. */
.hh-spacegrid{
  grid-template-columns:repeat(3,1fr) !important;
  background:transparent !important;
  gap:0 !important;
  overflow:hidden;
}
.hh-spacegrid > .hh-space-card{
  border:0 !important;
  box-shadow:1px 0 0 0 var(--hh-line), 0 1px 0 0 var(--hh-line);
  background:var(--wp--preset--color--ink) !important;
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  min-height:0 !important;
  transition:background-color .18s ease;
}
.hh-spacegrid > .hh-space-card:hover,
.hh-spacegrid > .hh-space-card:focus-visible{
  background:var(--wp--preset--color--panel) !important;
}
.hh-spacegrid .hh-space-host{ display:none !important; }
.hh-spacegrid .hh-space-title{ margin:0 !important; }
.hh-spacegrid .hh-space-desc{
  display:block; margin:10px 0 0 !important;
  font-size:15px; line-height:1.55; color:#B6B1AB;
}
.hh-spacegrid .hh-space-act{ margin-top:auto !important; padding-top:22px !important; }

@media (max-width:900px){ .hh-spacegrid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:640px){ .hh-spacegrid{ grid-template-columns:1fr !important; } }
@media (prefers-reduced-motion:reduce){ .hh-spacegrid > .hh-space-card{ transition:none; } }

/* ---------- 42. The Press page statistics ----------
   The number in each audience panel was drawing at 15px in the body grey,
   because a column paragraph rule is more specific than a bare class and was
   winning. In the prototype it is the loudest thing on the page: the display
   face at 56px in neon, skewed like every other display figure on the site. */
p.hh-stat,
.hh-panels p.hh-stat,
.hh-panels .wp-block-column p.hh-stat{
  font-family:var(--wp--preset--font-family--display) !important;
  font-weight:400 !important;
  font-synthesis-weight:none;
  font-size:56px !important;
  line-height:1 !important;
  letter-spacing:.005em;
  color:var(--wp--preset--color--neon) !important;
  transform:skewX(-6deg);
  transform-origin:left bottom;
  margin:0 0 12px !important;
}
@media (max-width:781px){
  p.hh-stat, .hh-panels p.hh-stat, .hh-panels .wp-block-column p.hh-stat{ font-size:44px !important; }
}

/* ---------- 43. Sections stop running into each other ----------
   Working with us began at the exact pixel the audience panels ended, so the
   two read as one block. The prototype separates every section the same way:
   64px, a hairline the full width, 64px. The closing action gets the
   prototype's own 32px rather than sitting on the panels above it. */
.hh-panels + h2.hh-rule,
.hh-grid + h2.hh-rule,
.hh-panels + h2.wp-block-heading,
.hh-grid + h2.wp-block-heading,
.hh-lede + h2.hh-rule,
.wp-block-buttons + h2.hh-rule{
  margin-top:64px !important;
  padding-top:64px !important;
  border-top:1px solid var(--hh-line);
}
.hh-panels + .wp-block-buttons,
.hh-grid + .wp-block-buttons{ margin-top:32px !important; }

/* The action that closes a hero sits a fixed distance under the lede rather
   than being spaced by a stack of spacer blocks, which is what left a hole
   above it on Press. */
.hh-lede + .wp-block-buttons{ margin-top:30px !important; }

/* ---------- 44. An empty chat says so ----------
   The message area carries a minimum height so a live chat does not jump
   about as lines arrive. With no messages in it at all that minimum drew a
   large empty rectangle with nothing to explain it. Empty, it collapses to a
   single line and says why it is empty. The selector is safe here because the
   element is printed with no whitespace inside it, so :empty genuinely
   matches until the first message is added. */
.hh-chat-lines:empty{
  /* An earlier rule pins the box to a fixed 320px so a filling chat does not
     jump. Clearing the minimum alone left that fixed height in place, which is
     why the empty box stayed the same size. */
  height:auto !important;
  min-height:0 !important;
  display:flex;
  align-items:center;
  padding:16px 20px !important;
}
.hh-chat-lines:empty::before{
  content:"No messages yet.";
  color:var(--wp--preset--color--silver);
  font-size:15px;
  line-height:1.5;
}
/* On air belongs to the show, not to a member's audio room, and this rule
   applies to both. Scoped to the Live page chat so a quiet Space is not
   described in the vocabulary of a broadcast it is not part of. */
.hh-livechat .hh-chat-lines:empty::before{
  content:"No messages yet. The chat fills up while we are on air.";
}

/* ---------- 45. No second door to the same room ----------
   The off air panel offered Watch past streams while Past streams sits a
   little further down the same page. The button is gone from the panel in the
   plugin; this hides it on the copy running now so the duplicate does not have
   to wait for an upload. */
.hh-live-next .hh-live-actions{ display:none !important; }

/* ---------- 46. No divider against an empty cell ----------
   Each card draws a hairline on its right edge, which is what separates it
   from its neighbour. When the last row is short there is no neighbour, so
   that line ran down the middle of the row with nothing beside it. Dropping
   the right line on the last card is right in both cases: in a short row it
   removes the line that leads nowhere, and in a full row that card sits on the
   outer edge where the line is clipped away anyway. */
.hh-grid.wp-block-post-template > *:last-child,
.hh-clipgrid > *:last-child,
.hh-spacegrid > *:last-child{
  box-shadow:0 1px 0 0 var(--hh-line) !important;
}

/* ---------- 47. The footer blurb sits on the last menu row ----------
   The first footer column is the logo and three lines of text; the three
   beside it are a heading and six links. Measured at 1240px, the last line of
   the blurb was landing about 8px below the last link, which reads as the
   footer not quite lining up.

   The lift is taken off the gap above the paragraph rather than added below
   it, because that column is the tallest one and therefore sets the row
   height: pulling the paragraph up moves it without leaving a hole under it.

   8px is tuned to three lines of blurb against six links. If a footer menu
   gains or loses an item, this number needs looking at again. */
.hh-footer .wp-block-columns > .wp-block-column:first-child > p{
  margin-top:16px;
}

/* Stacked on a phone, so there is nothing to line up with and the tighter gap
   just reads as cramped under the logo. */
@media (max-width:781px){
  .hh-footer .wp-block-columns > .wp-block-column:first-child > p{
    margin-top:24px;
  }
}

/* ---------- 48. The mobile menu, readable ----------
   WordPress draws the mobile overlay on a white panel of its own, and the
   header's link color came through unchanged, so every item in the open menu
   was neon on white. That is around a 1.6 to 1 contrast ratio: legible as a
   shape, not as words, and worst in daylight, which is exactly where a phone
   gets used.

   The links take the darker brand color against that light panel. Neon stays,
   but as the underline rather than the letters, so the current page and hover
   still read as the brand without asking anyone to read yellow on white. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:visited,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  color:var(--wp--preset--color--ink) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus,
.wp-block-navigation__responsive-container.is-menu-open .hh-current > a,
.wp-block-navigation__responsive-container.is-menu-open .hh-current > .wp-block-navigation-item__content{
  color:var(--wp--preset--color--ink) !important;
  text-decoration:underline;
  text-decoration-color:var(--wp--preset--color--neon);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}

/* The close control was inheriting black rather than the brand ink. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  color:var(--wp--preset--color--ink) !important;
}

/* ---------- 49. Mobile padding, measured rather than eyeballed ----------
   Three separate things were making the left and right edges drift on a
   phone. All three are below, each with what it actually measured.

   1. The newsletter panel is display:grid with one implicit column, and an
   implicit column is sized `auto`, which means "as wide as the widest thing
   in it". The signup row is a nowrap flex row whose minimum width is the
   email field plus the button, 317px. The panel's own content box at 393px
   of viewport is 274px. So the track grew to 319px and every child of the
   panel, the heading, the subhead and the fine print, sat 24px past the
   right edge of the neon block while the block itself stayed correctly
   inset. Clamping the column to the container is the whole fix. */
.hh-news{ grid-template-columns:minmax(0,1fr); }
.hh-news > *{ min-width:0; max-width:100%; }

/* 2. With the track clamped the signup row has to be able to shrink, or the
   field keeps its intrinsic width and pushes the button back out again. */
.hh-read-row{ min-width:0; }
.hh-read-row input[type="email"]{ min-width:0; }

/* 3. Every panel on the site carries 24px of inner padding: the header, the
   episode cards, the newsletter block, the community posts, the footer. Two
   did not. Rooms sat at 18 and the trending box at 22, so their first line
   of text started 6px and 2px short of everything stacked above and below
   it. On a wide screen those two sit side by side in a grid and nobody sees
   it. On a phone everything is one column, the left edges line up
   vertically, and the drift is the first thing you notice. Both take the
   house number, at every width, because the drift was never a mobile
   problem, only a mobile visible one. */
/* Rooms already carried an !important padding inside a max-width 781px
   block, so a plain override lost to it. Matching the flag is what it takes;
   the flag is not mine to remove without knowing what it was guarding. */
.hh-rooms{ padding-left:24px !important; padding-right:24px !important; }
.hh-side-box{ padding-left:24px; padding-right:24px; }

/* ---------- 50. The pricing cards, aligned with each other ----------
   The join page puts its three pricing cards inside .hh-panels, and
   .hh-panels carries two rules that were written for a different pattern:
   every direct child gets 30px of side padding, and the first child gets
   none at all. Both are flagged important, so the cards' own 28px never
   applied. Measured at 393px, card one printed its text flush at 28px from
   the screen edge with no padding of any kind, while cards two and three
   printed theirs at 58px. Three cards in a stack, one of them out of line
   with the other two and with everything above and below it.

   The .hh-panels rules stay as they are, because whatever pattern they were
   written for still needs them. These name the tier cards specifically, so
   only the cards change, and all three now take one value. The horizontal
   number is 24, which is what the header, the footer, the episode cards,
   the newsletter block, the community posts, Rooms and the trending box all
   carry. The vertical numbers are the ones .hh-tier was drawn with. */
.hh-tier,
.hh-panels > .hh-tier,
.hh-panels > .hh-tier:first-child{
  padding:34px 24px 32px !important;
}

/* The feature panel on the community page sat at 22, two short of the same
   house number, directly above a tier card. */
.hh-feature{ padding-left:24px; padding-right:24px; }

/* ---------- 51. The header and footer share the page gutter ----------
   Both template parts carry a hardcoded padding-right and padding-left of
   24px as an inline style on the group, and an inline style beats the
   has-global-padding class they also carry. The page gutter is 28px. So on
   a phone every footer link started at 24 while the paragraph directly
   above it started at 28: a four pixel step between the body of the page
   and the footer under it, repeated down the whole footer column, and the
   same four pixels in the header.

   These take the gutter from the same custom property WordPress uses for
   the page itself, so the two can never drift again, at any width, whatever
   the gutter is later changed to. The flag is needed only because the value
   being beaten is inline. */
.hh-header,
.hh-footer{
  padding-left:var(--wp--style--root--padding-left) !important;
  padding-right:var(--wp--style--root--padding-right) !important;
}

/* ---------- 52. Four things that only break on a phone ----------

   1. THE EVENTS TABLE. It is set to a 560px minimum width inside a figure
   that scrolls sideways. On a 430px phone the visitor sees Date and part of
   Event, and has to discover a horizontal scroll to find out where the
   event is or how to get a ticket. The widest cell decides the column, and
   the dates are typed as one long string, so Date took 258px of the 560,
   nearly half the table, squeezing Event into 98px where its description
   broke into a one word ribbon.

   Below the breakpoint the table stops being a table. Each row becomes a
   block and each cell a line with its column name above it, in the same
   small silver capitals the head already used. Nothing is hidden, nothing
   scrolls sideways, and the date gets a line of its own so it can no longer
   push the other three columns off the screen.

   The four labels below mirror the table head by hand, because CSS cannot
   read a cell's column name. If those columns are ever renamed or
   reordered, these four lines have to change with them. */
@media (max-width:781px){
  .hh-events{ overflow-x:visible; }

  .hh-events table{ display:block; width:100% !important; min-width:0 !important; }
  .hh-events thead{ display:none; }
  .hh-events tbody{ display:block; }

  .hh-events tr{
    display:block;
    padding:18px 0 20px;
    border-bottom:1px solid rgba(245,241,236,.14);
  }
  .hh-events tr:last-child{ border-bottom:0; }

  .hh-events td{
    display:block;
    width:auto !important;
    border:0 !important;
    padding:0 0 12px !important;
  }
  .hh-events tr td:last-child{ padding-bottom:0 !important; }

  .hh-events td::before{
    display:block;
    margin-bottom:3px;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgb(141,139,136);
  }
  .hh-events td:nth-child(1)::before{ content:"Date"; }
  .hh-events td:nth-child(2)::before{ content:"Event"; }
  .hh-events td:nth-child(3)::before{ content:"Where"; }
  .hh-events td:nth-child(4)::before{ content:"Tickets"; }
}

/* 2. THE SIGNUP ROW. The field and its button share one line. Clamping the
   newsletter grid stopped them overflowing, but it left the field whatever
   the button did not want: 193px on the largest phone, 156px on a 15 Pro,
   83px at 320, which is about nine characters of an email address. They
   stack instead, both full width, inside the same outer border. */
@media (max-width:600px){
  .hh-read-row{ flex-wrap:wrap; }
  .hh-read-row input[type="email"]{ flex:1 1 100%; width:100%; }
  .hh-read-row .hh-btn{ flex:1 1 100%; width:100%; }
}

/* 3. THE LISTEN CHIPS. Each platform is an inline link with a box drawn
   around it, sitting in a paragraph, so the row wraps as text rather than
   as boxes. At 430px "Amazon Music" straddled the line break: the browser
   drew it as two fragments, the box left open at the end of one line and
   reopened at the start of the next, with the word split in half. Making
   each chip an inline block means the whole chip moves to the next line or
   none of it does. */
.hh-listen a{ display:inline-block; }

/* 4. THE EPISODE PAGE LIST. Every item in that list carries 30px of side
   padding except the first, which a first-child rule zeroes out. Side by
   side on a wide screen that is deliberate, the first column sitting flush
   with the section edge. Stacked on a phone it means "Rate it" starts at 28
   from the edge and "Watch together", "Full transcript" and "Make a clip"
   all start at 58, a step of thirty pixels down the whole list. Stacked,
   the items are plain text with no box of their own, so all four line up
   with the heading above them. */
@media (max-width:781px){
  .hh-everyep > *{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* ---------- 53. The signup row, properly this time ----------
   Section 52 stacked the signup field and its button on phones, and only
   half of it took. Two rules already in this stylesheet force the row to
   stay on one line and force the field to size itself, both flagged
   important:

     .hh-news .hh-read-row{ flex-wrap:nowrap !important }
     .hh-news .hh-read-form input[type="email"]{ flex:1 1 auto !important }

   My rule for the button carried no such competition, so the button took a
   full width basis while the row stayed on one line and the field kept its
   important sizing. The field collapsed to 32px. That is worse than the
   156px it started at, and it was live for a few minutes.

   These match the flag and the specificity, so all three move together or
   none of them do. The nowrap was a deliberate choice, and it is the right
   one on a wide screen where the field and button read as a single pill.
   It stops being right somewhere around a 400px phone, where the button's
   fixed 115px leaves the field too narrow to see an address in. Below 600
   they stack; above it the pill is untouched. */
@media (max-width:600px){
  .hh-read-row,
  .hh-news .hh-read-row{
    flex-wrap:wrap !important;
  }

  .hh-read-row input[type="email"],
  .hh-news .hh-read-form input[type="email"]{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
  }

  .hh-read-row .hh-btn,
  .hh-news .hh-read-row .hh-btn{
    flex:1 1 100% !important;
    width:100% !important;
  }
}

/* ---------- 54. Section spacing on a phone ----------
   The home page sections each carry 64px of padding above and below, set
   inline on the block, with a 24px margin between them. End to end that is
   152px of empty screen between the last line of one section and the first
   line of the next, with the hairline rule floating in the middle of it.
   On a 1400px monitor that reads as confidence. On a 393px phone it is a
   third of the screen with nothing in it, which is what those long dark
   stretches in the screenshots were.

   Sixteen top and bottom, with the 24px margin left alone, makes it 56px
   end to end: 40 above the rule and 16 below, so the rule now belongs to
   the section it introduces rather than floating between two. The hero is
   left out because it sets its own rhythm and has no rule above it.

   The flag is needed because the 64 is an inline style on each block.
   Nothing above 781px changes. */
@media (max-width:781px){
  main > .wp-block-group.alignwide.has-global-padding{
    padding-top:16px !important;
    padding-bottom:16px !important;
  }

  /* The same gap by another route: a section label that follows a panel row
     or a card grid gets 64 of padding and 64 of margin, 128px in total, on
     the home page and on Spaces. */
  .hh-panels + h2.hh-rule,
  .hh-grid + h2.hh-rule,
  .hh-panels + h2.wp-block-heading{
    padding-top:20px !important;
    margin-top:20px !important;
  }
}

/* ---------- 55. The rest of the stacked lists, and two more ----------

   1. .hh-panels is the same first child defect I fixed for .hh-everyep,
   and it turns out .hh-panels is used in five more places: What you can
   search on Explore, How a live show runs on Live, How a Space works on
   Spaces, and the editorial list on Join. Measured at 402px, the first item
   in each list starts at 28 from the screen edge and every item under it
   starts at 58, because the shared rule gives each child 30px of side
   padding and a first-child rule takes it away again from the first one
   only. Side by side in columns that is deliberate. Stacked it is a thirty
   pixel step down the whole list.

   The tier cards are excluded: they are real cards with a background, and
   section 50 already gave them the 24px the rest of the site uses. */
@media (max-width:781px){
  .hh-panels > *:not(.hh-tier){
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* 2. The Space cards are a column flex box set to align-items:center, so
   every child is centered across the card. The body paragraph fills the
   full width, so centering does nothing to it and it reads as left
   aligned, while the status chip, the heading and View Space float to the
   middle. Four different left edges inside one card: measured at 402px the
   chip starts at 72, the heading at 82, the paragraph at 52 and View Space
   at 152, and the same spread is there at 1280. That is not a phone
   problem, so this one is not inside a media query. Everything now starts
   at the card's own inner edge, which is what every other card on the site
   does. If the cards were meant to be centered, the fix is the opposite
   one: center the paragraph too rather than left align the other three. */
.hh-space-card{ align-items:flex-start !important; }

/* 3. On Episodes, the block that holds the episode list carries 64px of
   padding above it plus a 24px margin, so there is 88px of empty screen
   between the last filter chip and the first episode. */
@media (max-width:781px){
  .hh-filters + .wp-block-query{ padding-top:20px !important; }
}

/* ---------- 56. Corrections, and the live Space room ----------

   1. The Corrections table carries the same hh-events class as the Events
   table, which I did not check when I wrote section 52. So Corrections has
   been getting the Events column labels printed over its own columns: its
   Episode cell labelled "Event", "What we said" labelled "Where", "What is
   true" labelled "Tickets", and "Why it matters" labelled nothing at all.
   That is my error and it was live. The labels are now keyed to the page
   each table sits on, so neither can borrow the other's.

   2. Stacking also exposed a second problem on Corrections: one cell holds
   an unbroken string 576px wide inside a 249px column, so at 320px the
   whole page scrolled sideways by 299px. Inside a scrolling table that
   string was contained; as a block it is not. Long strings now break. */
@media (max-width:781px){
  .hh-events td{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .hh-events td::before{ content:""; }

  body.page-id-904 .hh-events td:nth-child(1)::before{ content:"Date"; }
  body.page-id-904 .hh-events td:nth-child(2)::before{ content:"Event"; }
  body.page-id-904 .hh-events td:nth-child(3)::before{ content:"Where"; }
  body.page-id-904 .hh-events td:nth-child(4)::before{ content:"Tickets"; }

  body.page-id-909 .hh-events td:nth-child(1)::before{ content:"Date"; }
  body.page-id-909 .hh-events td:nth-child(2)::before{ content:"Episode"; }
  body.page-id-909 .hh-events td:nth-child(3)::before{ content:"What we said"; }
  body.page-id-909 .hh-events td:nth-child(4)::before{ content:"What is true"; }
  body.page-id-909 .hh-events td:nth-child(5)::before{ content:"Why it matters"; }
}

/* 3. A live Space room is grid-template-columns:1fr auto with nothing that
   collapses it. The auto track is sized by the chat column's minimum, 343px,
   so at 320px the two tracks add up to 429px inside a 249px container and
   the page scrolls sideways by 164px. There is no media query on it at any
   width: the room has never collapsed on a phone. The chat composer under
   it is a nowrap row whose field and button both refuse to shrink, which is
   what made the track that wide in the first place. */
@media (max-width:820px){
  .hh-room{ grid-template-columns:minmax(0,1fr) !important; }
  .hh-room > *{ min-width:0; }
  .hh-room-cols{ grid-template-columns:minmax(0,1fr) !important; min-width:0; }

  .hh-chat-form{ flex-wrap:wrap; }
  .hh-chat-form .hh-chat-say{ flex:1 1 100%; width:100%; min-width:0; }
  .hh-chat-form .hh-btn{ flex:1 1 100%; width:100%; }
}

/* ---------- 57. The one cell that would not wrap ----------
   Section 56 gave the stacked cells overflow-wrap:anywhere and Corrections
   still pushed the page 299px sideways. The reason is that the cell also
   carries white-space:nowrap, and no wrapping rule can act on a cell that
   has been told never to break a line. It holds the empty state sentence,
   "Nothing has been corrected yet", on one 576px line inside a 249px
   column.

   The nowrap is older than anything I wrote; what changed is that section
   52 turned the figure's horizontal scroll off, so the line stopped being
   contained and started pushing the page instead. Both halves are fixed
   here: the cell may wrap, and the figure gets its scroll back as a
   backstop for anything else that cannot. */
@media (max-width:781px){
  .hh-events td{ white-space:normal !important; }
  .hh-events{ overflow-x:auto; }
}

/* ---------- 58. The navigation collapses where the header breaks ----------
   Measured header height on the home page, resizing without reloading:

     1280  103px      1150  103px
     1240  103px      1120  163px
     1200  103px      1100  163px
     1180  103px      1050  163px
                      1000  163px

   The header is one row down to 1150 and two rows at 1120, so the content
   breaks between 1121 and 1149. Nine links plus Alerts, Sign In and Join
   simply stop fitting there. WordPress was handing the menu back to the
   horizontal list at 600px, which left every width from 600 to 1120 with a
   stacked header: 163px at 1000, 204px at 760, 245px at 620, against 103px
   when it fits.

   1150 is not a device category, it is where this particular navigation
   runs out of room. A conventional 1024 would have left 1025 to 1120 still
   broken.

   Scoped to the header, because the footer has a navigation block too and
   it should keep its plain list. */
@media (max-width:1149px){
  .hh-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
    display:none !important;
  }
  .hh-header .wp-block-navigation__responsive-container-open:not(.always-shown){
    display:flex !important;
  }
}

/* ---------- 59. The checkout page ----------
   Found by sweeping the intermediate widths instead of only phone widths.
   The failure itself is at 320, but it is on the page people enter payment
   details on, and two earlier phone-width sweeps passed it. They passed it
   because they measured at load, and the checkout form renders after that,
   so the reading was taken before the thing that breaks was on the page.

   Paid Memberships Pro renders checkout inside a fieldset. A fieldset
   carries a browser default of min-width:min-content that ordinary width
   rules do not override, so the form refused to shrink below 310px inside
   a 249px column and the page scrolled sideways by 33px. The card, its
   title, content and actions inherit the same floor.

   min-width:min-content on a payment form only ever prevents fitting, so
   this is not behind a breakpoint. min-inline-size is set alongside
   min-width because the fieldset minimum is defined in logical terms and
   some engines honor the logical property. */
.pmpro fieldset,
.pmpro .pmpro_form_fieldset,
.pmpro_form_fieldset{
  min-width:0 !important;
  min-inline-size:0 !important;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.pmpro,
.pmpro_form,
.pmpro_card,
.pmpro_card_title,
.pmpro_card_content,
.pmpro_card_actions{
  min-width:0 !important;
  max-width:100%;
  box-sizing:border-box;
}

/* ---------- 60. The room grid columns end level ----------
   Measured on the home page at 1280: the feed column is 558px tall and the
   Rooms and trending sidebar beside it is 746px, so the feed stops 211px
   short and the section looks unfinished on the left.

   The pattern now asks for four takes rather than three, which is the real
   answer, but there are only three published takes on the site, so the
   shortcode returns what exists. This makes the two columns end together in
   the meantime, and it keeps doing the right thing once a fourth take is
   posted: the grid stretches both columns to the taller of the two, the
   feed column becomes a flex column, and Join the conversation is pushed to
   its bottom edge instead of sitting directly under the last post.

   Only above the point where the grid is actually two columns. Below 900px
   it is a single stack and there is nothing to line up. */
@media (min-width:901px){
  .hh-room-grid{ align-items:stretch; }

  .hh-room-grid > *:first-child{
    display:flex;
    flex-direction:column;
  }

  .hh-room-grid > *:first-child > .wp-block-buttons{
    margin-top:auto;
  }
}

/* ---------- 61. Clip Studio on a phone ----------
   The Studio had never been on a published page, so it had never been
   measured. With it on Clips, at 320 the page scrolls sideways by 86px.
   Two separate causes, both measured rather than guessed:

   1. The episode picker is a select, and a select sizes itself to its
   longest option. Episode titles are long, so it came out 363px wide in a
   249px column. That is the whole 86px. It is not a phone problem, a select
   that ignores its container is wrong at any width, so it is not scoped.

   2. The transcript rows are a four column grid: checkbox, timestamp,
   speaker, then the words. Measured at 320 the tracks were 20px, 62px,
   53px and 67px, and the words did not fit in 67px, so each line pushed
   past the row. Four columns is right on a wide screen and wrong on a
   phone. Below 640 the row becomes a wrapping flex line: the checkbox,
   timestamp and speaker stay together on the first line and the words take
   the full width underneath, which is the shape they need to be readable
   enough to choose from. */
.hh-studio-ep{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

@media (max-width:640px){
  .hh-studio-line{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:8px;
    row-gap:4px;
  }

  .hh-studio-line .hh-studio-said{
    flex:1 1 100%;
    min-width:0;
    overflow-wrap:anywhere;
  }
}

/* ---------- 62. The header actions belong to whoever is looking ----------
   The header shipped one cluster to everyone: a signed out visitor saw an
   Alerts button that only led to a members gate, and a signed in member was
   still being asked to Join. WordPress already marks the body, so the split
   is done here rather than in markup the header cannot branch on. */
body:not(.logged-in) .hh-actions .hh-member-only{ display:none !important; }
body.logged-in .hh-actions .hh-guest-only{ display:none !important; }

/* The neon dot was drawn permanently, so it read as an unread badge to every
   visitor on every page, forever. A badge that is always lit tells a member
   less than no badge at all, so it is off until something can back it up.
   The rule below is left in place so that the day the body can carry the
   real unread state, the dot starts working with no further change. */
.wp-block-button.hh-alerts .wp-block-button__link::after{ display:none; }
body.hh-has-alerts .wp-block-button.hh-alerts .wp-block-button__link::after{ display:block; }

/* ---------- 63. The Spaces join line ----------
   The prompt under Now and next is written in a plugin file the host
   firewall will not let this site edit, so it is hidden here instead. It
   only ever showed to people who are not signed in, which is exactly the
   audience being removed, and the members only line in the same position
   is left alone. */
body:not(.logged-in) .hh-spaces > .hh-fineprint{ display:none; }

/* ---------- 64. Every platform in the Listen row reads as a chip ----------
   The five platforms render as links once their URLs are filled and as plain
   spans until then. Only the link carried the box, so the row looked like
   loose text. The span now takes the same chip so the row keeps its shape
   through tonight, and the two states differ only by the hover. */
.hh-listen .hh-soon{ font-size:12px; font-weight:600; letter-spacing:.08em; padding:8px 13px;
  border:1px solid var(--wp--preset--color--char); color:#CFCAC4; display:inline-block; }
/* Shared inner page design, in Headline Hangover colors and fonts. MK-242. */
.ipsec .wrap, .iphero .wrap, .mkcta .wrap{ max-width: 1140px; margin-inline: auto; padding-left: 64px; padding-right: 64px; }
.ipsec{ padding: 46px 0; }
.ipsec.ivory{ background: #F5F1EC; color: #05080E; }
.ipsec.dark{ background: #05080E; color: #F5F1EC; }
.iphead{ text-align: center; margin-bottom: 15px; }
.ipeyebrow{ font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2.16px; text-transform: uppercase; color: #D5DF45; margin: 0; }
.iphead h2{ font-family:"Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; letter-spacing: 0.4px; text-transform: uppercase; margin: 18px 0 0; }
.ipsec.ivory .iphead h2{ color: #05080E; }
.ipsec.dark .iphead h2{ color: #F5F1EC; }
.iphead p{ font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; max-width: 720px; margin: 16px auto 0; }
.ipsec.ivory .iphead p{ color: rgba(5,8,14,0.72); }
.ipsec.dark .iphead p{ color: #C4BFB9; }
.ipprose{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 48px; margin-top: 26px; }
.ipprose p{ font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.62; margin: 0; }
.ipsec.ivory .ipprose p{ color: rgba(5,8,14,0.78); }
.ipsec.dark .ipprose p{ color: #C4BFB9; }
.ipcards{ display: grid; gap: 22px; margin-top: 26px; }
.ipcards.n3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.ipcard{ background: #0A0F17; border: 1px solid rgba(213,223,69,0.30); padding: 32px 20px; text-align: center; }
.ipcard h3{ font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 20px; line-height: 1.32; font-weight: 700; color: #F5F1EC; margin: 0 0 10px; }
.ipcard p{ font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.58; color: #8D8B88; margin: 0; }
.iphero{ position: relative; min-height: 600px; display: flex; align-items: center; background: #05080E; overflow: hidden; }
.iphero .ipphoto{ position: absolute; top: 0; right: 0; bottom: 0; left: 46%; background-size: cover; background-position: 50% 28%; z-index: 1; }
.iphero .wrap{ position: relative; z-index: 2; width: 100%; }
.ipcopy{ max-width: 600px; }
.iphero h1{ font-family:"Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: 0.4px; text-transform: uppercase; color: #F5F1EC; margin: 18px 0 0; }
.iprule{ width: 96px; height: 1px; background: rgba(213,223,69,0.55); margin: 20px 0; }
.iplede{ font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; color: #C4BFB9; max-width: 544px; margin: 0; }
.iphbtns{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.ipbtn{ display: inline-flex; align-items: center; font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.92px; text-transform: uppercase; padding: 15px 30px; background: #D5DF45; color: #05080E; border: 1px solid #D5DF45; text-decoration: none; }
.ipbtn.ghost{ background: transparent; color: #F5F1EC; border-color: rgba(245,241,236,0.45); }
.mkcta{ position: relative; background: #05080E; padding: 76px 0; overflow: hidden; }
.mkcta .mkphoto{ position: absolute; top: 0; right: 0; bottom: 0; left: 42%; background-size: cover; background-position: 50% 50%; z-index: 1; }
.mkcta .wrap{ position: relative; z-index: 2; }
.mkctagrid{ display: grid; grid-template-columns: minmax(0, 968px); text-align: left; }
.mkeyebrow{ display: flex; align-items: center; gap: 14px; font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 2.185px; text-transform: uppercase; color: #D5DF45; margin: 0 0 14px; }
.mkeyebrow::after{ content: ""; flex: 1 1 auto; max-width: 230px; height: 1px; background: rgba(213,223,69,0.45); }
.mkcta h2{ font-family:"Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: 0.4px; text-transform: uppercase; color: #F5F1EC; margin: 0 0 16px; }
.mklede{ font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16.5px; line-height: 1.62; color: #C4BFB9; max-width: 520px; margin: 0 0 26px; }
.mkbtn{ display: inline-flex; align-items: center; gap: 12px; font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16.5px; font-weight: 600; padding: 18px 38px; background: #D5DF45; color: #05080E; text-decoration: none; }
@media (min-width: 981px){
	.iphero .ipphoto, .mkcta .mkphoto{ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 12%, rgba(0,0,0,0.18) 24%, rgba(0,0,0,0.40) 36%, rgba(0,0,0,0.66) 48%, rgba(0,0,0,0.86) 60%, rgba(0,0,0,0.96) 70%, rgba(0,0,0,1) 80%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 12%, rgba(0,0,0,0.18) 24%, rgba(0,0,0,0.40) 36%, rgba(0,0,0,0.66) 48%, rgba(0,0,0,0.86) 60%, rgba(0,0,0,0.96) 70%, rgba(0,0,0,1) 80%); }
}
@media (max-width: 980px){
	.ipsec .wrap, .iphero .wrap, .mkcta .wrap{ padding-left: 22px; padding-right: 22px; }
	.ipcards.n3{ grid-template-columns: 1fr; }
	.ipprose{ grid-template-columns: 1fr; }
	.iphero{ min-height: 0; padding: 48px 0 0; display: block; }
	.iphero .ipphoto{ position: relative; left: 0; height: 320px; margin-top: 32px; }
	.mkcta{ padding: 48px 0; }
	.mkcta .mkphoto{ display: none; }
}
/* Inner page bands run edge to edge inside the constrained post content. */
.entry-content:has(.iphero){ max-width: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.entry-content .iphero, .entry-content .ipsec, .entry-content .mkcta{ width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.iphero, .ipsec, .mkcta, .iphero *, .ipsec *, .mkcta *{ box-sizing: border-box; }
.iphero .wrap, .ipsec .wrap, .mkcta .wrap{ box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; }
main:has(.iphero.abouthero){ padding-left: 0 !important; padding-right: 0 !important; }


/* ==== About page bands, matched to the EBMG design system ==== */

/* Six value culture grid. */
.ipdiv{ display: grid; gap: 0; }
.ipdiv.d3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ipdiv > div{ padding: 4px 0 4px 26px; border-left: 1px solid rgba(212, 175, 110, 0.34); }
.ipdiv > div b{ display: block; font-size: 20px; font-weight: 700; line-height: 26.4px; letter-spacing: -0.08px; color: #12171A; }
.ipdiv > div small{ display: block; font-size: 17px; font-weight: 400; line-height: 26.86px; color: rgba(18, 23, 26, 0.72); }

/* Gold ring that holds each value icon. */
.ipring{ width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(184, 151, 90, 0.55); display: flex; align-items: center; justify-content: center; color: #12171A; margin-bottom: 13px; }
.lpicon{ width: 32px; height: 32px; }

/* Impact card badge and gold label. */
.ipbadge{ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #B8975A; margin-bottom: 14px; }
.ipcardeye{ font-size: 12px; font-weight: 700; letter-spacing: 2.16px; text-transform: uppercase; color: #D4AF6E; }
.ipdark .ipcard{ background: #0D0F10; padding: 32px 20px; border: 1px solid rgba(212, 175, 110, 0.34); }
.ipdark .ipcard h3{ font-size: 20px; font-weight: 700; line-height: 26.4px; color: #F5F0E8; }

/* Six values in two rows of three, the same rule the other three sites carry. */
@media (min-width: 981px){
	#sec-about-culture .ipdiv.d3 > div:nth-child(3n+1){ border-left: 0; }
	#sec-about-culture .ipdiv.d3 > div:nth-child(n+4){ border-top: 1px solid rgba(212, 175, 110, 0.34); margin-top: 26px; padding-top: 26px; }
}
@media (max-width: 980px){
	#sec-about-culture .ipdiv.d3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#sec-about-culture .ipdiv.d3 > div{ border-left: 0; border-top: 1px solid rgba(212, 175, 110, 0.34); margin-top: 0; padding-block: clamp(16px, 2.4vw, 22px); }
	#sec-about-culture .ipdiv.d3 > div:nth-child(-n+2){ border-top: 0; }
}
@media (max-width: 560px){
	#sec-about-culture .ipdiv.d3{ grid-template-columns: minmax(0, 1fr); }
	#sec-about-culture .ipdiv.d3 > div:nth-child(2){ border-top: 1px solid rgba(212, 175, 110, 0.34); }
	#sec-about-culture .ipdiv.d3 > div:first-child{ border-top: 0; }
}