/*
Theme Name:  MMD Ransom Theme 2026
Theme URI:   https://murdermysteryco.com
Template:    mmd-parent-2026
Author:      American Immersion Theater
Description: Full front-end reskin of MMD Parent Theme 2026 — white page shell with black panels, Nunito Sans throughout, cut-out "ransom note" emphasis words, brush-stroke red banners and full-bleed flat colour panels with cast cut-outs. Every section, field, form and schema output is the parent's, unchanged; only the paint changes. Includes the hero-video homepage, so it is a drop-in alternative to mmd-child-2026 rather than an addition to it.
Version:     1.0.0
License:     Proprietary
Text Domain: mmd-ransom
*/

/* =============================================================================
   MMD Ransom 2026 — the reskin
   =============================================================================
   SCOPE. This theme changes how the 2026 homepage LOOKS and nothing about how it
   works. It registers no new content fields, changes no shortcode markup, and
   touches no form, schema or Location Settings code. Every headline, paragraph
   and image slot is still the parent's, still edited in the same admin boxes.
   The section inventory and order are the parent's list, with the hero video
   prepended (see functions.php) exactly as mmd-child-2026 does it.

   WHAT IT IS NOT. This is NOT an add-on to mmd-child-2026. WordPress has no
   grandchild themes, so a site can run one child or the other — and activating
   this one instead would have dropped the hero-video homepage that child
   supplies. That wiring is therefore duplicated in this theme's functions.php.
   The two must stay in step; that file says so at the call site.

   HOW THE OVERRIDES WIN. functions.php enqueues this file with 'mmd-main' as a
   dependency at priority 20, so it loads after the parent stylesheet. Nearly
   every selector below is copied at the SAME specificity as the parent rule it
   replaces and wins on source order — no !important. Two things to know about
   that:

     1. Media queries add no specificity. Because this whole file loads after
        main.css, an unqualified rule here beats a parent rule that lives inside
        `@media (min-width: 769px)`. Where the parent's desktop value should
        survive, the override is repeated inside a matching media query rather
        than left to chance.

     2. The hero-video package prints its <style> in the BODY, after this file
        loads from the head, so it beats equal specificity. The parent solves
        that with a `body` prefix; anything here that touches the video stage
        must do the same. Nothing here does today.

   TYPE. The design uses two faces, and only one of them is new:

     Nunito Sans — EVERYTHING. Headings, body copy, the tagline, the pill labels
                   and the one slanted line. ADDED by this theme, and it is the
                   brand face the designer named, not a read off the comps.
                   Requested as a variable font at 200–1000, upright and italic.
     Playfair /
     Permanent
     Marker      — the PARENT'S faces, mixed into the ransom tiles so the letters
                   read as cut from different magazines rather than one font
                   rotated. Permanent Marker is also the hand on the sign-offs
                   and the doodles.

   THREE STAND-INS CAME OUT WHEN NUNITO SANS WENT IN, and what they were doing
   is worth recording because the sizes they left behind are still all over this
   file. Oswald set the headings, the parent's Quicksand set the body, and Barlow
   was pulled in for a single slanted line because Quicksand ships no italic at
   all. Nunito Sans covers all three slots, italic included.

   NONE OF THEM WAS AS WIDE AS WHAT REPLACED THEM. Oswald in particular is
   condensed and Nunito Sans has no condensed cut, so every heading, button and
   pill that was fitted to a narrow face now sets wider at the same point size.
   Anything tuned to hold a specific string on one line is the thing to re-check
   after a face change — measure it in the browser rather than trusting a comment.
   The three homepage pills and the Private Events hero pill all needed re-fitting
   on this change; .mmd-shows-reserve__heading was re-measured and held.

   An earlier build read the comp's short line lengths as a narrow TYPEFACE when
   they are actually a narrow MEASURE, and put the body copy on a condensed
   grotesque to match. If a block looks too narrow, reach for max-width before
   reaching for a face.

   Nunito Sans is enqueued by functions.php, NOT added to the parent's header.php
   font link. See the note there for why, and what it costs.

   COLOUR. New tokens are namespaced --mmd-rn-* so they can never collide with a
   parent token. --mmd-accent IS reassigned, deliberately: it is the token a city
   re-points from Location Settings → Primary Accent Color, which main.js applies
   as an inline style on <html>. Inline beats :root, so a city that has set an
   accent keeps it and a city that has not gets this design's red. That is the
   behaviour you want; don't "fix" it by hardcoding the reds on the buttons.
   ============================================================================= */


/* -- Tokens -------------------------------------------------------------------
   Reassignments first (parent names, new values), then this theme's own.
   -------------------------------------------------------------------------- */
:root {
    /* Type. Reassigning the parent's two family tokens re-faces every rule in
       main.css at once — roughly 200 of them — which is why the section
       overrides below only have to deal with size, weight and case.

       NUNITO SANS IS THE BRAND FACE, both slots. It arrived from the designer
       and replaces two stand-ins that were read off the comps rather than
       named: Oswald for the headings and the parent's Quicksand for the body.

       THE HEADINGS ARE NO LONGER CONDENSED, and that is the one real
       consequence rather than a detail. Nunito Sans has no condensed cut, so
       every heading that was fitted to Oswald's narrow width now sets wider at
       the same point size — the hero, the section headings, the buttons and
       pills. Everything that had been tuned to hold a string on one line was
       re-measured at 360px and 1280px on the change; the four that lost are
       .mmd-home-story__btn, .mmd-home-sharktank__btn, .mmd-rn-dusk__btn and
       .mmd-rn-hero-cta__btn, each of which carries the new arithmetic.

       Weight carries what width used to. The variable request in functions.php
       covers 200–1000, so a heading that read as heavy because it was condensed
       can read as heavy because it is heavy. */
    --mmd-font-display:   'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --mmd-font-sans:      'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* The parent aliases these two to the pair above, so they follow without
       being named: --mmd-font-body, --mmd-font-heading, --mmd-font-condensed.
       --mmd-font-marker is NOT reassigned — Permanent Marker is the hand on the
       sign-offs and the doodles, and it is the parent's own. */

    /* The CTA red. See the note above on why this is --mmd-accent and not a
       fixed token: it must stay re-pointable per city. */
    --mmd-accent:         #A71818;

    /* THE OLD DESIGN'S CREAM IS RETIRED. These four are the parent's paper
       palette, and reassigning them here retires it everywhere at once — the
       same move --mmd-font-display makes for type, and for the same reason:
       roughly a hundred rules in main.css resolve through these tokens and
       overriding them one selector at a time would be a hundred chances to
       miss one. Measured before doing it, the cream was still showing on every
       page as the header and drawer nav pills (both the label and the 2px
       ring), the copy inside the Off-Broadway red panel and the rule down its
       left edge, the whole dinner menu, and the Plan My Party pill.

       --mmd-cream-400 becomes the HAIRLINE, not white. It is the parent's
       border tone, and white would not retire it — it would delete it, taking
       the edge off every card that has no border of its own here.

       --mmd-paper and --mmd-light-gray and --mmd-border are the parent's own
       aliases for three of these, so they follow without being named.

       ONE THING THIS COSTS, and it is worth knowing: the FAQ's hover and open
       states were a cream tint against a paper-white row, and both ends of
       that are white now. The accordion gets its own tint below so the open
       row still reads as open. */
    --mmd-cream:          var(--mmd-rn-white);
    --mmd-cream-200:      var(--mmd-rn-white);
    --mmd-cream-400:      var(--mmd-rn-hairline);
    --mmd-paper-white:    var(--mmd-rn-white);

    /* This theme's own palette. Read off the mobile comps by eye, not sampled —
       expect to nudge them once exact values are confirmed. */
    --mmd-rn-black:       #0B0B0B;  /* page shell */
    --mmd-rn-ink:         #111111;  /* text on light panels */
    /* THE BRAND PALETTE, supplied by the designer. These five are exact values,
       not samples off a screenshot — every earlier number in this block was
       eyeballed from the comps and has been replaced. Do not nudge them to
       "look right" against a JPEG; if one reads wrong on screen, that is a
       question for the designer, not a tweak here. */
    --mmd-rn-red:         #A71818;  /* brush banners, panel 1 */
    --mmd-rn-purple:      #4F2161;  /* panel 2 */
    --mmd-rn-green:       #254F27;  /* panel 3 */
    --mmd-rn-navy:        #1B4074;  /* panel 4, notebook heading card */
    --mmd-rn-gold:        #FDC50E;  /* ransom chips, rules, the "Dying" word,
                                       the hero pill and the bottom-bar pills */
    --mmd-rn-white:       #FFFFFF;

    /* The paper. SAMPLED from cream-tear.webp, the parent's torn-sheet asset,
       not chosen — a flat fill has to sit beside that image without a seam.
       Averaged across six rows of the sheet, which run #F3EAD9 to #F4EBDA with
       every red channel between 241 and 246, so the difference is below what
       an edge can show. It is NOT --mmd-cream (#E9E2D0): that token is a whole
       step darker and reads as a band against the photograph of paper. */
    --mmd-rn-paper:       #F4EBDA;

    /* The parent's torn sheet, held in a token because four rules on Public
       Shows draw slices of it and a path repeated four times is a path that
       gets fixed three times. Reaching into the parent theme's folder is a
       hard dependency on its directory name, which this theme already has in
       the Template: line of its header.

       MEASURED, because every rule that uses it is written in percentages of
       these numbers. 2100 x 1280, alpha by row:

           0 - 101      transparent
           102 - 193    the top tear
           194 - 949    solid paper  (#F5EDDA)
           950 - 1175   the bottom tear
           1176 - 1279  transparent

       Drawn at `100% auto` the height is 0.61 x the width, so each landmark is
       a fixed share of the WIDTH: the top tear ends at 9.24%, the bottom tear
       begins 15.71% up from the foot and has faded out by 4.95%. Replace the
       asset and those four numbers have to be re-measured with it. */
    --mmd-rn-sheet:       url( '../mmd-parent-2026/assets/images/private_events_page_assets/CREAMPAPERTEAR.png' );

    /* The ransom chips used to carry three tokens of their own, on the reasoning
       that chip colours were sampled from lettering while panel colours were
       sampled from section comps, so the two should not be tied together. That
       held while both were guesses. Now there is one authored palette, and the
       chips are simply drawn from it — a separate set would only be a second
       place to forget to update. The aliases below keep the cycle readable. */
    --mmd-rn-chip-green:  var(--mmd-rn-green);
    --mmd-rn-chip-indigo: var(--mmd-rn-navy);
    --mmd-rn-chip-red:    var(--mmd-rn-red);

    /* Holding colour for the dusk field. MEASURED FROM THE PHOTOGRAPH, not
       chosen — which is why it is this odd muted mauve rather than a round
       number.

       The cast group shot (murder-5382-xx.webp) is a tall frame whose upper
       ~45% is empty studio backdrop, and in the comp the pill and the tagline
       sit on that backdrop.

       ONE token, where there were three. The three existed to fake the
       photograph with a CSS gradient stacked above it; the photograph IS the
       background now, so all that is still wanted is a holding colour — for the
       moment before it paints (it carries the parent's loading="lazy"), and for
       a city that has cleared its About image, where this is the only thing
       behind the tagline.

       The value is sampled across the photo's VISIBLE top row, which the crop
       maths puts 15% down the source file — see .mmd-home-about__image, a 5/8
       frame showing the full height, lifted by 24% of the width. That row
       averages #513D4D, so the holding colour and the photograph agree and the
       swap when the image lands is invisible.

       IF THE ABOUT PHOTO OR ITS CROP CHANGES, RESAMPLE. This number matches one
       specific file at one specific frame and means nothing otherwise. */
    --mmd-rn-dusk:        #513D4D;   /* sampled at the photo's visible top row  */

    /* The one slanted line in the design — "Straight from Off-Broadway."
       This used to be Barlow, carried purely because the body face was
       Quicksand and Quicksand ships no italic at all. Nunito Sans does, at
       every weight, so the third family is gone and the token now points at the
       brand face. Kept AS a token rather than inlined: the line is set apart in
       the design and having one name for it means it can be moved again in one
       place. */
    --mmd-rn-font-slant:  var(--mmd-font-sans);

    /* How far the brush edge of Red_paint.png reaches into the banner. Content
       padding has to clear this or the first line sits in the ragged edge. */
    --mmd-rn-tear:        14px;
}


/* -- Page shell ---------------------------------------------------------------
   The parent's page is cream. This theme's is white by DEFAULT and black only
   where a comp asks for it.

   That way round on purpose. The pages drawn on black are a closed set — the
   four below, plus Public Shows which was always white — while the pages with
   no comp are open-ended: FAQ, Themes, Team Building, Blog, 404, and whatever
   legal or "Other" page a city adds next year. Defaulting to black meant every
   one of those arrived as white type on a black field nobody had designed, and
   each new one would arrive the same way. Defaulting to white means an
   undrawn page lands somewhere sane and the four that are drawn opt in.

   Scoped by body class rather than by template file: `home` is WordPress's own
   front-page class (the Blog page gets `blog`, not `home`, so the two do not
   collide), and the other three are the page-template classes WordPress emits.
   -------------------------------------------------------------------------- */
body {
    background: var(--mmd-rn-white);
    /* The parent paints bg-body.jpg on the body on some templates. `none` is
       explicit so a paper texture can't show through. */
    background-image: none;
}
.mmd-main {
    background: var(--mmd-rn-white);
    color: var(--mmd-rn-ink);
}

/* LINKS STAY UNDERLINE-FREE EVEN WHEN THEME.JSON GETS THE LAST WORD.
   WordPress emits `a:where(:not(.wp-element-button)) { text-decoration:
   underline }` in its global-styles block. `:where()` contributes nothing, so
   that rule is (0,0,1) — exactly the weight of the parent's own
   `a { text-decoration: none }` — and which one wins comes down to source
   order.

   On almost every template core prints global-styles in the head, before both
   stylesheets, and the parent's reset wins. The theme-detail page is the
   exception: its body is block content, so core does not enqueue global-styles
   until those blocks render and the whole block lands in the FOOTER. Every
   link on that page came out underlined — the nav pills, the breadcrumb, the
   phone number, the bottom bar, the related-theme cards.

   One class-equivalent higher, so order stops deciding it. Nothing that is
   MEANT to be underlined is affected: the parent draws those with a class in
   front of the `a` (.mmd-recaptcha-legal, .mmd-fine-print__links,
   .mmd-thanks-copy__cta) and `a:hover` carries a pseudo-class, so all of them
   outrank this. */
body a:where( :not( .wp-element-button ) ) { text-decoration: none; }

/* EVERY BUTTON GETS THE DISPLAY FACE. The parent sets .mmd-btn in
   --mmd-font-sans, and this theme had been re-facing buttons one component at
   a time — the hero's ticket button, the reserve button, the bottom bar — so
   anything it had not reached individually was still the parent's Quicksand
   next to the design's Oswald. The theme detail page showed all three of its
   CTAs that way, and so do the Themes archive's.

   IT DRAWS NOTHING TODAY: both family tokens are Nunito Sans, so display and
   sans are the same face. Kept because that is a coincidence of the current
   brand, not a property of the theme — the moment the two tokens differ again
   this is what stops the buttons splitting across two faces.

   Placed HERE, before the component sections, deliberately: a button that names
   its own face further down the file still wins on source order. Two do, and
   both are the comp's own call rather than an oversight — the lead form's
   submit and the popup's are set in the sans, because the comp draws them that
   way. Add a new exception below this line, never above it. */
.mmd-btn { font-family: var(--mmd-font-display); }

/* The pages that ARE drawn on black. (0,2,0) for the .mmd-main pair, which
   clears the (0,1,0) default above; the body pair is (0,2,0) for the same
   reason. Add a page here the day it gets a dark comp — and nowhere else, or
   the default stops meaning anything. */
/* THE HOMEPAGE AND PRIVATE EVENTS BOTH CAME OFF THIS LIST, and only the two
   confirmation screens are left on it.

   Both read as white pages like the rest of the site. Every dark thing on them
   — the dusk field, the occasions panel, the venue fact cards, the hero band
   itself — carries its own black, so the shell was only ever showing BETWEEN
   them. On a phone those gaps are small and the page reads as one dark field
   with cards laid on it; at desktop they are wide bands of black separating
   sheets of white, and every torn or brushed edge had to be patched to stop the
   shell showing through it. White removes the class of problem rather than each
   instance.

   WHAT THAT COSTS, and what to check if a dark section on either page ever
   looks wrong: `color: var(--mmd-rn-white)` came off with the background. Any
   copy that sat on a black section and took its colour by INHERITANCE was
   getting it from .mmd-main, and now inherits ink instead. Every such block has
   been given its own colour where it needed one — see the dusk field. A new
   dark section must set its own, not assume the page's. */
body.page-template-page-thanks,
body.page-template-page-got-it { background: var(--mmd-rn-black); }

.page-template-page-thanks .mmd-main,
.page-template-page-got-it .mmd-main {
    background: var(--mmd-rn-black);
    color: var(--mmd-rn-white);
}


/* =============================================================================
   RANSOM-NOTE TILES
   =============================================================================
   The signature move: an emphasised word rendered as individual letters, each on
   its own coloured chip, rotated slightly and set in a different face.

   The markup is built at runtime by assets/js/ransom.js, which splits the text
   inside three EXISTING emphasis hooks the parent already writes — the <em> in
   the hero H1, the first <em> in the notebook heading, and .mmd-word-accent in
   the Off-Broadway line. No template was forked and no content field changed:
   an editor still types "Experts" into the same box.

   ACCESSIBILITY. Splitting a word into per-letter elements makes some screen
   readers spell it out. The script therefore hides the tiles from the
   accessibility tree and leaves the intact word beside them in .mmd-rn-sr, so
   the heading is still announced as words. Keep both halves if you touch this.

   The rotations cycle through a fixed 6-step pattern rather than being
   randomised. Deterministic on purpose: a random tilt would change on every
   page load and, worse, would differ between the server-rendered and
   client-rendered states of a cached page.
   -------------------------------------------------------------------------- */

/* Visually hidden, still announced. */
.mmd-rn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

.mmd-rn {
    /* inline-flex, not inline: the chips need to be flex items so the small
       gap between them is a real gap rather than a collapsible text space that
       disappears at some font sizes. wrap lets a long word break across lines
       instead of forcing the heading to overflow. */
    display: inline-flex;
    /* STILL wrap, but it should almost never fire now. ransom.js measures each
       tiled word against the line it has and shrinks it (see --rn-fit below)
       rather than letting a long one break across two rows of chips, which read
       as two separate words. Wrap is kept as the floor case: a word too long to
       fit even at the smallest fit factor breaks instead of overflowing. */
    flex-wrap: wrap;
    /* flex-end, NOT baseline — this is a correctness fix, not a preference.
       A tile holding art and a tile holding a text character expose different
       baselines: the art tile's is the bottom of its block-level <svg>, the text
       tile's is the font baseline, which sits above the descender. Aligning on
       baseline therefore steps the two kinds of tile against each other — and
       the two kinds ARE mixed in production, because the alphabet has no X and
       "EXPERTS" is the headline. Bottom-aligning treats both the same.

       vertical-align follows for the same reason: an inline-flex box takes its
       own baseline from its first item, so leaving it on `baseline` would make
       the whole word's position depend on whether its first letter happened to
       have art. */
    align-items: flex-end;
    /* 1px, not 2. The tiles carry their own padding, so the gap compounds with
       it — at 2px plus 0.14em padding the hero's "EXPERTS" grew wide enough to
       take a line of its own and pushed the heading to three lines where the
       comp holds two. */
    gap: 1px;
    /* Larger than the surrounding heading, as drawn — the cut letters are pasted
       ON the line, not set in it. The chip art includes its own torn margin, so
       the visible LETTER inside ends up close to the heading's cap height while
       the chip stands proud of it, which is the relationship the comp shows.

       --rn-fit IS THE SHRINK-TO-FIT FACTOR, 1 unless ransom.js has measured this
       word and found it wider than its line. It is written on this element as an
       inline custom property, which is why the fallback matters: with no JS, a
       failed measure, or a word that already fits, this resolves to 1 and the
       size is exactly the 1.15em it has always been.

       A custom property rather than an inline font-size on purpose — the 1.15em
       relationship to the heading stays declared HERE, in the one place that
       explains it, and the script only ever supplies a multiplier. */
    font-size: calc( 1.15em * var( --rn-fit, 1 ) );
    font-style: normal;   /* the hook is an <em>; the tiles set their own slant */
    vertical-align: text-bottom;
}
/* Word spaces inside a tiled phrase. A flex item with a width rather than a
   chip: a chip drawn round a space is a floating coloured rectangle. */
.mmd-rn__gap { flex: 0 0 0.28em; }

/* One tile. Two states share this box:

     FALLBACK (default) — a coloured chip with a text character on it. This is
     what paints first, and what stays if the letter has no art. It is not a
     placeholder to be tolerated: the alphabet has no X, and X is in the
     homepage headline, so this state is on screen in production.

     ART (.mmd-rn__ch--art) — the designer's SVG, added by ransom.js. The
     artwork draws its own torn chip, so the CSS chip and padding get out of
     the way; only the colours and the tilt still come from here. */
.mmd-rn__ch {
    display: inline-block;
    padding: 0.04em 0.09em;
    line-height: 1;
    background: var(--rn-chip);
    color: var(--rn-ink);
    font-family: var(--mmd-font-display);
    font-weight: 700;
}
.mmd-rn__ch--art {
    background: none;
    padding: 0;
}
.mmd-rn__ch--art svg {
    display: block;
    /* Height-driven so every letter sits on one baseline whatever its own
       viewBox aspect is — the alphabet's widths vary a lot (I is 3x narrower
       than W) but the cap heights are drawn to match. */
    height: 1em;
    width: auto;
}
/* The two tones inside the artwork. ransom.js re-tags every shape in the file
   as one or the other and strips the export's own <style>, so these two rules
   are the only thing colouring the letters — see the note in that file about
   why the .cls-N names could not be left in place. */
.mmd-rn__chip { fill: var(--rn-chip); }
.mmd-rn__ink  { fill: var(--rn-ink);  }

/* The colour cycle, read off the comps.
   Six steps, because the design's three tiled words are 7, 4 and 7 letters —
   a shorter cycle repeats visibly inside a single word.

   The tilts are fixed rather than randomised. Deterministic on purpose: a
   random tilt changes on every load, and would differ between the cached HTML
   and the re-rendered state. */
.mmd-rn__ch:nth-child(6n+1) { --rn-chip: var(--mmd-rn-chip-green);  --rn-ink: var(--mmd-rn-white); transform: rotate( -4deg ); }
.mmd-rn__ch:nth-child(6n+2) { --rn-chip: var(--mmd-rn-white);       --rn-ink: var(--mmd-rn-ink);   transform: rotate(  3deg ); }
.mmd-rn__ch:nth-child(6n+3) { --rn-chip: var(--mmd-rn-gold);        --rn-ink: var(--mmd-rn-ink);   transform: rotate( -2deg ); }
.mmd-rn__ch:nth-child(6n+4) { --rn-chip: var(--mmd-rn-chip-indigo); --rn-ink: var(--mmd-rn-white); transform: rotate(  4deg ); }
.mmd-rn__ch:nth-child(6n+5) { --rn-chip: var(--mmd-rn-chip-red);    --rn-ink: var(--mmd-rn-white); transform: rotate( -3deg ); }
.mmd-rn__ch:nth-child(6n+6) { --rn-chip: var(--mmd-rn-white);       --rn-ink: var(--mmd-rn-purple);transform: rotate(  2deg ); }

/* Variant b starts the same cycle four steps in, so the Off-Broadway city name
   opens on red the way the comp draws it instead of repeating the hero's green.
   Only the first four positions need restating; from the fifth the offset
   cycle and the base cycle coincide again. */
.mmd-rn--b .mmd-rn__ch:nth-child(6n+1) { --rn-chip: var(--mmd-rn-chip-red);    --rn-ink: var(--mmd-rn-white);  transform: rotate( -3deg ); }
.mmd-rn--b .mmd-rn__ch:nth-child(6n+2) { --rn-chip: var(--mmd-rn-white);       --rn-ink: var(--mmd-rn-purple); transform: rotate(  2deg ); }
.mmd-rn--b .mmd-rn__ch:nth-child(6n+3) { --rn-chip: var(--mmd-rn-chip-indigo); --rn-ink: var(--mmd-rn-white);  transform: rotate( -4deg ); }
.mmd-rn--b .mmd-rn__ch:nth-child(6n+4) { --rn-chip: var(--mmd-rn-chip-green);  --rn-ink: var(--mmd-rn-white);  transform: rotate(  3deg ); }

/* -- Chips that would land on their own colour -------------------------------
   The cycle above is six chips drawn from the same palette the SECTIONS are
   painted with, so some words sit on their own colour: a red chip on the red
   hero band, a navy chip on the navy heading card, a white chip on a white
   page. The chip vanishes and that letter reads as plain type in the middle of
   a torn-out word — which is the one thing the device cannot afford.

   CSS cannot ask what is behind an element, so ransom.js declares it: each
   entry in its TARGETS table carries a `surface`, and the wrapper gets
   .mmd-rn--on-{surface}. Only the colliding position is remapped — the rest of
   the cycle, and the tilts, are untouched, so the words still read as one set.

   The replacements are chosen to stay clear of their neighbours in the cycle as
   well as of the surface:

     on red     the red chip becomes purple  (slot 5 in a, slot 1 in b)
     on navy    the navy chip becomes red    (slot 4 in a, slot 3 in b)
     on white
     and paper  the two white chips become black and purple (slots 2 and 6,
                the same positions in both variants)

   Black surfaces need nothing — no chip in the cycle is black, and the black
   introduced below is scoped to the light surfaces.

   Specificity: the white pair is (0,3,0), the same weight as the .mmd-rn--b
   rules above, so it has to stay BELOW them. The other two are (0,3,0) and
   (0,4,0) against base rules of (0,2,0). */
.mmd-rn--on-red  .mmd-rn__ch:nth-child(6n+5),
.mmd-rn--on-red.mmd-rn--b  .mmd-rn__ch:nth-child(6n+1) { --rn-chip: var(--mmd-rn-purple);    --rn-ink: var(--mmd-rn-white); }
.mmd-rn--on-navy .mmd-rn__ch:nth-child(6n+4),
.mmd-rn--on-navy.mmd-rn--b .mmd-rn__ch:nth-child(6n+3) { --rn-chip: var(--mmd-rn-chip-red);  --rn-ink: var(--mmd-rn-white); }
.mmd-rn--on-white .mmd-rn__ch:nth-child(6n+2),
.mmd-rn--on-paper .mmd-rn__ch:nth-child(6n+2) { --rn-chip: var(--mmd-rn-black);  --rn-ink: var(--mmd-rn-white); }
.mmd-rn--on-white .mmd-rn__ch:nth-child(6n+6),
.mmd-rn--on-paper .mmd-rn__ch:nth-child(6n+6) { --rn-chip: var(--mmd-rn-purple); --rn-ink: var(--mmd-rn-white); }


/* =============================================================================
   BRUSH BANNER
   =============================================================================
   The red bands behind the hero heading and the Off-Broadway close.

   THIS REPLACED A clip-path POLYGON, and the reason is worth keeping. The first
   build drew the edge as a many-point polygon, on the theory that a raster edge
   would smear when the band grew with its (editable) copy. It rendered as a
   regular sawtooth — a zigzag, not a tear — which is exactly the failure the
   comment predicted and failed to avoid. Irregular x-positions are not enough;
   a real brush edge varies in opacity and stroke weight too, and a hard-edged
   polygon has neither.

   Red_paint.png is the designer's actual stroke, so it has all three.

   `100% 100%` (stretch to fit) rather than `cover`: the band must show BOTH
   brush edges, and cover would crop one of them off the moment the band's
   aspect drifted from the image's. The distortion that buys is small and
   directional — the art is 393x169 (2.3:1) and the hero band lands near 2.8:1
   on a phone, so the stroke stretches ~20% horizontally, along its own
   direction, where it reads as a longer sweep rather than a deformed one. A
   band that got very TALL would thicken the edges noticeably; the headings here
   are two or three lines, so it does not arise.

   background-color stays transparent on purpose. The art is opaque through the
   middle, and a red fill behind it would show through the deliberately ragged,
   semi-transparent bristle marks and square the edge back off.
   -------------------------------------------------------------------------- */
:root {
    /* 1568 x 672, and that is the second version of this file. The first was
       392 x 168 — a 5KB crop the designer exported at phone size — and at a
       1168px banner it was being blown up 3x, which is what made the paint
       read as blurry on desktop while looking fine on a phone.

       It is the SAME artwork, not a substitute: submission/red paint.svg is the
       designer's vector of this stroke, and the small file was a crop of its
       middle. Re-rasterising that vector at 2560 and taking the same centred
       crop (the stroke's own ends are ragged; the hero wants a band that runs
       off both sides of the screen) gives the identical edge at 4x the
       detail, for 11KB. If it ever needs to go bigger, the vector is the
       source — do not upscale this file. */
    --mmd-rn-brush: url( 'assets/image/bright-redesign/Home/Red_paint.webp' ) center / 100% 100% no-repeat;
}


/* =============================================================================
   HEADER
   =============================================================================
   Black bar; wordmark left, phone chip centre, hamburger right. The parent's DOM
   order is hamburger → phone → wordmark, and it stays that way — `order` moves
   the boxes visually while tab and screen-reader order follow the source, which
   is the reason not to fork header.php for this.
   ============================================================================= */
.mmd-site-top { background: var(--mmd-rn-black); }
.mmd-header    { background: var(--mmd-rn-black); }

.mmd-header__wordmark   { order: 1; }
.mmd-header__phone      { order: 2; }
.mmd-nav__hamburger     { order: 3; }

/* -- Desktop: logo, phone, then the menu -------------------------------------- */
/* From 1024px the parent dissolves .mmd-header, .mmd-header__bar, .mmd-nav-wrap,
   .mmd-nav and .mmd-nav__list with display:contents, so the wordmark, the phone
   chip and every nav <li> become siblings in one flex row on .mmd-site-top. It
   then puts the logo first with `order: -1` on the wordmark.

   THE THREE RULES ABOVE WERE SILENTLY BREAKING THAT. They carry no media query,
   so `.mmd-header__wordmark { order: 1 }` also applied at desktop — and because
   this file loads after main.css and a media query adds no specificity, it beat
   the parent's `order: -1` from inside its own breakpoint. The nav items keep
   the initial `order: 0`, so they sorted ahead of both, and the bar came out as
   menu → logo → phone.

   Restating all three inside the breakpoint fixes it and, more importantly, says
   what the desktop order IS rather than leaving it to fall out of a mobile rule.
   The nav items need naming too: they are only flex children at all because of
   the display:contents above, so nothing else in the file would ever have
   ordered them. */
@media ( min-width: 1024px ) {
    .mmd-header__wordmark { order: 1; }
    .mmd-header__phone    { order: 2; }
    .mmd-nav__item        { order: 3; }
}

/* Hamburger loses the cream chip: in this design it is three bare white rules.
   Both rules are needed — the button's background and the bars' colour are set
   separately in the parent, and dropping the chip without lightening the bars
   leaves near-black bars on black. Padding is kept so the tap target stays the
   full 44px; only the paint goes. */
.mmd-nav__hamburger      { background: transparent; }
.mmd-nav__hamburger span { background: var(--mmd-rn-white); width: 26px; }

/* Phone chip inverts cream-pill/dark-glyph to red-pill/white-glyph. The number
   sets its own colour in the parent and needs its own override, and :hover is
   listed because the parent pins the hover colour back to --mmd-ox-800 — without
   it the number turns near-black on red the moment the pill is touched. */
/* White outline round the chip. The border sits inside the existing padding —
   box-sizing is border-box globally — so it does not change the pill's size or
   push the wordmark and hamburger around it. */
.mmd-header__phone        { background: var(--mmd-rn-red); color: var(--mmd-rn-white); border: 2px solid var(--mmd-rn-white); }
.mmd-header__phone:hover  { color: var(--mmd-rn-white); }
.mmd-header__phone-number {
    color: var(--mmd-rn-white);
    font-family: var(--mmd-font-display);
    font-weight: 500;
    font-size: var(--mmd-text-base);
    letter-spacing: 0.01em;
}
/* The glyph sits directly on the pill here rather than in its own circle, so the
   circle goes transparent instead of being given a new colour. */
.mmd-header__phone-icon {
    background: transparent;
    color: var(--mmd-rn-white);
    width: 22px;
    height: 22px;
}
.mmd-header__phone-icon svg { width: 19px; height: 19px; }

/* The drawer opens on the same black as the bar, so it needs its own edge — on
   the parent's oxblood-on-cream that separation came free. */
.mmd-nav__list { background: var(--mmd-rn-black); }
.mmd-nav__item { border-bottom-color: rgba( 255, 255, 255, 0.16 ); }
.mmd-nav__item > a {
    font-family: var(--mmd-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =============================================================================
   BOTTOM BAR
   =============================================================================
   The 2026 theme has no traditional footer — .mmd-bottom-bar is the persistent
   bottom chrome (see the parent's footer.php). Black shell, outlined pills.
   ============================================================================= */
.mmd-bottom-bar { background: var(--mmd-rn-black); }

/* Solid gold with deep-red type. Gold rather than --mmd-accent for the same
   reason as the hero pill: on the black bar a red fill has almost no separation
   from the shell, and the comp uses the gold to carry the bar.

   The type colour IS --mmd-accent, though — unlike the hero pill, this one is
   type on gold rather than a gold surface making the statement, so a city's own
   accent can safely ride here. */
/* Same treatment as the homepage pills — bigger label, tighter padding.

   CAUTION HERE that does not apply to the others: these two live in a fixed bar
   whose height is a token (--mmd-bottom-bar-h) that other things are measured
   against, and the parent scrolls the pill row horizontally rather than letting
   the pills shrink. So type that grows too far does not wrap or clip, it starts
   the row scrolling on narrow phones. --mmd-text-base with space-1 block padding
   is comfortably inside the bar's height. */
.mmd-bottom-bar__btn {
    background: var(--mmd-rn-gold);
    color: var(--mmd-accent);
    font-family: var(--mmd-font-display);
    font-size: var(--mmd-text-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: var(--mmd-space-1) var(--mmd-space-3);
    /* 44% of the pill group rather than the parent's 30%. Measured off the comp,
       where each pill is about 156px of a 375px bar; 30% of the 359px group gave
       108px and the two read as utility links floating in a wide black band.

       flex-BASIS, not width, so the parent's overflow behaviour survives intact:
       shrink stays at 1 but flex items have min-width:auto and the label is
       nowrap, so a long label still floors the pill and pushes the row into its
       horizontal scroll instead of squashing. The auto margin the parent puts on
       the second pill still spaces them apart, and still collapses to 0 when the
       row overflows. */
    flex-basis: 44%;
}
.mmd-bottom-bar__btn:hover {
    background: var(--mmd-rn-white);
    color: var(--mmd-accent);
}

/* SPECIFICITY EXCEPTION, inherited from the crimson theme's reasoning: scoped
   under .mmd-bottom-bar (0,2,0) where the parent rule is a bare .mmd-social
   (0,1,0). The parent's own comment calls .mmd-social generic and reusable on
   any surface, so recolouring it globally would reach outside this section the
   moment the mark is used elsewhere. The extra class is the scope, not a
   specificity fight. */
.mmd-bottom-bar .mmd-social        { background: var(--mmd-accent); color: var(--mmd-rn-white); }
.mmd-bottom-bar .mmd-social:hover  { background: var(--mmd-rn-red); }


/* =============================================================================
   HERO — video + torn red heading band
   =============================================================================
   The parent floats a translucent oxblood band at the video's bottom edge. Here
   the band is opaque brand red with a torn edge top and bottom, and it sits
   BELOW the video rather than over it, as drawn.
   ============================================================================= */

/* The parent's double cream masthead rules across the top of the video are not
   in this comp. ::before goes; ::after is reused for the sticker below. */
.mmd-hero-overlay-wrap::before { display: none; }

/* THE VIDEO STARTS DIRECTLY UNDER THE HEADER BAR.

   .mmd-main carries `padding: var(--mmd-space-6) …` from the parent, which put
   24px of page black between the sticky header and the top of the hero. The
   negative margin cancels exactly that, referencing the SAME token so the two
   cannot drift apart if the parent re-spaces its main.

   :first-child, not every hero: it only applies where the hero opens the page —
   which is all three of the pages that have one, but leaves any future layout
   that puts a hero further down with its normal spacing. */
.mmd-main > .mmd-hero-overlay-wrap:first-child {
    margin-top: calc( -1 * var(--mmd-space-6) );
}

/* The "As Seen On ABC's Shark Tank" starburst, pinned over the top-right of the
   video. A pseudo-element rather than markup because it is pure decoration
   here — the same credential is stated as real text further down the page in
   the Shark Tank section, so repeating it in the accessibility tree would just
   make a screen reader announce it twice.

   Positioned against .mmd-hero-overlay-wrap, whose first grid row IS the video,
   so `top` is measured from the video's top edge. pointer-events:none so it
   never swallows a tap meant for the video. */
.mmd-hero-overlay-wrap::after {
    content: '';
    position: absolute;
    top: var(--mmd-space-4);
    right: var(--mmd-space-4);
    width: clamp( 96px, 27vw, 180px );
    aspect-ratio: 171 / 170;
    background: url( 'assets/image/bright-redesign/Home/SHARKTANK STICKER.svg' ) center / contain no-repeat;
    z-index: 2;
    pointer-events: none;

    /* THESE THREE RESETS ARE LOAD-BEARING. This pseudo-element is not new — the
       parent already styles ::before and ::after together as its two cream
       masthead rules, and everything in that shared rule that is not restated
       here is still in force. Three of its declarations are actively hostile to
       a sticker:

         height: 2px            an explicit height BEATS aspect-ratio, so the
                                sticker rendered as a 2px sliver — present in
                                the DOM, invisible on screen. This was the bug.
         left: 50%              combined with `right` above it over-constrains
                                the box; `width` wins and `right` is ignored, so
                                the sticker sat centred, not in the corner.
         transform: translateX  shifted it a further half-width left.

       A shorthand `all: unset` would take `content` with it and remove the
       element entirely, so the three are named individually. */
    height: auto;
    left: auto;
    transform: none;
}

.mmd-hero-overlay {
    background: var(--mmd-rn-brush);
    /* Block padding clears the brush edge; the first line of a two-line heading
       must not sit in the bristles.

       The BOTTOM is deliberately deeper than the top. The pricing pill sits just
       under this banner, and with symmetric padding the heading's last line and
       the pill were nearly touching — the comp leaves a clear band of red below
       the type before the hem starts. */
    padding: calc( var(--mmd-space-6) + var(--mmd-rn-tear) )
             var(--mmd-gutter)
             calc( var(--mmd-space-10) + var(--mmd-rn-tear) );
    /* Centred, as drawn — at every width, not just desktop. */
    text-align: center;
    /* OVERLAPS THE VIDEO ABOVE IT. The stroke's top edge is ragged and
       semi-transparent, so it needs something behind it. Butted under the video
       it had only the page there, and the bristles read as a dark fringe rather
       than paint laid over the footage — the same problem the gold "Since 2002"
       band had against the Shark Tank still.

       Two tear-depths puts the whole ragged zone onto the video.

       No z-index here: the parent already gives this band `position: relative;
       z-index: 1`, which is what lifts it over the hero-video package's own
       positioned layer.

       THIS IS THE SHARED HERO, so it lands on the homepage, Private Events and
       Public Shows together — all three render .mmd-hero-overlay. Nothing below
       shifts: the banner and everything after it move up as one, so the dusk
       field's own pull-up onto the banner's bottom hem still meets it. */
    margin-top: calc( -2 * var(--mmd-rn-tear) );
}

/* The band drops out of the video's grid cell and takes its own row underneath.
   `align-self: end` in the parent is what pinned it over the video; `position:
   static` is NOT safe to set here — see the parent's note about the hero-video
   package creating a positioned layer — so the band keeps position:relative and
   is simply given its own grid row instead. */
.mmd-hero-overlay-wrap    { grid-template-rows: auto auto; }
.mmd-hero-overlay-wrap > * { grid-area: auto; }
.mmd-hero-overlay          { align-self: stretch; }

.mmd-hero-overlay__h1 {
    font-family: var(--mmd-font-display);
    /* 800. The headline is the loudest type on the page and 600 was not carrying
       it once the face stopped being condensed — Oswald read heavy at 600 partly
       BECAUSE it was narrow, and Nunito Sans at the same weight came out as a
       wide medium. Weight is what replaces width here; see the type note at the
       top of the file. 800 also matches .mmd-home-broadway__line, so the page's
       two heaviest lines agree.

       The tiled word is unaffected — .mmd-rn__ch sets its own 700 and the art
       tiles are SVG. */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    /* The parent's clamp is kept — its reasoning (a long city name must not wrap
       the band into the video) still applies. Re-measured when the face went to
       Nunito Sans: the headline still sets inside the band at 360px and at
       1280px, with the band growing to hold it rather than the type spilling. */
    font-size: clamp( 1.75rem, 8.5vw, 3rem );
    line-height: 1.06;
    color: var(--mmd-rn-white);
}
/* The <em> is the ransom hook and must not also be italic — ransom.js replaces
   its contents with tiles that set their own faces. */
.mmd-hero-overlay__h1 em { font-style: normal; }

/* No video (the hero-video package is file_exists()-guarded, so this is a real
   state): the parent swaps the translucent band for solid oxblood. Here the band
   is already opaque, so only the parent's colour needs undoing. */
.mmd-hero-overlay-wrap--no-video .mmd-hero-overlay { background: var(--mmd-rn-brush); }

@media ( min-width: 1024px ) {
    /* Undo the parent's desktop treatment wholesale: it centres the band, rounds
       it and translates it up to straddle the video/cream boundary. None of that
       survives a full-bleed brush banner — the stroke's ragged edges are drawn
       into the art, so a rounded corner would clip through them, and the
       boundary the band straddles no longer exists now the page below is
       black rather than cream. */
    .mmd-hero-overlay {
        justify-self: stretch;
        width: auto;
        border-radius: 0;
        transform: none;
        text-align: center;
        padding: calc( var(--mmd-space-10) + var(--mmd-rn-tear) ) var(--mmd-space-12);
        background: var(--mmd-rn-brush);
    }
    .mmd-hero-overlay__h1 { font-size: clamp( 2.75rem, 4.5vw, 4rem ); text-align: center; }
}


/* -- The dusk run ------------------------------------------------------------
   The hero banner, the pricing pill, the tagline and the cast photo read as ONE
   continuous purple field in the comp — the gradient runs from under the brush
   edge straight into the photograph with no seam.

   They are four separate sections, and the parent puts a gap between every
   stacked section in one place:

       .mmd-main > * + * { margin-top: var(--mmd-section-gap); }   [= space-8]

   (That snippet is quoted WITHOUT a trailing comment marker on purpose. CSS
   comments do not nest, so writing the parent's own trailing comment here would
   close THIS block early and dump the next fifteen lines of prose into the
   stylesheet as a selector — which is exactly what happened once already and
   silently killed the rule below.)

   On a cream page that gap is invisible. On this black one it painted three
   black bands straight through the middle of the gradient. Zeroing it for these
   three is what closes them up; the sections keep their own internal padding,
   so the copy does not collide.

   Scoped to exactly these three, NOT to .mmd-main > * — every other section on
   the page still wants the gap.

   SPECIFICITY: `.mmd-main >` is on the front deliberately, making these (0,2,0)
   against the parent's (0,1,0). A bare `.mmd-home-tagline` ties at (0,1,0) and
   only wins on source order, which is true here but silently stops being true
   the moment anything re-orders the enqueue or inlines the parent CSS after it.
   Out-specifying costs one class and removes the question.
   -------------------------------------------------------------------------- */
.mmd-main > .mmd-rn-dusk { margin-top: 0; }

/* The brush banner's bottom edge is RAGGED — the lower ~14px of its box is
   transparent where the bristles thin out. Butting the next section up against
   that box leaves the page's black showing through the gaps in the stroke, so
   the tear reads as a black fringe instead of paint on the photograph.

   Pulling the field up by the tear depth puts the photo BEHIND the ragged edge,
   which is what the comp shows. It works without a z-index because the parent
   already gives .mmd-hero-overlay `position: relative; z-index: 1` — positioned
   elements paint above static siblings, so the banner stays on top of the field
   that has slid under it.

   Twice the tear depth, not once: half of it hides behind the solid red, and
   half fills the gaps in the ragged half — and the extra headroom is also what
   lets the pill below ride up onto the banner the way the comp draws it. */
.mmd-main > .mmd-rn-dusk { margin-top: calc( -2 * var(--mmd-rn-tear) ); }


/* =============================================================================
   THE DUSK FIELD — photograph behind pill and tagline
   =============================================================================
   Rebuilt from three sibling sections into one composite. See
   mmd_sc_ransom_dusk() in functions.php for the markup and for why the parent's
   two shortcodes are CALLED rather than forked.

   WHAT CHANGED AND WHY. The comp has no grey band: the cast photograph is the
   background behind the tagline and behind the lower half of the pricing pill.
   Three siblings could not do that — a shared background image needs a shared
   element — so the earlier build approximated it with a CSS gradient sampled off
   the photo, stacked above it. That was always a copy of the photograph rather
   than the photograph, and it broke the moment a city changed the image.

   HOW IT WORKS NOW. The wrapper's only in-flow child is the parent's about
   section, so the photo sits at the wrapper's top edge and defines its height.
   The pill and the tagline are lifted out of flow and painted over it. Nothing
   has to know how tall anything else is, which is what makes it hold up when
   the tagline copy changes.
   ============================================================================= */
.mmd-rn-dusk {
    position: relative;
    /* Cancels .mmd-main's gutter so the photograph runs edge to edge. */
    margin-inline: calc( -1 * var(--mmd-gutter) );
    /* Shows only in the instant before the photograph paints, and on a city that
       has cleared its About image. Sampled from the photo's own crop line, so
       the swap is invisible. */
    background: var(--mmd-rn-dusk);
}

/* The overlay. Absolute, so it contributes NO height — the photograph alone
   sizes the field, exactly as it does in the comp.

   The trade-off, stated because it is the one failure mode here: overlay content
   is not bounded by the photo. On a phone the photo is square (≈375px) and the
   pill plus a two-line tagline come to ≈180px, so there is roughly double the
   clearance needed. A tagline long enough to run past halfway would start
   crossing the cast rather than pushing anything down. */
.mmd-rn-dusk__over {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding-inline: var(--mmd-gutter);
    text-align: center;
}

/* GOLD, not the accent red — this pill breaks the pattern the other two follow,
   and it does so in the comp. It sits on the photograph, where a red pill would
   sink into the dusk; the two red pills (Plan My Party, Get Party Pricing) both
   sit on black or white. Being gold, it is also NOT --mmd-accent: a city that
   sets its own Primary Accent Color must not repaint this one, or it lands back
   on the colour the design moved it off.

   The BODY face, not the display one — in the comp the pill labels are
   noticeably wider and rounder than the headings were. The two tokens are the
   same family now, so it makes no visible difference today; it is named this
   way so the pills follow the body if the two ever split again. 700 is a real
   drawn weight in Nunito Sans, which is requested out to 1000.

   The margin sets the gap below the banner. It is POSITIVE: the field it sits
   in has been pulled up 2× the tear depth, so without this the pill would land
   inside the banner's hem — which an earlier build did on purpose and the comp
   does not do. The comp clears the ragged edge before the pill starts.

   z-index 2 keeps it over the banner regardless: the parent gives
   .mmd-hero-overlay `z-index: 1`, and .mmd-hero-overlay-wrap opens no stacking
   context of its own, so both sit in the root context and 2 simply beats 1. */
.mmd-rn-dusk__btn {
    position: relative;
    z-index: 2;
    margin-top: var(--mmd-space-6);
    display: inline-block;
    background: var(--mmd-rn-gold);
    color: var(--mmd-rn-ink);
    font-family: var(--mmd-font-sans);
    /* Scales, for the same reason the parent scales its two homepage buttons:
       the label is filterable, so a flat size overflows the moment it is made
       longer than "Get Package Pricing". */
    /* Type up, padding down — the label should dominate the pill rather than
       float in it. The three homepage pills all move together; see the note on
       .mmd-home-story__btn for the one constraint on how far this can go. */
    /* RE-TUNED FOR NUNITO SANS. Measured on a 360px-wide phone: "GET PACKAGE
       PRICING" wants 300px of line at the old 7vw and the pill has 274px, so it
       broke in two.

       5.6vw, not 6, because the pill gets TIGHTER as the screen narrows rather
       than staying proportional — the gutters either side of it are fixed
       pixels, so they eat a larger share of a smaller screen while a vw-sized
       label does not shrink to match. 6vw held at 360px and broke again at 305.
       The floor came down for the same reason: below ~285px the floor governs
       and a floor set too high puts the break straight back.

       The three homepage pills were all sized against Oswald's condensed width
       and all three moved together here. */
    font-size: clamp( 1rem, 5.6vw, 2.125rem );
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    border-radius: var(--mmd-radius-pill);
    padding: var(--mmd-space-2) var(--mmd-space-6);
    transition: opacity 0.15s;
}
/* White keyline. On the phone the pill sits on the photograph and needs no edge;
   at desktop it straddles the red banner, and gold on red is close enough in
   value that the pill's shape goes soft without one. Kept unconditional so the
   two widths cannot drift apart — it costs nothing on the photograph. */
.mmd-rn-dusk__btn { border: 3px solid var(--mmd-rn-white); }
.mmd-rn-dusk__btn:hover { opacity: 0.85; color: var(--mmd-rn-ink); text-decoration: none; }

/* The Get Tickets / Free Quote pair is a DESKTOP-ONLY addition — the phone comp
   has nothing between the photograph and the copy. Hidden by default and turned
   on in the desktop section rather than the other way round, so the mobile
   design stays the baseline and the wide layout is the special case. */
.mmd-rn-dusk__ctas { display: none; }


/* =============================================================================
   TAGLINE
   =============================================================================
   "The Event Everyone is Dying to Attend." — the gold word is the parent's
   existing <strong>, so this is paint only.
   ============================================================================= */
/* NO BACKGROUND. This is the change the whole composite exists for: the tagline
   is now inside .mmd-rn-dusk__over, painted straight onto the photograph, so
   anything opaque here would put the grey band back.

   It carries .mmd-home-section too, which brings a cream background, a
   --mmd-radius-xl corner and its own padding. Background and padding are
   answered by source order; the RADIUS has to be named explicitly or a rounded
   corner clips the type.

   Margins go to zero because the overlay already spans the full width and
   supplies the gutter — the old negative bleed would push this a gutter left of
   everything else in the overlay. */
.mmd-home-tagline {
    background: none;
    border-radius: 0;
    margin-inline: 0;
    /* Top padding is the gap under the pill. */
    padding: var(--mmd-space-8) 0 0;
    /* Left, not centred. The comp ranges this on the same gutter as the hero
       heading above it, so the two read as one column. */
    text-align: left;
}
.mmd-home-tagline__text {
    font-family: var(--mmd-font-sans);
    font-size: clamp( 1.5rem, 7vw, 2.5rem );
    font-weight: 400;
    line-height: 1.25;
    color: var(--mmd-rn-white);
}
/* Gold, heavy, slanted. This used to be the one place in the theme that leaned
   on a browser-synthesised oblique — the parent warns against exactly that, and
   it is right, but the previous body face shipped no italic and the comp's
   "Dying" is a shear rather than a drawn italic anyway. Nunito Sans is requested
   with its italic axis (see functions.php), so the word is now set in a real
   italic at a real weight and the caveat is gone. */
.mmd-home-tagline__text strong {
    color: var(--mmd-rn-gold);
    font-weight: 700;
    font-style: italic;
}

@media ( min-width: 1024px ) {
    /* The parent adds 2.5rem of top padding here to compensate for its desktop
       hero band being translated down over this section. That translate is gone
       (see the hero block above), so the compensation has to go with it or the
       gap reads as a mistake. */
    .mmd-home-tagline.mmd-home-section { padding-top: var(--mmd-space-6); }
}


/* =============================================================================
   ABOUT
   =============================================================================
   The parent draws a rounded dark card with the photo inset in it. The comp runs
   the photo full-bleed on the closing dusk gradient, with the copy centred on
   flat black below — so the card is dissolved rather than restyled.
   ============================================================================= */
/* Flat black, not a gradient. The photograph is full-bleed and covers this
   section's entire top, so a gradient here was painting where nothing could see
   it and then having to be kept in step with the tagline's for no benefit. The
   dusk ramp ends at the tagline; from the photo down, the page is black. */
/* NO HORIZONTAL PADDING ON THE SECTION. The gutter moves down onto the body
   copy instead, and that swap is the fix for the photo being inset.

   Previously the section kept its gutter and the image clawed it back with
   `width: calc(100% + 2 * var(--mmd-gutter))` plus a negative margin — three
   interdependent values that had to agree exactly, and did not: the photo
   rendered two gutters short on the right, framed by a strip of page black that
   made it read as a picture dropped onto the layout rather than the field
   behind it.

   Taking the padding off the section makes the image's plain `width: 100%`
   correct with no arithmetic at all, which is why this cannot drift again. */
.mmd-home-about {
    background: var(--mmd-rn-black);
    border-radius: 0;
    /* ZERO, not a negative bleed. This section now renders inside .mmd-rn-dusk,
       which has already cancelled .mmd-main's gutter — bleeding again here would
       shift the photograph a gutter to the left of the page. */
    margin-inline: 0;
    padding: 0 0 var(--mmd-space-10);
    text-align: center;
    /* Doing TWO jobs, both required — see the note on __image below.
       1. Clips the photograph's over-tall frame at this section's top edge.
       2. Establishes a block formatting context, which is what stops the
          image's negative top margin from collapsing THROUGH this section and
          dragging the whole thing upward instead of cropping the picture.
       Remove it and the crop silently becomes a layout shift. */
    overflow: hidden;
}
.mmd-home-about__body { padding-inline: var(--mmd-gutter); }
.mmd-home-about__image {
    /* The section has no horizontal padding, so this is already edge to edge.
       `display: block` matters: as an inline replaced element the image sits on
       a text baseline and leaves a few pixels of descender space under it, which
       on a black section shows as a thin dark line between the photo and the
       copy. */
    display: block;
    width: 100%;
    margin-inline: 0;
    border-radius: 0;
    margin-bottom: var(--mmd-space-8);
    /* CROPPED FROM THE TOP, which is the opposite of what it looks like it
       should do, so here is the reasoning.

       The cast group shot is a tall frame: the bottom ~55% is the cast, the top
       ~45% is empty studio backdrop. In the comp there is almost no gap between
       "…to Attend." and the first performer's head — so the empty backdrop is
       NOT being shown. Either the photo is pulled up behind the tagline, or the
       backdrop is cropped off. Both look identical on screen.

       Cropping is chosen because pulling the photo up means a negative margin
       sized to the height of two editable text blocks above it — which silently
       overlaps the cast the first time someone writes a longer tagline. The
       crop has no such coupling.

       The dusk gradient on the sections above then stands in for the backdrop
       that was cropped away, which is why those stops are sampled from this
       photograph (see the token block). If this image is replaced, check the
       ratio here as well as the gradient.

       object-position: bottom is what keeps the cast and discards the backdrop;
       plain `cover` would trim both ends equally and behead them.

       TALL AND THEN CROPPED — two mechanisms, because one cannot do it.

       The ask was "larger, and fine if it crops on the sides". `object-fit:
       cover` crops on exactly ONE axis: whichever way the box is
       proportionally over-sized. With a square box (the previous value) the
       scale was driven by WIDTH, which pinned the cast at boxWidth/1270 no
       matter what else changed — the figures could not be enlarged at all
       while the box stayed square or wider.

       So the frame goes to 5/8, taller than the source's 0.79, which flips the
       scale onto HEIGHT: the picture now fills 1.6 viewport-widths of height,
       the figures come up about 27%, and the overflow crops the sides, as
       asked.

       That alone would show the source's whole height, including the ~45% of
       empty studio backdrop above the cast — pushing the performers far down
       the page. `cover` cannot also trim that, because with height-driven
       scaling there is no vertical overflow left for object-position to shift.
       Hence the negative margin: it lifts the frame and the section's overflow
       clips it.

       The margin is a PERCENTAGE on purpose. Percentage margins resolve against
       the containing block's WIDTH, so the crop stays proportional to the
       viewport — the same slice of picture disappears on a phone and on a
       tablet. A pixel value would crop most of the photo on a narrow screen and
       barely graze it on a wide one. */
    aspect-ratio: 5 / 8;
    object-fit: cover;
    object-position: center bottom;
    margin-top: -24%;
}
/* LIGHT, and set apart from the tagline directly above it — that contrast is
   the point of this block and the test that settles any change here is to put
   the two in the same screenshot.

   It used to be a contrast of FACE: the tagline round, this block condensed,
   two different families. Nunito Sans is now both slots, so all that carries it
   is the weight. 300 against the tagline's 400 and the headings' 700 still
   reads as a quieter voice, which is what the comp is doing; do not let this
   drift up to 400 or the block stops being distinguishable at all. */
.mmd-home-about__body p {
    font-family: var(--mmd-font-display);
    font-weight: 300;
    font-size: clamp( 0.95rem, 3.9vw, 1.15rem );
    line-height: 1.55;
    color: var(--mmd-rn-white);
    max-width: 34rem;
    margin-inline: auto;
    margin-bottom: var(--mmd-space-6);
}
/* "Since 2002" — the parent already wraps the year in <strong>. Weight stays at
   the surrounding 300: in the comp the year is picked out by COLOUR alone, and
   bolding one word inside a light block breaks the even texture the block has. */
.mmd-home-about__body strong { color: var(--mmd-accent); font-weight: 300; }
.mmd-home-about__body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--mmd-font-display);
    text-transform: uppercase;
    color: var(--mmd-rn-white);
}


/* =============================================================================
   EVIDENCE NOTEBOOK  →  COLOUR PANELS
   =============================================================================
   The biggest change in the theme, and the one worth reading before editing.

   The parent renders this section as a torn notebook page: a paper texture, four
   prop/copy rows with the props bleeding off the edges, and a dashed weave drawn
   between them at runtime by main.js. The comp replaces all of that with four
   full-bleed flat colour panels separated by white gaps.

   None of it needs a markup change. The parent already alternates the rows with
   .mmd-home-story__row--reverse, and it alternates them in exactly the order the
   comp draws — image left, image right, image left, image right. So the paper
   becomes the white gap colour, the rows become the panels, and the connectors
   are switched off.

   THE CONNECTORS. main.js still measures the props and draws the weave into
   .mmd-story-connectors on every resize. Hiding it in CSS leaves that work
   running for an invisible SVG. That is accepted rather than fixed: the script
   is the parent's, the cost is one rAF-throttled measure pass, and suppressing
   it would mean either forking main.js or racing it from a second script. If
   this theme ever becomes the default, delete the module in the parent instead.

   THE PROP ART. The comp's panels hold full-length cut-outs of costumed cast
   members, not the parent's object props (magnifier, typewriter, handcuffs,
   poison bottle). The cut-outs live in assets/image/bright-redesign/Home/ and
   are wired in below. They are WebP with alpha, capped at 1600px on the long
   edge — see the asset note at the foot of this file.

   HOW, without touching PHP: `content` on a replaced element re-points what an
   <img> renders, and the parent already gives each prop its own class. So the
   swap is four declarations instead of a forked shortcode that would then stop
   tracking every future change to this section. Paths are relative to THIS file.

   The alt text stays the parent's — alt="" on all four — which stays correct
   after the swap: the paragraph beside each cut-out already carries the meaning,
   and "a woman in a red dress holding a rope" would be noise to a screen reader.
   ============================================================================= */

/* The section is now just a full-bleed stack; the oxblood card it used to be is
   gone entirely. */
/* BLACK, and it has to be its own rather than the page's. The comp runs black
   behind this whole section: in the notches of the navy card's rounded top, and
   under the white sheet where the Plan My Party button sits. It used to get
   that from .mmd-main, so when the page went white the section went with it and
   both of those went white too.

   It also has to MEET the dusk field's black above it, so the section gap is
   converted rather than removed — margin-top to padding-top, same 32px, now
   inside the black instead of between two of them. */
.mmd-home-story {
    background: var(--mmd-rn-black);
    border-radius: 0;
    margin-inline: calc( -1 * var(--mmd-gutter) );
    /* Foot padding, not zero. With none, the button's own bottom margin collapses
       straight out through the section and the black stops at the button's border
       box — it was ending 5px ABOVE the button's lower edge. The padding both
       stops the collapse and gives the button the band of black the comp puts
       under it. */
    padding: 0 0 var(--mmd-space-10);
}
.mmd-main > .mmd-rn-dusk + .mmd-home-story {
    margin-top: 0;
    padding-top: var(--mmd-space-8);
}

/* Heading: navy card, rounded at the top only, sitting flush on the first panel.
   The comp puts no white gap between the two. */
.mmd-home-story__heading {
    background: var(--mmd-rn-navy);
    border-radius: var(--mmd-radius-xl) var(--mmd-radius-xl) 0 0;
    font-family: var(--mmd-font-display);
    font-size: clamp( 1.5rem, 6.5vw, 2.25rem );
    /* 400, not 500 — at this size the comp's heading is noticeably lighter than
       the hero banner's, which is what keeps the two from competing. */
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    color: var(--mmd-rn-white);
    margin: 0;
    padding: var(--mmd-space-10) var(--mmd-gutter);
}
/* The parent wraps TWO words in <em> here — "Best" and the city name. Only the
   first becomes a ransom word; the second is set bold and upright, as drawn.
   ransom.js targets :first-of-type for the same reason. */
.mmd-home-story__heading em { font-style: normal; font-weight: 700; }

/* The "paper" is now the white gap showing between the panels. Flex with a gap
   rather than margins on the rows: the connector spacers are display:none below,
   and margin-based spacing would collapse unpredictably around them. */
.mmd-home-story__paper {
    background: var(--mmd-rn-white);
    background-image: none;
    border-radius: 0 0 var(--mmd-radius-xl) var(--mmd-radius-xl);
    padding: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The runtime weave and the per-gap spacers both go. */
.mmd-story-connectors    { display: none; }
.mmd-home-story__link    { display: none; }

/* Each row becomes a panel. `align-items: stretch` (the parent centres) so the
   flat colour fills the full height whatever the copy length. */
.mmd-home-story__row {
    /* Positioning context for the cut-out, which is taken out of flow below. */
    position: relative;
    align-items: center;
    gap: 0;
    padding: 0;
    /* The panel's own depth, rather than letting anything else set it.

       It used to be set by the IMAGE: a stretched flex item with height:auto
       contributes its full intrinsic height to the flex line, so each panel grew
       to whatever the cut-out's aspect demanded — around 350px — and the figure
       was never cropped at all, which is why they read small and full-length.
       Taking the image out of flow (below) removes that, and this sets the depth
       deliberately instead.

       THIS VALUE IS GEOMETRICALLY CONSTRAINED — it is not free. A cut-out fills
       the panel height, so a taller panel means a bigger figure, which means a
       WIDER one. Once the figure's content is wider than its 46% box, `cover`
       trims real anatomy and the performers read as running off the page edge.

           figure fits  ⟺  panelHeight ≤ contentHeight × boxWidth ÷ contentWidth

       With the shipped cut-outs (content 0.85 aspect) and a 46% box, that caps
       the panel at ~203px on a 375px viewport. 52vw = 195px, just inside it.

       Note that the transparent side margins in the assets do NOT buy headroom
       here — they cancel out of the inequality. They stop the trim landing on a
       sleeve; only this cap stops there being a trim at all. If a deeper panel
       is ever wanted, the lever is a lower crop on the sources (taller content),
       not a bigger number here.

       THE FLOOR IS PART OF THE CONSTRAINT TOO. 52vw satisfies the inequality at
       every width, but a px floor does not scale with the box beside it — at 185
       it overflowed on a 320px phone, where the cap is 173. 165 clears it, and
       the floor only engages below ~317px anyway. */
    min-height: clamp( 165px, 52vw, 310px );
}
/* Direction no longer matters — the cut-out is absolutely positioned and the
   copy is placed with auto margins, so row-reverse would only invert what those
   margins mean. Neutralised so both variants reason the same way. */
.mmd-home-story__row--reverse { flex-direction: row; }
/* 1, 3, 5, 7 — NOT 1, 2, 3, 4. mmd_story_connector() echoes a
   .mmd-home-story__link div into each gap, so the paper's markup runs row, link,
   row, link, row, link, row, then the two closing paragraphs. Counting 1..4
   would paint the first panel and then miss.

   :nth-of-type, NOT :nth-child, AND THIS IS LOAD-BEARING. An earlier build used
   :nth-child on the reasoning that the two are equivalent here because every
   element before the paragraphs is a div. They are equivalent in the SERVED
   HTML — and then main.js runs:

       paper.insertBefore( svg, paper.firstChild );

   which injects the .mmd-story-connectors overlay as the paper's first child.
   That shifts every :nth-child index by one, so 1/3/5/7 land on the svg and the
   (hidden) connector spacers, every panel loses its colour, and the white panel
   text ends up white-on-white. :nth-of-type counts per tag, so an injected <svg>
   does not disturb the <div> sequence at all.

   REMAINING COUPLING: this still assumes the connectors are divs interleaved
   one-per-gap. If the parent ever stops emitting them, these become 1..4. */
.mmd-home-story__row:nth-of-type(1) { background: var(--mmd-rn-red);    }
.mmd-home-story__row:nth-of-type(3) { background: var(--mmd-rn-purple); }
.mmd-home-story__row:nth-of-type(5) { background: var(--mmd-rn-green);  }
.mmd-home-story__row:nth-of-type(7) { background: var(--mmd-rn-navy);   }
/* A fifth panel exists only on Private Events, which reuses these rows for its
   occasion cards and ships five of them. The homepage has four, so this matches
   nothing there — deliberately left unscoped, since the colour cycle should
   simply continue wherever the rows are used. */
.mmd-home-story__row:nth-of-type(9) { background: var(--mmd-rn-red);    }

/* Props stop bleeding off the page and become cut-outs standing on the panel
   floor. Every one of the parent's per-prop nudges has to be undone explicitly:
   they are separate rules at separate specificities (the poison bottle's tilt is
   set twice, once under .mmd-home-story__row--reverse), so a single generic
   override would leave the odd one out still rotated or still hanging off the
   edge. */
/* SIZED BY HEIGHT, NOT WIDTH — the one non-obvious decision in this block.

   The parent sizes props by flex-basis because its four objects are roughly
   square. The cast cut-outs are not: they run from 0.77:1 (the wrench figure)
   to 0.41:1 (the butler). Give those a common WIDTH and their heights diverge by
   nearly a factor of two — the butler's panel ends up twice as tall as the
   wrench figure's, and the run of panels staggers down the page.

   A common HEIGHT is also just what a cast line-up should look like: four people
   standing at the same scale. Width follows the figure, capped so a wide one
   cannot crowd out the copy. */
.mmd-home-story__prop {
    /* Half the panel, full bleed to its edges, cropped rather than fitted.

       `contain` was wrong for these: it scales the whole figure to fit inside
       the box, which on a 0.53-aspect full-length cut-out in a landscape panel
       left it small and floating with dead space either side. The comp crops —
       the performer fills the panel's full height and the frame cuts across her
       skirt at the bottom. `cover` plus a TOP anchor is that: it scales to fill,
       and discards from the bottom, so heads stay in frame and hems do not. */
    /* OUT OF FLOW, and that is the fix for "the figures are too small".

       As a stretched flex item with height:auto the image contributed its full
       intrinsic height to the flex line, so the PANEL grew to fit the picture
       instead of the picture being cropped to the panel — the cut-outs rendered
       full-length at whatever scale their own aspect dictated, and nothing in
       the CSS could make them bigger. Absolute positioning breaks that
       circularity: min-height on the row sets the depth, and the image fills it.

       The source files are cropped head-to-upper-waist, content-tight, then
       given a 12% transparent margin on each side and normalised to a single
       ~1.27 aspect. That aspect is wider than this box, so `cover` scales on
       HEIGHT — the performer always fills the panel top to bottom — and trims
       the sides. The trim is what the transparent margin is for: it lands on
       padding, not on anybody's arm. Without that margin the figures sat flush
       against the page edge and read as running off it. */
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46%;
    max-width: 46%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    margin: 0;
}
/* Panels 1 and 3 inset their cut-out from the page edge. The transparent margin
   baked into the assets works out to only ~3px on a phone once `cover` has taken
   its trim, which is not enough to stop the performer reading as flush against
   the edge of the page. This moves the whole frame in instead.

   NOTE the asymmetry: only the left-hand pair is inset. Panels 2 and 4 stay
   hard right, as specified. */
.mmd-home-story__row:not(.mmd-home-story__row--reverse) .mmd-home-story__prop { left: 0; right: auto; }
.mmd-home-story__row--reverse .mmd-home-story__prop { right: 0; left: auto; }

/* The 20% inset is the HOMEPAGE's, and it has to say so. It was written
   unscoped, and .mmd-home-story__row is shared with the Private Events occasion
   cards — so every left-hand occasion photograph was being pushed 20% into its
   panel, which is what made them read as centred no matter how the width or
   object-position changed. Scoped to the homepage section wrapper, the same way
   the panel-3 mirror is. */
.mmd-home-story .mmd-home-story__row:not(.mmd-home-story__row--reverse) .mmd-home-story__prop { left: 20%; }

/* Panel 3 (the butler) is flipped so he faces INTO the panel, toward his copy,
   rather than out past the page edge — the other three already do.

   nth-of-type(5) is panel 3: the connector spacers sit between the rows, so the
   four panels are 1, 3, 5, 7. Same counting as the colours above, and the same
   reason for :nth-of-type over :nth-child.

   A transform, not a mirrored asset: it costs no bytes, and the cut-out is
   symmetrical in lighting so nothing gives the flip away.

   SCOPED TO .mmd-home-story. The Private Events page reuses
   .mmd-home-story__row for its occasion cards, and nth-of-type(5) there is a
   different performer who should not be flipped. The homepage section wrapper
   is the narrowest thing that separates the two. */
.mmd-home-story .mmd-home-story__row:nth-of-type(5) .mmd-home-story__prop { transform: scaleX( -1 ); }
/* The parent lays the bottle over at -22deg and sets that twice, the second time
   under .mmd-home-story__row--reverse. Both have to be answered or the cut-out
   in that slot stands at a tilt. */
.mmd-home-story__prop--poison {
    transform: none;
    /* stretch, matching the other three — the parent pins this one to
       flex-start and lays it over at -22deg, and both have to be undone or the
       fourth cut-out stands tilted and half-height beside its siblings. */
    align-self: stretch;
    margin-top: 0;
}
.mmd-home-story__row--reverse .mmd-home-story__prop--poison { margin-right: 0; }

/* The parent gives each prop its own width (58/56/54%) because its object props
   were shot at different scales. The cast cut-outs are not, so all four are
   flattened to the single value set above — otherwise three of the four panels
   get a differently-sized figure.

   Stated explicitly rather than left to the cascade: the parent's rules are
   single-class, so are mine, and mine only win because this file loads second.
   Naming them keeps that from being the thing holding the layout together. */
.mmd-home-story__prop--magnifier,
.mmd-home-story__prop--typewriter,
.mmd-home-story__prop--cuffs,
.mmd-home-story__prop--poison { flex-basis: 50%; max-width: 50%; }

/* The cut-out swap. See the section header for why `content` and not PHP. */
.mmd-home-story__prop--magnifier  { content: url( 'assets/image/bright-redesign/Home/murder-5021.webp' ); }  /* red dress + rope     → red   */
.mmd-home-story__prop--typewriter { content: url( 'assets/image/bright-redesign/Home/pipeman.webp'     ); }  /* purple suit + wrench → purple */
.mmd-home-story__prop--cuffs      { content: url( 'assets/image/bright-redesign/Home/murder-4847.webp' ); }  /* butler + poison      → green */
.mmd-home-story__prop--poison     { content: url( 'assets/image/bright-redesign/Home/mrs-peacock.webp' ); }  /* veil + knife         → navy  */

.mmd-home-story__text {
    font-family: var(--mmd-font-sans);
    /* Smaller than before. The copy shares the panel with a half-width cut-out,
       so it runs in a ~180px column on a phone; at the old size the longest
       paragraph needed eleven lines and drove the panel deeper than the design
       wants it. */
    font-size: clamp( 0.7rem, 3vw, 0.875rem );
    line-height: 1.45;
    color: var(--mmd-rn-white);
    align-self: center;
    /* The other side of the panel — 54% against the cut-out's 46%, so the two
       exactly divide it with no overlap. The cut-out is out of flow now, so this
       no longer gets placed by the flex direction; it is sized here and pushed
       to its side explicitly below. */
    width: 54%;
    /* space-4, not space-5 — there is no --mmd-space-5 in the parent's scale
       (it jumps 4 → 6), and a missing custom property does not fall back, it
       computes to 0. */
    padding: var(--mmd-space-4);
}
/* On flat colour the lead-in reads as weight, not as a darker ink — the parent's
   --mmd-ox-900 would be invisible here. */
.mmd-home-story__text strong { color: var(--mmd-rn-white); font-weight: 700; }
/* Panel 1 and 3 have the cut-out on the LEFT, so their copy is pushed right and
   ranged right, toward it; panels 2 and 4 mirror that. The auto margin is what
   places the copy now — the flex direction used to, and no longer does. */
.mmd-home-story__row:not(.mmd-home-story__row--reverse) .mmd-home-story__text {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}
.mmd-home-story__row--reverse .mmd-home-story__text {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

/* The two closing paragraphs sit on the white sheet under the panels. They are
   flex children of .__paper now, so the gap above them is the same 10px white
   stripe that separates the panels — which is what the comp draws. */
.mmd-home-story__text--full {
    font-family: var(--mmd-font-sans);
    font-size: clamp( 0.95rem, 4vw, 1.15rem );
    line-height: 1.4;
    color: var(--mmd-rn-ink);
    text-align: center;
    border-top: none;
    margin: 0;
    padding: var(--mmd-space-8) var(--mmd-gutter) var(--mmd-space-2);
    align-self: auto;
    /* FULL WIDTH — and this needs saying, because the element carries BOTH
       .mmd-home-story__text and .mmd-home-story__text--full. It was therefore
       inheriting the 54% column width meant for copy sitting beside a cut-out,
       and rendering this closing block as a narrow ribbon down the middle of an
       otherwise empty card. It is not in a panel; it has the sheet to itself. */
    width: auto;
    max-width: 46rem;
    margin-inline: auto;
}
.mmd-home-story__text--full strong { color: var(--mmd-rn-ink); font-weight: 700; }
.mmd-home-story__close {
    font-family: var(--mmd-font-display);
    font-size: clamp( 1.25rem, 5.5vw, 1.75rem );
    font-weight: 400;
    line-height: 1.2;
    color: var(--mmd-rn-ink);
    text-align: center;
    margin: 0;
    padding: 0 var(--mmd-gutter) var(--mmd-space-10);
}
/* The comp sets the second half of this line in red. The parent's default is one
   unbroken string, so there is nothing to hook — this is a CONTENT edit, not a
   code change. In Location Settings → Homepage Content → "Final Line", wrap the
   second half in <em>:
       This is the Murder Mystery Event <em>everyone has always wanted to do.</em>
   The field runs through wp_kses_post(), so <em> is permitted. */
.mmd-home-story__close em { color: var(--mmd-accent); font-style: normal; display: block; }

/* CONSTRAINT ON THE SIZE. These labels are editable content fields, so the type
   scales with the viewport rather than sitting at a flat size — the parent's
   original reasoning, still true. The vw term is what stops a longer label than
   "Plan My Party" overflowing its pill; raising the rem cap alone would be safe,
   raising the vw term is what to be careful with. */
.mmd-home-story__btn {
    margin: var(--mmd-space-10) var(--mmd-gutter) 0;
    background: var(--mmd-accent);
    font-family: var(--mmd-font-sans);
    /* 7vw rather than 7.5, matching .mmd-home-sharktank__btn — see the note
       there. "Plan My Party" is short enough that it still held one line after
       the face changed, but the two pills sit on the same page and are sized as
       a pair, and the constraint above is about the label that replaces it. */
    font-size: clamp( 1.25rem, 7vw, 2.25rem );
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: var(--mmd-space-3) var(--mmd-space-6);
}


/* =============================================================================
   STRAIGHT FROM OFF BROADWAY
   =============================================================================
   Newsprint texture out, white sheet in. The heavy slanted line, the gold double
   rule and the black column rules are the whole look here.
   ============================================================================= */
.mmd-home-broadway {
    background: var(--mmd-rn-white);
    background-image: none;
    border-radius: 0;
    margin-inline: calc( -1 * var(--mmd-gutter) );
    /* No bottom padding: the close is a full-bleed torn banner that has to reach
       the section's bottom edge. The gap above it is the last panel's
       margin-bottom, so nothing here has to cancel anything — an earlier version
       kept the padding and pulled the banner down with a negative margin, which
       then had to be re-tuned at every breakpoint that changed the padding. */
    padding: var(--mmd-space-10) var(--mmd-gutter) 0;
}

.mmd-home-broadway__line {
    font-family: var(--mmd-rn-font-slant);
    font-size: clamp( 1.875rem, 8.5vw, 3rem );
    font-weight: 800;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--mmd-rn-ink);
    text-align: left;
}
/* The <em> the parent puts round "Off Broadway." is already inside an italic
   line, so it has nothing left to add — normalising it stops the browser
   double-slanting the phrase. */
.mmd-home-broadway__line em { font-style: italic; }

/* The parent hangs a solid oxblood redaction bar off the first line. Not in this
   comp — a gold double rule sits under the SECOND line instead. */
.mmd-home-broadway__line:not( .mmd-home-broadway__line--end )::after { display: none; }

/* Second line reads left here, not right. Set at base AND repeated in the
   desktop query below, because the parent flips it at both widths. */
.mmd-home-broadway__line--end {
    text-align: left;
    margin-top: var(--mmd-space-1);
    /* "Now in" is upright and MUCH lighter than the heavy slanted line above it
       — the contrast between the two is the whole effect. Nunito Sans is
       requested down to 200, so 300 is a real drawn weight, not a synthesis. */
    font-style: normal;
    font-weight: 300;
    font-family: var(--mmd-font-display);
    text-transform: none;
}
/* The gold double rule. Hung off the banner rather than given its own element:
   it is pure decoration, so it does not earn markup — the same call the parent
   made for the redaction bar it replaces. border + height, so one box draws two
   lines. */
.mmd-home-broadway__banner {
    margin-bottom: var(--mmd-space-8);
    padding-bottom: var(--mmd-space-6);
    position: relative;
}
.mmd-home-broadway__banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* box-sizing is border-box globally, so this height INCLUDES the 8px of
       border — 12px leaves a 4px channel between the two gold rules. Drop it to
       9px and the channel closes to 1px and the pair reads as one thick line. */
    height: 12px;
    border-top: 4px solid var(--mmd-rn-gold);
    border-bottom: 4px solid var(--mmd-rn-gold);
}
/* .mmd-word-accent is the ransom hook here. Its parent rule is a bare colour;
   ransom.js supplies the tiles, so all this has to do is stop the inherited
   slant from leaning them. */
.mmd-home-broadway .mmd-word-accent { color: inherit; font-style: normal; }

/* Both panels put the photo on the LEFT in this comp. The parent alternates
   them, so --reverse is un-reversed rather than the pair being restyled — and
   because DOM order is image-then-text in both, un-reversing also puts the
   visual order back in step with the reading order. */
/* THE PANELS TOUCH, and the gap moves onto the photograph instead.

   The column rule is drawn as a border on each panel's copy, so it can only be
   as tall as its own panel. With a margin between panels the rule came out as
   two separate strokes with a break between them; the comp runs one unbroken
   line down the whole section.

   Zeroing the panel margin butts the two copy blocks together so their borders
   meet and read as a single line. The visual separation the margin used to give
   is put back on the picture — which is where it actually belongs, since the
   comp does show a gap between the two photographs while the rule runs straight
   past it. */
.mmd-home-broadway__panel {
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
}
.mmd-home-broadway__panel--reverse { flex-direction: row; align-items: stretch; }

/* No frame of any kind on the photographs — square corners, no rule, no shadow.
   The parent rounds them (--mmd-radius-sm); the comp does not. `border: none` is
   belt-and-braces against anything the parent or a plugin adds later, since a
   1px outline on a dark photo is easy to mistake for part of the image. */
.mmd-home-broadway__pic {
    flex: 0 0 45%;
    max-width: 45%;
    aspect-ratio: 3 / 4;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* The gap between the two photographs. It lives here rather than on the
       panel so the column rule can run unbroken past it — see the note on
       .mmd-home-broadway__panel. The image is a stretched flex item, so its
       margin is taken out of the stretched height and the panel keeps its
       full depth for the border to span. */
    margin-bottom: var(--mmd-space-6);
}
/* One black column rule on the copy's left in BOTH panels now. The parent splits
   this across two rules — border-right for the reversed panel, border-left for
   the other — so both have to be answered or the reversed panel keeps a rule on
   its outer edge. */
.mmd-home-broadway__text {
    font-family: var(--mmd-font-sans);
    font-size: clamp( 0.8rem, 3.4vw, 0.95rem );
    line-height: 1.5;
    color: var(--mmd-rn-ink);
    align-items: center;
    text-align: left;
}

/* THE BLACK COLUMN RULE, and a specificity trap worth recording.

   Both photographs sit on the LEFT now (the parent alternates; this theme
   un-reverses them), so the rule belongs on the copy's left edge in both
   panels. The parent draws it grey — #B9B9B4 — and splits it across two
   selectors, one per direction:

       .mmd-home-broadway__panel--reverse .mmd-home-broadway__text          (0,2,0)
       .mmd-home-broadway__panel:not( …--reverse ) .mmd-home-broadway__text (0,3,0)

   That second one is (0,3,0), NOT (0,2,0) — `:not()` contributes the
   specificity of its argument. A bare .mmd-home-broadway__text override is
   (0,1,0) and loses to it outright, which is exactly what happened: the first
   panel took the black rule and the second silently kept the parent's grey one,
   so the two panels were ruled differently and neither matched the comp.

   The fix is to answer the parent selector-for-selector rather than assume a
   single-class override is enough. Both are restated below at the parent's own
   specificity, where source order decides and this file wins. */
.mmd-home-broadway__panel--reverse .mmd-home-broadway__text,
.mmd-home-broadway__panel:not( .mmd-home-broadway__panel--reverse ) .mmd-home-broadway__text {
    align-items: center;
    text-align: left;
    border-left: 3px solid var(--mmd-rn-ink);
    border-right: none;
    /* Space either side of the rule: the gap to the photograph is the panel's
       own, and this is the gap from the rule to the first character. */
    padding: var(--mmd-space-2) 0 var(--mmd-space-2) var(--mmd-space-4);
    margin-left: var(--mmd-space-4);
}

/* The close becomes a torn red banner running the full width of the section —
   so it has to cancel the section's own gutter as well as .mmd-main's. */
.mmd-home-broadway__close {
    background: var(--mmd-rn-brush);
    color: var(--mmd-rn-white);
    font-family: var(--mmd-font-display);
    font-size: clamp( 0.95rem, 4vw, 1.15rem );
    font-weight: 300;
    line-height: 1.6;
    text-align: center;
    border-top: none;
    margin-inline: calc( -1 * var(--mmd-gutter) );
    /* The panels no longer carry a bottom margin (they butt together so the
       column rule runs unbroken), so the gap before this banner is set here. */
    margin-top: var(--mmd-space-10);
    padding: calc( var(--mmd-space-8) + var(--mmd-rn-tear) ) var(--mmd-gutter);
}
/* "Dying" again, gold as in the tagline. */
.mmd-home-broadway__close em { color: var(--mmd-rn-gold); font-style: italic; font-weight: 600; }

@media ( min-width: 769px ) {
    .mmd-home-broadway { padding: var(--mmd-space-16) var(--mmd-space-8) 0; }
    .mmd-home-broadway__pic { flex-basis: 40%; max-width: 40%; aspect-ratio: 4 / 3; }
    /* The parent narrows the copy from its outer side at this width, using the
       margin that matches its own alternating alignment. Both panels are
       image-left now, so both narrow from the right — and both KEEP the small
       left margin that sets the gap between the photograph and the column rule.
       The parent zeroes margin-left here; letting that through would butt the
       rule up against the picture. */
    .mmd-home-broadway__panel--reverse .mmd-home-broadway__text,
    .mmd-home-broadway__panel:not( .mmd-home-broadway__panel--reverse ) .mmd-home-broadway__text {
        margin-left: var(--mmd-space-4);
        margin-right: 15%;
    }
    /* Re-answering the parent's desktop flip of the second line. */
    .mmd-home-broadway__line--end { text-align: left; }
    .mmd-home-broadway__close { margin-inline: calc( -1 * var(--mmd-space-8) ); }
}


/* =============================================================================
   SHARK TANK
   =============================================================================
   Rebuilt from the second round of comps. It is no longer a panel with a logo
   on it: the section is now the photograph from the episode, full-bleed, with
   the starburst sticker laid over it, and the pill on white underneath.

   The parent's markup is a __panel wrapping an __eyebrow and an __logo, then
   the __btn as a sibling. That maps onto the new design without a fork:

     __panel   → the photograph (background), sized to the comp's crop
     __logo    → the starburst, swapped with `content` as the story cut-outs are
     __eyebrow → visually hidden, NOT deleted — see below
     __btn     → unchanged, on the white below

   WHY THE EYEBROW IS HIDDEN RATHER THAN REMOVED. "As Seen On ABC's" is baked
   into the sticker as artwork, and the sticker is an SVG wrapping a raster
   <image> — so that text exists as pixels and nothing can read it. The eyebrow
   is the only real text making this claim, and it is an editable content field.
   Hiding it visually keeps it in the accessibility tree, where together with
   the logo's alt="Shark Tank" it still reads as "As Seen On ABC's Shark Tank".
   Deleting it, or setting display:none, would drop the credential entirely for
   anyone not looking at the picture.
   ============================================================================= */
/* EVERY SELECTOR BELOW IS WRITTEN THREE WAYS, and it is not redundancy.

   The parent re-skins this section per page at (0,2,0):

       .mmd-page-private-events .mmd-home-sharktank__panel,
       .mmd-page-public-shows  .mmd-home-sharktank__panel { background: ox-800; … }

   Private Events and Public Shows therefore ignored the homepage treatment
   entirely and fell back to the parent's oxblood block — which is why this
   section looked nothing like the homepage on those two pages.

   Listing the bare class plus both page scopes gives each rule a (0,2,0) form
   that ties the parent's and wins on source order, so the section renders the
   same everywhere the parent puts it. Public Shows is included now rather than
   later: it carries the identical parent override, so it would have needed this
   the moment that page is touched. */
.mmd-home-sharktank,
.mmd-page-private-events .mmd-home-sharktank,
.mmd-page-public-shows .mmd-home-sharktank {
    background: var(--mmd-rn-white);
    border-radius: 0;
    margin-inline: calc( -1 * var(--mmd-gutter) );
    padding: 0 0 var(--mmd-space-10);
}
.mmd-page-private-events .mmd-home-sharktank__panel,
.mmd-page-public-shows .mmd-home-sharktank__panel,
.mmd-home-sharktank__panel {
    background: var(--mmd-rn-black) url( 'assets/image/bright-redesign/Home/169775_2741.webp' ) center / cover no-repeat;
    /* The comp's crop is a wide letterbox of the stage. The source is 3:2, so
       this trims the ceiling and floor rather than scaling the cast down. */
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--mmd-space-6);
    margin-bottom: var(--mmd-space-10);
}
/* Same clip-rect pattern as .mmd-rn-sr — hidden from the eye, kept for readers.
   Do not "tidy" this to display:none. */
.mmd-home-sharktank__eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}
/* The ABC logo becomes the starburst. Same `content` swap the story cut-outs
   use, so no template is forked; alt="Shark Tank" survives it, which is what
   carries the credential to a screen reader alongside the hidden eyebrow.

   The parent centres this with `margin: 0 auto` — that has to be cancelled, or
   the auto margins fight the flex alignment on the panel and the sticker drifts
   to the middle instead of sitting left as drawn. */
.mmd-home-sharktank__logo {
    content: url( 'assets/image/bright-redesign/Home/SHARKTANK STICKER.svg' );
    width: clamp( 110px, 32vw, 200px );
    max-width: none;
    margin: 0;
}

.mmd-home-sharktank__btn,
.mmd-page-private-events .mmd-home-sharktank__btn,
.mmd-page-public-shows .mmd-home-sharktank__btn {
    background: var(--mmd-accent);
    color: var(--mmd-rn-white);
    font-family: var(--mmd-font-sans);
    /* RE-TUNED FOR NUNITO SANS, with .mmd-rn-dusk__btn — see the note there.
       "GET PARTY PRICING" measured 280px of line against the 280px this pill has
       inside its padding at the old 7.5vw, i.e. exactly on the break. 7vw leaves
       real slack, and the floor came down so a narrow phone, where the floor
       governs instead of the vw term, does not put the break back. */
    font-size: clamp( 1.25rem, 7vw, 2.25rem );
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    /* The parent's per-page rule squares this off to --mmd-radius-sm; the pill
       shape has to be restated with it. */
    border-radius: var(--mmd-radius-pill);
    padding: var(--mmd-space-3) var(--mmd-space-6);
    /* The section's own horizontal padding is now 0 so the photograph can go
       full-bleed, so the pill puts the gutter back for itself. */
    margin: 0 var(--mmd-gutter);
}

/* Desktop: shrink the two block-level pills to their label and centre them.

   The parent already does this (main.css ~1101) but its rule can no longer
   reach — these overrides are single-class and load later, so they beat it even
   inside its media query, media queries adding no specificity. Without this the
   pills would stretch the full column width on a wide screen with the new tight
   padding, which reads as a banner rather than a button. The parent's own
   space-16 side padding is deliberately NOT restored: the whole point of this
   round was to let the label fill the pill. */
@media ( min-width: 769px ) {
    .mmd-home-story__btn,
    .mmd-home-sharktank__btn {
        width: fit-content;
        margin-inline: auto;
        padding: var(--mmd-space-3) var(--mmd-space-12);
    }
}


/* =============================================================================
   SECTIONS NOT YET RESKINNED
   =============================================================================
   Everything from [mmd_home_hero_split] down — split hero, public shows, private
   events, corporate, why us, local relevance, themes, social proof, FAQ and the
   lead form — still renders in the parent's cream-and-oxblood treatment. They
   are on the page and fully functional; they have simply not had comps yet.

   NOTHING IS OVERRIDDEN FOR THEM HERE, and that is a decision rather than an
   oversight. The obvious-looking floor —

       .mmd-home-section { color: var(--mmd-rn-white); }

   — is wrong and was removed after being written. .mmd-home-section is an
   OPAQUE cream card (main.css ~1687) whose h2 and intro set --mmd-ink-on-paper
   explicitly. Forcing white on it would not rescue anything from the black page
   behind, because none of that copy sits on the black page; it would instead
   turn every paragraph that merely inherits its colour into white-on-cream.

   So these sections read as cream cards on a black page until each gets its own
   treatment. That is visibly unfinished, which is the correct state for a
   section with no comp — and much better than silently damaging one. */


/* =============================================================================
   PRIVATE EVENTS
   =============================================================================
   FIRST PASS — the top of the page plus the collisions. The sections below the
   occasions (how-it-works, why-us, "we bring it to you") are not skinned yet and
   still render in the parent's treatment.

   READ THIS BEFORE EDITING EITHER PAGE. Private Events is not a separate set of
   components. It reuses the homepage's markup wholesale:

       hero            .mmd-hero-overlay-wrap / .mmd-hero-overlay / __h1
       tagline         .mmd-home-section.mmd-home-tagline
       occasion cards  .mmd-home-story__paper / __row / __row--reverse / __prop
       Shark Tank      [mmd_home_sharktank], rendered verbatim

   So every homepage rule in this file ALREADY applies here — and three of them
   were actively wrong once they arrived, which is what the fixes below are.
   The lesson for the sections still to come: check whether a class is shared
   before styling it, and scope to .mmd-page-private-events (a body class the
   parent sets) or to the homepage's own section wrapper when it is.
   ============================================================================= */

/* -- The hero CTA ------------------------------------------------------------
   "Get Package Pricing", sitting on the brush's hem. The markup is appended to
   [mmd_pe_hero] in functions.php; see the note there for why it hangs off the
   hero rather than being a section of its own.

   THIS IS THE SAME BUTTON AS PUBLIC SHOWS' "Get Tickets Now" and the values
   below are that button's, copied deliberately rather than shared through a
   common class. The two are the same object in the design and different objects
   in the markup — one is the parent's .mmd-shows-scroll-btn inside its intro
   section, this one is ours — and a shared class would have meant either
   putting a shows class on Private Events or renaming a parent element. Change
   one, look at the other; the desktop block does the same in pairs.

   THE TWO SIZES HAVE SINCE DIVERGED, on purpose. "Get Package Pricing" is a
   third longer than "Get Tickets Now" and this one is a pill sized to its label
   rather than a full-width bar, so the same clamp does not fit both — see the
   note on the font-size below. Everything else about them still matches.

   The lift is -2 x the tear, the same as the intro section on Public Shows, so
   the gold lands on the hem rather than under it. */
.mmd-rn-hero-cta {
    position: relative;
    /* NO BACKGROUND OF ITS OWN — the page is white and supplies it. This strip
       carried one while Private Events was on black, along with a gutter bleed
       to line its edges up with the banner and the tagline; both went when the
       page did.

       margin-top: 0 stays, and is the one thing here that is not decoration:
       it cancels the section gap so the gold stays on the paint rather than
       drifting 32px below it. */
    margin-top: 0;
    padding-inline: var(--mmd-gutter);
    padding-bottom: var(--mmd-space-4);
    text-align: center;
}
/* THERE IS NO WHITE UNDERLAY UNDER THIS BANNER ANY MORE, and the reason is
   worth keeping: it was here because the page was black, and the brush is
   ragged and semi-transparent along its hem — so the shell showed THROUGH the
   bristles as well as under them, and nothing placed below the banner can get
   behind its own background. A second background layer on this element was the
   only way to put paper under the paint.

   The page is white now (see the shell note above), so the paint tears onto
   the page itself and the layer has nothing left to do. If Private Events is
   ever put back on black, this is the fix — not a white box under the banner,
   which buries the tear and rules a straight line across it. */
.mmd-rn-hero-cta__btn {
    display: block;
    /* In FRONT of the brush, which is z-index 3 — the paper behind it is at -1,
       so the paint ends up sandwiched between the two. Four rather than three
       for the same reason the shows button needs it: at anything lower the
       ragged edge is drawn across the top of the gold. */
    position: relative;
    z-index: 4;
    /* A PILL AT EVERY WIDTH, not the full-width bar Public Shows uses. That one
       is drawn as a bar in its comp and its label is short; "Get Package
       Pricing" is half as long again, and at 8.5vw on a phone it came out as a
       two-line gold slab deeper than the hero copy above it. Sized to its text
       and centred instead, so the label governs the button rather than the
       viewport. */
    width: fit-content;
    margin-inline: auto;
    /* Half its own height, whatever that turns out to be — so the gold straddles
       the line where the paper starts at any width and any label. A pixel margin
       would have to be re-measured every time the type moves; a transform does
       not touch the layout at all, so the white behind it is unaffected. */
    transform: translateY( -50% );
    margin-block: 0;
    background: var(--mmd-rn-gold);
    color: var(--mmd-rn-ink);
    font-family: var(--mmd-font-display);
    /* RE-TUNED FOR NUNITO SANS. At the old 5.5vw the label wanted exactly the
       232px the pill had inside its padding on a 360px phone, and lost by a
       fraction of a pixel — it came out as two lines of gold. Two changes, both
       needed: 5vw for about 9% of slack, and the side padding down a step, which
       is worth 16px of line at every width and is what keeps the floor usable on
       a 320px screen. The desktop block puts a much wider padding back. */
    font-size: clamp( 1rem, 5vw, 2.5rem );
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    padding: var(--mmd-space-3) var(--mmd-space-6);
}
/* (0,2,0), because .mmd-btn--primary:hover repaints the label white — which on
   gold is very nearly invisible. Same reason as the shows button. */
.mmd-rn-hero-cta .mmd-rn-hero-cta__btn:hover {
    color: var(--mmd-rn-ink);
    opacity: 0.9;
}
/* The tagline used to pull up onto the hem itself. The button is in that place
   now, so it butts the button instead — otherwise it climbs over it. (0,4,0),
   over the (0,3,0) rule in the desktop block that put it there. */
.mmd-page-private-events .mmd-main > .mmd-rn-hero-cta + .mmd-home-tagline {
    margin-top: 0;
}

/* -- Tagline -----------------------------------------------------------------
   WHITE-ON-WHITE without this. On the homepage the band is transparent with
   white type because it sits over the cast photograph inside .mmd-rn-dusk.
   There is no photograph behind it here — the comp puts it on a white sheet in
   black type, with the gold "Dying" becoming red. All three have to be
   restated or the copy simply is not there.
   -------------------------------------------------------------------------- */
.mmd-page-private-events .mmd-home-tagline {
    background: var(--mmd-rn-white);
    margin-inline: calc( -1 * var(--mmd-gutter) );
    padding: var(--mmd-space-10) var(--mmd-gutter) var(--mmd-space-6);
    text-align: center;
}
.mmd-page-private-events .mmd-home-tagline__text {
    color: var(--mmd-rn-ink);
    font-size: clamp( 1.25rem, 5.5vw, 1.875rem );
}
.mmd-page-private-events .mmd-home-tagline__text strong {
    color: var(--mmd-accent);
    font-style: normal;
}

/* -- Hero --------------------------------------------------------------------
   The brush banner and the ransom lettering arrive for free from the shared
   classes. Only the case differs: the homepage headline is set in caps, this
   one is title case in the comp.

   The WEIGHT is no longer part of that difference. This used to sit at 400,
   which was readable when the face was condensed and became a thin, wide line
   the moment it was not — see the note on .mmd-hero-overlay__h1. Title case
   stays; the weight matches every other hero on the site.
   -------------------------------------------------------------------------- */
.mmd-page-private-events .mmd-hero-overlay__h1 {
    text-transform: none;
    font-weight: 800;
}

/* -- About -------------------------------------------------------------------
   A white sheet: intro copy in black with the credential phrase in red, a
   red-framed photograph, a two-column block on red, then the lead-in line.
   -------------------------------------------------------------------------- */
.mmd-pe-about {
    background: var(--mmd-rn-white);
    margin-inline: calc( -1 * var(--mmd-gutter) );
    padding: 0 var(--mmd-gutter) var(--mmd-space-10);
    text-align: center;
}
.mmd-pe-about__photo {
    display: block;
    width: 100%;
    /* The only bordered photograph in the design, which is why the rule sits on
       this one element rather than on pictures generally. */
    border: 3px solid var(--mmd-accent);
    border-radius: 0;
    margin-bottom: var(--mmd-space-8);
}
.mmd-pe-about__intro p,
.mmd-pe-about__col-text,
.mmd-pe-about__lead-in {
    font-family: var(--mmd-font-sans);
    font-size: clamp( 0.9rem, 3.6vw, 1.05rem );
    line-height: 1.55;
    color: var(--mmd-rn-ink);
}
/* "The Experts in Mystery Entertainment" and "Fill out the form below" — the
   parent wraps both in <em>; the comp sets them red and bold, not italic. */
.mmd-pe-about__intro em,
.mmd-pe-about__lead-in em {
    color: var(--mmd-accent);
    font-style: normal;
    font-weight: 700;
}
.mmd-pe-about__intro strong { color: var(--mmd-rn-ink); }
.mmd-pe-about__lead-in {
    max-width: 46rem;
    margin-inline: auto;
    padding-top: var(--mmd-space-6);
}

/* POSTCARD_red.webp is a finished composition — torn paper frame, red field and
   the detective all flattened into one file — so it is used whole, at its own
   aspect, full width. The copy is laid over its left half, which is the clear
   red the composition leaves for exactly that.

   No flex, no background: the block is just the picture with type on it. */
.mmd-pe-about__twocol {
    position: relative;
    display: block;
    background: none;
    margin-inline: calc( -1 * var(--mmd-gutter) );
    text-align: left;
}
/* THREE PARENT PROPERTIES HAVE TO BE NAMED HERE, and leaving them out is what
   made this block wrong in three different ways at once. The parent styles this
   photograph as a small portrait thumbnail beside the copy:

       aspect-ratio: 3 / 4    forced a 500px-tall box instead of the file's own
                              231px — the picture rendered twice the size it
                              should, which is what read as "too big"
       object-fit: cover      cropped that box from the CENTRE, so the woman sat
                              dead centre and the clear red she is meant to
                              stand beside was cut off both sides
       border: 3px solid      the red frame

   None of them is wrong for the parent's design; all three are wrong for a
   full-width composition. Overriding width and height alone left every one of
   them in force. */
.mmd-pe-about__col-photo {
    content: url( 'assets/image/bright-redesign/Private/POSTCARD_red.webp' );
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    /* CROPPED BOTH SIDES — and cropping the LEFT is what buys back the right.

       The file's clear red runs x=90 to x=470 of 1600, behind a torn paper edge
       occupying the first 90px. An earlier pass anchored hard left, which meant
       paying for that paper edge twice: it ate screen width the copy could have
       used, and the picture had to be scaled up further to push the red to half
       the viewport, which in turn cut deeper into the figure on the right.

       Discarding the left ~92px changes the sum. object-position: 15% lands the
       box's left edge just past the paper, so the red starts at the screen edge
       instead of 90 source px into it, and the whole composition can be smaller.

       WHY 15% HOLDS AT EVERY WIDTH. With a square box the scale is W/984, the
       horizontal overflow is 0.626W, and the offset needed is 90 x scale, so the
       percentage is 90/984 / 0.626 = 14.6% — the W cancels. It is a constant,
       not a value tuned for one phone.

       THE TRADE, measured: the red now reaches ~38% of the screen rather than
       50%, and in exchange the figure survives to source x≈1076 instead of 937 —
       about 59% across her body rather than 45% — and the box is square rather
       than 1.05:1. Less crop, less height, slightly narrower red. The right-hand
       paper edge is still cropped away; the frame reads on three sides. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 15% center;
    border: none;
    border-radius: 0;
    margin: 0;
}
/* Over the left half. Absolute so it contributes no height — the picture alone
   sizes the block, which is what keeps the type on the red instead of stretching
   the composition to fit the copy.

   The type scales with the viewport because the box it has to stay inside is a
   fraction of the picture, and the picture is a fraction of the screen. A flat
   size overflows the red on a narrow phone. */
.mmd-pe-about__col-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    /* Extra on the left so the first character clears the torn paper edge baked
       into the file rather than sitting on it. */
    padding: var(--mmd-space-3) var(--mmd-space-2) var(--mmd-space-3) var(--mmd-space-6);
    margin: 0;
    color: var(--mmd-rn-white);
    font-size: clamp( 0.6rem, 2.6vw, 0.9rem );
    line-height: 1.45;
}

/* -- Occasions ---------------------------------------------------------------
   The cards ARE the homepage's story panels, so the colours, the absolute
   cut-out and the panel depth all arrive already done — the fifth colour was
   added up in that block. What is local: the heading, and the copy column.
   Private Events uses its own .mmd-pe-note__text div rather than
   .mmd-home-story__text, so none of the homepage's column sizing reaches it and
   it has to be restated here.
   -------------------------------------------------------------------------- */
.mmd-pe-occasions {
    background: var(--mmd-rn-black);
    margin-inline: calc( -1 * var(--mmd-gutter) );
    padding: var(--mmd-space-10) 0;
}
.mmd-pe-occasions__header h2 {
    font-family: var(--mmd-font-display);
    font-size: clamp( 1.5rem, 6.5vw, 2.25rem );
    font-weight: 400;
    line-height: 1.35;
    color: var(--mmd-rn-white);
    text-align: center;
    margin: 0 0 var(--mmd-space-8);
    padding-inline: var(--mmd-gutter);
}
.mmd-pe-occasions__intro {
    font-family: var(--mmd-font-sans);
    color: var(--mmd-rn-white);
    text-align: center;
    padding-inline: var(--mmd-gutter);
}
/* The parent tilts each occasion prop by its index (--r0 … --r4) because they
   were small objects scattered over a notebook page. These are full cast
   photographs now; a tilt reads as a mistake. */
.mmd-pe-note__prop { transform: none; }

/* THE PHOTO WAS EATING THE FIRST WORDS OF EVERY LINE. Two causes, both needing
   naming at the parent's own specificity:

   1. The parent bleeds these props 40px off the edge of its notebook page:

        .mmd-pe-note .mmd-home-story__row:not(…--reverse) .mmd-home-story__prop
            { margin-left: calc( -1 * var(--mmd-space-10) ); }

      That is (0,4,0) — four class-equivalents, counting the :not() argument —
      so the `margin: 0` in my (0,1,0) prop rule never touched it. The bleed is
      right for a scattered object on paper and wrong for a photograph that
      fills half a colour panel.

   2. The prop is absolutely positioned here, and positioned elements paint
      above static ones. So wherever it did overhang, it covered the copy
      rather than sitting behind it — the text was not overflowing, it was
      being painted over.

   Both are answered: margins zeroed at matching specificity, and the copy given
   its own stacking position so it cannot be covered again by a later change. */
.mmd-pe-note .mmd-home-story__row:not( .mmd-home-story__row--reverse ) .mmd-home-story__prop,
.mmd-pe-note .mmd-home-story__row--reverse .mmd-home-story__prop {
    margin-left: 0;
    margin-right: 0;
}

/* WIDE, AND NEVER CROPPED. These are groups of two to four performers, not
   single cut-outs, so any crop loses a person — which is what "too tight" was.

   `contain` IS WHAT FIXES THE CROP — not the box width. Under `cover` a 46% box
   against a ~195px panel is 0.88:1 while these photographs run 1.28:1 to 1.51:1,
   so the sides were trimmed hard and most of the group went with them. `contain`
   scales the whole picture to fit instead, so nobody is ever cut off.

   The width went 46% → 70% → 48% → 62% chasing a "centred" look that was never
   about width at all: the homepage's `left: 20%` inset was leaking onto these
   rows through the shared .mmd-home-story__row class and pushing every left-hand
   photograph a fifth of the way into its panel. That is fixed at the rule above.
   With the box actually starting at the panel edge, 62% is simply how large the
   group can be before it runs under too much of the copy.

   `contain` costs nothing here because the photographs are transparent PNGs on
   a flat colour panel: any slack in the box is just more panel.

   The copy is allowed to sit over it, as agreed. The text carries z-index: 1
   further up, so it always reads on top.

   Width restated at (0,2,0): the parent sets .mmd-pe-note__prop to 56%, a
   single class of the same weight as .mmd-home-story__prop, so which one won
   came down to source order alone — too fragile for the value that decides
   whether a performer is in frame. */
.mmd-pe-note .mmd-pe-note__prop {
    width: 62%;
    max-width: 62%;
    object-fit: contain;
}

/* Alternating, and hard to the panel's OUTER edge — first left, next right, and
   so on. `bottom` rather than `top` stands the group on the panel floor.

   This only reads correctly because the sources were cropped to their content:
   bday-dynamite carried 14% transparent margin on its left and holidayparty 30%
   on its right, so "align left" was aligning empty space to the edge and the
   performers still floated inward. */
.mmd-pe-note .mmd-home-story__row:not( .mmd-home-story__row--reverse ) .mmd-pe-note__prop { object-position: left bottom; }
.mmd-pe-note .mmd-home-story__row--reverse .mmd-pe-note__prop { object-position: right bottom; }
.mmd-pe-note .mmd-pe-note__text {
    position: relative;
    z-index: 1;
}

/* THE WHITE CARD THE PANELS SIT IN.

   The parent dresses this element as a notebook page: paper-white fill, a 20px
   oxblood frame and space-6 of padding all round. That frame is the red border,
   and that padding is why the colour blocks stopped short of the edges. Only the
   border needed naming — background, radius and padding were already answered by
   the .mmd-home-story__paper rule further up, which shares this element.

   Vertical padding only: it becomes the white band above the first panel and
   below the last, while the colour blocks run the full width between them. */
.mmd-pe-note__paper {
    background: var(--mmd-rn-white);
    border: none;
    border-radius: var(--mmd-radius-xl);
    padding: var(--mmd-space-6) 0;
    max-width: none;
    margin-inline: 0;
}

/* The parent top-aligns these rows; the design centres the copy against a
   full-height photograph. (0,2,0) to match its selector. */
.mmd-pe-note .mmd-home-story__row { align-items: center; }

/* WHY THE COPY WAS COVERING THE PHOTOGRAPH.

   The parent gives it `flex: 1` — which is flex-grow:1, flex-shrink:1 and
   crucially flex-basis:0%. On a flex item the basis beats `width` outright, so
   my `width: 54%` was inert and the copy grew to fill the entire panel. With the
   photograph absolutely positioned underneath it, the text simply ran across it.

   `flex: 0 0 54%` states the basis instead of fighting it. */
.mmd-pe-note .mmd-pe-note__text {
    flex: 0 0 54%;
    max-width: 54%;
}

.mmd-pe-note__text {
    width: 54%;
    align-self: center;
    padding: var(--mmd-space-4);
    color: var(--mmd-rn-white);
}
.mmd-pe-note__text h3 {
    font-family: var(--mmd-font-sans);
    font-size: clamp( 0.95rem, 3.8vw, 1.15rem );
    font-weight: 700;
    font-style: italic;
    color: var(--mmd-rn-white);
    margin: 0 0 var(--mmd-space-2);
}
.mmd-pe-note__text p {
    font-family: var(--mmd-font-sans);
    font-size: clamp( 0.7rem, 3vw, 0.875rem );
    line-height: 1.45;
    color: var(--mmd-rn-white);
    margin: 0;
}
.mmd-home-story__row:not(.mmd-home-story__row--reverse) .mmd-pe-note__text {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}
.mmd-home-story__row--reverse .mmd-pe-note__text {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

/* The occasion cut-outs, MATCHED ON THE PROP FILENAME rather than row position.

   Position was wrong, and wrong in a way that shipped a caption/photo mismatch:
   the comp orders these Birthday, Corporate, Holiday, Bachelorette, Fundraiser,
   while this network's cards come out Birthday, Corporate, Bachelorette,
   Holiday, Fundraiser. Cards 3 and 4 are transposed, so the Santa photograph
   appeared under a "Bachelorette Party" heading.

   The parent's bundled prop file IS the occasion's identity — cake means
   birthday, rings means bachelorette — and it travels with the card whatever
   order the repeater puts them in. An attribute selector on the src reads that
   identity directly, so this now holds for any city, in any order.

   A city that uploads its OWN prop image matches none of these and keeps its
   image, which is the correct outcome rather than a gap. */
.mmd-pe-note__prop[src$="cake.webp"]    { content: url( 'assets/image/bright-redesign/Private/bday-dynamite-02.webp' ); }
.mmd-pe-note__prop[src$="drinks.webp"]  { content: url( 'assets/image/bright-redesign/Private/officedeath.webp'      ); }
.mmd-pe-note__prop[src$="rings.webp"]   { content: url( 'assets/image/bright-redesign/Private/bachlorette.webp'      ); }
.mmd-pe-note__prop[src$="pumpkin.webp"] { content: url( 'assets/image/bright-redesign/Private/holidayparty.webp'     ); }
.mmd-pe-note__prop[src$="piggy.webp"]   { content: url( 'assets/image/bright-redesign/Private/fundraising.webp'      ); }


/* =============================================================================
   LEAD FORM
   =============================================================================
   The comp's card: a purple panel holding a gold-edged white sheet, with the
   butler, the marker sign-off and the pricing button grouped at the foot.

   The MARKUP is a registered template variant, not a fork — see
   template-parts/lead-forms/ransom.php and the registry note in functions.php.
   The field grouping the comp draws (name pair, email, phone/zip pair, clues)
   is already what the parent emits, so almost everything below is paint.
   ============================================================================= */
/* PURPLE TO THE EDGES — and `border: none` is the whole fix, not the margin.

   The parent frames this section with `border: 20px solid var(--mmd-ox-700)`,
   a chunky oxblood surround from its own comp. Setting a purple background
   without clearing that border left the oxblood drawn around the purple, which
   is the red edge; its border-radius then let the page's black through at the
   four corners. Both were the parent's, both had to be named.

   The panel still spans the full width, but its CORNERS are rounded, so two
   rounded cards nest here: the purple, and the gold-edged white inside it. XL
   rather than the white card's LG on purpose — an outer corner has to be wider
   than the corner it wraps, or the gap between them pinches shut at the curve
   and the two read as one thick edge. */
.mmd-lead-form.mmd-rn-form {
    background: var(--mmd-rn-purple);
    border: none;
    border-radius: var(--mmd-radius-xl);
    margin-inline: calc( -1 * var(--mmd-gutter) );
    padding: var(--mmd-space-6) var(--mmd-space-4);
}
.mmd-rn-form .mmd-lead-form__inner {
    background: var(--mmd-rn-white);
    border: 4px solid var(--mmd-rn-gold);
    border-radius: var(--mmd-radius-lg);
    padding: var(--mmd-space-8) var(--mmd-space-4) var(--mmd-space-4);
}

/* THE WHITE SHEET RUNS INTO THE PURPLE. On Private Events the About section
   sits directly above this panel and the two are one card in the design: white
   paper with the purple form set into its foot. The parent's 32px section gap
   was drawing a black stripe across it.

   Pulled up by the panel's own corner radius rather than merely to zero. At
   zero the two boxes butt, and the purple's rounded top corners leave two black
   notches where the page shows through the curve — the same seam the Since-2002
   band had. Sliding it up by the radius puts those curves ON the white, which
   is what a rounded panel set into a sheet looks like. */
.mmd-page-private-events .mmd-main > .mmd-pe-about + .mmd-lead-form.mmd-rn-form {
    margin-top: calc( -1 * var(--mmd-radius-xl) );
}

.mmd-rn-form .mmd-lead-form__inner > h2 {
    font-family: var(--mmd-font-display);
    font-size: clamp( 1.25rem, 5.5vw, 1.75rem );
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    color: var(--mmd-rn-ink);
    margin: 0 0 var(--mmd-space-6);
}
/* "DYING" — red, and underlined by the designer's marker stroke rather than a
   CSS border, which would draw a straight rule where the comp has a drawn one.
   Sized in em so it tracks the heading at any width; padding-bottom keeps the
   stroke clear of the descenders. */
.mmd-rn-form .mmd-lead-form__inner > h2 em {
    color: var(--mmd-accent);
    font-style: normal;
    background: url( 'assets/image/bright-redesign/Form/Underline.svg' ) center bottom / 100% 0.22em no-repeat;
    padding-bottom: 0.18em;
}
/* The subheading is blank by default on this design (see the content filter).
   :empty hides the element only while it stays that way, so a city that types
   one gets it back without a code change. */
.mmd-rn-form .mmd-lead-form__inner > p:empty { display: none; }

/* -- Fields ---------------------------------------------------------------- */
.mmd-rn-form .mmd-form__field input,
.mmd-rn-form .mmd-form__field textarea {
    background: var(--mmd-rn-white);
    border: 1px solid #C9C2D4;
    border-radius: var(--mmd-radius-sm);
    color: var(--mmd-rn-ink);
    font-family: var(--mmd-font-sans);
}
/* The clues box is the one gold field in the comp — it is the optional one, and
   the colour is what makes people notice it is there. */
.mmd-rn-form .mmd-form__field--clues textarea {
    background: var(--mmd-rn-gold);
    border-color: var(--mmd-rn-gold);
    min-height: 7rem;
}
.mmd-rn-form .mmd-form__field--clues textarea::placeholder { color: var(--mmd-rn-ink); opacity: 0.75; }

/* -- Opt-ins ----------------------------------------------------------------
   Below the button now (see the template), so they get the full width back —
   the 60% column existed only to leave room for the butler beside them, and he
   no longer passes through here.

   Small and tight, as asked. The clamp still carries a floor, now 10px: this is
   marketing-consent language, and there is a point below which shrinking the
   text someone is agreeing to stops being a layout choice. 10px holds from
   320px up rather than scaling away on the narrowest phones.
   -------------------------------------------------------------------------- */
.mmd-rn-form .mmd-form__field--checkbox {
    max-width: none;
    margin-bottom: var(--mmd-space-2);
    gap: var(--mmd-space-2);
}
.mmd-rn-form .mmd-form__field--checkbox label {
    font-size: clamp( 0.625rem, 2.4vw, 0.75rem );
    line-height: 1.3;
}

/* -- The sign-off group ----------------------------------------------------- */
/* Button, marker line and butler positioned against each other rather than
   against the card, so they hold together when the fields above reflow. */
/* ONE grid cell, three items stacked in it. The button and the butler overlap in
   the comp, which columns cannot express — they would sit side by side and never
   touch. Everything is placed in row 1 / column 1 and positioned with
   justify-self, so the two can cross. */
.mmd-rn-form__close {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    margin-top: var(--mmd-space-6);
    min-height: 12rem;
    /* Declared on the GROUP, not the button, so the sign-off can read it too —
       it has to indent clear of the mark that hangs below the button's
       bottom-left corner, and custom properties inherit down, not sideways
       between siblings. */
    --rn-mark: clamp( 2.75rem, 13.5vw, 4.5rem );
}
/* The butler. Decorative (alt="", aria-hidden in the template) — the claim this
   section makes is in the heading and the button, both real text. */
/* Larger, and cropped at the waist rather than shown full-length.

   Two changes together. The asset is now content-tight — 14% of its width was
   transparent margin, so at the same box he renders 16% bigger for free — and
   `cover` against a 3/4 box discards everything below roughly his waist, which
   is where the comp cuts him.

   The source is 0.364:1 (full-length) against a 0.75 box, so the scale is
   width-driven and only the bottom is trimmed; nothing is lost off his sides. */
.mmd-rn-form__figure {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    /* A SMALL LIFT NOW. With the opt-ins moved below the button, this group sits
       directly under the clues field, so he only has to clear his own top edge
       to overlap the form — not a whole paragraph of consent copy. That is what
       makes the number stable: it no longer has to be re-tuned whenever the
       consent text or its column changes length.

       The frame is width-driven against a 0.364:1 source, so the aspect ratio is
       what sets how far down his body the crop falls: 5/8 showed 58% of him (to
       the hip), 5/7 shows 51% (to the waist). */
    width: clamp( 140px, 44vw, 245px );
    aspect-ratio: 5 / 7;
    height: auto;
    object-fit: cover;
    object-position: center top;
    /* LIFTED OUT OF THE GROUP so he rises past the opt-ins and overlaps the
       clues field, as drawn. A negative top margin rather than absolute
       positioning: he keeps his place in the grid horizontally, so the button
       and the sign-off still lay out against him, and only the vertical offset
       is borrowed. The opt-in column is capped at 60% above, which is the space
       he comes up beside — the two numbers are a pair.

       vw-based so the overlap stays proportional; the rem bounds stop him
       climbing into the fields on a very narrow or very wide screen. */
    /* Up, and only just out to the right.

       The right margin was pulling him a full 26px past the card's inner
       padding, which put his shoulder over the gold border and out into the
       purple. Cut to a token amount: enough that he touches the edge rather than
       floating inside it, not enough to escape the card.

       The lift is larger than it looks because he is bottom-aligned — shrinking
       him drops his own top edge, so part of this only holds him where he was. */
    margin: calc( -1 * clamp( 5rem, 24vw, 9rem ) )
            calc( -1 * clamp( 0.25rem, 1.5vw, 0.75rem ) )
            0 0;
    position: relative;
    z-index: 1;
}
/* The pricing button: a red oval overlapping the butler, with the designer's
   excite marks behind it. The marks are a background on the BUTTON'S CELL, not
   on the button, so they sit outside its edge the way the comp draws them. */
/* SCOPED TO (0,2,0) — everything below was previously lost to the parent.

   main.css ~1288 styles `.mmd-lead-form .mmd-btn` at (0,2,0): near-black
   (--mmd-ox-900), cream text, a 4px radius, text-sm, text-transform:none, and a
   masked paper-plane glyph on ::after. Its own comment explains why it is scoped
   that way — all six lead-form templates render a bare .mmd-btn, so a modifier
   class would have restyled only one of them.

   That reasoning is sound, and the consequence for a seventh template is that a
   single-class override reaches none of it. `.mmd-rn-form .mmd-rn-form__btn`
   ties at (0,2,0) and wins on source order; the glyph needs (0,2,1) to match
   the pseudo-element, which the ::after rule below has. */
.mmd-rn-form .mmd-rn-form__btn {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--mmd-accent);
    color: var(--mmd-rn-white);
    font-family: var(--mmd-font-sans);
    font-size: clamp( 1.125rem, 5vw, 1.625rem );
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-align: center;
    border: none;
    /* Rounder — close to a stadium on the short axis, but still a rectangle
       rather than the parent's 4px or a true pill. */
    border-radius: 3rem;
    /* Drop shadow to the bottom-left, kept TIGHT on purpose. The excite marks
       overhang the same two corners, and a wide blur spread far enough to wash
       over them and grey them off. A short offset with a small blur keeps the
       lift off the white card without reaching the marks. */
    box-shadow: -0.2rem 0.2rem 0.35rem rgba( 0, 0, 0, 0.2 );
    /* Tighter block padding. The label is three lines, so the box was tall
       enough that a 3rem radius read as a mild rounding; taking the vertical
       padding down to space-3 shortens it toward the radius and the curve
       becomes the shape of the thing rather than a detail on it. */
    padding: var(--mmd-space-3) var(--mmd-space-4);
    /* Wider, so its right edge runs behind the butler rather than stopping short
       of him — the comp has them clearly overlapping, with the button in front. */
    width: clamp( 160px, 58%, 250px );
    /* Nudged up off centre. The cell is sized by the figure, so centring alone
       sat the button lower than the comp puts it. */
    margin: calc( -1 * clamp( 2rem, 9vw, 3.5rem ) ) 0 0;
    cursor: pointer;
}
.mmd-rn-form .mmd-rn-form__btn:hover {
    background: var(--mmd-accent);
    color: var(--mmd-rn-white);
    opacity: 0.9;
}
/* THE EXCITE MARKS, PINNED TO THE BUTTON ITSELF.

   They kept drifting because they were a background on the GROUP, positioned in
   percentages — so every time the group's height changed (the butler moving, the
   opt-ins relocating) the percentages resolved somewhere new. Hanging them off
   the button as absolutely-positioned pseudo-elements means they travel with it
   and cannot drift again.

   Absolute positioning is also what lets them sit OUTSIDE the button: a
   border-radius clips an element's own background, but not a positioned
   pseudo-element, so they can overhang the corners the way the comp draws.

   ::after was the parent's masked paper-plane glyph — it is not merely hidden
   here but rebuilt, so `mask: none` has to be stated or the glyph's mask would
   still be cutting the mark's shape. */
.mmd-rn-form .mmd-rn-form__btn::before,
.mmd-rn-form .mmd-rn-form__btn::after {
    content: '';
    position: absolute;
    display: block;
    width: var(--rn-mark);
    height: var(--rn-mark);
    -webkit-mask: none;
    mask: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}
/* Above-right. Excite_marks2 is the one that belongs here — the numbering does
   NOT match the positions, so do not "fix" these back into filename order. */
.mmd-rn-form .mmd-rn-form__btn::before {
    /* Tight to the corner: bottom edge exactly on the button's top edge (no
       gap), and only a tenth of its width past the right. Still outside the
       button on both axes — the -1 multiplier is what guarantees that, whatever
       the clamp resolves to. */
    top: calc( -1 * var(--rn-mark) );
    right: calc( -0.1 * var(--rn-mark) );
    background-image: url( 'assets/image/bright-redesign/Form/Excite_marks2.svg' );
}
/* Below-left. */
.mmd-rn-form .mmd-rn-form__btn::after {
    bottom: calc( -1 * var(--rn-mark) );
    /* A tenth, not a half. The button sits at the group's left edge and the card
       only has 16px of inner padding, so a large overhang here puts the mark
       outside the gold border. */
    left: calc( -0.1 * var(--rn-mark) );
    background-image: url( 'assets/image/bright-redesign/Form/Excite_marks.svg' );
}
/* "Let's Plan a KILLER Event!" — the marker face the parent already loads. */
.mmd-rn-form__sign {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    position: relative;
    z-index: 3;
    font-family: var(--mmd-font-marker);
    font-size: clamp( 0.75rem, 3.2vw, 1rem );
    line-height: 1.3;
    color: var(--mmd-rn-ink);
    /* Indented clear of the mark hanging off the button's bottom-left corner —
       that mark is what was striking through "KILLER".

       The number is derived, not picked, and it MOVES WITH THE MARK'S OFFSET:
       the mark starts at -0.1 of its own width and is one wide, so its right
       edge now lands at 0.9 × --rn-mark. The indent has to exceed that. When the
       overhang was -0.25 this was 0.9; pulling the mark tighter pushed its right
       edge outward, so the indent went up too. Change one and re-check the
       other. */
    margin: 0 0 0 calc( 1.05 * var(--rn-mark) );
    max-width: 9rem;
}
.mmd-rn-form__sign em {
    display: block;
    color: var(--mmd-accent);
    font-style: normal;
    background: url( 'assets/image/bright-redesign/Form/Underline.svg' ) center bottom / 100% 0.2em no-repeat;
    padding-bottom: 0.16em;
}

.mmd-rn-form .mmd-form__legal {
    text-align: center;
    color: var(--mmd-rn-ink);
    font-size: var(--mmd-text-xs);
}
.mmd-rn-form .mmd-form__legal a { color: var(--mmd-accent); }


/* =============================================================================
   POPUPS
   =============================================================================
   Every popup on the site, whichever of the two places it comes from:

     footer.php            the always-on Free Quote modal, #mmd-popup-quote.
                           Its colours are hardcoded in the template.
     template-parts/
       popup.php           the admin Popup Settings system, #mmd-popup-N. Its
                           colours come from that popup's own colour pickers,
                           falling back to the 2026 palette in PHP.

   They were arriving in two different designs — the quote modal in the old
   oxblood-and-cream, an admin popup in whatever a city had picked — which is
   the whole reason this block exists. The design below is the lead form's, so
   a visitor who opens a popup sees the form they would have scrolled to.

   SIX OF THESE VALUES ARE NOT SET HERE AT ALL — they are printed as INLINE
   style attributes by the two templates above:

       .mmd-popup__overlay   background-color, opacity
       .mmd-popup__modal     background
       .mmd-popup__heading   color
       .mmd-popup__submit    background, color

   An inline style beats every selector in a stylesheet no matter how specific,
   so this file cannot reach them without !important — and !important would
   then lock the colours for good. They are filtered in PHP instead:
   mmd_popup_style() in the parent resolves them, and
   mmd_ransom_popup_style() in this theme's functions.php replaces them. That
   is what makes "regardless of where they come from" true while leaving a way
   to change any of them later.

   The declarations below are still written, without !important. They are the
   fallback for a parent that predates the filter, and for any popup markup that
   ever prints one of these without an inline style — which is what the Free
   Quote modal's submit button did until it was routed through the filter too.

   max-width is deliberately NOT touched. It is per-popup layout rather than
   paint, and the two variants want different measures.
   ============================================================================= */

/* The page behind goes black rather than oxblood, at the depth this skin uses
   for anything that sits over the page. Kept in step with the same two values
   in mmd_ransom_popup_style(). */
.mmd-popup__overlay {
    background-color: var(--mmd-rn-black);
    opacity: 0.85;
}

/* The modal becomes the lead form's sheet: white, gold-edged, rounded. The
   border and the radius are this file's alone — no template writes them. */
.mmd-popup__modal {
    background: var(--mmd-rn-white);
    border: 4px solid var(--mmd-rn-gold);
    border-radius: var(--mmd-radius-lg);
}

.mmd-popup__close {
    color: var(--mmd-rn-ink);
    font-family: var(--mmd-font-sans);
}
.mmd-popup__close:hover { color: var(--mmd-accent); }

/* Heading and the one red word, matching the form's h2 exactly — including the
   designer's marker stroke under the emphasis rather than a CSS underline,
   which would draw a straight rule where the comp has a drawn one. The popup
   markup names that word .mmd-popup__highlight as well as <em>, so both hooks
   are answered. */
.mmd-popup__heading {
    font-family: var(--mmd-font-display);
    font-size: clamp( 1.25rem, 5.5vw, 1.75rem );
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    color: var(--mmd-rn-ink);
}
.mmd-popup__heading em,
.mmd-popup__highlight {
    color: var(--mmd-accent);
    font-style: normal;
    background: url( 'assets/image/bright-redesign/Form/Underline.svg' ) center bottom / 100% 0.22em no-repeat;
    padding-bottom: 0.18em;
}
.mmd-popup__subheading { font-family: var(--mmd-font-sans); color: var(--mmd-rn-ink); }

/* Fields, same as the form's. */
.mmd-popup__form .mmd-form__field input,
.mmd-popup__form .mmd-form__field textarea {
    background: var(--mmd-rn-white);
    border: 1px solid #C9C2D4;
    border-radius: var(--mmd-radius-sm);
    color: var(--mmd-rn-ink);
    font-family: var(--mmd-font-sans);
}
/* The details box is the form's one gold field. The popup markup has no
   --clues modifier on it, so it is reached as the only textarea in the form. */
.mmd-popup__form .mmd-form__field textarea {
    background: var(--mmd-rn-gold);
    border-color: var(--mmd-rn-gold);
}
.mmd-popup__form .mmd-form__field textarea::placeholder { color: var(--mmd-rn-ink); opacity: 0.75; }

/* The submit is the form's red pill. */
.mmd-popup__submit {
    background: var(--mmd-accent);
    color: var(--mmd-rn-white);
    font-family: var(--mmd-font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    border: none;
    border-radius: 3rem;
}

/* The marker sign-off under the button. The parent already sets the face; this
   is the colour and the one emphasised word. */
.mmd-popup__tagline { color: var(--mmd-rn-ink); }
.mmd-popup__tagline em,
.mmd-popup__tagline .mmd-popup__highlight { color: var(--mmd-accent); background: none; padding-bottom: 0; }

/* Consent copy, at the size the form uses for it. */
.mmd-popup__form .mmd-form__field--checkbox label,
.mmd-popup__form .mmd-form__legal { color: var(--mmd-rn-ink); }
.mmd-popup__form .mmd-form__legal a { color: var(--mmd-accent); }


/* -- Why Us / We Bring the Mystery to You ------------------------------------
   A purple brush banner, then colour panels on a white sheet, closing on the
   gold "Since 2002" band.

   TWO SECTIONS, ONE COLOUR CYCLE. Both [mmd_pe_whyus] and [mmd_pe_you] emit
   `<section class="mmd-pe-features">` — the first carries the header plus the
   why-us cards, the second a single "We Bring the Mystery to You" card and the
   Since-2002 block. So the red/green/navy run has to continue across a section
   boundary, which nth-of-type cannot express: in the first section the header
   is also a div, so the cards are div 2 and 3, while in the second the card is
   div 1.

   Sibling chains off the header handle the first section, and :first-child
   catches the second — a feature with no header before it is the "You" one.
   Those two never match the same element, so their differing specificity does
   not matter.
   -------------------------------------------------------------------------- */
/* TRANSPARENT, so the page's black shows between the banner and the panels.
   The white "card" is built from the panels' own borders instead — see below.
   An earlier version made this element white, which meant the gap under the
   banner came out white too and the card had no top edge to round. */
.mmd-pe-features {
    background: transparent;
    margin-inline: calc( -1 * var(--mmd-gutter) );
    max-width: none;
    padding: 0;
    border-radius: 0;
}
/* THE BLACK BAND BETWEEN THE GREEN AND NAVY PANELS was the section gap. Those
   two panels live in different <section>s, and the parent puts
   `margin-top: var(--mmd-section-gap)` between every stacked section — so the
   white run built from the panels' borders was being cut in half by 32px of
   page black exactly where the two sections meet.

   Zeroed only between two adjacent feature sections, so the gap above the
   purple banner (where black IS wanted) is untouched. */
.mmd-main > .mmd-pe-features + .mmd-pe-features { margin-top: 0; }

/* THE BRUSH IS THE BANNER, not a rule under it.

   purple_paint.webp is a 392x154 stroke whose character is entirely in its
   ragged top and bottom edges. Squeezed into the parent's 2.1rem rule element
   those edges scaled down to about 3px and the thing read as a flat bar — which
   is why the paint "wasn't there". Stretched across the whole banner the edges
   land at ~20px and do what they are for, giving the ragged top and bottom the
   comp draws in one element. */
.mmd-pe-features__header {
    background: url( 'assets/image/bright-redesign/Private/purple_paint.webp' ) center / 100% 100% no-repeat;
    text-align: center;
    padding: var(--mmd-space-10) var(--mmd-gutter);
    margin-bottom: var(--mmd-space-8);
}
/* The parent draws this as an oxblood chip; here it is type directly on the
   purple, so its own background has to go. */
.mmd-pe-features__eyebrow {
    background: none;
    color: var(--mmd-rn-white);
    font-family: var(--mmd-font-display);
    font-size: clamp( 1.5rem, 6.5vw, 2.25rem );
    font-weight: 400;
    padding: 0 0 var(--mmd-space-4);
    margin: 0;
}
/* Black on a white band that spans the purple, full-bleed inside the header's
   gutter. Upright, not the parent's italic. */
.mmd-pe-features__heading {
    background: var(--mmd-rn-white);
    color: var(--mmd-rn-ink);
    font-style: normal;
    font-weight: 700;
    margin: 0 calc( -1 * var(--mmd-gutter) );
    padding: var(--mmd-space-3) var(--mmd-gutter);
}
.mmd-pe-features__heading em { font-style: normal; }
/* The parent's flat oxblood bar. Redundant now the whole banner is the brush,
   and it would read as a second edge below the real one. */
.mmd-pe-features__rule { display: none; }

/* THE WHITE CARD IS MADE FROM THE PANELS' OWN BORDERS.

   The panels need to sit on a white sheet with rounded ends, but they are spread
   across two sibling <section>s ([mmd_pe_whyus] and [mmd_pe_you]) with no shared
   wrapper to paint — and no way to add one without composing both shortcodes.

   A white top and bottom border on each panel gives the same picture: the
   stripes between panels are two borders meeting, and border-radius rounds the
   OUTER edge of a border, so the first and last panels get the card's rounded
   ends for free. It also survives the section boundary, which a background on
   either section could not. */
.mmd-pe-feature {
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
    background: var(--mmd-rn-red);
    border-top: 12px solid var(--mmd-rn-white);
    border-bottom: 12px solid var(--mmd-rn-white);
}
/* First panel of the run — the one straight after the banner. Deeper white and
   rounded, so it reads as the top of a card rather than a stripe. */
.mmd-pe-features__header + .mmd-pe-feature {
    border-top-width: var(--mmd-space-8);
    border-top-left-radius: var(--mmd-radius-xl);
    border-top-right-radius: var(--mmd-radius-xl);
}
/* Last panel of the run. In the "You" section the card is the first child (no
   header precedes it), which is what identifies it.

   SQUARE, not rounded. The white below this panel runs straight into the gold
   "Since 2002" band — rounding it would leave two black notches at the corners
   where the page shows through the curve, which is exactly the seam that was
   there. The card's rounded end is at the TOP of the run only; the bottom is a
   join, not an edge.

   THIS BORDER IS THE WHITE BAND ABOVE THE GOLD, so its width is the lever for
   how much clean white shows there. The gold band slides 24px up onto it
   (--mmd-space-6, see .mmd-pe-since), so the visible white is this width minus
   that. The progression so far: space-8 left 8px, space-12 left 24px, and this
   leaves 48px — twice the last. Change one and the other is worth re-checking.

   Written as space-12 + space-6 rather than a raw 72px because the scale has no
   step there (it goes 12 → 16 → 24), and space-16 would have landed at 40px,
   short of double. Both terms are still scale values, so it moves with the
   spacing system rather than sitting outside it. */
.mmd-pe-feature:first-child {
    border-bottom-width: calc( var(--mmd-space-12) + var(--mmd-space-6) );
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.mmd-pe-features__header + .mmd-pe-feature + .mmd-pe-feature { background: var(--mmd-rn-green); }
.mmd-pe-features__header + .mmd-pe-feature + .mmd-pe-feature + .mmd-pe-feature { background: var(--mmd-rn-navy); }
.mmd-pe-feature:first-child { background: var(--mmd-rn-navy); }

.mmd-pe-feature__img {
    flex: 0 0 46%;
    max-width: 46%;
    /* The parent pins 3/4; here the picture fills the panel however deep the
       copy makes it. */
    aspect-ratio: auto;
    align-self: stretch;
    object-fit: cover;
    object-position: center;
}
.mmd-pe-feature__body,
.mmd-pe-feature--reverse .mmd-pe-feature__body,
.mmd-pe-feature:not( :has( .mmd-pe-feature__img ) ) .mmd-pe-feature__body {
    /* One padding for every variant — the parent splits this across three rules
       (including a :has() at (0,3,0)) to keep its gutter on the outer side. On a
       full-bleed colour panel the copy just needs even space. */
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    padding: var(--mmd-space-4);
}
.mmd-pe-feature__body h3 {
    color: var(--mmd-rn-white);
    font-family: var(--mmd-font-sans);
    font-weight: 700;
    font-style: italic;
    font-size: clamp( 0.95rem, 3.8vw, 1.15rem );
}
.mmd-pe-feature__body p {
    color: var(--mmd-rn-white);
    font-size: clamp( 0.7rem, 3vw, 0.875rem );
    line-height: 1.45;
}

/* "Since 2002" on the designer's gold brush stroke.

   IT OVERLAPS BOTH NEIGHBOURS, and that is the whole point of a brush edge. The
   stroke's top and bottom are ragged and transparent, so whatever sits behind
   them shows through — and with the band simply stacked between its neighbours,
   what showed through was the page's black. The edges read as a black fringe
   rather than paint laid over the white above and the photograph below.

   Negative margins slide it onto both: up onto the white the navy panel's
   border provides, down onto the Shark Tank still. `position: relative` with a
   z-index is what lets it paint over the photograph rather than under it —
   without it the later section wins on paint order. */
.mmd-pe-since {
    background: url( 'assets/image/bright-redesign/Private/Yellow_paint.webp' ) center / 100% 100% no-repeat;
    max-width: none;
    position: relative;
    z-index: 1;
    margin: calc( -1 * var(--mmd-space-6) ) 0 calc( -1 * var(--mmd-space-6) );
    padding: var(--mmd-space-10) var(--mmd-gutter);
}
/* The Shark Tank section has to butt against the gold for the overlap to land on
   the photograph — the parent's section gap would otherwise put 32px of black
   between them and the brush would hang over nothing. Private Events only; the
   homepage keeps its gap. */
.mmd-page-private-events .mmd-home-sharktank { margin-top: 0; }
.mmd-pe-since h3,
.mmd-pe-since p { color: var(--mmd-rn-ink); }
.mmd-pe-since h3 { font-family: var(--mmd-font-sans); font-weight: 700; font-style: italic; }
.mmd-pe-since em { font-style: italic; font-weight: 700; }


/* =============================================================================
   PUBLIC SHOWS — the empty state
   =============================================================================
   The flow when a city has no Eventbrite source: hero, "no shows scheduled",
   the venue-host form, the FAQ, then Shark Tank.

   The hero and Shark Tank need nothing here — both are shared components
   already skinned (the Shark Tank rules were written with this page's scope in
   them when Private Events was done, which is why it already renders).
   ============================================================================= */

/* THE PAGE RUNS ON WHITE BELOW THE HERO, unlike the homepage and Private
   Events. That is not a detail — the "no shows" panel is a BLACK card, and on
   this theme's black page it simply disappeared: a black card on a black page
   has no edges. Everything from the hero down sits on white here, which is what
   makes that card, the red venue panel and the FAQ read as separate objects. */
.mmd-page-public-shows .mmd-main {
    background: var(--mmd-rn-white);
}

/* Title case, as on Private Events. The homepage headline is the only one set
   in caps. Weight matches every other hero — see the note on the Private Events
   hero for why it is no longer 400. */
.mmd-page-public-shows .mmd-hero-overlay__h1 {
    text-transform: none;
    font-weight: 800;
}

/* THE HAND-TUNED TILE SIZE THAT USED TO LIVE HERE IS GONE, and this note is
   what it was for.

   "OFF BROADWAY" is eleven letters plus a word space, several of them wide
   glyphs, so at the tiles' usual 1.15em the run measured past the gutter and
   wrapped a lone "Y" onto a line of its own. The fix was a flat 0.85em on this
   one hero — a number found by eye, against one city name, in a face this theme
   no longer uses.

   ransom.js now measures every tiled word against the line it actually has and
   scales it only as far as it needs (see the shrink-to-fit block there, and
   --rn-fit in the .mmd-rn rule). That is strictly better than a fixed multiplier:
   it holds for a longer city, for a re-worded heading, at every breakpoint, and
   it stops shrinking the word on the pages where it already fitted. Re-adding a
   fixed font-size here would silently disable it — the script supplies a
   multiplier, and a hard size overwrites the calc() the multiplier lives in. */

/* -- "No shows scheduled" ---------------------------------------------------
   Black card with a gold rule, not the parent's deep-red one.
   -------------------------------------------------------------------------- */
.mmd-shows-none {
    background: var(--mmd-rn-black);
    color: var(--mmd-rn-white);
    border-radius: var(--mmd-radius-xl);
    /* Edge to edge. The gutter moves inside as padding, so the card spans the
       viewport while its copy keeps the same measure. */
    margin-inline: calc( -1 * var(--mmd-gutter) );
    padding: var(--mmd-space-10) var(--mmd-space-6);
    text-align: center;
}
.mmd-shows-none__heading {
    font-family: var(--mmd-font-sans);
    font-style: normal;
    font-weight: 400;
    color: var(--mmd-rn-white);
    /* The parent rules this off in translucent cream; the comp uses a solid
       gold hairline. */
    border-bottom: 2px solid var(--mmd-rn-gold);
}
.mmd-shows-none__body { color: var(--mmd-rn-white); }
.mmd-shows-none__body a { color: var(--mmd-rn-gold); }
.mmd-shows-none__btn {
    background: var(--mmd-accent);
    color: var(--mmd-rn-white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.mmd-shows-none__btn:hover { color: var(--mmd-rn-white); }

/* -- "Own a venue?" ---------------------------------------------------------
   Red card with outlined fields. The parent fills the inputs cream on oxblood;
   the comp draws them as white hairlines on the red.
   -------------------------------------------------------------------------- */
.mmd-shows-ownvenue {
    background: var(--mmd-accent);
    border-radius: var(--mmd-radius-xl);
    padding: var(--mmd-space-8) var(--mmd-space-6);
}
.mmd-shows-ownvenue__heading { color: var(--mmd-rn-white); }
.mmd-shows-ownvenue__body { color: var(--mmd-rn-white); }
/* (0,3,1) — the parent's rule for these inputs carries an attribute selector,
   so a plainer override would not reach it. Matched selector for selector. */
.mmd-shows-ownvenue .mmd-form__field input[type="text"],
.mmd-shows-ownvenue .mmd-form__field input[type="email"],
.mmd-shows-ownvenue .mmd-form__field input[type="tel"],
.mmd-shows-ownvenue .mmd-form__field textarea {
    background: transparent;
    border: 1px solid var(--mmd-rn-white);
    color: var(--mmd-rn-white);
}
.mmd-shows-ownvenue .mmd-form__field input::placeholder,
.mmd-shows-ownvenue .mmd-form__field textarea::placeholder {
    color: rgba( 255, 255, 255, 0.75 );
}
/* (0,2,0) to match the parent's `.mmd-shows-ownvenue .mmd-btn`. */
.mmd-shows-ownvenue .mmd-btn {
    background: var(--mmd-rn-black);
    color: var(--mmd-rn-white);
    border-radius: var(--mmd-radius-pill);
}
.mmd-shows-ownvenue .mmd-btn:hover { color: var(--mmd-rn-white); }

/* -- FAQ heading ------------------------------------------------------------
   "FAQs" as cut-out lettering. See the content default for what that replaces.
   -------------------------------------------------------------------------- */
.mmd-shows-faq-head {
    padding: var(--mmd-space-10) var(--mmd-gutter) var(--mmd-space-6);
}
/* Ink, not white — this page's body is white (see .mmd-page-public-shows
   .mmd-main). The visible word is cut-out lettering that carries its own
   colours, but any plain text an editor puts in this field has to be readable,
   and white-on-white is the failure mode. */
/* MUCH larger than the parent's clamp( 1.75rem, 4.5vw, 3rem ), which was sized
   for a full descriptive sentence. This heading is now four cut-out letters and
   is meant to read as a graphic, so it scales off the viewport far harder —
   ~75px at 375px against the parent's 32px. */
.mmd-shows-faq-head h2 {
    color: var(--mmd-rn-ink);
    font-family: var(--mmd-font-display);
    font-size: clamp( 3.5rem, 20vw, 7rem );
    max-width: none;
}
/* The parent italicises <em> across a group of six headings at (0,1,1); here it
   is the ransom hook and must not lean. */
.mmd-shows-faq-head h2 em { font-style: normal; }


/* =============================================================================
   PUBLIC SHOWS — the page that HAS shows

   The sections below the venue cluster are still the parent's; see SECTIONS NOT
   YET RESKINNED above.

   Read this before adding to the section: the two resequencing rules here are
   not block-editor work and CANNOT be. The blocks they move live inside a single
   shortcode ([mmd_shows_list]), so there is nothing for an editor to drag and
   CSS is the only lever. DEPLOY.md says the same thing where it will be found at
   deploy time.
   ============================================================================= */

/* -- Intro band: order -------------------------------------------------------- */
/* Markup order is copy, then the optional multi-venue line, then the button. The
   comp leads with the button. Three orders rather than two, so the venue line
   stays pinned under the copy it belongs to instead of drifting to the end. */
.mmd-shows-intro          { display: flex; flex-direction: column; }
.mmd-shows-scroll-btn     { order: 1; }
.mmd-shows-intro__text    { order: 2; }
.mmd-shows-intro__venues  { order: 3; }

/* -- Intro band: the gold ticket bar ------------------------------------------ */
/* The button is the loudest thing on the page in the comp — full width, gold, in
   the display face, tucked straight under the brush's ragged hem with almost no
   air between them. That tuck is the overlap principle the rest of this file
   follows: a torn edge meets the next element, never a strip of page. Zeroing
   the section gap is what closes it; the button's own top margin goes with it,
   which is why the margin below is written as a full shorthand rather than just
   a margin-bottom.

   Everything here answers a PARENT rule at (0,1,0) — .mmd-btn, .mmd-btn--primary
   and .mmd-shows-scroll-btn all sit at that weight, and main.css carries TWO
   separate .mmd-shows-scroll-btn rules (~2862 and ~3549) setting different
   margins. Rather than out-weigh all four on source order alone, these are
   scoped to .mmd-shows-intro at (0,2,0).

   That scope does a second job. mmd_shows_intro_inner_html() renders this same
   button on the "no shows scheduled" page too, where it sits in .mmd-shows-none
   instead — and that page is already signed off. Naming .mmd-shows-intro puts
   the gold bar on the with-shows page and leaves the other one untouched. The
   COPY is gated the same way, on the same test, in functions.php: a page whose
   whole message is that there are no tickets must not shout "Get Tickets Now"
   at an empty list.

   THE BUTTON RIDES UP INTO THE HERO, the same move the homepage makes with its
   pricing pill — there the gold sits over the photograph inside .mmd-rn-dusk,
   here it sits over the brush's torn hem, and both read as part of the hero
   rather than as the first thing in the section below it. Same tear token, same
   -2× as the dusk field and the gold since-band.

   z-index is the difference between the two. The dusk field WANTS to go behind
   the banner, and gets that for free because .mmd-hero-overlay is positioned and
   so paints above static siblings. This button has to come out in FRONT of the
   hem, so the section is given a stacking context above it. Without that the
   gold would be sliced by the ragged edge instead of sitting on it. */
.mmd-main > .mmd-shows-intro {
    position: relative;
    z-index: 2;
    margin-top: calc( -2 * var(--mmd-rn-tear) );
}

.mmd-shows-intro .mmd-shows-scroll-btn {
    display: block;
    width: 100%;
    margin: 0 0 var(--mmd-space-6);
    background: var(--mmd-rn-gold);
    color: var(--mmd-rn-ink);
    font-family: var(--mmd-font-display);
    /* RE-TUNED FOR NUNITO SANS. "GET TICKETS NOW" held one line at 375px on the
       old 8.5vw and broke at 320, because the bar's side padding is fixed pixels
       and takes a bigger share of a narrow screen than a vw-sized label gives
       back. 8vw with a step less padding restores about 8% of slack at 320 and
       costs 2px at 375, where the bar is the loudest thing on the page and the
       size matters most. */
    font-size: clamp( 1.5rem, 8vw, 2.5rem );
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    padding: var(--mmd-space-3);
}
/* (0,3,0), because .mmd-btn--primary:hover is (0,2,0) and repaints the label
   white — which on gold is very nearly invisible. */
.mmd-shows-intro .mmd-shows-scroll-btn:hover {
    color: var(--mmd-rn-ink);
    opacity: 0.9;
}

/* Body size, not lead size. The comp's paragraph is markedly smaller than the
   parent's --mmd-text-lg, and dropping it is also what gets the line breaks
   right: at 16px this copy wraps to the comp's three lines in the same column,
   so nothing has to force the measure. */
.mmd-shows-intro__text { font-size: var(--mmd-text-base); }

/* -- Identity pills ----------------------------------------------------------- */
/* Both pills go red — the border, the label and the value. The parent draws the
   value in --mmd-ink-on-paper (#2B2B2B), near-black, and the comp has the whole
   card in one red; the pills read as a matched pair with the brush above them
   rather than as two bordered boxes of body copy.

   The value inherits, so setting colour on .mmd-shows-pill carries it — the
   label is named separately only because the parent gives it a colour of its
   own. Both move off --mmd-red-deep (#940000) onto the brand red, which is the
   red every other panel in this skin is painted with.

   border-color, not border: the parent's 2px and pill radius are already right,
   and a shorthand here would restate them just to change one component.

   THE LABEL GOES TOP-LEFT, the value stays centred. The parent centres both with
   `align-items: center`, which shrink-wraps each child to its own text — so a
   text-align on the label alone would do nothing, there being no spare width to
   align within. Switching the pill to `stretch` gives both children the full
   width, and from there the parent's inherited `text-align: center` keeps the
   value centred while the label is told otherwise. That is why this is two
   declarations in different rules rather than one.

   Padding is re-stated asymmetrically to lift the label: 8px above it, 12px
   under the value. The horizontal 24px stays — it is what keeps the label clear
   of the pill's rounded corner. */
.mmd-shows-pill {
    border-color: var(--mmd-rn-red);
    color: var(--mmd-rn-red);
    align-items: stretch;
    padding: var(--mmd-space-2) var(--mmd-space-6) var(--mmd-space-3);
}
.mmd-shows-pill__label { color: var(--mmd-rn-red); text-align: left; }

/* -- Venue cluster: showtimes above the venue detail card -------------------- */
/* The comp reads: identity pills, showtimes, venue detail card, What's
   Included, dinner menu. The markup is

       section.mmd-shows-venue
         div.mmd-shows-venue__grid
           div.mmd-shows-venue__aside   -> pills, dinner menu
           div.mmd-shows-venue__main    -> venue card, What's Included
         div.mmd-shows-times

   so the showtimes are a SIBLING of the very wrapper they have to land in the
   middle of. The parent already solves the inner half of this: it dissolves
   __aside and __main with display:contents and sequences the four blocks with
   `order`. Dissolving __grid as well lifts all five into one flex column on
   .mmd-shows-venue, where a single sequence covers the lot. Same idiom, one
   level further out.

   MOBILE ONLY, and that is not caution — from 769px up the parent turns __grid
   back into a real two-column grid with explicit grid-row placement, and
   display:contents would destroy it. Media queries carry no specificity and
   this file loads after main.css, so an unqualified rule here would beat that
   block from outside it. max-width: 768px meets the parent's min-width: 769px
   exactly: no gap, no overlap.

   Worth knowing before extending this: `order` moves boxes, not the document. A
   keyboard user still meets the venue card's map link before the Buy Tickets
   buttons. The parent already accepted that trade for this cluster — its own
   sequence swaps the dinner menu past the card — so this widens an existing
   compromise rather than introducing one. If it ever needs to be right rather
   than close, the fix is in the markup, not here. */
@media ( max-width: 768px ) {
    .mmd-shows-venue {
        display: flex;
        flex-direction: column;
        gap: var(--mmd-space-8);
    }
    .mmd-shows-venue__grid  { display: contents; }
    .mmd-shows-venue__pills { order: 1; }
    .mmd-shows-times        { order: 2; }
    .mmd-shows-venue__card  { order: 3; }
    .mmd-shows-included     { order: 4; }
    .mmd-shows-menu         { order: 5; }

    /* The separation now comes from the flex gap above. The parent's own spacer
       was sized for a block sitting under the grid, and would stack on top. */
    .mmd-shows-times { margin-top: 0; }
}

/* -- Showtimes panel ---------------------------------------------------------- */
/* Black, not the parent's --mmd-ox-800 (#210000). That token is an oxblood — it
   carries enough red to read brown, which worked under cream cards and does not
   under white ones. The comp's panel is the same flat black as the rest of this
   skin's dark cards.

   The heading is this page's second piece of cut-out lettering: CURRENT as tiles
   above "Show Times" in gold. Both halves come out of one <em>-carrying string —
   ransom.js tiles the <em>, and everything else in the h2 simply takes the gold,
   so no extra markup is needed to two-tone it. The line break lives in the COPY
   (public_shows_times_heading, functions.php) rather than being forced here, so
   a city that rewords the heading keeps control of where it breaks.

   The <em> is the parent's own, unlike the hero and FAQ hooks on this page which
   this theme has to supply.

   SPACING THROUGHOUT THIS SECTION IS TWO STEPS DOWN from the parent's, taken
   as a set. Every value that looks arbitrary is a token step off what main.css
   sets:

       panel padding      32/24 → 16/12
       heading rule-off      24 → 12
       card padding          24 → 12
       card row-gap          16 →  8
       gap between cards     12 →  8
       button padding     12/32 →  8/24

   Two things to keep in mind before tuning further. Stepping the panel WITH the
   cards is what keeps it deliberate — pulling the cards in alone leaves them
   rattling inside a shell still padded for the old rhythm. And the card's own
   padding is now BELOW what the comp measures (~23px on the sides), so this is
   the first value to give back if the section starts to feel cramped rather
   than tight.

   Two gaps deliberately did NOT step with the rest, both measured against the
   comp: the 12px between detail lines, which is line rhythm rather than
   padding, and the 12px column-gap, because a poster needs more air beside it
   than a stack of text rows needs above and below. */
.mmd-shows-times {
    background: var(--mmd-rn-black);
    padding: var(--mmd-space-4) var(--mmd-space-3);
}
.mmd-shows-times__heading {
    font-family: var(--mmd-font-sans);
    font-weight: 700;
    font-size: clamp( 2rem, 9vw, 3rem );
    line-height: 1.05;
    color: var(--mmd-rn-gold);
    margin-bottom: var(--mmd-space-3);
}
/* The parent italicises this <em> at (0,1,1). Tiles must not lean. */
.mmd-shows-times__heading em { font-style: normal; }

/* Cards go white. Cream on oxblood read as paper; on black it reads as a stain,
   and the comp has them plain white. */
.mmd-shows-times .mmd-eb-events { gap: var(--mmd-space-2); }
.mmd-shows-times .mmd-eb-event {
    background: var(--mmd-rn-white);
    padding: var(--mmd-space-3);
}
.mmd-shows-times .mmd-eb-event__name { color: var(--mmd-rn-ink); }
.mmd-shows-times__empty { background: var(--mmd-rn-white); }

/* Buy Tickets goes gold to match the hero bar — same action, drawn the same way
   in the comp. Display face and a black label, so it reads as a button rather
   than as one more line of the card's copy. */
.mmd-shows-times .mmd-eb-event__buy {
    background: var(--mmd-rn-gold);
    color: var(--mmd-rn-ink);
    font-family: var(--mmd-font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    padding: var(--mmd-space-2) var(--mmd-space-6);
}

/* -- Show card: one left edge for the whole right column ---------------------- */
/* The comp lines the title, date, theme, address and price up on a single left
   edge — the details column's — and lets only the poster and the Buy button
   break out of it. The parent's card has three different left edges on a phone:
   the title spans the full width above the poster, the details are indented past
   it, and the price sits off at the far right beside the button. Pulling them
   onto one edge is what "align the dates better" comes down to.

   The pin and mask emoji go with it. They only decorate two of the four detail
   lines, so those two start a character further right than the date above them —
   the ragged edge is inside the column, not just around it. They are hidden here
   rather than deleted, and the parent now wraps them in an aria-hidden span (a
   reader was announcing "round pushpin" before every address), so any theme that
   wants them keeps them. */
.mmd-shows-times .mmd-eb-event__ico { display: none; }

/* 8px between the detail lines is tighter than the comp, which gives them the
   room to read as separate facts rather than as a block of small print. */
.mmd-shows-times .mmd-eb-event__info { gap: var(--mmd-space-3); }

/* The title loses the full width it used to span, so it comes down a step to
   keep a long event name from running to five lines in the narrower column. The
   poster comes in to match the comp's proportion and to give that column back
   some of what the title lost. */
.mmd-shows-times .mmd-eb-event__name { font-size: 0.875rem; }
.mmd-shows-times .mmd-eb-event__poster img { width: 80px; height: 80px; }

@media ( max-width: 768px ) {
    /* Dissolve the action wrapper. The price and the button are one <div> in the
       markup but belong in different places in the comp — price in the details
       column, button spanning the card — and display:contents is the only thing
       that can separate them without forking the Eventbrite renderer. Same move
       the parent makes on this page's two venue-column wrappers. */
    .mmd-shows-times .mmd-eb-event__action { display: contents; }

    .mmd-shows-times .mmd-eb-event {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            ".      name"
            "poster info"
            ".      price"
            "buy    buy";
        align-items: start;
        row-gap: var(--mmd-space-2);
        column-gap: var(--mmd-space-3);
    }
    /* The combined multi-venue list carries its venue badge in a row above all
       of this. Restated in full rather than inherited: the parent sets the whole
       template in its own rule (main.css ~4019), so leaving this out would put
       the old body back underneath the badge. (0,3,0) — deliberately above the
       rule directly overhead, which would otherwise match these cards too. */
    .mmd-shows-times.mmd-shows-all__list .mmd-eb-event {
        grid-template-areas:
            "badge  badge"
            ".      name"
            "poster info"
            ".      price"
            "buy    buy";
    }

    .mmd-shows-times .mmd-eb-event__ticket-type { grid-area: price; text-align: left; }
    /* Sold Out replaces the button rather than joining it, so the two share a
       cell — only ever one of them is in the markup. */
    .mmd-shows-times .mmd-eb-event__buy,
    .mmd-shows-times .mmd-eb-event__soldout { grid-area: buy; justify-self: center; }
    /* Poster top to details top. The parent centres it, which on a three-line
       address leaves it floating halfway down the card. */
    .mmd-shows-times .mmd-eb-event__poster { align-self: start; }
}


/* -- Venue detail card -------------------------------------------------------- */
/* Purple shell, black sub-cards — the exact inversion of the parent, which puts
   cream sub-cards on an oxblood shell. Nothing here changes structure; the whole
   section is paint plus one flex direction.

   The colours have to move together or not at all. The parent's fact cards carry
   --mmd-ink-on-paper on cream, so flipping only the shell to purple would leave
   near-black text on cream squares floating on it. Every rule below exists
   because the parent named that colour somewhere: the card, the link wrapper,
   the <strong> inside a value, and the link hover.

   Icons are already gold in the source files and stay untouched — they read on
   black exactly as they did on cream. */
.mmd-shows-venue__card {
    background: var(--mmd-rn-purple);
    color: var(--mmd-rn-white);
}
.mmd-shows-venue__name     { color: var(--mmd-rn-white); text-align: center; }
.mmd-shows-venue__price    { color: var(--mmd-rn-white); }
/* Keeps its 0.85 opacity from the parent — that is what still sets it back from
   the name above it. Only the base colour moves off cream. */
.mmd-shows-venue__duration { color: var(--mmd-rn-white); }

/* The comp centres the venue name on its own line and drops the price beneath
   it, right-aligned. The parent runs them as a row with space-between, which
   only breaks when the two happen not to fit.

   Turning the head into a column is the whole change: the name centres, and the
   price keeps the `margin-left: auto` the parent already gave it. That auto
   margin is now in the CROSS axis, where an auto margin both suppresses the
   stretch and pushes the item to the far side — so the price lands right
   without a second declaration. */
.mmd-shows-venue__cardhead { flex-direction: column; }

/* The sub-cards. Rounder than the parent's --mmd-radius-md to match the comp,
   which draws them at close to the shell's own corner. */
.mmd-shows-fact {
    background: var(--mmd-rn-black);
    color: var(--mmd-rn-white);
    border-radius: var(--mmd-radius-lg);
}
.mmd-shows-fact__value strong { color: var(--mmd-rn-white); }

/* -- The venue's own copy, in the same black boxes ---------------------------
   The description and the arrival note sat as bare white type on the purple,
   directly above a rank of black fact cards — so the card read as two different
   things stacked. They are the same kind of content as the cards below them
   (what you need to know about this venue), so they take the same treatment and
   the same corner.

   FULL WIDTH, edge to edge with the fact grid. Both are already full-width
   children — a 1/-1 grid item at desktop, a block at phone size — so the box
   lines up with the outer edges of the two fact columns on its own once the
   copy stops being what is sized.

   THE MEASURE MOVES FROM THE BOX TO ITS PADDING, which is the whole trick. A
   34em cap on the element would have made the BOX 34em and left it floating in
   the middle of the card; the same 34em held by side padding leaves the box
   full width and the line length exactly where it was. max() is what makes it
   safe on a phone: below 34em the calc goes negative and the ordinary padding
   wins, so the narrow layout is untouched. */
.mmd-shows-venue__desc,
.mmd-shows-venue__arrival {
    background: var(--mmd-rn-black);
    border-radius: var(--mmd-radius-lg);
    padding: var(--mmd-space-4) max( var(--mmd-space-4), calc( ( 100% - 34em ) / 2 ) );
}
/* (0,1,1) and (0,3,1) — matching the parent's own two selectors for the address
   card, which is a link and so colours itself twice. Gold on hover rather than
   the parent's deep red, which would all but vanish against the black. */
a.mmd-shows-fact { color: var(--mmd-rn-white); }
a.mmd-shows-fact:hover .mmd-shows-fact__value--link { color: var(--mmd-rn-gold); }

/* -- Venue card icons: swap the file, don't recolour it ----------------------- */
/* The parent renders these as <img src="…/venue-icons/pin.svg"> with the comp's
   colours baked in — oxblood glyphs, sized in CSS. An <img> cannot be recoloured
   from a stylesheet, and the usual dodge (mask-image + a background colour)
   would be actively wrong on the pin: masking collapses a two-tone glyph into
   one silhouette, and the pin's whole point is that the dot in its head is a
   SEPARATE colour from the body. Gold-on-gold would fill the dot in solid.
   That is the same wall the ransom lettering hit; there it was solved by
   inlining, here by swapping the file.

   This design already ships its own gold exports of all four, so `content:url()`
   on the parent's own per-icon modifier class points each <img> at the ransom
   version. Four declarations instead of a forked shortcode — and if the parent
   ever adds a fifth venue icon, it simply keeps the parent's colours rather than
   breaking.

   The dot comes for free: pinPoint.svg draws it in black, which is what the card
   behind it now is. It is literal #000 against the card's #0B0B0B — a 4%
   difference nobody can see at 2.4rem, but worth knowing it is a near-match
   rather than a token reference. If the fact cards are ever repainted, this dot
   does NOT follow them.

   No resizing needed. Each replacement's aspect ratio is within 0.02 of the file
   it replaces (0.61→0.62, 0.93→0.95, 0.99→1.00, 1.03→1.04), so the parent's
   fixed square box plus its `object-fit: contain` places them where the old ones
   sat. object-fit applies to content:url() replaced content, so that keeps
   working.

   STILL THE PARENT'S: the ticket beside the price. There is no gold ticket in
   this theme's assets — every other icon here had one waiting. It stays #940000
   and cream until an export exists; masking it gold would turn an outline drawn
   in strokes into a solid gold blob. */
.mmd-shows-ico--pin     { content: url( 'assets/image/bright-redesign/Public/pinPoint.svg' ); }
.mmd-shows-ico--masks   { content: url( 'assets/image/bright-redesign/Public/Drama_face.svg' ); }
.mmd-shows-ico--parking { content: url( 'assets/image/bright-redesign/Public/parking.svg' ); }
.mmd-shows-ico--bus     { content: url( 'assets/image/bright-redesign/Public/bus.svg' ); }


/* -- What's Included ---------------------------------------------------------- */
/* The same two moves as the venue card, on a block that renders in two places:
   inside each venue's column, and hoisted to .mmd-shows-included-shared when
   every venue in a market says the same thing. Both carry these classes, so both
   are covered — do not scope this to one of them.

   Corners go up a step to --mmd-radius-xl. On the parent's LG these cards read as
   rounded rectangles; the comp draws them close to a lozenge, and at this card
   height that reads as the difference between the two skins more than the colour
   does. */
.mmd-shows-included__item {
    background: var(--mmd-rn-black);
    color: var(--mmd-rn-white);
    border-radius: var(--mmd-radius-xl);
}
.mmd-shows-included__body h4 { color: var(--mmd-rn-white); }

/* The heading's <em> is the tile hook, so it must not lean; the parent
   italicises it at (0,1,1). The question mark beside the tiles is NOT in this
   rule's reach — it is split off in ransom.js and lands outside .mmd-rn so it
   keeps the heading's own type. */
.mmd-shows-included__heading em { font-style: normal; }

/* Gold exports again, same swap and same reasoning as the venue card above. All
   four ratios land within 0.02 of the files they replace (1.45→1.43, 0.94→0.95,
   1.00→1.00, 0.81→0.80), so the parent's 2.7rem box still places them.
   magnify_glass keeps its two tones — gold glass, dark print — which is what the
   comp shows and what a mask could never have produced. */
.mmd-shows-ico--wi-meal      { content: url( 'assets/image/bright-redesign/Public/dinnerplate.svg' ); }
.mmd-shows-ico--wi-masks     { content: url( 'assets/image/bright-redesign/Public/Drama_face.svg' ); }
.mmd-shows-ico--wi-magnifier { content: url( 'assets/image/bright-redesign/Public/magnify_glass.svg' ); }
.mmd-shows-ico--wi-clock     { content: url( 'assets/image/bright-redesign/Public/timer.svg' ); }


/* -- Straight from Off-Broadway ----------------------------------------------- */
/* The torn paper, the red panel and the tear geometry are all the parent's and
   all correct. Four things move.

   The banner goes LEFT. Its two lines are centred by .mmd-shows-broadway's own
   text-align, which the red panel below also relies on — so the banner is named
   rather than the section, or the copy inside the panel would go with it.

   Line one becomes italic and bold in full. The parent emphasises only the <em>
   ("Straight from <em>Off-Broadway.</em>"), which leaves "Straight from" upright
   beside it; the comp sets the whole sentence as one italic statement. Line two
   then has to be put BACK to upright, since it inherits from the same rule —
   that is what the --end override is for, and it has to answer the parent's
   `__line em` selector at (0,1,1) as well as the line itself. */
.mmd-shows-broadway__banner { text-align: left; }
.mmd-shows-broadway__line {
    font-size: clamp( 2.25rem, 11vw, 3.75rem );
    font-style: italic;
    font-weight: 700;
}
.mmd-shows-broadway__line--end,
.mmd-shows-broadway__line--end em { font-style: normal; font-weight: 400; }

/* THE CITY GETS ITS OWN LINE. The <br> is in the copy, not here — see
   public_shows_broadway_line2 in functions.php — so a city that wants the two
   halves back on one line can delete it without touching CSS.

   Giving the tiles the whole width is what buys back the size. Sharing a line
   with "Now open in" cost about 5em before the first letter, which on a
   ten-letter city forced the type down to 22.5px; alone, the same city fits at
   25.5px with room to spare.

   The arithmetic, so the next person can redo it rather than guess — and REDO
   it after a face change, because the per-glyph figure is the face's. The
   banner's inner width is the viewport less its 32px padding either side (it is
   full-bleed) — 311px at 375. Each tile is its glyph (the alphabet averaged
   0.83em wide in the face this was measured in) plus 0.18em of chip padding, so
   n letters need n x 1.01em. At
   25.5px that is 12 letters before it wraps, which covers every city in the
   network except Arlington Heights. .mmd-rn wraps by design, so that one drops
   to two rows of tiles rather than overflowing. */
.mmd-shows-broadway__line--end          { font-size: clamp( 1.4rem, 6.8vw, 2.4rem ); }
.mmd-shows-broadway__line--end .mmd-rn  { font-size: 1em; }

/* The gap under the torn edge, and it is arithmetic rather than taste.
   CREAMPAPERTEAR.png is transparent for the bottom 25.7% of its height (measured
   off the file: 329px of 1280). The banner paints it at `100% 100%`, so that
   torn zone is always a QUARTER OF THE BANNER'S HEIGHT — it grows every time the
   heading does. The parent tucks the panel up by a flat 44px, which only covers
   the tear on a banner up to 171px tall. This banner is nearer 275px, so the
   bottom ~30px of the tear had nothing behind it and the page showed through.
   Enlarging the heading did not cause that; it widened a gap that was already
   there.

   110px covers a banner up to 428px tall, which leaves room for a city name that
   wraps. Over-tucking is free: the banner's top 74% is opaque cream painted over
   the panel, so extra red simply hides behind it.

   The panel's padding-top absorbs the difference — 130 = 110 + the 20px the copy
   originally sat below the banner's bottom edge — so the copy does not move.

   Both sections, because both are the same PNG at the same size with the same
   flat 44px. The What Happens banner is around 292px tall and so has the same
   gap; fixing one and not the other would just move it down the page. */
.mmd-shows-broadway__banner,
.mmd-shows-happens__banner { margin-bottom: -110px; }
.mmd-shows-broadway__panel,
.mmd-shows-happens__panel  { padding-top: 130px; }


/* -- What Happens During a Show ----------------------------------------------- */
/* Full bleed, and this is a deliberate departure rather than an oversight being
   corrected. The parent says so in its own comment above these rules: "the
   torn-paper banner spans the full viewport; the coloured panel below stays
   inset (the section keeps the page gutter)". The comp runs the black to the
   edge, so the gutter is cancelled here the same way every other full-bleed
   block in this file does it.

   The padding stays at --mmd-space-6. It used to measure from the gutter, so the
   copy sat 40px in; now it measures from the viewport and sits 24px in, which is
   where the comp puts the photo edge. Adding the gutter back as padding would
   undo half of what the bleed just bought.

   The tear pseudo-element is unaffected — it is already positioned against the
   viewport (left:50% + translateX + 100vw), not against the panel's box. */
.mmd-shows-happens__panel {
    background: var(--mmd-rn-black);
    color: var(--mmd-rn-white);
    margin-inline: calc( -1 * var(--mmd-gutter) );
}

/* The heading goes red on the cream. The parent sets it in --mmd-ink-on-paper
   and italicises the <em>; the comp states the whole line in the brand red with
   "Happens" upright and bold, so the emphasis reads as weight rather than lean.
   Two selectors because the parent colours the heading and slants the <em> in
   separate rules, the second of them a six-way group at (0,1,1).

   max-width goes from 20ch to 30ch. At 20ch this heading breaks to four lines on
   a phone where the comp has two; 30ch lets the banner's own width govern on
   mobile while still stopping the line running edge to edge on a desktop. */
.mmd-shows-happens__heading    { color: var(--mmd-rn-red); max-width: 30ch; }
.mmd-shows-happens__heading em { font-style: normal; font-weight: 700; }

/* This is the longest stretch of unbroken copy on the page — a lead plus two
   paragraphs, all of it centred — so the parent's spacing, which was set for
   larger type, leaves it reading as a wall. Type comes down a step each and the
   air comes down with it, as a set:

       lead        20px -> 16px
       body        16px -> 14px, and its line-height 1.75 -> 1.5
       photo       32/40 margin -> 16/24
       lead+body   40px bottom  -> 24px
       panel       64px bottom  -> 32px, sides 24px -> 12px

   LONGHANDS, NOT `padding`. The tear fix above sets padding-top: 130px on this
   same element, and a shorthand here would silently reset it and put the gap
   under the torn edge straight back. */
.mmd-shows-happens__panel {
    padding-inline: var(--mmd-space-3);
    padding-bottom: var(--mmd-space-8);
}
.mmd-shows-happens__lead {
    font-size: var(--mmd-text-base);
    margin-bottom: var(--mmd-space-6);
}
.mmd-shows-happens__text {
    font-size: var(--mmd-text-sm);
    line-height: 1.5;
    margin-bottom: var(--mmd-space-6);
}

/* Shorter and wider. The width comes from the panel's padding above — these are
   already width:100% — so all that is left is to stop them being as tall.
   aspect-ratio plus object-fit crops rather than squashes, which matters because
   these are option-driven: a city can upload anything here, and a fixed height
   without the fit would distort a portrait upload instead of trimming it. */
.mmd-shows-happens__photo {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
    margin-block: var(--mmd-space-4) var(--mmd-space-6);
}


/* -- More Than Dinner / Your ticket includes ---------------------------------- */
/* Heading and label go left; the kicker underneath stays centred, so the section's
   own text-align is left alone and the two blocks that move are named instead.
   The heading also loses its 18ch cap and its auto margins — both were there to
   centre it, and 18ch would hold it to a narrow column against the left edge. */
.mmd-shows-includes__heading {
    text-align: left;
    max-width: none;
    margin-inline: 0;
}
/* "Interactive" is the comp's one red word, and it is upright. The parent slants
   this <em> in a five-way group at (0,1,1); weight carries the emphasis instead. */
.mmd-shows-includes__heading em {
    font-style: normal;
    font-weight: 700;
    color: var(--mmd-rn-red);
}
.mmd-shows-includes__label { text-align: left; font-size: var(--mmd-text-lg); }

/* THE CARDS GO FULL WIDTH, which is what the two rules below are really about.
   The parent staggers them left/right at 84% and lets the dashed weave curve
   between the offset centres. At full width every card shares a centre, so that
   curve would collapse into a straight vertical line — hence --mmd-weave-bias,
   read by the parent's ticketWeave() (main.js). Alternating it swings the trail
   out and back the way the comp draws it. 0.5 is the JS default, so no other
   theme is affected by any of this.

   :nth-of-type, NOT :nth-child, and this is load-bearing. ticketWeave() runs
   `grid.insertBefore( svg, grid.firstChild )`, so the moment the script executes
   an <svg> becomes child 1 and every card's nth-child index shifts by one — the
   colours would all slide down a slot, live, after paint. Counting by TYPE
   ignores the svg entirely because the cards are divs. */
.mmd-shows-includes__card--left,
.mmd-shows-includes__card--right { align-self: stretch; }
.mmd-shows-includes__card {
    width: 100%;
    color: var(--mmd-rn-white);
}
.mmd-shows-includes__card:nth-of-type(odd)  { --mmd-weave-bias: 0.72; }
.mmd-shows-includes__card:nth-of-type(even) { --mmd-weave-bias: 0.28; }

/* Red, purple, navy, green, then back to red. A five-step cycle rather than five
   fixed rules because the list is option-driven — a city can add a sixth ticket
   line, and it should pick the sequence back up rather than fall through to the
   parent's oxblood. */
.mmd-shows-includes__card:nth-of-type(5n+1) { background: var(--mmd-rn-red); }
.mmd-shows-includes__card:nth-of-type(5n+2) { background: var(--mmd-rn-purple); }
.mmd-shows-includes__card:nth-of-type(5n+3) { background: var(--mmd-rn-navy); }
.mmd-shows-includes__card:nth-of-type(5n+4) { background: var(--mmd-rn-green); }
.mmd-shows-includes__card:nth-of-type(5n+5) { background: var(--mmd-rn-red); }

/* The icons lose their box and grow. The parent sets them in a 58px oxblood
   square, which on a coloured card reads as a second card inside the first; the
   comp has the glyph sitting straight on the colour. The art itself is already
   right — these five ship in #E8E0CD, which is the white the comp draws. */
.mmd-shows-includes__ico {
    background: none;
    width: auto;
    height: auto;
}
.mmd-shows-includes__ico .mmd-shows-ico { width: 3.25rem; height: 3.25rem; }

/* White copies of all five, because the parent's are drawn for a cream card:
   #E8E0CD line work with #210000 detail, which on a saturated panel reads warm
   and muddy. Each copy pushes the cream to #FFFFFF; two of them also do
   something less obvious with the dark.

   THE MASK'S EYES AND THE WINE IN THE GLASSES ARE PAINTED THE CARD COLOUR, not
   removed. That distinction cost a round: fill:none looked like the right answer
   and is not, because those dark shapes sit ON TOP of a solid cream body rather
   than filling holes cut out of it. Dropping them left a blank blob where the
   eyes belong and a featureless glass — exactly the lost detail. Painting them
   the colour of the card they land on gives back the openings the comp draws.

   That bakes a card colour into an icon, so here is why it cannot drift. The
   parent picks the icon with $ti_icons[ $ci % 5 ] and the palette above cycles
   on :nth-of-type(5n+k) — both key off the same index modulo five, so item k
   always carries icon k AND colour k no matter how many ticket lines a city
   writes. ti-dressup is always on green, ti-evening always on red. Change the
   colour cycle and these two files have to change with it.

   THE DARK IS GONE FROM ALL FIVE NOW. ti-dinner carried three #210000 paths
   and ti-game one; both are white in the files. An earlier pass left them
   alone on the reasoning that removing them would erase the icon — and that
   was right about `fill: none`, which is what had been tried, but wrong about
   WHITENING them. Rendered side by side on their own card colours, the dark in
   ti-dinner turned out to be the outline around the dome and the plate, and
   the dark in ti-game a shadow inside the lens. Made white, the card colour
   itself becomes the line that separates dome from plate and draws the
   fingerprint — the shapes survive and read cleaner than they did.

   What is still not white, deliberately: the two #254F27 paths in ti-dressup
   (the mask's eyes) and the two #A71818 in ti-evening (the wine). Those are
   CARD COLOURS, not ink — they are openings, and painting them white would
   fill in the eyes and the glasses. See the note above on why they are
   painted rather than removed. If the colour cycle ever moves, those two files
   move with it.

   Render before extending this; there is a harness for it in the scratchpad. */
.mmd-shows-ico--ti-show     { content: url( 'assets/image/bright-redesign/Public/ti-show-white.svg' ); }
.mmd-shows-ico--ti-dinner   { content: url( 'assets/image/bright-redesign/Public/ti-dinner-white.svg' ); }
.mmd-shows-ico--ti-game     { content: url( 'assets/image/bright-redesign/Public/ti-game-white.svg' ); }
.mmd-shows-ico--ti-dressup  { content: url( 'assets/image/bright-redesign/Public/ti-dressup-white.svg' ); }
.mmd-shows-ico--ti-evening  { content: url( 'assets/image/bright-redesign/Public/ti-evening-white.svg' ); }

/* The kicker becomes a filled purple card rather than an outlined white one, and
   narrows to roughly the comp's measure. */
.mmd-shows-includes__kicker-title { color: var(--mmd-rn-red); }
.mmd-shows-includes__kicker {
    background: var(--mmd-rn-purple);
    border: none;
    color: var(--mmd-rn-white);
    max-width: 32ch;
    padding: var(--mmd-space-4);
}
.mmd-shows-includes__kicker-body { color: var(--mmd-rn-white); }


/* -- Perfect For / New Themes ------------------------------------------------- */
/* Black panel, gold boxes — the parent has oxblood and cream. Everything below is
   colour, type size, or space; nothing here changes the layout.

   THE SPACE IS SPENT ON THE PHOTOS. They are flex items at a percentage of the
   box's CONTENT width, so every pixel taken off the box padding or the gap
   between copy and picture goes straight to them. Three values move together and
   the photo's own share moves with them:

       section padding-block   64 -> 40
       section gap             64 -> 40
       box padding             32 -> 16
       box gap                 24 -> 12
       photo                  42% -> 46%

   At 375px that is a 343px box: the picture goes from about 131px to 143px, and
   the copy column loses only 4px of what it had, because the padding paid for
   most of it. */
.mmd-shows-variety {
    background: var(--mmd-rn-black);
    color: var(--mmd-rn-white);
    padding-block: var(--mmd-space-10);
    gap: var(--mmd-space-10);
}
.mmd-shows-variety__box {
    background: var(--mmd-rn-gold);
    color: var(--mmd-rn-ink);
    padding: var(--mmd-space-4);
    gap: var(--mmd-space-3);
}
.mmd-shows-variety__photo { flex: 0 0 46%; width: 46%; }

/* The headings go white, and their emphasis stops leaning. The parent slants
   this <em> in a four-way group at (0,1,1); the comp sets "Perfect" and "Themes"
   in bold upright, so weight has to replace the lean or the word loses its
   emphasis entirely. */
.mmd-shows-variety__heading { color: var(--mmd-rn-white); }
.mmd-shows-variety__heading em { font-style: normal; font-weight: 700; }

/* The copy inside the gold box comes down to 12px. That is small, and it is
   deliberate: the comp's column is about 27 characters wide, which at 14px would
   run this paragraph to sixteen lines and make the box taller than the picture
   beside it. It is marketing copy sitting next to an image, not the page's
   primary reading — the lead and body of What Happens above it stay at 16 and
   14. If it needs to come back up, take it to --mmd-text-sm and give the photo
   back the 4% instead. */
.mmd-shows-variety__body { font-size: var(--mmd-text-xs); color: var(--mmd-rn-ink); }

/* The transition line between the two rows: white, and upright. The parent sets
   it italic at --mmd-text-xl; the comp has it as plain type a step down, which
   stops it competing with the headings on either side of it. */
.mmd-shows-variety__kicker {
    font-style: normal;
    font-size: var(--mmd-text-lg);
    color: var(--mmd-rn-white);
}

/* -- Why Guests Love ---------------------------------------------------------- */
/* This block breaks out of the black panel onto white, which it can do without
   leaving the panel: it is the last child, so bleeding it to the panel's inline
   edges and pulling it down over the bottom padding covers every black pixel
   below the kicker. The page behind is already white
   (.mmd-page-public-shows .mmd-main), so the two meet seamlessly.

   NOT ROUNDED. The comp appears to curve the black away at this join, but that
   reads as the seam between two Figma frames rather than a drawn corner — and a
   genuine one would need an inverted corner, since the white would have to rise
   at the edges rather than the black dip at them. Straight until someone
   confirms it is deliberate.

   The heading has to be re-coloured rather than inherited: the rule above paints
   every .mmd-shows-variety__heading white for the black panel, and this one is
   now on white. */
.mmd-shows-variety__why {
    background: var(--mmd-rn-white);
    color: var(--mmd-rn-ink);
    margin-inline: calc( -1 * var(--mmd-gutter) );
    margin-bottom: calc( -1 * var(--mmd-space-10) );
    padding: var(--mmd-space-10) var(--mmd-gutter);
    max-width: none;
    text-align: left;
    /* Heading across the top, then copy beside the photograph. The parent has no
       second column here because it has no photograph; the img is new (see
       mmd_sc_shows_variety) and only renders where a site sets one, so the grid
       simply has an empty second track on a location that has not. */
    display: grid;
    grid-template-columns: 1fr 42%;
    column-gap: var(--mmd-space-4);
    align-items: start;
}
.mmd-shows-variety__why > :first-child { grid-column: 1 / -1; }
.mmd-shows-variety__why .mmd-shows-variety__heading {
    color: var(--mmd-rn-ink);
    text-align: left;
    margin-bottom: var(--mmd-space-6);
}
.mmd-shows-variety__why-body p { font-size: var(--mmd-text-sm); line-height: 1.55; }
.mmd-shows-variety__why-body strong { color: var(--mmd-rn-ink); }
/* Stretch, so the picture runs the depth of the copy beside it whatever a city
   writes; cover, so an upload of any shape crops instead of distorting. */
.mmd-shows-variety__why-photo {
    align-self: stretch;
    width: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: var(--mmd-radius-md);
}


/* -- Reserve Your Seats ------------------------------------------------------- */
/* Left-aligned, white on the brand red, with the button as an outline rather
   than a filled cream pill. The parent centres all three and the body carries
   `margin: 0 auto` to hold its 52ch measure in the middle — so the auto margins
   have to go too, or the copy stays centred inside a left-aligned block. */
.mmd-shows-reserve {
    background: var(--mmd-rn-red);
    color: var(--mmd-rn-white);
    text-align: left;
    /* Edge to edge, keeping the parent's XL corners — so the card's curves meet
       the viewport rather than sitting a gutter inside it, the same bleed the
       showtimes panel and the What Happens block use. The inner padding is
       untouched and now measures from the screen edge. */
    margin-inline: calc( -1 * var(--mmd-gutter) );
}
/* Sized to hold "Reserve Your Seats" on ONE line, which is the whole difference
   between this and the comp. The parent's floor is 2.5rem — 40px, which is more
   line than this card has inside its padding at any phone width, so it always
   broke in two. 8vw lands at 30px on a 375px screen and measures under the card,
   with slack left for a longer city heading.

   RE-MEASURED after the face changed to Nunito Sans, which is wider than the
   Oswald this was originally fitted to: still one line at 360px and at 1280px,
   so the number stands. Re-measure it, don't trust it, if the label changes. */
.mmd-shows-reserve__heading {
    color: var(--mmd-rn-white);
    font-size: clamp( 1.75rem, 8vw, 3rem );
}
.mmd-shows-reserve__body {
    color: var(--mmd-rn-white);
    font-size: var(--mmd-text-sm);
    line-height: 1.5;
    margin-inline: 0;
    margin-bottom: var(--mmd-space-12);
}
/* Transparent with a white hairline. The parent's cream fill and oxblood label
   are both named again because the shorthand-free override would otherwise leave
   dark text on no background. */
.mmd-shows-reserve__btn {
    background: transparent;
    color: var(--mmd-rn-white);
    border: 2px solid var(--mmd-rn-white);
    /* Unbolded, matching the comp: the parent sets this at 700, which against a
       hairline outline reads as a heavier button than the outline can carry.
       (The display token no longer buys a different face — both slots are Nunito
       Sans — so the weight is doing all of the work here now.) */
    font-family: var(--mmd-font-display);
    font-weight: 400;
    font-size: var(--mmd-text-lg);
    padding: var(--mmd-space-3) var(--mmd-space-8);
}
.mmd-shows-reserve__btn:hover { color: var(--mmd-rn-white); }

/* The panel copy centres and loses its rule. The parent hangs it off a 2px cream
   border on the left; the comp has no rule and centres the block, so the border
   and the padding it was holding both go. Naming all three is deliberate —
   dropping the border alone would leave the copy indented by 24px of padding
   that no longer has anything to sit beside. */
.mmd-shows-broadway__content {
    text-align: center;
    border-left: none;
    padding-left: 0;
}
.mmd-shows-broadway__intro { font-size: var(--mmd-text-base); }


/* =============================================================================
   THANKS PAGE
   =============================================================================
   The confirmation page reached after a form submit (see the note on
   form-confirmation routing — this is the dedicated /thanks/ page, not the
   inline banner). Four moves, all of them paint.

   The photograph goes nearly square. The parent crops it 32:15, a letterbox
   band; the comp gives it most of the screen, which is what makes the brush
   below read as sitting IN the picture rather than under it. object-fit is
   already cover, so the taller box just takes more of the frame.

   The parent's grayscale/brightness filter comes off. This theme's file is
   monochrome to begin with (see thanks_hero in functions.php), so the grayscale
   half was doing nothing and the brightness half was dimming an image the comp
   shows at full strength. The gradient scrim goes with it for the same reason —
   it existed to seat a cream pill on a colour photo, and neither of those is
   true here any more.
   ============================================================================= */
.mmd-thanks-hero__media { aspect-ratio: 1 / 1; }
.mmd-thanks-hero__image { filter: none; }
.mmd-thanks-hero__media::after { display: none; }

/* The cream lozenge becomes the brush banner — the same paint the hero uses on
   the three main pages, so the confirmation reads as part of the same site
   rather than a system page.

   Three of the parent's properties have to be answered, not just the
   background: the pill radius would round the corners of a torn edge, and the
   drop shadow would draw a rectangle's shadow around art whose whole point is
   that it has no straight edges.

   IT DOES NOT SPAN THE PICTURE. The stroke is laid across the photograph with
   frame visible either side of it, so the width is a share of the crop rather
   than a bleed — 80%, which is where the comp puts the ragged ends.

   ITS OWN BRUSH, NOT THE HERO'S. --mmd-rn-brush (Red_paint.webp) is cropped
   square at both ends — invisible where a band runs full-bleed and the ends
   leave the screen, obvious here where it floats inside the picture. This one
   is the designer's replacement, tapered at both ends, and is used only where
   the ends actually show. The heroes keep the original deliberately: they gain
   nothing from it and are already signed off.

   THE PAINT IS NOT STRETCHED TO THE BOX. A `100% 100%` background is right
   where the band is the full width of a hero, and wrong here: at 288 x 129 the
   art would be squashed and the torn edges flattened into straight lines.
   `100% auto` scales it by width alone so the tear renders at its true
   proportion. The box is a few pixels taller than the art on purpose — paint
   that stops short of its container looks like paint; paint clipped by one
   looks like a rectangle.

   That sets a floor on the vertical padding. Two lines at this size are ~65px,
   so 32px above and below gives 129px, comfortably clear of the art. Take the
   padding down and the tear gets cut off again.

   Width and HORIZONTAL padding are a pair in the same way. The heading carries
   its own <br> and wants two lines, and the longest of them ("Thank You For
   Your") has to fit the 256px that 80% of a 375px frame less 16px either side
   leaves. That has already been within ~20px twice, under two different faces —
   so if the type or the padding moves, measure this string before shipping; a
   third line here pushes the copy off the paint. */
.mmd-thanks-hero__pill {
    width: 80%;
    max-width: 520px;
    background: url( 'assets/image/bright-redesign/submission/red-paint.webp' ) center / 100% auto no-repeat;
    border-radius: 0;
    box-shadow: none;
    color: var(--mmd-rn-white);
    /* The slanted voice. Same italic 800 the homepage sets "Straight from
       Off-Broadway." in, which is the theme's register for a hand-lettered
       aside — the token is what keeps the two in step, so change it there
       rather than here. Nunito Sans is requested with its italic axis across
       200–1000 (see functions.php), so 800 italic is drawn, not synthesised. */
    font-family: var(--mmd-rn-font-slant);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp( 1.4rem, 6.9vw, 2rem );
    padding: var(--mmd-space-8) var(--mmd-space-4);
    /* Up from the parent's 75%. That figure centred a short lozenge; this band
       is deeper, and at 75% its lower edge landed on the bottom of the frame so
       the paint read as a caption bar under the picture instead of a stroke laid
       across it. 68% is where the comp puts it — measured off the crop, brush
       centre at about two thirds down — and leaves a clear run of photograph
       below the torn edge. */
    top: 68%;
}

/* Purple, not the parent's hard-coded #A81515. Its rounded top corners and the
   negative margin that tucks it under the photograph are both already right. */
.mmd-thanks-content { background: var(--mmd-rn-purple); }


/* =============================================================================
   GOT-IT PAGE
   =============================================================================
   The failure counterpart to /thanks/ — shown when a submission does not go
   through. The apology sits on white, the form below it on black.

   THE COPY WAS ALREADY DARK; IT WAS THE PAGE THAT WAS WRONG. The parent sets
   both the lede and the pill in --mmd-ink-on-paper, which is what it sounds
   like — ink for a paper-coloured surface. This theme's page is black, so the
   message was rendering near-invisible on it and only legible at all because of
   inherited colour further up the cascade. Putting a white band behind it is
   the fix; the text colours below are belt and braces so the section cannot go
   grey again if that inherited colour ever moves. */
.mmd-main > .mmd-gotit:first-child {
    /* The form panel's own corner radius. Named here because the white band
       below has to know it, and the two must not drift apart. */
    --rn-corner: var(--mmd-radius-xl);

    background: var(--mmd-rn-white);
    /* Full bleed, and up under the header the way the hero is on the three main
       pages — same token as .mmd-main's own padding, so the two cannot drift. */
    margin-inline: calc( -1 * var(--mmd-gutter) );
    margin-top: calc( -1 * var(--mmd-space-6) );
    padding-inline: var(--mmd-gutter);

    /* THE WHITE RUNS ON BEHIND THE PANEL'S TOP CORNERS. The panel was always
       rounded — it carries --mmd-radius-xl from .mmd-lead-form.mmd-rn-form —
       but on this page it is black on a black page, so the curve had nothing
       to cut away from and read as a straight edge.

       Padding down, margin up, by the same amount: the box grows a corner's
       worth taller while the next element starts exactly where it did, so the
       white is painted under the panel's first 32px and shows only where the
       radius carves the corners off. Nothing moves; the corners just become
       visible. */
    padding-bottom: calc( var(--mmd-space-4) + var(--rn-corner) );
    margin-bottom: calc( -1 * var(--rn-corner) );
}
/* The section gap has to go, or the two are separated by a band of black page
   and the white never reaches the corners it is there to reveal. (0,3,0), above
   the parent's `.mmd-main > * + *`. */
.mmd-main > .mmd-gotit + .mmd-lead-form { margin-top: 0; }
.mmd-gotit__lede { color: var(--mmd-rn-ink); }
.mmd-gotit__pill { color: var(--mmd-rn-ink); }
/* The number goes dark to match the comp, which sets it bold rather than
   coloured. Worth knowing what that costs: weight is now the only thing marking
   it as a link. It survives here because the sentence says "give us a call at"
   immediately before it and the whole string is a tel: target on a phone — but
   if this treatment ever gets copied to a link without that context, colour it.
   The red border around the box is untouched. */
.mmd-gotit__pill a { color: var(--mmd-rn-ink); }

/* The form panel is black on this page, not the purple it wears everywhere
   else. Scoped by the page template's own body class rather than by the form,
   so the shared component is unchanged wherever else it appears — this is the
   only page that asks for it. */
.page-template-page-got-it .mmd-lead-form { background: var(--mmd-rn-black); }


/* =============================================================================
   THE REST OF THE SITE
   =============================================================================
   Everything with no comp of its own: the two FAQ pages, Themes, Team Building,
   Blog, 404, and the legal/sitemap pages a city adds later. No layout is
   touched here — this is paint, so that a page nobody drew still belongs to the
   same site.

   THESE PAGES ARE WHITE, not black — see the page shell at the top of this
   file. So most of what the parent already does is right: its ink-on-paper copy
   stays legible and its white cards stay white. What has to change is narrower
   than it first looks:

     - cream (--mmd-cream, --mmd-cream-200, --mmd-cream-400) is the OLD design's
       warm paper. On this theme's clean white it reads as a stain, so card
       fills go flat white and cream borders become a neutral hairline.
     - --mmd-ox-800, the parent's dark accent for an active tab, becomes the
       brand red.
     - --mmd-ink-on-paper (#2B2B2B) becomes --mmd-rn-ink (#111) so body copy
       matches the type elsewhere in the theme.

   GOLD IS NOT USED FOR TEXT HERE, and that is the one rule to keep if this
   section is extended. #FDC50E on white is about 1.8:1 — fine as a rule or a
   fill behind dark type, unreadable as a link. Gold appears below only as a
   2px rule; anything that has to be read or clicked takes the brand red.

   RETARGETING THE PARENT'S TOKENS WOULD HAVE BEEN SHORTER AND IS WRONG. Setting
   --mmd-cream and friends to new values in :root would repaint all of this in
   about six lines — and would also repaint every section above, including the
   ones already signed off, in ways nobody has looked at. These rules name the
   selectors they answer instead, so the blast radius is exactly the components
   listed here.

   Sections that DO have comps are untouched by all of this: the families below
   appear nowhere on the homepage, Private Events, Public Shows, thanks or
   got-it — with one deliberate exception, the FAQ accordion, which is shared
   with the Public Shows FAQ and needed this anyway. */

/* A neutral hairline, mixed from the ink rather than picked by eye, so cards
   have an edge on white without reintroducing the cream. */
:root { --mmd-rn-hairline: rgba( 17, 17, 17, 0.14 ); }

/* -- Page header (every inner page) ------------------------------------------- */
/* The headline on Themes, the FAQs, the Blog and the legal pages. It was landing
   on the parent's global heading weight of 400, which next to the drawn pages'
   800 hero read as a subtitle rather than as the page's title — these pages have
   no comp, so nothing had ever set a weight for them. Same 800 as the hero, so a
   visitor moving between a drawn page and an undrawn one meets the same voice. */
.mmd-page-header h1 { color: var(--mmd-rn-ink); font-weight: 800; }
.mmd-page-header p  { color: var(--mmd-rn-ink); }

/* -- FAQ tabs ----------------------------------------------------------------- */
/* Outlined pills, with the current one filled red — the parent fills the
   inactive ones cream, which on white leaves them barely distinguishable from
   the page. */
.mmd-faq-tab                { background: transparent; border: 2px solid var(--mmd-rn-red); color: var(--mmd-rn-ink); }
.mmd-faq-tab:hover          { background: var(--mmd-rn-gold); color: var(--mmd-rn-ink); }
.mmd-faq-tab--active,
.mmd-faq-tab--active:hover  { background: var(--mmd-rn-red);  color: var(--mmd-rn-white); }

/* -- FAQ accordion (both FAQ pages AND the Public Shows FAQ) ------------------- */
/* White rows on a white page need an edge, so the item takes the hairline; the
   parent relied on a cream answer against a white question instead, which is
   the warm pairing this theme is getting rid of. The open state is marked with
   a gold rule under the question — as an inset box-shadow, not a border, so it
   paints inside the existing box and cannot shift the row by 2px when it
   opens. */
.mmd-faq__item                              { border: 1px solid var(--mmd-rn-hairline); }
.mmd-faq__question                          { background: var(--mmd-rn-white); color: var(--mmd-rn-ink); }
.mmd-faq__question:hover                    { background: var(--mmd-rn-white); }
.mmd-faq__question[aria-expanded="true"]    { background: var(--mmd-rn-white); box-shadow: inset 0 -2px 0 var(--mmd-rn-gold); }
.mmd-faq__icon                              { color: var(--mmd-rn-red); }
.mmd-faq__answer                            { background: var(--mmd-rn-white); }
.mmd-faq__answer p                          { color: var(--mmd-rn-ink); }

/* -- Themes ------------------------------------------------------------------- */
/* border-color rather than border: the parent's 1px stays, it just stops being
   a cream line. */
.mmd-theme-card              { background: var(--mmd-rn-white); border-color: var(--mmd-rn-hairline); color: var(--mmd-rn-ink); }
.mmd-theme-card__content h3  { color: var(--mmd-rn-red); }
.mmd-theme-card__content p   { color: var(--mmd-rn-ink); }
/* The "private" badge already came across — it is painted with --mmd-accent,
   which this theme reassigns. The "public" one is hardcoded to --mmd-ox-800,
   the parent's oxblood, and on a white card beside a red chip it reads as a
   brown one. Same objection as the showtimes panel: this skin's dark is a flat
   black. */
.mmd-theme-badge--public     { background: var(--mmd-rn-black); }
.mmd-themes__empty           { color: var(--mmd-rn-ink); }
.mmd-themes__empty a         { color: var(--mmd-rn-red); }
/* A filled red band, which is what makes it read as a call to action on a white
   page. The background shorthand also clears the parent's newsprint texture,
   which belongs to the older design. */
.mmd-themes-cta              { background: var(--mmd-rn-red); border-top: none; }
.mmd-themes-cta__inner h2    { color: var(--mmd-rn-white); }
.mmd-themes-cta__inner p     { color: var(--mmd-rn-white); }

/* -- Show theme, single page --------------------------------------------------
   The one template the colour pass missed, and it showed: cream panels, an
   oxblood sidebar and olive body copy on a white page — the old design intact
   under the new header. Everything below is paint, on the same principle as the
   rest of this section: the parent's oxblood and cream become this skin's black,
   white and hairline, and the two headings move onto the display face.

   Two things that were NOT paint are fixed elsewhere and worth knowing about
   from here, because both looked like styling and neither was:

     the lead form   came out in the parent's standard layout. The template
                     switch_to_blog(1)s to read the shared theme post and never
                     switched back, so the form template was being resolved
                     against blog 1's Global Content option. Fixed in the
                     parent's single-mmd_theme.php.

     the underlines  every link on the page had one. See the note on the `body a`
                     rule up in the page shell. */
.mmd-theme-hero__image            { background: var(--mmd-rn-black); }
.mmd-theme-hero__content          { background: var(--mmd-rn-white); border-bottom-color: var(--mmd-rn-hairline); }
.mmd-theme-hero__content h1       { color: var(--mmd-rn-ink); font-family: var(--mmd-font-display); }
.mmd-theme-hero__tagline          { color: var(--mmd-rn-ink); }
.mmd-theme-content__description,
.mmd-theme-content__description p { color: var(--mmd-rn-ink); }
/* The spec table reads as a card here rather than as a boxed list — same
   treatment as the FAQ rows and the blog cards on the pages either side. */
.mmd-theme-details                { background: var(--mmd-rn-white); border-color: var(--mmd-rn-hairline); border-radius: var(--mmd-radius-lg); overflow: hidden; }
.mmd-theme-detail                 { border-bottom-color: var(--mmd-rn-hairline); }
.mmd-theme-detail__label,
.mmd-theme-detail__value          { color: var(--mmd-rn-ink); }
.mmd-theme-sidebar__poster img    { border-color: var(--mmd-rn-hairline); border-radius: var(--mmd-radius-md); }
.mmd-theme-sidebar__box           { background: var(--mmd-rn-black); border-radius: var(--mmd-radius-lg); }
.mmd-theme-sidebar__box h4        { color: var(--mmd-rn-white); font-family: var(--mmd-font-display); }
.mmd-theme-sidebar__box p         { color: var(--mmd-rn-white); }
.mmd-theme-sidebar__phone         { background: var(--mmd-rn-red); color: var(--mmd-rn-white); border-radius: var(--mmd-radius-pill); font-family: var(--mmd-font-display); }
.mmd-theme-sidebar__phone:hover   { color: var(--mmd-rn-white); }
.mmd-theme-sidebar__back          { color: var(--mmd-rn-red); }
.mmd-theme-related                { border-top-color: var(--mmd-rn-hairline); }
.mmd-theme-related__inner h2      { color: var(--mmd-rn-ink); }
.mmd-breadcrumb,
.mmd-breadcrumb a                 { color: var(--mmd-rn-ink); }
.mmd-breadcrumb a:hover           { color: var(--mmd-rn-red); }

/* -- Blog --------------------------------------------------------------------- */
.mmd-blog-card                  { background: var(--mmd-rn-white); border-color: var(--mmd-rn-hairline); }
.mmd-blog-card__title a         { color: var(--mmd-rn-ink); }
.mmd-blog-card__title a:hover   { color: var(--mmd-rn-red); }
.mmd-blog-card__date,
.mmd-blog-card__excerpt,
.mmd-blog-card__excerpt p       { color: var(--mmd-rn-ink); }
.mmd-blog-card__more            { color: var(--mmd-rn-red); }
.mmd-blog-card__cat             { background: var(--mmd-rn-red); color: var(--mmd-rn-white); }
.mmd-blog-cat                   { background: transparent; border: 2px solid var(--mmd-rn-red); color: var(--mmd-rn-ink); }
.mmd-blog-cat:hover             { background: var(--mmd-rn-gold); color: var(--mmd-rn-ink); }
.mmd-blog-cat--active,
.mmd-blog-cat--active:hover     { background: var(--mmd-rn-red);  color: var(--mmd-rn-white); }
.mmd-blog-cats                  { border-bottom-color: var(--mmd-rn-gold); }
.mmd-blog-empty                 { color: var(--mmd-rn-ink); }

/* -- 404 ---------------------------------------------------------------------- */
/* Straight on the page rather than in a card, so its copy takes the page's ink.
   The links are red, NOT gold — this is the page where someone is already lost
   and the way out has to be readable. */
.mmd-content--404       { color: var(--mmd-rn-ink); }
.mmd-content--404 h1    { color: var(--mmd-rn-ink); }
.mmd-content--404 a     { color: var(--mmd-rn-red); }
.mmd-content__body p    { color: var(--mmd-rn-ink); }

/* -- Fine print (under every page, above the bottom bar) ---------------------- */
/* The parent's --mmd-gray works on white, so only the hover moves — to red,
   for the same contrast reason as everything else here. */
.mmd-fine-print__links a:hover,
.mmd-fine-print__links a:focus-visible { color: var(--mmd-rn-red); }


/* =============================================================================
   DESKTOP — image boxes
   =============================================================================
   ONE CAUSE BEHIND ALL OF THESE. The mobile layout sizes picture boxes as a
   PERCENTAGE OF THE COLUMN with a ratio tuned for a ~375px screen. At 1280 the
   column is ~1160px, so those same percentages produce boxes three times wider
   while the ratio caps hold the height down — and every portrait cut-out gets
   `cover`-cropped into a wide letterbox band. Measured on the homepage before
   this section existed, the story cut-outs were being displayed at 211%, 110%
   and 73% away from their own aspect ratio, which is why heads were cut off.

   So the fix is never "change the crop". It is to keep each box roughly the
   SHAPE of the art it holds once the column gets wide: give the box back some
   height, or take away some width, and the existing `cover` then trims a little
   instead of a lot.

   Breakpoint is 769px to match the parent's own desktop switch. The 1024px
   header block above is separate and stays where it is, next to the header. */
@media ( min-width: 769px ) {

    /* -- The dusk field ---------------------------------------------------- */
    /* THE PARENT SPLITS THIS INTO TWO COLUMNS AT 769px and that is what broke
       it. `display: grid; grid-template-columns: 1fr 1fr` put the photograph in
       a half-width column beside the copy — so the picture the whole composite
       exists to show became a tall crop on the left, the tagline lost the
       photograph it is meant to sit ON, and the copy was stranded in a column
       with black space under it.

       Back to the mobile arrangement, which is what the comp keeps at desktop:
       one column, photograph full bleed, copy centred beneath it. Only `display`
       is answered — the parent's padding and text-align were already overridden
       further up this file, so restating them here would just be two more
       places to keep in step.

       The photograph gets its height back. 5/8 is a portrait crop for a 375px
       column — at 1160px it would be 1856px tall — but a wide band is the other
       extreme and cut the cast off at the chest. 1/1 keeps almost all of a
       1270x1600 source.

       ANCHORED TO THE BOTTOM, not the top, and it is worth knowing why the
       obvious choice is wrong. The cast in this photograph stand in the LOWER
       part of the frame with a tall empty backdrop above them, so `center top`
       fills the section with grey nothing and pushes the ensemble off the
       bottom. `center bottom` — the same value the phone uses — trims that
       empty headroom instead and keeps everybody in shot.

       THE PULL-UP GOES TO ZERO, and that is the point rather than a detail. On
       a phone the -24% slides the picture up behind the banner so the tagline
       has something to sit on. Here the picture is tall enough that its own
       dark studio backdrop IS that something: the overlay is absolute at the
       top of .mmd-rn-dusk, the photograph now starts at the same line, and the
       tagline lands on the empty space above the cast's heads. Any negative
       margin now just pushes the heads out of frame again.

       display:contents, not block. The buttons have to sit BETWEEN the picture
       and the copy, and [mmd_home_about] emits both as one block — so the block
       is dissolved and its two children are ordered around the new row. Its
       background is the page's own black and its padding is restated on the
       body below, so nothing is lost with it. */
    /* Black, because display:contents below takes .mmd-home-about's background
       with it and the dusk's own --mmd-rn-dusk mauve — the sampled stand-in for
       the photograph — would otherwise show behind the buttons and the copy. */
    /* THE WHOLE FIELD RIDES UP INTO THE BRUSH, which is how the pricing pill
       gets over the hero banner. Lifting the PILL on its own does not work:
       .mmd-rn-dusk has to clip (see overflow below, which is what lets the
       photograph be scaled past its own box without widening the page), and a
       pill given a negative margin would simply be cut off at the field's top
       edge. Moving the container takes the pill with it and everything stays
       inside the clip.

       40px, arrived at by rendering rather than reasoning, and the number is
       squeezed between two things: less than about 30 and the pill drops clear
       of the paint; more than about 55 and it starts cutting the descenders off
       "IN MURDER MYSTERY EVENTS". An earlier attempt at 200px — worked out from
       where the paint LOOKED like it ended — put the pill across the headline
       entirely, because the banner's artwork fills far more of its 240px box
       than the visible tear suggests. Move this by looking, not by arithmetic.

       The photograph rides up too and loses its top edge behind the banner.
       That is the phone's behaviour as well, and the top of this frame is empty
       studio backdrop, so there is nothing up there to lose. */
    .mmd-main > .mmd-rn-dusk { margin-top: calc( -2 * var(--mmd-rn-tear) - 40px ); }

    /* Above the banner, not under it. .mmd-hero-overlay sits at z-index 3 — the
       overlay's own 2 put the pill behind the paint, which is why raising it
       was invisible until this line existed. */
    .mmd-rn-dusk__over { z-index: 4; }

    /* Black, because display:contents below takes .mmd-home-about's background
       with it and the dusk's own --mmd-rn-dusk mauve — the sampled stand-in for
       the photograph — would otherwise show behind the buttons and the copy.
       overflow:hidden is what lets the picture be scaled up past its own box
       without widening the page. */
    .mmd-rn-dusk           { display: flex; flex-direction: column; background: var(--mmd-rn-black); overflow: hidden; }
    .mmd-home-about        { display: contents; }
    .mmd-home-about__image {
        order: 1;
        aspect-ratio: 1 / 1;
        object-position: center bottom;
        margin-top: 0;
        /* THE ZOOM IS A TRANSFORM, not a tighter aspect-ratio, and the reason is
           worth keeping. With object-fit:cover the picture is already scaled to
           the box's WIDTH — 1168 across a 1270px source — so narrowing the ratio
           only shows less of it, it does not make anybody bigger. The subject
           only grows if cover starts scaling by HEIGHT instead, which needs a
           box taller than 1.26x its width: at this column that is a 1470px-plus
           section for a few percent of zoom.
           Scaling from the bottom edge keeps the cast anchored where
           object-position put them and lets the clip above take the overflow. */
        transform: scale( 1.15 );
        transform-origin: center bottom;
        /* The phone leaves 32px under the picture before the copy. Here the
           buttons have to reach UP into the picture, and that gap was cancelling
           most of their negative margin — so it goes, and the lift below is the
           only thing setting the overlap. */
        margin-bottom: 0;
    }
    .mmd-rn-dusk__ctas     { order: 2; }
    .mmd-home-about__body  { order: 3; padding-block: var(--mmd-space-10); }

    /* The two calls to action. Gold on black with ink labels, matching the
       pricing pill above them rather than the bottom bar's red type — on this
       photograph they are part of the section, not part of the chrome. */
    /* The pair straddle the photograph's bottom edge rather than sitting under
       it — roughly half on the picture, half on the black, as the comp draws
       them. The negative margin does the lifting; position/z-index is what
       makes them paint OVER the image rather than behind it, since the image is
       a static flex item and would otherwise win on document order. */
    .mmd-rn-dusk__ctas {
        display: flex;
        justify-content: center;
        gap: var(--mmd-space-8);
        padding-inline: var(--mmd-gutter);
        position: relative;
        z-index: 2;
        margin-top: calc( -1 * var(--mmd-space-12) );
    }
    .mmd-rn-dusk__cta {
        background: var(--mmd-rn-gold);
        color: var(--mmd-rn-ink);
        font-family: var(--mmd-font-sans);
        font-size: clamp( 1.5rem, 3vw, 2.5rem );
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.01em;
        border-radius: var(--mmd-radius-pill);
        padding: var(--mmd-space-4) var(--mmd-space-12);
        text-align: center;
        transition: opacity 0.15s;
    }
    .mmd-rn-dusk__cta:hover { opacity: 0.85; color: var(--mmd-rn-ink); text-decoration: none; }
    /* Copy scales with the band. The clamp's ceiling was sized for a phone, so
       at any desktop width it was pinned at 18px in the middle of a 1160px
       column. */
    .mmd-home-about__body p { font-size: clamp( 0.95rem, 3.9vw, 1.6rem ); max-width: 48rem; }

    /* -- Story panels ------------------------------------------------------ */
    /* The row's height is capped at 310px, which is right on a phone and far too
       short once the row is 1160px wide. Raising the cap and narrowing the prop
       together gets the box back to roughly square: at 1280 that is a 394x430
       box holding art between 0.56 and 1.0, so the tallest cut-out now shows
       about 61% of its height instead of 32%. Heads stay on. */
    .mmd-home-story__row  { min-height: clamp( 165px, 52vw, 430px ); }
    .mmd-home-story__prop { width: 34%; max-width: 34%; }
    /* The homepage insets its left-hand props by 20% of the row (see the note on
       that rule). At 34% wide that would push the figure past the copy, so the
       inset comes down proportionally. */
    .mmd-home-story .mmd-home-story__row:not(.mmd-home-story__row--reverse) .mmd-home-story__prop { left: 12%; }

    /* -- Off Broadway: the closing brush band ------------------------------ */
    /* Deeper, and overlapping its neighbours at BOTH edges — at desktop the
       band was a thin stripe with white above it and a 32px section gap below,
       so its torn edges had nothing to tear INTO and read as a printed
       rectangle rather than a brush stroke.

       Three changes, and they only work together:
         · padding doubles (space-8 -> space-16, plus the tear allowance), which
           is what makes it a band rather than a stripe;
         · the top margin goes, so the ragged top edge cuts straight into the
           white above instead of floating 40px below it;
         · the section that follows is pulled up under the bottom edge.

       -4x the tear on the neighbour, where the rest of this file uses -2x. The
       usual value is tuned for a torn edge meeting a flat colour; this one
       meets a photograph, and there is a limit worth knowing about before
       anyone raises it further. The band's bottom is only ragged for roughly
       the depth of its own tear zone — past that it is solid paint, so extra
       overlap stops looking like more overlap and just hides more of the
       picture. The top edge reads more strongly than the bottom for the same
       reason it always will: white behind a tear shows every notch, a dark
       photograph behind one shows almost none.

       `+ *` rather than naming Shark Tank: the homepage order is editable, and
       whatever a city puts after Off Broadway should tuck under the same edge. */
    .mmd-home-broadway__close {
        padding-block: calc( var(--mmd-space-16) + var(--mmd-rn-tear) );
        margin-top: 0;
        /* AND THIS IS WHAT ACTUALLY MAKES THE OVERLAP VISIBLE. Pulling the next
           section up was never the problem — it measured a real 56px of
           overlap while still looking like a hard straight line. The section
           underneath carries its own opaque background and comes later in the
           document, so it was painting straight over the paint it was supposed
           to be tucked beneath. Lifting the band out of document order is the
           fix; the negative margin alone can never be. */
        position: relative;
        z-index: 1;
    }
    .mmd-main > .mmd-home-broadway + * { margin-top: calc( -4 * var(--mmd-rn-tear) ); }

    /* -- Off Broadway pictures --------------------------------------------- */
    /* The parent flips these to 4/3 on desktop because ITS pictures are
       landscape. This theme's are not — SEDS Fever and the Carmine's candid are
       both 900x1600 — so the flip was cropping a 9:16 portrait into a landscape
       band and cutting the subject's head off.

       2/3, which is TALLER than the phone's own 3/4: these are 9:16 sources, so
       the nearer the box gets to portrait the less of the subject is thrown
       away. That takes the crop from 137% off-ratio down to 19%. */
    .mmd-home-broadway__pic { aspect-ratio: 2 / 3; flex-basis: 34%; max-width: 34%; }

    /* -- Shark Tank sticker ------------------------------------------------- */
    /* The sticker is a 700x394 SVG swapped in with content:url(). Something in
       the cascade was giving it a height as well as a width, so it rendered
       200x199 — squashed, not cropped, which is the one thing no photograph or
       logo should ever be. Naming height:auto and object-fit:contain means it
       cannot be distorted whatever else sets a box around it. */
    .mmd-home-sharktank__logo { height: auto; object-fit: contain; }

    /* -- Type: the body copy comes up a tier ------------------------------- */
    /* MEASURED, not guessed. Computed sizes on the live pages at 1249px before
       this block existed:

           headings          36 - 57px
           lead copy         16 - 20px
           body copy         12 - 15px

       Every one of those body rules is a clamp whose CEILING was chosen for a
       375px screen — `clamp( 0.7rem, 3vw, 0.875rem )` and friends. The vw term
       wins on a phone and the ceiling never binds; at 1249px the vw term is
       enormous, the ceiling always binds, and the copy is frozen at its phone
       size next to a 57px headline. Nothing scales because nothing was ever
       asked to.

       Two tiers rather than one number, so the existing hierarchy survives:
       body goes to 18px and lead to 22px, both about 1.3x. The ratio against
       the headings goes from roughly 1:4 to 1:2.5.

       WHY NOT RAISE --mmd-text-sm AND FRIENDS AT THIS BREAKPOINT. It would be
       four lines instead of twenty and it was the first thing I tried on paper.
       But those tokens also size the nav pills and the bottom-bar buttons, and
       the parent's own comment warns the header row has no slack — logo, phone
       chip and six pills already need ~800px. Growing --mmd-text-xs to fix a
       paragraph would push the nav into a second line. The tokens are shared
       chrome; these selectors are copy. */
    .mmd-home-story__text,
    .mmd-home-broadway__text,
    .mmd-shows-variety__body,
    .mmd-shows-happens__text,
    .mmd-shows-reserve__body,
    .mmd-shows-venue__desc,
    .mmd-shows-venue__arrival,
    .mmd-shows-variety__why-body p,
    .mmd-pe-about__col-text,
    .mmd-pe-note__text p,
    .mmd-pe-feature__body p,
    .mmd-pe-howto__step { font-size: 1.125rem; line-height: 1.55; }

    .mmd-home-story__text--full,
    .mmd-home-broadway__close,
    .mmd-shows-intro__text,
    .mmd-shows-broadway__intro,
    .mmd-shows-happens__lead,
    .mmd-shows-includes__kicker-body,
    .mmd-shows-variety__kicker,
    .mmd-pe-about__intro p,
    .mmd-pe-about__lead-in,
    .mmd-pe-howto__note-lead { font-size: 1.375rem; line-height: 1.5; }

    /* The form's small print. 12px is a phone floor — it was set there because
       the consent copy has a minimum readable size and a 375px column has no
       room to spare. A 1170px form has plenty, and consent text is the last
       thing that should be hard to read. */
    .mmd-rn-form .mmd-form__field--checkbox label,
    .mmd-rn-form .mmd-form__legal { font-size: 0.875rem; }

    /* -- Story heading: centred, and sized to the panel it sits on ---------- */
    /* The phone comp sets this left, which is why the base rule does; the
       desktop comp centres it over the full width of the navy band. The size
       ceiling is the same phone-tuned clamp as the copy above — 2.25rem — so it
       was arriving at 36px on a band 1160px wide. */
    .mmd-home-story__heading {
        text-align: center;
        font-size: clamp( 1.5rem, 4vw, 3.25rem );
    }

    /* -- Private Events: section widths ------------------------------------ */
    /* The parent caps this one section at --mmd-copy-max (1000px) and centres
       it, while the tagline above and the lead form below run the full ~1170px
       column. On a phone that cap never binds and nothing shows; at desktop the
       white band visibly steps in by 85px a side, so the page reads as three
       different measures stacked up. The cap is a COPY measure applied to a
       whole section — the copy inside already has its own max-width. */
    .mmd-pe-about { max-width: none; }

    /* -- Private Events: the tagline tucks under the brush ------------------ */
    /* Same move as the homepage's dusk field. The banner's torn hem needs
       something behind it; without this there is 32px of page black between the
       tear and the white band, so the ragged edge reads as a fringe rather than
       as paint meeting paper. The white slides up under it instead. */
    .mmd-page-private-events .mmd-main > .mmd-home-tagline { margin-top: calc( -2 * var(--mmd-rn-tear) ); }
    /* And the two WHITE bands butt rather than showing a stripe of page between
       them. The tagline and the about section are one white field in the
       design; the section gap that separates every other pair of sections reads
       here as a seam down the middle of a single sheet. */
    .mmd-page-private-events .mmd-main > .mmd-pe-about { margin-top: 0; }

    /* -- Private Events: How To Throw a Party ------------------------------- */
    /* This section is 1170px wide and its content was laid out for 375. The
       steps list is capped at 560px, each paragraph inside that is capped again
       at 290px, and the sticky note at 400px — so a full-width red field was
       carrying a 290px ribbon of 14px type down the middle with doodles
       floating in the empty space either side.

       The caps are measures, and a measure IS worth keeping — 290px of 14px
       type is about 45 characters, which is a comfortable line. The mistake is
       that the measure never grew with the type. Raising both together keeps
       the line length honest while letting the section carry its own width.

       The step <p> has to be named directly: the rule up in the type block sets
       the <li>, and the paragraph inside carries its own --mmd-text-sm, which
       wins over anything inherited. */
    .mmd-pe-howto__steps                { max-width: 760px; }
    .mmd-pe-howto__step p,
    .mmd-pe-howto__circled p            { font-size: 1.125rem; line-height: 1.55; max-width: 34rem; }
    .mmd-pe-howto__circled              { max-width: 34rem; }
    /* The note grows with everything else — its copy is set as a proportion of
       the sticky-note graphic, so the graphic has to lead. */
    .mmd-pe-howto__note                 { max-width: 480px; }
    .mmd-pe-howto__note-inner p:last-child { font-size: 1rem; line-height: 1.5; }

    /* -- Private Events: the torn cream sheets ------------------------------
       THE TEAR ASSET, MEASURED. cream-tear.webp is 1600x976 and the parent
       draws it at `100% auto`, so at any width its height is a FIXED SHARE of
       that width and every landmark in it can be written as one too:

           rows   0 -  76   fully transparent   (0    - 4.8% of the width)
           rows  77 - 146   the top tear        (4.8% - 9.2%)
           rows 147 - 723   solid cream         (9.2% - 45.2%)
           rows 724 - 896   the bottom tear     (45.2% - 56.0%)
           rows 897 - 975   fully transparent   (56.0% - 61.0%)

       Those percentages are why the section below is written in percentages
       rather than pixels: a padding or margin percentage resolves against the
       containing block's WIDTH, so it tracks the image exactly at any viewport.
       If the asset is ever replaced, re-measure its alpha and update these.

       WHAT WAS WRONG. At 375px the sheet is 229px tall and the intro's box is
       about that, so both torn edges land and the design works. At 1280 the
       same sheet is 780px tall inside a ~310px box: the top tear shows, the
       bottom tear is clipped away below the box, and the cream meets the red as
       a ruled line. The pill was in trouble at the other end for the same
       reason — the sheet's transparent top is 4.8% of the width, 18px at phone
       size but 61px at desktop, so the pill that sat just below the tear ended
       up floating on the page black above it.

       Squashing the sheet to fit (background-size: 100% 100%) was the obvious
       fix and is the wrong one: it flattens the ragged edge, which is the only
       thing the image is for. The bottom edge is drawn as its own slice of the
       SAME file instead, anchored `bottom center` at the same `100% auto`
       scale — so it is literally the same pixels at the same size, and the two
       creams cannot drift apart the way a cream TOKEN behind the image would
       (the asset's paper is #F3EAD9; --mmd-cream is #E9E2D0). */
    /* NO TORN EDGE AT THE TOP OF THIS SHEET — the comp doesn't draw one. The
       paper simply starts where the occasions section's white panel ends, and
       the only torn edge is the one at the foot, into the red.

       The first build of this fix kept the parent's top tear and paid for it in
       page black: the sheet's transparent margin is 4.8% of the width, which is
       18px at phone size and 61px at desktop, so a tear that reads as paper
       torn off a black page on a phone reads as a black BAND on a wide one.
       Filling that band with paper would have hidden the tear anyway.

       So the intro carries the flat paper colour and the parent's sheet is
       dropped here; the foot slice below still comes from the image, and
       --mmd-rn-paper is sampled from that same image so the two meet without a
       seam. */
    .mmd-pe-howto__intro {
        background: var(--mmd-rn-paper);
        padding-top: var(--mmd-space-10);
    }
    .mmd-pe-howto__intro::before { display: none; }

    /* And the black strip above it goes with the section's own bottom padding,
       so the white occasions panel lands straight on the paper the way the comp
       has it. The section keeps its top padding.

       THE LAST 32px OF THE SECTION ARE PAPER, not black, and that is not a
       flourish. The panel that ends this section has rounded bottom corners;
       with the padding gone it is flush with the section's edge, so the two
       notches where the page shows through those curves were the only black
       left in the join. Paper has to be BEHIND them, which means it has to be
       painted by this section — anything hung off the sheet below paints later
       and would cover the panel rather than back it. */
    .mmd-page-private-events .mmd-pe-occasions {
        padding-bottom: 0;
        background: linear-gradient( to bottom,
            var(--mmd-rn-black) calc( 100% - var(--mmd-radius-xl) ),
            var(--mmd-rn-paper)  calc( 100% - var(--mmd-radius-xl) ) );
    }
    .mmd-pe-howto__intro::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        /* 280/1600 = 17.5% of the width: the bottom tear (10.8%) plus a margin
           of solid cream above it, so the slice always opens on paper. */
        aspect-ratio: 1600 / 280;
        /* Reaching into the parent theme's folder is a hard dependency on its
           directory name — which this theme already has, in the Template: line
           of the header above. Copying the file in would be 21KB of the same
           pixels shipped to every site on every deploy. */
        background: url( '../mmd-parent-2026/assets/images/private/cream-tear.webp' ) bottom center / 100% auto no-repeat;
        z-index: -1;
        pointer-events: none;
    }
    .mmd-pe-howto__body {
        /* Clear the slice hanging over the top of the red. */
        padding-top: calc( 17.5% + var(--mmd-space-8) );
        /* And leave room at the foot for the sheet the next section hangs up
           over it (below) — without this the party photo sits in the tear. */
        padding-bottom: calc( 9.2% + var(--mmd-space-8) );
    }

    /* -- Private Events: red panel into the purple banner -------------------
       The comp tears the bottom of the red panel into a cream band and starts
       the purple brush on that band. Ours had 32px of page black between the
       two, so the brush's ragged top edge — the whole reason it is a brush —
       read as a fringe on black instead of paint laid on paper. Same fault the
       Since-2002 gold band had, and the same shape of fix.

       The sheet hangs off the FEATURES section rather than the red panel
       because it has to cross the boundary between them: lifted by 9.2% it
       puts its torn edge on the red's last 118px (at 1280) and opens its cream
       exactly where the red stops.

       PAINT ORDER, not margins, is what makes this work. `.mmd-pe-howto__body`
       is position:relative, so it paints in the positioned level and a plain
       background on a later sibling would go under it. The sheet is a
       positioned pseudo at z-index 0 — same level, later in the document, so
       it wins — and the banner is lifted to 1 above it. The white panels below
       are unpositioned and paint UNDER the sheet, which is why the sheet is
       bounded to 16.25% and stops well short of them.

       Scoped to a features section that directly follows the how-to. If a site
       reorders these blocks the selector simply stops matching and the section
       falls back to how it looks today, rather than hanging a torn edge over
       whatever happens to be above it. */
    .mmd-page-private-events .mmd-main > .mmd-pe-howto + .mmd-pe-features {
        position: relative;
        margin-top: 0;
        /* Drops the banner into the cream band. Padding, not a margin on the
           header: the header is the section's first child, so a top margin
           would collapse out through the section and move the whole thing
           down instead of moving the banner within it. Measured off the comp,
           where the paper showing between the tear and the brush is about 7%
           of the width. */
        padding-top: 7%;
    }
    .mmd-page-private-events .mmd-main > .mmd-pe-howto + .mmd-pe-features::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        /* Percentage margin on an absolutely positioned box resolves against
           its containing block's width, which is what lets this line up with
           the aspect-ratio below. */
        margin-top: -9.2%;
        /* 300/1600 = 18.75%: the tear (9.2%) plus 9.5% of cream. The banner
           starts 7% down and its ragged edge is worth about another 1.5%, so
           the paper still runs a little past where the brush turns solid and
           the sheet's own flat bottom is never the thing you see. */
        aspect-ratio: 1600 / 300;
        background: url( '../mmd-parent-2026/assets/images/private/cream-tear.webp' ) top center / 100% auto no-repeat;
        z-index: 0;
        pointer-events: none;
    }
    .mmd-page-private-events .mmd-main > .mmd-pe-howto + .mmd-pe-features .mmd-pe-features__header {
        position: relative;
        z-index: 1;
    }

    /* -- Private Events: the panels sit on a white sheet, not on the page ---
       The white card under the banner used to be built from the panels' own
       top and bottom borders, with the page's black showing around it — the
       note up in the Why Us block explains why that was the only way to span a
       card across two sibling <section>s.

       It costs two things at desktop, and the comp has neither: a black strip
       between the banner and the first panel, and the brush's ragged BOTTOM
       edge fringing on black instead of laying paint over paper. Painting both
       sections white makes the sheet real, and the borders that faked it just
       become part of it. The banner's bottom margin goes with them — it was
       card-to-banner clearance, and there is no gap left to clear.

       The cream sheet above still wins over this: it is a positioned pseudo and
       this is a plain background, so it paints later. */
    .mmd-page-private-events .mmd-main > .mmd-pe-features { background: var(--mmd-rn-white); }
    .mmd-page-private-events .mmd-main > .mmd-pe-features .mmd-pe-features__header { margin-bottom: 0; }

    /* -- Public Shows: New Themes / Perfect For ----------------------------- */
    /* Back to the parent's desktop width. The 46% here is a mobile value that
       had no business surviving the breakpoint: at 46% the box came out at
       449x520 and the landscape source in the first card was being cropped 42%
       away from its own shape. */
    .mmd-shows-variety__photo { flex: 0 0 38%; width: 38%; }

    /* -- Public Shows: the venue cluster, re-sequenced ----------------------
       Desktop reads: identity pills, show dates, What's Included beside the
       Dinner Menu, then the venue detail card.

       That is what a visitor to this page actually wants in that order — when
       is it, what do I get, and only then where is it and how do I park. The
       venue card is the longest block on the page and was sitting between the
       dates and the thing that sells them.

       IT IS NOT A BLOCK MOVE. Both halves come out of [mmd_shows_list] inside
       one <section>, so there is nothing in the page body to drag past
       anything else. DEPLOY.md says so; this is the CSS half of that note.

           section.mmd-shows-venue
             div.mmd-shows-venue__grid      <- the parent's desktop two-column grid
               div.mmd-shows-venue__aside   -> pills, dinner menu
               div.mmd-shows-venue__main    -> venue card, What's Included
             div.mmd-shows-times

       The showtimes are a SIBLING of the very grid they have to land inside.
       Dissolving __grid with display:contents lifts all five blocks onto a
       grid declared on the section itself, where one set of placements covers
       the lot. The parent already dissolves __aside and __main the same way,
       and display:contents chains: a grandchild of two dissolved wrappers
       becomes an item of the nearest real grid.

       THE PARENT'S TWO VARIANTS have to be answered rather than inherited. Its
       multi-venue rule moves the card to row 2 at (0,2,0), which would beat a
       single-class rule here whatever the source order — so every placement
       below is written at (0,2,0) or better. The no-included case is the one
       worth keeping, and it matters more now than it did: with the card no
       longer sitting in that row, a market whose What's Included has been
       hoisted market-wide would leave column 1 of row 3 simply empty, so the
       menu has to span both.

       The phone keeps the comp's own sequence — pills, dates, venue card,
       What's Included, Dinner Menu — in the max-width:768 block up in the
       Venue cluster section. The two breakpoints deliberately differ: on one
       column the venue card between the dates and the ticket detail is a
       scroll, not a wall, and that arrangement is what the comp draws.

       Same accessibility trade the phone makes, and the parent made before
       either of us: `order` and grid placement move boxes, not the document,
       so a keyboard user still reaches the venue card's map link before the
       Buy Tickets buttons. If that ever has to be right rather than close, the
       fix is in the markup.

       margin-inline is deliberately NOT touched on the showtimes panel. It
       carries the parent's -16px bleed today and spans the full width either
       way, so leaving it alone keeps the panel exactly where it already sits
       relative to the venue card. Only the top margin goes: the row gap
       separates them now, and the parent's spacer was sized for a block
       sitting under the grid. */
    /* ROW 3 IS THE FLEXIBLE ONE, and that is what keeps the column tidy. The
       Dinner Menu spans rows 2 and 3 and is far the taller of the two columns
       — every course, the dietary note and a photograph, against two pills and
       four short cards — so its surplus height has to go somewhere. Left to
       `auto` tracks the grid splits it between them, and the leftover surfaces
       as a gap under the pills AND another under What's Included.

       A spanning item that crosses a FLEXIBLE track is excluded from intrinsic
       track sizing (CSS Grid §12.5), so `1fr` on row 3 takes the menu out of
       row 2's sizing entirely: the pills get exactly their content, and every
       spare pixel collects once, at the foot of What's Included, where it is
       just the bottom of the column. */
    .mmd-shows-venue {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr auto;
        align-items: start;
        column-gap: var(--mmd-space-12);
        row-gap: var(--mmd-space-8);
    }
    .mmd-shows-venue__grid { display: contents; }
    .mmd-shows-venue .mmd-shows-times        { grid-column: 1 / -1; grid-row: 1; margin-top: 0; }
    /* WHERE / QUESTIONS lead the What's Included column rather than heading the
       whole section. They are the practical half of a ticket — where is it, who
       do I call — which is what the block under them is about, and at full
       width across the top they were a pair of wide empty pills between the
       showtimes and everything else. Stacked, because half the column is not
       enough for two of them side by side. */
    .mmd-shows-venue .mmd-shows-venue__pills { grid-column: 1;      grid-row: 2; flex-direction: column; }
    .mmd-shows-venue .mmd-shows-included     { grid-column: 1;      grid-row: 3; align-self: start; }
    .mmd-shows-venue .mmd-shows-menu         { grid-column: 2;      grid-row: 2 / span 2; }
    .mmd-shows-venue .mmd-shows-venue__card  { grid-column: 1 / -1; grid-row: 4; }
    /* Hoisted What's Included: nothing in column 1's first row, so the menu
       takes the width and stops spanning a row that is not there. */
    .mmd-shows-venue .mmd-shows-venue__grid--no-included .mmd-shows-menu { grid-column: 1 / -1; grid-row: 2; }

    /* -- Public Shows: the venue card in quarters ---------------------------
       Two changes that need the same mechanism.

       THE FOUR FACT SQUARES ARE NOT SIBLINGS. Only two of them — the address
       and Now Running — live in .mmd-shows-venue__facts; Parking and Transit
       are emitted as direct children of the card, one after the other, with a
       --wide modifier that spreads each across the full width. So the card
       reads as a 2-up pair followed by two long bars. Dissolving __facts with
       display:contents lifts its pair onto a grid on the card itself, where
       all four are siblings at last and fall into a 2x2.

       THE DESCRIPTION MOVES UP, above those squares and under the name. In the
       markup it sits after __facts and before Parking, i.e. in the MIDDLE of
       the four, which is the other reason they could never be quarters. `order`
       is what re-sequences it, and grid honours order for auto-placement, so
       the same grid does both jobs: the named blocks below take orders 1–5 and
       every fact takes 6, which leaves the four to fill the cells after the
       copy in their own document order.

       Explicit `grid-row` was the obvious alternative and is worse: the photo,
       the duration, the description and the Parking and Transit cards are all
       optional per venue, so fixed row numbers would leave empty tracks — and
       their gaps — on any city that has not filled one in. Order carries no
       such cost; a missing block simply is not there. */
    .mmd-shows-venue__card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--mmd-space-3);
    }
    .mmd-shows-venue__facts { display: contents; }
    .mmd-shows-venue__photo,
    .mmd-shows-venue__cardhead,
    .mmd-shows-venue__duration,
    .mmd-shows-venue__desc,
    .mmd-shows-venue__arrival,
    .mmd-shows-venue__dates-btn,
    .mmd-shows-venue__nodates { grid-column: 1 / -1; }
    .mmd-shows-venue__photo    { order: 1; }
    .mmd-shows-venue__cardhead { order: 2; }
    .mmd-shows-venue__duration { order: 3; }
    .mmd-shows-venue__desc     { order: 4; }
    .mmd-shows-venue__arrival  { order: 5; }
    .mmd-shows-venue__card .mmd-shows-fact { order: 6; }
    .mmd-shows-venue__dates-btn,
    .mmd-shows-venue__nodates  { order: 7; }
    /* The wide pair carried a top margin to set them off from the 2-up row
       above. They ARE that row now, and the margin would make the second rank
       of squares sit lower than the first. */
    .mmd-shows-venue__card .mmd-shows-fact--wide { margin-top: 0; }
    /* Quarters means EQUAL quarters, so the grid's default stretch is left
       alone and the pair in each rank comes out the same depth whatever the
       copy. The content then has to be centred inside the square it was given,
       or a one-line Parking card floats at the top of a box sized by a
       four-line Transit one. */
    .mmd-shows-venue__card .mmd-shows-fact { justify-content: center; }
    /* Equal squares. --wide left-aligns its copy full width, which was right
       for a bar running the whole card and leaves the text hanging off centre
       in a quarter of it. */
    .mmd-shows-venue__card .mmd-shows-fact--wide .mmd-shows-fact__value {
        width: auto;
        text-align: center;
    }

    /* Price and running time centre under the name. The parent runs the head as
       a row with space-between and gives the price `margin-left: auto` to hold
       it right; the skin already turned that head into a column, which left the
       auto margin working in the cross axis and the price pinned to the right
       edge under a centred name. Auto on BOTH sides centres it instead. The
       duration is a block of its own and just needs telling. */
    .mmd-shows-venue__price    { margin-inline: auto; }
    .mmd-shows-venue__duration { text-align: center; }

    /* -- Public Shows: GET TICKETS NOW sits ON the paint --------------------
       Two things were wrong and only one of them was the offset.

       THE PAINT WAS PAINTING OVER THE BUTTON. The rule up in the intro block
       gives .mmd-shows-intro a stacking context at z-index 2 precisely so the
       gold would come out in front of the brush's torn hem — and 2 is not
       enough, because .mmd-hero-overlay is at 3. So the ragged strokes were
       drawn across the top of the gold, which is the "sliced by the ragged
       edge" outcome that comment says it exists to prevent. Exactly the trap
       the homepage's pricing pill hit; .mmd-rn-dusk__over needed 4 there for
       the same reason.

       THE LIFT IS A PHONE VALUE. -2× the tear token is 28px, which is most of
       a 375px hem and a fraction of a 1280px one — the brush scales with the
       width and the token does not.

       30px more, and the ceiling is the headline rather than the paint: at 50
       the gold sat across the bottom of "In Sacramento". There is only about
       70px of clear red between the last line of the hero and the brush's
       solid edge, so the button straddles that edge — its top third on the
       paint, the rest below it — the same way the homepage's pricing pill
       straddles the hero banner. Move this by looking, not by arithmetic.

       And it narrows to its label. Full width is right on a phone, where the
       button IS the column; at 1280 a 1130px gold bar reads as a band across
       the page rather than as the pill the comp draws. fit-content plus real
       horizontal padding gives the same shape at any city's wording. */
    .mmd-main > .mmd-shows-intro {
        z-index: 4;
        margin-top: calc( -2 * var(--mmd-rn-tear) - 30px );
    }
    .mmd-shows-intro .mmd-shows-scroll-btn {
        width: fit-content;
        margin-inline: auto;
        padding-inline: var(--mmd-space-16);
    }

    /* AIR BETWEEN THE HEADLINE AND THE BUTTON, bought from the banner rather
       than from the lift. The gold has to keep straddling the hem, so moving it
       down is not available — it would simply drop off the paint. Deepening the
       banner's bottom padding pushes the hem (and the button with it) away from
       the last line of the heading instead, and the button's relationship to the
       paint is untouched.

       Not global: the homepage's pricing pill sits in this same band and its
       lift was measured against the padding as it is. Public Shows and Private
       Events are the two pages with a button here. */
    .mmd-page-public-shows .mmd-hero-overlay,
    .mmd-page-private-events .mmd-hero-overlay {
        padding-bottom: calc( var(--mmd-space-24) + var(--mmd-rn-tear) );
    }

    /* The Private Events button, in step with the shows button above. No extra
       lift here: the shows button needs one because its section sits in the
       flow below the paint, while this one is centred on its own strip by the
       transform, so the tuck is already -2 x the tear at both breakpoints. */
    .mmd-rn-hero-cta__btn { padding-inline: var(--mmd-space-16); }

    /* -- Public Shows: card interiors --------------------------------------
       Everything set INSIDE a card on this page was left at its phone size in
       the first desktop pass, on the reasoning that card copy is measured
       against the card rather than against the page. Held at 1280 that does
       not survive. Measured:

           .mmd-eb-event__buy-venue                     11.5px
           __theme / __venue / __ticket-type / __date   12.5px
           .mmd-eb-event__name                          14px
           .mmd-shows-menu__value / __note              14px
           .mmd-shows-fact__value                       14px
           .mmd-shows-venue__duration                   14px
           .mmd-shows-included__body p                  14px
           .mmd-shows-included__body h4                 16px

       — against headings running 30 to 60px in the same viewport. The cards
       did grow; only their contents didn't. The showtime rules have to name
       .mmd-shows-times because the skin's own (0,2,0) sizes live there. */
    .mmd-shows-included__body h4 { font-size: 1.125rem; }
    .mmd-shows-included__body p  { font-size: 1rem; line-height: 1.5; }
    .mmd-shows-menu__label       { font-size: 1.125rem; }
    .mmd-shows-menu__value       { font-size: 1rem; line-height: 1.55; }
    .mmd-shows-menu__note        { font-size: 1rem; line-height: 1.5; }
    .mmd-shows-fact__value       { font-size: 1rem; line-height: 1.5; }
    .mmd-shows-venue__duration   { font-size: 1rem; }
    .mmd-shows-includes__card p  { font-size: 1.0625rem; line-height: 1.5; }
    .mmd-shows-times .mmd-eb-event__name        { font-size: 1rem; }
    .mmd-shows-times .mmd-eb-event__date        { font-size: 0.9375rem; }
    .mmd-shows-times .mmd-eb-event__time,
    .mmd-shows-times .mmd-eb-event__venue,
    .mmd-shows-times .mmd-eb-event__theme,
    .mmd-shows-times .mmd-eb-event__ticket-type { font-size: 0.875rem; }

    /* TWO SHOW CARDS ACROSS ONLY WHEN TWO WILL FIT. The parent switches this
       list to a fixed `1fr 1fr` at 769px, and a show card is not a flexible
       thing: inside it sit a 80px poster, a Buy Tickets button and a details
       column, so the details get whatever is left. At 1280 that is about
       180px and reads fine; at 900 it is about 100px, and since the parent
       sets `overflow-wrap: anywhere` on those rows to stop long venue names
       overflowing, the column does not wrap — it hyphenlessly snaps words in
       half ("Sacrame / nto", "Spaghet / ti").

       auto-fit against a real minimum drops back to one card per row wherever
       two cannot be given 448px each, which is a little under 1100px of
       viewport. That was already the behaviour at 769px in everything but
       name; naming a minimum just stops it happening in a lie. */
    .mmd-shows-times .mmd-eb-events { grid-template-columns: repeat( auto-fit, minmax( 28rem, 1fr ) ); }

    /* -- Public Shows: measures ---------------------------------------------
       Size is only half of legibility; the other half is how far the eye has
       to travel back to find the next line. These were the widest lines on the
       page at 1280, in characters:

           .mmd-shows-fact__value      14px over 1040px   ~149
           .mmd-shows-venue__desc      18px over 1072px   ~119
           .mmd-shows-happens__text    18px over 1000px   ~111
           .mmd-shows-intro__text      22px over 1000px    ~91

       Every one of them is a full-width block that reads at a comfortable
       45–60 characters on a phone and was never given a ceiling, because at
       375px it never needed one. Capped in `em` rather than px so the cap is
       tied to the type it measures and the two move together — a city that
       rewrites the copy, or a later pass that moves the size, keeps the line
       length it was tuned for. */
    /* The cap that used to live here is now side padding on the box itself —
       see the note beside .mmd-shows-venue__desc up in the venue card. Left as
       `none` explicitly because the parent sets no max-width and a future
       reader would otherwise wonder where the 34em went. */
    .mmd-shows-venue__desc,
    .mmd-shows-venue__arrival  { max-width: none; margin-inline: 0; }
    .mmd-shows-fact--wide .mmd-shows-fact__value { max-width: 34em; }
    .mmd-shows-intro__text,
    .mmd-shows-broadway__intro { max-width: 30em; margin-inline: auto; }
    .mmd-shows-happens__text   { max-width: 34em; margin-inline: auto; }

    /* -- Public Shows: the ticket-includes tiles ---------------------------
       The desktop comp draws these as a 2 x 3 grid of square tiles — a big
       glyph over centred copy — with the closing line and its callout taking
       the sixth cell beside the last tile. The phone has them as a single
       column of wide pills with the icon inline, joined by the dotted weave,
       and that is right for one column: at 1136px it was a 760px ribbon of
       five pills with 380px of nothing beside it.

       THE CARDS AND THE CALLOUT ARE NOT SIBLINGS — the five cards live in
       .mmd-shows-includes__grid and the closing pair are siblings of it — so
       the grid is declared on the section and __grid is dissolved with
       display:contents, the same move the venue cluster needed.

       PLACEMENT IS BY COLUMN ONLY, deliberately. Naming rows would hard-code
       five cards, and the list is option-driven: a city can write a sixth
       ticket line. Giving just `grid-column: 2` to the closing pair leaves
       them auto-placed — each lands in the first row where column 2 is still
       free — so they follow the cards however many there are. align-self: end
       on the line pulls it down to sit on top of its callout instead of
       floating at the top of a tile-height row.

       The weave goes with the single column it was drawn for. Its <svg> is
       injected by the parent's ticketWeave() as the grid's first child, so
       with __grid dissolved it would otherwise take a cell of its own. */
    /* The column gap is the big one on purpose — the comp gives the channel
       between the two tiles about half a tile's width, which is what stops a
       2 x 3 grid of saturated blocks reading as a chequerboard. Rows need far
       less, because the tiles already have their own depth. */
    .mmd-shows-includes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--mmd-space-24);
        row-gap: var(--mmd-space-12);
        align-items: start;
    }
    .mmd-shows-includes__heading,
    .mmd-shows-includes__label { grid-column: 1 / -1; margin-bottom: 0; }
    .mmd-shows-includes__grid  { display: contents; }
    .mmd-shows-includes__path  { display: none; }

    /* Glyph over copy, centred, in a tile deep enough to read as a square. The
       icons carry the tile — at 3.25rem they were an inline bullet. */
    .mmd-shows-includes__card {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: var(--mmd-space-4);
        padding: var(--mmd-space-8) var(--mmd-space-6);
        min-height: 18rem;
        border-radius: var(--mmd-radius-xl);
    }
    .mmd-shows-includes__ico .mmd-shows-ico { width: 7rem; height: 7rem; }

    /* THE LAST TILE SPANS THE TWO ROWS the closing pair occupies, which is
       what centres them against it. The line and the callout are separate
       siblings with no wrapper to make a flex column of, so they have to live
       in adjacent rows; giving the tile beside them both rows makes those two
       rows share its height, and hugging the line to the foot of the first
       and the callout to the head of the second collects the pair on the
       boundary — the middle of the tile — instead of hanging off its bottom.

       :nth-of-type(odd) guards the span. The ticket list is option-driven, and
       this only holds while the last card lands in column 1: with an even
       number of lines it sits in column 2, where the closing pair already goes
       below it and a two-row span would collide with them. */
    .mmd-shows-includes__card:last-of-type:nth-of-type(odd) { grid-row: span 2; }

    /* The closing line is upright and dark in the comp, not the red italic the
       phone uses — beside a column of saturated tiles a red italic reads as a
       sixth thing shouting rather than as the quiet end of the list. */
    .mmd-shows-includes__kicker-title {
        grid-column: 2;
        align-self: end;
        color: var(--mmd-rn-ink);
        font-style: normal;
        text-align: center;
        margin: 0 0 var(--mmd-space-4);
    }
    /* And the callout inverts: white with a red hairline rather than the
       filled purple. On the phone it sits alone under the pills and the fill
       is what separates it from them; here it sits IN the grid, and a sixth
       filled block would read as another ticket line. */
    .mmd-shows-includes__kicker {
        grid-column: 2;
        align-self: start;
        background: var(--mmd-rn-white);
        border: 2px solid var(--mmd-rn-red);
        color: var(--mmd-rn-ink);
        max-width: none;
        margin: 0;
        text-align: center;
    }
    .mmd-shows-includes__kicker-body { color: var(--mmd-rn-ink); }

    /* -- Public Shows: Why Guests Love --------------------------------------
       THE BLACK CURVES AWAY at this join after all. The note on
       .mmd-shows-variety__why up in the base rules argued the opposite — that
       a real corner here would need an INVERTED one, the white rising at the
       edges rather than the black dipping at them — and that is wrong. The
       white below is the page, so all the panel has to do is round its own
       bottom and let the corners it gives up show what is behind: page white.
       No inversion, one property.

       It only reads as a corner once the white block reaches the panel's
       EDGES, which was the other half of the problem. The panel carries
       padding-inline: 64px at desktop and the block bleeds by --mmd-gutter,
       which is 16 — so the white card stopped 48px short on each side and two
       black slivers ran down beside it. Bleeding by the padding instead and
       putting it back as the block's own padding leaves the copy exactly where
       it was and takes the white to the edge.

       AND IT CANNOT BE A border-radius ON THE PANEL, which is the first thing
       to try and the reason this took two goes. The white block is the panel's
       last CHILD and its negative bottom margin takes it to the panel's own
       bottom edge — so the panel's rounded corners are underneath white paint
       and nothing shows. The corner that has to be drawn is at the TOP of the
       white block, 800px above where the panel actually ends, and there is no
       element boundary there at all.

       So it is drawn: a 64px band hung above the white block, black across the
       middle with a white quarter-disc at each end. Two radial gradients and a
       colour. The black in the band is the same black it covers, so only the
       two corners do anything — a rounded bottom on the panel, at the line
       where the panel stops looking like one.

       The circle is centred on the band's TOP edge, inset by its own radius:
       every point within 64px of that centre is inside the corner and stays
       black, everything else in the square is white. 63px/64px rather than a
       hard stop at 64 leaves a pixel for the edge to blend on.

       64px rather than the panel's own 32. The corner in the comp is about 9%
       of the frame's width, and that comp is a phone: 9% of 375 is close to
       --mmd-radius-xl, which is why 32 was right there and reads as a nick at
       1136. */
    .mmd-shows-variety__why {
        position: relative;
        /* Room for the band. The panel's own 40px flex gap is less than the
           64px the corner needs, so without this the curve is drawn straight
           over the "Costumes are always encouraged" line above it. */
        margin-top: var(--mmd-space-8);
        margin-inline: calc( -1 * var(--mmd-space-16) );
        padding-inline: var(--mmd-space-16);
        padding-block: var(--mmd-space-16);
    }
    .mmd-shows-variety__why::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 64px;
        background:
            radial-gradient( circle 64px at 64px 0,
                var(--mmd-rn-black) 0 63px, var(--mmd-rn-white) 64px ) left top / 64px 64px no-repeat,
            radial-gradient( circle 64px at 0 0,
                var(--mmd-rn-black) 0 63px, var(--mmd-rn-white) 64px ) right top / 64px 64px no-repeat,
            var(--mmd-rn-black);
        pointer-events: none;
    }
    /* 20px, a step above the page's body tier. This block is the closing
       argument of the page and it is set against a 52px heading; at 18px the
       two read as different documents. */
    .mmd-shows-variety__why-body p { font-size: 1.25rem; line-height: 1.6; }

    /* -- The rest of the site ----------------------------------------------
       Themes, the FAQ, the Blog, Team Building and the legal pages have no
       comp. The colour pass up in THE REST OF THE SITE put them on the theme;
       what none of them got is the correction the drawn pages needed, because
       the parent's type here was set against a 375px column and nothing told
       it the column had trebled. Measured at 1280:

           .mmd-page-header h1        40px   — 52 to 57 everywhere else
           .mmd-page-header p         16px over 700px
           .mmd-faq__question         16px over 1104px
           .mmd-faq__answer p         14px
           .mmd-theme-card h3         16px
           .mmd-theme-badge           11.5px
           .mmd-themes-cta h2         19.2px — 1.2rem, which is the browser's
                                               own default for an h2 and reads
                                               as a caption at this width
           .mmd-blog-card__title      16.8px
           .mmd-blog-card__excerpt    14px

       Nothing here is a design decision the comps could have answered; it is
       the same page brought up to the size the page is now being read at. */
    .mmd-page-header h1 { font-size: clamp( 2.25rem, 5vw, 3.25rem ); }
    .mmd-page-header p  { font-size: 1.125rem; line-height: 1.6; }

    /* The accordion ran the full 1136px column, so each question sat alone on
       a line with two thirds of a white card empty beside it, and the answer
       under it was 14px over the same span. A list of one-line rows does not
       want the page's full measure. */
    .mmd-faq            { max-width: 900px; margin-inline: auto; }
    .mmd-faq__question  { font-size: 1.125rem; }
    .mmd-faq__answer p  { font-size: 1rem; }
    /* The row's open and hover states were a cream tint on a paper-white row.
       Both of those tokens are white now (see the note in Tokens), so the tint
       has to come from somewhere else or an open question looks shut. The
       hairline at a low alpha is the same ink the borders use, so it reads as
       a shade of the card rather than as a new colour. */
    .mmd-faq__question:hover,
    .mmd-faq__question[aria-expanded="true"],
    .mmd-faq__answer { background: rgba( 17, 17, 17, 0.045 ); }

    /* Themes. The card picture is a fixed 180px band, which is a phone value:
       at 340px wide that is nearly 2:1, and these are posters. */
    .mmd-theme-card__image img  { height: 220px; }
    .mmd-theme-card__content h3 { font-size: 1.25rem; }
    .mmd-theme-card__content p  { font-size: 1rem; line-height: 1.55; }
    .mmd-theme-badge            { font-size: 0.8125rem; }
    .mmd-themes-cta__inner h2   { font-size: clamp( 1.75rem, 3.5vw, 2.5rem ); }
    .mmd-themes-cta__inner p    { font-size: 1.125rem; }

    /* The single theme page, same treatment. Its h1 was 1.8rem and its body
       copy 0.95rem — a detail page set smaller than the grid that links to it. */
    .mmd-theme-hero__content h1       { font-size: clamp( 2rem, 4vw, 2.75rem ); }
    .mmd-theme-hero__tagline          { font-size: 1.125rem; }
    .mmd-theme-content__description,
    .mmd-theme-content__description p { font-size: 1.0625rem; }
    .mmd-theme-detail                 { font-size: 1rem; }
    .mmd-theme-sidebar__box p         { font-size: 1rem; }
    .mmd-theme-related__inner h2      { font-size: clamp( 1.75rem, 3.5vw, 2.5rem ); }

    /* Blog */
    .mmd-blog-card__title     { font-size: 1.25rem; }
    .mmd-blog-card__excerpt,
    .mmd-blog-card__excerpt p { font-size: 1rem; }
    .mmd-blog-card__more      { font-size: 0.9375rem; }

    /* The legal and site-map pages, which this install has no copies of — so
       these are written from the template rather than from a render. A body
       page with no cap runs to about 140 characters a line at this width, and
       that is the one thing certain to be wrong on all of them. Centred rather
       than left, because .mmd-content is also the 404, which is centred. */
    .mmd-content { max-width: 900px; margin-inline: auto; }
    .mmd-content__body p,
    .mmd-content__body li { font-size: 1.0625rem; line-height: 1.65; }

    /* And the consent copy under every form on those pages. 14px running the
       form's full 1096px is about 157 characters — the widest line anywhere on
       the site. The size was already dealt with in the type block above; this
       is the measure. */
    .mmd-rn-form .mmd-form__legal { max-width: 46em; margin-inline: auto; }
    .mmd-rn-form .mmd-form__field--checkbox label { max-width: 46em; }

    /* -- The lead form goes two-column ---------------------------------------
       The desktop comp splits the white sheet: the heading, the fields, the
       button and the marker sign-off in a left column, and the butler standing
       on a full-height GOLD panel down the right. On a phone he is a cut-out
       leaning into the fields from the corner; at desktop he has a field of his
       own.

       THE GOLD MOVES OFF THE CLUES BOX AND ONTO HIM. There is one gold surface
       in this card either way — the phone comp puts it behind the optional
       field, the desktop comp behind the butler — so the textarea goes white
       here. Two gold areas would be two accents fighting.

       HE IS POSITIONED AGAINST THE SHEET, NOT HIS GROUP. In the markup he is
       the third item in .mmd-rn-form__close, stacked in one grid cell with the
       button so the two can overlap. That is right on a phone and wrong here:
       he has to span the whole card, not the height of a button. Taking the
       group out of the positioned flow lets him address the sheet directly —
       the button keeps its own z-index, so nothing else in the group needs it.

       The panel is drawn as ::after on the sheet rather than as an element,
       because there is nothing in the markup between the fields and the image
       to paint. Absolute positioning resolves against the PADDING box, so it
       butts the sheet's 4px gold border and the two read as one piece; the
       radius is the sheet's less that border. */
    .mmd-rn-form .mmd-lead-form__inner {
        position: relative;
        overflow: hidden;
        padding: var(--mmd-space-10) calc( 37% + var(--mmd-space-8) ) var(--mmd-space-8) var(--mmd-space-10);
    }
    .mmd-rn-form .mmd-lead-form__inner::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 37%;
        background: var(--mmd-rn-gold);
        border-radius: 0 calc( var(--mmd-radius-lg) - 4px ) calc( var(--mmd-radius-lg) - 4px ) 0;
    }
    /* Left, as drawn — the heading heads its column rather than the card. */
    .mmd-rn-form .mmd-lead-form__inner > h2 { text-align: left; }
    /* White here, gold on the phone. See the note above. */
    .mmd-rn-form .mmd-form__field--clues textarea {
        background: var(--mmd-rn-white);
        border-color: #C9C2D4;
    }
    /* THE CLOSING GROUP GOES BACK TO ORDINARY FLOW. On a phone it is one grid
       cell holding three overlapping items — button, sign-off and butler all in
       row 1 so the first two can cross him. With the butler lifted out to his
       own panel there is nothing left to overlap, and the two that remain were
       still stacked on top of each other in that single cell: the button sat
       across the sign-off and up inside the clues field, because its negative
       top margin exists to pull it off a cell sized by a figure that is no
       longer in it. Block flow, and each of the three offsets that served the
       overlap is reset with it. */
    .mmd-rn-form__close {
        position: static;
        display: block;
        min-height: 0;
        margin-top: var(--mmd-space-8);
    }
    .mmd-rn-form .mmd-rn-form__btn {
        width: fit-content;
        margin: 0;
    }
    .mmd-rn-form__sign {
        margin: var(--mmd-space-4) 0 0 calc( 1.05 * var(--rn-mark) );
        max-width: none;
    }
    /* Wider than the gold he stands on, so his arm crosses onto the white the
       way the comp has it. Width-driven against a 0.364:1 source, so the ratio
       is what decides where he is cut — 4/5 lands at the hip. */
    .mmd-rn-form .mmd-rn-form__figure {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: 43%;
        max-width: none;
        aspect-ratio: 4 / 5;
        height: auto;
        object-fit: cover;
        object-position: center top;
        margin: 0;
    }

    /* -- Public Shows: the torn paper runs the full width -------------------
       Off-Broadway and What Happens are one run of four alternating slabs —
       cream sheet, red panel, cream sheet, black panel — joined by torn edges.
       At 1280 they were coming out at three different widths, so every join
       showed a step of bare page beside the tear:

           .mmd-shows-broadway__banner   1136   the cream sheet
           .mmd-shows-broadway__panel    1136   the red
           its ::after tear              1232   the torn edge between them
           .mmd-shows-happens__banner    1136   the cream sheet
           .mmd-shows-happens__panel     1168   the black (bled by this skin)

       The parent bleeds the banners by the gutter for mobile and then puts it
       back with `margin-inline: 0` at 769px, while sizing the tear pseudos at
       `100% + 2 x --mmd-space-8` — 64px wider than the panel they hang off.
       That pairing works on a phone, where the section IS the viewport and
       everything lands on the same edge anyway. At desktop the section is a
       centred column and the three values pull apart, which is why the tear
       above the What Happens heading was visibly wider than the paper under
       it.

       One width for the whole run: the gutter bleed the black panel already
       had. The tears then measure 100% of a box that is already the right
       width instead of guessing at an overhang.

       Note for anyone reading the comment on .mmd-shows-happens__panel above —
       it says the tear pseudo is positioned against the VIEWPORT and needs no
       attention. That is true of the base rule and false from 769px up, where
       the parent replaces the 100vw with a percentage. */
    .mmd-shows-broadway__banner,
    .mmd-shows-happens__banner,
    .mmd-shows-broadway__panel { margin-inline: calc( -1 * var(--mmd-gutter) ); }
    /* THE BLACK ENDS ON A ROUNDED CORNER, not on a strip of paper. The parent
       tears every coloured panel back into cream, which is right for the three
       joins inside this run — each one has another slab under it. This is the
       last one, and there is nothing below it but the page, so the tear was
       laying a band of cream on white and calling it an edge.

       A plain border-radius does the job here, unlike the one at the foot of
       the variety panel: this panel really is the last element in its section,
       so its own bottom edge IS the join and the corners it gives up show the
       page. Same 64px, so the two black slabs on this page end the same way. */
    .mmd-shows-happens__panel::after { display: none; }
    .mmd-shows-happens__panel {
        border-bottom-left-radius: 64px;
        border-bottom-right-radius: 64px;
    }

    /* -- Public Shows: both sheets are torn top AND bottom ------------------
       The paper only tore at the bottom, and the reason is `background-size:
       100% 100%`. The sheet is one image stretched to whatever box the heading
       makes — about 1168 x 250 at desktop against a source that is 2100 x 1280
       — so the ragged edges are squashed to 40% of their drawn height. The
       bottom one survives that (it is the deeper of the two, 226 rows); the
       top one is 92 rows and flattens to about 20px, which is a ruled line.

       So the sheet is rebuilt the way the Private Events one was: the body of
       it stays the image, but positioned `center / 100% auto` so we are simply
       looking at the middle of the paper — no stretch, exact texture, and no
       flat fill that could drift from the asset's own #F5EDDA. Each torn edge
       is then its own slice of the SAME file at the SAME scale, in a box whose
       height is a share of the width (aspect-ratio), so it is drawn at full
       size however wide the page gets.

       Percentage margins on an absolutely positioned box resolve against the
       containing block's WIDTH, which is what lets the top slice be lifted by
       exactly its own height and land its last opaque row on the sheet's first.

       THE RED PANEL'S OWN TEAR GOES. It was the flat 68px slab painting across
       this join and covering the sheet's top edge; with the sheet tearing for
       itself it is a second edge in the same place.

       And the z-order flips with it. The sections are stacked venue 3 →
       broadway 2 → happens 1, which is why the parent had to put that join's
       tear on the RED panel: a tear on the What Happens sheet would paint
       under the section above it. Reversing the two lets each sheet tear over
       its own neighbour, which is what every other torn edge in this theme
       does. */
    .mmd-shows-broadway { z-index: 4; }
    .mmd-shows-happens  { z-index: 5; }
    /* The parent tucks this section 96px up under the one above, which was
       right when its top edge was a straight line hidden behind the showtimes
       box. A torn edge that hangs 108px higher still turned it into a sheet
       laid over the venue card's Transit copy.

       32px down instead, which is not a round number for the look of it: the
       slice's transparent half is 57px deep, so at this offset the ragged part
       of the tear straddles the card's bottom edge — purple showing through
       the top of it, paper below — while eating only 19px of the 32px of
       padding the card has to give. */
    .mmd-shows-broadway { margin-top: var(--mmd-space-8); }
    .mmd-shows-broadway__panel::after { display: none; }

    .mmd-shows-broadway__banner,
    .mmd-shows-happens__banner {
        background: var(--mmd-rn-sheet) center / 100% auto no-repeat;
        padding-block: var(--mmd-space-12);
        /* The -110px pulled the panel up under the empty bottom of a stretched
           sheet. There is no empty bottom now — the box IS the paper. */
        margin-bottom: 0;
    }
    .mmd-shows-broadway__banner::before,
    .mmd-shows-happens__banner::before,
    .mmd-shows-broadway__banner::after,
    .mmd-shows-happens__banner::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        background: var(--mmd-rn-sheet) no-repeat;
        background-size: 100% auto;
        pointer-events: none;
    }
    /* Top edge: rows 0-193 of the source, hung above the sheet by its own
       height so its transparent half is over whatever is up there — the red
       panel for What Happens, the venue card for Off-Broadway — and its solid
       foot meets the sheet. */
    .mmd-shows-broadway__banner::before,
    .mmd-shows-happens__banner::before {
        top: 0;
        margin-top: -9.24%;
        aspect-ratio: 2100 / 194;
        background-position: top center;
    }
    /* Foot: rows 880-1279, so the slice opens on 3% of solid paper before the
       tear starts and fades out over the panel below. */
    .mmd-shows-broadway__banner::after,
    .mmd-shows-happens__banner::after {
        top: 100%;
        aspect-ratio: 2100 / 400;
        background-position: bottom center;
    }
    /* Clear the slice hanging over the top of each panel. Replaces the 130px
       that was clearing the old flat tear. */
    .mmd-shows-broadway__panel,
    .mmd-shows-happens__panel { padding-top: calc( 19.05% + var(--mmd-space-8) ); }

    /* AND CLEAR THE ONE HANGING OVER THE FOOT of the red panel, which is the
       other end of the same problem and was still using the parent's flat 64px.

       The What Happens sheet's top slice reaches 9.24% of the width above its
       own section, and that section is pulled up a further --mmd-space-6 — so
       at 1280 the torn edge lands about 75px above the red panel's bottom
       while its closing line sat 64px above it. "Can you catch the killer
       before they strike again?" was inside the tear.

       Written in the same terms as the tear rather than as a pixel count, so
       the clearance tracks the slice at any width: its full depth, plus the
       pull-up it is lifted by, plus a band of red to breathe. */
    .mmd-shows-broadway__panel {
        padding-bottom: calc( 9.24% + var(--mmd-space-6) + var(--mmd-space-10) );
    }

    /* Why Guests Love: the photograph stops setting the row height.
       It is a two-column grid — copy on the left, picture on the right — and
       the row is as tall as its tallest item. At 375px the copy is the tall
       one and `align-self: stretch` makes the picture match it. At 1280 the
       copy is only about 310px while the picture's own 424x640 shape claims
       640, so the row grew to the picture and left 330px of empty white beside
       it.

       `height: 0` takes the picture out of the row's intrinsic sizing — a
       percentage min-height counts as auto there, so it contributes nothing —
       and `min-height: 100%` then fills whatever height the copy settled on.
       The parent's object-fit: cover does the rest. Deliberately not an
       aspect-ratio: that would pick one crop for every city, and the copy in
       this block is editable, so the height it wants is not knowable here. */
    .mmd-shows-variety__why-photo { height: 0; min-height: 100%; }
}


/* =============================================================================
   ASSET NOTE
   =============================================================================
   Every raster in assets/image/ is WebP, capped at 1600px on the long edge,
   quality 80. The originals were design-tool exports at print resolution — the
   set totalled 284 MB, one cut-out alone was 4069 x 12285 px and 53 MB — which
   this theme cannot carry: the network deploys by uploading the whole
   mmd-network/ folder over FTP, so every byte in here ships to every site.
   After conversion the same set is 3.4 MB.

   Two things follow from that, for whoever adds art next:

     1. RE-EXPORT, DON'T RESIZE. The masters are not in this repo any more.
        Anything needing a bigger version comes from the design source, not from
        upscaling what is here.

     2. NEW ART GETS THE SAME PASS before it is committed. Dropping a raw export
        in here is how the folder got to 284 MB the first time.

   Cut-outs are lossy WebP WITH alpha (yuva420p), which is why they composite
   cleanly on the flat colour panels. If a future cut-out shows a halo at its
   edges, that is the lossy alpha and the fix is a higher quality for that file,
   not a switch back to PNG.

   STILL OUTSTANDING: bright-redesign/Form/Underline.svg and its identical twin
   in bright-redesign/pop-up/ are 460 KB EACH — a 98 x 6 px underline carrying
   470,000 characters of path data at five-decimal precision. Together they are
   most of what is left in this folder. They want SVGO (or a re-export with
   simplified paths); this pass deliberately did not touch them, because
   rewriting path data by hand risks corrupting the curve for a file neither the
   homepage nor any built page currently loads.
   ============================================================================= */