/* His-Story fusion candidate, 2026-09-28.
   Link after site.css, skyhigh-art.css and gallery.css on /his-story/ only.
   Retains every card, moment, chapter, print and its text. Native overflow works
   without JavaScript; GalleryEngine's existing rail controls can enhance it. */

body[data-edit-page="his-story"] main {
  --story-space: clamp(18px, 3vw, 42px);
}

/* The existing opening images become one bright strip; their labels remain
   below, and its dozen cards no longer add desktop grid rows to the page. */
body[data-edit-page="his-story"] main .hero > .sheet {
  box-sizing: border-box;
  display: flex !important;
  grid-column: 1 / -1;
  grid-row: 8;
  gap: var(--story-space);
  width: 100%;
  min-width: 0;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 12px 2px 22px;
  scrollbar-width: auto;
  scrollbar-color: var(--canvas-gold) var(--tile);
}
body[data-edit-page="his-story"] main .hero > .sheet > .frame,
body[data-edit-page="his-story"] main .hero > .sheet > .frame:first-child {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 min(82vw, 360px);
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  scroll-snap-align: start;
}
body[data-edit-page="his-story"] main .hero > .sheet > .frame img {
  display: block;
  width: 100%;
  height: min(52svh, 330px) !important;
  object-fit: contain !important;
  filter: none !important;
  background: #11100d;
}
body[data-edit-page="his-story"] main .hero > .sheet > .frame .code {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 52px;
  padding: 10px 12px !important;
  text-shadow: none;
}

/* Releases and broadcasts keep their own details yet occupy one leaf each. */
body[data-edit-page="his-story"] main section[data-section="story.music"] .grid.four,
body[data-edit-page="his-story"] main section[data-section="story.watch"] .grid.three {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--story-space);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  padding: 12px 2px 28px;
  border: 0;
  background: transparent;
  scrollbar-width: auto;
  scrollbar-color: var(--canvas-gold) var(--tile);
}
body[data-edit-page="his-story"] main section[data-section="story.music"] .grid.four > *,
body[data-edit-page="his-story"] main section[data-section="story.watch"] .grid.three > * {
  box-sizing: border-box;
  flex: 0 0 min(84vw, 380px);
  min-width: 0;
  scroll-snap-align: start;
}
body[data-edit-page="his-story"] main section[data-section="story.music"] .grid.four .art img,
body[data-edit-page="his-story"] main section[data-section="story.watch"] .grid.three .player img {
  object-fit: contain;
  filter: none !important;
  background: #11100d;
}

/* The 25 written/photo pairings read like a bookshelf. A visible next card
   signals that the rest of the archive is already here. */
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] .grid.two,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding: 12px 2px 26px;
  scrollbar-width: auto !important;
  scrollbar-color: var(--canvas-gold) var(--tile);
}
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] .grid.two > article,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article {
  box-sizing: border-box;
  flex: 0 0 min(83vw, 480px);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  border-top: 4px solid var(--canvas-gold) !important;
}
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article:nth-child(3n+2),
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] .grid.two > article:nth-child(3n+2),
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article:nth-child(3n+2) {
  border-top-color: var(--red-ink) !important;
}
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article:nth-child(3n+3),
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] .grid.two > article:nth-child(3n+3),
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article:nth-child(3n+3) {
  border-top-color: var(--green-ink) !important;
}
/* The current story card has inline max-height/cover styles. Keep every pixel
   visible on its own matte, with the text beneath it rather than on it. */
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article > div:first-child,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article > div:first-child {
  max-height: none !important;
  overflow: visible !important;
  background: #11100d !important;
}
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article > div:first-child img,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article > div:first-child img {
  display: block;
  width: 100% !important;
  height: min(52svh, 390px) !important;
  object-fit: contain !important;
  object-position: center;
  background: #11100d;
}
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article :is(p, blockquote),
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article :is(p, blockquote) {
  font-size: clamp(15px, 1.2vw, 17px) !important;
  line-height: 1.55 !important;
}
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article a,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] .grid.two > article a,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article a {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}

/* Ten moments remain an ordered list and retain the era filter. The image,
   year, testimony and source sit together on each spacious horizontal leaf. */
body[data-edit-page="his-story"] main section#timeline ol.timeline {
  display: flex;
  align-items: stretch;
  gap: var(--story-space);
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 12px 2px 28px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: auto;
  scrollbar-color: var(--canvas-gold) var(--tile);
  border-top: 0;
}
body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band {
  box-sizing: border-box;
  flex: 0 0 min(86vw, 580px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 22px;
  min-width: 0;
  margin: 0;
  padding: clamp(22px, 3vw, 38px);
  scroll-snap-align: start;
  border: 1px solid var(--seam-strong);
  border-top: 4px solid var(--canvas-gold);
  background: #151410;
}
body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band[data-era="1960s"],
body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band[data-era="1980s"] {
  border-top-color: var(--canvas-green);
}
body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band[data-era="1970s"] {
  border-top-color: var(--red-ink);
}
body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band .tl-say,
body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band .tl-plate,
body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band[data-side="right"] .tl-say,
body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band[data-side="right"] .tl-plate {
  grid-column: 1;
  grid-row: auto;
  min-width: 0;
}
body[data-edit-page="his-story"] main section#timeline .tl-band .year {
  font-size: clamp(64px, 8vw, 108px);
  line-height: .86;
  overflow-wrap: anywhere;
}
body[data-edit-page="his-story"] main section#timeline .tl-band p {
  max-width: 42ch;
  font-size: clamp(18px, 1.6vw, 23px);
}
body[data-edit-page="his-story"] main section#timeline .tl-band .src {
  font-size: 14px;
  line-height: 1.45;
}
body[data-edit-page="his-story"] main section#timeline .tl-plate img {
  box-sizing: border-box;
  width: 100%;
  height: min(42svh, 390px);
  object-fit: contain;
  background: #0b0a09;
  box-shadow: none;
}

/* Each complete chapter is one generous horizontal leaf. Its inner photo and
   sound collections wrap locally, so a swipe has one horizontal owner. */
body[data-edit-page="his-story"] main .story-chapter-rail {
  min-width: 0;
  max-width: 100%;
  margin-block: clamp(18px, 3vw, 40px) clamp(58px, 7vw, 100px);
}
body[data-edit-page="his-story"] main .story-chapter-rail > .gx-rail-controls {
  padding-inline: var(--gutter);
}
body[data-edit-page="his-story"] main .story-chapter-rail > .story-chapter-track {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(20px, 3vw, 44px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 16px var(--gutter) 32px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: auto;
  scrollbar-color: var(--canvas-gold) var(--tile);
}
body[data-edit-page="his-story"] main .story-chapter-track > .gx-ch {
  box-sizing: border-box;
  flex: 0 0 min(90vw, 1240px);
  min-width: 0;
  scroll-snap-align: start;
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
  max-width: 100%;
  margin-block: 22px 4px;
  padding: 16px 6px 22px;
  overflow: visible;
  scroll-snap-type: none;
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-collage > .gx-pol {
  box-sizing: border-box;
  min-width: 0;
  grid-column: auto;
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-ch-records {
  flex-wrap: wrap;
  overflow: visible;
  scroll-snap-type: none;
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-ch-records > * {
  scroll-snap-align: none;
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-ch:is(.tone-red, .tone-green) .gx-ch-words p {
  color: #ffe083 !important; /* measured 5.50:1 on red, 6.23:1 on green */
}
body[data-edit-page="his-story"] main .gx .gx-ch-lead img {
  width: 100%;
  max-height: min(76svh, 720px);
  object-fit: contain;
  background: rgba(0,0,0,.2);
  filter: none !important;
}
body[data-edit-page="his-story"] main .gx .gx-ch-lead--sleeve img {
  transform: none !important;
}
body[data-edit-page="his-story"] main .gx .gx-pol img {
  filter: none !important;
}
/* GalleryEngine's 100-print contact sheet keeps its own horizontal rail.
   This does not touch the full-screen print dialog. */
body[data-edit-page="his-story"] main .gx [data-gallery-grid] > .gx-frame {
  flex-basis: min(88vw, 560px);
  scroll-snap-align: start;
}
body[data-edit-page="his-story"] main .gx [data-gallery-grid] > .gx-frame img {
  max-height: min(62svh, 580px);
  object-fit: contain;
  filter: none !important;
}
body[data-edit-page="his-story"] main .gx-frame::after { content: none; }
body[data-edit-page="his-story"] main .gx .gx-frame .gx-caption {
  position: static;
  display: block;
  padding: 0 4px;
  margin-top: 14px;
  color: var(--salt);
}
body[data-edit-page="his-story"] main .gx .gx-frame :is(.gx-no, .gx-loc) {
  position: static;
  display: inline-block;
  max-width: 100%;
  margin: 10px 4px 0 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
}
body[data-edit-page="his-story"] main .story-photo-wall {
  min-width: 0;
  max-width: 100%;
  margin-block: clamp(58px, 7vw, 110px);
  scroll-margin-top: 7rem;
}
body[data-edit-page="his-story"] main .story-photo-wall > :is(.gx-hero, .gx-intro, .gx-sheet) {
  min-width: 0;
  max-width: 100%;
}
body[data-edit-page="his-story"] main .gx-products {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: clamp(32px, 5vw, 72px) var(--gutter);
  scroll-margin-top: 7rem;
}
body[data-edit-page="his-story"] main .gx-products [data-gallery-rail] > * {
  flex-basis: min(82vw, 360px);
}
body[data-edit-page="his-story"] main .gx .gx-ch,
body[data-edit-page="his-story"] main #every-picture {
  scroll-margin-top: 7rem;
}

/* Gallery route-specific refinements would otherwise disappear on His Story. */
body[data-edit-page="his-story"] main .gx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
body[data-edit-page="his-story"] main .gx-hero .gx-count {
  margin: 0;
  font-size: clamp(42px, 7vw, 96px);
  line-height: 1;
}
body[data-edit-page="his-story"] main .gx-hero .gx-count small {
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.5;
  margin-top: 8px;
}
body[data-edit-page="his-story"] main .gx-hero .gx-rule { height: 2px; }
body[data-edit-page="his-story"] main .gx-hero .gx-strip-wrap {
  margin-inline: 0;
  margin-top: 10px;
}
body[data-edit-page="his-story"] main .gx .gx-dig { gap: 0; }
body[data-edit-page="his-story"] main .gx .gx-dig button { min-height: 48px; }
body[data-edit-page="his-story"] main .gx .gx-sheet { padding-inline: var(--gutter); }

/* Six album covers remain six separate picture targets. The original
   overlapping sleeve fan hid five centers under later siblings. */
body[data-edit-page="his-story"] main .gx-cover-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 28px);
  min-height: 0;
  max-height: none;
}
body[data-edit-page="his-story"] main .gx-cover-stage > .gx-cover-lead {
  position: relative;
  left: auto;
  top: auto;
  width: min(100%, 560px);
  transform: none;
}
body[data-edit-page="his-story"] main .gx-cover-stage > .gx-cover-sleeves {
  position: relative;
  right: auto;
  bottom: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 22px);
  width: 100%;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 8px 3px 22px;
  scrollbar-color: var(--canvas-gold) var(--tile);
}
body[data-edit-page="his-story"] main .gx-cover-sleeves > .gx-sleeve {
  position: relative;
  right: auto;
  bottom: auto;
  flex: 0 0 clamp(116px, 30vw, 176px);
  width: auto;
  transform: none;
  scroll-snap-align: start;
}
body[data-edit-page="his-story"] main .gx-cover-sleeves > .gx-sleeve:hover,
body[data-edit-page="his-story"] main .gx-cover-sleeves > .gx-sleeve:focus-visible {
  transform: translateY(-3px);
}

/* All rails advertise keyboard focus while preserving ordinary native scroll. */
body[data-edit-page="his-story"] main :is(.hero .sheet, .grid.two, .grid.four, .grid.three, .sha-horizontal-rail, ol.timeline, .story-chapter-track, [data-gallery-grid]):focus-visible {
  outline: 3px solid var(--canvas-gold);
  outline-offset: 2px;
}
@media (min-width: 900px) {
  body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article,
  body[data-edit-page="his-story"] main section[data-section="story.book_stories"] .grid.two > article,
  body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article {
    flex-basis: clamp(390px, 38vw, 520px);
  }
  body[data-edit-page="his-story"] main section#timeline ol.timeline li.tl-band {
    flex-basis: clamp(480px, 43vw, 620px);
  }
  body[data-edit-page="his-story"] main section[data-section="story.music"] .grid.four > * { flex-basis: 340px; }
  body[data-edit-page="his-story"] main section[data-section="story.watch"] .grid.three > * { flex-basis: 440px; }
  body[data-edit-page="his-story"] main .story-chapter-track > .gx-ch {
    flex-basis: min(88vw, 1240px);
  }
  /* Gallery's standalone spread uses viewport gutters; a chapter card needs
     card-relative gutters or they exceed the card on wide monitors. */
  body[data-edit-page="his-story"] main .story-chapter-track .gx-ch-spread {
    padding-inline: clamp(24px, 4vw, 64px);
  }
  body[data-edit-page="his-story"] main .story-chapter-track .gx-ch-band {
    padding: clamp(32px, 4vw, 56px) calc(clamp(24px, 4vw, 64px) + 144px) 28px clamp(24px, 4vw, 64px);
  }
  body[data-edit-page="his-story"] main .story-chapter-track .gx-ch-band .gx-disc {
    right: clamp(24px, 4vw, 64px);
  }
  body[data-edit-page="his-story"] main .story-chapter-track .gx-ch-title {
    font-size: clamp(58px, 8vw, 110px);
  }
  body[data-edit-page="his-story"] main .story-chapter-track .gx-collage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-edit-page="his-story"] main .gx [data-gallery-grid] > .gx-frame {
    flex-basis: clamp(380px, 42vw, 580px);
  }
  body[data-edit-page="his-story"] main .gx-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
  }
  body[data-edit-page="his-story"] main .gx-hero > :is(.eyebrow, .poster, .gx-count) { grid-column: 1; }
  body[data-edit-page="his-story"] main .gx-hero > .gx-lede {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
  }
  body[data-edit-page="his-story"] main .gx-hero > :is(.gx-rule, .actions, .gx-strip-wrap) { grid-column: 1 / -1; }
}
@media (max-width: 959px) {
  body[data-edit-page="his-story"] main .hero {
    display: flex;
    flex-direction: column;
  }
  body[data-edit-page="his-story"] main .hero > .brotherhood-plaque { order: 1; }
  body[data-edit-page="his-story"] main .hero > .sha-eq { order: 2; }
  body[data-edit-page="his-story"] main .hero > .eyebrow { order: 3; }
  body[data-edit-page="his-story"] main .hero > .poster { order: 4; }
  body[data-edit-page="his-story"] main .hero > .story-hero-dateline { order: 5; }
  body[data-edit-page="his-story"] main .hero > .sheet { order: 6; }
  body[data-edit-page="his-story"] main .hero > .lede { order: 7; }
  body[data-edit-page="his-story"] main .hero > .story-chapters-bar { order: 8; }
  body[data-edit-page="his-story"] main .hero > .actions { order: 9; }
}
@media (min-width: 960px) {
  body[data-edit-page="his-story"] main .hero > .story-hero-dateline {
    grid-column: 1 / 7;
    grid-row: 4;
  }
  body[data-edit-page="his-story"] main .hero > .sha-eq {
    justify-self: end;
  }
  body[data-edit-page="his-story"] main .hero > .sheet {
    display: flex !important;
    grid-column: 8 / -1 !important;
    grid-row: 2 / 7 !important;
    align-self: stretch;
    align-items: flex-start;
    height: min(72svh, 680px);
  }
  body[data-edit-page="his-story"] main .hero > .sheet > .frame,
  body[data-edit-page="his-story"] main .hero > .sheet > .frame:first-child {
    flex-basis: min(100%, 560px) !important;
    align-self: flex-start;
  }
  body[data-edit-page="his-story"] main .hero > .sheet > .frame img {
    height: min(60svh, 540px) !important;
    max-height: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-edit-page="his-story"] main :is(.hero .sheet, .grid.two, .grid.four, .grid.three, .sha-horizontal-rail, ol.timeline, .story-chapter-track, [data-gallery-grid]) {
    scroll-behavior: auto;
  }
}

/* MARKED LAYER his-story-polish-20260929 (antigravity).
 * Owner: "OK GET INTO THE POLISHING OF THE HIS-STORY PAGE",
 * "HIS-STORY / ALSO APPLY THIS STYLE OF COLORING TO THE SKYHIGHMAUMAU NAME IN THE HEADER AND FOOTER, SHIP PIECES AS LIVE",
 * "AND EVERY CATEGORY TITLE ON THE HOMEPAGE TOO",
 * "MAKE BIG AND BRIGHT MAKE ALL IMAGES BIG AND BRIGHT".
 * Applies horizontal tricolor reggae flag lettering, dark plate backings,
 * larger image cards, vibrant shadows, and high-fidelity photo presentation to /his-story/.
 */

body[data-edit-page="his-story"] {
  --st-flag-red: #e0303b;
  --st-flag-gold: #f4b400;
  --st-flag-green: #1f9a55;
  --st-dark-plate: #0d0d0c;
  --reggae-title-bands: linear-gradient(180deg, #e0303b 0 33%, #f4b400 33% 66%, #1f9a55 66%);
}

/* Horizontal tricolor lettering on His-Story titles and category headings */
body[data-edit-page="his-story"] :is(
  main .hero .poster,
  main .gx-book-title,
  main .story-fusion-head .h2,
  main .gx-ch-band .gx-ch-title,
  main .section-head .h2,
  main .gx-intro .gx-title,
  main .gx-products .h2,
  main .split .h2
) {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.2em;
  color: var(--st-flag-gold) !important;
  text-shadow: none !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-edit-page="his-story"] :is(
    main .hero .poster,
    main .gx-book-title,
    main .story-fusion-head .h2,
    main .gx-ch-band .gx-ch-title,
    main .section-head .h2,
    main .gx-intro .gx-title,
    main .gx-products .h2,
    main .split .h2
  ) {
    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: 1px rgba(255, 253, 245, 0.65);
  }
}

/* Tricolor accent bar under major section heads */
body[data-edit-page="his-story"] :is(.section-head, .story-fusion-head, .gx-intro)::after {
  content: "";
  display: block;
  width: min(340px, 80%);
  height: 5px;
  margin-top: 10px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #e0303b 0 33.33%, #f4b400 33.33% 66.66%, #1f9a55 66.66% 100%);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Eyebrow badges with tricolor pip */
body[data-edit-page="his-story"] :is(.section-head, .story-fusion-head, .gx-ch-band) .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 6px 14px;
  border: 2px solid var(--st-flag-gold);
  border-radius: 999px;
  background: #0d0d0c;
  color: var(--st-flag-gold) !important;
  font: 700 13px/1.2 var(--mono, monospace) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-edit-page="his-story"] :is(.section-head, .story-fusion-head, .gx-ch-band) .eyebrow::before {
  content: "";
  flex: none;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e0303b 0 33%, #f4b400 33% 66%, #1f9a55 66%);
}

/* Big and bright hero photos */
body[data-edit-page="his-story"] main .hero > .sheet {
  padding: 16px 4px 28px;
}
body[data-edit-page="his-story"] main .hero > .sheet > .frame {
  flex: 0 0 min(88vw, 440px) !important;
  border-radius: 8px;
  border-top: 4px solid var(--st-flag-gold);
  background: #151410;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body[data-edit-page="his-story"] main .hero > .sheet > .frame:nth-child(3n+1) { border-top-color: var(--st-flag-red); }
body[data-edit-page="his-story"] main .hero > .sheet > .frame:nth-child(3n+2) { border-top-color: var(--st-flag-gold); }
body[data-edit-page="his-story"] main .hero > .sheet > .frame:nth-child(3n+3) { border-top-color: var(--st-flag-green); }
body[data-edit-page="his-story"] main .hero > .sheet > .frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
}
body[data-edit-page="his-story"] main .hero > .sheet > .frame img {
  width: 100%;
  height: min(58svh, 440px) !important;
  object-fit: cover !important;
  filter: none !important;
  opacity: 1 !important;
  background: #11100d;
}

/* Big and bright chapter leads and polaroids */
body[data-edit-page="his-story"] main .gx .gx-ch-lead img {
  width: 100%;
  height: auto;
  max-height: min(80svh, 760px);
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  border-radius: 6px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8);
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-collage > .gx-pol {
  background: #fffdf5;
  padding: 8px 8px 24px;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-collage > .gx-pol:hover {
  transform: scale(1.05) rotate(0deg) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85);
  z-index: 10;
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-collage > .gx-pol img {
  filter: none !important;
  opacity: 1 !important;
  border-radius: 2px;
}
body[data-edit-page="his-story"] main .story-chapter-track .gx-collage > .gx-pol span {
  display: block;
  margin-top: 8px;
  color: #14110a;
  font-weight: 700;
  font-size: 13px;
}

/* Big and bright 100-photo contact sheet wall */
body[data-edit-page="his-story"] main .gx [data-gallery-grid] > .gx-frame {
  flex-basis: min(88vw, 600px);
  border-radius: 8px;
  overflow: hidden;
  background: #151410;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s ease;
}
body[data-edit-page="his-story"] main .gx [data-gallery-grid] > .gx-frame:hover {
  transform: translateY(-4px);
}
body[data-edit-page="his-story"] main .gx [data-gallery-grid] > .gx-frame img {
  max-height: min(65svh, 620px);
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
}

/* Big and bright book stories */
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article {
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
  background: #14120e;
  padding: 18px;
}
body[data-edit-page="his-story"] main section[data-section="story.books_stories"] .grid.two > article > div:first-child img,
body[data-edit-page="his-story"] main section[data-section="story.book_stories"] > .sha-horizontal-rail > article > div:first-child img {
  height: min(58svh, 440px) !important;
  border-radius: 6px;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Big and bright video broadcasts */
body[data-edit-page="his-story"] main section[data-section="story.watch"] .grid.three > * {
  border-radius: 12px;
  border: 2px solid #28251e;
  background: #0d0d0c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  padding: 12px;
}
body[data-edit-page="his-story"] main section[data-section="story.watch"] .grid.three .player {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--st-flag-gold);
}
body[data-edit-page="his-story"] main section[data-section="story.watch"] .play-mark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--st-flag-gold) 0 30%, #000 31% 33%, #f2c746 34%);
  box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--st-flag-gold), 0 8px 20px rgba(0, 0, 0, 0.8);
}

/* Big and bright music soundscape cards */
body[data-edit-page="his-story"] main section[data-section="story.music"] .grid.four > * {
  border-radius: 8px;
  background: #14120e;
  border-top: 4px solid var(--st-flag-gold);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
  padding: 14px;
}
body[data-edit-page="his-story"] main section[data-section="story.music"] .grid.four .art img {
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* ---------- POLISHED STICKY MASTHEAD (HEADER) ON HIS-STORY ---------- */
body[data-edit-page="his-story"] header.masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(9, 11, 9, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}
body[data-edit-page="his-story"] header.masthead::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e0303b 0 33.33%, #f4b400 33.33% 66.66%, #1f9a55 66.66% 100%);
}
/* MARKED LAYER 2026-10-01 (owner: "RETURN THE HEADER'S SKYHIGH THE MAU MAU TO HOW IT LOOKS WHEN THE FOR ARTISTS
   TAB IS CLICKED"): the His Story-only header wordmark override (larger, heavier, thicker outline, drop shadow) is
   removed. The header wordmark on this page now takes the one shared rule in site.css, the same as Home and
   For Artists. The footer wordmark below is unchanged. */
body[data-edit-page="his-story"] header.masthead .nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 20px);
}
body[data-edit-page="his-story"] header.masthead .nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  color: #fffdf5;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}
body[data-edit-page="his-story"] header.masthead .nav a:hover {
  color: #f4b400 !important;
  background: rgba(244, 180, 0, 0.1);
}
body[data-edit-page="his-story"] header.masthead .nav a[aria-current="page"] {
  color: #f4b400 !important;
  background: rgba(244, 180, 0, 0.15);
  border: 1px solid rgba(244, 180, 0, 0.4);
}
body[data-edit-page="his-story"] header.masthead .nav-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  border: 2px solid #f4b400;
  border-radius: 4px;
  background: #0d0d0c;
  color: #f4b400;
  font-family: var(--mono, monospace);
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ---------- POLISHED FOOTER ON HIS-STORY ---------- */
body[data-edit-page="his-story"] footer.footer {
  position: relative;
  background: #090b09 !important;
  padding-block: 56px 64px;
  border-top: 4px solid #f4b400;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
}
body[data-edit-page="his-story"] footer.footer::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #e0303b 0 33.33%, #f4b400 33.33% 66.66%, #1f9a55 66.66% 100%);
  z-index: 2;
}
body[data-edit-page="his-story"] footer.footer .crest-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 36px);
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 36px;
}
body[data-edit-page="his-story"] footer.footer .crest-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
body[data-edit-page="his-story"] footer.footer .crest-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #f4b400;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
body[data-edit-page="his-story"] footer.footer .crest-item:hover .crest-img {
  transform: scale(1.08);
  border-color: #5be69a;
}
body[data-edit-page="his-story"] footer.footer .crest-label {
  font-family: var(--mono, monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #9e9d96;
  text-transform: uppercase;
}
body[data-edit-page="his-story"] footer.footer .crest-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body[data-edit-page="his-story"] footer.footer :is(.tuff-gong-badge, .basement-badge, .brotherhood-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 14px;
  border: 2px solid #f4b400;
  border-radius: 4px;
  background: #14120e;
  color: #fffdf5;
  font-family: var(--display, sans-serif);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease;
}
body[data-edit-page="his-story"] footer.footer .tuff-gong-badge { border-color: #e0303b; }
body[data-edit-page="his-story"] footer.footer .basement-badge { border-color: #f4b400; }
body[data-edit-page="his-story"] footer.footer .brotherhood-badge { border-color: #1f9a55; }
body[data-edit-page="his-story"] footer.footer :is(.tuff-gong-badge, .basement-badge, .brotherhood-badge):hover {
  transform: translateY(-2px);
}
body[data-edit-page="his-story"] footer.footer .footer-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 28px;
}
body[data-edit-page="his-story"] footer.footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-edit-page="his-story"] footer.footer .wordmark {
  font-family: var(--display, 'Big Shoulders Display', sans-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-edit-page="his-story"] footer.footer .wordmark :is(.wm-lead, .wm-tail) {
    -webkit-text-stroke: 1.2px rgba(255, 253, 245, 0.75) !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
  }
}
body[data-edit-page="his-story"] footer.footer .footer-tagline {
  font-family: var(--mono, monospace);
  font-size: 13px;
  color: #f4b400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-edit-page="his-story"] footer.footer .footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
body[data-edit-page="his-story"] footer.footer .footer-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: #14120e;
  color: #fffdf5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body[data-edit-page="his-story"] footer.footer .footer-logo-btn:hover {
  transform: translateY(-3px) scale(1.08);
  border-color: #f4b400;
  color: #f4b400;
  background: #1e1b14;
  box-shadow: 0 6px 16px rgba(244, 180, 0, 0.25);
}
body[data-edit-page="his-story"] footer.footer .footer-logo-btn svg {
  width: 20px;
  height: 20px;
}
body[data-edit-page="his-story"] footer.footer nav.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  margin-bottom: 24px;
}
body[data-edit-page="his-story"] footer.footer .footer-nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #c7c6be;
  font-family: var(--mono, monospace);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}
body[data-edit-page="his-story"] footer.footer .footer-nav-link:hover {
  color: #f4b400;
}

/* skyhigh-hisstory-spacing-20261001 · owner: "the spacing is off and theres a lot of empty and misplaced space".
   Measured on the live page (handoff/skyhigh-hisstory-spacing-20261001/before/layout.json):
   1. the five chapter leaves were stretched to the tallest one: 1,519-1,902 px of blank colour at 390, 687-1,107 at 1440;
   2. the hero carried an empty equaliser row and a two-line "Since / 1981" with margins on both sides;
   3. The Journey's decorative plates sat at x=0 on top of each other under the left column;
   4. the chapter rail kept 58-100 px under it before the footer. */
body[data-edit-page="his-story"] main .story-chapter-rail { margin-block-end: clamp(20px, 3vw, 36px); }
body[data-edit-page="his-story"] main .story-chapter-rail > .story-chapter-track {
  align-items: flex-start;                 /* each chapter is as tall as its own content */
  transition: height .28s ease;            /* gallery.js fits the track to the chapter in view */
}
body[data-edit-page="his-story"] main .hero { position: relative; }
body[data-edit-page="his-story"] main .hero > .sha-eq {   /* shows only while music plays: no row of its own */
  position: absolute; inset-block-start: 14px; inset-inline-end: var(--gutter, 20px); margin: 0;
}
body[data-edit-page="his-story"] main .hero > .story-hero-dateline { margin-block: 0; }
body[data-edit-page="his-story"] main .hero > .story-hero-dateline { line-height: 1.25; }
body[data-edit-page="his-story"] main .hero > .poster { margin-block-end: 0; }
body[data-edit-page="his-story"] main section#journey > .sha-scatter { display: none; }
@media (min-width: 960px) {
  /* the words sit centred beside the photograph instead of being pulled apart to its height */
  body[data-edit-page="his-story"] main .hero {
    grid-template-rows: auto minmax(min-content, 1fr) auto auto auto minmax(min-content, 1fr) auto;
  }
  body[data-edit-page="his-story"] main .hero > .eyebrow { align-self: end; }
  body[data-edit-page="his-story"] main .hero > .actions { align-self: start; }
  body[data-edit-page="his-story"] main section#journey > .split { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-edit-page="his-story"] main .story-chapter-rail > .story-chapter-track { transition: none; }
}