/* ==========================================================================
   RTNS additive CSS — T1b (Director dispatch, plan §Workstream A / T1b row)
   NEVER edits donor/site styles.css. Loaded AFTER styles.css (and after
   donor script.js, before site.js — site.js wraps window.openRtEvent, see
   qa/refs/T1b-notes.md "Include order"). Domi's design system (Georgia
   display / Arial body, gold #b98132 / #d8ad63, paper #fffdf8 / #f6f2ea) is
   canonical for this file; every rule below is scoped to a named selector
   or a body/page class, never a blanket rewrite.
   ========================================================================== */

/* Verify-phase fix (2026-09-25, defect 7 -- palette): named tokens for the
   colours this file introduced (nav/footer/marquee/waitlist chrome), each
   with a one-line reason. Rendered colours unchanged. See DESIGN-PROMPT
   §3 for the dated changelog entry. */
:root {
  --rt-live-dot: #e3342f; /* EXPO REAL pill's small "live" dot */
  --rt-chrome-border: #333333; /* waitlist dialog / CTA hairline borders on dark chrome */
  --rt-chrome-field-bg: #161918; /* waitlist form input background */
  --rt-chrome-muted: #b9b6ae; /* waitlist/teaser secondary text on dark chrome */
  --rt-chrome-body: #d4d0c8; /* footer/teaser body copy on dark chrome */
}

/* nav
   ------------------------------------------------------------------------
   Her .navlinks already hide at max-width:1100px (styles.css L761) and
   .actions .light hides at max-width:700px (styles.css L799) — two
   DIFFERENT breakpoints. The hamburger appears at the same 1100px break
   as .navlinks, matching the point where the inline links actually
   disappear (not only at phone width). .logo min-width:210px is released
   at the same break so the mast doesn't force horizontal crowding once
   the nav links are gone. See notes "Nav breakpoints — verified" for the
   full trace.
   -------------------------------------------------------------------- */

.mast {
  --nav-h: 76px; /* mirrors her .nav{height:76px} (styles.css L52) */
}
@media (max-width: 700px) {
  .mast {
    --nav-h: 64px; /* mirrors her .nav{height:64px} override, styles.css L791 */
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid #666; /* her .btn.light border-color, styles.css L110 */
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:hover {
  border-color: var(--gold2);
}
.nav-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (max-width: 1100px) {
  .logo {
    min-width: 0;
  }
  .nav-toggle {
    display: inline-flex;
  }
}

.nav-panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h, 76px);
  height: calc(100vh - var(--nav-h, 76px));
  height: calc(100dvh - var(--nav-h, 76px)); /* dvh with vh fallback, per brief */
  background: var(--dark); /* her .mast bg, styles.css L48 */
  color: #fff;
  z-index: 150; /* above .mast (z-index:100, styles.css L50) */
  overflow-y: auto;
  padding: 28px 34px 40px;
  border-top: 1px solid #262926;
}
.nav-panel.is-open {
  display: block;
}
.nav-panel .panel-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.nav-panel .panel-links a {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.3;
  padding: 12px 0;
  color: #eee9e1;
  border-bottom: 1px solid #262926;
}
.nav-panel .panel-links a:hover,
.nav-panel .panel-links a.active {
  color: var(--gold2);
}
/* Override her `.actions .light{display:none}` (max-width:700px, styles.css
   L799) INSIDE the open panel only — both her buttons stay visible here
   regardless of viewport width, per brief item 1. */
.nav-panel .actions {
  flex-wrap: wrap;
  gap: 10px;
}
.nav-panel .actions .light {
  display: inline-flex !important;
}

html.nav-panel-open,
body.nav-panel-open {
  overflow: hidden; /* scroll-lock only while the panel is open, set/unset in site.js */
}

/* type
   ------------------------------------------------------------------------
   Base .kicker rule (mirrors .eyebrow, styles.css L119-126 — six-plus Edge
   .kicker instances render unstyled today, none of the scoped overrides
   that DO exist, e.g. `.pulse-v4 .kicker`/`.ask-v4 .kicker`, define a base;
   see notes). .demo-note lifted 8px→11px, dark hosts keep her original
   #718c83, paper hosts remapped darker for AA. Gold-on-paper text-color
   remap (#b98132→#8c6a32); dark-surface gold (#d8ad63 / #d9aa5d etc.)
   is untouched — full trace + surface-by-surface reasoning in notes.
   -------------------------------------------------------------------- */

[id] {
  scroll-margin-top: 80px;
}

.kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
}

.demo-note {
  font-size: 11px;
  line-height: 1.4;
}
/* paper/light-surface .demo-note hosts (see notes "demo-note hosts"):
   darker so 11px still clears AA against #fffdf8/#f6f2ea/#ece5d9/#f1ebdf. */
.card .demo-note,
.cre-calendar-section .demo-note,
.event-v2-section.soft .demo-note,
.edge-cal-card .demo-note {
  color: #5f7a71;
}

/* Gold text-color remap — #b98132 used as text on paper/light surfaces
   (verified: none of these selectors sit inside a dark component; her
   dark overrides — .event-v2-copy .eyebrow, .pulse-v4 .kicker,
   .ask-v4 .kicker — have higher specificity and are untouched). */
.eyebrow,
.more,
.card .tag,
.stack-item .k,
.latest-item small,
.compact-news .cat,
.section-rule a,
.feed-item .cat {
  color: #8c6a32;
}

/* Named-selector readability lifts ONLY (no blanket rule). Her literal
   ".hero-meta small" and ".edge-cal-grid small" don't exist as written —
   the real DOM/CSS selectors are `.hero-stat span` (nested inside
   .hero-meta) and `.edge-cal-card small` (nested inside .edge-cal-grid);
   mapped 1:1 to what she actually built, see notes "Selector name fixes". */
.latest-time,
.cre-fit,
.hero-stat span {
  /* all ≥9px today (9,9,10) — lift 650px-and-below only */
}
@media (max-width: 650px) {
  .latest-time {
    font-size: 11px;
  }
  .cre-fit {
    font-size: 11px;
  }
  .hero-stat span {
    font-size: 11px;
  }
}
/* .edge-cal-card small and .home-cal-item small are 8px today (under the
   9px floor) — lifted on desktop too, per the brief's own exception. */
.edge-cal-card small {
  font-size: 10px;
}
.home-cal-item small {
  font-size: 10px; /* color #8fa198 unchanged: already on a dark card, AA-safe */
}

/* modal
   ------------------------------------------------------------------------
   All markup/behaviour here is HERS (.cre-modal / #creEventModal /
   openRtEvent in donor/script.js) — site.js wraps her open/close functions
   at runtime; this block only raises the layer and enlarges the close
   target. z-index:110 clears her sticky .mast (z-index:100).
   -------------------------------------------------------------------- */

.cre-modal {
  z-index: 110;
}
.cre-modal-close {
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
}

/* buttons
   ------------------------------------------------------------------------
   `.round-btn.ghost{color:#fff}` (styles.css L1297) is unscoped — fine on
   her dark .event-v2-hero, invisible on the three light/paper hosts where
   she also uses it (verified: .event-v2-section.soft #f1ebdf,
   .cre-calendar-section #ece5d9, .cre-modal-panel #f9f5ee — see notes).
   -------------------------------------------------------------------- */

.event-v2-section.soft .round-btn.ghost,
.cre-calendar-section .round-btn.ghost,
.cre-modal-panel .round-btn.ghost {
  color: var(--ink);
}

/* Video facade primitive for B7 (session/article templates). Contract:
   <div class="yt-lite" data-id="VIDEO_ID" data-title="..."
        style="--poster:url(...)">
     <button class="yt-lite-play" aria-label="Play: TITLE"></button>
   </div>
   plus a sibling <a> "Watch on YouTube" that B7 adds outside this block. */
.yt-lite {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--ink);
  background-image: var(--poster, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.yt-lite iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-lite-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 999px; /* rounded gen2 idiom, matches .round-btn radius family */
  border: 0;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.yt-lite-play:hover {
  background: var(--gold2);
}
.yt-lite-play svg {
  width: 20px;
  height: 20px;
  margin-left: 3px; /* optical centring of the play triangle */
  fill: currentColor;
}

/* calendar
   ------------------------------------------------------------------------
   Fit-score truth on public pages: T1a sets `body.public` on every page
   except edge.html (see notes "body.public contract"). On Edge these
   three blocks stay, visibly illustrative. */

body.public .cre-fit,
body.public .cre-modal-score,
body.public .cre-modal-section.fitbox {
  display: none;
}

/* a11y
   ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.round-btn:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
.cre-cal-card:focus-visible,
.yt-lite-play:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hero collage at ≤650: her .event-collage has no overflow rule of its own
   (styles.css L1300-1302) but the absolutely-positioned .event-poster
   tiles can clip against an ancestor at narrow widths — defensive
   overflow:visible plus the chip-legibility bump the brief asks for. */
@media (max-width: 650px) {
  .event-collage {
    overflow: visible;
  }
  .event-floating {
    font-size: 11px;
  }
}

/* session — reserved for B7 (event.html / article.html session blocks) */

/* article — reserved for B7 (article.html body/quote-panel scale) */

/* P4.1 defect 4 (2026-09-15): footer links are 11px/1.4 = 15px tall, under the
   24px pointer-target floor. Padding grows the hit area without overlapping the next link
   (a negative margin made the targets overlap and fail again); the stack is about 10px looser per link. */
footer a {
  padding: 5px 0;
}

/* ==========================================================================
   Wave 2 -- content-page fillers (M2's content/pages/{dives,about,team/*}/
   page.json): .rt-note, .rt-figure(--16x9/--4x5/--3x2/--2x3), .rt-grid-2,
   .rt-text, .rt-logo-row. Every one sits inside an existing donor class
   (.brief-box, .card, .feed-item, figure) -- fillers only, per the Dive
   design prompt's own "clone, don't invent" rule extended to these pages.
   ========================================================================== */

/* .rt-note -- a .brief-box with no intrinsic max-width issue (donor's
   .brief-box already spans its container), kept here as a hook for a
   slightly tighter top rule so it doesn't look identical to an inline
   dive-editor box. */
.rt-note {
  border-top-width: 3px;
}

/* .rt-figure -- wraps <picture>/<img>, which already carry the correct
   intrinsic width/height attributes (no CLS). The aspect-ratio modifiers
   force a CONSISTENT crop for card/grid layout regardless of the source
   image's exact pixel ratio; object-fit:cover never distorts. */
.rt-figure {
  margin: 0;
  overflow: hidden;
  line-height: 0;
}
.rt-figure img,
.rt-figure picture,
.rt-figure picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rt-figure--16x9 {
  aspect-ratio: 16 / 9;
}
.rt-figure--4x5 {
  aspect-ratio: 4 / 5;
}
.rt-figure--3x2 {
  aspect-ratio: 3 / 2;
}
.rt-figure--2x3 {
  aspect-ratio: 2 / 3;
}
.rt-figure figcaption,
figure.rt-figure figcaption {
  line-height: 1.4;
}

/* .rt-grid-2 -- two .card articles side by side (about's team section,
   team pages' two-up "stories" section). */
.rt-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 700px) {
  .rt-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* .rt-text -- a .feed-item with no image (the "Format"/method list on the
   team pages): drop the donor 165px image column so the text runs full
   width instead of leaving a blank gutter. */
.feed-item.rt-text {
  grid-template-columns: 1fr;
}

/* .rt-logo-row -- a flex row of partner/media-brand marks ("Eight
   conference brands", "members" bands). White-on-dark PNG variants
   (*-white.png), so no filter is applied; height-capped, width auto. */
.rt-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-logo-row li {
  display: flex;
  align-items: center;
}
.rt-logo-row img {
  height: 26px;
  width: auto;
  display: block;
}
@media (max-width: 700px) {
  .rt-logo-row {
    gap: 18px;
  }
  .rt-logo-row img {
    height: 20px;
  }
}

/* Wave 2, M7 fix-list F2/LOW sweep (qa/2026-09-25-defect-sweep/fix-list.md):
   .rtns-article-body / .rtns-article-video are shared by rtns-event.css
   (PTC26 + Dive articles both use the class), so the fix lives HERE
   (rtns.css, loaded before rtns-event.css but text-wrap is otherwise
   unset there, so this value stands) rather than editing rtns-event.css,
   which is out of M1's owned-paths list. Better wrap only, no layout
   change -- the 720px/780px max-width stays wherever each file set it. */
.rtns-article-body,
.rtns-article-video {
  text-wrap: pretty;
}

/* sr-only -- visually hidden but readable by assistive tech (marquee's
   accessible <ul> twin, waitlist status region's default text). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Active-route styling drives off aria-current ONLY (not a .active class) so
   the nav identity check (P5 M1 brief S5.2, "active states can use
   aria-current only") sees byte-identical markup across every route. */
.navlinks a[aria-current="page"] {
  color: var(--gold2);
}
.nav-panel .panel-links a[aria-current="page"] {
  color: var(--gold2);
}

/* nav -- P5 M1 Wave 1 (ONE nav-chrome partial, every route). EXPO REAL 2026
   text pill: no organiser logo (Alex's decision, plan "Pass 5"), a small
   red live dot, white text. */
.rt-expo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--rt-chrome-border);
}
.rt-expo-pill:hover,
.rt-expo-pill:focus-visible,
.rt-expo-pill[aria-current="page"] {
  border-color: var(--gold2);
  color: var(--gold2);
}
.rt-expo-pill-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--rt-live-dot);
  box-shadow: 0 0 0 0 rgba(227, 52, 47, 0.7);
  animation: rt-expo-pill-pulse 2s ease-out infinite;
}
@keyframes rt-expo-pill-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(227, 52, 47, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(227, 52, 47, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(227, 52, 47, 0);
  }
}
@media (max-width: 1100px) {
  .rt-expo-pill {
    display: none; /* the pill's own page ("Home") is still in the mobile panel */
  }
}

/* waitlist CTA + shimmer -- ::after gradient sweep, transform only (no
   layout shift), 5s, once per visit (site.js sets .is-shimmer via the
   rt_wl_shimmer sessionStorage key). Tap target >=44x44 (brief hard don't). */
.rt-waitlist-cta {
  position: relative;
  overflow: hidden;
  min-height: 44px;
}
.rt-waitlist-cta.is-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: rt-waitlist-shimmer 5s ease-out 1;
  pointer-events: none;
}
@keyframes rt-waitlist-shimmer {
  0% {
    transform: translateX(-120%);
  }
  40% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rt-waitlist-cta.is-shimmer::after {
    animation: none;
    display: none;
  }
}

/* waitlist dialog */
.rt-waitlist-dialog {
  border: 1px solid var(--rt-chrome-border);
  background: var(--dark);
  color: #fff;
  padding: 0;
  max-width: 420px;
  width: calc(100vw - 48px);
}
.rt-waitlist-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.rt-waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  position: relative;
}
.rt-waitlist-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.rt-waitlist-close:hover,
.rt-waitlist-close:focus-visible {
  color: var(--gold2);
}
.rt-waitlist-form h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  margin: 0;
}
.rt-waitlist-intro {
  font-size: 13px;
  color: var(--rt-chrome-muted);
  line-height: 1.5;
  margin: 0;
}
.rt-waitlist-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rt-chrome-muted);
}
.rt-waitlist-req {
  color: var(--gold2);
}
.rt-waitlist-field input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rt-chrome-border);
  background: var(--rt-chrome-field-bg);
  color: #fff;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}
.rt-waitlist-field input:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 1px;
}
.rt-waitlist-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.rt-waitlist-submit {
  width: 100%;
}
.rt-waitlist-status {
  font-size: 12px;
  color: var(--rt-chrome-muted);
  margin: 0;
  line-height: 1.5;
}
.rt-waitlist-status a {
  color: var(--gold2);
}

/* launch teaser (Wave 2, M6b) -- a dismissible bottom panel, never a hard
   gate; the article stays fully readable behind/above it. Shown once per
   visit (site.js, sessionStorage rt_teaser_shown), dismissed with "Keep
   reading". [hidden] is the default state set by the template; site.js
   removes it (never inline style) after the once-per-visit check. */
.rt-teaser {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 140;
  background: var(--dark);
  color: #fff;
  border-top: 1px solid var(--rt-chrome-border);
}
.rt-teaser[hidden] {
  display: none;
}
.rt-teaser-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 48px 22px 20px;
  position: relative;
}
.rt-teaser-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold2);
  margin: 0 0 6px;
}
.rt-teaser-inner h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  margin: 0 0 8px;
}
.rt-teaser-inner p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--rt-chrome-body);
  line-height: 1.5;
}
.rt-teaser-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rt-teaser-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #444;
  background: transparent;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.rt-teaser-dismiss:hover,
.rt-teaser-dismiss:focus-visible {
  border-color: var(--gold2);
  color: var(--gold2);
}
@media (max-width: 700px) {
  .rt-teaser-inner {
    padding: 18px 44px 18px 16px;
  }
}

/* Verify-phase fix (2026-09-25, defect 2): .section.dark sets color:white
   (donor styles.css), which .brief-box (a light cream card, #eee7db) never
   overrides -- ghost white-on-cream text at 1.23:1 on both team pages'
   closing "book" band. Ink text restores the card to its normal (light-
   surface) contrast; nothing else in the dark band is touched. */
.section.dark .brief-box,
.section.dark .brief-box h3,
.section.dark .brief-box li,
.section.dark .brief-box p,
.section.dark .brief-box a {
  color: var(--ink);
}
.section.dark .brief-box a {
  text-decoration: underline;
}

/* Verify-phase fix (2026-09-25, defects 9): donor .btn is 42px tall
   (styles.css) at every width, and .logo img shrinks to 30px at <=700px
   with no padding on the <a> itself -- both under the 44px tap-target
   floor. Padding-only, no visible size change: .btn's own text/icon and
   .logo's own image keep their current rendered size. */
.btn {
  min-height: 44px;
}
@media (max-width: 700px) {
  .logo {
    min-height: 44px;
  }
}

/* Verify-phase fix (2026-09-25, defects 7/10 -- contrast): donor colours
   that read <4.5:1 (body) / <3:1 (large) on the light surfaces they
   actually render on. Every value below is picked to clear 4.5:1 on its
   OWN background(s), computed via the WCAG relative-luminance formula;
   donor styles.css stays frozen, everything here is an additive override. */
.newsletter p,
.newsletter-grid p {
  /* 4.42:1 -> 5.64:1 on the newsletter band's #ece3d6 (shared by /news/
     and every page with the newsletter band, incl. PTC26). */
  color: #5c574f;
}
.newsletter .demo-note,
.card .demo-note,
.cre-calendar-section .demo-note,
.event-v2-section.soft .demo-note,
.edge-cal-card .demo-note {
  /* extends the existing "demo-note hosts" darken list (was missing
     .newsletter, 2.86:1 there) with one value that clears 4.5:1 on every
     host background, incl. the news-body's white .demo-note a link. */
  color: #496359;
}
.news-body-grid .demo-note,
.news-body-grid .demo-note a,
.latest-rail .demo-note {
  color: #496359;
}
.latest-time {
  /* 3.19:1 on white -> darkened; own rule since donor never colours
     .latest-time at all (inherits an ambient grey). */
  color: #5e564c;
}
.meta {
  /* 3.55-3.61:1 on white/paper -> 5.67:1. Bare .meta only -- more specific
     dark-surface rules (.dive-hero .meta, .edge-op .meta) already win the
     cascade and are untouched. */
  color: #6b655c;
}
.section.dark .meta {
  /* the darkened light-surface value above regresses .meta's OWN already-
     passing dark-surface instances (donor #8c867d was 5.37:1 there) --
     lightened back up for this dark host specifically. */
  color: #b4afa6;
}
.event-v2-section.soft .event-v2-head p {
  /* 4.18:1 -> 6.19:1 on the .soft band's #f1ebdf. */
  color: #5c554c;
}
.event-v2-section.soft .section-rule a,
.event-v2-section.soft .card .tag,
.event-v2-section.soft .eyebrow,
.event-v2-section.soft .more,
.event-v2-section.soft .feed-item .cat {
  /* the existing #8c6a32 gold-on-paper remap is 4.89:1 on #fff5ee but only
     4.19:1 on the .soft band's warmer #f1ebdf -- scoped darker value for
     that one background only. */
  color: #7a5c2c;
}
.foot-bottom {
  /* 4.37:1 -> 5.87:1 on the dark footer's #101210. */
  color: #8d918b;
}

/* /dives/ full-bleed hero (Alex's picked concept v2, 2026-09-25). Full
   16:9 on desktop (nothing cropped); a height cap kicks in under 700px so
   the section never eats the whole first viewport on a phone -- the
   diver sits in the image's own upper third, so object-position stays
   biased toward the top at every width (never crops the diver out). */
.rt-dive-hero {
  padding: 0;
  border-bottom: 0;
}
.rt-dive-hero-figure {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  line-height: 0;
}
.rt-dive-hero-figure picture,
.rt-dive-hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}
.rt-dive-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 13, 12, 0.92) 0%, rgba(11, 13, 12, 0.55) 32%, rgba(11, 13, 12, 0) 62%);
  pointer-events: none;
}
.rt-dive-hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 0 40px;
  /* Verify-phase fix (2026-09-25): the whole-IMAGE scrim above only
     guarantees darkness in the image's own bottom ~62% -- at narrow
     widths the heading wraps to 3 lines and its FIRST line can sit
     above that darkened band, over a bright light-shaft, reading as low
     as 1.7:1. This second scrim is anchored to the COPY BLOCK'S OWN
     content height (not the image's), so it always covers exactly
     where the text is, however many lines it wraps to. */
  background: linear-gradient(to top, rgba(11, 13, 12, 0.97) 55%, rgba(11, 13, 12, 0.88) 100%);
}
.rt-dive-hero-copy .eyebrow {
  color: var(--gold2, #d8ad63);
}
.rt-dive-hero-copy h1,
.rt-dive-hero-copy p {
  color: #ffffff;
}
.rt-ai-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(11, 13, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 700px) {
  .rt-dive-hero-figure {
    aspect-ratio: auto;
    height: 62vh;
    max-height: 420px;
  }
  .rt-dive-hero-copy {
    padding: 18px 0 24px;
  }
}

/* footer fillers */
.rt-footer-grid {
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
button.rt-footer-waitlist {
  display: block;
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 11px;
  color: #a9a59e;
  margin: 7px 0;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
button.rt-footer-waitlist:hover,
button.rt-footer-waitlist:focus-visible {
  color: #fff;
}
.rt-footer-event-featured {
  color: var(--gold2) !important;
  font-weight: 700;
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.rt-footer-event-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold2);
  box-shadow: 0 0 0 0 rgba(216, 173, 99, 0.7);
  animation: rt-footer-pulse 2s ease-out infinite;
}
.rt-footer-event-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold2);
  border: 1px solid rgba(216, 173, 99, 0.55);
  padding: 2px 7px;
  white-space: nowrap;
}
@keyframes rt-footer-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(216, 173, 99, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(216, 173, 99, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(216, 173, 99, 0);
  }
}
@media (max-width: 980px) {
  .rt-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .rt-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* top marquee -- rendered at build time; absent-file = no element at all
   (build.py never emits an empty .rt-marquee shell). Pure-CSS pause on
   hover/focus; reduced motion swaps the animated track for a horizontal
   scroller with no animation. */
.rt-marquee {
  position: relative;
  background: var(--rt-chrome-field-bg);
  border-bottom: 1px solid #262926;
  color: var(--rt-chrome-body);
  font-size: 11px;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 44px; /* tap-target floor also governs the Methodology link's height (top:0;bottom:0) */
  padding-right: 90px; /* room for the fixed Methodology link */
}
.rt-marquee-viewport {
  overflow: hidden;
  width: 100%;
}
.rt-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: rt-marquee-scroll 60s linear infinite;
  will-change: transform;
}
.rt-marquee:hover .rt-marquee-track,
.rt-marquee:focus-within .rt-marquee-track {
  animation-play-state: paused;
}
.rt-marquee-item {
  display: inline-block;
  padding: 8px 28px;
  border-right: 1px solid #262926;
}
@keyframes rt-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.rt-marquee-methodology {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  min-height: 44px; /* the .rt-marquee border-bottom shaved 1px off a bare top:0/bottom:0 span */
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--dark);
  color: var(--gold2);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-left: 1px solid #262926;
  white-space: nowrap;
}
.rt-marquee-methodology:hover,
.rt-marquee-methodology:focus-visible {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .rt-marquee-track {
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .rt-marquee-viewport {
    overflow-x: auto;
  }
}

.rt-methodology-pending td {
  background: #fbeee0;
  color: #6c675e;
  font-style: italic;
}

/* marquee methodology page table (P5 M1 brief S2.8) */
/* Verify-phase fix (2026-09-25, defect 3): the 10-column table forced the
   whole PAGE wider than the viewport at 768/390/320 (page-level overflow,
   not a contained scroll). Wrapping it in a keyboard-focusable, labelled
   scroll region contains the overflow to the table itself. */
.rt-methodology-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 20px;
}
.rt-methodology-scroll:focus-visible {
  outline: 2px solid var(--gold2, #d8ad63);
  outline-offset: 2px;
}
.rt-methodology-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 0;
}
.rt-methodology-table th,
.rt-methodology-table td {
  border: 1px solid var(--line, #ddd5c9);
  padding: 8px 10px;
  text-align: left;
}