/* =======================================================================
 * T10: THE ROOM TEMPLATE. One stylesheet, twelve routes.
 *
 * Enqueued only behind myth_room_current_slug() in inc/bands-room.php, so
 * no other page on the site loads a byte of it. Everything is prefixed
 * myth-room-. css/myth-gillingham.css and css/myth-maidstone.css are
 * COPIED FROM, never edited and never promoted into a shared file: the
 * room rules genuinely differ from both (Gold appears zero times on this
 * template's Parchment bands, the hero's venue line is White on Poster,
 * and the focus ring is Ink on Parchment), and moving rules
 * between files would mean re-proving three shipped routes pixel identical
 * to buy nothing a visitor can see. Spec section 20.
 *
 * PALETTE, and there is no seventh colour anywhere in this file:
 *   Ink        #1C1310
 *   Charcoal   #231F1E
 *   White      #FFFFFF
 *   Gold       #D4A94A   graphic only on dark surfaces, never text on light
 *   Maroon     #6E0C01   Gillingham accent
 *   Muted Grey #767676   NOT USED, at any size, on any surface (spec 0)
 *
 * Band padding is 96 / 64 / 48 at 1440 / 768 / 390 on every band, from the
 * spacing scale, never bespoke. Side padding is 32px at 390 on every band
 * except band 6, the one approved exception, which is 16px so the frozen
 * Tempus widget gets 358px of usable width.
 *
 * Sections:
 *   0. Page-wide: type scale, measure, the atoms, the C1 and C2 recolours
 *   1. Band 1 hero (Poster), the Ken Burns bed
 *   2. Band 2 at a glance (Parchment), breadcrumb, spec plate, framed poster
 *   3. DELETED by MANUAL-16 with the story band. The signature moved to
 *      band 1 and is declared in css/myth-motion.css.
 *   4. DELETED by MANUAL-16 with the before you book band. Its practical
 *      facts are FAQ answers now; the Age exception stayed in band 2.
 *   5. Band 5 loose ends (Charcoal), the shared accordion re-surfaced
 *   6. Band 6 book this room (Poster), the reserved box
 *   7. Band 7 gift this room (Parchment)
 *   8. Chrome this route borrows: the rail stand-down and the anchors
 *   9. CLS pre-declaration for this page's Divi rows and sections
 * ===================================================================== */

/* =======================================================================
 * 0. Page-wide
 * ===================================================================== */

.myth-room-hero,
.myth-room-glance,
.myth-room-faq,
.myth-room-book {
  position: relative;
  box-sizing: border-box;
  padding: 48px 32px;
  font-family: Karma, serif;
}

@media (min-width: 768px) {
  .myth-room-hero,
  .myth-room-glance,
  .myth-room-faq,
  .myth-room-book {
    padding: 64px 40px;
  }
}

@media (min-width: 1024px) {
  .myth-room-hero,
  .myth-room-glance,
  .myth-room-faq,
  .myth-room-book {
    padding: 96px 40px;
  }
}

.myth-room-hero *,
.myth-room-glance *,
.myth-room-faq *,
.myth-room-book * {
  box-sizing: border-box;
}

/* Divi paints `h1, h2, h3, h4, h5, h6 { padding-bottom: 10px }` at 0,0,1
   from the theme's own stylesheet, which put 10px of off-scale space under
   every heading on /gillingham/ and /maidstone/ until Fold measured it.
   Paid up front here, at 0,1,1 and at 0,2,0 for the accordion's own
   question heading, which a plain descendant rule does not cover. */
.myth-room-hero h1,
.myth-room-glance h2,
.myth-room-faq h2,
.myth-room-book h2 {
  margin: 0;
  padding: 0;
  font-family: "Julius Sans One", sans-serif;
  font-weight: 400;
  line-height: 1.12;
  text-transform: none;
}

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

.myth-room-glance h2,
.myth-room-faq h2,
.myth-room-book h2 {
  font-size: 32px;
}

@media (min-width: 768px) {
  .myth-room-glance h2,
  .myth-room-faq h2,
  .myth-room-book h2 {
    font-size: 36.3px;
  }
}

@media (min-width: 1024px) {
  .myth-room-glance h2,
  .myth-room-faq h2,
  .myth-room-book h2 {
    font-size: 44px;
  }
}

.myth-room-hero p,
.myth-room-glance p,
.myth-room-faq p,
.myth-room-book p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  max-width: 70ch;
  text-align: left;
}

@media (min-width: 768px) {
  .myth-room-hero p,
  .myth-room-glance p,
  .myth-room-faq p,
  .myth-room-book p {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .myth-room-hero p,
  .myth-room-glance p,
  .myth-room-faq p,
  .myth-room-book p {
    font-size: 18px;
  }
}

/* THE EYEBROW ATOM, restated at 0,2,1 in the same commit as the markup.
   T08 shipped it at a lower specificity and the band's own `p` rule
   dragged all six to 17 and 18px; T09 paid for that up front and so does
   this file. Size, line-height, letter-spacing AND margin are all restated,
   because the band `p` rule above sets three of the four. 12px from 768,
   11px at 390.

   REVIEW-03, Vesper section 5.3: the glance, FAQ and book eyebrows are
   removed markup and these three selectors now match nothing. They stay,
   because the record above them is this file's account of the T08 and T09
   defect and cutting one selector out of the group to save nothing would
   make that comment lie. The hero's venue line, the site's one surviving
   eyebrow, is overridden by section 18 at the foot of this file. */
.myth-room-hero p.myth-room-eyebrow,
.myth-room-glance p.myth-room-eyebrow,
.myth-room-faq p.myth-room-eyebrow,
.myth-room-book p.myth-room-eyebrow {
  margin: 0 0 16px;
  font-family: Karma, serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  max-width: none;
}

@media (min-width: 768px) {
  .myth-room-hero p.myth-room-eyebrow,
  .myth-room-glance p.myth-room-eyebrow,
  .myth-room-faq p.myth-room-eyebrow,
  .myth-room-book p.myth-room-eyebrow {
    font-size: 12px;
  }
}

/* Ink at 72% on Parchment (13.36:1 against White, and above 4.5:1 against
   the texture's darkest sampled tone). Gold on Ink and Charcoal, 8.32:1
   and 7.44:1. White on Poster. Gold NEVER appears on a Parchment band on
   this template, in any role: spec C3, and it is stricter than T08 and
   T09 on purpose.

   REVIEW-03: poster is the only tone the template still emits, and these
   three are kept as the measured pairs for the day a venue line lands on a
   light band (Vesper section 5.3). */
.myth-room-eyebrow--parchment {
  color: rgba(28, 19, 16, 0.72);
}

.myth-room-eyebrow--ink,
.myth-room-eyebrow--charcoal {
  color: #D4A94A;
}

.myth-room-eyebrow--poster {
  color: #FFFFFF;
}

/* THE TEXT LINK ATOM. Copied from .myth-maid-link with T08's F2 defect
   corrected: that rule was `inline-block` with uncompensated vertical
   padding and produced a doubled line box. This one stays inline and
   carries its underline as a background image, so it sits in the line box
   it belongs to. The underline draws from the left on hover. */
.myth-room-link {
  color: currentColor;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  opacity: 1;
  padding-bottom: 1px;
  transition: background-size 200ms ease;
}

.myth-room-link--onparchment {
  color: #1C1310;
}

.myth-room-link--onink,
.myth-room-link--onposter {
  color: #FFFFFF;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .myth-room-link:hover {
    background-size: 100% 2px;
  }
}

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

/* Divi's sitewide reset sets `:focus { outline: 0 }` on every element, so
   a plain in-copy anchor has no ring at all unless one is restored. Ink on
   the Parchment bands (18.26:1) and Gold on the dark ones (8.32:1 and
   7.44:1). Scoped to :not(.myth-btn) so the button system's own per-variant
   focus colours are never fought over specificity. */
.myth-room-glance a:not(.myth-btn):focus-visible,
.myth-room-book .myth-room-book__card a:not(.myth-btn):focus-visible {
  outline: 2px solid #1C1310;
  outline-offset: 2px;
}

.myth-room-faq a:not(.myth-btn):focus-visible,
.myth-room-hero a:not(.myth-btn):focus-visible {
  outline: 2px solid #D4A94A;
  outline-offset: 2px;
}

/* MANUAL-12: C1 and C2 are both DELETED.

   C1 recoloured .myth-btn--ghost on the gift band because the shared ghost
   was a Gold outline with Gold TEXT, which is 2.19:1 on White and
   forbidden by palette.contrastLaws. Two things retire it: ghost is now a
   text link with a drawn underline and carries a required surface variant
   (--on-light is Maroon at 12.23:1), and the gift band's control is a
   SECONDARY now rather than a ghost, because a gift card is a real second
   action in its own band. The route no longer needs to know.

   C2 recoloured the shared focus ring to Ink on the three Parchment bands,
   because the old ring was Gold at 2.19:1 there. There is now one ring for
   every level and every surface, a 6px halo painted outside the border box
   (Ink, White, Ink) that is self-contained and passes on any background.
   This was the fourth of the four local ring fixes; all four are gone. */

/* 52px at 390 because the hero button is the primary conversion target in
   the thumb zone; 48px from 768, which is the shared minimum. */
@media (max-width: 767px) {
  .myth-room-hero .myth-btn,
  .myth-room-book .myth-btn {
    min-height: 52px;
    width: 100%;
    max-width: 326px;
  }
}

/* The Parchment ground: the same live file the homepage, /gillingham/ and
   /maidstone/ use. Not a game image, already in the library. NO GAME IMAGE
   IS USED AS A PARCHMENT TEXTURE ON THIS TEMPLATE (spec Q6): the only way
   to buy one would be to render motif-surface twice on one page. */
.myth-room-glance {
  background-color: #FFFFFF;
  background-image: url("/wp-content/uploads/2022/09/main-content-bg.jpg");
  background-size: cover;
  background-position: center;
  color: #1C1310;
}

/* =======================================================================
 * 1. Band 1: Hero (Poster). Spec section 6.
 *
 * Bottom anchored and denser than either registered hero: five stacked
 * rows pinned to the lower third at all three widths, not centred and not
 * oversized. The H1 grows UPWARD into the picture, so the tagline, the
 * meta line and the button sit at the same distance from the band's bottom
 * edge on all twelve pages at all three widths, which is the whole point
 * of a template.
 * ===================================================================== */

.myth-room-hero {
  display: flex;
  align-items: flex-end;
  min-height: 600px;
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background-color: #1C1310;
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .myth-room-hero {
    min-height: 560px;
    padding-bottom: 64px;
  }
}

@media (min-width: 1024px) {
  .myth-room-hero {
    min-height: 680px;
    padding-bottom: 96px;
  }
}

.myth-room-hero__media,
.myth-room-book__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.myth-room-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The focal is held right of centre at 1440 so the type side of the
     frame is the calmer part; columns 9 to 12 hold nothing but picture. */
  object-position: 58% 45%;
}

/* Two scrim layers, composited as 1 - (1 - a)(1 - b), both
   pointer-events: none, both SIBLINGS of the <img> and never ancestors of
   it. Every stop is computed against a pure White source pixel, which is
   the only bound that survives both the Ken Burns drift moving the pixel
   behind a glyph across 24 seconds and the torch layer lightening the
   plate on band 3. So every ratio in the spec's table is an absolute
   floor, not an estimate. */
.myth-room-hero__scrim-v {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(28, 19, 16, 0.32) 0%,
    rgba(28, 19, 16, 0.32) 14%,
    rgba(28, 19, 16, 0.78) 30%,
    rgba(28, 19, 16, 0.94) 100%
  );
}

@media (min-width: 768px) {
  .myth-room-hero__scrim-v {
    background: linear-gradient(
      to bottom,
      rgba(28, 19, 16, 0.28) 0%,
      rgba(28, 19, 16, 0.28) 24%,
      rgba(28, 19, 16, 0.74) 42%,
      rgba(28, 19, 16, 0.92) 100%
    );
  }
}

@media (min-width: 1024px) {
  .myth-room-hero__scrim-v {
    background: linear-gradient(
      to bottom,
      rgba(28, 19, 16, 0.20) 0%,
      rgba(28, 19, 16, 0.20) 22%,
      rgba(28, 19, 16, 0.62) 46%,
      rgba(28, 19, 16, 0.90) 100%
    );
  }
}

/* Layer B protects the type column while leaving columns 9 to 12 as
   picture. Not rendered under 1024, where the type block is full width and
   layer A alone carries it. */
.myth-room-hero__scrim-h {
  display: none;
}

@media (min-width: 1024px) {
  .myth-room-hero__scrim-h {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(28, 19, 16, 0.45) 0%,
      rgba(28, 19, 16, 0.20) 58%,
      rgba(28, 19, 16, 0) 78%
    );
  }
}

.myth-room-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.myth-room-hero__content {
  max-width: 326px;
}

@media (min-width: 768px) {
  .myth-room-hero__content {
    max-width: 604px;
  }
}

@media (min-width: 1024px) {
  .myth-room-hero__content {
    /* Columns 1 to 8 of a 12 column grid inside the 1200 cap. */
    max-width: 792px;
  }
}

/* The two line reserve, with a third line at 390 absorbed upward. Room
   names run from 6 characters ("Lilith") to 30 ("Murder on the Midnight
   Express"); nothing below the H1 moves as it grows, because the block is
   bottom anchored. Sentence casing, no text-transform, per Beacon B. */
.myth-room-hero__h1 {
  /* No line-height here. It used to declare 1.08 and that declaration was
     dead: the H1 is also matched by the `.myth-room-hero h1, ...` group
     forty lines above, which declares 1.12 at 0-1-1 and later in source
     order, so 1.12 has been the computed value since T10 (60px / 67.2px at
     1440, 41.6px / 46.592px at 320, resolved through CDP
     CSS.getMatchedStylesForNode, loop/work/T11/h1-fontsize.txt). Divi's own
     `h1, h2, ...` rule is 0-0-1 and loses to both. Keeping a losing
     declaration cost this project one wrong measurement already: the first
     cut of section 13's reserve was derived from the 1.08 written here and
     came out 4.79px short per line. Section 13 now names line 107 as the
     one declared value. T11 fix round, Canon HARD 3. */
  margin: 0 0 12px;
  max-width: 720px;
  font-size: clamp(2.6rem, 1.2rem + 3.6vw, 3.75rem);
  color: #FFFFFF;
  hyphens: none;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .myth-room-hero__h1 {
    text-wrap: balance;
  }
}

.myth-room-hero p.myth-room-hero__tagline {
  margin: 0 0 12px;
  font-family: "Julius Sans One", sans-serif;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .myth-room-hero p.myth-room-hero__tagline {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  .myth-room-hero p.myth-room-hero__tagline {
    font-size: 20px;
  }
}

.myth-room-hero p.myth-room-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  max-width: none;
}

@media (min-width: 768px) {
  .myth-room-hero p.myth-room-hero__meta {
    font-size: 14px;
  }
}

@media (min-width: 1024px) {
  .myth-room-hero p.myth-room-hero__meta {
    font-size: 15px;
  }
}

.myth-room-hero__actions {
  display: flex;
}

/* The scroll cue. Not a second action, never an accent colour. */
.myth-room-hero__chevron {
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 767px) {
  .myth-room-hero__chevron {
    display: none;
  }
}

/* =======================================================================
 * 2. Band 2: At a glance (Parchment). Spec sections 4 and 7.
 * ===================================================================== */

.myth-room-glance__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* MANUAL-17: the breadcrumb was the first row of this stack and is now the
   sitewide strip under the header. REVIEW-03 then removed the eyebrow that
   had opened the stack, so the 390 stack is H2, description, dl, price row,
   then the framed poster LAST. The facts come first because the person filtering on
   players and duration must not scroll past a picture to filter, and the
   poster is the one element approved for dropping under a measured
   performance failure, which costs no layout when it is last. */
.myth-room-glance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .myth-room-glance__grid {
    grid-template-columns: 5fr 7fr;
    gap: 40px;
    align-items: start;
  }

  .myth-room-glance__frame {
    order: -1;
  }
}

@media (min-width: 1024px) {
  /*
   * MANUAL-33 (2026-09-11, the user's own instruction). Scoped to 1024px
   * up only, because that is the one range where the two columns actually
   * sit side by side: section 16.3 above forces the grid back to a single
   * stacked column from 768 to 1023, and it is single-column below 768
   * too, so a height match would do nothing there except fight 16.3's own
   * `align-items: start` for no reason.
   *
   * The actual `align-items` value for this breakpoint lives in section
   * 17.2 below, not here: that section already declares
   * `@media (min-width: 1024px) { .myth-room-glance__grid { ... } }` for
   * this same selector, and a second declaration of the same property at
   * the same breakpoint would silently depend on file order to know which
   * one wins. It very nearly did: this rule originally set
   * `align-items: stretch` here too, and 17.2's `align-items: center`
   * (added at MANUAL-29, before this rule existed) sits later in the file
   * and was winning the cascade, so the poster was still centring at its
   * own aspect-ratio height instead of stretching, undetected until a
   * `getBoundingClientRect` check at 1280px and up caught the mismatch.
   * Fixed by moving the value into 17.2's one declaration and leaving only
   * this one grid property, which nothing else in the file declares at
   * this breakpoint, here.
   *
   * The frame's and poster's own height-matching rules do NOT live in this
   * block, even though they are also scoped to 1024px and also belong to
   * this same MANUAL-33 change: they are declared further down this file,
   * immediately after `.myth-room-glance__frame` and
   * `.myth-room-glance__poster`'s own unconditional base rules, in section
   * 4. This block very nearly held them too, and for the same reason the
   * align-items value moved out above: an unconditional rule for the same
   * selector, later in the file, silently wins a tied cascade over a media
   * query rule earlier in the file, media condition notwithstanding, and
   * the base frame and poster rules sit lower in this file than this
   * block. See section 4's own comment for the two mismatches that were
   * found and fixed there.
   */
  .myth-room-glance__grid {
    gap: 48px;
  }
}

.myth-room-glance__heading {
  margin: 0 0 24px;
  color: #6E0C01;
}

/* A definition list, never a bare <ul> (law section 8, gate item 7).
   Minimum row height 48px at every width. MANUAL-16 deleted the two column
   tier that used to sit under this rule, and Fold's F4 tier with it: one
   row cannot have two columns, and after the review the only list left in
   this band is the Age exception on the one room that has one. Section
   16.5 declares the single column unconditionally. */
.myth-room-glance__dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
}

.myth-room-glance__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(28, 19, 16, 0.12);
}

.myth-room-glance__term {
  flex: none;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28, 19, 16, 0.72);
}

@media (min-width: 768px) {
  .myth-room-glance__term {
    font-size: 13px;
    /* One fixed offset so the values form a column a reader can scan. */
    min-width: 120px;
  }
}

.myth-room-glance__value {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #1C1310;
}

@media (min-width: 768px) {
  .myth-room-glance__value {
    font-size: 17px;
  }
}

/* MANUAL-33 (2026-09-11, the user's own instruction, client feedback: the
   poster read small inside its white card). This rule used to read: "The
   framed titled poster. 24px White mat, 1px Ink at 15%, 8px radius, no
   shadow." That mat, its border and its corner radius are removed: the
   poster's own square corners now sit flush against the Parchment ground
   with nothing framing it. Flagged rather than silently decided: if the
   client would rather keep soft corners on the photo itself with no mat,
   that is a one-line follow-up (`border-radius: 8px; overflow: hidden;`
   on this same rule), not applied here pending that answer. It still
   NEVER animates and nothing is ever composited on it; its box is
   reserved by aspect-ratio plus the attachment's own width and height, so
   CLS from this slot is still zero. */
.myth-room-glance__frame {
  margin: 0;
  /*
   * MANUAL-33 (2026-09-11, the user's own instruction, a second correction
   * within the same batch): position: relative, harmless below 1024px
   * where the poster stays position: static. It only matters once the
   * @media (min-width: 1024px) block below makes the poster
   * position: absolute, so the poster has a positioned ancestor to fill
   * rather than escaping to the page. See that block's own comment for
   * why the poster moved out of normal flow.
   */
  position: relative;
}

/* MANUAL-51 (2026-09-14, user-reported). The poster hidden on phones
   only: `max-width: 767px`, the site's own mobile breakpoint (every
   `min-width: 768px` rule in this file treats 768 as where tablet
   begins), so 768px and up render the poster exactly as before,
   unchanged. Scoped to `display: none` on the FRAME (the whole figure,
   image included), not a visibility or opacity trick: no other rule in
   this file sets `display` on this selector at any width (confirmed by
   grep before writing this), so there is no cascade order to fight, the
   trap this file's own comments repeatedly warn about elsewhere. Nothing
   else in the band moves: the grid's single `1fr` column (section above)
   already reserves no separate track for the frame, so removing it from
   display leaves the H2, description, dl and price row exactly where
   they already sit in this narrow, single-column layout. */
@media (max-width: 767px) {
  .myth-room-glance__frame {
    display: none;
  }
}

/*
 * MANUAL-33: the crop changed from 'square' (1/1) to 'portrait' (2/3),
 * matching the image variant swap in myth_room_glance_shortcode(). The
 * ratio is declared here, not left to load from the attachment's own
 * width/height, so the reserved box is correct before the @media
 * (min-width: 1024px) override below replaces it with the stretched
 * height.
 */
/*
 * MANUAL-33 (2026-09-11, the user's own instruction, client feedback: the
 * title on /the-game/'s poster was cropped at the top). `object-position`
 * defaults to `center`, so once the box is shorter than the poster's own
 * 2:3 ratio (only true at 1024px and up, once the box matches the facts
 * column's height instead), `object-fit: cover` was cropping evenly off
 * the top and the bottom, cutting into the title. Checked against four
 * posters, not assumed from one: the-game, arabian-nights, antidote and
 * north-pole-express all place their title at the very top of the frame,
 * so this is the artwork's own sitewide convention, and `top` is declared
 * here, unconditionally, rather than only inside the 1024px block: below
 * 1024px the box already sits at the image's own natural ratio and no
 * cropping happens regardless of this value, so it is harmless there and
 * correct everywhere the cropping is real.
 */
.myth-room-glance__poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: top;
  background-color: rgba(28, 19, 16, 0.08);
}

@media (min-width: 1024px) {
  /*
   * MANUAL-33 (2026-09-11, the user's own instruction). These two
   * overrides are declared HERE, right after the base rules they override,
   * rather than up with the rest of this task's 1024px block above (this
   * file, section 3): a media query does not add specificity, so a tied
   * cascade is broken by source order alone, and the unconditional base
   * rules just above (`.myth-room-glance__frame { margin: 0; position:
   * relative }`, `.myth-room-glance__poster { ...; height: auto;
   * aspect-ratio: 2 / 3; ... }`) sit LOWER in the file than that first
   * 1024px block. Putting a `height` or `aspect-ratio` override for the
   * same two selectors up there would have it silently lose to these base
   * rules the moment the media condition matched, which is exactly what
   * happened the first time this was written that way: the computed style
   * kept reading `height: auto; aspect-ratio: 2 / 3` at 1024px and up,
   * the base rule's values, not this block's, undetected until a
   * `getBoundingClientRect` check compared the poster's own top and
   * bottom edge against the frame's rather than trusting a screenshot.
   *
   * Two mismatches were found and fixed here, in order.
   *
   * FIRST: with the grid's `align-items: stretch` genuinely applying
   * (section 17.2 below), the frame stretches to the facts column's
   * height correctly, but the poster's own `height: 100%` still did not
   * reliably pick that height up even once it was moved to this correct
   * position in the cascade. A CSS Grid item's percentage height, chained
   * through a second percentage on a replaced element (`<img>`) with
   * `aspect-ratio: auto` beneath it, is not resolved consistently by the
   * grid's own two-pass track-sizing algorithm: whenever the poster's own
   * aspect-ratio-derived natural height (its resolved width times 1.5)
   * came out SHORTER than the stretched frame, the poster stopped short
   * of the frame's bottom edge instead of stretching the rest of the way,
   * on the room whose facts column runs long enough to be the taller of
   * the two (a room with no Environment row can still have the taller
   * column here: a long game description outweighs one fewer fact row).
   * `display: flex` on the frame was tried next, which sidesteps that
   * particular percentage-chaining case: a flex container's own height is
   * unambiguous by the time its single child resolves `height: 100%`
   * against it, aspect-ratio notwithstanding.
   *
   * SECOND: `display: flex` fixed that case, but not its mirror. On a
   * room whose facts column is SHORTER than the poster's own aspect-ratio
   * height (a short client description, few fact rows, confirmed on the
   * room used as this case's test), the poster's intrinsic content
   * height still fed into the GRID ROW's own auto-sizing, before flex or
   * any percentage came into it at all, inflating the row itself to the
   * poster's height; the frame and the now-stretched facts column both
   * grew to match that inflated row, but the facts content still ended
   * where it always did, so the poster overhung past the CTA button.
   * `display: flex` never touched this: it only governs how the frame's
   * child is sized once the frame's own box already exists, and does
   * nothing to stop the frame contributing its own content size to the
   * grid row's sizing in the first place.
   *
   * FIXED, for both directions at once, by taking the poster out of that
   * calculation entirely: `position: absolute` on the poster, inside the
   * `position: relative` frame declared in this file's base
   * `.myth-room-glance__frame` rule above. An out-of-flow element
   * contributes nothing to its ancestor's content-based size, so the grid
   * row's height is now set purely by the facts column, and the frame's
   * `height: 100%` resolves against that row with nothing circular left
   * in it; `object-fit: cover`, declared once in the base poster rule
   * above and not overridden here, still fills whatever box that comes
   * to, edge to edge. Confirmed via `getBoundingClientRect`, not by eye,
   * on the two rooms that showed each direction of the bug in turn: the
   * frame's top AND bottom edge equal the facts column's top and bottom
   * edge exactly, at 1024, 1280, 1440 and 1920, in both directions.
   *
   * MANUAL-36 (2026-09-12, the user's own correction) DELETES both rules
   * this comment describes. "The frame's `height: 100%` resolves against
   * that row with nothing circular left in it" was true, but the
   * assumption underneath the whole fix was wrong: the poster's height
   * was never supposed to universally chase the facts column's height,
   * only to do so on rooms where the two happen to sit close together. A
   * long client description, like Back In Time's, makes that gap large
   * enough that stretching the poster to fill it crops and distorts the
   * artwork badly rather than reading as a considered match. With these
   * two rules gone, the poster falls back to its own base rule (`width:
   * 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
   * object-position: top`) at every width, rendering its true portrait
   * shape, full image visible, on every room. Section 17.2 below changes
   * `align-items` from `stretch` to `center` in the same change, so the
   * two columns sit at their own natural heights and line up on their
   * shared vertical centre instead.
   */
}

/* REVIEW-03: the 64px Gold rule that sat between the FAQ eyebrow and its
   H2 is deleted with the eyebrow. Review section F7 asks for the plain
   heading with "no divider between eyebrow and heading" (A10), so neither
   mark survives and the H2 opens the band on the band's own top padding. */

/* =======================================================================
 * 5. Band 5: Loose ends (Ink type, flat Charcoal). Spec section 10.
 *
 * Charcoal against band 3's Ink gives the two dark bands different surface
 * weights, so the page reads as momentum rather than as one long dark
 * stretch. Both are Ink type bands under law section 1 and they are not
 * adjacent, so the alternation holds either way.
 * ===================================================================== */

.myth-room-faq {
  background-color: #231F1E;
  color: #FFFFFF;
}

.myth-room-faq__inner {
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  /* The list is held in columns 1 to 8 and columns 9 to 12 are empty,
     which is the band's asymmetry and it leans the opposite way to band 4
     above it. */
  .myth-room-faq__inner > * {
    max-width: 780px;
  }
}

.myth-room-faq__heading {
  margin: 0 0 24px;
  color: #FFFFFF;
}

/* THE SHARED INK SLAB, NULLED. css/myth-bands.css paints
   `.myth-band-faq { background: #1C1310; color: #FFFFFF }`, which is Ink,
   and this band is Charcoal #231F1E. Left alone it paints a visibly
   different dark rectangle inside the band, which is the same family of
   defect as T08's Ink slab on a Parchment band (Gate refused that one).
   Nulled at 0,2,0 from the first commit rather than after a fix round.
   The colour stays White because the surface underneath is Charcoal and
   White on Charcoal is 16.33:1. */
.myth-room-faq .myth-band-faq {
  background: transparent;
  color: #FFFFFF;
}

/* R07 (review A10): the hairline is the component's now, declared once in
   css/myth-bands.css, and this band's colour is the component's default
   Gold 20%, so the route-scoped copy is deleted rather than left to shadow
   it. Computed border unchanged: 1px solid rgba(212, 169, 74, 0.2). */

/* The focus ring is restated at equal or greater specificity so it stops
   depending on stylesheet enqueue order, which is the third of T08's FAQ
   defects. Gold on Charcoal is 7.44:1.

   MANUAL-55 (2026-09-14, the user's own instruction): the hover rule that
   stood here alongside the focus ring above 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-room-faq .myth-band-faq .myth-band-faq__question:focus-visible {
  outline: 2px solid #D4A94A;
  outline-offset: 2px;
}

.myth-room-faq .myth-band-faq__question {
  min-height: 48px;
  color: #FFFFFF;
}

.myth-room-faq .myth-band-faq__answer {
  font-size: 16px;
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .myth-room-faq .myth-band-faq__answer {
    font-size: 18px;
  }
}

.myth-room-faq p.myth-room-faq__tail {
  margin: 24px 0 0;
  color: #FFFFFF;
}

/* =======================================================================
 * 6. Band 6: Book this room (Poster, full bleed), anchor #book.
 *
 * The one symmetric band on the page, which is why band 5 above it and
 * band 7 below it lean opposite ways. A booking surface with a decor
 * column beside it is a booking surface with a distraction beside it.
 * ===================================================================== */

/* T10 FOLD F1, and this one declaration is edited in place rather than
   overridden in section 10, because leaving it would leave a live
   contradiction of the rule written 60 lines below it. This band root is
   an ANCESTOR of #tempus-iframe-wrapper, and `overflow: hidden` here was
   the one prohibited property on the list actually present: measured on
   the served route at 320/390/768/1024/1440, the only ancestor of the
   wrapper with a non-default computed value was
   `section#book.myth-room-book` at `overflow: hidden/hidden`. An overflow
   clip on an ancestor of a frozen vendor widget is the guardrail case, and
   it is not load bearing here: .myth-room-book__img and
   .myth-room-book__scrim are both `position: absolute; inset: 0`, so
   neither can extend past the band, and the band has no border radius to
   clip to. Measured after removal: document overflow 0 at all five widths,
   band height unchanged to the pixel at all five, CLS unchanged. */
.myth-room-book {
  overflow: visible;
  background-color: #1C1310;
  color: #FFFFFF;
}

/* THE ONE APPROVED EXCEPTION to the 32px side padding at 390, recorded so
   nobody "fixes" it later: the frozen widget gets 358px of usable width
   instead of 326px. */
@media (max-width: 767px) {
  .myth-room-book {
    padding-left: 16px;
    padding-right: 16px;
  }
}

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

.myth-room-book__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(28, 19, 16, 0.80) 0%,
    rgba(28, 19, 16, 0.92) 100%
  );
}

.myth-room-book__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.myth-room-book__head {
  max-width: 700px;
  margin: 0 auto 32px;
  text-align: left;
}

.myth-room-book__heading {
  margin: 0 0 16px;
  color: #FFFFFF;
}

.myth-room-book p.myth-room-book__line,
.myth-room-book p.myth-room-book__status {
  color: #FFFFFF;
}

.myth-room-book p.myth-room-book__status {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* THE RESERVED BOX and its card.
 *
 * FROZEN SUBSYSTEM RULES, and they are the part that can actually break a
 * checkout. The card carries NO transform, NO filter, NO will-change, NO
 * contain, NO perspective, NO backdrop-filter, and overflow: visible. Any
 * of those creates a containing block or a clip that can break a date
 * picker or a modal the vendor renders inside its own frame, and the
 * widget is frozen so its side cannot be fixed. The same prohibition
 * applies to every ancestor up to <body>: the plate and the scrim are
 * sibling absolutely positioned layers BEHIND the card, never ancestors
 * carrying a transform, and this band is not a .myth-parallax element.
 *
 * The min-height figures are the reserve. The widget injects an iframe of
 * unknown height after its deferred script runs, so without one every
 * element below it shifts once on seven routes. They are NEVER enforced
 * with `height` and `overflow: hidden`, which would clip a checkout step:
 * if the widget settles taller on any room, the reserve goes up.
 */
.myth-room-book__card {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px;
  background-color: #FFFFFF;
  border: 1px solid rgba(28, 19, 16, 0.10);
  border-radius: 8px;
  overflow: visible;
  color: #1C1310;
}

@media (min-width: 768px) {
  .myth-room-book__card {
    padding: 24px;
  }
}

/* THE RESERVE, MEASURED, NOT PROVISIONAL.
   loop/work/T10/widget-scroll.mjs samples the settled box on this route at
   every breakpoint edge. The values below are that measurement rounded up
   to the next 20px, per spec section 11 and Atlas section E:

     320  iframe 1664, box 1774  ->  1780
     390  iframe 1565, box 1675  ->  1680
     767  iframe 1505, box 1615  ->  1620, covered by the 1680 tier
     768  iframe 1505, box 1615  ->  1620
    1023  iframe 1563, box 1673  ->  1680
    1440  iframe 1563, box 1673  ->  1680

   The box is 110px taller than the iframe and both numbers are recorded
   because the difference is not slack: the vendor's loader inserts a
   second element, #tempus-button-wrapper (its "Retry Payment Here"
   control, min-height 100px), as a SIBLING of #tempus-iframe-wrapper and
   therefore inside this box, plus 10px of inline-block baseline gap. A
   reserve measured on the iframe alone is 110px short and the page shifts
   by exactly that.

   WHY IT HAS TO BE THIS BIG, and it is the finding of the build. The
   widget's own loader keeps the iframe at its inline min-height of 300px
   and grows it only when the CHILD posts ['changeHeight', n] over
   postMessage. Chrome defers rendering of a cross-origin iframe that is
   far outside the viewport, so on this page the child does not run its
   height logic until the visitor scrolls band 6 into view: measured 300px
   through 15 seconds at rest, then four changeHeight messages and 1565px
   within a second of scrolling to it, at every width. A reserve smaller
   than the settled height therefore does not prevent the shift, it just
   delays it until the visitor arrives, which is the worst moment for it.

   The reserve is a FLOOR, never `height` with `overflow: hidden`, which
   would clip a checkout step. If the vendor ever settles taller, this goes
   up. It is declared on .myth-room-book__widget, the box THIS file owns,
   and not on #tempus-iframe-wrapper: the vendor's loader writes
   `wrapper.style.minHeight = '100px'` inline, and an inline declaration
   beats any stylesheet rule, so a rule on that id would be dead code.

   NO `overflow-x: auto` HERE. It computes `overflow-y: auto` as well,
   which turns the box into a scroll container and can clip a modal or a
   date picker the vendor renders inside its own frame. Spec section 11
   permits it only IF the vendor frame overflows at 320, measured, and it
   does not: the box measures 262px inside a 320px viewport. Recorded so
   nobody adds it as a precaution. */
.myth-room-book__widget {
  min-height: 1680px;
}

@media (max-width: 360px) {
  .myth-room-book__widget {
    min-height: 1780px;
  }
}

@media (min-width: 768px) {
  .myth-room-book__widget {
    min-height: 1620px;
  }
}

@media (min-width: 1024px) {
  .myth-room-book__widget {
    min-height: 1680px;
  }
}

.myth-room-book p.myth-room-book__fallback {
  margin: 16px 0 0;
  color: #1C1310;
}

.myth-room-book__actions {
  display: flex;
  justify-content: flex-start;
  max-width: 700px;
  margin: 0 auto;
}

/* =======================================================================
 * 7. Band 7: the shared GIFT STRIP (Parchment).
 *
 * MANUAL-13 (user review, 2026-09-07, coordinator ruling): band 7 is now
 * the same strip the homepage carries. Its markup comes from
 * myth_gift_strip() (inc/bands-home.php) and every rule that paints it
 * lives in css/myth-bands.css under `.myth-gift-strip`, so this file
 * carries none: the old `.myth-room-gift` rules are deleted rather than
 * left to match nothing. The room passes seam="none", which turns the
 * downward bleed off, because the frozen games carousel sits directly
 * below it and a frozen surface is never overlapped or shadowed onto.
 * ===================================================================== */

/* =======================================================================
 * 8. Chrome this route borrows by markup.
 * ===================================================================== */

/* The stand-down state the T10 observer toggles. A NEW class, not T08's
   and not T09's: two writers on one class is how flicker starts
   (js/myth-motion.js says so in its own words), so each mechanism owns its
   own state and any of them can hide the rail. Same three declarations as
   the frozen hidden state (css/myth-bands.css line 1327) so all of them
   look identical to a visitor. Do not tidy any of the names away.
   css/myth-gillingham.css and css/myth-maidstone.css are not enqueued on a
   room route, so this file has to declare it or the hook does nothing. */
.myth-band-rail.myth-room-rail--stood-down {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* The #book landing. The section is the fragment target, and this file used
   to declare scroll-margin-top: 101px on it and on five sibling section
   groups, tuned by measurement to a 61px stuck bar.

   MANUAL-11: that rule is GONE and nothing replaces it here. The offset is
   now one token-driven rule owned by the header, in the header's own CSS
   (style.css, section FRAGMENT LANDINGS, built from ../build/part-2-CSS.txt):

     :where(#et-main-area) [id]{
       scroll-margin-top: calc(var(--myth-h-stuck) + 1px + 16px);
     }

   the stuck bar's outer height plus 16px of air, which resolves to 81px on
   phone and 101px from 1025, so the desktop value is the one this file used
   to declare. It reaches every id on this template, so all twelve room pages
   inherit it without a per-route number to keep in step.

   The hero button and the rail's Book both carry Divi's own
   et_smooth_scroll_disabled, added in inc/bands-room.php, so the click hands
   the fragment back to the browser, which honours the rule. The direct load,
   which Divi hijacks twice and no CSS can reach, is handled in
   js/myth-motion.js. */

/* The FAQ panels keep their own larger measured offsets: their fragment
   target is the PANEL and the question block sits above it, so they need
   the question's height as well as the bar's. The T08 hash opener is
   already generic over .myth-band-faq__item and .myth-band-faq__question,
   which this band prints, so a deep link opens the panel with no JS added
   here; the offset is all it needs from this file. */
.myth-room-faq .myth-band-faq__panel {
  scroll-margin-top: 200px;
}

@media (min-width: 768px) {
  .myth-room-faq .myth-band-faq__panel {
    /* MANUAL-10: track the stuck bar token, 85px from 1025, not the old 61px. */
    scroll-margin-top: calc(var(--myth-h-stuck) + 80px);
  }
}

@media (max-width: 767px) {
  /* Fold B1, route scoped, as on both location pages. The frozen sitewide
     rail carries `padding: 8px` and no safe-area inset, so on a
     gesture-navigation phone the home indicator strip eats the bottom of a
     61px bar whose buttons are 44px tall. */
  .myth-band-rail {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* MANUAL-13: the gift band's own rail clearance went with the band. The
     gift strip that replaces it is a compact strip in the middle of the
     page with the games carousel below it, not the last content before the
     footer, so it is no more exposed to the rail than any other mid-page
     button on this template. */
}

/* =======================================================================
 * 9. CLS pre-declaration for this page's Divi rows and sections.
 *
 * Divi prints each row's and section's own geometry in a DEFERRED inline
 * <style> at the END of the body. Until it lands, every row paints at
 * Divi's default `.et_pb_row { width: 80%; max-width: 1080px }` and every
 * section and row takes Divi's default padding, so at 1440 the hero row
 * renders 1152px wide and then snaps to 1440, dragging every band below
 * it, and the sections lose 4% of vertical padding a frame later. Measured
 * on /maidstone/ at T09 as 0.0883 of CLS, cut to 0.0007 by exactly these
 * four declarations.
 *
 * They are copied from what Divi defers for this page's own sections and
 * rows, so the SETTLED layout is unchanged to the pixel: this only makes
 * the geometry correct at first paint and turns Divi's footer block into a
 * restatement of what is already true. Divi's version carries !important
 * and lands later, so it still wins outright.
 *
 * The selectors are written against CONTENT, not against Divi's numbered
 * row classes, so inserting or reordering a section cannot silently unhook
 * them. The third arm is required: section.myth-carousel carries no
 * .myth-band class. This reaches the Divi SECTION and ROW WRAPPERS only.
 * It does not touch inc/games-carousel.php, its markup or its logic, which
 * stay frozen. Route scoped by enqueue; the sitewide instance is T35.
 * ===================================================================== */
#page-container .et-l .et_pb_row:has(> .et_pb_column > .et_pb_module.et_pb_code .myth-band),
#page-container .et-l .et_pb_row:has(> .et_pb_column > .et_pb_module.et_pb_code .myth-band-rail),
#page-container .et-l .et_pb_row:has(> .et_pb_column > .et_pb_module.et_pb_code .myth-carousel) {
  width: 100%;
  max-width: 100%;
}

#page-container .et-l .et_pb_section:has(.et_pb_module.et_pb_code .myth-band),
#page-container .et-l .et_pb_section:has(.et_pb_module.et_pb_code .myth-band-rail),
#page-container .et-l .et_pb_section:has(.et_pb_module.et_pb_code .myth-carousel),
#page-container .et-l .et_pb_row:has(> .et_pb_column > .et_pb_module.et_pb_code .myth-band),
#page-container .et-l .et_pb_row:has(> .et_pb_column > .et_pb_module.et_pb_code .myth-band-rail),
#page-container .et-l .et_pb_row:has(> .et_pb_column > .et_pb_module.et_pb_code .myth-carousel) {
  padding-top: 0;
  padding-bottom: 0;
}

/* =======================================================================
 * 10. T10 FOLD: the responsive pass, 2026-09-06.
 *
 * One appended block. Nothing above this comment was edited except the one
 * declaration marked "T10 FOLD F1" in section 6, which had to move at its
 * source. Every number below was measured in Chromium through Playwright
 * at 320 / 390 / 768 / 1024 / 1440 (plus 767, 1100, 1150, 1200 and 1280 on
 * the cascade re-walk), before and after, never eyeballed:
 * loop/work/T10/fold-scripts/, report loop/work/T10/fold.md.
 *
 *   F1  section 6, edited in place   the band root's overflow clip over the
 *                                    frozen Tempus widget
 *   F2  js/myth-motion.js T10 block  the torch's transitionend listener
 *   F3  DELETED by MANUAL-16 with the story band. That plate was this
 *       template's only .myth-parallax element, so the template now
 *       carries no parallax at all, deliberately: its remaining full
 *       bleed plates are the LCP element, whose transform the Ken Burns
 *       drift owns, and the frozen widget's band, where nothing may
 *       animate. Stated exception to law section 3 item 3, not a miss.
 *   F4  the badge strip's two-column tier and its value box
 *   F5  the FAQ triggers' adjacent-target air
 *   F6  two standalone quiet links under the 44px floor at 390
 * ===================================================================== */

/* F4. THE BADGE STRIP: the two-column tier follows the row's own
 * arithmetic, and the value wraps in place instead of being orphaned.
 *
 * The status row is the widest of the four and it is a fixed anatomy:
 * a 120px term offset, a 12px gap and a 167.28px "Open and bookable" chip
 * at its max-content width, which is 299.28px. The row is a flex container
 * with `flex-wrap: wrap`, and flex line breaking uses each item's
 * HYPOTHETICAL main size, so the chip drops to its own line the moment the
 * cell is narrower than 299.28px, whatever it could shrink to.
 *
 * Measured cell widths, loop/work/T10/fold-scripts/glance.mjs:
 *
 *   width  cell      status row       BEFORE
 *   1024   249.33    needs 299.28     wrapped, chip orphaned on its own
 *                                     line, and the duration row stretched
 *                                     to match at 76.78px against 50.50px
 *   1100   271.50    needs 299.28     wrapped
 *   1150   286.08    needs 299.28     wrapped
 *   1200   300.67    needs 299.28     fits, 1.39px of slack
 *   1440   324.00    needs 299.28     fits
 *
 * So the two-up tier belonged at 1200, not at 1024: between 1024 and 1199
 * the list was the same single column it already was at 768. The card
 * width is Vesper's anatomy and the breakpoint followed it, which is the
 * call T09 made on the Maidstone triptych for the same reason.
 *
 * MANUAL-16, 2026-09-08: THE FIRST RULE OF THIS BLOCK IS DELETED. The
 * status row, the intensity row, the players row and the duration row are
 * off this band, so the list it re-tiered no longer exists in any room
 * except Lilith, where it is one Age row. Section 16.5 declares one column
 * at every width instead, which is the only honest tiering for one row.
 * The measurements above are kept as the record of why 1200 was ever the
 * edge; nothing above is a live rule any more.
 *
 * THE SECOND RULE STAYS, and it is now the belt for the Age row rather
 * than for a seasonal room's second chip: `flex: 1 1 0` makes the value's
 * hypothetical main size zero, so a long value wraps inside its own box
 * instead of forcing a line break that would drop it under its term. An
 * inline meta row wraps; it never stacks. */
.myth-room-glance__value {
  flex: 1 1 0;
  min-width: 0;
}

/* F5. THE FAQ TRIGGERS WERE 1px APART.
 *
 * `.myth-band-faq__item` carried a 1px bottom rule and nothing else, so
 * the two largest tap targets on the page sat 1px apart at 390, under the
 * 8px adjacent-target floor, measured on three consecutive pairs. The
 * separation went where it structurally belongs, as the item's own bottom
 * padding on the 8px scale, so an OPEN panel also gets 8px before the
 * hairline instead of sitting on it. BEFORE 1px, AFTER 9px (8px plus the
 * rule) at 390 and at 1440. Trigger heights unchanged: 70 / 70 / 51 / 70
 * at 390, 51 at 1440.
 *
 * R07: that 8px is now the component's, in css/myth-bands.css, because it
 * is part of the one divider style and every other FAQ on the site needs
 * it for the same reason this one did. The route-scoped copy is deleted
 * rather than left to shadow it; the computed padding on this band is the
 * same 8px, proved in loop/work/REVIEW-07/after.json. */

/* F6. TWO STANDALONE QUIET LINKS WERE 25px AT 390.
 *
 * `.myth-room-link` is deliberately `inline` with no vertical padding,
 * which is T08's F2 defect corrected. Vertical padding on an INLINE box
 * grows the hit area without touching the line box, so these two grow and
 * nothing on the page moves.
 *
 *   selector                      text                        before  after
 *   .myth-room-faq__tail link     All our booking questions    25.00  44.00
 *   .myth-room-gift__tail link    See all twelve rooms         25.00  44.00
 *
 * Both are the ONLY thing in their paragraph, so the hit box cannot
 * straddle prose. Air after, measured: 16.5px above the FAQ tail (the last
 * accordion trigger is 26px above it) and 15.5px above the gift tail (the
 * Ghost button is 25px above it), both over the 8px floor, and the band's
 * own bottom padding below each.
 *
 * `background-origin: content-box` goes with it because the hover
 * underline is drawn as a background at `0 100%` and would otherwise drop
 * to the bottom of the new padding.
 *
 * NOT DONE, and reasoned rather than missed: three links stay at their
 * line-box height because each is words inside a sentence Marlowe wrote,
 * where a padded hit box straddles the prose lines above and below and
 * navigates on a tap the visitor did not make. "plan a team day" (51.39px
 * at 390, two lines), "book your slot at Green Street" (51.39px) and
 * "Both our Gillingham venues" (25px, inside "Both our Gillingham venues
 * are on one page."). The first two already clear 44px at 390 by wrapping.
 * Same call T08 and T09 made, for the same measured reason. */
.myth-room-faq p.myth-room-faq__tail .myth-room-link {
  padding-block: 10px;
  background-origin: content-box;
}

/* F7. DIVI'S BACK-TO-TOP CONTROL, HIDDEN AT PHONE WIDTHS ONLY.
 *
 * `span.et_pb_scroll_top` measures 40 x 40px, which is 4px under the touch
 * floor, and it is `position: fixed` at `z-index: 99999`, which outranks
 * the rail's 99970. Measured on this route at 390: 40 x 40 at top 679,
 * right edge flush to the viewport, sitting over band 2's framed poster
 * with the rail 104px below it, and `elementFromPoint` at its centre
 * returns the span itself, so it takes taps on whatever is under it.
 *
 * css/myth-gillingham.css and css/myth-maidstone.css both hide it at
 * phone widths and NEITHER IS ENQUEUED ON A ROOM ROUTE, so without this
 * rule the twelve room pages would be the only phone pages on the site
 * still carrying it, which is a chrome inconsistency a visitor moving from
 * /gillingham/ to a room page would feel. Same rule, same scope, same
 * single `!important` and the same reason for it: Divi reveals the control
 * with a jQuery fadeIn that writes `style="display: inline"` on the
 * element, and an inline declaration from a third party's script is the
 * one case a stylesheet cannot outrank any other way.
 *
 * Above 768 it is left exactly as Divi ships it. Measured after:
 * `display: none` at 320 and 390, untouched at 768, 1024 and 1440. */
@media (max-width: 767px) {
  span.et_pb_scroll_top {
    display: none !important;
  }
}

/* =======================================================================
 * 11. T10 CORTEX FIX ROUND, 2026-09-06.
 *
 * One appended block. Nothing above this comment was edited, and section
 * 10 (Fold's responsive pass) is untouched: every rule below either names
 * a selector Fold does not write, or restates one of section 6's own
 * reserve tiers with a corrected number.
 *
 *   11.1  the booking fallback line, now at the TOP of the card
 *         (qa-adversary P1 a)
 *   11.2  the Tempus reserve, re-measured at twelve widths and two
 *         breakpoint edges corrected (qa-adversary P2 b)
 *   11.3  the hero meta chip row's reserve against the webfont swap
 *         (qa-adversary P2 a)
 *   11.4  band 2's row icon column (Fold hand-off H2, spec section 4)
 *
 * Every number below was measured in Chromium through Playwright, before
 * and after: loop/work/T10/widget-tiers.mjs, meta-chips.mjs,
 * term-probe.mjs and glance-rows.mjs.
 * ===================================================================== */

/* 11.1 THE FALLBACK LINE IS AT THE TOP OF THE CARD, AND IT IS QUIET.
 *
 * inc/bands-room.php now prints it BEFORE the reserved widget box rather
 * than after it, which is the whole of qa-adversary P1 a: below the box it
 * sat 1,709px down, 2.02 viewport heights at 390, so with ertempus.net
 * blocked, down, or JavaScript off the visitor met a 1,680px blank white
 * rectangle with no way forward on screen.
 *
 * The type is deliberately smaller and lighter than the card's body: it is
 * an escape hatch, not the offer, and it must not compete with the
 * calendar in the state where the calendar works. Ink at 72% is an
 * existing step of this file's alpha ladder (the badge terms use it, and
 * the parchment eyebrows did until REVIEW-03 removed them) and measures
 * 7.18:1 on the card's White, so no new
 * colour enters the page to carry it. The anchor keeps its own
 * .myth-room-link--onparchment treatment, because the link is the point.
 *
 * `margin: 0 0 16px` is the mirror of the `16px 0 0` it had underneath, so
 * the gap between the line and the widget is the same 16px it always was
 * and the reserved box below it is unchanged. */
.myth-room-book p.myth-room-book__fallback {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(28, 19, 16, 0.72);
}

/* 11.2 THE RESERVE, RE-MEASURED AT EVERY WIDTH IT HAS TO COVER.
 *
 * Section 6 states the rule this corrects: the reserve is a FLOOR, and "if
 * the widget settles taller on any room, the reserve goes up". At two
 * widths it was not one. qa-adversary found 1,705 against 1,680 between
 * 361 and 379, and 1,673 against 1,620 at 1023, the second being a
 * one-pixel breakpoint error against section 6's own table (the table
 * records 1023 -> 1680, the rule that delivered 1680 was
 * `min-width: 1024px`).
 *
 * Re-measured with the reserve neutralised, so the box reports its CONTENT
 * height, after scrolling #book into view and waiting 9s
 * (loop/work/T10/widget-tiers.mjs). Chrome defers rendering of a
 * cross-origin iframe far outside the viewport, so a measurement taken at
 * rest reads 300px and is worthless; that is section 6's finding and it
 * still holds.
 *
 *   width   iframe   box       reserve
 *    320     1664    1773.50    1780
 *    360     1595    1704.50    1780  (the <=360 tier, 75px of headroom)
 *    361     1595    1704.50    1720
 *    375     1595    1704.50    1720
 *    380     1595    1704.50    1720
 *    386     1595    1704.50    1720   <- last width that wraps
 *    387     1568    1677.50    1680   <- first width that does not
 *    389     1568    1677.50    1680
 *    390     1565    1674.50    1680
 *    414     1537    1646.50    1680
 *    500     1503    1612.50    1680
 *    767     1505    1614.50    1680
 *    768     1505    1614.50    1620
 *    850     1505    1614.50    1620
 *    897     1505    1614.50    1620   <- last width at the narrow height
 *    898     1563    1672.50    1680   <- first width at the wide height
 *   1023     1563    1672.50    1680
 *   1024     1563    1672.50    1680
 *   1200     1563    1672.50    1680
 *   1440     1563    1672.50    1680
 *
 * The two step edges, 386/387 and 897/898, were found by bisection rather
 * than assumed from a device width, because assuming one is exactly how
 * the 1023 hole got in. Each tier is the measured maximum inside its own
 * range rounded up to the next 20px, and the two new edges are declared
 * two pixels to the SAFE side of the measurement (388 and 896, not 386 and
 * 898), because over-reserving costs white space inside a card and
 * under-reserving costs a layout shift the visitor sees.
 *
 * THE TIERS ARE RESTATED IN FULL AND THEY ARE MUTUALLY EXCLUSIVE, so the
 * cascade cannot leave section 6's `min-width: 1024px` rule winning at
 * 1024 over a later `min-width: 768px` one. Do not delete section 6's
 * declarations: they are the measurement's history and its comment is the
 * reason the reserve exists at all.
 *
 * STILL A FLOOR. Never `height`, never with `overflow: hidden`, which
 * would clip a checkout step, and never `overflow-x: auto`, which computes
 * `overflow-y: auto` and turns the box into a scroll container.
 *
 * T11 TO T16 MUST RE-MEASURE ALL FIVE TIERS ON THEIR OWN ROOM. The payload
 * carries a per room `sw` parameter, the vendor's calendar is a different
 * height per room, and a reserve inherited from The Game is a guess
 * wearing a measurement's clothes. */
@media (max-width: 360px) {
  .myth-room-book__widget {
    min-height: 1780px;
  }
}

@media (min-width: 361px) and (max-width: 388px) {
  .myth-room-book__widget {
    min-height: 1720px;
  }
}

@media (min-width: 389px) and (max-width: 767px) {
  .myth-room-book__widget {
    min-height: 1680px;
  }
}

@media (min-width: 768px) and (max-width: 895px) {
  .myth-room-book__widget {
    min-height: 1620px;
  }
}

@media (min-width: 896px) {
  .myth-room-book__widget {
    min-height: 1680px;
  }
}

/* 11.3 THE HERO META CHIP ROW HOLDS ITS WRAPPED HEIGHT THROUGH THE FONT
 * SWAP.
 *
 * qa-adversary P2 a: CLS 0.0886 at 375 on a throttled connection, from a
 * single entry, on the LCP band. "2 to 8 players. 60 minutes. Moderate."
 * wraps to two lines in the fallback face and to one once Karma swaps in,
 * so the hero's content block loses 23.5px and everything in it moves.
 *
 * Measured, loop/work/T10/meta-chips.mjs, every phone width with the
 * webfonts aborted and with them allowed:
 *
 *   width   fallback   Karma     verdict
 *    320     43.00      43.00    both wrap, no shift
 *    360     43.00      43.00    both wrap, no shift
 *    361     43.00      19.50    SHIFTS
 *    375     43.00      19.50    SHIFTS   <- last width that shifts
 *    376     19.50      19.50    neither wraps, no shift
 *    390     19.50      19.50    no shift
 *
 * So the reserve is the wrapped height, 43px, and it is declared ONLY
 * across the band where the two faces disagree. Below 361 both wrap and
 * the row is 43px anyway; from 376 up neither does and reserving there
 * would push the hero's five row type block up for no reason at the
 * primary width. The upper edge is declared at 379 rather than the
 * measured 375, four pixels of margin on the side that costs nothing,
 * because the fallback face is the local system stack and its metrics are
 * the one thing here that is not the same on every machine.
 *
 * min-height rather than a font metric override: this project has no
 * @font-face of its own to put size-adjust on, the faces are Divi's Google
 * Fonts link, and a reserve is a thing the next person can measure.
 *
 * AND THE RESERVE ALONE IS NOT ENOUGH, measured: with only the min-height
 * the band's own height stops moving but the CHIPS still reflow inside it,
 * the third one jumping from line two to line one, and CLS at 375 measured
 * 0.0141 against a 0.01 target. The reason the two faces disagree at all is
 * a 0.19px overflow: the row is 311.00px wide, the line sets in 296.53px in
 * Karma and in 311.19px in the fallback, both at 13px, weight 500, 1.04px
 * of letter-spacing and uppercase.
 *
 * So the max-width takes the decision away from the face. At 88% of the
 * row, both faces wrap, at the same point, for the whole of this band:
 * 273.7px at 375 against 296.53 in Karma and 311.19 in the fallback. The
 * row then renders as the two lines it already renders at 320 and 360, the
 * 43px reserve is the true height in both states, and the swap moves
 * nothing. Nothing outside 361 to 379 is touched: below 361 both faces
 * already wrap, and from 380 up neither does.
 *
 * A font metric override was the other candidate and was rejected on
 * measurement: `font-size-adjust` normalises x-height, this row is
 * UPPERCASE, and the correct axis for it would be cap-height, which is a
 * much younger feature; and an @font-face with `size-adjust` needs
 * `local()` names that differ on every platform, so it would fix the
 * machine it was tuned on and quietly do nothing on the others. The wrap
 * point is the thing that is actually wrong and it is the thing this
 * fixes. FOR VESPER: at 361 to 379 the chip line now reads on two lines
 * rather than one, which is what 320 to 360 already does. */
@media (min-width: 361px) and (max-width: 379px) {
  .myth-room-hero p.myth-room-hero__meta {
    min-height: 43px;
    max-width: 88%;
  }
}

/* 11.4 BAND 2'S ROW ICONS.
 *
 * Fold hand-off H2 and spec section 4: one 20px aria-hidden glyph per row,
 * Ink at 72% on the Parchment band, never Gold (spec C3). Inline SVG from
 * inc/bands-room.php, on the T07c and T08 precedent, because
 * docs/ICON-SYSTEM.md section 6 is still unbuilt and a guessed ETmodules
 * codepoint renders as a blank box.
 *
 * THE VALUE COLUMN DOES NOT MOVE, and that is the constraint this block is
 * built around. Fold's F4 fix is arithmetic: the status row's max-content
 * is a 120px term offset plus a 12px gap plus a 167.28px chip, 299.28px,
 * against a 300.67px cell at 1200. Anything added to the row's leading
 * comes straight out of the chip's space and re-orphans it, which is the
 * defect F4 exists to close.
 *
 * So the icon column is paid for out of the term's own reserved width
 * rather than added in front of it. Measured, loop/work/T10/term-probe.mjs:
 * the widest term, INTENSITY, is 82.73px at 13px, so 84px holds all six
 * with the values still starting at one x.
 *
 *   before   term 120 + gap 12                     = 132px value offset
 *   after    icon 24 + gap 12 + term 84 + gap 12    = 132px value offset
 *
 * Identical to the pixel, which is also spec section 4's own stated "fixed
 * 132px offset". The spec's other number, a 32px icon column, cannot be
 * true at the same time as the 132px offset with an 84px term, and the
 * offset is the one the reading column and Fold's measurement both depend
 * on, so the column is 24px around a 20px glyph and the deviation is
 * recorded here rather than discovered later.
 *
 * The price row keeps its 120px term: it is a separate <dl> outside the
 * grid, it carries no icon, and its Maroon rule is band 2's whole accent
 * budget. Hence `.myth-room-glance__dl` in the selector.
 *
 * align-self: baseline is not available either, for the same reason
 * (originally documented above this rule as "align-self: center rather
 * than the row's baseline, because a flex box wrapping an SVG has no
 * baseline to align to and the glyph would sit on the row's bottom
 * edge"): that reasoning still holds and is why this rule does not use
 * the row's own baseline alignment.
 *
 * MANUAL-54 (2026-09-14, the user's own instruction, root-caused live
 * before this rule was touched). `align-self: center` centres the icon
 * against the CROSS-AXIS SIZE OF THE WHOLE ROW, not against the term's
 * own line. On the five rows whose value never wraps (Players, Duration,
 * Intensity, Age Group, and Environment above 768px) the row's tallest
 * line is the value's own single line, so centring against the row
 * happened to land the icon level with the term too. Address (and
 * Environment, below 768px, where "Immersive Environment" also wraps)
 * breaks that coincidence: its value wraps to two or three lines, which
 * makes the row's own cross-axis far taller, and centring the icon
 * against that full block drops it well below the term, the exact gap
 * the user's own screenshot showed.
 *
 * Fixed by aligning to the TOP of the row instead: `align-self:
 * flex-start`, which sidesteps the SVG-baseline problem the original
 * comment already ruled out (flex-start needs no baseline, only a
 * cross-start edge, which every flex item has). Switching from `center`
 * to `flex-start` also moves the icon on the five previously-correct
 * rows, since `flex-start` sits higher than `center` does against a
 * short single-line row, so `margin-top` compensates back to the exact
 * pre-existing pixel position, measured live via `getBoundingClientRect`
 * on the Players row (loop/scratch-manual54-compute.mjs), not computed
 * by eye, matching the measured-not-guessed style of 11.4b above:
 *
 *   width    align-self:center centre-Y   flex-start, margin-top:0   needed margin-top
 *    390              1042.78                    1040.78                  2.00px
 *    768               988.53                     985.78                  2.75px
 *   1024              1183.77                    1181.02                  2.75px
 *   1440              1271.41                    1268.66                  2.75px
 *
 * 768, 1024 and 1440 agree to the pixel (the term/value font sizes are
 * identical at all three: 13px/17px), so one tier covers all of them;
 * 390 needs its own value because the term/value fonts are smaller there
 * (12px/16px). Re-verified after applying these two values: every one of
 * the six rows (including Address, and Environment below 768px) now
 * shares the exact same `icon.top - term.top` offset, on both a
 * Green-Street room (/the-game/, address plus landmark, the longest
 * value on the page, still wrapping to two lines at 1024) and a
 * Canterbury-Street room (/arabian-nights/, the room in the user's own
 * screenshot): -3px under 768px, -2.25px from 768px up, identical on
 * every row, at every width, on both rooms; the five previously-correct
 * rows measure pixel-identical before and after (0.00px delta) at every
 * width both rooms share. */
.myth-room-glance__icon {
  flex: none;
  display: flex;
  align-self: flex-start;
  margin-top: 2px;
  width: 24px;
  color: rgba(28, 19, 16, 0.72);
}

@media (min-width: 768px) {
  .myth-room-glance__icon {
    margin-top: 2.75px;
  }
}

.myth-room-glance__icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (min-width: 768px) {
  .myth-room-glance__dl .myth-room-glance__term {
    min-width: 84px;
  }
}

/* 11.4b THE ICON COLUMN STANDS DOWN UNDER 340px.
 *
 * Measured, loop/work/T10/glance-icons-ab.mjs, band height with the icons
 * and without them:
 *
 *   width   without   with     verdict
 *    320    933.55    949.14   the status chip drops to a second line
 *    330    943.55    959.14   inside its value, +15.6px
 *    340    953.55    953.55   identical
 *    360    937.72    937.72   identical
 *    390    967.72    967.72   identical
 *   1440    771.00    771.00   identical
 *
 * At 320 and 330 the row is 24px of icon plus 12px of gap short of holding
 * the term and the 167.28px status chip on one line. The chip wraps INSIDE
 * the value rather than being orphaned onto its own line, which is Fold's
 * F4 belt doing its job, but it still costs the band 15.6px at the
 * narrowest width on the matrix.
 *
 * The spec answers this itself: "the icon is decoration on a labelled row:
 * the <dt> carries the meaning, so a missing icon costs nothing". Below
 * 340 the fact is worth more than the glyph, so the glyph goes and the
 * band is byte-identical to its pre-icon geometry at every width. 340 is
 * the measured edge, not a device width. */
@media (max-width: 339px) {
  .myth-room-glance__icon {
    display: none;
  }
}

/* =======================================================================
 * 12. PER-ROOM WIDGET RESERVE. T11, /the-greatest-bank-heist/.
 *
 * Section 11.2 holds /the-game/'s measurement and section 6 explains why a
 * reserve exists at all. Neither is a constant: the frozen Tempus payload
 * carries a per-room `sw` parameter, the vendor serves that room's own
 * calendar, and the settled box is a different height per room at a
 * different set of step widths. Inheriting the numbers would be a guess
 * wearing a measurement's clothes, so every room is re-measured on its own
 * route and gets its own block, keyed on the band's data-room attribute.
 *
 * Measured with the reserve neutralised, after scrolling #book into view
 * and waiting 9s (loop/work/T11/widget-tiers.mjs, eighteen widths), then
 * every step edge bisected rather than assumed from a device width
 * (loop/work/T11/widget-bisect-tiers.mjs). The box is the iframe plus the
 * vendor's sibling #tempus-button-wrapper (100px) plus 10px of
 * inline-block baseline gap, which is why it is not the iframe height.
 *
 *   width   iframe     box     tier
 *     320     1695   1804.50   1820
 *     333     1695   1804.50   1820   last width at the tallest height
 *     334     1626   1735.50   1740   first width below it
 *     375     1626   1735.50   1740
 *     382     1626   1735.50   1740   last width at this height
 *     383     1592   1701.50   1720   first width below it
 *     386     1592   1701.50   1720
 *     387     1565   1674.50   1680   last wrap gone
 *     390     1565   1674.50   1680
 *     414     1537   1646.50   1680   covered by the 389 to 767 tier
 *     767     1505   1614.50   1680   covered by the same tier
 *     768     1505   1614.50   1620
 *     895     1505   1614.50   1620
 *     897     1505   1614.50   1620   last width at the narrow height
 *     898     1547   1656.50   1660   first width at the wide height
 *    1440     1547   1656.50   1660
 *
 * Six tiers, mutually exclusive, so the cascade cannot leave a wider rule
 * winning over a narrower one. Each edge is declared two pixels to the
 * SAFE side of the measurement (335, 384, 388 and 896, not 333, 382, 386
 * and 898): over-reserving costs white space inside a card, under-
 * reserving costs a shift the visitor sees, and the vendor's own wrap
 * width can move by a pixel with a font swap.
 *
 * STILL A FLOOR. Never `height`, never `overflow: hidden`, which would
 * clip a checkout step, and never `overflow-x: auto`, which computes
 * `overflow-y: auto` and turns the box into a scroll container.
 *
 * Nothing here touches the widget's logic, its markup, its parameters or
 * its event names. It reserves the space the vendor is going to need and
 * leaves it alone.
 * ===================================================================== */
@media (max-width: 335px) {
  .myth-room-book[data-room="the-greatest-bank-heist"] .myth-room-book__widget {
    min-height: 1820px;
  }
}

/* T11 FOLD, F1. 1740px -> 1760px on this one tier, and nothing else in
   section 12 moves.
   Re-measured with the same script and the same method the tiers were built
   with (loop/work/T11/widget-tiers.mjs, reserve neutralised, #book scrolled
   into view, 9s settle), five runs, six widths inside the tier:

        width   box at build   box now    shipped tier   headroom now
          320       1804.50    1807.50    1820             12.50
          334       1735.50    1739.50    1740              0.50
          360       1735.50    1739.50    1740              0.50
          361            -     1739.50    1740              0.50
          375       1735.50    1739.50    1740              0.50
          382       1735.50    1739.50    1740              0.50
          383       1701.50    1704.50    1720             15.50
          389       1674.50    1677.50    1680              2.50
          390       1674.50    1674.50    1680              5.50
          768       1614.50    1614.50    1620              5.50
         1440       1656.50    1656.50    1660              3.50

   The vendor's own frame grew 3 to 4px on the widths below 390 between the
   build and this pass, and only there: /the-game/ still measures 1704.50 at
   375, exactly its own recorded number, so the drift is this room's calendar
   (sw=r-6) and not the machine, the server or the method.
   Every other tier absorbed it. This one did not, because 1739.50 lands just
   under a multiple of 20 and section 12's rounding is ceil(box / 20) * 20,
   which yields between 0.50 and 20px of headroom depending on where the box
   happens to fall. 0.50px is not a reserve, it is a coincidence: it is inside
   the vendor's own font-swap wrap tolerance, and 336 to 384 is the tier that
   holds 360, 361 and 375, three of the most common phone widths in the market.
   The amended arithmetic keeps the 20px grid and adds section 12's own two
   pixel safety before the rounding, which is the convention that file already
   applies to the tier EDGES:
       reserve = ceil((box + 2) / 20) * 20 = ceil(1741.50 / 20) * 20 = 1760
   Applied to every other tier it returns that tier's shipped value unchanged,
   so this is one number, not a re-tiering.
   Cost of the change: 20.50px of white space inside the card, below the
   vendor's own button wrapper, at 336 to 384 only. Cost of leaving it: a
   shift on the primary conversion band the first time the vendor reflows by
   a pixel. Still a floor, still min-height, still no clip anywhere near the
   frozen widget.
   Verified after (loop/work/T11/fold-scripts/reserve.mjs): COVERS by 20.50 at
   336, 360, 361, 375 and 382, clsFromBook 0.0000, document overflow 0. */
@media (min-width: 336px) and (max-width: 384px) {
  .myth-room-book[data-room="the-greatest-bank-heist"] .myth-room-book__widget {
    min-height: 1760px;
  }
}

@media (min-width: 385px) and (max-width: 388px) {
  .myth-room-book[data-room="the-greatest-bank-heist"] .myth-room-book__widget {
    min-height: 1720px;
  }
}

@media (min-width: 389px) and (max-width: 767px) {
  .myth-room-book[data-room="the-greatest-bank-heist"] .myth-room-book__widget {
    min-height: 1680px;
  }
}

@media (min-width: 768px) and (max-width: 895px) {
  .myth-room-book[data-room="the-greatest-bank-heist"] .myth-room-book__widget {
    min-height: 1620px;
  }
}

@media (min-width: 896px) {
  .myth-room-book[data-room="the-greatest-bank-heist"] .myth-room-book__widget {
    min-height: 1660px;
  }
}

/* =======================================================================
 * 13. PER-ROOM H1 RESERVE. T11, /the-greatest-bank-heist/.
 *
 * The defect, measured on this route before the fix: CLS 0.0148 at 1440,
 * from ONE entry on the LCP band, .myth-room-hero__inner growing 262.28 to
 * 329.47 when the webfont swaps in (loop/work/T11/cls-detail-1440.txt).
 * /the-game/ measured 0.0002 at the same width in the same run, so this is
 * the room's own string, not the template.
 *
 * The cause is the H1 and nothing else (loop/work/T11/hero-swap.txt): "The
 * Greatest Bank Heist" sets on ONE line in the local fallback stack at
 * 1200 and 1440 and on TWO in Julius Sans One, which is 67.19px of the
 * hero's five row type block appearing after the swap. The tagline, the
 * chip row and the button are identical in both faces at every width.
 *
 * The reserve is JULIUS'S line count, not the fallback's, at every width.
 * Written that way on purpose: the shipped face is the one that decides
 * the final height, so the rule is a no-op in the settled state and can
 * never add a line to what the visitor ends up reading, and it holds even
 * on a machine whose fallback stack has different metrics from this one,
 * which section 11.3 records as the one thing here that is not portable.
 *
 * Measured with the fonts allowed, every edge bisected rather than assumed
 * (loop/work/T11/hero-h1-edge.mjs and hero-h1-edge2.mjs). The H1 box is
 * 326px wide under 768, 604px to 1023 and 720px above, and the font size
 * is a clamp, which is why the count is not monotonic:
 *
 *   width        H1 box   julius   fallback   verdict
 *     320         288.0    3 lines  2 lines   SHIFTS 46.59px
 *     341         309.0    3 lines      -     last width at three lines
 *     342         310.0    2 lines      -     first width at two
 *     390 to 767  326/604  2 lines  2 lines   agree
 *     768         604.0    1 line   1 line    agree
 *     796         604.0    1 line       -     last width at one line
 *     797         604.0    2 lines      -     first width at two
 *     900         604.0    2 lines  1 line    SHIFTS 57.78px
 *    1000 to 1023  604.0   2 lines  2 lines   agree
 *    1024         720.0    1 line   1 line    agree
 *    1052         720.0    1 line   1 line    last agreeing width
 *    1053         720.0    2 lines  1 line    SHIFTS 63.95px
 *    1440         720.0    2 lines  1 line    SHIFTS 67.19px
 *
 * 2.24em is exactly two lines and 3.36em exactly three, and the ratio is
 * 1.12, which is what THIS FILE declares at line 107, in the
 * `.myth-room-hero h1, .myth-room-glance h2, ...` group, at 0-1-1 and
 * later in source order than anything else that reaches the element.
 *
 * T11 FIX ROUND, Canon HARD 3, correcting this paragraph. It used to name
 * Divi as the winner and route the question to Vesper. Both were wrong.
 * Resolved through CDP CSS.getMatchedStylesForNode on the live H1, the
 * three rules that declare line-height on it were: Divi's `h1, h2, h3,
 * h4, h5, h6 { line-height: 1em }` at 0-0-1, which loses to everything;
 * `.myth-room-hero__h1 { line-height: 1.08 }` at 0-1-0; and line 107's
 * 1.12 at 0-1-1. This was a self-collision between two rules in one
 * stylesheet, not a theme-versus-Divi arbitration, so there was nothing
 * for Vesper to decide. The dead 1.08 has been deleted and 1.12 is now the
 * only declared value on the element; the computed value is unchanged,
 * which is the point, and it was re-measured after the deletion
 * (loop/work/T11/fix-round/h1-lineheight-after.txt): 67.2px on 60px at
 * 1440 and 46.592px on 41.6px at 320, identical to the numbers the
 * reserve below was built from. THE RESERVE STILL HOLDS: 2.24em is still
 * exactly two lines and 3.36em still exactly three.
 *
 * The first cut of this reserve WAS derived from the 1.08 and came out
 * 4.79px short per line, which left a 4px shift on the board and is the
 * reason the number here is measured rather than read off the stylesheet.
 * It is em rather than px so one declaration holds across a band the
 * clamped font size is still growing through.
 *
 * Each edge is declared two pixels to the SAFE side (343, 795 and 1051,
 * not 341, 797 and 1053), which is the convention section 12 uses on the
 * widget reserve: a two pixel window where a settled one line H1 sits in a
 * two line box costs white space above the type block, and the block is
 * bottom anchored so nothing below it moves; being one pixel short costs a
 * visible jump on the largest paint element.
 *
 * The bands with no rule are the ones where Julius sets the H1 on one
 * line: 768 to 794, and 1024 to 1050. Reserving there would put an empty
 * line under the H1 in the state the visitor actually sees.
 *
 * T12 TO T21 MUST RE-MEASURE THIS ON THEIR OWN ROOM. The name is the
 * variable and the two long ones are already known: Murder on the Midnight
 * Express at thirty characters and Raiders of the Lost Galleon at
 * twenty-seven. A room whose H1 needs four lines at 320 is not a CSS
 * problem, it is a question about the display name (T10 section 14 step
 * 23).
 * ===================================================================== */
@media (max-width: 343px) {
  .myth-room-hero[data-room="the-greatest-bank-heist"] .myth-room-hero__h1 {
    min-height: 3.36em;
  }
}

@media (min-width: 344px) and (max-width: 767px) {
  .myth-room-hero[data-room="the-greatest-bank-heist"] .myth-room-hero__h1 {
    min-height: 2.24em;
  }
}

@media (min-width: 795px) and (max-width: 1023px) {
  .myth-room-hero[data-room="the-greatest-bank-heist"] .myth-room-hero__h1 {
    min-height: 2.24em;
  }
}

@media (min-width: 1051px) {
  .myth-room-hero[data-room="the-greatest-bank-heist"] .myth-room-hero__h1 {
    min-height: 2.24em;
  }
}

/* =======================================================================
 * 14. T11 FIX ROUND. APPENDED SECTION. RETIRED, no rules left.
 *
 * MANUAL-16 deleted 14.1 with the band it re-laid out, the before you book
 * band, and section 15 with it. MANUAL-17 deleted 14.2, the per-room
 * declared wrap that stopped the breadcrumb trail migrating a row across
 * the font swap: that trail is now the sitewide strip under the header,
 * its list is flex-wrap:nowrap, and only the current page truncates. A
 * trail that cannot wrap cannot shift, at any width, for any room name, so
 * the per-room keying that T12 to T21 were each told to re-measure goes
 * and does not come back.
 *
 * The header retained because sections 12, 13 and 16 refer to "this file's
 * convention for an appended pass", which this section established.
 * ===================================================================== */

/* =======================================================================
 * 16. MANUAL-16, the user's review of 2026-09-08. APPENDED SECTION.
 * Template-wide, all twelve rooms.
 *
 *   16.1  the hero plate's object-position for an aspect 1.5 plate
 *   16.2  the hero meta line: three icon led items, declared not wrapped
 *   16.3  the facts band: the split moves to 1024, the poster gets a cap
 *   16.4  the facts band: the client's description block
 *   16.5  the one row that is left of the definition list
 *   16.6  the FAQ tail row now carries three links
 *
 * Nothing between section 0 and section 15 is edited in place by this
 * section except the deletions the spec names, which is this file's own
 * convention for an appended pass: every correction below is a later rule
 * at equal specificity.
 *
 * Spec and every measurement behind it: loop/work/MANUAL-16/vesper.md.
 * ===================================================================== */

/* -----------------------------------------------------------------------
 * 16.1 THE HERO PLATE'S FOCAL POINT FOLLOWS THE NEW PLATE'S ASPECT.
 *
 * The hero plate is now the room's landscape-untitled scene, 1536 x 1024
 * (aspect 1.5) on nine rooms and 2000 x 1342 on three, where it used to be
 * a 2400 x 1340 bg-section ground (aspect 1.791). Section 1 declares
 * `object-position: 58% 45%`, which was written for the wider plate and is
 * left there as the history.
 *
 * Why the value changes rather than staying (vesper.md 2.5). With an
 * aspect 1.5 plate the crop axis flips at about 1020px of viewport width.
 * Below that the box is taller than 1.5 and the crop is HORIZONTAL, so x
 * governs, and 58% pushes the visible window right; both built plates are
 * centre weighted, so a centred crop is the one that keeps the subject. At
 * 1440 the painted width is exactly the band width, so x is inert and only
 * y acts: 40% crops 112px off the top and 168px off the bottom of the
 * 960px painted plate, which keeps the upper two thirds of the scene and
 * loses the floor, and the bottom of this band is under 0.62 to 0.90 of
 * ink anyway.
 *
 * PAIRED WITH css/myth-motion.css. `.myth-js .myth-room-kb__img` declares
 * `transform-origin` as this same pair, so the drift zooms about the point
 * the crop is holding still. The two values exist only to match each
 * other; changing one without the other pulls the crop off its focal.
 * -------------------------------------------------------------------- */
.myth-room-hero__img {
  object-position: 50% 40%;
}

/* -----------------------------------------------------------------------
 * 16.2 THE HERO META LINE BECOMES THREE ICON LED ITEMS.
 * vesper.md section 3. SUPERSEDES 11.3 IN FULL.
 *
 * 18px, not the facts band's 20px: the meta type is 13 to 15px uppercase
 * and a 20px glyph outsizes a 9px cap height. 18px sits inside the 19.50px
 * line box at 390 and the 22.50px one at 1440 with no line box growth.
 * Colour is currentColor, which on this band is White at full opacity, the
 * same as the row's text. Gold is not used here or on the parchment row.
 *
 * THE ROW IS DECLARED BELOW 768, NOT WRAPPED. Measured item widths in
 * Karma are 135.2 / 110.8 / 104.5 at 390 against a 326px content block, so
 * the three can never share a line at any width from 320 to 767 and the
 * row must break somewhere. A wrapping flex row is exactly what section
 * 11.3 was written for: the same row already wrapped differently in the
 * local fallback face and in Karma between 361 and 379, and adding icons
 * moves that boundary rather than removing it. So every chip is its own
 * grid row instead. That is font proof by construction: the widest item is
 * 135.2px in Karma and about 141px in the fallback stack, against a row
 * 256px wide at 320, so no item can wrap internally in any face and no
 * item has anywhere to migrate to.
 *
 * 11.3's `min-height: 43px` and `max-width: 88%` are fully overridden by
 * the block below, which is the same 0-2-1 specificity and later in
 * source. 11.3 is left in place as the record of why the row was ever
 * touched; this block supersedes it.
 * -------------------------------------------------------------------- */
.myth-room-hero__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
}

.myth-room-hero__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.myth-room-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.myth-room-hero p.myth-room-hero__meta {
  column-gap: 16px;
  row-gap: 6px;
}

@media (max-width: 767px) {
  .myth-room-hero p.myth-room-hero__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    min-height: 0;
    max-width: none;
  }

  /* MANUAL-28: the indent this used to hold (26px, to align these two
     word-only chips' labels with the icon column the three players/
     duration/intensity chips set) is dropped along with those three
     chips, which moved to the "Game information" section below. With no
     icon chips left in this row there is nothing left to align against. */
  .myth-room-hero__chip--noicon {
    padding-left: 0;
  }
}

/* -----------------------------------------------------------------------
 * 16.3 THE FACTS BAND SPLITS AT 1024, NOT AT 768, AND THE POSTER IS CAPPED
 * BELOW IT. vesper.md 4.3.
 *
 * Two measured reasons, both consequences of the band changing job.
 *
 * First, a five row spec plate reads fine in a 378px column and running
 * prose does not. Measured, the copy column at 768 under the old split is
 * 378.0px, which is 43.3 characters at 17px Karma, and the longest of the
 * twelve descriptions (back-in-time, 325 words) renders as a 1290.16px
 * ribbon in it. Stacked, the same text is capped by the template's own
 * 70ch at 611.7px and renders 785.31px tall.
 *
 * Second, the poster was rendering 703px wide at 767, a 703px square
 * picture on a 767px viewport. That is a defect measured on the current
 * build and the 420px cap closes it. Between 421 and 767 this is a visible
 * change to what shipped, and it is taken deliberately rather than left
 * beside a band being respec'd.
 *
 * Cost, stated: at 768 to 1023 the band is taller stacked than split,
 * 903.38 against 598.30 on /the-game/. That is 305px of extra height on a
 * tablet, on a reading band, on a page that got 1300 to 1700px shorter.
 *
 * The poster stays LAST in the stacked order, which is T10's decision and
 * its reason still holds: it is the one element that may be dropped under
 * a measured performance failure, and that costs no layout when it is
 * last. From 1024 the existing 5fr / 7fr split applies unchanged.
 * -------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .myth-room-glance__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .myth-room-glance__frame {
    order: 0;
  }
}

@media (max-width: 1023px) {
  .myth-room-glance__frame {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* -----------------------------------------------------------------------
 * 16.4 THE CLIENT'S DESCRIPTION ON THE PARCHMENT BAND. vesper.md 4.4.
 *
 * Nothing new is declared for the type. The description inherits this
 * template's own body scale and cap, which is what it should be on the
 * reading band: Karma 16 / 17 / 18px at 1.65, Ink #1C1310, left aligned,
 * capped at 70ch by line 157. No drop cap, no lead paragraph and no size
 * step on the first sentence: the twelve descriptions run from 26 to 325
 * words and a lead treatment would be the entire band on the short rooms.
 *
 * Contrast on the parchment, measured across every pixel of
 * /wp-content/uploads/2022/09/main-content-bg.jpg: the darkest pixel has
 * relative luminance 0.57365 and Ink against it is 10.85:1, the 0.1
 * percentile 12.48:1 and the median 15.74:1, against a 4.5:1 floor.
 *
 * Only the block's own margins are declared here. Paragraph spacing is the
 * band's `margin: 0 0 16px` with the last paragraph zeroed, so the Age or
 * price row below it sits at its own 16px and not at 32.
 * -------------------------------------------------------------------- */
.myth-room-glance__copy {
  margin: 0;
}

.myth-room-glance .myth-room-glance__copy p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------
 * 16.5 THE ONE ROW THAT IS LEFT OF THE DEFINITION LIST. vesper.md 4.7.
 *
 * One column at every width, unconditionally, because one row cannot have
 * two columns. This is later in source than both section 2's old
 * `repeat(2, ...)` rule and Fold's F4 tier, at equal specificity, and both
 * of those have been deleted where they stood rather than left to lose.
 * 11.4's 24px icon column and 84px term stay, and so does 11.4b's stand
 * down under 340.
 *
 * `margin: 16px 0 0` is the gap between the description above it and this
 * row, matching the price line's own 16px, so the two form one practical
 * group at the foot of the copy column on the one room that has both.
 * -------------------------------------------------------------------- */
.myth-room-glance__dl {
  grid-template-columns: 1fr;
  column-gap: 0;
  margin: 16px 0 0;
}

/* MANUAL-28. The CTA closes the fact list at the foot of the copy column,
   on every room including the one row of the old list this replaces, so
   its own margin is set against the dl's rows rather than the copy block:
   24px, a step above the 16px group-to-group rhythm the dl and the
   description already use, because a button is the end of the section,
   not one more fact in its list. */
.myth-room-glance__cta {
  margin: 24px 0 0;
}

/* -----------------------------------------------------------------------
 * 16.6 THE FAQ TAIL ROW NOW CARRIES THREE LINKS.
 * Coordinator ruling 2 on item 6, marlowe.md 4.4.
 *
 * The deleted before you book band held the template's only /gillingham/
 * and /team-building/ anchors, so they are rehomed beside the link this
 * row already had. One link became three, which turns a paragraph with one
 * hit box in it into a row of adjacent tap targets, and that is the only
 * reason this block exists.
 *
 * Fold's F6 gives each of these links `padding-block: 10px`, which makes
 * the hit box 45px tall against a 25px line box. Two padded inline boxes
 * on consecutive lines would then sit closer than the 8px adjacent target
 * floor F5 was written to hold, and two on one line would sit at whatever
 * the space character happens to be. So the row is a flex row with an
 * explicit gap: 24px between two targets on one line, 8px between two
 * targets on consecutive lines, both at or above the floor at every width.
 *
 * wrap, not nowrap: at 390 the three do not fit on one line in either
 * face, and a row that has to wrap must be allowed to. Nothing else about
 * the band changes, and the row keeps its own `margin: 24px 0 0` and its
 * White colour from section 5.
 * -------------------------------------------------------------------- */
.myth-room-faq p.myth-room-faq__tail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  max-width: none;
}

/* =======================================================================
 * 17. MANUAL-23, the user's centring pass of 2026-09-08. APPENDED SECTION.
 *
 * Three blocks, one per surface: the hero type block, the facts band and
 * the FAQ block. Appended rather than edited in place for the reason
 * section 16 gives: every rule this section has to beat stays where it
 * was written, with its own comment intact, and this section wins by
 * specificity as well as by source order so a later reshuffle cannot
 * silently undo it.
 *
 * Proved on /the-game/ and /the-greatest-bank-heist/, the only two routes
 * on this template today. /lilith/ and /antidote/ are still on their old
 * Divi layouts and none of this reaches them.
 * ===================================================================== */

/* -----------------------------------------------------------------------
 * 17.1 THE HERO TYPE BLOCK IS CENTRED HORIZONTALLY AT EVERY WIDTH.
 *
 * The block keeps its measured caps (326 / 604 / 792) and its bottom
 * anchoring: only the horizontal placement and the text alignment change.
 * Before this section the block was flush left inside the 1200px inner,
 * so its midpoint sat 42px left of the hero's at 768 and 204px left at
 * 1440 (measured, loop/work/MANUAL-23/room-measure.mjs).
 *
 * The H1 takes the auto margins as well. Its own 720px cap is narrower
 * than the 792px block from 1024, so centring the text without centring
 * the box would leave the H1 36px left of everything under it. Nothing
 * about the two line reserve of section 13 changes: that reserve is
 * height, and this is inline placement.
 *
 * `.myth-room-hero p` (line 126) declares text-align left at 0-1-1, so
 * the eyebrow, the tagline and the meta line are restated here at 0-2-1,
 * which is the same shape the rest of this file already uses.
 * Scrims, media, the Ken Burns plate, the torch sweep, the reveal order
 * and the scroll cue are untouched.
 * -------------------------------------------------------------------- */
.myth-room-hero__content {
  margin-inline: auto;
  text-align: center;
}

/* REVIEW-21 (Sightline, 2026-09-11). The 12px margin-bottom declared on
   `.myth-room-hero__h1` above (section 13's H1-to-tagline token) never
   rendered: that selector is 0,1,0 and the `.myth-room-hero h1, ...
   { margin: 0 }` group forty lines up is 0,1,1 and wins, the same shape
   of bug this file's own comment above already documents for line-height
   on this exact element. Confirmed live (getComputedStyle) on both
   rebuilt rooms before this fix: marginBottom 0px on /the-game/ and
   /the-greatest-bank-heist/. Restated here at 0,2,0, the same rule that
   already centres the H1. */
.myth-room-hero .myth-room-hero__h1 {
  margin-inline: auto;
  margin-bottom: 12px;
}

.myth-room-hero p.myth-room-eyebrow {
  text-align: center;
}

.myth-room-hero p.myth-room-hero__tagline {
  text-align: center;
}

/* The meta line is a grid of one column under 768 (section 16.2) and a
   wrapping flex row from 768, so it needs both: text-align for the grid
   cells and justify-content for the flex line. */
.myth-room-hero p.myth-room-hero__meta {
  justify-content: center;
  text-align: center;
}

.myth-room-hero .myth-room-hero__actions {
  justify-content: center;
}

/* -----------------------------------------------------------------------
 * 17.2 THE FACTS BAND: THE COLUMN AND THE POSTER SIT ON A SHARED VERTICAL
 * CENTRE, ITS TEXT IS LEFT-ALIGNED. AN EXPLICIT EXCEPTION TO THE SITEWIDE
 * ALIGNMENT RULE.
 *
 * `align-items` is declared at 1024, NOT at 768, because 768 is not where
 * this band splits. Section 16.3 moved the split to 1024 and gave its two
 * measured reasons; between 768 and 1023 the band is a single stacked
 * column with the poster last, and a cross axis alignment on a one column
 * grid aligns nothing. Section 2's `align-items: start` at 768 is left
 * exactly where it is and this rule wins from 1024 on source order at
 * equal specificity. This half of the section is UNCHANGED by MANUAL-29:
 * it is the column's position relative to the poster, not text alignment.
 *
 * MANUAL-33 (2026-09-11, the user's own instruction, client feedback that
 * the poster read small) changed this declaration's value from `center`
 * to `stretch`: the facts column and the poster's frame matched heights
 * exactly, with the poster's own `object-fit: cover` filling whatever
 * height that came to, instead of the poster sitting at its own
 * aspect-ratio height and being centred against a taller or shorter
 * column. This is the ONE place that value is declared.
 *
 * MANUAL-36 (2026-09-12, the user's own correction) changes it back to
 * `center`, reversing MANUAL-33's `stretch`. The height-matching rules
 * `stretch` depended on (`height: 100%` and `min-height: 0` on the frame,
 * `position: absolute` and `height: 100%` on the poster) are DELETED, not
 * just stood down, in the MANUAL-33 section above this one; see that
 * section's own comment for why the underlying assumption was wrong. With
 * the poster back at its own natural `aspect-ratio: 2 / 3` height, the two
 * columns now sit at their own heights and `center` lines each one up on
 * its own vertical midpoint against the other, whichever is taller.
 *
 * MANUAL-29 (2026-09-11, the user's explicit instruction) REVERSES the
 * text-alignment half of this section, which MANUAL-23 (2026-09-09,
 * "room template centring") wrote as:
 *
 *   "17.2 THE FACTS BAND: THE COLUMN CENTRES ON THE POSTER, AND ITS TEXT
 *   CENTRES IN THE COLUMN. [...] The text alignment is unconditional, so
 *   the stacked tiers at 390 and at 768 to 1023 read the same way as the
 *   split one, with the facts first and the poster last in both. [...]
 *   The 120px min-width on the term (section 2, at 768) stands down
 *   inside this scope. It exists so values form a scannable column, and a
 *   group that is centred as a pair has no column to form; left in place
 *   it would push every pair off centre by half of its own slack."
 *
 * This is now a RECORDED EXCEPTION to the alignment rule the user set on
 * 2026-09-10 (`.claude/agents/sightline-visual-qa.md`, rule 2: "A
 * single-column text block that runs the full measure of a band [...] is
 * centred, heading and paragraph together"), which Sightline writes into
 * docs/PAGE-TEMPLATE-LAWS.md section 13 at MANUAL-25 and would otherwise
 * apply here; the same note is added there so a future pass does not
 * silently re-centre this block. The heading, the client description
 * paragraphs, the fact list rows and the CTA button all inherit their
 * alignment from `.myth-room-glance__facts`, none has a rule of its own,
 * so left-aligning that one selector (and the two that read its own text
 * or its own row layout) covers all four.
 *
 * The paragraph's auto inline margins are dropped with the centring: a
 * left-aligned block flush to its own left edge does not need them, and a
 * capped 70ch block with margin-inline: auto but text-align: left would
 * still SIT centred in the column even while its text ran left, which is
 * not what a left-aligned reading column looks like.
 *
 * The 120px `min-width` on the term, section 2's original rule, is
 * RESTORED (not merely left alone: it was explicitly stood down for the
 * centred pair above) at the same 768 breakpoint and the same 120px
 * section 2 measured, now that the list is a left-aligned, scannable
 * column again and has a column for it to form.
 *
 * The dl row keeps its full width bottom divider; its content now starts
 * at the row's own left edge instead of centring inside it.
 * -------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .myth-room-glance__grid {
    align-items: center;
  }
}

.myth-room-glance .myth-room-glance__facts {
  text-align: left;
}

.myth-room-glance .myth-room-glance__facts p {
  text-align: left;
}

.myth-room-glance .myth-room-glance__row {
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .myth-room-glance .myth-room-glance__term {
    min-width: 120px;
  }
}

/* -----------------------------------------------------------------------
 * 17.3 THE FAQ BLOCK IS CENTRED IN ITS BAND, AND SO IS ITS HEADING GROUP.
 *
 * Section 5 caps every child of the inner at 780px from 1024 and leaves
 * them flush left, which put the band's whole content 210px left of the
 * band's midpoint at 1440. The auto inline margins centre that 780px
 * block; the cap itself, the band's asymmetry budget and the Charcoal
 * ground are unchanged.
 *
 * Centred: the H2 (an eyebrow and a 64px Gold rule stood above it until
 * REVIEW-03 removed both) and the tail row, which is a flex row from
 * section 16.6 and therefore takes justify-content rather than
 * text-align.
 *
 * NOT centred, deliberately: the accordion. Question buttons and answer
 * paragraphs keep the left alignment they already have, because the panel
 * text is running prose and the questions are a scannable list.
 * -------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .myth-room-faq__inner > * {
    margin-inline: auto;
  }

  /* The H2 needs its own line at 0-2-0. The shared heading reset at line
     86 declares `margin: 0` on `.myth-room-faq h2` at 0-1-1, which beats
     the child rule above and left the H2 alone at the block's left edge
     with everything else already centred (measured: heading midpoint 510
     against the band's 720 at 1440). */
  .myth-room-faq .myth-room-faq__heading {
    margin-inline: auto;
  }
}

.myth-room-faq .myth-room-faq__heading {
  text-align: center;
}

.myth-room-faq p.myth-room-faq__tail {
  justify-content: center;
}

/* =======================================================================
 * 18. REVIEW-03, the eyebrow pass of 2026-09-09. APPENDED SECTION.
 *
 * The site's eyebrows are gone (review A2, questions file answer 1, option
 * (a)). The room hero's venue line is the single named exception (review
 * F1) and it is kept LARGER and MORE SPACED so it reads as a fact line of
 * its own rather than as a kicker glued to the H1.
 *
 * Scoped to the hero alone, and deliberately not written back into the
 * four selector atom in section 0: the glance, FAQ and book eyebrows are
 * removed markup, and the one line still rendered on this template should
 * be declared in one place that says what it is.
 *
 * `padding-bottom: 0` is not housekeeping. Divi declares
 * `p { padding-bottom: 1em }` globally at 0-0-1, which nothing in this
 * theme accounts for, so the gap under this line has always been
 * `1em + margin`: 27px at 390 and 28px from 768, not the 16px section 0
 * declares. Zeroing it puts the whole gap in one value that does not move
 * when the font size does.
 *
 * `color` is restated here because `.myth-eyebrow` in css/myth-bands.css
 * declared Gold at 0-1-0 and that stylesheet is enqueued BEFORE this one
 * on a room route. White had been winning on source order alone. Measured
 * against the lightest pixel of the plate under this line, White is
 * 9.84:1 / 8.44:1 / 6.01:1 on /the-game/ and 11.97:1 / 9.24:1 / 5.23:1 on
 * /the-greatest-bank-heist/; Gold is 4.48 / 3.85 / 2.74 and 5.45 / 4.21 /
 * 2.39 and fails 4.5:1 at 768 and 1440 on both. Gold is not an option for
 * this line at any width. The Gold rule itself is deleted from
 * css/myth-bands.css in the same commit, after this section landed.
 *
 * Tracking falls from 0.18em to 0.16 / 0.15 / 0.14 as the size rises, so
 * the absolute letter gap stays at 2.24 to 2.25px, where it already sits
 * at 1.98 to 2.16px. The line reads bigger, not wider.
 *
 * The hero type block is bottom anchored, so all of this grows the block
 * UPWARD: 8.89px at 390, 15.90px at 768, 17.20px at 1440. The H1 box top
 * is byte identical before and after at every width on both routes
 * (407.34 / 473.05 / 558.31 and 407.33 / 473.05 / 491.11), so section 13's
 * H1 reserve, the tagline, the meta row and the button do not move and
 * this change has no CLS entry.
 *
 * Proved on /the-game/ and /the-greatest-bank-heist/, the only two routes
 * on this template today. The ten rooms still on their old Divi layouts
 * inherit it as each is rebuilt (questions file answer 8).
 *
 * Spec: loop/work/REVIEW-03/vesper.md sections 2, 3.2 and 4.
 * ===================================================================== */

.myth-room-hero p.myth-room-eyebrow {
  margin: 0 0 32px;
  padding-bottom: 0;
  font-family: Karma, serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  max-width: none;
}

@media (min-width: 768px) {
  .myth-room-hero p.myth-room-eyebrow {
    margin-bottom: 40px;
    font-size: 15px;
    letter-spacing: 0.15em;
  }
}

@media (min-width: 1024px) {
  .myth-room-hero p.myth-room-eyebrow {
    font-size: 16px;
    letter-spacing: 0.14em;
  }
}

/* =======================================================================
 * 19. R04: THE HERO META ICONS SIT ON THE LABEL'S CAP CENTRE.
 * Review A1 and F10. Appended, per this file's convention; section 16.2
 * keeps its geometry and this section only corrects where the glyph
 * lands inside it.
 *
 * Two faults, both measured at 390, 768 and 1440 in Chromium and WebKit
 * (loop/work/REVIEW-04/before.json), and only the first is a stylesheet's
 * to fix:
 *
 *   1. THE SLOT. `align-items: center` on the chip centres the 18px icon
 *      box on the label's LINE box, and a line box is centred on the
 *      font's ascent and descent, not on the band the eye reads, which
 *      for this row is baseline to cap height. For Karma the gap between
 *      those two centres is (cap - (ascent - descent)) / 2, which
 *      measured 2.16px at 13px, 2.25px at 14px and 2.34px at 15px, the
 *      three sizes section 16.2's meta line takes. That is 0.155em to
 *      within a rounding, so one em value carries all three widths and
 *      both engines: residuals +0.15 / +0.08 / +0.02 in Chromium and
 *      +0.08 / -0.24 in WebKit, worst case 0.24px.
 *
 *   2. THE DRAWING. The three glyphs were not on a common optical centre
 *      inside their own 24 viewBox: the clock's ink is centred on 12, the
 *      players' on 12.5 and the intensity gauge's on 14, so at 18px they
 *      landed 0, 0.38 and 1.50px apart from each other whatever this
 *      stylesheet did. That is the viewBox disagreeing with the glyph box
 *      and it is fixed where it is drawn, in myth_room_icon()
 *      (inc/bands-room.php), by moving each viewBox's origin onto its own
 *      ink. No path, no stroke, no size and no colour changed.
 *
 * Paint only: a transform on a flex item changes no box, so the meta
 * line's height, its grid rows under 768 and the hero's height are all
 * exactly as they were.
 * ===================================================================== */

.myth-room-hero__icon {
  transform: translateY(-0.155em);
}

/* =======================================================================
 * REVIEW-06 (coordinator ruling, 2026-09-09). 8px of extra bottom padding
 * on THIS band, between 768 and 1023 only.
 *
 * The gift strip's card is centred on its media cell and pokes above the
 * strip's top edge. Retiring the per-room gift heading took the room strip
 * at 768 from 231.56px to 203.97px, so that poke grew from 15.65px to
 * 29.45px, and it now reaches the band above. In WebKit, which places this
 * band's own box 40.00px lower against the strip than Chromium does (the
 * MANUAL-21 seam: the anonymous line box the whitespace text node inside
 * .et_pb_row makes is a different height per engine), the card's rotated
 * corner crossed the bottom 5.45px of the "Read all the FAQs" tail link's
 * 48.05px hit box at every width from 768 to just under 1000. The link's
 * glyphs were never touched, in either engine; what was at risk was up to
 * 5.45px of a tap target, because the strip paints at z-index 3.
 *
 * The band's bottom padding is the lever, not the card and not the media
 * cell: it moves the strip and its card down together and leaves the link
 * where it is, so the clearance grows by the whole 8px and nothing inside
 * the strip changes. Bounded to 768 to 1023 because that is the only range
 * where the poke and the link's position coincide: under 768 the layout
 * stacks and the tail link is far above, and from 1024 the band's 96px
 * padding already clears it (measured 43.19px at 1000 in Chromium and
 * 23.19px in WebKit before this rule).
 *
 * Scoped to .myth-room-faq, which exists on room routes only, so the
 * homepage and the two location routes cannot see it. Same specificity as
 * the page-wide padding rule in section 0 and later in the file, and a
 * longhand against that rule's shorthand, so it wins with no !important.
 * Measurements: loop/work/REVIEW-06/cortex.md section 19.
 * ===================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .myth-room-faq {
    padding-bottom: 72px;
  }
}

/* =======================================================================
 * 20. REVIEW-11. THE ROOM TEMPLATE PASS OF 2026-09-10. APPENDED SECTION.
 *
 * Section 16's rule, restated by 17 and 18: this file appends, it does not
 * edit in place, so the blocks these rules correct are left standing above
 * as the record of what was intended. Four items, all found by measuring
 * rather than by reading, all specced in loop/work/REVIEW-11/vesper.md.
 * No !important, no new colour value and no new spacing value.
 *
 * A fifth item was a deletion, not an addition: the .myth-room-glance__price
 * and .myth-room-glance__price-value blocks and the 17.2 rule that centred
 * them went with this commit, after every one of those selectors was proved
 * to match zero elements on /the-game/, /the-greatest-bank-heist/, /lilith/
 * and /antidote/. REVIEW-02 removed the markup on the user's answer 7(a);
 * this removes the rules that outlived it.
 * ===================================================================== */

/* -----------------------------------------------------------------------
 * 20.1 The three band headings' declared steps finally render.
 *
 * The heading reset at line 86 is .myth-room-glance h2 (and its two
 * siblings) at 0,1,1 and declares margin: 0. The blocks that carry each
 * band's intended step, .myth-room-glance__heading, .myth-room-book__heading
 * and .myth-room-faq__heading, are 0,1,0, so they have lost since T10 and
 * all three gaps have measured 0.00px at every width on both routes ever
 * since. These restate the SAME three numbers, 24 / 16 / 24, at 0,2,1, so
 * they win on class count with nothing overridden and no new value
 * introduced. Measured after: 24.00 / 16.00 / 24.00px at 390, 768, 1024 and
 * 1440 on both template routes.
 * -------------------------------------------------------------------- */
.myth-room-glance h2.myth-room-glance__heading {
  margin-bottom: 24px;
}

.myth-room-book h2.myth-room-book__heading {
  margin-bottom: 16px;
}

.myth-room-faq h2.myth-room-faq__heading {
  margin-bottom: 24px;
}

/* -----------------------------------------------------------------------
 * 20.2 The booking head joins MANUAL-23's centring pass.
 *
 * The head is capped at 700px and centred as a box; the card is capped at
 * 900px and centred. Both were text-align: left, so from 1024 the heading
 * started 100px inside the card's own left edge, one directly under the
 * other, reading as a mistake rather than as an indent. The user's
 * MANUAL-23 pass centred the hero type block (17.1), the facts column
 * (17.2) and the FAQ heading and tail (17.3) and this is the one block it
 * did not reach, which left the page reading centred, centred, LEFT and
 * adrift, centred at 1440.
 *
 * The paragraph needs its own line and is not belt and braces:
 * .myth-room-book p at 0,1,1 declares text-align: left and max-width: 70ch,
 * and a declaration always beats an inherited value. The auto inline
 * margins centre that 70ch box itself. Same shape as 17.2, so the file
 * gains no new pattern.
 *
 * The actions row covers the branches neither template route renders today,
 * the three coming-soon rooms and the five Maidstone rooms, which draw one
 * button instead of a card and would otherwise hang left under a centred
 * heading. Specced now so the branch is not left inconsistent; it is
 * measured at the first such rebuild, not here.
 * -------------------------------------------------------------------- */
.myth-room-book .myth-room-book__head {
  text-align: center;
}

.myth-room-book .myth-room-book__head p {
  margin-inline: auto;
  text-align: center;
}

.myth-room-book .myth-room-book__actions {
  justify-content: center;
}

/* -----------------------------------------------------------------------
 * 20.3 The landing has a focus treatment.
 *
 * section#book carries tabindex="-1", so activating Book My Escape from the
 * keyboard moves focus to it and :focus-visible matches, but Divi's
 * sitewide :focus { outline: 0 } means NOTHING PAINTS: a keyboard visitor is
 * teleported about 1,340px down the page with no indication of where they
 * landed. After a pointer click :focus-visible does not match, which is
 * right, and this rule stays dark.
 *
 * The ring goes on the box the visitor was sent to, never on the band: the
 * band is roughly 2,000px tall and full bleed, so a rule around it reads as
 * a page border rather than as a landing. Gold because the ground is Ink and
 * White would read as a second card edge; Gold on Ink is 8.32:1 and is
 * already this template's on-dark ring for anchors (section 5). outline
 * creates no containing block and no clip, so the frozen widget's guardrail
 * list is untouched and no box moves: the card measures 358 x 1767 at 390
 * and 900 x 1768.5 at 1440 in all three states. 4px of offset so the ring
 * does not sit on the card's own 1px border. The actions row is named too,
 * so the coming-soon and Maidstone branches, which have no card, still show
 * where focus landed.
 * -------------------------------------------------------------------- */
.myth-room-book:focus-visible {
  outline: none;
}

.myth-room-book:focus-visible .myth-room-book__card,
.myth-room-book:focus-visible .myth-room-book__actions {
  outline: 2px solid #D4A94A;
  outline-offset: 4px;
}