/* ============================================================
   DJ WIZ HOFFA — ABOUT / THE STORY
   css/pages/about.css?v=11 — page layout only. Loads after
   tokens.css + site.css; never restyles the shared shell,
   never declares :root, never redefines a shell selector.

   Editorial system: the page is a documentary reel. Dark acts
   alternate depth (--bg / --bg-2), one crimson haze interlude,
   one full-bleed crimson band, one media close. Framed
   photography rides each act on a sticky rail so the portrait
   holds while the timeline scrolls past it.

   TOC:
   01 Hero (street portrait, documentary open)
   02 Chapter index
   03 Acts — grid, spine timeline, nodes, ghost numerals
   04 Credit units (framing-locked name blocks)
   05 Pull lines
   06 Figures (framed photography + sticky rail)
   07 The Mob / Press Run split layouts
   08 The Ear interlude
   09 Stats row
   10 The Range (positioning grid)
   11 Skills band (the one crimson surface)
   12 NoizeMob section + mark crop
   13 Merch concepts
   14 Close CTA
   15 Desktop hero split
   ============================================================ */

/* ---------- 01 Hero ---------- */
.about-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.hero-media {
  position: relative;
  height: 56svh;
  min-height: 340px;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* Scrim: settle the photo into black so ivory type always reads.
   Layer 1 is the header band — the near-white graffiti wall runs
   straight under the fixed nav, so the mute is concentrated on that
   strip and released before the portrait. Tracks --header-h, so it
   follows the 4rem/4.75rem breakpoint on its own. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10, 10, 10, 0.80) 0%,
      rgba(10, 10, 10, 0.46) calc(var(--header-h) + 0.75rem),
      rgba(10, 10, 10, 0) calc(var(--header-h) + 4rem)),
    linear-gradient(to bottom,
      rgba(10, 10, 10, 0.55) 0%,
      rgba(10, 10, 10, 0.08) 32%,
      rgba(10, 10, 10, 0.18) 62%,
      var(--bg) 97%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: var(--z-content);
  margin-top: -3.25rem;
  padding-bottom: var(--sp-6);
}

/* Tablet range: taller media + higher focus so the face keeps headroom */
@media (min-width: 560px) and (max-width: 979.98px) {
  .hero-media { height: 62svh; }

  .hero-media img { object-position: 50% 12%; }
}

.about-hero .hero-title {
  font-size: clamp(2.6rem, 8vw, 7.5rem);
  margin-top: var(--sp-4);
}

.hero-line { display: block; }

.hero-line + .hero-line { margin-left: clamp(0rem, 4vw, 4.5rem); }

.hero-lead { margin-top: var(--sp-5); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ---------- 02 Chapter index ---------- */
.chapter-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

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

/* Mirror the shell header nav's signature crimson scaleX underline so the
   page's primary in-page nav speaks the same micro-language. */
.chapter-index a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.4rem;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}

.chapter-index a:hover,
.chapter-index a:focus-visible { color: var(--ivory); }

.chapter-index a:hover::after,
.chapter-index a:focus-visible::after { transform: scaleX(1); }

.chapter-index .ci-num {
  font-family: var(--font-logo);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--crimson-hot); /* decorative index numeral, never copy */
}

/* ---------- 03 Acts: grid + spine timeline ---------- */
.act-grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

.act-copy { min-width: 0; }

/* Vertical timeline spine */
.story-line {
  --spine: clamp(1.5rem, 4.5vw, 2.75rem);
  position: relative;
  padding-left: var(--spine);
}

.story-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--line-strong),
    var(--line) 72%,
    transparent);
}

.node { position: relative; padding-bottom: var(--sp-8); }

.node:last-child { padding-bottom: 0; }

/* Diamond marker on the spine */
.node::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--spine) - 4px);
  top: 0.5em; /* lifts the marker onto the H3 cap-line across the clamp */
  width: 9px;
  height: 9px;
  background: var(--crimson);
  transform: rotate(45deg);
}

.node h3 { margin-bottom: var(--sp-3); }

.node p { max-width: 58ch; color: var(--ivory-80); }

.node p + p { margin-top: var(--sp-4); }

/* Ghost age numerals — decorative, huge, outlined */
.node-num,
.ghost-num {
  display: block;
  font-family: var(--font-logo);
  line-height: 0.9;
  color: rgba(242, 239, 228, 0.14);
  user-select: none;
}

.node-num { font-size: clamp(3.5rem, 9vw, 6.5rem); margin-bottom: var(--sp-2); }

.ghost-num { font-size: clamp(5rem, 16vw, 12rem); }

@supports (-webkit-text-stroke: 1px #000) {
  .node-num,
  .ghost-num {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(242, 239, 228, 0.3);
  }
}

/* In-act action row */
.act-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ---------- 04 Credit units (the prefix travels with the names) ----
   Honesty gate, made structural: the framing label is a crimson
   chip locked to the top of the same card as the names. The label
   can never scroll, wrap, or be read away from what it frames. */
.credit-unit {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.credit-label {
  align-self: flex-start;
  padding: 0.34rem 0.7rem;
  background: var(--crimson);
  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-eyebrow);
  color: var(--ivory); /* ivory on crimson — the only compliant pairing */
}

.credit-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.5rem;
  column-gap: clamp(1.4rem, 3vw, 2.4rem);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ivory);
}

.credit-names li { display: inline-flex; align-items: center; }

/* No separator glyph: flex column-gap separates cleanly at every wrap,
   which kills both the orphan diamond left hanging at the end of a
   wrapped line AND the crimson crowding (a 3px crimson border + a
   crimson chip + eight crimson diamonds was ten accents in one card).
   The chip and the left border stay as the card's two accent devices. */
.credit-names li:not(:last-child)::after { content: none; }

.credit-foot {
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 52ch;
}

/* ---------- 05 Pull lines ---------- */
.pull-line {
  margin-top: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--crimson);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ivory);
  text-wrap: balance;
  max-width: 22ch;
}

/* ---------- 06 Figures ---------- */
.act-fig { min-width: 0; }

.fig-frame {
  background: #101013;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  box-shadow: var(--shadow-2);
}

.fig-frame img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

.fig-cap {
  padding-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ivory-60);
}

@media (min-width: 980px) {
  /* stretch (not start) is load-bearing: the figure column must fill
     the row for the sticky rail inside it to have any travel. The copy
     column opts back out — a stretched .story-line would run its spine
     on past the last node into empty space. */
  .act-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-9);
    align-items: stretch;
  }

  .act-grid .act-copy { align-self: start; }

  .act-grid--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  .act-grid--flip .act-fig { order: -1; }

  .act-fig-inner {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}

/* ---------- 07 The Mob / Press Run splits ---------- */
.mob-grid {
  display: grid;
  gap: var(--sp-7); /* harmonize mobile stacking rhythm with .ear-grid / .nm-grid */
  align-items: center;
}

.mob-copy > * + * { margin-top: var(--sp-5); }

.mob-copy .eyebrow + .sect-title { margin-top: var(--sp-4); }

.mob-copy p { color: var(--ivory-80); }

.mob-num { overflow: hidden; }

.mega-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.mega-label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
  max-width: 16rem;
}

@media (min-width: 980px) {
  .mob-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-9); }

  .mob-grid--right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

  .mob-grid--right .mob-num { justify-self: end; text-align: right; }

  .mob-grid--right .mega-stat { align-items: flex-end; }
}

/* ---------- 08 The Ear interlude ---------- */
.ear-grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

.ear-copy > * + * { margin-top: var(--sp-5); }

.ear-title { font-size: var(--fs-display); }

#the-ear .pull-line { max-width: 18ch; }

@media (min-width: 980px) {
  .ear-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-9); }

  #the-ear .act-fig { max-width: 30rem; }
}

/* ---------- 09 Stats row ---------- */
.stat-row {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}

@media (max-width: 767.98px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 10 The Range (positioning grid) ---------- */
.range-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  /* Lift the whole grid so the 8 cells read as one seated control panel
     rather than a painted rectangle — no contrast cost. */
  box-shadow: var(--shadow-2);
}

.range-cell {
  background: var(--bg);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: background var(--dur-2) var(--ease);
}

.range-cell:hover { background: var(--panel); }

.range-idx {
  font-family: var(--font-logo);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ivory-60);
  transition: color var(--dur-2) var(--ease);
}

/* On hover the accent responds: the crimson dash extends + heats, the
   numeral brightens — the crimson breathes on interaction. */
.range-cell:hover .range-idx { color: var(--ivory); }

.range-cell h3 {
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.range-cell h3::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--crimson);
  flex: none;
  transform: scaleX(0.529);   /* 18/34 base — composited, animates to 1 on hover */
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.range-cell:hover h3::before { transform: scaleX(1); background: var(--crimson-hot); }

.range-cell p {
  font-size: var(--fs-small);
  color: var(--ivory-60);
  max-width: 34ch;
}

@media (min-width: 768px) {
  .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .range-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 11 Skills band (the one crimson surface) ----------
   No-JS floor: a centered, wrapping type wall — fully readable.
   With motion.js, [data-marquee] on .skills-viewport converts the
   inner <ul> to a seamless loop. data-marquee sits on the VIEWPORT,
   never on the band: motion.js masks the marquee wrapper's edges to
   transparent, and masking the band itself would fade its crimson
   ground out to black. */
.skills-band {
  background: var(--crimson);
  border-block: 1px solid rgba(0, 0, 0, 0.35);
  /* Seat the crimson ground with an inset vignette (same rgba-black idiom
     as the border-block) so the band reads as a lit surface, not a printed
     swatch. Inset only — never masks the crimson ground. */
  box-shadow:
    inset 0 16px 32px -22px rgba(0, 0, 0, 0.55),
    inset 0 -16px 32px -22px rgba(0, 0, 0, 0.55);
  padding-block: var(--sp-6);
  overflow: hidden;
}

.skills-viewport { width: 100%; }

.skills-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(1.1rem, 2.6vw, 2.4rem);
  row-gap: 0.6rem;
  padding-inline: var(--gutter);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ivory);
  text-align: center;
}

.skills-track li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Leading separator (house marquee pattern): motion.js detects the
   ::before diamonds and normalizes the loop seam from them. */
.skills-track li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: clamp(1.1rem, 2.6vw, 2.4rem);
  background: rgba(242, 239, 228, 0.55);
  transform: rotate(45deg);
  flex: none;
}

/* motion.js paints its seam diamond crimson — invisible on the crimson
   band. Out-specify it (3 classes) so the seam matches every other
   separator instead of vanishing. */
.skills-band .skills-track li.mq-tail::after {
  background: rgba(242, 239, 228, 0.55);
  margin-left: clamp(1.1rem, 2.6vw, 2.4rem);
}

/* ---------- 12 NoizeMob section + mark crop ---------- */
.nm-grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

.nm-mark-panel {
  background: #0C0C0E;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 26rem;
}

/* CSS crop: isolate the NOIZE MOB block mark from the approved
   banner (window x 42–58%, y 76–99% of images/faces518-banner.webp) */
.nm-mark {
  position: relative;
  overflow: hidden;
  aspect-ratio: 317 / 182;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: #000;
}

.nm-mark img {
  position: absolute;
  top: 0;
  left: 0;
  width: 625%;
  max-width: none;
  height: auto;
  transform: translate(-42%, -76%);
}

.nm-desc {
  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-align: center;
}

.nm-copy > * + * { margin-top: var(--sp-5); }

.nm-copy .eyebrow + .sect-title { margin-top: var(--sp-4); }

.nm-copy p { color: var(--ivory-80); }

.nm-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.nm-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-6);
}

.nm-mail {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ivory-80);
  /* 44px+ tap target without shifting layout */
  display: inline-block;
  padding-block: 0.7rem;
  margin-block: -0.7rem;
}

@media (min-width: 980px) {
  .nm-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-9); }

  .nm-mark-panel { justify-self: center; width: 100%; }
}

/* ---------- 13 Merch concepts ---------- */
.merch-grid { align-items: start; }

.merch-card {
  display: flex;
  flex-direction: column;
  /* Separate channels from the data-tilt transform so no conflict: the
     archival frame warms + lifts under the pointer (works on coarse
     pointers too, where the tilt never fires). */
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.merch-card:hover {
  border-color: var(--line-crimson);
  box-shadow: var(--shadow-2), var(--glow-crimson-soft);
}

.merch-meta {
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.merch-tag {
  align-self: flex-start;
  padding: 0.35rem 0.65rem;
  background: var(--crimson);
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  /* Align to its sibling crimson chips (.credit-label / .partner-role),
     which all track at --ls-eyebrow — one letterform for every chip. */
  letter-spacing: var(--ls-eyebrow);
  color: var(--ivory);
}

.merch-meta h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.08;
  text-wrap: balance;
}

.merch-note {
  margin-top: var(--sp-7);
  font-size: var(--fs-small);
  color: var(--smoke);
  text-align: center;
}

.merch-note a {
  /* 44px+ tap target without shifting layout */
  display: inline-block;
  padding-block: 0.85rem;
  margin-block: -0.85rem;
}

/* ---------- 13b Act depth: make the band alternation visible ----------
   --bg (#0A0A0A) and --bg-2 (#0E0E10) differ by 4/255, so "dark acts
   alternate depth" reads as one flat 12,000px wall. A progressive ivory
   wash gives the four band acts real depth AND warms as the scroll
   approaches the close. Scoped by ID so the shared .sect--band shell
   selector is untouched, and set on background-COLOR (not the
   `background` shorthand and not background-image) so the shell's own
   band gradient keeps painting on top of the lifted ground. */
#mixtape-era { background-color: color-mix(in srgb, var(--bg-2) 96%, var(--ivory)); }
#press-run   { background-color: color-mix(in srgb, var(--bg-2) 95%, var(--ivory)); }
#operator    { background-color: color-mix(in srgb, var(--bg-2) 94%, var(--ivory)); }
#noizemob    { background-color: color-mix(in srgb, var(--bg-2) 93%, var(--ivory)); }
/* Partnerships is the final content band before the close — continue the
   warm curve one step past #noizemob so the closing stretch keeps lifting
   instead of dropping back to the darkest tail band. */
#partners    { background-color: color-mix(in srgb, var(--bg-2) 92%, var(--ivory)); }

/* The lift costs --smoke its AA margin (4.61 -> 4.29:1 as the bands
   warm), and every --smoke item in these four acts is real content:
   the stat labels, the MTV mega-label, the NOIZE MOB descriptor.
   Step them to the tertiary token — 6.0-6.3:1 on the lifted grounds. */
#mixtape-era .eyebrow, #mixtape-era .stat-label, #mixtape-era .mega-label,
#press-run .eyebrow,   #press-run .stat-label,   #press-run .mega-label,
#operator .eyebrow,    #operator .stat-label,    #operator .mega-label,
#noizemob .eyebrow,    #noizemob .stat-label,    #noizemob .mega-label,
#noizemob .nm-desc,
#partners .eyebrow,    #partners .partner-slot-copy { color: var(--ivory-60); }

/* ---------- 13c Brand Partnerships ----------
   Honesty made structural: exactly ONE real partner (Day One MVP,
   the studio that built this site) gets a solid card; everything
   else is an explicit dashed empty-state slot, never a fake logo
   wall. The wordmark is set TYPE (Anton), not an image — no logo
   file exists on disk. Crimson stays fill-only: a chip + a left
   border + one accent rule; the accent word uses --crimson-text. */
.partners-grid {
  display: grid;
  gap: var(--sp-5);
  align-items: stretch;
}

.partner-card,
.partner-slot {
  min-width: 0;
  border-radius: var(--r-md);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

/* Featured — the one real partnership */
.partner-card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--crimson);
  box-shadow: var(--shadow-2);
}

.partner-role {
  align-self: flex-start;
  padding: 0.34rem 0.7rem;
  background: var(--crimson);
  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-eyebrow);
  color: var(--ivory); /* ivory on crimson — the compliant pairing */
}

.partner-wordmark {
  font-family: var(--font-display);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ivory);
}

.pw-line {
  display: block;
  font-size: clamp(2.4rem, 7vw, 3.9rem);
}

/* Accent word — TEXT crimson (never the fill token) keeps AA.
   Uses the shared --crimson-text token (tokens.css:30, #D14A63, 4.59:1). */
.pw-accent { color: var(--crimson-text); }

.partner-desc {
  font-size: var(--fs-lead);
  color: var(--ivory-80);
  max-width: 30ch;
}

/* pushes the CTA to the card foot so featured + slot align */
.partner-card .btn,
.partner-slot .btn { margin-top: auto; }

/* Future partners — honest, designed empty state (a slot, not a logo) */
.partner-slot {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--ivory-80);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

/* The open slot answers the cursor so it reads as an offer, not a
   disabled tile — the board is open. Token-safe, crimson stays fill. */
.partner-slot:hover,
.partner-slot:focus-within {
  border-color: var(--line-crimson);
  background: color-mix(in srgb, var(--crimson) 4%, transparent);
}

.partner-slot-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-crimson);
  border-radius: var(--r-sm);
  font-family: var(--font-logo);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--crimson-text);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.partner-slot:hover .partner-slot-mark,
.partner-slot:focus-within .partner-slot-mark {
  color: var(--crimson-hot);
  border-color: var(--line-crimson);
}

.partner-slot-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ivory);
}

.partner-slot-copy {
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 34ch;
}

@media (min-width: 768px) {
  /* Three cards now — Day One MVP (digital), Stage One (sponsor), open slot.
     Even 3-up on desktop; stacks on mobile. */
  .partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}

/* Sponsor card — a real logo sits as framed content, not UI. The dispensary
   mark is off-palette (yellow/red/green on transparent), so it gets a quiet
   inset plate to seat it cleanly on the black-glass card without fighting it. */
.partner-logo {
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(var(--sp-4), 3.5vw, var(--sp-6));
  background: color-mix(in srgb, var(--ivory) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  aspect-ratio: 16 / 10;
}
.partner-logo img {
  width: auto;
  max-width: min(72%, 220px);
  height: auto;
  object-fit: contain;
}
.partner-card--sponsor { justify-content: flex-start; }

/* ---------- 14 Close CTA ---------- */
.about-close {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 15vw, 11rem);
  border-top: 1px solid var(--line);
}

/* Scrim over the studio poster/loop — content is king, but the closing
   moment gets air: the old 0.92/0.72/0.90 stack held the poster at
   ~25% strength, well under the 40-60% mute band, and made the close
   the darkest point of the whole scroll. Ivory still clears ~14:1. */
.about-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 60% at 50% 100%, var(--haze), transparent 72%),
    linear-gradient(to bottom,
      rgba(10, 10, 10, 0.82),
      rgba(10, 10, 10, 0.52) 45%,
      rgba(10, 10, 10, 0.86));
  pointer-events: none;
}

.close-inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
}

.close-title {
  margin-top: var(--sp-4);
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
}

/* The scrim lift above buys the close its air; these two pay for it.
   Over the lightened poster the --smoke eyebrow measured 2.25:1 (it was
   already only 3.48:1 under the old heavy scrim) and an --ivory-80 lead
   landed at 4.45:1. Stepping both up clears AA on the brightest pixel
   behind the glyphs while the section keeps its lift. */
.about-close .eyebrow { color: var(--ivory-80); }

.close-lead {
  margin-top: var(--sp-5);
  margin-inline: auto;
  font-size: var(--fs-lead);
  color: var(--ivory);
  max-width: 34ch;
}

.close-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* ---------- 15 Desktop hero: split editorial ---------- */
@media (min-width: 980px) {
  .about-hero { display: block; }

  .hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    height: auto;
    min-height: 0;
  }

  .hero-media img { object-position: 50% 22%; }

  .hero-media::after {
    background:
      /* header band first — the horizontal scrim below only reaches
         0.3 alpha at the right edge, which is exactly where the nav sits */
      linear-gradient(to bottom,
        rgba(10, 10, 10, 0.78) 0%,
        rgba(10, 10, 10, 0.48) calc(var(--header-h) + 1rem),
        rgba(10, 10, 10, 0) calc(var(--header-h) + 5rem)),
      linear-gradient(to right,
        var(--bg) 0%,
        rgba(10, 10, 10, 0.78) 24%,
        rgba(10, 10, 10, 0.18) 58%,
        rgba(10, 10, 10, 0.3) 100%),
      linear-gradient(to top, rgba(10, 10, 10, 0.62), transparent 42%);
  }

  .hero-content {
    margin-top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--header-h) + var(--sp-8));
    padding-bottom: var(--sp-7);
  }

  .hero-copy { max-width: 62rem; }
}

/* Small-phone floor: keep numerals + names inside 360px */
@media (max-width: 379.98px) {
  .credit-names { font-size: 1.1rem; column-gap: 1rem; }
}