/* SkyHigh The Mau Mau — skyhighmau.com
   Reference lock (Refero): PRIMARY darkroom contact sheet (juliakrantz.com): black canvas, one light foreground tone,
   1px ghost seams, zero radius, zero shadow, photographs carry all colour, hover = brightness only.
   BORROWED from albumcolors.com: poster-scale condensed all-caps display with tight tracking, and colour-as-canvas
   (a whole section repainted) — here the roots palette, used ONLY as full-bleed section canvases, never for buttons,
   links or decoration. Single committed dark theme: every surface paints its own background. */

:root {
  --void: #000000;
  --tile: #0d0d0c;
  --salt: #f8f8f6;
  --ash: #8c8c89;
  --veil: rgba(248, 248, 246, 0.55);
  --seam: rgba(248, 248, 246, 0.13);
  --seam-strong: rgba(248, 248, 246, 0.32);
  /* section canvases (role: full-bleed canvas only) */
  --canvas-red: #a12f28;
  /* TEXT variants. The flag's own red and green are deep, and on this black ground they measure 2.95:1 and
     2.61:1 — both FAIL WCAG AA, which needs 4.5:1 for small text. The deep colours stay on rules, borders and
     fills where they are shape rather than words; anything a person has to READ uses these, which are the
     closest inks to the flag that still pass (4.94:1 and 5.20:1). */
  --red-ink: #d64b40;
  --green-ink: #2f8f5b;
  /* The tricolor has three JOBS, measured 2026-09-10 when gold was 80-100% of the accent on every page and
     red was 0% on five of eight: GOLD = identity (wordmark, eyebrows, labels, badges), RED = action and
     response (hover, active, selected), GREEN = roots (era and origin markers). Recolour by ROLE, never by
     sprinkling. */
  --canvas-gold: #e2a72c;
  --canvas-green: #1c5b3a;
  --ink-on-gold: #121110;

  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 3vw, 32px);
  --measure: 62ch;
  --ease-arrive: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color: var(--salt); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--salt);
  font: 300 16px/1.7 var(--body);
  letter-spacing: 0.01em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--salt); outline-offset: 3px; }
::selection { background: var(--canvas-gold); color: var(--ink-on-gold); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--salt); color: var(--void); padding: 6px 10px; z-index: 20; }

/* MARKED LAYER skyhigh-owned-film-20261019: a full-frame window into the archive. */
.social-film { min-width: 0; background: #141612; border: 1px solid #5b663b; padding: 14px; }
.social-film video { display: block; width: 100%; height: min(62vh, 540px); object-fit: contain; background: #080b08; border-bottom: 3px solid #e5b848; }
.social-film .title { display: block; margin: 16px 0 8px; color: #f9db8b; }
.social-film__note, .social-film__caption { font-size: .88rem; line-height: 1.6; color: #e6e6dc; }
.social-film summary, .social-film__source { display: block; padding: 12px 0; min-height: 44px; color: #f9db8b; cursor: pointer; }
.social-film__caption { overflow-wrap: anywhere; }
/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutter);
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--seam);
  /* The header appears on every page and had no colour at all. It closes on the flag — 2px, in
     exact thirds, sitting on the sticky masthead so it is the first thing on every screen. */
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--canvas-red) 0 33.33%, var(--canvas-gold) 33.33% 66.66%, var(--canvas-green) 66.66% 100%) 1;
}
.wordmark {
  font: 800 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.wordmark span { color: var(--canvas-gold); font-weight: 600; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 400 0.76rem/1 var(--body); text-transform: uppercase; letter-spacing: 0.14em; }
.nav a { color: var(--salt); padding: 6px 0; transition: color 0.2s ease; }
/* Action is red, and a hover must ANSWER rather than fade: this rule dimmed a hovered link to --veil,
   which read as the link going away under the pointer, and gave a hovered link and the current page
   the same appearance so neither was legible as itself. */
.nav a:hover, .nav a:focus-visible { color: var(--red-ink); }
.nav a[aria-current="page"] { color: var(--salt); text-decoration: underline;
  text-decoration-color: var(--red-ink); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--canvas-red); color: var(--salt); font: 400 0.72rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 10px; }

/* ---------- type ---------- */
.eyebrow { font: 400 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); display: inline-block; margin-bottom: 8px; position: relative; z-index: 2; }
.poster {
  font: 900 clamp(3.4rem, 13vw, 11.5rem)/0.82 var(--display);
  text-transform: uppercase; letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
.h2 { font: 800 clamp(2.2rem, 6vw, 4.6rem)/0.88 var(--display); text-transform: uppercase; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.h3 { font: 700 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.lede { font: 300 clamp(1.05rem, 1.6vw, 1.3rem)/1.6 var(--body); max-width: var(--measure); margin: 0; color: var(--salt); }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; }
.muted { color: var(--ash); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- HHHHA reader understanding & connection ---------- */
.hhhha {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.58em;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--canvas-gold);
  vertical-align: middle;
  margin-left: 0.4em;
  opacity: 0.95;
}
.eyebrow .hhhha {
  font-family: var(--mono);
  font-size: 0.9em;
  letter-spacing: 0.06em;
  color: var(--canvas-gold);
  margin-left: 0.35em;
  text-transform: none;
}
.hhhha-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(226, 167, 44, 0.12);
  border: 1px solid rgba(226, 167, 44, 0.28);
  font-size: 10px;
  font-family: var(--mono);
  color: var(--canvas-gold);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ---------- layout ---------- */
.wrap { padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 120px); border-top: 1px solid var(--seam); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.canvas-red { background: var(--canvas-red); color: var(--salt); border-top: 0; }
.canvas-green { background: var(--canvas-green); color: var(--salt); border-top: 0; }
.canvas-gold { background: var(--canvas-gold); color: var(--ink-on-gold); border-top: 0; }
.canvas-gold .eyebrow, .canvas-gold .muted { color: rgba(18, 17, 16, 0.72); }
.canvas-red .eyebrow, .canvas-red .muted, .canvas-green .eyebrow, .canvas-green .muted { color: rgba(248, 248, 246, 0.78); }

/* ---------- ghost buttons (both references: border, no fill) ---------- */
.btn {
  /* Action is red. The border was currentColor, so buttons carried no accent at rest and the
     tricolor only appeared once a visitor already knew where to point. */
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--canvas-red); padding: 12px 18px;
  font: 400 0.78rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--canvas-red); color: var(--salt); border-color: var(--canvas-red); }
.canvas-gold .btn:hover { background: var(--ink-on-gold); color: var(--canvas-gold); }
.btn .arrow { font-family: var(--mono); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- hero ---------- */
.hero { padding: clamp(28px, 5vw, 56px) var(--gutter) 0; display: grid; gap: 22px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.hero-meta span { font: 400 0.72rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.hero-meta b {
  /* The heritage facts in the hero strip are roots claims, so they carry the roots colour. */ color: var(--green-ink); font-weight: 400; }

/* ---------- contact sheet mosaic ---------- */
.sheet {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  border-top: 1px solid var(--seam); border-left: 1px solid var(--seam);
  margin-top: clamp(28px, 4vw, 44px);
}
.frame {
  position: relative; grid-column: span 3; aspect-ratio: 4 / 5; overflow: hidden;
  border-right: 1px solid var(--seam); border-bottom: 1px solid var(--seam); background: var(--tile);
}
.frame.wide { grid-column: span 6; aspect-ratio: auto; }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease; }
.frame:hover img { filter: brightness(0.82); }
.frame .code {
  position: relative; display: grid; gap: 2px; padding: 12px 14px; pointer-events: none; background: transparent;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.frame .code .n { font: 400 0.66rem/1 var(--mono); letter-spacing: 0.1em; color: var(--veil); }
.frame .code .t { font: 300 2.4rem/1 var(--display); letter-spacing: -0.02em; }
.frame .code .c { font: 400 0.64rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--veil); }
.frame.placeholder {
  display: grid; place-items: end start; padding: 14px;
  background: repeating-linear-gradient(135deg, var(--tile) 0 14px, #121211 14px 15px);
}
.frame.placeholder .note { font: 400 0.68rem/1.45 var(--mono); color: var(--ash); letter-spacing: 0.04em; max-width: 30ch; }

/* ---------- catalogue grids ---------- */
.grid { display: grid; gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.item { background: var(--void); display: grid; align-content: start; gap: 12px; padding: 0 0 18px; }
.canvas-gold .item, .canvas-red .item, .canvas-green .item { background: transparent; }
.item .art { aspect-ratio: 1 / 1; background: var(--tile); overflow: hidden; }
.item .art img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease; }
.item:hover .art img { filter: brightness(0.82); }
.item .meta { padding-inline: 14px; display: grid; gap: 6px; }
.item .title { font: 700 1.25rem/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.item .sub { font: 400 0.7rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.item .links { padding-inline: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 0.74rem/1.4 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.item .links a { border-bottom: 1px solid var(--seam-strong); padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; }
.item .links a:hover { color: var(--veil); border-color: var(--salt); }
.price { font: 400 0.9rem/1 var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- books ---------- */
.book { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.book + .book { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--seam); }
.cover { background: var(--tile); border: 1px solid var(--seam); aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: contain; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 1px solid rgba(28, 91, 58, 0.55); margin: 22px 0; }
.specs div {
  /* Book specs are provenance: published, publisher, ISBN. A roots-tinted rule instead of a neutral seam. */ padding: 12px 12px 12px 0; border-bottom: 1px solid rgba(28, 91, 58, 0.55); }
.specs dt { font: 400 0.66rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.specs dd { margin: 4px 0 0; font: 700 1.6rem/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; word-break: break-word; }
.canvas-gold .specs, .canvas-gold .specs div { border-color: rgba(18, 17, 16, 0.25); }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--seam); }
.timeline li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--seam); }
/* ---------- connect buttons & logos deck ---------- */
.connect-logos-deck {
  margin-top: 18px;
  margin-bottom: 24px;
  padding: 24px;
  background: rgba(13, 13, 12, 0.82);
  border: 1px solid rgba(248, 248, 246, 0.14);
  border-radius: 6px;
}
.connect-logos-deck .eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--canvas-gold);
  font: 700 0.78rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.connect-logos-deck .deck-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) {
  .connect-logos-deck .deck-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 820px) {
  .connect-logos-deck .deck-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .connect-logos-deck .deck-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.connect-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(248, 248, 246, 0.05);
  border: 1px solid rgba(248, 248, 246, 0.16);
  border-radius: 4px;
  color: var(--salt);
  font: 700 0.85rem/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: nowrap;
}
.connect-logo-card svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--canvas-gold);
  transition: transform 0.2s ease;
}
.connect-logo-card:hover {
  color: var(--red-ink);
  border-color: var(--canvas-red);
  background: rgba(226, 167, 44, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(226, 167, 44, 0.3);
}
.connect-logo-card:hover svg {
  transform: scale(1.15);
}

/* ---------- socials ---------- */
.socials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  border-top: none;
  margin-top: 14px;
}
.social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(18, 17, 16, 0.4);
  border: 1px solid rgba(248, 248, 246, 0.12);
  border-radius: 4px;
  transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  text-decoration: none;
}
.canvas-green .social {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(248, 248, 246, 0.14);
}
.canvas-gold .social {
  background: rgba(18, 17, 16, 0.06);
  border-color: rgba(18, 17, 16, 0.18);
}
.social:hover {
  border-color: var(--canvas-gold);
  background: rgba(226, 167, 44, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.social .platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 1.05rem/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--salt);
}
.social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--canvas-gold);
  transition: transform 0.2s ease;
}
.social:hover .social-icon {
  transform: scale(1.15);
}
.social .handle {
  font: 400 0.7rem/1.2 var(--mono);
  letter-spacing: 0.05em;
  color: var(--ash);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  text-align: right;
}
.social:hover .handle {
  color: var(--red-ink);
}

/* ---------- video ---------- */
.video { background: var(--void); display: grid; gap: 10px; padding-bottom: 16px; }
.video .player { position: relative; aspect-ratio: 16 / 9; background: var(--tile); overflow: hidden; }
.video .player img { width: 100%; height: 100%; object-fit: cover; }
.video .player button, .video .player a.play {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; background: transparent; color: var(--salt);
  display: grid; place-items: center; font: 400 0.74rem/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase;
}
.video .player .play-mark { border: 1px solid var(--salt); padding: 12px 16px; background: rgba(0, 0, 0, 0.5); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .title { padding-inline: 14px; font: 400 0.95rem/1.35 var(--body); }
.video .sub { padding-inline: 14px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--seam); padding: 32px var(--gutter) 48px; display: grid; gap: 22px; }
.footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; }
.footer .footer-brand-row { padding-bottom: 20px; border-bottom: 1px solid rgba(248, 248, 246, 0.08); }
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-tagline {
  /* Roots line: where he is from and how long. Green, not gold — this is origin, not identity. */ font: 500 0.72rem/1.2 var(--mono); color: var(--green-ink); letter-spacing: 0.12em; text-transform: uppercase; }
.footer-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--tile);
  border: 1px solid var(--seam);
  color: var(--salt);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer-logo-btn:hover {
  color: var(--red-ink);
  border-color: var(--canvas-red);
  background: rgba(226, 167, 44, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(226, 167, 44, 0.25);
}
.footer-logo-btn svg { display: block; }
.footer a { border-bottom: 1px solid var(--seam-strong); }
.footer .footer-logo-btn { border-bottom: 1px solid var(--seam) !important; }
.footer .footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: none !important;
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--salt);
  padding: 6px 10px;
  border-radius: 2px;
  background: rgba(248, 248, 246, 0.03);
  border: 1px solid rgba(248, 248, 246, 0.08) !important;
  transition: all 0.15s ease;
}
.footer .footer-nav-link:hover {
  color: var(--canvas-gold);
  border-color: var(--canvas-gold) !important;
  background: rgba(226, 167, 44, 0.08);
}
.footer small { font: 400 0.7rem/1.5 var(--mono); color: var(--ash); letter-spacing: 0.06em; }

/* ---------- SOUND SYSTEM & MARLEY BROTHERHOOD ---------- */
.brotherhood-plaque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(226, 167, 44, 0.08);
  border: 1px solid rgba(226, 167, 44, 0.3);
  padding: 8px 16px;
  margin-bottom: 20px;
  border-radius: 3px;
}
.brotherhood-plaque .icon {
  font-size: 1.1rem;
  color: var(--red-ink);
}
.brotherhood-plaque .text {
  font: 500 0.75rem/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--canvas-gold);
}
.sound-system-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(13, 13, 12, 0.9);
  border: 1px solid var(--seam-strong);
  margin-top: 22px;
  max-width: 680px;
}
.dub-siren-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.siren-btn {
  background: var(--tile);
  border: 1px solid var(--seam-strong);
  color: var(--salt);
  font: 500 0.72rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.siren-btn:hover {
  background: var(--canvas-red);
  color: var(--salt);
  border-color: var(--canvas-red);
  box-shadow: 0 0 12px rgba(226, 167, 44, 0.4);
}
.siren-btn:active { transform: scale(0.96); }
.vu-meter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin-left: auto;
}
.vu-bar {
  width: 4px;
  background: var(--canvas-green);
  border-radius: 1px;
  height: 6px;
  transition: height 0.08s ease;
}
.vu-bar:nth-child(4), .vu-bar:nth-child(5) { background: var(--canvas-gold); }
.vu-bar:nth-child(6) { background: var(--canvas-red); }

/* ---------- VINYL RECORD & TURNTABLE STYLING ---------- */
.turntable-showcase {
  position: relative;
  background: radial-gradient(circle at 60% 40%, rgba(226, 167, 44, 0.1) 0%, rgba(0, 0, 0, 0.6) 80%), var(--tile);
  border: 1px solid var(--seam-strong);
  padding: clamp(24px, 4vw, 40px);
  margin: 32px 0;
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 768px) {
  .turntable-showcase { grid-template-columns: 1fr; }
}
.turntable-platter {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #08080a;
  border: 3px solid rgba(248, 248, 246, 0.1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.turntable-vinyl-disc {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background-color: #121214;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.9), 0 4px 16px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.turntable-vinyl-disc.spinning {
  animation: vinylSpin 1.8s linear infinite;
}
.turntable-vinyl-disc.speed-45 {
  animation-duration: 1.33s;
}
@keyframes vinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.turntable-center-label {
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #f7d24a 0%, #d4951e 70%, #8f5c07 100%);
  border: 2px solid #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  padding: 4px;
}
.turntable-center-label .brand {
  font: 800 0.55rem/1 var(--display);
  letter-spacing: 0.05em;
  color: #111;
  text-transform: uppercase;
}
.turntable-center-label .center-hole {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #08080a;
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin: 3px 0;
}
.turntable-center-label .subtext {
  font: 500 0.45rem/1 var(--mono);
  color: #222;
  text-transform: uppercase;
}
.turntable-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.turntable-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.turntable-btn {
  background: var(--tile);
  border: 1px solid var(--seam);
  color: var(--salt);
  font: 500 0.74rem/1 var(--mono);
  padding: 8px 16px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.15s ease;
}
.turntable-btn:hover {
  border-color: var(--canvas-red);
  color: var(--red-ink);
  background: rgba(226, 167, 44, 0.1);
}
.turntable-btn.active {
  background: var(--canvas-red);
  color: var(--salt);
  border-color: var(--canvas-red);
  font-weight: 700;
}

/* Floating musical notes */
.floating-note {
  display: inline-block;
  color: var(--canvas-gold);
  font-size: 1.1rem;
  opacity: 0.8;
  animation: noteFloat 3s ease-in-out infinite;
}
@keyframes noteFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50% { transform: translateY(-6px) rotate(8deg); opacity: 1; text-shadow: 0 0 8px rgba(226, 167, 44, 0.6); }
}

/* ---------- UNIFIED STORY CHAPTERS & LEADER NAVIGATION ---------- */
.story-chapters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 20px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--rim);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.story-chapter-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--seam);
  border: 1px solid var(--rim);
  border-radius: 4px;
  color: var(--salt);
  font: 600 0.76rem/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
}
.story-chapter-link:hover {
  background: var(--canvas-gold);
  color: #111;
  border-color: var(--canvas-gold);
}
.unified-story-banner {
  background: var(--seam);
  border: 1px solid var(--canvas-gold);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.unified-story-banner .banner-text {
  flex: 1 1 300px;
}
.unified-story-banner .banner-text h3 {
  font-size: 16px;
  margin: 4px 0 0 0;
  color: var(--salt);
  line-height: 1.4;
}
.leader-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.leader-pillar-card {
  background: var(--card);
  border: 1px solid var(--rim);
  border-radius: 6px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s ease;
}
.leader-pillar-card:hover {
  border-color: var(--canvas-gold);
}

/* ---------- STORY ERA SCRUBBER ---------- */
.era-scrubber {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.era-pill {
  /* An era pill names an era: roots. Its ACTIVE state stays red, because choosing is an action. */
  background: var(--tile);
  border: 1px solid var(--canvas-green);
  color: var(--salt);
  font: 500 0.72rem/1 var(--mono);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.15s ease;
}
.era-pill:hover, .era-pill.active {
  background: var(--canvas-red);
  color: var(--salt);
  border-color: var(--canvas-red);
}

/* ---------- FOOTER HERITAGE CRESTS (Logos > Words) ---------- */
.footer-crest-row {
  border-bottom: 1px solid var(--seam);
  padding-bottom: 24px;
  margin-bottom: 20px;
}
.crest-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}
.crest-item, .crest-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.crest-img {
  height: 48px;
  width: auto;
  border-radius: 4px;
  border: 1px solid rgba(226, 167, 44, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tuff-gong-badge, .basement-badge, .brotherhood-badge {
  font: 800 0.72rem/1 var(--mono);
  letter-spacing: 0.14em;
  padding: 8px 12px;
  border-radius: 2px;
  text-transform: uppercase;
}
.tuff-gong-badge {
  color: var(--canvas-gold);
  border: 1px dashed var(--canvas-gold);
  background: rgba(226, 167, 44, 0.08);
}
.basement-badge {
  color: #34d399;
  border: 1px dashed #34d399;
  background: rgba(52, 211, 153, 0.08);
}
.brotherhood-badge {
  color: #f87171;
  border: 1px dashed #f87171;
  background: rgba(248, 113, 113, 0.08);
}
.crest-label {
  font: 400 0.62rem/1 var(--mono);
  color: var(--ash);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- FEATURED ALBUM & ARCHIVAL SPOTLIGHT ---------- */
.featured-album-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  background: radial-gradient(circle at 80% 20%, rgba(226, 167, 44, 0.06) 0%, rgba(18, 18, 16, 0.95) 70%);
  border: 1px solid var(--seam-strong);
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 32px;
  align-items: center;
}
@media (max-width: 768px) {
  .featured-album-card { grid-template-columns: 1fr; }
}
.featured-album-card .cover-wrap {
  aspect-ratio: 1;
  background: var(--tile);
  overflow: hidden;
  border: 1px solid var(--seam);
  position: relative;
  display: block;
}
.featured-album-card .cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-album-card .album-type-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(226, 167, 44, 0.4);
  color: var(--canvas-gold);
  font: 500 0.65rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 2px;
}
.featured-album-card .content {
  display: grid;
  gap: 12px;
}
.featured-album-card .desc {
  font: 400 0.92rem/1.65 var(--body);
  color: var(--salt);
  max-width: 65ch;
}
.featured-album-card .meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.featured-album-card .pill {
  font: 400 0.7rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--seam);
  color: var(--ash);
  border-radius: 2px;
}

/* ---------- gallery showcase & lightbox ---------- */
.gallery-hero {
  position: relative;
}
.gallery-book-banner {
  background: var(--canvas-red);
  color: var(--void);
  padding: clamp(48px, 6vw, 84px) var(--gutter);
  border-top: 1px solid var(--seam);
  border-bottom: 1px solid var(--seam);
}
.gallery-banner-grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.gallery-banner-visual .banner-img-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  background: #000;
}
.gallery-banner-visual img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-banner-visual .res-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.88);
  color: var(--canvas-gold);
  font: 600 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 2px;
}
.gallery-banner-copy .specs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.gallery-banner-copy .specs-pills .pill {
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 3px;
  color: var(--void);
}
.gallery-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px var(--gutter) 16px;
}
.gallery-filter-bar .filter-pill {
  padding: 10px 20px;
  background: rgba(248, 248, 246, 0.04);
  border: 1px solid rgba(248, 248, 246, 0.16);
  color: var(--salt);
  font: 600 0.78rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gallery-filter-bar .filter-pill:hover,
.gallery-filter-bar .filter-pill.active {
  background: var(--canvas-red);
  color: var(--salt);
  border-color: var(--canvas-red);
  box-shadow: 0 4px 16px rgba(226, 167, 44, 0.35);
  transform: translateY(-1px);
}
.gallery-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: 24px;
}
.gallery-card {
  background: rgba(18, 17, 16, 0.65);
  border: 1px solid rgba(248, 248, 246, 0.12);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  cursor: pointer;
}
.gallery-card:hover {
  border-color: var(--canvas-red);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(226, 167, 44, 0.2);
}
.gallery-card.featured {
  grid-column: span 2;
}
.gallery-card .card-media {
  position: relative;
  width: 100%;
  background: #090908;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  max-height: 640px;
}
.gallery-card.featured .card-media {
  min-height: 520px;
  max-height: 800px;
}
.gallery-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
  display: block;
}
.gallery-card:hover .card-media img {
  transform: scale(1.02);
}
.gallery-card .card-overlay {
  position: absolute;
  inset: 0;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, transparent 35%);
}
.gallery-card .card-badge {
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 2px;
  pointer-events: none;
}
.gallery-card .card-badge.cat {
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(248, 248, 246, 0.2);
  color: var(--canvas-gold);
}
.gallery-card .card-badge.res {
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(248, 248, 246, 0.15);
  color: var(--ash);
}
.gallery-card .card-info {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.gallery-card .card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gallery-card .card-era {
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.gallery-card .card-num {
  font: 400 0.72rem/1 var(--mono);
  color: var(--ash);
}
.gallery-card .card-title {
  font: 700 1.25rem/1.25 var(--display);
  color: var(--salt);
  margin: 0;
}
.gallery-card .card-desc {
  font: 400 0.88rem/1.55 var(--body);
  color: var(--ash);
  margin: 0;
}
.gallery-card .btn-inspect {
  margin-top: auto;
  align-self: flex-start;
  padding: 7px 14px;
  background: rgba(248, 248, 246, 0.06);
  border: 1px solid rgba(248, 248, 246, 0.18);
  border-radius: 3px;
  color: var(--salt);
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gallery-card .btn-inspect:hover {
  background: var(--canvas-red);
  color: var(--void);
  border-color: var(--canvas-red);
}
.gallery-contact-sheet {
  margin-top: 48px;
  border-top: 1px solid var(--seam);
  padding-top: 48px;
}
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  padding: 24px;
  overflow-y: auto;
}
.gallery-lightbox .lightbox-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.gallery-lightbox .lightbox-dialog {
  position: relative;
  max-width: 1400px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(14, 13, 12, 0.98);
  border: 1px solid rgba(226, 167, 44, 0.35);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  z-index: 1;
}
.gallery-lightbox .lightbox-stage {
  width: 100%;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 16px;
  overflow: hidden;
}
.gallery-lightbox .lightbox-stage img {
  max-width: 100%;
  max-height: 66vh;
  object-fit: contain;
  border-radius: 4px;
}
.gallery-lightbox .lightbox-caption {
  width: 100%;
  padding: 20px 28px;
  background: rgba(18, 17, 16, 0.98);
  border-top: 1px solid rgba(248, 248, 246, 0.12);
}
.gallery-lightbox .caption-head {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.gallery-lightbox .badge-era {
  font: 600 0.7rem/1 var(--mono);
  color: var(--green-ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gallery-lightbox .badge-res {
  font: 500 0.7rem/1 var(--mono);
  color: var(--ash);
  letter-spacing: 0.08em;
}
.gallery-lightbox .lightbox-title {
  font: 700 1.35rem/1.25 var(--display);
  color: var(--salt);
  margin: 0 0 6px;
}
.gallery-lightbox .lightbox-desc {
  font: 400 0.9rem/1.55 var(--body);
  color: var(--ash);
  margin: 0 0 12px;
}
.gallery-lightbox .lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(248, 248, 246, 0.2);
  color: var(--salt);
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.gallery-lightbox .lightbox-close:hover {
  background: var(--canvas-red);
  color: var(--void);
}
.gallery-lightbox .lightbox-nav {
  position: absolute;
  top: 40%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(248, 248, 246, 0.2);
  color: var(--salt);
  font-size: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}
.gallery-lightbox .lightbox-nav.prev { left: 16px; }
.gallery-lightbox .lightbox-nav.next { right: 16px; }
.gallery-lightbox .lightbox-nav:hover {
  background: var(--canvas-red);
  color: var(--void);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .grid.four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frame { grid-column: span 4; }
  .frame.wide { grid-column: span 8; }
}
@media (max-width: 900px) {
  .gallery-showcase-grid { grid-template-columns: 1fr; }
  .gallery-card.featured { grid-column: span 1; }
  .gallery-banner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .split, .book { grid-template-columns: 1fr; }
  .grid.four, .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame { grid-column: span 6; }
  .frame.wide { grid-column: span 12; }
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--void); border-bottom: 1px solid var(--seam); padding: 10px var(--gutter) 18px; flex-direction: column; gap: 0; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--seam); }
  .masthead[data-open="true"] .nav { display: flex; }
}
@media (max-width: 520px) {
  .grid.four, .grid.three, .grid.two { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Ink inside the book banner. Its background moved from gold to red, and dark ink that measured 9.8:1 on gold
   measures 2.95:1 on red. Anything readable inside a red field takes the light ink; the gold field keeps the
   dark one. Changing a background is never a local edit — it re-parents the contrast of every child. */
.gallery-book-banner .eyebrow,
.gallery-book-banner .h2,
.gallery-book-banner .pill,
.gallery-book-banner .ghost,
.gallery-book-banner .lede,
.gallery-book-banner p,
.gallery-book-banner a { color: var(--salt); }
.gallery-book-banner .pill,
.gallery-book-banner .ghost { border-color: rgba(248, 248, 246, 0.55); }

/* Pre-existing: a gold field carried --ash labels (1.57:1) and --salt body copy (2.02:1). On gold the ink must
   be dark; these are the only two that were still light. */
.canvas-gold dt,
.canvas-gold .lede,
.canvas-gold p { color: var(--ink-on-gold); }
.canvas-gold .muted, .canvas-gold dt { color: rgba(18, 17, 16, 0.74); }

/* A red field's secondary text was --ash (2.11:1). Light, translucent ink keeps the hierarchy and passes. */
.canvas-red .sub, .canvas-red .muted, .canvas-red dt { color: rgba(248, 248, 246, 0.78); }

/* The banner's copy lives in .gallery-banner-copy, a sibling branch of .gallery-book-banner — my first pass
   targeted the banner element and never reached these. Structure decides which rule wins, so read the DOM
   chain instead of assuming the class you changed is the ancestor. */
.gallery-banner-copy .lede,
.gallery-banner-copy p,
.gallery-banner-copy .pill,
.gallery-banner-copy .h2,
.gallery-banner-copy .eyebrow,
.gallery-banner-copy a.ghost { color: var(--salt); }
.gallery-banner-copy .pill,
.gallery-banner-copy a.ghost { border-color: rgba(248, 248, 246, 0.55); }

/* The dub-siren label used --ink-on-gold (18,17,16) while sitting on --tile (13,13,12): 1.03:1, effectively
   invisible. Dark ink belongs on a gold field, and this one is not on gold. */
/* The label is a SIBLING of .dub-siren-box, inside .sound-system-bar — I targeted the box twice before
   reading the markup. Read the DOM; do not infer it from the class you happen to know. */
.sound-system-bar .eyebrow { color: var(--canvas-gold); }

/* .gallery-banner-copy .specs-pills .pill (three classes) outranks a two-class rule, so the light ink never
   applied. Match the winning selector's specificity rather than adding another rule beneath it. */
.gallery-banner-copy .specs-pills .pill { color: var(--salt); border-color: rgba(248, 248, 246, 0.55); }

/* BEGIN reggae-cohesion-20260916 — shared record-sleeve language.
   Extends the existing roots palette, typography and component system. */
:root {
  --salt: #f5efdf;
  --ash: #aaa79e;
  --red-ink: #eb7465;
  --green-ink: #69b585;
  --section-space: clamp(56px, 8vw, 112px);
}

/* The navigation belongs to the same sleeve on every page. */
.masthead { min-height: 64px; background: #090b09; }
.nav a { min-height: 32px; display: inline-flex; align-items: center; }
.nav-toggle { min-height: 44px; border-color: var(--red-ink); }
.nav a[aria-current="page"] { color: var(--canvas-gold); }
.footer { background: #101a14; padding-block: 40px 56px; }

/* Consistent editorial rhythm; utility headings keep their compact scale. */
.section { padding-block: var(--section-space); }
.section-head { gap: 18px; }
.hero > .eyebrow, .section-head > .eyebrow { color: var(--canvas-gold); }
.hero > .lede { max-width: 58ch; }
.h2 { line-height: 1; }
.release-year { color: var(--green-ink); }
.canvas-gold .release-year { color: var(--ink-on-gold); }
.canvas-red .release-year, .canvas-green .release-year { color: var(--salt); }
.canvas-gold .section-head > .eyebrow { color: var(--ink-on-gold); }
.canvas-red .section-head > .eyebrow,
.canvas-green .section-head > .eyebrow { color: var(--salt); }

/* Record sleeves and connection cards share a quiet, square frame. */
.item, .social, .connect-logo-card, .connect-logos-deck {
  border-radius: 0;
  box-shadow: none;
  border-color: var(--seam-strong);
}
.item:hover, .social:hover, .connect-logo-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--red-ink);
}
.item:hover .art img, .connect-logo-card:hover svg,
.social:hover .social-icon { transform: none; }
.item:hover .title { color: inherit; }
.item .links a:hover, .item .links a:focus-visible {
  color: var(--red-ink);
  border-color: currentColor;
}
.canvas-gold .item .links a:hover,
.canvas-gold .item .links a:focus-visible { color: var(--ink-on-gold); }
.canvas-red .item .links a:hover, .canvas-green .item .links a:hover,
.canvas-red .item .links a:focus-visible, .canvas-green .item .links a:focus-visible { color: var(--salt); }
.btn { min-height: 44px; font-weight: 500; border-color: var(--red-ink); }
.btn:focus-visible { background: var(--canvas-red); color: var(--salt); }
.canvas-gold .btn:focus-visible { background: var(--ink-on-gold); color: var(--canvas-gold); }

/* Respect the existing reduced-motion preference, including later spring rules. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .ghost, .ar-claim-btn, .btn-deal, .shop-quickview-trigger {
    transition: none !important;
    transform: none !important;
  }
}
@media (max-width: 820px) {
  .nav { background: #090b09; max-height: calc(100dvh - 64px); overflow-y: auto; }
  .nav a { min-height: 44px; }
}
/* END reggae-cohesion-20260916 */

/* BEGIN hub-flow-20260916 — extend the Music Business Hub's editorial rhythm.
   Page-scoped so the approved Hub keeps its existing composition. */
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="gallery"], [data-edit-page="shop"]) {
  --flow-pad: max(20px, calc((100% - 1120px) / 2));
  --flow-tri: linear-gradient(90deg, var(--canvas-red) 0 33.33%, var(--canvas-gold) 33.33% 66.66%, var(--canvas-green) 66.66%);
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .hero,
body[data-edit-page="gallery"] .gx-hero {
  padding: clamp(36px, 6vw, 80px) var(--flow-pad) clamp(32px, 5vw, 64px);
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(100deg, var(--void) 22%, transparent 90%), repeating-radial-gradient(circle at 110% 120%, transparent 0 15px, rgba(245,239,223,.045) 15px 16px), var(--void);
  border-bottom: 3px solid transparent;
  border-image: var(--flow-tri) 1;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="gallery"], [data-edit-page="shop"]) .poster {
  font-size: clamp(60px, 8.2vw, 118px);
  line-height: .92;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .hero > .eyebrow,
body[data-edit-page="gallery"] .gx-hero > .eyebrow {
  margin: 0;
  font-size: .72rem;
  line-height: 1.6;
  color: var(--canvas-gold);
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .hero > .lede,
body[data-edit-page="gallery"] .gx-hero .gx-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--salt);
  max-width: 58ch;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .brotherhood-plaque {
  margin: 0 0 12px;
  padding: 12px 0 12px 16px;
  border: 0;
  border-left: 2px solid var(--canvas-gold);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .brotherhood-plaque .text {
  font-size: .68rem;
  line-height: 1.6;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero-meta {
  gap: 10px 20px;
  padding-block: 16px;
  border-block: 1px solid var(--seam);
}
body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .sheet { margin-top: 16px; }
body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > * { min-width: 0; }
body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .frame .code {
  position: relative; top: auto; bottom: auto; left: auto;
  padding: 5px 7px;
  background: rgba(0,0,0,.8);
  color: var(--salt);
}

/* Long-form pages use the same content measure and section cadence as the Hub. */
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .section.wrap {
  padding-inline: var(--flow-pad);
  padding-block: clamp(48px, 6vw, 88px);
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .section-head {
  max-width: 760px;
  margin-bottom: 32px;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .section-head .h2 {
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .item {
  border: 1px solid var(--seam);
  background: var(--tile);
  color: var(--salt);
  gap: 14px;
  padding-bottom: 18px;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .item:is(:hover, :focus-within) {
  border-color: var(--red-ink);
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .item .title { line-height: 1.15; }
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .item .links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .item .links a:is(:hover, :focus-visible) { color: var(--red-ink); }

/* Chapter navigation follows the Hub's horizontal navigation pattern. */
body[data-edit-page="his-story"] .story-chapters-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid var(--seam-strong);
  border-radius: 0;
  background: var(--void);
  box-shadow: none;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--canvas-gold) var(--tile);
}
body[data-edit-page="his-story"] .story-chapter-link {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-right: 1px solid var(--seam);
  border-radius: 0;
  background: transparent;
  color: var(--salt);
  font: 400 .7rem/1.4 var(--mono);
  letter-spacing: .06em;
  scroll-snap-align: start;
  white-space: nowrap;
}
body[data-edit-page="his-story"] .story-chapter-link:is(:hover, :focus-visible) {
  transform: none;
  box-shadow: none;
  outline-offset: -3px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
/* This feature has an inline dark background; its canvas-gold class must not give it dark ink. */
body[data-edit-page="his-story"] [data-section="story.books_feature"] {
  color: var(--salt);
  border-radius: 0 !important;
  border-width: 1px !important;
}
body[data-edit-page="his-story"] [data-section="story.books_feature"] :is(.eyebrow, .muted, .lede) { color: var(--salt); }
body[data-edit-page="his-story"] section[id] { scroll-margin-top: 88px; }

/* The gallery keeps complete photographs and its working darkroom viewer. */
body[data-edit-page="gallery"] .gx-hero { display: grid; grid-template-columns: minmax(0, 1fr); }
body[data-edit-page="gallery"] .gx-count {
  margin: 0;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
}
body[data-edit-page="gallery"] .gx-count small { font-size: clamp(16px, 1.8vw, 22px); line-height: 1.5; margin-top: 8px; }
body[data-edit-page="gallery"] .gx-rule { height: 2px; }
body[data-edit-page="gallery"] .gx-hero .gx-lede { margin: 0; }
body[data-edit-page="gallery"] .gx-strip-wrap { margin-inline: 0; margin-top: 10px; }
body[data-edit-page="gallery"] .gx-dig { padding-inline: var(--flow-pad); gap: 0; }
body[data-edit-page="gallery"] .gx-dig button { border-radius: 0; min-height: 48px; }
body[data-edit-page="gallery"] .gx-dig button:hover { transform: none; color: var(--red-ink); }
body[data-edit-page="gallery"] .gx-dig button[aria-pressed="true"] {
  background: var(--canvas-red);
  color: var(--salt);
  border-color: var(--red-ink);
}
body[data-edit-page="gallery"] .gx-dig button[aria-pressed="true"] span { color: var(--salt); }
body[data-edit-page="gallery"] .gx-sheet { padding-inline: var(--flow-pad); }

@media (min-width: 960px) {
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 22px;
    align-items: start;
  }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > .brotherhood-plaque { grid-column: 1 / -1; grid-row: 1; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > .eyebrow { grid-column: 1 / 7; grid-row: 2; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > .poster { grid-column: 1 / 8; grid-row: 3; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > :is(.hero-meta, .sha-eq) { grid-column: 1 / 7; grid-row: 4; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > .lede { grid-column: 1 / 7; grid-row: 5; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > .actions { grid-column: 1 / 7; grid-row: 6; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > .sheet { display: contents; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .frame { grid-column: span 2; width: 100%; min-width: 0; aspect-ratio: 1; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .frame:first-child {
    grid-column: 8 / -1;
    grid-row: 2 / 7;
    align-self: stretch;
    aspect-ratio: auto;
    border: 1px solid var(--seam-strong);
    min-height: 420px;
  }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .frame:first-child img { object-position: 50% 25%; }
  body[data-edit-page="his-story"] .hero > .story-chapters-bar { grid-column: 1 / -1; grid-row: 7; width: 100%; }
  body[data-edit-page="gallery"] .gx-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
  body[data-edit-page="gallery"] .gx-hero > :is(.eyebrow, .poster, .gx-count) { grid-column: 1; }
  body[data-edit-page="gallery"] .gx-hero > .gx-lede { grid-column: 2; grid-row: 2 / 4; align-self: center; }
  body[data-edit-page="gallery"] .gx-hero > :is(.gx-rule, .actions, .gx-strip-wrap) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  body:is([data-edit-page="home"], [data-edit-page="his-story"], [data-edit-page="shop"]) .hero { gap: 18px; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero > .actions .btn { flex: 1 1 140px; justify-content: center; line-height: 1.4; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .frame { grid-column: span 1; aspect-ratio: 1; }
}
@media (max-width: 360px) {
  body[data-edit-page="home"] .connect-logos-deck .deck-row { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .specs dd { font-size: 1.3rem; }
}
/* END hub-flow-20260916 */

/* BEGIN footer-flow-20260916: simple reggae record-sleeve footer, owner refinement. */
body .footer {
  position: relative;
  padding: clamp(36px, 5vw, 64px) max(20px, calc((100% - 1120px) / 2)) 24px;
  background: radial-gradient(ellipse at 50% 0, rgba(211,164,54,.075), transparent 65%), repeating-radial-gradient(circle at 100% 120%, transparent 0 18px, rgba(238,215,154,.035) 19px 20px), #10130e;
  color: #f2e5c6;
  border: 0;
  gap: 24px;
  text-align: center;
}
body .footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, #cb493a 0 33.333%, #e2b744 33.333% 66.666%, #4f9963 66.666%);
}
/* Keep the closing note focused on the artist and the places to connect. */
body .footer .footer-crest-row,
body .footer > .row[style*="--hub-gold"],
body .footer .footer-tagline[style] { display: none; }
body .footer .row { min-width: 0; justify-content: center; gap: 8px 20px; }
body .footer .footer-brand-row { flex-direction: column; align-items: center; padding: 0; border: 0; gap: 24px; }
body .footer .footer-brand { min-width: 0; align-items: center; gap: 12px; }
body .footer .wordmark {
  display: block; font-size: clamp(48px, 7vw, 96px); line-height: .95;
  white-space: normal; letter-spacing: -.025em; color: #f2e5c6;
}
body .footer .wordmark span {
  color: #e2b744;
  background: linear-gradient(90deg, #e16a52 0 33.333%, #e2b744 33.333% 66.666%, #79b77c 66.666%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
body .footer .footer-tagline { max-width: 62ch; font-size: 11px; line-height: 1.7; letter-spacing: .1em; color: #bcb89d; }
body .footer .footer-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; }
body .footer .footer-logo-btn {
  flex-direction: column; gap: 8px; width: auto; min-width: 60px; min-height: 56px; height: auto;
  padding: 8px 2px; border: 0 !important; border-radius: 0; background: transparent;
  color: #e1d9bd; box-shadow: none; transform: none;
}
body .footer .footer-logo-btn::after { content: attr(aria-label); font: 400 10px/1.3 var(--mono); }
body .footer .actions { flex-wrap: wrap; justify-content: center; gap: 2px 20px; }
body .footer .footer-nav-link {
  min-height: 44px; padding: 10px 4px; border: 0 !important; border-radius: 0; background: transparent;
  color: #f2e5c6; font-size: 12px; line-height: 1.5; letter-spacing: .08em; white-space: normal;
}
body .footer nav .footer-nav-link { font: 700 clamp(18px, 2vw, 24px)/1.2 var(--display); letter-spacing: .06em; }
body .footer nav .footer-nav-link:nth-child(3n + 1) { color: #e16a52; }
body .footer nav .footer-nav-link:nth-child(3n + 2) { color: #e2b744; }
body .footer nav .footer-nav-link:nth-child(3n) { color: #79b77c; }
body .footer :is(.footer-nav-link,.footer-logo-btn):is(:hover,:focus-visible) { color: #fff3ce; background: transparent; box-shadow: none; transform: none; text-decoration: underline; text-underline-offset: 5px; }
body .footer a:focus-visible { outline: 2px solid #e2b744; outline-offset: 4px; }
body .footer > .row:last-child { border-top: 1px solid rgba(242,229,198,.12); padding-top: 20px; justify-content: space-between; text-align: left; }
body .footer small { font-size: 10px; line-height: 1.7; letter-spacing: .035em; color: #bcb89d; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  body .footer .wordmark { max-width: 460px; }
  body .footer .wordmark span { display: block; margin-top: 6px; }
  body .footer .footer-logos { max-width: 360px; gap: 6px; }
  body .footer .footer-logo-btn { flex: 0 0 calc(25% - 6px); min-width: 0; }
  body .footer .footer-logo-btn::after { font-size: 9px; }
  body .footer .actions { gap: 0 16px; }
  body .footer nav .footer-nav-link { font-size: 18px; }
  body .footer > .row:last-child { flex-direction: column; align-items: center; text-align: center; }
}
/* END footer-flow-20260916 */

/* BEGIN editor-hooks-20260917: editable wordmark and captions. */
.wordmark .wm-lead { color: inherit; font-weight: inherit; }
body .footer .wordmark .wm-lead { color: inherit; background: none; -webkit-text-fill-color: currentColor; display: inline; margin-top: 0; }
/* a frame caption is an editor lever: .frame .code is pointer-events:none, so the click fell through to the picture.
   The caption sits inside the frame's own <a>, so a visitor's click still opens the picture. */
.frame .code [data-edit] { pointer-events: auto; }
/* a lever that is the whole text of its paragraph fills it, so a click anywhere in the paragraph selects it */
.sk-fill { display: block; }
/* END editor-hooks-20260917 */

/* BEGIN hub-carry-20260917: scoped carry styles; shared wordmark. */
.wordmark { color: var(--salt) }
.wordmark b { font-weight: 600 }
.wordmark .wm1 { color: var(--red-ink) }
.wordmark .wm2 { color: var(--canvas-gold) }
.wordmark .wm3 { color: var(--green-ink) }
body .footer .wordmark { color: var(--salt) }
/* 2026-09-17: editable wm-tail overrides footer transparency. */
body .footer .wordmark .wm-tail { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.wordmark .wm-tail { color: inherit; }
body[data-carry] { --carry-tri: linear-gradient(90deg, var(--canvas-red) 0 33.33%, var(--canvas-gold) 33.33% 66.66%, var(--canvas-green) 66.66% 100%); --carry-fast: var(--m-dur-fast, 120ms); --carry-base: var(--m-dur-base, 360ms); --carry-spring: var(--m-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) }
body[data-carry] .carry-subnav { position: sticky; top: 64px; z-index: 9; background: var(--void); border-bottom: 1px solid var(--seam) }
body[data-carry] .carry-subnav__scroll { display: flex; max-width: 1080px; margin: 0 auto; padding: 0 16px; overflow-x: auto; white-space: nowrap; scroll-snap-type: x proximity; scrollbar-width: none }
body[data-carry] .carry-subnav__scroll::-webkit-scrollbar { display: none }
body[data-carry] .carry-subnav a { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 11px; font: 400 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); text-decoration: none; border-right: 1px solid var(--seam); transition: color var(--carry-fast) ease, background-color var(--carry-fast) ease }
body[data-carry] .carry-subnav a:first-child { border-left: 1px solid var(--seam) }
body[data-carry] .carry-subnav a:is(:hover, :focus-visible) { color: var(--red-ink); background-color: var(--tile) }
body[data-carry] .carry-subnav a:focus-visible { outline: 2px solid var(--salt); outline-offset: -3px }
body[data-carry] .carry-subnav a[aria-current="true"] { color: var(--salt); background: var(--carry-tri) no-repeat left bottom / 100% 3px, var(--tile) }
body[data-carry] :is(.hero, .gx-hero) { position: relative; isolation: isolate; border-bottom: 3px solid transparent; border-image: var(--carry-tri) 1 }
body[data-carry] :is(.hero, .gx-hero)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-radial-gradient(circle at 104% 118%, transparent 0 10px, var(--seam) 10px 11px); -webkit-mask-image: linear-gradient(100deg, transparent 38%, rgba(0, 0, 0, .7) 100%); mask-image: linear-gradient(100deg, transparent 38%, rgba(0, 0, 0, .7) 100%) }
body[data-carry] main > .section + .section { border-top: 1px solid var(--seam) }
body[data-carry] .section-head > .eyebrow { font: 400 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase }
body[data-carry] .canvas-gold :is(.hero, .section-head) > .eyebrow { color: var(--ink-on-gold) }
body[data-carry] main .btn { --carry-c: var(--canvas-red); --carry-text: var(--salt); --carry-fill: var(--canvas-red); --carry-on: var(--salt); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 18px; border: 1px solid var(--carry-c); border-radius: 0; background: transparent; color: var(--carry-text); box-shadow: none; font: 400 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--carry-fast) ease, color var(--carry-fast) ease, border-color var(--carry-fast) ease, transform var(--carry-fast) var(--carry-spring) }
body[data-carry] main .btn[data-magnet] { transition-duration: var(--carry-base) }
body[data-carry] main .btn:is(:hover, :focus-visible) { background: var(--carry-fill); border-color: var(--carry-fill); color: var(--carry-on) }
body[data-carry] main .btn[data-magnet]:active { transition-duration: var(--carry-fast) }
body[data-carry] main .btn:focus-visible { outline: 2px solid var(--canvas-gold); outline-offset: 3px }
body[data-carry] main .btn[aria-busy="true"] { cursor: progress; border-color: var(--canvas-gold) }
body[data-carry] main .btn:is([disabled], [aria-disabled="true"]) { background: transparent; border-color: var(--seam); color: var(--ash); cursor: not-allowed }
body[data-carry] main :is([data-tri] > .btn:nth-child(3n+2):not([data-tone]), .btn[data-tone="gold"]) { --carry-c: var(--canvas-gold); --carry-text: var(--canvas-gold); --carry-fill: var(--canvas-gold); --carry-on: var(--ink-on-gold) }
body[data-carry] main :is([data-tri] > .btn:nth-child(3n):not([data-tone]), .btn[data-tone="green"]) { --carry-c: var(--green-ink); --carry-text: var(--green-ink); --carry-fill: var(--canvas-green); --carry-on: var(--salt) }
body[data-carry] main :is([data-tri] > .btn:nth-child(3n+1):not([data-tone]), .btn[data-tone="red"]) { --carry-c: var(--canvas-red); --carry-text: var(--salt); --carry-fill: var(--canvas-red); --carry-on: var(--salt) }
body[data-carry] main .canvas-gold .btn.btn.btn.btn { --carry-c: var(--ink-on-gold); --carry-text: var(--ink-on-gold); --carry-fill: var(--ink-on-gold); --carry-on: var(--canvas-gold) }
body[data-carry] :is(.gx-dig button, .era-pill, .turntable-btn, .siren-btn) { min-height: 44px; border: 1px solid var(--seam-strong); border-radius: 0; background: var(--tile); color: var(--salt); box-shadow: none; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color var(--carry-fast) ease, border-color var(--carry-fast) ease, background-color var(--carry-fast) ease, transform var(--carry-fast) var(--carry-spring) }
body[data-carry] :is(.gx-dig button, .era-pill, .turntable-btn, .siren-btn):is(:hover, :focus-visible) { color: var(--salt); border-color: var(--salt); transform: none }
body[data-carry] :is(.gx-dig button, .era-pill, .turntable-btn, .siren-btn):active { transform: scale(.96) }
body[data-carry] :is(.gx-dig button, .era-pill, .turntable-btn, .siren-btn):is([aria-pressed="true"], .active) { color: var(--salt); border-color: var(--seam-strong); background: var(--carry-tri) no-repeat left bottom / 100% 2px, var(--tile) }
body[data-carry] .gx-dig button[aria-pressed="true"] span { color: var(--canvas-gold) }
body[data-carry] :is(.item, .book, .connect-logo-card, .leader-pillar-card) { position: relative; transition: background-color var(--carry-base) var(--ease-arrive) }
body[data-carry] :is(.item, .book, .connect-logo-card, .leader-pillar-card)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1; background: var(--carry-tri); transform: scaleX(0); transform-origin: left; transition: transform var(--carry-base) var(--ease-arrive); pointer-events: none }
body[data-carry] :is(.item, .book, .connect-logo-card, .leader-pillar-card):is(:hover, :focus-within) { background: var(--tile) }
body[data-carry] :is(.item, .book, .connect-logo-card, .leader-pillar-card):is(:hover, :focus-within)::before { transform: scaleX(1) }
@media (prefers-reduced-motion: reduce) {
body[data-carry] :is(.gx-dig button, .era-pill, .turntable-btn, .siren-btn):active { transform: none }
body[data-carry] :is(.item, .book, .connect-logo-card, .leader-pillar-card)::before { transform: scaleX(1); opacity: .6 }
}
/* END hub-carry-20260917 */

/* turntable-ink-20260917 */
.turntable-showcase.canvas-gold,.turntable-showcase.canvas-gold :is(.h2,.lede,.turntable-controls-panel){color:var(--salt)}
.turntable-showcase.canvas-gold .eyebrow{color:var(--canvas-gold)}

/* BEGIN skyhigh-mobile-20260920: scoped primary navigation. */
.masthead[data-compact-nav] .nav a { min-height: 44px; }
.footer-chapters a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 820px) {
  .masthead[data-compact-nav] { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 0; }
  .masthead[data-compact-nav] .nav-toggle { display: none; }
  .masthead[data-compact-nav] .nav { box-sizing: border-box; position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); flex: 1 0 100%; width: 100%; min-width: 0; max-height: none; gap: 4px; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
  .masthead[data-compact-nav] .nav a { box-sizing: border-box; justify-content: center; min-width: 0; min-height: 48px; padding: 8px 3px; text-align: center; font-size: .75rem; line-height: 1.3; letter-spacing: .025em; text-wrap: balance; border: 0; }
  .masthead[data-compact-nav] .nav a:focus-visible { outline: 2px solid var(--canvas-gold); outline-offset: -2px; }
  .masthead[data-compact-nav] .nav a[aria-current="page"] { background: var(--tile); }
}
/* END skyhigh-mobile-20260920 */

/* BEGIN skyhigh-ux-carry-20260928 (owner 09-28 "BUTTONS AND UI AND UX EXTRAPOLATE FROM THE HISTORY SECTION ... OPTIMIZE FOR MOBILE").
   The his-story .btn language (square, >=44px, caps, .14em tracking, tricolor tone) carried onto the buttons that escaped
   hub-carry-20260917: build.py's inline-styled .ar-btn (4px radius, 11-14px mixed case, 38-42px tall), the gallery pills
   and chips, the landing archive link. .ar-btn sets its look in a style="" attribute, so only !important can reach it. */
body[data-carry] main .ar-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 18px !important; border: 1px solid var(--canvas-red) !important; border-radius: 0 !important; background: transparent !important; color: var(--salt) !important; font: 400 .78rem/1.25 var(--body) !important; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease }
body[data-carry] main .ar-btn[style*="canvas-gold"] { border-color: var(--canvas-gold) !important; background: var(--canvas-gold) !important; color: var(--ink-on-gold) !important; font-weight: 500 !important }
body[data-carry] main .ar-btn:is(:hover, :focus-visible) { background: var(--canvas-red) !important; border-color: var(--canvas-red) !important; color: var(--salt) !important }
body[data-carry] main .ar-btn:focus-visible { outline: 2px solid var(--canvas-gold); outline-offset: 3px }
body[data-carry] main :is(.gx-play-btn, .gx-play-links > a, .gx-ch-more) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 0; font: 400 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase }
body[data-carry] main .gx-toc-chip { border-radius: 0 }
body[data-carry] main .ld-archive-link { font: 400 .78rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase }
@media (max-width: 480px) {
  /* Font floor at phone width: nothing a visitor reads is under 12px (probe 09-28 found 7.2-11.8px labels). */
  body[data-carry] main :is(.gx-no, .era-tag, .sub, .ld-era__years, .ld-era__cap, .gx-toc-chip small, .gx-ch-words cite, .gx-type-sleeve small, .gx-dig button, .links a, .story-chapter-link, .play-mark, .album-type-badge, .era-pill, .eyebrow, .pill, dt, .src a, .code .c, .ld-rail__tab .label, .brotherhood-plaque .text, .ld-album__eyebrow, .ld-album__title, .ld-hrail__nav span, figcaption, cite, small) { font-size: 12px }
  body[data-carry] main .era-tag { font-size: 12px !important; border-radius: 0 !important }
  body[data-carry] .carry-subnav a { font-size: 12px }
}
/* END skyhigh-ux-carry-20260928 */

/* BEGIN skyhigh-big-bright-20260928 (owner 09-28 "KEEP GOING AND MAKE SURE THE PICTURES ARE BIG AND BRIGHT").
   Probe at 390px: hero contact sheets were 146-174px squares under dark label boxes; the gallery contact sheet
   letterboxed every photo in a fixed 48svh black box under grayscale(.12); the hero filmstrip ran at 65-127px under
   sepia(.18); hover dimmed frames to brightness(.82). Pictures now fill the width and nothing dulls them. */
body[data-carry] .frame:hover img { filter: brightness(1.06) saturate(1.06); }
body[data-carry] .gx-frame img { width: 100%; height: auto; aspect-ratio: auto; max-height: 80vh; object-fit: contain; object-position: center; filter: none; }
body[data-carry] .gx-frame:is(:hover, :focus-visible) img { filter: brightness(1.06) saturate(1.06); }
body[data-carry] .gx-strip img { height: clamp(132px, 34vw, 190px); filter: none; }
@media (max-width: 600px) {
  /* Hero contact sheet = one swipe rail of big pictures (home already swiped at 42%; his-story was a 2-up grid). */
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero.hero.hero .sheet { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero.hero.hero .frame { grid-column: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .frame .code { background: none; padding: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .6); }
  body:is([data-edit-page="home"], [data-edit-page="his-story"]) .hero .frame .code .t { font-size: 1.6rem; }
}
/* END skyhigh-big-bright-20260928 */

/* BEGIN skyhigh-reggae-artistic-portfolio-20260928 (owner 09-28: "REGGAE THEMED AND ARTISTIC", "THE HOLES ARE ALL OF THE TEXTS AND BORDERS AND CONTAINERS AND IMAGES AND SVGS THAT ARE TOO SMALL, NOT CLEAR, NOT BRIGHT ENOUGH. PLEASE USE HORIZONTAL SCROLLING. THIS IS AN ARTISTIC GALLERY AND PORTFOLIO"). */

/* 1. VIBRANT REGGAE BORDERS & SEAMS */
:root {
  --reggae-red: #a12f28;
  --reggae-gold: #e2a72c;
  --reggae-green: #1c5b3a;
  --reggae-gold-bright: #ffd15c;
  --reggae-red-bright: #e64a38;
  --reggae-green-bright: #2f9e66;
  --reggae-gold-border: rgba(226, 167, 44, 0.45);
  --reggae-red-border: rgba(161, 47, 40, 0.45);
  --reggae-green-border: rgba(28, 91, 58, 0.45);
  --reggae-seam: rgba(248, 248, 246, 0.28);
}

/* 2. TEXT SIZE FLOOR & CONTRAST UPGRADE */
body[data-carry] {
  --ash: #d4d4cc;
}

body[data-carry] main :is(.sub, .item .sub, .meta .sub, .meta-pills .pill, .meta-pill, .eyebrow, .ld-era__years, .ld-era__cap, .code .c, .code .n, .album-type-badge, .era-tag, .era-pill, dt, figcaption, cite, small, .crest-label) {
  font-size: clamp(13px, 1.1vw, 15px) !important;
  color: var(--reggae-gold-bright);
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Sitewide Fullscreen Picture Viewer */
dialog.sky-photo-dlg[open] {
  position: fixed !important; inset: 0 !important;
  box-sizing: border-box; display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100vw; height: 100vh; height: 100dvh;
  margin: 0 !important; padding: 0; border: 0;
  overflow: hidden; background: #050505; color: #fffdf5;
  z-index: 99999;
}
.sky-photo-dlg::backdrop { background: rgba(0, 0, 0, .94); }
.sky-photo-stage {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; padding: clamp(4px, 1vw, 12px); overflow: hidden; background: #050505;
}
.sky-photo-stage img {
  display: block; width: auto !important; height: auto !important;
  max-width: 100%; max-height: 100%; object-fit: contain !important;
  opacity: 1 !important; filter: none !important; transform: none !important;
}
.sky-photo-foot {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
  max-height: min(24dvh, 190px); padding: 10px clamp(14px, 2.5vw, 32px) 14px;
  border-top: 2px solid #e2a72c; background: #121512; overflow-y: auto;
}
.sky-photo-caption { order: 2; margin: 0; font: 500 clamp(15px, 1.5vw, 19px)/1.4 var(--body, sans-serif); color: #fffdf5; }
.sky-photo-actions { order: 1; display: flex; justify-content: flex-end; gap: 10px; }
.sky-photo-actions a, .sky-photo-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 2px solid #e2a72c; border-radius: 3px; background: #121512; color: #fffdf5;
  font: 700 14px/1.2 var(--body, sans-serif); text-decoration: none; cursor: pointer;
}
.sky-photo-actions a:hover, .sky-photo-actions button:hover {
  outline: 2px solid #5be69a; background: #e2a72c; color: #14110a;
}
main img[data-photo-openable] { cursor: zoom-in; }
main img[data-photo-openable]:focus-visible, main a[data-photo-open-link]:focus-visible {
  outline: 3px solid #ffd15c; outline-offset: 3px;
}

/* Ensure Buttons are clickable */
.btn, .ar-btn, button, a { pointer-events: auto !important; cursor: pointer !important; z-index: 10; }
/* END skyhigh-UX-update-captions-below */

/* Owner: the gallery's horizontal flag lettering carries the shared brand name. */
:root { --reggae-title-bands:linear-gradient(180deg,#e0303b 0 33%,#f4b400 33% 66%,#1f9a55 66%); }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  body header .wordmark :is(.wm-lead,.wm-tail),
  body .footer .wordmark :is(.wm-lead,.wm-tail) {
    display:inline-block; background:var(--reggae-title-bands) !important;
    background-clip:text !important; -webkit-background-clip:text !important;
    color:transparent !important; -webkit-text-fill-color:transparent !important;
    -webkit-text-stroke:.35px rgba(255,253,245,.6);
  }
  body header .wordmark .wm-tail b,
  body .footer .wordmark .wm-tail b {
    color:transparent !important; -webkit-text-fill-color:transparent !important;
    background:none !important;
  }
  body .footer .wordmark :is(.wm-lead,.wm-tail) { -webkit-text-stroke:1px rgba(255,253,245,.6); }
}

/* BEGIN shared-connect-footer-20261001: the homepage's original channel art, one calm footer. */
body[data-edit-page] footer.footer #connect.footer-connect {
  --salt: #17251b;
  --ash: #344938;
  width: 100%; max-width: none; min-width: 0;
  margin: 0; padding: clamp(20px, 3vw, 40px);
  background: #eee7cf !important; color: #17251b !important;
  border: 1px solid #baac79; box-sizing: border-box;
  text-align: left; overflow: visible;
}
body[data-edit-page] footer.footer #connect.footer-connect .section-head { margin: 0 0 24px; }
body[data-edit-page] footer.footer #connect.footer-connect .section-head > .eyebrow { color: #344938 !important; }
body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-showcase {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 0; margin: 12px 0 0;
}
body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-plate {
  position: relative; display: inline-block; padding: 12px 18px;
  background: #0d0d0c; border-bottom: 3px solid #dba834;
}
body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-plate h2 {
  margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: 1;
  background: linear-gradient(180deg,#e0303b 0 33%,#f4b400 33% 66%,#1f9a55 66%);
  background-clip: text; -webkit-background-clip: text;
  color: #f4b400 !important; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .6px #fffdf5;
}
body[data-edit-page] footer.footer #connect.footer-connect .title-art { margin: 0; width: clamp(100px, 20vw, 220px); flex: 0 0 auto; }
body[data-edit-page] footer.footer #connect.footer-connect .title-art img { display: block; width: 100%; height: 120px; object-fit: contain; }
body[data-edit-page] footer.footer #connect.footer-connect .connect-logos-deck { margin: 0; padding: 0; background: transparent; border: 0; }
body[data-edit-page] footer.footer #connect.footer-connect .connect-logos-deck > .eyebrow { color: #344938 !important; line-height: 1.4; margin-bottom: 18px; }
body[data-edit-page] footer.footer #connect.footer-connect .deck-row { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 12px; overflow: visible; }
body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card {
  --connect-tone: #e2a72c;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 0; min-height: 90px; padding: 14px 8px; gap: 10px;
  background: #0b1410 !important; color: #f8f8f6 !important;
  border: 1px solid var(--connect-tone) !important; box-shadow: none !important;
  white-space: normal; text-align: center; box-sizing: border-box;
}
body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card:nth-child(3n + 2) { --connect-tone: #d64b40; }
body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card:nth-child(3n) { --connect-tone: #2f9e66; }
body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card svg { width: 24px; height: 24px; color: var(--connect-tone) !important; }
body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card .label { color: #f8f8f6 !important; font-size: 13px !important; line-height: 1.25; overflow-wrap: anywhere; }
body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card:is(:hover,:focus-visible) { outline: 3px solid #17251b; outline-offset: 3px; background: #17251b !important; }
body[data-edit-page] footer.footer #connect.footer-connect > .actions { justify-content: flex-start; }
body[data-edit-page] footer.footer #connect.footer-connect > .actions .btn { background: #17251b; color: #fffdf5 !important; }
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] { width: 100%; margin: 0; padding: 24px 0; text-align: left; background: transparent !important; }
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .leader-pillars-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .leader-pillar-card { padding: 20px; min-width: 0; }
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] :is(a,button) { min-height: 44px; box-sizing: border-box; display: inline-flex !important; align-items: center; overflow-wrap: anywhere; }
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] + .sha-groove { display: none; }
#connect, #connect-h, #leader-connect { scroll-margin-top: 110px; }
@media (max-width: 1000px) {
  body[data-edit-page] footer.footer #connect.footer-connect .deck-row { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width: 600px) {
  body[data-edit-page] footer.footer #connect.footer-connect { padding: 20px 16px; }
  body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-showcase { gap: 12px; }
  body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-plate { padding: 10px; }
  body[data-edit-page] footer.footer #connect.footer-connect .title-art { width: 92px; }
  body[data-edit-page] footer.footer #connect.footer-connect .title-art img { height: 90px; }
  body[data-edit-page] footer.footer #connect.footer-connect .deck-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card { min-height: 86px; }
  body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .leader-pillars-grid { grid-template-columns: minmax(0,1fr); }
}
/* END shared-connect-footer-20261001 */
/* The relocated bookings keep their dark-ground ink, independent of canvas-gold defaults. */
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] {
  --salt: #f8f4e9; --ash: #d3d8cd; color: #f8f4e9 !important;
}
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] :is(h2,h3,.lede) { color: #f8f4e9 !important; }
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .eyebrow { color: #e2b955 !important; }
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .leader-pillar-card { background: #111c16; border: 1px solid #687d64; }
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .leader-pillar-card p { color: #d3d8cd !important; }
body .footer .footer-logos:not(:has(a)) { display: none; }
/* Every shell supplies the title SVG's original dark matte; title-art.css is home-only. */
body[data-edit-page] footer.footer #connect.footer-connect .title-art,
body[data-edit-page] footer.footer #connect.footer-connect .title-art img { background: #0d0d0c; }

/* The shared ID scopes these rules above home-only art and legacy gold-canvas paint. */
body[data-edit-page] footer.footer #connect.footer-connect {
  width: 100% !important; max-width: 100% !important; padding: 32px 20px !important;
}
body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-showcase {
  display: flex !important; width: 100%; min-width: 0; gap: 24px !important;
}
body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-plate {
  margin: 0 !important; min-width: 0; max-width: 100%; flex: 0 1 auto;
}
body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-plate h2 {
  font-size: clamp(34px,5vw,64px) !important; -webkit-text-stroke: .6px #fffdf5 !important;
  -webkit-text-fill-color: transparent !important;
}
body[data-edit-page] footer.footer #connect.footer-connect .title-art {
  width: 220px !important; min-width: 0 !important; max-width: 42% !important;
  height: 140px !important; min-height: 0 !important; max-height: 140px !important;
  aspect-ratio: auto !important; padding: 8px !important; box-sizing: border-box;
  margin: 0 !important; border: 1px solid #e2a72c; border-radius: 0; box-shadow: none !important;
}
body[data-edit-page] footer.footer #connect.footer-connect .title-art img {
  width: 100% !important; height: 100% !important; min-width: 0 !important;
  max-width: 100% !important; max-height: 100% !important; aspect-ratio: auto !important;
  object-fit: contain !important;
}
body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card {
  min-height: 90px !important; height: auto !important; width: auto !important;
  flex-direction: column !important; padding: 14px 8px !important; font-family: var(--display) !important;
}
body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card .label {
  font-family: var(--display) !important; font-size: 15px !important; line-height: 1.25 !important;
}
body[data-edit-page] footer.footer #connect.footer-connect .eyebrow {
  color: #344938 !important; -webkit-text-fill-color: currentColor !important;
}
body[data-edit-page] footer.footer #connect.footer-connect .section-head > .eyebrow {
  color: #344938 !important; background: transparent !important;
}
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] :is(h2,h3,p,.lede,.btn,.ar-btn) {
  color: #f8f4e9 !important; -webkit-text-fill-color: currentColor !important;
}
body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .ar-btn {
  background: #172b1e !important; border: 1px solid #d4b761 !important;
}
@media(max-width:600px) {
  body[data-edit-page] footer.footer #connect.footer-connect { padding: 20px 16px !important; }
  body[data-edit-page] footer.footer #connect.footer-connect .reggae-title-showcase { gap: 12px !important; }
  body[data-edit-page] footer.footer #connect.footer-connect .title-art { width: 128px !important; height: 106px !important; }
  body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card { min-height: 90px !important; }
}

/* MARKED LAYER footer-compact-mobile-20261001 (claude-code:50b27e8f): owner "UTILIZE THE FOOTER FOR THE CONNECT/CONTACT".
   At phone width the shared footer was ~3.7k px on His Story. Connect tiles go 3-up and shorter; the four booking
   cards become one swipe rail (scroll-snap, links stay tabbable). Rollback: handoff/skyhigh-cohesion-20261001/l1-footer/site.css.pre-slice2 */
@media (max-width: 600px) {
  body[data-edit-page] footer.footer #connect.footer-connect .deck-row { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
  body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card { min-height: 64px; padding: 8px 4px !important; gap: 4px !important; }
  body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card svg { width: 20px; height: 20px; }
  body[data-edit-page] footer.footer #connect.footer-connect .connect-logo-card .label { font-size: 11px !important; letter-spacing: .02em; overflow-wrap: anywhere; }
  body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .leader-pillars-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  }
  body[data-edit-page] footer.footer #leader-connect[data-section="story.leader_connect"] .leader-pillar-card { scroll-snap-align: start; padding: 16px; }
}

/* MARKED LAYER connect-one-line-20261001 (claude-code:50b27e8f). OWNER 2026-10-01 ~11:52Z: "please make the connect a
   single line that scrolls horizontally and also is just buttons lets not overthink it". Every Connect link (direct
   email, Instagram, Facebook, the 14 platforms, bookings) becomes one row of plain buttons that scrolls sideways; the
   title plate and art are hidden visually but the heading stays for screen readers.
   Rollback: handoff/skyhigh-cohesion-20261001/connect-line/site.css.preimage */
body[data-edit-page] footer.footer #connect.footer-connect {
  display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 16px 0 !important; margin: 0 auto !important; max-width: min(1200px, calc(100% - 32px));
}
body[data-edit-page] footer.footer #connect.footer-connect::before,
body[data-edit-page] footer.footer #connect.footer-connect::after { content: none !important; display: none !important; }
body[data-edit-page] footer.footer #connect.footer-connect > .section-head {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0 !important;
}
body[data-edit-page] footer.footer #connect.footer-connect :is(.actions, .connect-logos-deck, .deck-row) { display: contents !important; }
body[data-edit-page] footer.footer #connect.footer-connect .connect-logos-deck > .eyebrow { display: none !important; }
body[data-edit-page] footer.footer #connect.footer-connect :is(a.btn, a.connect-logo-card) {
  flex: 0 0 auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px !important;
  min-height: 44px !important; height: auto !important; width: auto !important; padding: 10px 16px !important; margin: 0 !important;
  border-radius: 999px !important; border: 1px solid #e2b955 !important; background: #17251b !important; box-shadow: none !important;
  color: #fffdf5 !important; font: 600 13px/1 var(--font-body, system-ui, sans-serif) !important; letter-spacing: .02em !important;
  text-transform: none !important; white-space: nowrap !important; text-decoration: none !important; scroll-snap-align: start;
}
body[data-edit-page] footer.footer #connect.footer-connect a.connect-logo-card::before,
body[data-edit-page] footer.footer #connect.footer-connect a.connect-logo-card::after { content: none !important; display: none !important; }
body[data-edit-page] footer.footer #connect.footer-connect a.connect-logo-card .label { color: inherit !important; font: inherit !important; margin: 0 !important; }
body[data-edit-page] footer.footer #connect.footer-connect a.connect-logo-card svg { width: 16px !important; height: 16px !important; flex: 0 0 16px; }
body[data-edit-page] footer.footer #connect.footer-connect :is(a.btn, a.connect-logo-card):is(:hover, :focus-visible) { background: #24382a !important; outline: 2px solid #e2b955; outline-offset: 2px; }
body[data-edit-page] footer.footer #connect.footer-connect { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); padding-right: 48px !important; }