/* ============================================================
   518 Official — MEDIA page layout
   css/pages/media.css?v=6 — loads AFTER tokens.css + site.css.
   Page-scoped layout only; never restyles the shared shell.
   No :root, no shell-selector redefinitions. All brand values
   route through tokens (docs/RIZZ-BRAND.md) — cobalt is chrome,
   no amber here (commerce-only), neutral scrims only.

   V2 (real media): the page now carries 518 Events' own footage
   and photography. Two video contracts live here and they are
   NOT interchangeable:
     · CONTENT video (recap-518-01, has_audio true) — native
       <video controls>, poster-first, never autoplays. Styled by
       .md-feature-*. It is deliberately NOT a [data-vslot]: a
       clip with sound must never be wallpaper.
     · DECORATIVE video (the three silent clips) — the shared
       [data-vslot] contract: muted, looping, killed by the footer
       Pause control and by reduced motion.

   Motion contract (js/motion.js — do not rename these hooks):
     .pg-hero-title · .eyebrow · .lead · .hero-meta > li ·
     .pg-index                       → hero choreography (data-hero)
     .md-cycle[data-marquee] > ul    → seamless rail loop
       (li + li::before diamond geometry is mirrored by motion.js
        .mq-tail::after — keep the 7px / clamp values in sync)

   TOC:
   00 Page atoms
   01 Hero — "The night ends. The record doesn't."
   02 Lifecycle rail (marquee band)
   03 Ledger — countable facts
   04 Featured recap (content video + spec rail)
   05 Video wall (decorative vslots)
   06 Photography — albums, tiles, credit slot
   07 FACE-SAFE CROP LAW — object-position table
   08 Community — pipeline panel + honest intake
   09 Creators band
   ============================================================ */

/* ---------- 00 Page atoms ---------- */

/* Type craft — widow/orphan control on prose; balanced wraps on display */
.md-lead,
.md-album-note,
.md-pipe-desc,
.md-honest,
.md-creator-note { text-wrap: pretty; }

.md-h1,
#h-recap,
#h-video,
#h-photos,
#h-community,
#h-creators { text-wrap: balance; }

/* ---------- 01 Hero ---------- */
.md-hero {
  position: relative;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.md-hero .eyebrow { margin-bottom: var(--sp-5); }

.md-h1 {
  /* capped below --fs-hero: two poster lines must hold the 360px floor */
  font-size: clamp(1.95rem, 5vw, 3.8rem);
  line-height: 0.96;
}

.md-h1 .md-l1 { display: block; }

.md-h1 .md-l2 {
  display: block;
  margin-left: clamp(0.9rem, 4.5vw, 3.5rem);
}

/* decorative accent glyph only — carries no information */
.md-dot { color: var(--rizz-line); }

.md-lead {
  margin-top: var(--sp-6);
  max-width: 56ch;
}

/* Hero meta — the three wings of the library */
.md-meta {
  display: grid;
  gap: var(--sp-4);
  margin-top: clamp(2rem, 4.5vw, 3rem);
}

@media (min-width: 560px) {
  .md-meta { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
}

.md-meta li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--rizz-line);
}

.md-mk {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--rizz-text);
}

.md-mv {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
}

/* Section index — the contents line of the library */
.md-index {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}

.md-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(1.25rem, 3.5vw, 3rem);
  /* CINDY: the list wraps to three rows at 360px and carried no row-gap,
     so the 44px targets stacked edge to edge. */
  row-gap: var(--sp-1);
}

.md-index a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.1rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}

.md-index a::after {
  content: "";
  position: absolute;
  left: 0.1rem;
  right: 0.1rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--rizz-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-1) var(--ease);
}

.md-index a:hover { color: var(--ivory); }
.md-index a:hover::after,
.md-index a:focus-visible::after { transform: scaleX(1); }

.md-idx {
  font-family: var(--font-logo);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--ivory-60);
  transition: color var(--dur-1) var(--ease);
}

.md-index a:hover .md-idx,
.md-index a:focus-visible .md-idx { color: var(--rizz-text); }

/* ---------- 02 Lifecycle rail (marquee band) ---------- */
/* The thesis as motion: EVENT → NIGHT → PHOTOS → VIDEO → STORY → repeat.
   Static floor (JS off): a centred wrapping type wall, fully readable.
   motion.js turns the ul into a seamless nowrap loop (.mq-track). */
.md-cycle-band {
  border-block: 1px solid var(--line);
  background-color: var(--bg-2);
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  overflow: hidden;
}

.md-cycle-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: clamp(1.1rem, 2.6vw, 2.4rem);
  row-gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-cycle-track li {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ivory-60);
  white-space: nowrap;
}

/* diamond separator — geometry mirrored by motion.js .mq-tail::after */
.md-cycle-track li + li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: clamp(1.1rem, 2.6vw, 2.4rem);
  background: var(--rizz);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- 03 Ledger — countable facts ---------- */
/* Every figure here is countable off this page. If the page's contents
   change, these numbers change with them — they are not a claim. */
.md-ledger-band { padding-block: clamp(2.5rem, 5vw, 4rem); }

.md-ledger {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-ledger li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}

.md-ledger li:first-child { border-top: 0; padding-top: 0; }
.md-ledger li:last-child  { padding-bottom: 0; }

@media (min-width: 720px) {
  .md-ledger { grid-template-columns: repeat(3, 1fr); }

  .md-ledger li {
    padding: 0 clamp(1rem, 2.5vw, 2.25rem);
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .md-ledger li:first-child { padding-left: 0; border-left: 0; }
  .md-ledger li:last-child  { padding-bottom: 0; }
}

.md-lg-num {
  position: relative;
  padding-top: var(--sp-3);
  font-family: var(--font-logo);
  font-size: clamp(2.4rem, 5.4vw, 3.75rem);
  line-height: 1;
  color: var(--ivory);
}

/* cobalt tick above each figure — the page accent system's smallest unit */
.md-lg-num::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--rizz);
}

/* CINDY 2026-08-17: this label is a full sentence, not a label. Set in
   letterspaced caps it wrapped to four lines at 1440 and five at 390 — a
   caps wall under a numeral that is supposed to be the loud thing. The
   HTML is already written sentence-case, so dropping the transform is all
   it takes: the numeral keeps the volume, the sentence becomes readable. */
.md-lg-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--smoke);
  max-width: 34ch;
}

/* ---------- 04 Featured recap (CONTENT video) ---------- */
/* recap-518-01 carries a live audio track, so it gets the opposite
   treatment to the silent loops below: real controls, preload="none",
   no autoplay, no loop, no aria-hidden. The spec rail beside it states
   what the clip is — including the two things it does NOT have
   (captions, a verified date). */
.md-feature {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: start;
}

@media (min-width: 980px) {
  .md-feature { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

.md-feature-media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.md-feature-frame {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-2), inset 0 1px 0 color-mix(in srgb, var(--ivory) 6%, transparent);
}

/* 4:3 is the clip's native frame (1280x960) — reserved up front so the
   poster arriving costs no layout shift. */
.md-feature-video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: #000;
}

/* only ever painted when the browser cannot play the source at all */
.md-feature-fallback {
  padding: clamp(1.25rem, 3vw, 2rem);
  font-size: var(--fs-small);
  color: var(--ivory-80);
}

.md-feature-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem var(--sp-4);
}

/* Spec rail — the honest datasheet. Two rows exist to say "not yet". */
.md-spec { display: flex; flex-direction: column; }

.md-spec-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
}

@media (min-width: 560px) {
  .md-spec-row { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

.md-spec-row:first-child { border-top: 0; padding-top: 0; }
.md-spec-row:last-child  { padding-bottom: 0; }

.md-spec dt {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
  padding-top: 0.15rem;
}

.md-spec dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ivory-80);
}

/* the "pending" states read cobalt — same signal as an empty credit slot */
.md-spec dd em {
  font-style: normal;
  color: var(--rizz-text);
}

/* ---------- 05 Video wall (DECORATIVE vslots) ---------- */
/* Three silent clips. Aspect ratios are the clips' own wherever
   possible, so poster and video frame identically; the one cropped
   slot (the wide brand film on desktop) carries the same
   object-position on BOTH layers — a mismatch would make the picture
   jump the moment the video proves it can play. */
.md-vwall {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 768px) {
  .md-vwall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
  .md-vclip--wide { grid-column: 1 / -1; }
}

.md-vclip {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.md-vclip .vslot {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.md-vclip .vslot-poster { aspect-ratio: 16 / 9; }

@media (min-width: 768px) {
  /* the brand film goes cinematic — the only cover-crop in this block */
  .md-vclip--wide .vslot-poster { aspect-ratio: 21 / 9; }
}

/* Vertical clip: 9:16 is the format it was shot in — never letterbox it
   into a landscape frame. Capped so it cannot tower over its neighbour.

   CINDY 2026-08-17: the cap used to sit on the .vslot alone, so from 768px
   up the caption ran the full grid column (624px at 1440) while the media
   it labels was 320px — 152px of caption overhanging each side of its own
   picture. Cap the FIGURE instead: media and caption now share one edge,
   and the poster keeps its native 9:16. */
.md-vclip--tall {
  max-width: min(100%, 20rem);
  margin-inline: auto;
  width: 100%;
}

.md-vclip--tall .vslot-poster { aspect-ratio: 9 / 16; }

.md-vcap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem var(--sp-4);
}

/* provenance label — every clip and the recap wear one */
.md-vtag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ivory-80);
}

.md-vtag::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--rizz);
  flex: none;
}

.md-vname {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
}

/* honesty footnote shared by the video + photo sections */
.md-honest {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 62ch;
}

/* ---------- 06 Photography — albums, tiles, credit slot ---------- */
.md-album + .md-album { margin-top: clamp(2.75rem, 6vw, 4.5rem); }

.md-album-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.md-album-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.05;
  text-transform: uppercase;
}

.md-album-count {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
}

.md-album-n {
  font-family: var(--font-logo);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--ivory);
}

.md-album-note {
  font-size: var(--fs-small);
  color: var(--ivory-60);
  max-width: 66ch;
}

.md-album-note a { color: var(--rizz-text); }

/* Two grids, two jobs: Nights reads as coverage (bigger, landscape
   tiles at the frames' own 3:2), Lookbook reads as a contact sheet
   (denser, portrait tiles). */
.md-shots {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

@media (min-width: 560px) { .md-shots--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .md-shots--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.md-shots--sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 720px)  { .md-shots--sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .md-shots--sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.md-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--flyer-ground);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-1), inset 0 1px 0 color-mix(in srgb, var(--ivory) 5%, transparent);
}

/* The whole tile is the target — far past 44px at every breakpoint.
   It opens the full-resolution file in a new tab: no lightbox script
   is added to this page, and none is faked. */
.md-shot-link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--panel);
  text-decoration: none;
}

.md-shot-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-2) var(--ease);
}

.md-shots--wide  .md-shot-link img { aspect-ratio: 3 / 2; }
.md-shots--sheet .md-shot-link img { aspect-ratio: 4 / 5; }

.md-shot-link:hover img { transform: scale(1.04); }

/* focus ring hugs the tile, not the image inside it */
.md-shot-link:focus-visible { outline-offset: -3px; }

.md-shot-zoom {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
  transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.md-shot-zoom::after { content: "\2197"; }

/* Touch has no hover, so the affordance stays visible there. On fine
   pointers it fades in with the tile. */
@media (hover: hover) {
  .md-shot-zoom { opacity: 0; }

  .md-shot-link:hover .md-shot-zoom,
  .md-shot-link:focus-visible .md-shot-zoom { opacity: 1; }
}

/* CINDY 2026-08-17: on touch the chip can never fade, and in the dense
   contact sheet it measured 112.5px across a 167px tile — 67% of the
   picture, eighteen times over. Content is king: on coarse pointers the
   sheet keeps the mark and drops the word. Nothing is lost — the tile
   already carries "Open the full-size image in a new tab" for assistive
   tech, and the wide Nights grid (348px tiles) keeps the full label. */
@media (hover: none) {
  .md-shots--sheet .md-shot-zoom {
    gap: 0;
    padding: 0.35rem 0.45rem;
    font-size: 0;
    letter-spacing: 0;
  }

  .md-shots--sheet .md-shot-zoom::after {
    font-size: var(--fs-small);
    line-height: 1;
  }
}

.md-shot-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem var(--sp-3);
  padding: var(--sp-3);
  border-top: 1px solid var(--line);
}

.md-shot-set {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
}

/* The credit slot ships EMPTY and cobalt — it is a structural promise,
   not decoration. Replace the words with the photographer's name the
   day one is confirmed; never fill it with a guess. */
.md-shot-credit {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--rizz-text);
}

/* ---------- 07 FACE-SAFE CROP LAW ---------- */
/* HOUSE LAW (binding, measured — docs + data/media.json `focal`): any
   image in an object-fit:cover slot carries the focal point below, so
   a crop can never cut a face. Back-shots and crop-safe frames are
   omitted on purpose — they inherit the 50% 50% default.
   Flyers appear NOWHERE on this page: they are never cover-cropped. */

/* event coverage — images/event-518-* */
.foc-ev-01 { object-position: 41.3% 15.4%; }
.foc-ev-02 { object-position: 77.5% 20.2%; }
.foc-ev-03 { object-position: 39.3% 36.5%; }
.foc-ev-04 { object-position: 52.1% 24.1%; }
/* 21.7%, re-derived so the square services.html tile stops halving a third
   face (note in css/pages/services.css). No-op in this 3:2 slot. */
.foc-ev-06 { object-position: 21.7% 11.5%; }

/* garage lookbook — 04 / 06 / 08 are back-shots, crop-safe */
.foc-gar-01 { object-position: 45.1% 19.9%; }
.foc-gar-02 { object-position: 49.1% 29.7%; }
.foc-gar-03 { object-position: 47.4% 18.5%; }
.foc-gar-05 { object-position: 48.8% 21.1%; }
.foc-gar-07 { object-position: 44.7% 24.4%; }

/* night steps lookbook — 04 / 07 are back-shots, crop-safe */
.foc-cap-01 { object-position: 57.3% 20.2%; }
.foc-cap-02 { object-position: 42.9% 13.8%; }
.foc-cap-03 { object-position: 40.4% 16.5%; }
.foc-cap-05 { object-position: 45% 9.3%; }
.foc-cap-06 { object-position: 58.8% 19.4%; }

/* apparel details — 02 is crop-safe */
.foc-det-01 { object-position: 57.2% 27.4%; }
.foc-det-03 { object-position: 48.8% 33.1%; }

/* Video posters. The wide brand film is the one cropped slot on this
   page, so its <video> carries the identical focal point — poster and
   playing frame must line up exactly. promo-518-a re-measured to
   67.4% 36% after the poster was reframed; matches data/media.json. */
.foc-promo-a,
.md-vclip--wide .vslot video { object-position: 67.4% 36%; }

/* promo-518-b runs at its native 16:9 (no crop), so this is a no-op
   today — kept so any future crop of this frame stays face-safe.
   JUAN 2026-08-17: the <video> was NOT carrying it. A poster-only focal
   is a latent frame-jump — the instant a breakpoint gives this slot a
   non-16:9 aspect, the picture shifts the moment the clip fades in. */
.foc-promo-b,
.md-vclip:not(.md-vclip--wide):not(.md-vclip--tall) .vslot video {
  object-position: 51.8% 18.7%;
}

/* ---------- 08 Community — pipeline panel + honest intake ---------- */
.md-comm {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 980px) {
  .md-comm {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.md-comm-copy .sect-lead {
  margin-top: var(--sp-4);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--ivory-80);
}

.md-comm-copy .eyebrow { margin-bottom: var(--sp-4); }

.md-notify {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.md-notify-note {
  font-size: var(--fs-small);
  color: var(--smoke);
}

.md-intake-alt {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 42ch;
}

.md-intake-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rizz-text);
}

/* the pipeline — architecture shown as a numbered ledger */
.md-pipeline { display: flex; flex-direction: column; gap: var(--sp-5); }

.md-pipe-label { color: var(--rizz-text); }

.md-pipe-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.md-pipe-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
}

.md-pipe-steps li:first-child { border-top: 0; padding-top: 0; }
.md-pipe-steps li:last-child  { padding-bottom: 0; }

.md-pipe-idx {
  font-family: var(--font-logo);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--rizz-text);
  padding-top: 0.3rem;
}

.md-pipe-name {
  font-size: var(--fs-h4);
  text-transform: uppercase;
}

.md-pipe-desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--ivory-60);
  max-width: 44ch;
}

/* status chip — present-tense honesty */
.md-pipe-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
}

.md-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rizz);
  flex: none;
}

.md-pipe-legal {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ivory-60);
  max-width: 48ch;
}

/* ---------- 09 Creators band ---------- */
/* The page's one lift of light at the close. This section sits on a
   plain .sect (the band rhythm alternates and #community took the band
   slot), so it paints its own ground: colour longhand first, gradients
   on top — same ordering law as site.css .sect--band. */
.md-creators {
  border-top: 2px solid var(--rizz);
  background-color: var(--bg-2);
  background-image:
    radial-gradient(120% 85% at 50% 0%, var(--rizz-haze) 0%, transparent 58%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg-2) 92%, var(--ivory)) 0%,
      var(--bg-2) 70%);
}

/* --smoke thins on the lifted ground — step quiet copy up one rung */
.md-creators .eyebrow { color: var(--ivory-60); }

.md-creator-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

.md-creator-note {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  font-size: var(--fs-small);
  color: var(--smoke);
}

.md-creator-note a {
  color: var(--ivory-80);
}

.md-creator-note a:hover { color: var(--ivory); }