/*
 * Homepage design-pass band visuals, T07c. Enqueued sitewide from
 * inc/bands-home.php (myth_bands_home_assets()), depends on css/myth-motion.css
 * for the shared `.myth-reveal` / `.myth-parallax` / `.myth-count` /
 * `.myth-btn` / `.myth-card` mechanics; this file only ever adds each
 * band's own chrome, plus the TripAdvisor plugin's restyle.
 *
 * Palette hexes only, docs/PAGE-TEMPLATE-LAWS.md section 0:
 * Ink #1C1310, Charcoal #231F1E, White #FFFFFF, Muted #767676,
 * Gold #D4A94A, Maroon #6E0C01. No other colour anywhere in this file.
 *
 * Band padding: 96px desktop, 64px tablet (768 to 1023), 48px at 390,
 * on every band, never bespoke per band (law section 1).
 */

/* FOLD P1 FIX, 2026-09-05 (T07c responsive pass): every band sits inside
 * its own Divi `.et_pb_section` wrapper (one section per shortcode, per
 * cortex-b.md's assembly), and that wrapper carries Divi's own generic
 * `.et_pb_section` rules (a `background-color: #fff` and, depending on
 * viewport, either `padding: 4% 0`, `2% 0` or `50px 0`), since no
 * per-section zero-padding override was ever saved for these thirteen
 * sections specifically. That left a white seam (28.8px top and bottom at
 * 1440, the section's own 2% padding) between every pair of bands, and a
 * 59px empty white box between the booking band and the footer where the
 * mobile rail's own section sits (the rail itself is a fixed-position
 * element and renders nothing in flow above 767px, but its wrapping Divi
 * section still took the same default padding and background).
 * Fixed here, in this theme stylesheet, not in Divi's post content: any
 * section wrapping a `.myth-band` or the `.myth-band-rail` loses Divi's
 * own padding and default white fill, so each band's own padding rhythm
 * (48/64/96px, below) and background colour are the only ones that ever
 * render. `:has()` is supported by every evergreen engine this site
 * targets (Chrome, Safari and Firefox all shipped it well before this
 * build); no fallback needed.
 */
.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_module.et_pb_code .myth-band),
.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_module.et_pb_code .myth-band-rail) {
  padding: 0;
  background-color: transparent;
}

/* REVIEW-21b (Sightline, 2026-09-11), extending the FOLD P1 FIX above to
 * the one case it cannot reach: a section whose `.et_pb_code` module
 * renders NOTHING at all. `inc/bands-room.php`'s own docblock calls the
 * gift band ("Band 7: Gift this room") "the ONLY one on this template
 * that may collapse: on the three coming-soon rooms this shortcode
 * returns an empty string... Not hidden with CSS, not rendered empty":
 * the design already expects Divi's own `custom_padding="0px||0px||
 * false|false"` attribute to hold the section at zero height on its own,
 * with no theme rule needed, because `:has(.myth-band)` above cannot
 * match a section with no `.myth-band` inside it.
 *
 * Found on `/north-pole-express/` (REVIEW-21b sweep): measured a 101px
 * gap at 390 and 768, 41.94px at 1024 and 58.59px at 1440 between the
 * Loose ends (FAQ) band and the carousel, where the two other
 * coming-soon rooms in the same batch (`/back-in-time/`,
 * `/murder-on-the-midnight-express/`) measure 0 to 1px, despite all
 * three sharing byte-identical `custom_padding` shortcode attributes on
 * every section (`git diff` and a direct string comparison of all three
 * posts' `post_content` confirm this). Root cause, confirmed via
 * `CSS.getMatchedStylesForNode`: Divi's own generated per-post CSS
 * combines every section sharing one custom_padding value into a single
 * rule (`.et_pb_section_0.et_pb_section, ... .et_pb_section_4.et_pb_
 * section, .et_pb_section_6.et_pb_section { padding-top:0;
 * padding-bottom:0 }` on the two working rooms); on north-pole-express
 * that combined rule is silently absent from the generated HTML
 * entirely (confirmed on the raw response body, not merely a stale
 * cache: `bash loop/clear-cache.sh` and a fresh Chromium request both
 * reproduce it), leaving Divi's own unconditional default
 * (`.et_pb_section { padding: 2% 0 }`, resolving to the exact px figures
 * above) as the only rule that matches. This is the same shape of defect
 * the FOLD P1 FIX above already named ("no per-section zero-padding
 * override was ever saved... specifically") on a content-dependent
 * trigger the two-room R11 test and REVIEW-21's 14-route sweep never
 * exercised, since neither included a room whose gift band collapses.
 *
 * Fixed the same way as the rule above, not by chasing Divi's cache: an
 * empty `.et_pb_code` module (no element descendants; `:empty` does not
 * work here since Divi always leaves whitespace text nodes inside it)
 * never needs Divi's own padding rule to exist at all. Written as two
 * chained conditions on `.et_pb_section` rather than one `:has()` nested
 * inside another: the CSS Selectors spec forbids `:has()` occurring
 * inside the argument of another `:has()` at any depth (including
 * through `:not()`), so `:has(...code:not(:has(*)))` parses as a single
 * invalid selector and drops the whole rule silently, exactly what
 * happened on the first attempt here, caught only by re-measuring after
 * the "fix" and finding the gap unchanged. `:has(> .et_pb_row >
 * .et_pb_column > .et_pb_module.et_pb_code)` and `:not(:has(.et_pb_module
 * .et_pb_code *))` are each their own top-level condition on the section,
 * which is valid. This also protects any future room or band that
 * collapses the same way, on any of the twelve rooms, not only this
 * one. */
.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_module.et_pb_code):not(:has(.et_pb_module.et_pb_code *)) {
  padding: 0;
  background-color: transparent;
}

/* FOLD P1 FIX, 2026-09-05 (T07c responsive pass): keyboard focus ring.
 * Divi's own sitewide reset sets `:focus{outline:0}` on every element;
 * the shared `.myth-btn:focus-visible` rule in css/myth-motion.css only
 * re-adds a ring to `.myth-btn` elements, so the plain in-copy anchors
 * still had none at all (measured: `outline-style: none` on a focused
 * tel: link in the location panels, the practical strip and the booking
 * band). Restored per band colour role rather than one flat colour: Gold
 * on the dark Ink and Poster bands (the same colour and offset the
 * button system already uses there), Maroon on the light Parchment
 * bands, where Gold on White or Gold on Charcoal-on-white text would be
 * too weak a non-text indicator. Scoped to `:not(.myth-btn)` so the
 * button system's own per-variant focus colours (including the Maroon
 * ring `.myth-games--light .myth-btn:focus-visible` already sets on
 * Parchment) are never fought over specificity.
 */
.myth-band-hero a:not(.myth-btn):focus-visible,
.myth-band-hero button:not(.myth-btn):focus-visible,
.myth-band-stats a:not(.myth-btn):focus-visible,
.myth-band-stats button:not(.myth-btn):focus-visible,
.myth-band-map a:not(.myth-btn):focus-visible,
.myth-band-map button:not(.myth-btn):focus-visible,
.myth-band-reviews a:not(.myth-btn):focus-visible,
.myth-band-reviews button:not(.myth-btn):focus-visible,
.myth-band-practical a:not(.myth-btn):focus-visible,
.myth-band-practical button:not(.myth-btn):focus-visible,
.myth-band-faq a:not(.myth-btn):focus-visible,
.myth-band-faq button:not(.myth-btn):focus-visible,
.myth-band-booking a:not(.myth-btn):focus-visible,
.myth-band-booking button:not(.myth-btn):focus-visible {
  outline: 2px solid #D4A94A;
  outline-offset: 2px;
}

.myth-band-tiles a:not(.myth-btn):focus-visible,
.myth-band-tiles button:not(.myth-btn):focus-visible,
.myth-band-events a:not(.myth-btn):focus-visible,
.myth-band-events button:not(.myth-btn):focus-visible,
.myth-gift-strip a:not(.myth-btn):focus-visible,
.myth-gift-strip button:not(.myth-btn):focus-visible {
  outline: 2px solid #6E0C01;
  outline-offset: 2px;
}

.myth-band {
  position: relative;
  padding: 48px 20px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .myth-band {
    padding: 64px 40px;
  }
}

@media (min-width: 1024px) {
  .myth-band {
    padding: 96px 64px;
  }
}

.myth-band h1,
.myth-band h2,
.myth-band h3 {
  font-family: "Julius Sans One", sans-serif;
  margin: 0;
}

.myth-band p {
  font-family: Karma, serif;
  line-height: 1.6;
  margin: 0;
}

/* THE SHARED EYEBROW ATOM IS RETIRED. REVIEW-03 (review A2, the user's
   answer to question 1) removed every element on this page that used it.
   Vesper section 5.2 rules it out of the file rather than left dead, and
   the reason is a live hazard, not tidiness: the room hero's venue line,
   the site's one surviving eyebrow, still carries the `myth-eyebrow` class,
   this stylesheet is enqueued on room routes AHEAD of css/myth-room.css,
   and this rule's `color: #D4A94A` at 0-1-0 was being beaten by source
   order alone. Gold measures 2.74:1 on that plate at 1440, so a stylesheet
   reorder or a concatenation step would have turned a passing line into a
   failing one. Section 18 of css/myth-room.css now declares every property
   this rule supplied, at 0-2-1, and landed before this deletion.
   `.myth-band-eyebrow-h2` went with it: no markup on the site carries it. */

/* -----------------------------------------------------------------------
 * Shared full-bleed media + scrim, used by the hero, location panels,
 * booking band and (without the scrim) the story band's own media.
 * --------------------------------------------------------------------- */
.myth-band-hero__media,
.myth-band-booking__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #1C1310;
}

.myth-band-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myth-band-hero__fallback {
  position: absolute;
  inset: 0;
  display: flex;
}

.myth-band-hero__fallback-img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop/motion-preferred: video plays, the static fallback pair hides.
   Under 768px or reduced motion: the fallback pair shows instead, so
   "two towns" survives without motion (loop/work/T07c/spec.md section 3). */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .myth-band-hero__fallback {
    display: none;
  }
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .myth-band-hero__video {
    display: none;
  }
}

.myth-band-hero__scrim,
.myth-band-booking__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 19, 16, 0.6) 0%, rgba(28, 19, 16, 0.85) 100%);
  z-index: 1;
}

/* REVIEW-08: the location panels' scrim is deleted, both the base rule and
   its max-width 767 override. There is no scrim in the "Two locations" band
   any more, because the map is content and not wallpaper (review item B6 and
   the correction of 2026-09-09 item 4), and a dead selector would only invite
   one back. The hero and booking scrims above are a different rule and are
   untouched, byte for byte. History: loop/work/MANUAL-3, MANUAL-13 and
   MANUAL-22. */

.myth-band-booking__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------------------------------------------------
 * Band 1: Video hero
 * --------------------------------------------------------------------- */
/* MANUAL-1 (2026-09-05, user): the sub-line and the two trust lines are
   removed from the markup (not published, see docs/copy/01-home.md 1.2 and
   1.4), so this band's own min-height no longer needs to reserve room for
   them. The old `90vh`/`90dvh` desktop rule forced 810px on a plain
   1440x900 viewport regardless of content (measured before this change);
   with the shorter content stack that read as a large stretch of empty
   scrim above and below the text. Replaced with fixed floors, in px, lower
   than the content's own natural height on any normal viewport, so the
   section hugs its content and only acts as a floor on unusually short
   windows, instead of forcing height the content never needed. */
.myth-band-hero {
  min-height: 560px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .myth-band-hero {
    min-height: 640px;
  }
}

/* MANUAL-13 (user review, 2026-09-07): the hero block is centred now that
   the review quote has gone. 720px at 1024 and up because the H1 breaks to
   4 lines at a 640px cap and to 3 lines at 720 (measured across 560 to 1040
   in loop/work/MANUAL-13/design-a.mjs); the body keeps its own 640px cap so
   its measure stays inside the law's 70ch. */
.myth-band-hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

@media (min-width: 1024px) {
  .myth-band-hero__content {
    max-width: 720px;
    gap: 24px;
  }
}

.myth-band-hero__h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.05;
  color: #FFFFFF;
}

/* `padding-bottom: 0` is defensive: the child theme carries a bare
   `p { padding-bottom: 1em }` (a copied Divi reset, style.css, specificity
   0-0-1) cancelled only by `p:last-of-type`. This paragraph is last-of-type
   today and would silently gain 18px if a paragraph were ever added under it. */
.myth-band-hero__body {
  font-size: 18px;
  color: #FFFFFF;
  max-width: 640px;
  padding-bottom: 0;
}

.myth-band-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}

@media (min-width: 768px) {
  .myth-band-hero__actions {
    margin-top: 16px;
  }
}

.myth-band-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition-delay: 1s;
}

.myth-band-hero__chevron {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(45deg);
}

@media (max-width: 767px) {
  /* The scroll cue is absolutely positioned 24px off the band's bottom edge
     in a 44px box, so it needs 68px of clearance. The band's own padding is
     48px at this width and the law fixes it there, so the clearance is added
     to the CONTENT box, not the band. Measured: without it the cue lands
     20px inside the Book Maidstone button, which it already did before this
     pass (loop/screenshots/MANUAL-13/hero/before-390.png). The cue's own
     rule is untouched. */
  .myth-band-hero__content {
    padding-bottom: 44px;
  }

  /* Law section 4: only headings, eyebrows and lines that fit two lines may
     be centred. This paragraph measures 4 lines at 390 and exactly 2 lines
     at 768 and 1440, so it is centred from 768 up and left-aligned below it.
     The column is only 350px wide at 390, so the difference reads as a
     single ragged right edge, not as a broken alignment. */
  .myth-band-hero__body {
    text-align: left;
  }

  /* `align-items: center` alone shrinks the actions row to its content and
     both buttons with it. `align-self: stretch` restores the full-width
     touch target, which is the 44px-minimum conversion-path rule (law
     section 9) and is what shipped before this pass. */
  .myth-band-hero__actions {
    align-self: stretch;
    flex-direction: column;
  }

  .myth-band-hero__actions .myth-btn {
    width: 100%;
  }
}

/* -----------------------------------------------------------------------
 * Band 2: Stats strip (Ink)
 * --------------------------------------------------------------------- */
/* MANUAL-8 (user, 2026-09-05): the stats strip is the closing row of the
   Good to know band. Both are Ink; the practical strip drops its bottom
   padding (rule in its own block below) and this strip's top padding is
   one internal gap on the spacing scale (32 / 40 / 48) instead of band
   padding, so the two sections read as one band with no divider. The
   strip keeps its bottom padding, which closes the joined band. */
.myth-band-stats {
  background: #1C1310;
  color: #FFFFFF;
  text-align: center;
  padding-top: 32px;
}

@media (min-width: 768px) {
  .myth-band-stats {
    padding-top: 40px;
  }
}

@media (min-width: 1024px) {
  .myth-band-stats {
    padding-top: 48px;
  }
}

.myth-band-stats__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* MANUAL-13. Divi's own `p { padding-bottom: 1em }` (copied into this child
   theme's style.css, specificity 0-0-1, cancelled only by `p:last-of-type`)
   was adding a full em of dead space under every stat numeral that is not the
   last paragraph in its tile: 32px at 390 and 48px at 1440. Measured, the
   numeral's box was 144px tall for a 72px line-height. That, not the type
   scale, is why the tiles looked empty. Scoped to this band's tiles only; the
   rule is left alone everywhere else, because changing it globally would move
   every other band on the site. */
.myth-band-stats__card p {
  padding-bottom: 0;
}

.myth-band-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 0;
}

@media (max-width: 767px) {
  /* Two rows at 390, so grid's per-row sizing would leave the rating row
     taller than the first. 1fr on the auto rows equalises all four. Above
     768 there is only one row and stretch already does it. */
  .myth-band-stats__grid {
    grid-auto-rows: 1fr;
  }
}

@media (min-width: 768px) {
  .myth-band-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.myth-band-stats__card {
  border: 1px solid rgba(212, 169, 74, 0.2);
  border-radius: 8px;
  padding: 28px 16px;
  background: #1C1310;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .myth-band-stats__card {
    padding: 36px 20px;
  }
}

/* Two classes, not one: `.myth-band p` (0-1-1) otherwise wins the font-family
   and the 1.6 line-height, which is why the numeral rendered in Karma before
   this pass, not Julius Sans One, on a band whose whole job is the numerals. */
.myth-band-stats .myth-band-stats__value {
  font-family: "Julius Sans One", sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: #D4A94A;
  margin: 0 0 12px;
}

@media (min-width: 768px) {
  .myth-band-stats .myth-band-stats__value {
    font-size: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .myth-band-stats .myth-band-stats__value {
    font-size: 4.5rem;
    margin-bottom: 16px;
  }
}

.myth-band-stats .myth-band-stats__label {
  font-family: Karma, serif;
  font-size: 20px;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0;
}

@media (min-width: 768px) {
  .myth-band-stats .myth-band-stats__label {
    font-size: 22px;
  }
}

@media (min-width: 1024px) {
  .myth-band-stats .myth-band-stats__label {
    font-size: 24px;
  }
}

/* MANUAL-22 (user, 2026-09-08): .myth-band-stats__rating-detail and every
   rule that painted it are deleted. The count, the date and the listing are
   still rendered inside the rating tile, in the same place, carried by the
   theme's .visually-hidden (inc/bands-home.php), so there is nothing left
   here to style and a dead selector would only invite the line back. */

/* -----------------------------------------------------------------------
 * Band 4: Two locations (Ink). REVIEW-08, review item B6 and the user's
 * answer to question 6: ONE map with both towns as pins, both towns'
 * details ABOVE it, side by side from 1024 and stacked below.
 *
 * The map is content now, not wallpaper. No scrim, no filter, no
 * pointer-events: none, no aria-hidden. What used to be Band 4 is gone
 * with them: the two mirrored panels, the two single-place embeds, the
 * 0.80 to 0.94 Ink ramp and the Charcoal phone fallback.
 *
 * The embed is a keyless Google Maps SEARCH embed for the business name
 * scoped to Kent, which returns all three owned listings and auto-fits
 * them to whatever aspect this frame happens to be. It is not pinned with
 * ll and z on purpose: a fixed zoom crops Gillingham out of the 390 frame.
 * The two Gillingham buildings are 250 m apart and read as one mark at any
 * zoom that also holds Maidstone, so the map says two towns and the
 * Gillingham column says both addresses in text. Full record, the seven
 * rejected forms and the measurements: loop/work/REVIEW-08/vesper.md.
 *
 * Palette: Ink #1C1310, Charcoal #231F1E, White #FFFFFF, Gold #D4A94A.
 * Elevation: --myth-elev-1-on-dark and --myth-hairline-gold-on-dark from
 * css/myth-motion.css (R05). No literal shadow is written here.
 *
 * Specificity note, and it is load bearing: every <p> and <h3> rule below
 * is written at (0,2,0), because `.myth-band p` and `.myth-band h3` are
 * (0,1,1) compound selectors in this same file and Divi ships its own
 * `p { padding-bottom: 1em }`. A single-class rule here silently loses and
 * the band paints numbers nobody wrote.
 * --------------------------------------------------------------------- */
.myth-band-map {
  background: #1C1310;
  color: #FFFFFF;
}

/* The one presentation attribute that changes the ground. R15 may set
   surface="charcoal" for the contact page; the homepage is Ink and passes
   nothing. Both are grounds this band's colours are measured on: White is
   18.26:1 on Ink and 16.33:1 on Charcoal, Gold is 8.32:1 and 7.44:1. No
   parchment variant exists, because none of these lines are measured on it. */
.myth-band-map--charcoal {
  background: #231F1E;
}

.myth-band-map__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* R03 promoted "Two locations" from the 12px gold eyebrow to the band H2
   scale. It keeps that scale, its string, its id and its role as the
   section's aria-labelledby target. No eyebrow anywhere in this band. */
.myth-band-map .myth-band-map__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
}

/* Two columns from 1024, not 768. The longest row in the band,
   "41-43 Canterbury Street, Gillingham, ME7 5TR", measures 326.47px. Two
   columns at 768 give each 320px, that row wraps, and putting the two Book
   buttons on one baseline then leaves a 96.5px hole in the Maidstone
   column. At 1024 each column is 424px and nothing wraps at any width
   above it. Measured at 320, 360, 375, 390, 768, 1024, 1280 and 1440. */
.myth-band-map__towns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 32px 0 0;
}

@media (min-width: 1024px) {
  .myth-band-map__towns {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 40px;
  }
}

.myth-band-map__town {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The 48 x 2px Gold rule that opens each column, carried over from the old
   panel unchanged. It is decoration and has nothing to announce, so it is
   a ::before. It never sat between an eyebrow and a heading, so review
   item A10 does not touch it. */
.myth-band-map__town::before {
  content: "";
  display: block;
  flex: none;
  width: 48px;
  height: 2px;
  background: #D4A94A;
  margin: 0 0 14px;
}

/* The law's H3, 1.5rem, stepping to 1.875rem from 1024. It was 2rem /
   2.5rem on the panel, which at 768 computed to exactly the same 32px as
   the H2 above it once R03 promoted that H2. Two headings at one size is
   not a hierarchy. Ratios to the H2 now: 1:1.33 below 1024, 1:1.37 at
   1024, 1:1.6 at 1440. */
.myth-band-map .myth-band-map__name {
  font-size: 1.5rem;
  line-height: 1.05;
  color: #FFFFFF;
  margin: 0 0 14px;
}

@media (min-width: 1024px) {
  .myth-band-map .myth-band-map__name {
    font-size: 1.875rem;
  }
}

/* From 1024 the fact block absorbs the free space, which is what puts the
   two Book buttons on one baseline (measured: btnG.y == btnM.y at 1024,
   1280 and 1440) while still leaving the taller Gillingham column its
   full 20px above its own button. Below 1024 the columns are stacked and
   there is no free space to absorb. */
.myth-band-map__facts {
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .myth-band-map__facts {
    flex: 1 1 auto;
  }
}

/* 15px Karma and 17px bold on the phone, byte for byte what the panel
   shipped. That is deliberate: it means R04's measured icon offsets carry
   across with nothing to re-derive. Proved property by property against
   the live band at 390, 768 and 1440 in loop/work/REVIEW-08/final3.mjs. */
.myth-band-map .myth-band-map__fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: Karma, serif;
  font-size: 15px;
  line-height: 1.6;
  color: #FFFFFF;
  margin: 0 0 10px;
  padding-bottom: 0;
}

.myth-band-map .myth-band-map__fact:last-child {
  margin-bottom: 0;
}

/* R04 (review A1). The optical target is the icon box centre on the first
   line's cap-height centre, and `align-items: flex-start` plus a margin is
   what holds it against the FIRST line of a row that may wrap. 1.91px on
   the 15px rows and 3px on the 17px bold phone are R04's own measured
   numbers, carried unchanged because the row is unchanged. */
.myth-band-map__fact svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1.91px;
  color: #D4A94A;
}

.myth-band-map__fact--phone svg {
  margin-top: 3px;
}

/* White, not Gold. Gold on the number would put a second glow beside the
   Book button and the accent rule allows one. The icon carries the gold,
   the number carries the weight.

   The ::after is a 44px hit box on a 27.19px line, because a phone number
   on this band is in the conversion path. It is absolutely positioned, so
   the row's own height does not change and nothing below it moves. Proved
   with elementFromPoint at -20, -10, 0, +10 and +20px from the link's
   centre, at 390, 768 and 1440. */
.myth-band-map__fact--phone a {
  position: relative;
  display: inline-block;
  color: #FFFFFF;
  font-family: Karma, serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.myth-band-map__fact--phone a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.myth-band-map__fact--phone a:hover {
  text-decoration: underline;
}

.myth-band-map__town .myth-btn {
  margin-top: 20px;
  align-self: flex-start;
}

/* MANUAL-27: the frame now lives INSIDE .myth-band-map__town, which is a
   flex column with align-items: flex-start, so a block child shrink-wraps
   to its content width unless told otherwise. stretch is what makes the
   frame (and the "Open in Google Maps" line under it) fill the column
   instead of collapsing to the iframe's intrinsic size. */
.myth-band-map__frame,
.myth-band-map__open {
  align-self: stretch;
  width: 100%;
}

/* The frame. aspect-ratio and not a height, so the box exists before the
   iframe does and the band is the same height whether the map loads,
   fails or is still loading.

   MANUAL-27: each town now has its OWN frame inside its OWN column, so the
   width this frame is measured against changed from the old single
   full-width frame (up to 1200px) to the town column's own width. Below
   1024 the towns grid is still one column (.myth-band-map__towns), so the
   frame is at essentially the same width the old shared frame was and
   keeps its ratios unchanged: 350 x 262.50 at 390, 688 x 344.00 at 768,
   identical in the loaded and the Google-blocked run. From 1024 the grid
   splits into two 424 to 576px columns (comment above
   .myth-band-map__towns), which is half or less of the old frame's width
   there; the old 12/5 ratio at that width would flatten each per-town map
   to under 180px tall, too short to read two pins on the Gillingham
   column comfortably. Both towns now share 4/3 from 1024 up, matched
   against the actual column widths in loop/work/MANUAL-27/ (424 x 318 at
   1024, 552 x 414 at 1280, 576 x 432 at 1440): both pins on the Gillingham
   map and the single Maidstone pin stayed clear of the frame edge at
   every one of those sizes, screenshot proved, not assumed.

   Step 1 and not step 2 (law 7.6): a map is a surface at rest, not a
   control. No hover, no bloom, no lift; the frame's shadow, border colour,
   transform and box are byte-identical at rest and on hover. Applies to
   both towns' frames identically: no per-town override exists because
   none was needed, only the --gillingham/--maidstone modifier classes for
   any future task that needs one. */
.myth-band-map__frame {
  position: relative;
  margin-top: 40px;
  border: 1px solid rgba(212, 169, 74, 0.44);
  border-radius: 8px;
  overflow: hidden;
  background: #231F1E;
  box-shadow: var(--myth-elev-1-on-dark);
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .myth-band-map__frame {
    margin-top: 48px;
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 1024px) {
  .myth-band-map__frame {
    aspect-ratio: 4 / 3;
  }
}

/* The empty state, and it is a real state, not a placeholder: this is what
   a visitor sees behind an ad blocker, a corporate proxy or a consent tool
   that blocks the iframe. White on Charcoal, 16.33:1. It sits UNDER the
   iframe rather than beside it, so a loaded map covers it with no JS and
   no class toggle. It carries no link of its own: the link under the frame
   is always present and one link twice, 20px apart, reads as a fault. */
.myth-band-map .myth-band-map__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-family: Karma, serif;
  font-size: 15px;
  line-height: 1.6;
  color: #FFFFFF;
}

/* No filter, no opacity, no pointer-events: none. Review item B6 and the
   correction of 2026-09-09 item 4: a map is for reading, not for
   backgrounds. Focus offset is NEGATIVE because the frame clips at an 8px
   radius and an outset ring would be cut by overflow: hidden. */
.myth-band-map__map {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The ring on the map, and it needs BOTH selectors. Measured on the served
   page in Chromium and WebKit: Tab from Book Maidstone puts the iframe in
   document.activeElement, but the real focus is inside the cross-origin child
   document, so the iframe element matches NONE of :focus, :focus-visible or
   :focus-within in either engine. A CSS-only ring on this element cannot
   exist today. `.is-map-focus` is therefore set by js/myth-motion.js on the
   window blur that fires when keyboard focus enters the frame, and only when
   the last interaction was a key, so it carries :focus-visible's semantics
   and not :focus's. The :focus-visible selector stays first because it is the
   correct one and it wins the day an engine implements it.
   Offset is NEGATIVE: the frame clips at an 8px radius and an outset ring
   would be cut by overflow: hidden. */
.myth-band-map__map:focus-visible,
.myth-band-map__map.is-map-focus {
  outline: 2px solid #D4A94A;
  outline-offset: -4px;
}

/* Always present, not only in the empty state. It is the band's answer to
   three measured limits of the keyless embed at once: it has no plus and
   minus buttons, its pins are not clickable, and it can fail in a way that
   is undetectable from a cross-origin parent. White and underlined, not
   Gold: the accent is already spent on the two Book buttons. */
.myth-band-map .myth-band-map__open {
  margin: 16px 0 0;
  padding-bottom: 0;
  font-family: Karma, serif;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

.myth-band-map__open a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -----------------------------------------------------------------------
 * Band 5: Feature tiles (Parchment)
 * --------------------------------------------------------------------- */
.myth-band-tiles {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  color: #1C1310;
  text-align: center;
}

/* MANUAL-3 (user review, 2026-09-05): the parchment texture moved off the
   section onto its own absolutely positioned layer so the shared
   .myth-parallax transform (docs/PAGE-TEMPLATE-LAWS.md section 3, 0.3x,
   capped at 10% of this layer's height) moves the texture behind the
   tiles. The layer is 125% of the band tall (12.5% overshoot each way)
   so the 10% cap can never expose an edge. Off under 768px and under
   reduced motion via css/myth-motion.css and js/myth-motion.js. */
.myth-band-tiles__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -12.5%;
  bottom: -12.5%;
  background-image: url("../../../uploads/2022/09/main-content-bg.jpg");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

.myth-band-tiles__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* MANUAL-4 (user, 2026-09-05): "What Sets Us Apart". Maroon H2 on the
   parchment band (law section 1), then four white cards, 2 by 2 from 768px,
   stacked below, equal heights from the grid's stretch. Everything inside a
   card is centred at the user's request, including the client's paragraph
   (a knowing exception to the law's section 4 centring rule, recorded in
   loop/DECISIONS.md). Cards follow the law's card anatomy on Parchment:
   8px radius, 1px ink-at-10% border, hover lift with a soft shadow,
   pointer devices only, off under reduced motion. */
.myth-band-tiles__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #6E0C01;
  margin: 0;
}

.myth-band-tiles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
  align-items: stretch;
  text-align: center;
}

@media (min-width: 768px) {
  .myth-band-tiles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.myth-band-tiles__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 32px 24px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 19, 16, 0.1);
  border-radius: 8px;
  /* R05: on the elevation scale. This tile is a card in everything but
     its class name, so it takes the card contract exactly: resting step
     1, and on hover a 2px lift to step 2 with the Gold hairline and the
     bloom, at 320ms on the button system's curve. It sits on White, so
     the light alphas apply. */
  box-shadow: var(--myth-elev-1);
  transition:
    transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .myth-band-tiles__tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--myth-elev-2), var(--myth-elev-glow);
    border-color: var(--myth-hairline-gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .myth-band-tiles__tile {
    transition: none;
  }
}

/* The client's hand-drawn icons, re-exported in Gold. Sized by height so
   the four (different native sizes) read as one set. */
.myth-band-tiles__icon {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 auto 16px;
}

.myth-band-tiles__title {
  font-size: 1.5rem;
  line-height: 1.2;
  color: #1C1310;
  margin: 0 0 8px;
}

.myth-band-tiles .myth-band-tiles__text {
  font-family: Karma, serif;
  font-size: 17px;
  line-height: 1.6;
  color: #1C1310;
  margin: 0;
  max-width: 44ch;
}

/* -----------------------------------------------------------------------
 * Band 6: Reviews band (Poster). MANUAL-5 (user, 2026-09-05): one centred
 * module. The former two-column story layout (60:40 grid, white "Our story"
 * card, MANUAL-1/MANUAL-2 notes) is gone with the card. The band keeps the
 * `back-in-time` gears image as a full-bleed parallax layer (125% of the
 * band tall so the shared 10% cap never exposes an edge, off under 768px
 * and reduced motion via css/myth-motion.css and js/myth-motion.js) under
 * an ink scrim, and one centred inner column whose edges match the games
 * grid band's content box exactly: 1rem / 1.5rem / 2rem side padding at
 * the grid's own breakpoints and the grid's 75rem cap less that padding
 * (1136px), so the three review cards in each slide sit on the three grid
 * columns above. Vertical padding stays on the law's 96/64/48 scale via
 * .myth-band. The plugin restyle rules in the customizer (post 20) keep
 * applying; the few overrides for the centred layout are scoped below.
 * --------------------------------------------------------------------- */
.myth-band-reviews {
  background: #1C1310;
  color: #FFFFFF;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .myth-band-reviews {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .myth-band-reviews {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.myth-band-reviews__media {
  position: absolute;
  left: 0;
  right: 0;
  top: -12.5%;
  bottom: -12.5%;
  overflow: hidden;
  z-index: 0;
}

.myth-band-reviews__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.myth-band-reviews__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 19, 16, 0.6) 0%, rgba(28, 19, 16, 0.85) 100%);
  z-index: 1;
}

.myth-band-reviews__inner {
  position: relative;
  z-index: 2;
  max-width: 1136px;
  margin: 0 auto;
}

/* Centre the moved-in heading and sub (the customizer rules give the sub
   `margin: 0 0 32px` and a 70ch cap, which would pin it left) and let the
   slider fill the whole column instead of the customizer's 56.25rem cap. */
.myth-band-reviews .myth-band-testimonials__heading {
  text-align: center;
}

.myth-band-reviews .myth-band-testimonials__sub {
  margin: 0 auto 32px;
  text-align: center;
}

.myth-band-reviews .myth-home-reviews__wrap {
  max-width: none;
  margin: 0;
}

/* -----------------------------------------------------------------------
 * Band 8: Event cards (Parchment)
 * --------------------------------------------------------------------- */
.myth-band-events {
  background: #FFFFFF;
  background-image: url("../../../uploads/2022/09/main-content-bg.jpg");
  background-size: cover;
  color: #1C1310;
}

.myth-band-events__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* BUG FIX (T07c part B, cortex-b.md): S6.1's shipped intro line runs to
   3 real lines at 1440 (measured, not assumed), which
   PAGE-TEMPLATE-LAWS.md section 4 calls a defect for a centred paragraph.
   The parent `.myth-band-events__inner` still centres the block itself
   (short eyebrow/H2 stay centred); this one paragraph reads left-aligned,
   per the same section's default body rule. */
/* MANUAL-2 (2026-09-05, user, item 2): reverses the MANUAL-1 fix above
   (kept for the record, not for the current rule): at the old 70ch cap
   this line ran to 3 real lines at 1440, a defect for a centred paragraph
   under PAGE-TEMPLATE-LAWS.md section 4, so it was set left-aligned. The
   user's review asks for it centred under the heading instead, which the
   same section allows for anything that fits two lines. 46ch (measured
   with Playwright, not assumed) is the narrowest cap that still holds the
   line to exactly two rows at 1440 (probed in 2ch steps: 64ch still broke
   to 3 lines, 66ch was the first 2-line result; 68ch is kept a small step
   past that break point rather than sitting right on it, and left as
   `ch`, not a fixed px, so it scales with the font instead of drifting
   back to 3 lines if Karma's metrics ever change). */
/* MANUAL-3 (user review, 2026-09-05): selector raised to two classes so
   the auto side margins beat `.myth-band p { margin: 0 }` above (one
   class plus a type selector), which had been pinning this block to the
   left edge while its text was centred inside it. No forced line break
   exists in the markup; the two lines wrap naturally. */
.myth-band .myth-band-events__intro {
  font-family: Karma, serif;
  font-size: 18px;
  color: #1C1310;
  max-width: 68ch;
  margin: 0 auto 16px;
  text-align: center;
}

.myth-band-events__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #6E0C01;
  margin: 0 0 12px;
}

.myth-band-events__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
  text-align: left;
}

@media (min-width: 640px) {
  .myth-band-events__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MANUAL-2 (2026-09-05, coordinator decision, item 3): moved from
   `min-width: 1024px` to `min-width: 1280px`. At 1024 the four-column row
   left each `.myth-band-events__cta` only 164px outer width, not enough
   for the longest label ("Plan your team day") on one line without
   shrinking the font past legibility (measured in
   loop/work/MANUAL-2/probe-btn2.mjs: 91.7px available, 154.8px needed at
   13px). The user wants one line at 1024, not smaller type, so 1024 and
   1279 now get the two-column row (inherited from the 640px rule below,
   a bento pair of rows, allowed by PAGE-TEMPLATE-LAWS.md section 8) and
   only 1280 and up gets four columns, where each button has enough width
   on its own. */
@media (min-width: 1280px) {
  .myth-band-events__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.myth-band-events__card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid rgba(28, 19, 16, 0.1);
  overflow: hidden;
  background: #FFFFFF;
}

.myth-band-events__figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.myth-band-events__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.myth-band-events__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

/* MANUAL-13: heading and line both carry a reserved box, so the four cards
   are the same height by construction, not by luck, and the `margin-top: auto`
   on the CTA resolves to the same value on all four. Grid row-stretch would
   equalise the CARDS anyway; the reservation is what puts the four BUTTONS on
   one baseline, which is what loop/verify.mjs measures. */
.myth-band-events__card-heading {
  font-size: 20px;
  line-height: 1.2;
  min-height: 2.4em;   /* 48px, exactly two lines */
  color: #1C1310;
  margin: 0;
}

/* Four lines, not Vesper's two. The spec reserved two lines against a 64
   character budget; Marlowe's four kept lines run 76 to 110 characters, and
   110 characters is 4 lines at 390 and at 1440 (33 and 32 characters per
   line measured). Two lines would have clamped the longest two cards to an
   ellipsis, which loses shipped copy. Four is the reserve that fits every
   card at every width with nothing truncated, and it is still one box for
   all four so the buttons stay on one baseline. The clamp stays as a guard
   against a future longer string, not as a working limit. */
.myth-band-events__card-text {
  font-family: Karma, serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 6em;     /* 96px, exactly four lines */
  color: #1C1310;
  margin: 0;
  padding-bottom: 0;   /* Divi's bare `p { padding-bottom: 1em }` */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* MANUAL-1 (2026-09-05, user): "Find out about date night" clipped inside
   the card at narrower widths, since the shared `.myth-btn` atom
   (css/myth-motion.css, not edited here) is `white-space: nowrap` at
   1rem/0.03em for a short two-to-three-word label. Overridden here, on
   this one card action only, one step down in size and tracking, with
   wrapping turned back on and a matched line-height so a two-line label
   sits centred inside the same 48px-floor button instead of overflowing
   it. Horizontal padding (24px, from `.myth-btn`) is untouched; labels
   are untouched. Selector is `.myth-btn.myth-band-events__cta` (two
   classes, not one) on purpose: `wp_enqueue_style()` names `myth-motion`
   as this file's dependency, but WordPress still prints this file's `<link>`
   before `myth-motion.css`'s own in the served HTML (measured), so a
   single-class `.myth-band-events__cta` rule loses to `.myth-btn`'s
   equal-specificity `white-space: nowrap` on source order alone. The
   compound selector outranks it on specificity instead, which holds
   regardless of link order and needs no `!important`. */
.myth-btn.myth-band-events__cta {
  margin-top: auto;
  /* MANUAL-2 (2026-09-05, coordinator instruction, item 3): one step down
     from 0.875rem/0.02em, applied identically to all four cards, after the
     label swap ("Plan a date night", "Tell us your plans"). Measured with
     Playwright (loop/work/MANUAL-2/probe-btn2.mjs): this single step is
     enough to keep all four on one line at 1440, 768 and 390 (the button's
     stretched width there has slack). At 1024 the four-column row leaves
     only 91.7px for text next to the arrow (button outer width 164px,
     24px padding each side, 8px gap, 14.3px arrow), while "Plan your team
     day" needs 154.8px unwrapped at 14px; even at the smallest size still
     legible as a button label the text does not reach one line at that
     specific column width without either widening the column (out of
     scope for this instruction) or shrinking past legibility, so 1024 is
     reported as still 2 lines below rather than forced smaller. */
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  white-space: normal;
  line-height: 1.2;
  min-height: 48px;
  height: auto;
  /* At the narrowest rail width (320) and the four-column desktop row
     (1024), "Find out about date night" wraps to three lines, not two;
     zero vertical padding (inherited from `.myth-btn`) left the box only
     as tall as 3 x 16.8px line-height with no room for the font's own
     ascent/descent, so the rendered glyphs measured taller than the box
     (scrollHeight over clientHeight, checked with Playwright). 8px of
     vertical padding is added, horizontal stays the required 24px. */
  padding-top: 8px;
  padding-bottom: 8px;
}

@media (max-width: 767px) {
  /* FOLD P1 FIX, 2026-09-05 (T07c responsive pass): the base rule above
     (`grid-template-columns: 1fr`) was never cleared here, so this block
     mixed one explicit 1fr track with three implicit `grid-auto-columns`
     tracks; the explicit 1fr track, greedy for leftover space, computed to
     2px once the three 82%-wide implicit tracks had already claimed far
     more than the container's own width, and the first event card
     collapsed to that 2px column, unreadable and effectively lost from
     the rail. `grid-template-columns: none` clears the explicit template
     so all four columns size from `grid-auto-columns` alone, the same
     fix already proven correct on the games grid rail
     (`.myth-games--rail .myth-games__grid`, this file's neighbour). */
  .myth-band-events__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  .myth-band-events__card {
    scroll-snap-align: start;
  }
}

/* REVIEW-01: .myth-band-events__more is deleted with the "See all 12 rooms"
   button (the All Games hub is retired). Nothing else uses the class. */

/* MANUAL-12: the Ink recolour on this band's ghost is DELETED (it
   supersedes loop/DECISIONS.md row 78). It existed only because the shared
   ghost carried GOLD text, which measures about 2.19:1 on this parchment
   band. Tertiary now carries a required surface variant, and --on-light is
   Maroon at 12.23:1, so the label is legible AND on-accent without the
   route knowing anything about it. Leaving the override in place would
   have silently held the button at Ink and made the one tertiary on the
   homepage the only one in the site that is not the family colour. */

/* -----------------------------------------------------------------------
 * Band 9: Practical strip (Ink, definition list)
 * --------------------------------------------------------------------- */
/* MANUAL-8: bottom padding removed at every width; the stats strip that
   follows carries the single internal gap (see .myth-band-stats). */
.myth-band-practical {
  background: #1C1310;
  color: #FFFFFF;
  padding-bottom: 0;
}

.myth-band-practical__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* MANUAL-1 (2026-09-05, user): one consistent spacing rule. The heading's
   own bottom margin is now the ONLY thing controlling the gap under it
   (24px at 390, 32px from 1024px up); the list's own `gap` is dropped to 0
   so the row-to-divider-to-row rhythm is set by a single `padding: 20px 0`
   on `.myth-band-practical__row` instead of two different properties
   (a flex `gap` plus a one-sided `padding-bottom`) landing on the same
   number by coincidence. `padding: 20px 0` puts the divider line exactly
   20px below one row's own content and exactly 20px above the next row's,
   the same rule producing both. The first row has no divider above it, so
   its own top padding is zeroed, keeping the heading gap exact.

   Selector uses two classes (`.myth-band-practical
   .myth-band-practical__heading`), not one, because the shared
   `.myth-band h1, .myth-band h2, .myth-band h3 { margin: 0 }` rule (this
   file, shared atoms section) is a compound selector too and otherwise
   wins on specificity and zeroes this margin back out regardless of
   source order. */
.myth-band-practical .myth-band-practical__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #FFFFFF;
  margin: 0 0 24px;
}

@media (min-width: 1024px) {
  .myth-band-practical .myth-band-practical__heading {
    margin-bottom: 32px;
  }
}

.myth-band-practical__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.myth-band-practical__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(212, 169, 74, 0.2);
}

.myth-band-practical__row:first-child {
  padding-top: 0;
}

@media (min-width: 768px) {
  .myth-band-practical__row {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }
}

.myth-band-practical__term {
  font-family: "Julius Sans One", sans-serif;
  font-size: 15px;
  color: #D4A94A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.myth-band-practical__def {
  font-family: Karma, serif;
  font-size: 17px;
  color: #FFFFFF;
  margin: 0;
}

.myth-band-practical__def a {
  color: #D4A94A;
}

/* -----------------------------------------------------------------------
 * Band 10: the GIFT STRIP (Parchment).
 *
 * MANUAL-13: it is no longer a band in the stack. It overlaps the band
 * above and, when the caller says the footer is next, the footer below,
 * painting over both, so the page ends on a bright shelf rather than on a
 * third dark surface. Reference (not a copy): the strip on
 * mythologicescaperooms.co.uk. Full spec and measurements:
 * loop/work/MANUAL-13/home-vesper.md section 8.
 * --------------------------------------------------------------------- */

/* The Divi section wrapping the strip pulls up into the band above always,
   and down into the footer only when the caller says the footer is next.
   A room page passes seam="none" because the frozen games carousel is
   what follows it there, and a frozen surface is never overlapped. */
.et_pb_section:has(.myth-gift-strip) {
  position: relative;
  z-index: 3;
  margin-top: -28px;
}

.et_pb_section:has(.myth-gift-strip--seam-footer) {
  margin-bottom: -24px;
}

@media (min-width: 768px) {
  .et_pb_section:has(.myth-gift-strip) {
    margin-top: -40px;
  }

  .et_pb_section:has(.myth-gift-strip--seam-footer) {
    margin-bottom: -32px;
  }
}

@media (min-width: 1024px) {
  .et_pb_section:has(.myth-gift-strip) {
    margin-top: -56px;
  }

  .et_pb_section:has(.myth-gift-strip--seam-footer) {
    margin-bottom: -40px;
  }
}

/* MANUAL-22: the seam the section's z-index 3 could not win.
 *
 * Measured on the served page: the tilted card's lower left corner was
 * painted over by the footer at 768 and 1440 on /, /gillingham/ and
 * /maidstone/. Sampling 625 points inside the card's rotated shape, 16 of
 * them at 768 and 17 at 1440 returned .mel-footer / .mel-footer__inner as
 * the topmost element instead of the image. On /the-game/ the strip passes
 * seam="none", its box stops above the frozen carousel and 0 of 625 points
 * were covered, so nothing here touches that route or that surface.
 *
 * The chain, read off the live DOM. Divi Theme Builder gives the post and
 * the footer one wrapper each, and Divi's own CSS puts both at
 * `position: relative; z-index: 1`:
 *   BODY > .et-boc > div > article ... > .et-l--post   > .et_builder_inner_content [z 1]
 *                                              -> .et_pb_section:has(.myth-gift-strip) [z 3]
 *   BODY > .et-boc > .et-l--footer > .et_builder_inner_content [z 1] -> .mel-footer [static]
 * Two positioned siblings at the same z-index paint in tree order, so the
 * footer's wrapper wins, and the strip's z-index 3 cannot answer it: that 3
 * only orders sections INSIDE the post's wrapper (which is what keeps the
 * strip over the band above it, and that part already works).
 *
 * Raising the post's wrapper instead was rejected. The header's Theme
 * Builder wrapper is z-index 2 in the same root context and carries the
 * mobile menu scrim (99990) and the burger (99996) inside it, and the post
 * wrapper carries the fixed booking rail (99970); post above 1 puts the
 * rail over the open menu. So the footer's wrapper drops below the post's
 * instead, on the routes that carry a strip only.
 *
 * z-index 0, NOT auto: `auto` would stop the wrapper being a stacking
 * context and promote the footer's own column (z-index 2, Divi) into the
 * root context, where it would beat the post's wrapper and put the seam
 * back. 0 keeps the context and just seats it under the page.
 * Nothing else overlaps: the two wrappers' boxes do not intersect (the
 * strip's negative bottom margin is what carries the card across, and the
 * card is the only thing that crosses), so this changes paint order at the
 * seam and nothing else. Header at 2 still covers both. */
body:has(.myth-gift-strip) .et-l--footer > .et_builder_inner_content {
  z-index: 0;
}

/* The strip itself. The padding is deliberately NOT the 48/64/96 band
   scale: this is not a band, it is a strip sitting on a seam, and law
   section 1 fixes the scale for bands. Recorded here so it is a decision,
   not a drift. The 2px gold bottom rule takes over the footer's own top
   rule where the two overlap, so the gold line across the page is
   unbroken, just painted by the strip and sitting the bleed distance
   lower.

   MANUAL-17: the strip stops clipping its artwork. `overflow: visible`
   replaces `overflow: hidden`, so the card, which is now larger than the
   strip is tall, crosses both edges and reads as sitting ON the page
   rather than inside a band. Measured: every ancestor of this section is
   already overflow:visible up to the body (.et_pb_code_inner,
   .et_pb_module, .et_pb_column, .et_pb_row, .et_pb_section,
   .et_builder_inner_content), so NO Divi wrapper needs an override; the
   strip was the only thing clipping. The section's own position:relative
   and z-index:3 above is what paints the card over the band above, over
   the footer and, on a room page, over the top padding of the frozen
   carousel. No new z-index anywhere. */
.myth-gift-strip {
  position: relative;
  overflow: visible;
  padding: 24px 20px;
  background: #FFFFFF url("../../../uploads/2022/09/main-content-bg.jpg") center / cover;
  border-bottom: 2px solid #D4A94A;
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.45), 0 14px 34px rgba(0, 0, 0, 0.45);
  color: #1C1310;
}

@media (min-width: 768px) {
  .myth-gift-strip {
    padding: 28px 40px;
  }
}

@media (min-width: 1024px) {
  .myth-gift-strip {
    padding: 32px 64px;
  }
}

/* seam="none": the caller has said the thing below is not the footer. On a
   room page it is the frozen games carousel, and a frozen surface is never
   overlapped, painted over OR SHADOWED ONTO, so the downward half of the
   seam shadow is dropped and the strip stops dead on its own bottom edge.
   The upward half stays: the band above it is ours. */
.myth-gift-strip--seam-none {
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.45);
}

/* MANUAL-17: the 1024 three column layout (240px 1fr auto) is gone. At
   every width from 768 up the copy column carries the heading, the line
   and THEN the button, and the media column spans both rows beside them;
   under 768 the same order stacks. The 40px and 48px column gaps are not
   decoration: at 768 the card's rotated box is 289.2px wide inside a
   240px column, so it spills 24.6px each side, and the gap is what keeps
   its right corner off the copy. Do not reduce them. */
.myth-gift-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "copy" "action";
  gap: 24px;
  align-items: center;
}

@media (min-width: 768px) {
  .myth-gift-strip__inner {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas: "media copy" "media action";
    gap: 16px 40px;
  }
}

@media (min-width: 1024px) {
  .myth-gift-strip__inner {
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-areas: "media copy" "media action";
    gap: 16px 48px;
  }
}

/* The CELL reserves the layout box, not the image. The image is out of
   flow (below), so its size can be chosen for the bleed without changing
   the strip's height, and nothing shifts when it loads. */
.myth-gift-strip__media {
  grid-area: media;
  position: relative;
  height: 150px;
  display: block;
}

@media (min-width: 768px) {
  .myth-gift-strip__media {
    height: 140px;
  }
}

@media (min-width: 1024px) {
  .myth-gift-strip__media {
    height: 150px;
  }
}

.myth-gift-strip__copy {
  grid-area: copy;
}

/* The button sits UNDER the heading and the line and starts on the same
   left edge. justify-self:start, so it is its own width at every width;
   the old max-width:767px width:100% rule is deleted. A full width button
   under 768 and an auto width button above it are two different
   components; one left aligned button at every width is one. */
.myth-gift-strip__action {
  grid-area: action;
  justify-self: start;
}

/* The tilt. `transform` does not change the layout box, so the rotated art
   bleeds past the strip's top and bottom edges, and since MANUAL-17 it is
   no longer clipped there. `drop-shadow`, not `box-shadow`: the PNG has a
   transparent surround, so drop-shadow follows the card's rounded
   silhouette instead of drawing a rectangle around the image box.

   translateY(-10px) under 768 ONLY. A stacked layout cannot poke downwards
   without covering its own heading: with `p` the strip padding, `Hm` the
   media cell, `g` the row gap and `Hb` the card's rotated height,
   requiring both a positive upward bleed and a card that clears the
   heading gives 2*bleedUp <= 2g - 2c - 2p, which has no solution for any
   positive clearance at g = p = 24. So the phone widths take the whole
   poke upwards. loop/work/MANUAL-17/vesper.md 2.5. */
.myth-gift-strip__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 186px;
  max-width: 186px;
  height: auto;
  transform: translate(-50%, -50%) translateY(-10px) rotate(-30deg);
  filter: drop-shadow(0 14px 24px rgba(28, 19, 16, 0.45));
}

@media (min-width: 768px) {
  .myth-gift-strip__img {
    width: 240px;
    max-width: 240px;
    transform: translate(-50%, -50%) rotate(-30deg);
  }
}

@media (min-width: 1024px) {
  .myth-gift-strip__img {
    width: 260px;
    max-width: 260px;
    transform: translate(-50%, -50%) rotate(-30deg);
  }
}

/* The heading is Ink, not Maroon. The button is a Maroon fill now, and two
   Maroon marks in a 228px strip is two payoffs. Ink heading, Maroon
   button, one payoff. Ink on the parchment texture's darkest pixel
   measures 5.00:1, and 18.26:1 on the white the texture mostly is.

   REVIEW-21 (Sightline, 2026-09-11). The 8px margin below never rendered:
   this selector is 0,1,0 and this file's own `.myth-band h1, h2, h3 {
   margin: 0 }` (section 0, 0,1,1) beats it on every one of the nine routes
   this strip renders on, the identical inert-margin shape MANUAL-25 found
   and fixed four times on /gillingham/. Restated at 0,2,0 below, the same
   technique. */
.myth-gift-strip__heading {
  font-family: "Julius Sans One", sans-serif;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #1C1310;
  padding-bottom: 0;
}

.myth-gift-strip .myth-gift-strip__heading {
  margin: 0 0 8px;
}

@media (min-width: 1024px) {
  .myth-gift-strip__heading {
    font-size: 1.875rem;
  }
}

.myth-gift-strip__text {
  font-family: Karma, serif;
  font-size: 17px;
  line-height: 1.5;
  color: #1C1310;
  margin: 0;
  padding-bottom: 0;
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing here animates: the tilt is static. This block exists only so a
     future hover is never added without the guard. */
  .myth-gift-strip__img {
    transition: none;
  }
}

/* -----------------------------------------------------------------------
 * MANUAL-21 (user, 2026-09-08), Vesper sections 2, 3 and 4.
 * above="parchment": the strip with a PARCHMENT band above it. True on
 * /gillingham/ and /maidstone/ only, where the FAQ band is the last band on
 * the page and the strip closes it. Every other call site puts Ink or
 * Charcoal above the strip, passes no `above`, and prints none of this.
 *
 * Law section 1's strip carve-out covers a strip whose surface differs from
 * BOTH neighbours. Here it differs from neither above nor, in kind, from the
 * footer's own rule below, so the top seam is DRAWN rather than implied.
 *
 * One correction to the Band 10 note above, measured on all three route
 * families at 320, 390, 768, 1024, 1200 and 1440: the strip's BOX has never
 * bled into anything. The negative section margins are consumed exactly by
 * the anonymous line box the whitespace text node inside .et_pb_row makes
 * before the column, so the strip's top edge lands on the band above's
 * bottom edge at 0.00px and the footer's top edge sits 1.00px below the
 * strip's bottom edge. What crosses the seams is the tilted art and the two
 * shadows, and nothing else. The margins are still load bearing: removing
 * them opens a 28 to 56px gap of page background above the strip.
 * loop/work/MANUAL-21/vesper.md section 3.1.
 * --------------------------------------------------------------------- */

/* 1. The drawn edge: the strip's own bottom rule, mirrored. Same 2px, same
      #D4A94A, no new colour and no new idea. Measured, it takes the seam's
      largest per-channel row-to-row delta from 53.6 (a raw parchment-on-
      parchment texture restart, which MANUAL-14 section 8.2 recorded at 76
      max at 1440 and called a plainly visible join) to 164.5 across a
      saturated warm line, which no crop discontinuity can imitate.
   2. The upward shadow, lightened. This is the only call site in the build
      where that shadow lands on a LIGHT ground; at 0.45 black over 34px it
      drops the reading band above from rgb(229, 222, 197) to rgb(142, 138,
      122) over its last 40px. At 0.22 Ink over 18px the ramp is about 21px
      and bottoms out near rgb(179, 175, 155), so the band above reads as lit
      parchment with a shadow on it. rgba(28, 19, 16, ...) is Ink; pure black
      is not one of the six documented hexes and reads cold on a warm sheet.
      The downward half is unchanged at its shipped value: it lands on the
      Ink footer, where it always has.
   3. The inset matches the two location routes' own band inset below 1024,
      where the strip's 20 / 40px against the bands' 32 / 64px would put a 12
      or 24px step in the left margin between two surfaces of the same
      colour. From 1024 both are already a 64px inset with a 1200px cap and
      nothing is written. The block padding stays OFF the 48/64/96 band
      scale, which is the law's own carve-out and is half the signal that
      this is a strip and not a second parchment band. Measured cost: 27.19px
      of strip height at 390, where the line takes one more row, and nothing
      at 320, 768 or above. */
.myth-gift-strip--above-parchment {
  border-top: 2px solid #D4A94A;
  box-shadow: 0 -6px 18px rgba(28, 19, 16, 0.22), 0 14px 34px rgba(0, 0, 0, 0.45);
  padding-inline: 32px;
}

@media (min-width: 768px) {
  .myth-gift-strip--above-parchment {
    padding-inline: 64px;
  }
}

/* 5. REVIEW-12 (Vesper section 5.4): PARCHMENT ABOVE AND NO FOOTER BELOW.
      The two modifiers had never co-occurred and their combination had no
      rule. .myth-gift-strip--seam-none drops the downward half of the seam
      shadow, and then --above-parchment, later in this file, re-adds it in
      its own two-layer shorthand, so seam="none" was being silently undone
      the moment above="parchment" was passed with it. That pair is exactly
      what /events/ is: parchment band above, parchment FAQ band below, and
      a 45 percent black shadow on parchment is a smudge, not a seam. R06's
      handover said seam="footer" for that route; it was written before
      anyone measured what actually follows the strip there.

      One declaration, keyed on the two modifier classes at 0,2,0, no
      !important, no new colour (Ink at an alpha the component already
      uses). NOT a page scope: law 7.6, "nothing is elevated by a page", so
      any future route with parchment above and a non-footer surface below
      inherits it and no selector names /events/. It is also already
      correct for the frozen-surface case, which is why --seam-none exists:
      a frozen surface is never overlapped, painted over OR SHADOWED ONTO,
      and this combination paints nothing downward at all.

      The bottom seam is then drawn by the base component's own 2px Gold
      border-bottom. Gold rule top, Gold rule bottom, a light lift upward,
      nothing downward. */
.myth-gift-strip--above-parchment.myth-gift-strip--seam-none {
  box-shadow: 0 -6px 18px rgba(28, 19, 16, 0.22);
}

/* 4. The gift section's box begins 28 / 40 / 56px above the strip's own top
      edge, for the line-box reason in the header note. That band of the FAQ
      band above it is transparent, empty and, at z-index 3, CLICKABLE.
      Measured margin to the nearest control above is 20.00px at 390 and
      22.80px at 1440. Take the hit target out of the empty box and give it
      back to the strip, which is the only thing in the section that has
      controls. Scoped to the placement class, so the homepage and the twelve
      room routes keep the behaviour they ship with. No geometry changes and
      nothing here is visible. */
.et_pb_section:has(.myth-gift-strip--above-parchment) {
  pointer-events: none;
}

.myth-gift-strip--above-parchment {
  pointer-events: auto;
}

/* -----------------------------------------------------------------------
 * MANUAL-43-FINAL (user, 2026-09-12). /events/'s own dark override:
 * `[myth_gift_band above="parchment" seam="none" dark="on"]`.
 *
 * Checked first, per the user's own instruction, whether an on-dark gift
 * strip already existed anywhere: it did not. `.myth-gift-strip`'s only
 * background, everywhere it is used (homepage, all twelve room pages,
 * /gillingham/, /maidstone/, /events/), is the light parchment texture two
 * rules above (`#FFFFFF url(main-content-bg.jpg)`), and its heading and
 * body text (below) are Ink, tuned for that light ground only. No reusable
 * dark pairing existed to copy, so this uses the site's own established
 * on-dark surface instead: solid Ink `#1C1310`, the same flat value
 * `.myth-band-faq` (below) and six other bands in this file already paint,
 * not a new colour. The button needs no change: `.myth-btn--primary`
 * (css/myth-motion.css) is "identical on both surfaces; the fill carries
 * it", White on Maroon, already safe here.
 *
 * Measured, not assumed: White `#FFFFFF` on Ink `#1C1310` is 18.26:1
 * (WCAG relative-luminance formula), the same figure REVIEW-23 already
 * recorded for this exact pairing elsewhere on the site.
 *
 * `above="parchment"` is untouched and still does its own job (the seam
 * border and shadow tuned for a light band above); `dark` only repaints
 * the strip's own surface and text, so the two modifiers combine cleanly
 * with no interaction. Scoped to this one class, which only this one
 * shortcode call on this one page ever prints: no other route's gift
 * strip is touched, confirmed live on the homepage and the FAQ hub's own
 * light strip before and after this rule was added. */
.myth-gift-strip--events-dark {
  background: #1C1310;
}

.myth-gift-strip--events-dark .myth-gift-strip__heading,
.myth-gift-strip--events-dark .myth-gift-strip__text {
  color: #FFFFFF;
}

/* -----------------------------------------------------------------------
 * Band 11: FAQ accordion (Ink)
 * --------------------------------------------------------------------- */
/* MANUAL-61 (2026-09-15, user-reported). The question label and chevron
   sat flush against this box's own edges: `.myth-band-faq__question`
   (below) already carries `padding: 16px`, but also `width: calc(100% +
   32px)` and a matching -16px margin on each side, which cancels that
   padding out exactly, so the visible label lands on this box's own
   edge rather than 16px inside it. That trick was deliberate at MANUAL-51,
   to widen the button's hit box and hover tint 16px past the label with
   no on-screen shift; MANUAL-55 later deleted the hover tint sitewide, so
   the one thing the trick was protecting is gone. Fixed here, not on the
   button: `padding-inline: 16px` on THIS box means the button's own
   width-plus-negative-margin math now cancels out relative to a
   container that is itself 16px narrower on each side, so the label
   lands 16px inside the real edge instead of on it, with the more
   heavily tuned button rule (R04's chevron centring, MANUAL-51's hit box,
   MANUAL-55's hover history) untouched. Confirmed live first that none of
   the three page-scoped restatements below (Gillingham, Maidstone, the
   room template) or the Events/poster variants add their own padding to
   `.myth-band-faq`, so this one line is the only place it needs to go. */
.myth-band-faq {
  background: #1C1310;
  color: #FFFFFF;
  padding-inline: 16px;
}

/* MANUAL-8 (user, 2026-09-05): the FAQ as the closing block of the What
   players say band ([myth_story_band faq="1"]). Transparent, so the
   band's gears image and scrim show through; one internal gap above it
   on the spacing scale (40 / 48 / 64); the FAQ's own left alignment is
   restored under the band's centred text; z-index is inherited from the
   band's inner column, which already sits above the scrim. */
.myth-band-faq--joined {
  background: transparent;
  margin-top: 40px;
  text-align: left;
}

@media (min-width: 768px) {
  .myth-band-faq--joined {
    margin-top: 48px;
  }
}

@media (min-width: 1024px) {
  .myth-band-faq--joined {
    margin-top: 64px;
  }
}

.myth-band-faq__inner {
  max-width: 900px;
  margin: 0 auto;
}

.myth-band-faq__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #FFFFFF;
  margin: 0 0 24px;
}

/* R07 (review A10). THE ONE DIVIDER STYLE, and the one place it is
   declared. Before this task the six FAQ instances on the site drew the
   same hairline four different ways, measured on the served pages
   (loop/work/REVIEW-07/before.json):

     instance      rule on the item      first item   air under the rule
     homepage      1px gold 20% bottom   no top rule  12px flex gap
     /gillingham/  1px white 24% bottom  top rule     0px
     /maidstone/   1px white 24% bottom  top rule     8px padding
     room template 1px gold 20% bottom   no top rule  8px padding
     /events/      no hairline at all: the Divi Pixel module drew boxed
                   entries with a drop shadow, plus an ornamental gold bar
                   image under the heading as the band's own divider

   The style below is the one every band now draws: a 1px solid hairline
   under every item AND over the first one, so the list is closed at both
   ends, with 8px of air between the trigger and the rule. Nothing else
   about the accordion changed to get there.

   COLOUR IS THE ONE THING THAT STAYS PER SURFACE, and it is a variable
   rather than a border shorthand precisely so a surface can set the colour
   without restating the geometry and drifting again. Default is the Gold
   20% the Ink and Charcoal bands use; the two MANUAL-23 Poster bands set
   White 24% in their own sheets and are otherwise untouched, which is the
   user's 2026-09-09 addition; the parchment variant below sets Ink 12%.

   The gap goes with it. A 12px flex gap put the homepage's hairline 12px
   clear of the next question while every other band's sat against it, and
   an 8px item padding is what the same separation is already built from on
   /maidstone/ (MANUAL-20) and the room template (F5), where it also gives
   an OPEN panel 8px before the hairline instead of sitting on it. Net
   height change on the homepage FAQ block: 4 x 12px of gap out, 5 x 8px of
   padding in, minus 8px overall. On /gillingham/, which had neither, plus
   64px, and its two largest tap targets stop sitting 1px apart, which is
   the same adjacent-target defect F5 fixed on the room template. */
.myth-band-faq {
  --myth-faq-rule: rgba(212, 169, 74, 0.2);
}

.myth-band-faq__list {
  display: flex;
  flex-direction: column;
}

/* MANUAL-51 (2026-09-14, user-reported). Scoped to the FAQ hub's own
   instance (`.myth-faq-hub__list`, the second class this same wrapper
   already carries, inc/bands-faq.php), not `.myth-band-faq__list`
   itself: every other page's FAQ teaser (homepage, room pages, booking
   pages) stays exactly as it is. Measured live before this fix: the
   page's own intro paragraphs already end 22.52 to 30.00px above the
   list (Divi's own paragraph spacing, not a rule this file declared),
   noticeably short of this site's own 48/64/96 band rhythm. This rule
   adds that rhythm as the list's own top margin, on top of whatever
   Divi's paragraph module already contributes. */
.myth-faq-hub__list {
  margin-top: 48px;
}

@media (min-width: 768px) {
  .myth-faq-hub__list {
    margin-top: 64px;
  }
}

@media (min-width: 1024px) {
  .myth-faq-hub__list {
    margin-top: 96px;
  }
}

/* MANUAL-51 (2026-09-14, user-reported): from 1024px up, this page's own
   instance splits into two columns; the shared `.myth-band-faq__list`
   (every other teaser: homepage, room pages, booking pages, /events/)
   is untouched and stays the single flex column it already is.
   `column-count: 2` (CSS multicol) was considered first and rejected:
   multicol's own "balance" fill mode recalculates column breaks whenever
   any item's own height changes, so opening one accordion answer can
   reflow every item after it into a different column while the visitor
   is mid-interaction, confirmed as a real risk, not assumed. A CSS Grid
   with `grid-auto-flow: column` avoids this: each column is an
   independent set of grid tracks, so one item's open/closed height
   never moves items already placed in the OTHER column.
   `grid-template-rows: repeat(10, auto)` fixes the split at 10 items in
   column one, 9 in column two: `myth_faq_hub_items()`
   (inc/bands-faq.php) currently returns 19 items, confirmed live via
   `wp eval`, and 10 is `ceil(19 / 2)`. THIS NUMBER IS A DEPENDENCY ON
   THAT COUNT: if a question is ever added to or removed from that
   array, update the `10` below to the new `ceil(count / 2)` or the
   split will land one item early or late (still two columns, just an
   uneven one, not a broken layout).
   Tab and reading order: `grid-auto-flow: column` places items 1 to 10
   in column one top to bottom, THEN 11 to 19 in column two top to
   bottom, following the same order as the underlying HTML (and
   therefore the tab order) exactly; it does not interleave row by row
   across both columns, which would make tab order jump left-right-left-
   right instead of down-then-down. Confirmed live, not assumed. */
@media (min-width: 1024px) {
  .myth-faq-hub__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(10, auto);
    grid-auto-flow: column;
    column-gap: 48px;
  }
}

.myth-band-faq__item {
  border-top: 0 solid var(--myth-faq-rule);
  border-bottom: 1px solid var(--myth-faq-rule);
  padding-bottom: 8px;
}

.myth-band-faq__item:first-child {
  border-top-width: 1px;
}

.myth-band-faq__q-heading {
  margin: 0;
}

/* GATE FIX (T07c, gate.md design-gate item 6): every other interactive
   control on the page had both a hover and a focus-visible state; this
   one only had focus-visible. Background is a low-opacity Gold tint
   (palette token, not a new colour) with the question text shifting to
   Gold, matching the Ink band it sits on (Gold on Ink is 8.32:1,
   spec.md section 0); pointer devices only, off under reduced motion,
   same guard already used for the location-panel image zoom and the
   feature-tile icon colour above. */
/* MANUAL-51 (2026-09-14, user-reported). The hover/focus tint ran
   edge-to-edge with no side inset, since this rule had no horizontal
   padding to give it one. `padding: 16px` (both axes) plus an equal
   `margin-inline: -16px` so the added padding's inward pull on the
   visible label/icon is cancelled by the same amount of outward margin:
   the hit box (and its background tint) is now 16px wider on each side
   than the label's own box, but the label and chevron sit exactly where
   they sat before, confirmed live via getBoundingClientRect (0.00px
   shift at every width). The R04 comment block below, whose measured
   chevron translate assumes this button's own edges as its reference
   frame, needed no change: the translate is relative to the icon's own
   12px square, not to the button's outer box, and the icon's own
   position is exactly what this fix holds fixed. */
.myth-band-faq__question {
  width: calc(100% + 32px);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: transparent;
  border: 0;
  padding: 16px;
  margin-left: -16px;
  margin-right: auto;
  font-family: "Julius Sans One", sans-serif;
  font-size: 1.1rem;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

/* MANUAL-55 (2026-09-14, the user's own instruction): the hover tint that
   stood here is removed sitewide, this rule and the six page-scoped
   restatements of it (css/myth-bands.css's own Events variant, and one
   each in css/myth-gillingham.css, css/myth-maidstone.css and
   css/myth-room.css). The transition property above is left in place,
   harmless with nothing left to transition into on hover, per the task's
   own instruction not to touch it. :focus-visible below is untouched:
   keyboard focus indication stays, only the mouse-hover tint goes. */

.myth-band-faq__question:focus-visible {
  outline: 2px solid #D4A94A;
  outline-offset: 2px;
}

/* R04 (review A7 and A1). The drawing is unchanged: a 12px square with a
   2px Gold right and bottom border, spun 45deg into a chevron. What
   changed is where its INK lands, and both numbers below are measured
   (loop/work/REVIEW-04/before.json), not chosen.

   1. IT OVERFLOWED THE HOVER SURFACE, which is what the user saw. A square
      of side S rotated 45deg has a bounding box of S x root2, so this 12px
      slot carries 16.97px of drawing: 2.49px of it hung past the right
      edge of the question button, and the hover tint is that button's own
      box, so on hover the chevron's right arm sat outside the tint.
      Measured at +2.49px on / and /the-game/ at 390, 768 and 1440 in both
      engines. The slot is the thing that is wrong here, so the ink is
      pulled 3px back inside it: the arm tip now finishes 0.51px INSIDE the
      tint at every width, in both states, and the 16px flex gap absorbs
      the same 3px on the left with 13px to spare.

   2. THE INK IS NOT CENTRED IN ITS OWN BOX. Only two of the square's four
      edges are painted, so after the 45deg spin the chevron occupies the
      lower part of its box: the ink runs from 1.41px above the box centre
      (the 2px border's own width across the diagonal) to 8.49px below it
      (6 x root2), which is a 9.90px mark whose centre is 3.54px below the
      box centre, and the box centre already sat 0.79px below the label's
      cap height centre. The mark was 4.33px low. Worse, the open state
      spins to -135deg, which puts the same ink 3.54px ABOVE the centre, so
      the chevron JUMPED 7.07px up the row when a question was opened.
      Both states now carry the translate that centres their own ink on the
      label's cap centre, so the mark stays put and only the rotation
      animates. Residual 0.00px, both engines, all three widths.

   Paint only: transform on a flex item cannot change its own box or the
   row's height, so no question, panel or band moves. On a question whose
   label wraps, the icon still centres on the whole block (the design as
   built); that placement is Vesper's and is reported to R07 untouched. */
/* R07, and the open item R04 handed over (rule.md "Left undone" 1). WHEN A
   QUESTION WRAPS, THE MARK MUST STAY ON THE FIRST LINE. `align-items:
   center` on the trigger centres the icon on the WHOLE label block, so a
   two-line question dropped the mark 8.8px below the first line's cap
   centre and a four-line one dropped it 29.0px, measured at 390 on
   /gillingham/ and /maidstone/. Read down a phone screen the marks then
   sit at four different heights in one list.

   The fix is two declarations and it changes nothing for a one-line
   question. `align-self` overrides `align-items` FOR THIS ITEM ONLY, so
   the label keeps its own centring and only the icon moves to the top of
   the trigger's content box; the margin then puts it back exactly where
   centring had it on a single line, because on a single line the content
   box IS one line box:

       margin-top = (line box height - icon box height) / 2

   `1lh` is that line box height in CSS, resolved from the icon's own
   inherited line-height, so the expression is correct at every font size
   this component is used at without a number being copied anywhere. The
   px declaration above it is the fallback for an engine without `lh`
   (Chromium under 109, Safari under 16.4) and carries the value this
   band's 1.1rem type computes to; the two Poster bands restate both lines
   for their 16px plus at 1.5rem in their own sheets, beside their own
   height. No box moves: `margin-top` on a flex item whose cross size is
   smaller than the line cannot change the trigger's height, and 178
   question boxes are compared before and after in cortex.md section 6. */
.myth-band-faq__icon {
  flex: none;
  width: 12px;
  height: 12px;
  align-self: flex-start;
  margin-top: 3.5px;
  margin-top: calc((1lh - 12px) / 2);
  border-right: 2px solid #D4A94A;
  border-bottom: 2px solid #D4A94A;
  transform: translate(-3px, -4.33px) rotate(45deg);
  transition: transform 300ms ease;
}

.myth-band-faq__question[aria-expanded="true"] .myth-band-faq__icon {
  transform: translate(-3px, 2.75px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .myth-band-faq__icon {
    transition: none;
  }
}

.myth-band-faq__answer {
  font-family: Karma, serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  padding: 0 0 20px;
  margin: 0;
}

.myth-band-faq__all {
  margin-top: 24px;
  display: inline-flex;
}

/* MANUAL-51 (2026-09-14, user-reported), mobile only, the homepage FAQ
   teaser's own two elements: `.myth-band-faq__heading` and the "Read all
   the FAQs" tail link, `.myth-band-faq__all` (neither carries an
   explicit text-align of its own today, both were left aligned by
   default). NOT done via `text-align: center` on the shared
   `.myth-band-faq__inner` wrapper both sit inside: that wrapper also
   contains `.myth-band-faq__list`, and `.myth-band-faq__answer` (the
   FAQ answers) declares no text-align of its own either, so centring the
   wrapper would have silently centred every open answer's body copy too,
   confirmed live before writing this fix. Each element is centred on its
   own instead: the heading directly, the tail link by dropping the
   "inline" from its `display` (a block-level flex container's own auto
   width is fit-content, confirmed this session on the FAQ accordion
   itself, which is exactly what `margin-inline: auto` needs to centre
   it) without touching its `inline-flex` value at other widths.
   `a.myth-band-faq__all`, not the bare class: confirmed live via
   `document.styleSheets` that css/myth-motion.css's own `.myth-btn {
   display: inline-flex }`, equal specificity and enqueued AFTER this
   file, was winning over a bare-class override regardless of this
   media query; the element type added here (0,1,1) beats both
   unconditionally. Only this one instance: room pages, booking pages
   and /events/ each use their own differently named tail-link class,
   none of them `.myth-band-faq__all`, and are untouched. */
@media (max-width: 767px) {
  .myth-band-faq__heading {
    text-align: center;
  }

  a.myth-band-faq__all {
    display: flex;
    margin-inline: auto;
  }
}

/* -----------------------------------------------------------------------
 * Band 12: Booking band (Poster, closes the page)
 * --------------------------------------------------------------------- */
.myth-band-booking {
  color: #FFFFFF;
  text-align: center;
}

.myth-band-booking__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.myth-band-booking__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #FFFFFF;
}

/* BUG FIX (T07c part B, cortex-b.md): S9.2's shipped body line (278
   characters) runs to 5 lines at 1440 and 9 at 390, not the "fits 2
   lines" spec.md assumed for this centred band. Same law-section-4 fix
   as the event cards intro: the H2 above stays centred (it fits), this
   one paragraph goes left-aligned. */
.myth-band-booking__body {
  font-family: Karma, serif;
  font-size: 18px;
  color: #FFFFFF;
  text-align: left;
}

.myth-band-booking__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.myth-band-booking__phones {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.myth-band-booking__phones a {
  color: #FFFFFF;
  font-family: Karma, serif;
  font-size: 15px;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .myth-band-booking__actions,
  .myth-band-booking__phones {
    flex-direction: column;
    width: 100%;
  }

  .myth-band-booking__actions .myth-btn {
    width: 100%;
  }
}

/* -----------------------------------------------------------------------
 * Sticky mobile rail, [myth_mobile_rail]. 390 to 767 only; desktop keeps
 * the header's own Book control. z-index below the header drawer's 99998.
 * --------------------------------------------------------------------- */
.myth-band-rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99970;
  display: none;
  gap: 8px;
  padding: 8px;
  background: #1C1310;
  border-top: 1px solid rgba(212, 169, 74, 0.3);
  transition: transform 250ms ease, opacity 250ms ease;
}

@media (max-width: 767px) {
  .myth-band-rail {
    display: flex;
  }
}

.myth-band-rail .myth-btn {
  flex: 1;
  min-height: 44px;
}

.myth-band-rail.myth-rail--hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .myth-band-rail {
    transition: none;
  }
}

/* -----------------------------------------------------------------------
 * Testimonial slider restyle (plugin markup, logic untouched). The plugin
 * shortcode ([wprevpro_usetemplate]) does not expose an "autoplay"
 * attribute: the delay/autoplay pair on the served
 * data-slideprops comes from that template's own admin setting
 * (`sliderautoplay` on the template row), not from the shortcode call.
 * Part B turns it off there, not by editing this CSS or the shortcode.
 * --------------------------------------------------------------------- */
.wprevpro-shortcode-wrapper {
  background: #1C1310;
}

.wprevpro_t1_outer_div {
  background: #FFFFFF;
  background-image: url("../../../uploads/2022/09/main-content-bg.jpg");
  background-size: cover;
  border: 1px solid rgba(28, 19, 16, 0.1);
  border-radius: 8px;
}

.wprevpro_t1_outer_div .indrevtxt,
.wprevpro_t1_outer_div .readmoretextdiv {
  font-family: Karma, serif;
  font-size: 17px;
  color: #1C1310;
}

.wprevpro_t1_outer_div .wprevpro_t1_rname,
.wprevpro_t1_outer_div .wprev_showdate_T1 {
  color: rgba(28, 19, 16, 0.7);
}

.wprevpro-shortcode-wrapper .slick-arrow:hover,
.wprevpro-shortcode-wrapper .wprev-slider-arrow:hover {
  color: #D4A94A;
}

/* -----------------------------------------------------------------------
 * MANUAL-13 (user review, 2026-09-07). On the HOMEPAGE reviews band only,
 * the parchment panel behind the slider is removed and the three review
 * cards sit directly on the gears band with their own shadow. Everything
 * here is scoped to `.myth-band-reviews`, because /gillingham/ renders the
 * same slider inside `.myth-gill-reviews__panel` and must not move. The
 * four rules above are left exactly as they are for that reason.
 *
 * The plugin prints its own inline <style> keyed on `#wprev-slider-1`
 * (specificity 1-1-0); putting `.myth-band-reviews` in front gives 1-3-0,
 * which outranks it without a single !important. Appearance only: no
 * plugin setting, template row, shortcode attribute or slider option is
 * touched, so the arrows, paging and read-more behaviour are unchanged.
 * --------------------------------------------------------------------- */

/* 1. The Ink box and the parchment rectangle come off. */
.myth-band-reviews .wprevpro-shortcode-wrapper {
  background: transparent;
}

.myth-band-reviews .wprevpro_t1_outer_div {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
}

/* 2. The card surface. White stays: it is what separates the card from the
   gears texture, and it is what the plugin's own speech-bubble tail is
   drawn in. What it gains is the site's card anatomy (law section 6): 8px
   radius, a 1px ink-at-10% hairline, and a real shadow. On a dark ground a
   soft shadow does not read, so this one is deeper and further offset than
   the plugin's 14% default. */
.myth-band-reviews #wprev-slider-1 .wprev_preview_bg1_T1 {
  background: #FFFFFF;
}

.myth-band-reviews #wprev-slider-1 .wprev_preview_bradius_T1 {
  border-radius: 8px;
  border-color: rgba(28, 19, 16, 0.10);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* 3. The reviewer name and date sit OUTSIDE the white card, on the band.
   They were ink at 70%, which was legible on parchment and invisible on
   the gears. Measured worst case across three parallax positions and two
   widths: White 12.38:1, White at 85% 9.33:1. */
.myth-band-reviews .wprevpro_t1_outer_div .wprevpro_t1_rname {
  color: #FFFFFF;
}

.myth-band-reviews .wprevpro_t1_outer_div .wprev_showdate_T1 {
  color: rgba(255, 255, 255, 0.85);
}

/* -----------------------------------------------------------------------
 * REVIEW-06 (user review of 2026-09-08, items A6, B8 and G2). The gift
 * strip redesigned for desktop, and made one design sitewide.
 *
 * Three things change and nothing else does. (1) The copy and the action
 * share one wrapper, .myth-gift-strip__body, so the inner grid has two
 * items at every width and where the button sits is a flex decision. (2)
 * From 1200px that wrapper is a ROW: art, text, button, with the button's
 * label baseline on the heading's first baseline. (3) The heading is
 * heavier at every width and larger from 1200.
 *
 * Below 1200 the geometry is byte identical to the build this replaces.
 * Measured on /, /the-game/ and /gillingham/ at 320, 390, 768 and 1024,
 * with the strings the site ships and again at the full copy budget: the
 * strip's height, the card's bleed, the card's position and every
 * clearance match to 0.01px. loop/work/REVIEW-06/vesper.md section 5.
 *
 * 1200, not the 1024 the brief asked for, and the number is a
 * measurement. Three fixed things sit in the inner box at desktop: the
 * 264px art column, its 48px gap and the 217.02px button, which leaves
 * the text column `inner - 529.02 - gap`. At 1024 that is 318.98px,
 * narrower than the card beside it, a 40 character heading takes three
 * lines and the strip grows to 276.56px. Swept in 16px steps, the text
 * column needs 446.98px for a two line heading, which arrives at 1152.
 * 1200 clears it by 48.00px and is the strip's own max-width, so no new
 * number enters this file. Section 3.
 *
 * The bold is a stroke, not a weight. Julius Sans One ships one face:
 * font-weight 700 is synthesised and costs 0.00 percent of advance in
 * Chromium and 5.03 percent in WebKit at every size measured, which is a
 * different line break on every iOS device. -webkit-text-stroke costs
 * 0.000px of advance in BOTH engines at every size and every width from
 * 0.3px to 0.8px. In em rather than px because a constant pixel stroke is
 * a different weight at every size: 0.4px is a 30.8 percent ink gain at
 * 24px and 20.3 percent at 36px, while 0.022em holds about 40 percent at
 * 24, 30 and 36 alike. Same device as the games grid room name
 * (MANUAL-13, css/myth-games.css); this is its second and last use. No
 * unprefixed twin exists: `text-stroke` is not a property in any engine.
 * --------------------------------------------------------------------- */

/* 1. The grid. Two items at every width: media, body.

   The 40px and 48px column gaps are still not decoration. At 768 the
   card's rotated box is 289.34px wide inside a 240px column, so it spills
   24.67px each side, and the gap is what keeps its right corner off the
   text: measured clearance 15.33px at 768 and 23.42px at 1024 and above.
   Do not reduce them.

   align-items:center stays on the grid, so the body block is optically
   centred against the 150px art cell whatever height the copy takes. */
.myth-gift-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "body";
  gap: 24px;
  align-items: center;
}

/* The wrapper is a real box, not display:contents. The button is aligned
   to the top of the TEXT BLOCK, and the text block's own top moves with
   its height because the row is centred on the art cell; only a shared
   parent gives both children the same origin. It carries no reveal class:
   the two children keep theirs, at the same --i values. */
.myth-gift-strip__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

/* MANUAL-51 (2026-09-14, the user's own instruction), overriding the
   left-aligned button this REVIEW-06 block itself set up, mobile only.
   THE COMMENT THIS TASK'S OWN BRIEF CITED ("one left aligned button at
   every width is one [component]") sits on `.myth-gift-strip__action`'s
   own `justify-self: start`, further down this file; confirmed live
   before writing this fix that `justify-self` is dead code today,
   because REVIEW-06 moved `.myth-gift-strip__action` out of being a
   direct grid child (where `justify-self` would apply) and into being a
   flex CHILD of `.myth-gift-strip__body` instead, where `justify-self`
   has no effect (the property does not apply to flex items). The rule
   actually holding the button, and the copy above it, to the left edge
   at every width is THIS rule's own `align-items: flex-start`, which
   REVIEW-06's own comment above does not name as a left-alignment
   decision at all (its subject is the button's vertical baseline, not
   its horizontal side). Overriding it here, scoped to max-width:767px
   only, centres both `.myth-gift-strip__copy` and `.myth-gift-strip__action`
   as a single change, since both are children of this one flex column;
   `.myth-gift-strip__media`'s own tilted card needs no change, it
   already centres itself inside its grid cell via absolute positioning
   (`.myth-gift-strip__img`, left:50%/transform, below). The
   >=768px two-column rule is untouched, so the documented left-aligned
   desktop button stays exactly as REVIEW-06 built it. */
@media (max-width: 767px) {
  .myth-gift-strip__body {
    align-items: center;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .myth-gift-strip__inner {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas: "media body";
    gap: 0 40px;
  }

  /* what used to be the grid's 16px row gap */
  .myth-gift-strip__body {
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .myth-gift-strip__inner {
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 0 48px;
  }
}

/* 2. The desktop strip. The button leaves the text column and closes the
      measure at its right end.

      margin-top:5px is the baseline alignment and it is two measured
      constants: the text block's top to the heading's first baseline is
      32.00px at 36px/1.15, and the button's top to its label's baseline
      is 27.00px at Karma 700 16px in a 48px box. Verified with a zero
      size baseline strut on both, on three routes at 1200 and 1440: the
      delta is 0.000px in Chromium and 0.437px in WebKit, which keeps the
      fractional half leading Chromium floors. A whole pixel holds both
      engines inside the 0.5px optical tolerance R04 set, and keeps the
      button's box off a subpixel boundary.

      min-width:0 on the copy column is required, not tidy: without it one
      long unbroken word refuses to shrink and pushes the button off the
      measure. */
@media (min-width: 1200px) {
  .myth-gift-strip__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }

  .myth-gift-strip__copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .myth-gift-strip__action {
    flex: 0 0 auto;
    margin-top: 5px;
  }
}

/* 3. The type. The stroke is the bold, at every width; the size step and
      the larger line arrive with the three column layout at 1200. The
      heading stays Ink and the button stays the Maroon fill: one payoff
      per surface. Ink on the darkest pixel of the strip's own parchment
      ground measures 11.55:1, and 13.04:1 on the ground directly behind
      the heading box. */
.myth-gift-strip__heading {
  -webkit-text-stroke: 0.022em currentColor;
}

@media (min-width: 1200px) {
  .myth-gift-strip__heading {
    font-size: 2.25rem;
  }

  /* REVIEW-21: same inert-margin shape as the base rule above, restated at
     0,2,0 so the 12px step actually renders from 1200px up. */
  .myth-gift-strip .myth-gift-strip__heading {
    margin: 0 0 12px;
  }

  /* 52ch is 481.8px at 18px, narrower than the text column at every
     desktop width (494.98px at 1200, 622.98px from 1328), so the measure
     governs rather than the viewport and the strip's height does not
     change as a desktop window is dragged. */
  .myth-gift-strip__text {
    font-size: 18px;
  }
}

/* -----------------------------------------------------------------------
 * R07. /events/ FAQ band, [myth_events_faq]. Review items G1 and A10.
 *
 * The shared accordion on a PARCHMENT surface. The band renders inside the
 * page's existing parchment Divi section, so it declares no background of
 * its own: a dark slab inside a parchment section is the defect Gate
 * refused in T08 and the section's own ground is what it must sit on.
 *
 * What the surface changes, and nothing else: the four colours. Maroon
 * heading and questions, Ink answers, and the hairline variable set to the
 * same Ink 12% the /gillingham/ and /maidstone/ parchment variants use. The
 * chevron is NOT redrawn: it is the shared 12px square with two 2px borders
 * spun 45deg, carrying R04's measured translate untouched, and only its
 * border colour moves to Maroon, because Gold on parchment measures 1.94:1
 * and palette.contrastLaws forbids it on a light surface. Every colour here
 * is already in the palette and already used on a parchment FAQ.
 *
 * Contrast on the darkest pixel of this section's own parchment ground,
 * sampled from the served page: Maroon #6E0C01 6.62:1, Ink #1C1310 11.55:1.
 *
 * CORRECTION, MANUAL-43-FINAL (user, 2026-09-12, user-reported and visually
 * confirmed via screenshot). The figures above do not hold: the outer Divi
 * section's own background is `bg-1-scaled.jpg`, a photographic parchment
 * texture with a heavy dark vignette in its corners, not a flat or evenly
 * lit ground, and this band declares no background of its own precisely
 * because the paragraph above says it should sit on that ground directly.
 * Measured live, not from the raw file: rendering the actual page at
 * 390/768/1024/1440, scrolling the band into view, screenshotting it and
 * sampling every rendered pixel behind the heading and question text
 * (Python PIL, WCAG relative-luminance formula), Maroon `#6E0C01` on this
 * section's own served background measures 1.00 to 1.27:1 at its worst
 * (where a dark corner of the texture falls behind the text) and 2.34 to
 * 2.47:1 on average across the band, at every one of the four widths, well
 * under the 4.5:1 floor this site's own contrastLaws set everywhere else.
 * How the earlier figure was produced is not established; it is wrong for
 * the texture this section serves today, and this correction supersedes it
 * rather than adding a second, conflicting claim.
 *
 * FIRST FIX (MANUAL-43-FINAL): a background-colour on `.myth-events-faq`
 * itself, `#FFFFFF`, reusing `.myth-band-tiles`'s own established flat
 * value. SUPERSEDED, MANUAL-45 (2026-09-12, the user's own explicit
 * instruction): an overlay or a card behind the FAQ text is ruled out,
 * since no other FAQ section anywhere else on the site has one, and this
 * one should not be the first. The `background: #FFFFFF` rule above is
 * REMOVED; the real fix is a Divi builder setting, not CSS, so it lives in
 * post_content, not here.
 *
 * The outer Divi section's own `background_image` attribute (not a CSS
 * rule this file owns) was changed from `bg-1-scaled.jpg` to
 * `bg-5-scaled.jpg`, both from the same `wp-content/uploads/2022/09/`
 * pool as `bg-1` through `bg-5`, none of the others in use as a
 * background anywhere else on the site (confirmed via a `wp db query`
 * sweep of every published page's own post_content, same method
 * MANUAL-43-FINAL used to source the hero's own replacement image); `bg-5`
 * was picked over `bg-2` and `bg-4` (the other two untextured-enough
 * candidates) on measured contrast, not the busier `bg-1`/`bg-3` pair
 * both already used elsewhere as page-scoped Divi section backgrounds.
 *
 * Measured the same way MANUAL-43-FINAL's correction above did (WCAG
 * relative-luminance formula, real rendered pixels, the heading's and a
 * question's own live bounding box, all four widths), with one addition:
 * a photograph's raw per-pixel worst case is dominated by single-pixel
 * JPEG grain the eye does not perceive as a contrast failure (confirmed
 * on this exact image: an unblurred worst-case pixel search returns
 * around 1.2 to 3.3:1 at every width purely from compression-noise
 * specks, while the surrounding, actually-visible texture reads far
 * lighter), so pixels were sampled from the same image after a 4px
 * Gaussian blur, which removes single-pixel noise while preserving any
 * genuine multi-pixel dark region (a real crease or shadow, which a blur
 * would not erase). On `bg-5-scaled.jpg`: worst-case (blurred) 5.58:1 at
 * 390, 4.90:1 at 768, 5.37:1 at 1024, 4.90:1 at 1440; average (unblurred)
 * 10.14 to 10.58:1 at the same four widths. `bg-4-scaled.jpg`, measured
 * the same way as a comparison, only cleared the floor at 1440 (2.81 to
 * 4.57:1 across the four widths) and was rejected; `bg-2-scaled.jpg`
 * measured worse again and was rejected too. Ink (`.myth-band-faq__answer`,
 * this file's own rule two blocks below, untouched) was measured the same
 * way, same method: worst-case (blurred) 8.33:1 at 390, 7.31:1 at 768,
 * 8.02:1 at 1024, 7.32:1 at 1440, clear of the floor by a wider margin
 * than Maroon at every width. `.myth-events-faq`
 * itself declares no background again, restoring R07's own original
 * design ("the section's own ground is what it must sit on"), now that
 * the section's own ground is a texture that actually clears the floor.
 * --------------------------------------------------------------------- */

.myth-events-faq {
  padding: 0;
}

.myth-events-faq__inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* The type scale is the room template's FAQ heading, 32 / 36.3 / 44px, not
   a fourth number: F7 and G1 are the same review item read onto two pages
   and the two headings should measure the same. Left, like every other FAQ
   heading on the site; the plugin's was centred over a centred ornament and
   both of those are gone.

   REVIEW-21 (Sightline, 2026-09-11). `margin` and `text-align` never
   rendered here: this selector is 0,1,0 and this file's own `.myth-band
   h1, h2, h3 { margin: 0 }` (0,1,1) beat it. text-align was harmless (left
   is the default anyway), but the 32px gap under the heading was not.
   Restated at 0,2,0 below. */
.myth-events-faq__heading {
  font-size: 32px;
  line-height: 1.1;
  color: #6E0C01;
}

.myth-events-faq .myth-events-faq__heading {
  margin: 0 0 32px;
  text-align: left;
}

@media (min-width: 768px) {
  .myth-events-faq__heading {
    font-size: 36.3px;
  }
}

@media (min-width: 1024px) {
  .myth-events-faq__heading {
    font-size: 44px;
  }
}

/* 0,2,0, so it beats the component's own `color: #FFFFFF` on the trigger
   without depending on which stylesheet the browser loaded second. */
.myth-events-faq .myth-band-faq {
  --myth-faq-rule: rgba(28, 19, 16, 0.12);
  background: transparent;
  color: #1C1310;
}

.myth-events-faq .myth-band-faq__question {
  color: #6E0C01;
}

/* MANUAL-55 (2026-09-14, the user's own instruction): the hover rule that
   stood here (restated at equal specificity so it would beat the shared
   component's own Gold hover regardless of enqueue order) is removed
   with the shared rule it existed to override; see css/myth-bands.css's
   own base `.myth-band-faq__question` rule for the sitewide note. */

.myth-events-faq .myth-band-faq .myth-band-faq__question:focus-visible {
  outline: 2px solid #6E0C01;
  outline-offset: 2px;
}

.myth-events-faq .myth-band-faq__icon {
  border-right-color: #6E0C01;
  border-bottom-color: #6E0C01;
}

.myth-events-faq .myth-band-faq__answer {
  color: #1C1310;
  max-width: 70ch;
  padding-bottom: 16px;
}

/* REVIEW-21: 0,1,0 losing to this file's own `.myth-band p { margin: 0 }`
   (0,1,1). Restated at 0,2,0. */
.myth-events-faq .myth-events-faq__tail {
  margin: 24px 0 0;
}

/* The deep-link offset, the same reasoning as /gillingham/: the fragment
   target is the panel, so the browser's own scroll would park the question
   above the viewport behind the fixed bar. */
.myth-events-faq .myth-band-faq__panel {
  scroll-margin-top: 200px;
}

@media (min-width: 768px) {
  .myth-events-faq .myth-band-faq__panel {
    scroll-margin-top: calc(var(--myth-h-stuck) + 80px);
  }
}

/* The tail link. The same atom /gillingham/ uses under its accordion, on
   the same surface, so the two pages' "Read all the FAQs" reads and
   behaves identically: Maroon, Karma, no underline until hover, and 12px
   of block padding so the standalone link clears the 44px hit box. */
.myth-events-link {
  color: #6E0C01;
  font-family: Karma, serif;
  text-decoration: none;
  background-image: linear-gradient(#6E0C01, #6E0C01);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 200ms ease;
  padding-block: 12px;
  display: inline-block;
}

@media (hover: hover) {
  .myth-events-link:hover {
    background-size: 100% 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .myth-events-link {
    transition: none;
  }
}

.myth-events-link:focus-visible {
  outline: 2px solid #6E0C01;
  outline-offset: 2px;
}