/* assets/gallery/gallery.css — SkyHigh /gallery/: the darkroom.
   Tokens come from assets/css/site.css (--void --tile --salt --ash --seam --red-ink --canvas-gold --green-ink
   --display --body --mono --gutter --ease-arrive). Nothing here is fixed-position except the open print viewer,
   nothing uses backdrop-filter, decorative layers are pointer-events:none, and prefers-reduced-motion removes
   motion, never a frame. A contact sheet reads left to right, row by row, every frame the same size: the print is
   shown WHOLE on the film rebate (object-fit: contain), never cropped to fit the grid. */

.gx .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gx { --gx-safelight: #d64b40; --gx-film: #11100e; --gx-rebate: #1d1b17; --gx-cell: clamp(150px, 19vw, 230px); }

/* MARKED LAYER his-story-gallery-20260920: photographs first; native rails share controls with Available now. */
.gx-intro { padding: 20px var(--gutter) 0; min-width: 0 }
.gx-title { margin: 0 0 14px; font: 900 clamp(34px, 8vw, 72px)/1 var(--display); color: var(--salt); text-transform: uppercase; overflow-wrap: anywhere }
.gx-intro .gx-dig { padding: 10px 0; border-top: 0 }
[data-gallery-rail-section] { min-width: 0; max-width: 100% }
[data-gallery-rail] { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; min-width: 0; max-width: 100%; padding: 3px 2px 14px; scroll-padding: 2px; scrollbar-color: var(--canvas-gold) var(--tile) }
[data-gallery-rail] > * { flex: 0 0 min(84%, 520px); min-width: 0; scroll-snap-align: start; overflow-wrap: anywhere }
[data-gallery-rail]:focus-visible { outline: 2px solid var(--canvas-gold); outline-offset: 2px }
.gx-rail-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-block: 10px }
.gx-rail-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; background: var(--tile); color: var(--salt); border: 1px solid var(--seam-strong); font-size: 22px; cursor: pointer }
.gx-rail-controls button:disabled { color: var(--ash); cursor: default }
.gx-rail-controls button:focus-visible { outline: 2px solid var(--canvas-gold); outline-offset: 2px }
.gx-rail-controls span { font: 400 16px/1.4 var(--body); color: var(--ash) }
.gx-rail-controls[hidden], .gx-dig[hidden] { display: none }
.gx-products { scroll-margin-top: 7rem; padding-block: 24px }
.gx-products-rail > * { flex-basis: min(84%, 320px) }
.gx-products :is(button, .btn, .ghost, .buy-link, [data-product-action]) { min-height: 44px; min-width: 44px }
.gx-products .item .links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px }
.gx-products-rail :is(img, video) { max-width: 100% }

/* ---------- hero: the strip on the light table ---------- */
.gx-hero { position: relative; padding: clamp(28px, 6vw, 72px) var(--gutter) clamp(20px, 4vw, 40px); overflow: hidden; }
/* editor safety (editor_safety_gate.mjs, 2026-09-14): the poster h1 (line-height .86, 16vw) overlapped the eyebrow
   above it, so a click on the eyebrow selected the title. The eyebrow is its own layer with clearance. */
.gx-hero .eyebrow { color: var(--canvas-gold); display: block; position: relative; z-index: 1; margin-bottom: .55em; }
.gx-hero .poster { position: relative; z-index: 0; }
.gx-count { font-family: var(--display); font-weight: 900; line-height: .86; letter-spacing: -.01em; margin: 10px 0 6px;
  font-size: clamp(60px, 16vw, 220px); color: var(--salt); text-transform: uppercase; }
.gx-count b { color: var(--canvas-gold); font-weight: 900; }
.gx-count small { display: block; font-size: .34em; letter-spacing: .02em; color: var(--salt); }
.gx-lede { max-width: var(--measure); font-size: clamp(17px, 2.1vw, 21px); color: var(--veil); margin: 16px 0 22px; }
.gx-rule { height: 5px; background: linear-gradient(90deg, var(--canvas-red) 0 33.3%, var(--canvas-gold) 33.3% 66.6%, var(--canvas-green) 66.6%); }

.gx-strip-wrap { overflow: hidden; margin: clamp(18px, 3vw, 34px) calc(var(--gutter) * -1) 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gx-strip { display: flex; gap: 10px; width: max-content; padding: 14px 0;
  background:
    radial-gradient(circle at 50% 50%, var(--void) 0 3.2px, transparent 3.6px) 0 3px / 18px 12px repeat-x,
    radial-gradient(circle at 50% 50%, var(--void) 0 3.2px, transparent 3.6px) 0 calc(100% - 3px) / 18px 12px repeat-x,
    var(--gx-rebate);
  animation: gx-drift 90s linear infinite; }
.gx-strip img { display: block; height: clamp(88px, 13vw, 150px); width: auto; filter: sepia(.18) contrast(1.04); border-radius: 2px; }
@keyframes gx-drift { to { transform: translateX(-50%); } }

/* ---------- the crate dividers (dig by decade / book) ---------- */
.gx-dig { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--gutter); background: var(--void);
  border-top: 1px solid var(--seam); scrollbar-width: none; }
.gx-dig::-webkit-scrollbar { display: none; }
.gx-dig button { flex: 0 0 auto; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--salt); background: var(--tile); border: 1px solid var(--seam-strong); border-radius: 3px 3px 0 0;
  padding: 11px 14px 9px; min-height: 44px; cursor: pointer; transition: transform .18s var(--ease-arrive), background-color .18s, color .18s; }
.gx-dig button span { color: var(--ash); margin-left: 6px; }
.gx-dig button:hover { transform: translateY(-3px); }
.gx-dig button[aria-pressed="true"] { background: var(--canvas-gold); color: var(--ink-on-gold); border-color: var(--canvas-gold); }
.gx-dig button[aria-pressed="true"] span { color: var(--ink-on-gold); }
.gx-dig button:focus-visible { outline: 2px solid var(--canvas-gold); outline-offset: 2px; }

/* ---------- the contact sheet ---------- */
.gx-sheet { padding: 10px var(--gutter) 28px; background: var(--gx-film); }
.gx-grid { display: flex; align-items: flex-start; }
.gx-grid.is-digging .gx-frame:not([hidden]) { animation: gx-in .42s var(--ease-arrive) both; }
@keyframes gx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gx-frame { position: relative; display: block; padding: 12px 10px 26px;
  background:
    radial-gradient(circle at 50% 50%, var(--gx-film) 0 2.6px, transparent 3px) 0 2px / 14px 9px repeat-x,
    radial-gradient(circle at 50% 50%, var(--gx-film) 0 2.6px, transparent 3px) 0 calc(100% - 2px) / 14px 9px repeat-x,
    var(--gx-rebate);
  color: var(--salt); text-decoration: none; border-radius: 2px; outline: none;
  transition: transform .22s var(--ease-arrive), box-shadow .22s var(--ease-arrive); }
.gx-frame img { display: block; width: 100%; height: clamp(240px, 48svh, 520px); object-fit: contain; background: #0b0a09;
  filter: grayscale(.12) contrast(1.02); transition: filter .3s var(--ease-arrive); }
.gx-caption { display: block; margin-top: 12px; font: 400 16px/1.5 var(--body); color: var(--salt); overflow-wrap: anywhere }
.gx-frame .gx-no { position: absolute; left: 10px; bottom: 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--canvas-gold); }
.gx-frame .gx-loc { position: absolute; right: 10px; bottom: 7px; font: 400 10.5px/1 var(--mono); color: var(--ash); max-width: 62%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the safelight: red glow + the grease-pencil loupe drawn around the chosen frame */
.gx-frame::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--gx-safelight); border-radius: 46% 54% 48% 52% / 55% 45% 55% 45%;
  opacity: 0; transform: rotate(-2deg) scale(.96); transition: opacity .2s, transform .28s var(--ease-arrive); pointer-events: none; }
.gx-frame:hover, .gx-frame:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(214, 75, 64, .45), 0 16px 42px -18px rgba(214, 75, 64, .75); }
.gx-frame:hover img, .gx-frame:focus-visible img { filter: none; }
.gx-frame:hover::after, .gx-frame:focus-visible::after { opacity: .9; transform: rotate(-2deg) scale(1); }
.gx-frame[hidden] { display: none; }

.gx-more { max-width: var(--measure); margin: 28px auto 0; text-align: center; color: var(--veil); font-size: 16px; }
.gx-more a { color: var(--canvas-gold); }

/* ---------- the darkroom viewer: the print develops in the tray ---------- */
.gx-dlg { box-sizing: border-box; width: min(1120px, 96vw); height: min(92vh, 860px); max-width: none; max-height: none;
  padding: 0; border: 0; background: var(--void); color: var(--salt); border-radius: 4px; overflow: hidden; }
.gx-dlg::backdrop { background: rgba(20, 3, 2, .9); }
/* skyhigh-art.css gives every direct child of a [data-section] `position: relative` at specificity (0,3,0); a modal
   <dialog> in the top layer then computes to absolute and opens scrolled off the top of a phone (measured: top -165px).
   This selector (0,3,2) puts the viewer back where a modal belongs, centred over the viewport at every width. */
section.gx-sheet > dialog.gx-dlg[open] { position: fixed; inset: 0; margin: auto; }
.gx-dlg[open] { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); grid-template-rows: minmax(0, 1fr); }
.gx-tray { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; background: #0a0706; padding: 14px; }
.gx-tray img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 1;
  filter: none; }
.gx-tray img.is-developed { opacity: 1; filter: none; }
.gx-notes { min-height: 0; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--seam); overflow: auto; }
.gx-notes [data-print-no] { font: 500 12px/1 var(--mono); letter-spacing: .16em; color: var(--canvas-gold); }
.gx-notes [data-print-caption] { font: 400 clamp(17px, 1.9vw, 21px)/1.45 var(--body); margin: 0; }
.gx-notes [data-print-locator], .gx-notes [data-print-names] { font: 400 12.5px/1.5 var(--mono); color: var(--ash); margin: 0; }
/* owner 09-14 "USE THE BOOK FOR CONTEXT AND DETAILS AND CAPTIONS": the page's own words, set like a pull from the book */
.gx-notes [data-print-context] { font: italic 400 clamp(14px, 1.35vw, 16px)/1.6 var(--body); margin: 0; padding-left: .9em;
  border-left: 2px solid var(--canvas-gold); color: inherit; max-height: 14em; overflow: auto; }
.gx-notes [data-print-cite] { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--canvas-gold); margin: 0; }
/* the notes column scrolls as ONE panel; no child may shrink to zero (a flex child with overflow:auto has min-height 0,
   so on a phone the book context was fetched, filled, and collapsed to 0px: G8 caught it at 390, not at 1440) */
.gx-notes { overflow-y: auto; overscroll-behavior: contain; }
.gx-notes > * { flex-shrink: 0; }
.gx-notes .gx-note-basis { font: 400 11.5px/1.5 var(--body); color: var(--ash); margin-top: auto; }
.gx-ctl { display: flex; gap: 8px; }
.gx-ctl button, .gx-notes .gx-buy { min-height: 44px; min-width: 44px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--tile); color: var(--salt); border: 1px solid var(--seam-strong); border-radius: 3px; padding: 0 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; }
.gx-ctl button:hover, .gx-notes .gx-buy:hover { border-color: var(--canvas-gold); color: var(--canvas-gold); }
.gx-notes .gx-buy { background: var(--canvas-gold); color: var(--ink-on-gold); border-color: var(--canvas-gold); align-self: flex-start; }
.gx-notes .gx-buy[hidden] { display: none; }
.gx-close { margin-left: auto; }

@media (max-width: 760px) {
  .gx { --gx-cell: 150px; }
  .gx-grid { gap: 12px; }
  .gx-frame { padding: 9px 7px 22px; }
  .gx-frame .gx-loc { display: none; }
  /* the print viewer takes the whole phone: print on top, notes below, nothing of the page behind it */
  .gx-dlg { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }
  .gx-dlg[open] { display: flex; flex-direction: column; }
  .gx-tray { flex: 1 1 auto; padding: 8px; }
  .gx-notes { flex: 0 0 auto; max-height: 44%; border-left: 0; border-top: 1px solid var(--seam); padding: 12px 16px 16px; gap: 8px; }
  .gx-notes .gx-note-basis { display: none; }
  .gx-notes [data-print-context] { max-height: none; overflow: visible; }   /* one scroll area on touch, not two */
}

@media (prefers-reduced-motion: reduce) {
  [data-gallery-rail] { scroll-behavior: auto; }
  .gx-strip { animation: none; }
  .gx-grid.is-digging .gx-frame:not([hidden]) { animation: none; }
  .gx-frame, .gx-frame::after, .gx-dig button { transition: none; }
  .gx-tray img { transition: none; opacity: 1; filter: none; }
}
/* BEGIN hub-carry-20260917 — gallery: the .gx-ctl trio wears the block's .btn hairline; sizing only (colours live in site.css) */
body[data-carry] .gx-ctl { gap: 10px }
body[data-carry] .gx-ctl .btn { min-width: 44px; padding: 10px 14px }
/* END hub-carry-20260917 */

/* ======================================================================================================
   THE LIVING BOOK (claude-code:88f8ac86, 2026-09-27). Owner: "BIG BRIGHT PICTURES EVERYWHERE", "REGGAE THEMED AT
   EVERY CORNER", "ALBUM COVERS EVERYWHERE, COLLAGES OF PICTURES AND ALBUM COVERS AND WORDS", "READING ADDS BUT ISNT
   REQUIRED". Phone first (390px): every spread is one column of big pictures; >=900px opens it as a two-page spread.
   Colour pairs used for words (measured, WCAG): ink #14110a on gold #f4b400 11.4:1 · cream #fffdf5 on green #0b6b3a
   6.6:1 · cream on red #b8141f 6.7:1 · gold #ffcf3d on green 4.5:1 and #ffd24a on red 4.6:1 (large type only) ·
   ink on the sunrise ramp >= 5.1:1 at its darkest stop. Decorative layers are pointer-events:none; motion stops under
   prefers-reduced-motion. All art here is drawn in CSS: rays, vinyl, tape, stamps. No picture is generated.
   ====================================================================================================== */
.gx-cover, .gx-ch { --ink: #14110a; --cream: #fffdf5; --gold: #f4b400; --sun: #ffcf3d; --leaf: #0b6b3a; --blood: #b8141f;
  position: relative; overflow: hidden; isolation: isolate; }
.gx-cover *, .gx-ch * { box-sizing: border-box; }

/* ---- drawn art: sun rays, the 45, tape ---- */
.gx-rays { position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--blood) 0 6deg, transparent 6deg 15deg, var(--gold) 15deg 21deg, transparent 21deg 30deg, var(--leaf) 30deg 36deg, transparent 36deg 45deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 22%, transparent 62%); mask-image: radial-gradient(circle at 50% 50%, #000 0 22%, transparent 62%); }
.gx-disc { position: absolute; display: grid; place-items: center; width: 108px; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, #111 0 5%, var(--cream) 5.5% 6.5%, transparent 7%),
    radial-gradient(circle, var(--blood) 0 18%, var(--gold) 18% 25%, var(--leaf) 25% 32%, transparent 32.5%),
    repeating-radial-gradient(circle, #0a0a0a 0 2px, #1e1e1e 2px 3px, #0a0a0a 3px 4px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.gx-disc i { font: 900 11px/1 var(--display); letter-spacing: .08em; color: var(--cream); transform: translateY(-19px); font-style: normal; }
.is-playing .gx-disc, .gx-cover .gx-disc { animation: gx-spin 7s linear infinite; }
@keyframes gx-spin { to { transform: rotate(360deg); } }

/* ---- the cover ---- */
.gx-cover { background: #0b0a08; color: var(--cream); padding: 22px var(--gutter) 26px; }
.gx-cover-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gx-cover .gx-rays { inset: -30% -80% auto; height: 150%; opacity: .55; }
.gx-disc--cover { width: 150px; right: -34px; top: 18px; }
.gx-disc--cover i { font-size: 12px; transform: translateY(-27px); }
.gx-cover-stage { position: relative; min-height: 118vw; max-height: 620px; }
.gx-cover-lead { position: absolute; left: 0; top: 6px; width: 78%; margin: 0; padding: 10px 10px 34px; background: var(--cream);
  transform: rotate(-3deg); box-shadow: 0 24px 50px -18px rgba(0,0,0,.8); z-index: 1; }
.gx-cover-lead img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.gx-cover-lead::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 22px; transform: translateX(-50%) rotate(-4deg);
  background: linear-gradient(90deg, var(--blood) 0 33.3%, var(--gold) 33.3% 66.6%, var(--leaf) 66.6%); opacity: .92; }
.gx-cover-sleeves { position: absolute; right: 0; bottom: 0; width: 64%; height: 58%; z-index: 2; }
.gx-sleeve { position: absolute; display: block; width: 58%; aspect-ratio: 1; box-shadow: 0 16px 34px -12px rgba(0,0,0,.85); border: 3px solid var(--cream);
  transform: rotate(calc(-10deg + var(--i) * 7deg)); right: calc(var(--i) * 13%); bottom: calc(var(--i) * 9%); transition: transform .25s var(--ease-arrive); }
.gx-sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gx-sleeve:hover, .gx-sleeve:focus-visible { transform: rotate(0deg) scale(1.06); z-index: 5; outline: 3px solid var(--gold); outline-offset: 2px; }
.gx-cover-words { position: relative; margin-top: 18px; }
.gx-kicker { margin: 0 0 6px; font: 500 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.gx-book-title { margin: 0; font: 900 clamp(64px, 22vw, 200px)/.84 var(--display); text-transform: uppercase; letter-spacing: -.01em;
  background: var(--reggae-title-bands, linear-gradient(180deg, #e0303b 0 33%, var(--gold) 33% 66%, #1f9a55 66%)); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(255,253,245,.6); overflow-wrap: anywhere; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .gx-book-title { color: var(--gold); } }
.gx-book-lede { margin: 12px 0 0; max-width: 36ch; font: 500 clamp(18px, 4.6vw, 24px)/1.35 var(--body); color: var(--cream); }
.gx-toc { display: flex; gap: 10px; overflow-x: auto; margin: 22px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.gx-toc::-webkit-scrollbar { display: none; }
.gx-toc-chip { flex: 0 0 auto; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-height: 64px; min-width: 190px;
  padding: 10px 14px; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--gold); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.gx-toc-chip b { grid-row: span 2; font: 900 34px/1 var(--display); }
.gx-toc-chip span { font: 800 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.gx-toc-chip small { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; opacity: .85; }
.gx-toc-chip.tone-green { background: var(--leaf); color: var(--cream); }
.gx-toc-chip.tone-red { background: var(--blood); color: var(--cream); }
.gx-toc-chip.tone-black { background: #1c1a15; color: var(--cream); box-shadow: inset 0 -4px 0 var(--gold); }
.gx-toc-chip.tone-sunrise { background: linear-gradient(135deg, var(--sun), #f59e0b 60%, #e8541e); color: var(--ink); }
.gx-toc-chip:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }

/* ---- a chapter: band, lead picture, words, collage, sound ---- */
.gx-ch { color: var(--cream); scroll-margin-top: 5rem; }
.gx-ch.tone-gold { background: var(--gold); color: var(--ink); }
.gx-ch.tone-green { background: var(--leaf); }
.gx-ch.tone-red { background: var(--blood); }
.gx-ch.tone-black { background: #0b0a08; }
.gx-ch.tone-sunrise { background: linear-gradient(180deg, var(--sun) 0%, #f59e0b 55%, #f07c1f 100%); color: var(--ink); }
.gx-ch::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; pointer-events: none;
  background: linear-gradient(90deg, var(--blood) 0 33.3%, var(--gold) 33.3% 66.6%, var(--leaf) 66.6%); }
.gx-ch.tone-gold::after { background: linear-gradient(90deg, var(--blood) 0 50%, var(--leaf) 50%); }
.gx-ch-band { position: relative; padding: 30px calc(var(--gutter) + 92px) 18px var(--gutter); min-height: 180px; }
.gx-ch-band::before { content: ""; position: absolute; inset: -60% -40% -20% 34%; z-index: -1; pointer-events: none; opacity: .16;
  background: repeating-conic-gradient(from 0deg at 70% 40%, currentColor 0 5deg, transparent 5deg 14deg); }
.gx-ch-no { position: absolute; right: -6px; top: -18px; z-index: -1; font: 900 clamp(160px, 52vw, 380px)/.8 var(--display); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px currentColor; opacity: .28; pointer-events: none; }
.gx-ch-band .gx-disc { right: var(--gutter); top: 22px; width: 84px; }
.gx-ch-band .gx-disc i { font-size: 13px; transform: translateY(-15px); }
.gx-ch-years { margin: 0 0 6px; font: 500 13px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.gx-ch-title { margin: 0; max-width: 11ch; font: 900 clamp(46px, 14vw, 132px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: anywhere; }
.gx-ch-spread { padding: 0 0 36px; }
.gx-ch-lead { margin: 0; position: relative; }
.gx-ch-lead a { display: block; }
.gx-ch-lead img { display: block; width: 100%; height: auto; max-height: 86svh; object-fit: cover; object-position: 50% 30%; background: #0b0a09; }
.gx-ch-lead figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px var(--gutter) 0; font: 500 15px/1.4 var(--body); }
.gx-ch-lead cite, .gx-ch-words cite { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; opacity: .8; }
.gx-ch-lead--sleeve { padding: 18px var(--gutter) 0; }
.gx-ch-lead--sleeve img { width: min(100%, 560px); height: auto; aspect-ratio: 1; border: 6px solid var(--cream); box-shadow: 0 28px 60px -20px rgba(0,0,0,.9); transform: rotate(-2deg); }
.gx-ch-page { padding: 0 var(--gutter); min-width: 0; }
.gx-ch-records, .gx-ch-sound, .gx-ch-lead { min-width: 0; }
.gx-ch-words { margin: 26px 0 8px; padding: 0; }
.gx-ch-words p { margin: 0; font: 900 clamp(40px, 12.5vw, 96px)/.9 var(--display); text-transform: uppercase; transform: rotate(-2deg); transform-origin: left center; }
.gx-ch-words p::before { content: "\201C"; display: block; height: .5em; font-size: 1.3em; line-height: .9; opacity: .55; }
.gx-ch-words cite { display: block; margin-top: 14px; }
.tone-green .gx-ch-words p, .tone-red .gx-ch-words p { color: var(--sun); }
.tone-black .gx-ch-words p { color: var(--gold); }

/* the collage: polaroids with tape, tilted, big first */
.gx-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin: 24px 0 8px; }
.gx-pol { position: relative; display: block; padding: 8px 8px 10px; background: var(--cream); color: var(--ink); text-decoration: none;
  transform: rotate(var(--r, -2deg)); box-shadow: 0 16px 30px -14px rgba(0,0,0,.65); transition: transform .22s var(--ease-arrive); }
.gx-pol:nth-child(3n+1) { grid-column: span 2; }
.gx-pol::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%) rotate(3deg);
  background: linear-gradient(90deg, rgba(184,20,31,.85) 0 33.3%, rgba(244,180,0,.9) 33.3% 66.6%, rgba(11,107,58,.85) 66.6%); }
.gx-pol img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; background: #1a1814; }
.gx-pol:nth-child(3n+1) img { aspect-ratio: 5 / 4; }
.gx-pol span { display: block; margin-top: 8px; font: 500 13px/1.35 var(--body); overflow-wrap: anywhere; }
.gx-pol:hover, .gx-pol:focus-visible { transform: rotate(0deg) scale(1.03); z-index: 2; outline: 3px solid var(--ink); outline-offset: 2px; }
.tone-green .gx-pol:focus-visible, .tone-red .gx-pol:focus-visible, .tone-black .gx-pol:focus-visible { outline-color: var(--sun); }

/* the sound: 45s as spinning records, typographic sleeves for albums named in the book, players */
.gx-ch-sound { margin: 30px 0 6px; padding: 18px 16px 18px; border-radius: 18px; background: rgba(0,0,0,.82); color: var(--cream); }
.gx-ch-sound-label { margin: 0; font: 900 26px/1 var(--display); text-transform: uppercase; color: var(--gold); }
.gx-ch-sound-label span[aria-hidden="true"] { color: #e0303b; }
.gx-ch-fact { margin: 6px 0 0; font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); opacity: .85; }
.gx-ch-records { display: flex; gap: 14px; overflow-x: auto; margin-top: 14px; padding-bottom: 6px; scroll-snap-type: x proximity; }
.gx-45 { flex: 0 0 132px; scroll-snap-align: start; text-decoration: none; color: var(--cream); }
.gx-45 img { display: block; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); background: #111; }
.gx-45:hover img, .gx-45:focus-visible img { animation: gx-spin 3s linear infinite; }
.gx-45 span { display: block; margin-top: 8px; font: 500 12px/1.3 var(--body); }
.gx-type-sleeve { flex: 0 0 150px; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; text-decoration: none;
  color: var(--ink); background: radial-gradient(circle at 78% 26%, #111 0 17%, var(--gold) 17.5% 20%, #111 20.5% 30%, transparent 30.5%), linear-gradient(160deg, var(--sun), var(--gold) 55%, #e8541e);
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.9); }
.gx-type-sleeve b { font: 900 22px/.92 var(--display); text-transform: uppercase; }
.gx-type-sleeve small { font: 500 12px/1.2 var(--mono); letter-spacing: .1em; margin-top: 4px; }
.gx-play { flex: 0 0 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.gx-play--lead { flex-basis: min(78vw, 300px); }
.gx-play img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; box-shadow: 0 12px 26px -12px rgba(0,0,0,.9); }
.gx-play p { margin: 0; display: grid; }
.gx-play p b { font: 800 17px/1.1 var(--display); text-transform: uppercase; }
.gx-play p small { font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; opacity: .85; }
.gx-play-links { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-play-links a, .gx-play-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  font: 600 13px/1 var(--body); color: var(--cream); border: 1.5px solid rgba(255,253,245,.5); background: transparent; cursor: pointer; }
.gx-play-btn { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 800; }
.gx-play-links a:hover { border-color: var(--gold); }
.gx-play-links a:focus-visible, .gx-play-btn:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.gx-play-btn[aria-pressed="true"] { background: transparent; color: var(--gold); }
.gx-play-slot iframe { display: block; width: 100%; height: 175px; border: 0; border-radius: 12px; background: #111; }
.gx-ch-more { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 18px; padding: 0 18px; border-radius: 999px;
  font: 700 15px/1 var(--body); text-decoration: none; color: inherit; border: 2px solid currentColor; }
.gx-ch-more:hover { background: rgba(0,0,0,.14); }
.gx-ch-more:focus-visible { background: rgba(0,0,0,.14); outline: 3px solid currentColor; outline-offset: 3px; }
.gx-ch-more[hidden] { display: none; }
#every-picture { scroll-margin-top: 6rem; }

/* ---- in view: the page settles in (JS adds .is-in; without JS everything is simply there) ---- */
.js-book .gx-ch:not(.is-in) .gx-pol, .js-book .gx-ch:not(.is-in) .gx-ch-words p { opacity: 0; transform: translateY(26px) rotate(var(--r, -2deg)); }
.gx-ch .gx-pol, .gx-ch .gx-ch-words p { transition: opacity .6s var(--ease-arrive), transform .6s var(--ease-arrive); }
.gx-ch.is-in .gx-pol:nth-child(2) { transition-delay: .08s; } .gx-ch.is-in .gx-pol:nth-child(3) { transition-delay: .16s; }
.gx-ch.is-in .gx-pol:nth-child(4) { transition-delay: .24s; } .gx-ch.is-in .gx-pol:nth-child(5) { transition-delay: .32s; }

/* ---- desktop: the spread opens like a book ---- */
@media (min-width: 900px) {
  .gx-cover { display: grid; grid-template-columns: 1fr 1.05fr; grid-template-rows: auto auto; column-gap: 48px; padding: 48px max(var(--gutter), calc((100vw - 1280px) / 2)) 40px; }
  .gx-cover-words { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
  .gx-toc { grid-column: 1; grid-row: 2; flex-wrap: wrap; overflow: visible; margin: 22px 0 0; padding: 0; align-self: start; }
  .gx-cover-stage { grid-column: 2; grid-row: 1 / span 2; min-height: 640px; max-height: none; }
  .gx-disc--cover { width: 220px; right: 2%; top: 4%; }
  .gx-disc--cover i { transform: translateY(-40px); font-size: 14px; }
  .gx-ch-band { padding: 56px calc(max(var(--gutter), calc((100vw - 1280px) / 2)) + 150px) 28px max(var(--gutter), calc((100vw - 1280px) / 2)); min-height: 260px; }
  .gx-ch-band .gx-disc { width: 132px; right: max(var(--gutter), calc((100vw - 1280px) / 2)); top: 40px; }
  .gx-ch-band .gx-disc i { transform: translateY(-24px); }
  .gx-ch-title { max-width: 14ch; }
  .gx-ch-spread { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 44px; align-items: start; padding: 0 max(var(--gutter), calc((100vw - 1280px) / 2)) 56px;
    background: linear-gradient(90deg, transparent calc(52.4% - 1px), rgba(0,0,0,.14) 52.4%, transparent calc(52.4% + 10px)); }
  .gx-ch-lead { position: sticky; top: 90px; }
  .gx-ch-lead img { max-height: 80vh; border: 10px solid var(--cream); box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }
  .gx-ch-lead figcaption { padding-inline: 0; }
  .gx-ch-lead--sleeve { padding: 0; }
  .gx-ch-page { padding: 0; }
  .gx-ch-words { margin-top: 0; }
  .gx-collage { grid-template-columns: 1fr 1fr 1fr; }
  .gx-pol:nth-child(3n+1) { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .gx-disc, .is-playing .gx-disc, .gx-cover .gx-disc, .gx-45:hover img { animation: none; }
  .js-book .gx-ch:not(.is-in) .gx-pol, .js-book .gx-ch:not(.is-in) .gx-ch-words p { opacity: 1; transform: rotate(var(--r, -2deg)); }
  .gx-pol, .gx-sleeve, .gx-ch .gx-pol, .gx-ch .gx-ch-words p { transition: none; }
}
.gx-play-btn[hidden] { display: none; }

/* BEGIN skyhigh-gallery-readability-20260928
   The living book keeps its full-print contact sheet, then opens the smaller
   chapter polaroids into a phone swipe rail. Metadata uses the local canvas
   ink so gold chapters and gold TOC chips remain readable. Append to
   assets/gallery/gallery.css after the existing living-book layers. */
body[data-carry] main .gx .gx-kicker,
body[data-carry] main .gx .gx-dig button {
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: .09em;
}
/* The shared themebook hover paints a gold filter button. Its nested count
   otherwise keeps gold ink and disappears into that surface. */
body[data-carry] main .gx .gx-dig button:hover span {
  color: var(--ink-on-gold) !important;
}
body[data-carry] main .gx .gx-lede,
body[data-carry] main .gx .gx-more {
  color: var(--salt);
}
body[data-carry] main .gx .gx-toc-chip small {
  font-size: 14px !important;
  line-height: 1.35;
  color: inherit !important;
  opacity: 1;
}
/* site.css treats the entire .gx-toc as a gold canvas; each chapter chip
   still needs ink chosen for its own painted background. */
body[data-carry] main .gx .gx-toc .gx-toc-chip:is(.tone-green, .tone-red, .tone-black),
body[data-carry] main .gx .gx-toc .gx-toc-chip:is(.tone-green, .tone-red, .tone-black) :is(b, span, small) {
  color: var(--cream) !important;
}
body[data-carry] main .gx .gx-toc .gx-toc-chip:is(.tone-gold, .tone-sunrise),
body[data-carry] main .gx .gx-toc .gx-toc-chip:is(.tone-gold, .tone-sunrise) :is(b, span, small) {
  color: var(--ink) !important;
}
body[data-carry] main .gx .gx-ch-years { font-size: 15px; line-height: 1.35; letter-spacing: .11em; }
body[data-carry] main .gx .gx-ch-lead figcaption {
  font-size: 17px !important;
  line-height: 1.45;
  color: inherit !important;
}
body[data-carry] main .gx .gx-ch-lead cite,
body[data-carry] main .gx .gx-ch-words cite {
  font-size: 14px !important;
  line-height: 1.45;
  color: inherit !important;
  opacity: 1;
}
body[data-carry] main .gx .gx-ch-sound {
  border: 2px solid var(--gold);
  border-radius: 4px;
  background: #100e0a;
}
body[data-carry] main .gx .gx-ch-sound-label,
body[data-carry] main .gx .gx-ch-sound-label span:not([aria-hidden="true"]) {
  color: var(--gold) !important;
}
body[data-carry] main .gx .gx-ch-sound .gx-ch-fact {
  font-size: 14px;
  line-height: 1.45;
  color: var(--cream) !important;
  opacity: 1;
}
body[data-carry] main .gx .gx-45 span { font-size: 15px; line-height: 1.4; }
body[data-carry] main .gx .gx-type-sleeve small {
  font-size: 14px !important;
  line-height: 1.35;
  color: var(--ink) !important;
  opacity: 1;
}
body[data-carry] main .gx .gx-play p small {
  font-size: 14px !important;
  line-height: 1.4;
  color: var(--cream) !important;
  opacity: 1;
}
body[data-carry] main .gx .gx-play-links a,
body[data-carry] main .gx .gx-play-btn { font-size: 14px; line-height: 1.25; border-width: 2px; }
body[data-carry] main .gx .gx-pol span { font-size: 16px; line-height: 1.45; }
body[data-carry] main .gx .gx-pol { align-self: start; }
body[data-carry] main .gx .gx-pol img {
  width: auto;
  max-width: var(--gx-print-max-width, 100%);
  height: auto;
  max-height: min(68vh, 680px);
  aspect-ratio: auto;
  object-fit: contain;
  margin-inline: auto;
}

/* A strong reggae edge frames each full archival print without cropping it. */
body[data-carry] main .gx [data-gallery-grid] > .gx-frame {
  flex-basis: min(92%, 610px);
  border: 2px solid var(--canvas-gold);
  padding-bottom: 31px;
}
body[data-carry] main .gx [data-gallery-grid] > .gx-frame:nth-child(3n + 2) { border-color: var(--red-ink); }
body[data-carry] main .gx [data-gallery-grid] > .gx-frame:nth-child(3n + 3) { border-color: var(--green-ink); }
body[data-carry] main .gx .gx-frame img {
  width: auto;
  max-width: var(--gx-print-max-width, 100%);
  height: auto;
  max-height: 80vh;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  filter: none;
  margin-inline: auto;
}
body[data-carry] main .gx .gx-frame .gx-no,
body[data-carry] main .gx .gx-frame .gx-loc {
  bottom: 9px;
  font-size: 14px !important;
  line-height: 1.2;
  letter-spacing: .06em;
}
body[data-carry] main .gx .gx-frame .gx-loc { color: var(--salt); }

/* The print viewer retains one scrolling notes panel on phones. */
body[data-carry] main .gx .gx-notes { border-color: var(--canvas-gold); border-width: 2px; }
body[data-carry] main .gx .gx-notes [data-print-no],
body[data-carry] main .gx .gx-notes [data-print-locator],
body[data-carry] main .gx .gx-notes [data-print-names],
body[data-carry] main .gx .gx-notes [data-print-cite] {
  font-size: 14px;
  line-height: 1.45;
  color: var(--salt);
}
body[data-carry] main .gx .gx-notes [data-print-context] { font-size: clamp(16px, 1.4vw, 18px); }
body[data-carry] main .gx .gx-notes .gx-note-basis { font-size: 14px; line-height: 1.5; color: var(--salt); }
body[data-carry] main .gx .gx-ctl button,
body[data-carry] main .gx .gx-notes .gx-buy { font-size: 14px; line-height: 1.25; border-width: 2px; }

@media (max-width: 680px) {
  body[data-carry] main .gx .gx-collage {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 16px var(--gutter) 26px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) #100e0a;
  }
  body[data-carry] main .gx .gx-collage > .gx-pol {
    flex: 0 0 min(82vw, 340px);
    min-width: 0;
    grid-column: auto;
    scroll-snap-align: start;
  }
}
@media (min-width: 900px) {
  body[data-carry] main .gx .gx-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* END skyhigh-gallery-readability-20260928 */

/* BEGIN skyhigh-photo-fullscreen-20260928
   The public print is shown at its own pixel dimensions, fitting down when
   necessary. No dimming, color wash, crop, or timed developing state. Notes
   and controls stay below the image at every width. */
section.gx-sheet > dialog.gx-dlg[open],
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;
  max-width: none;
  max-height: none;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #050505;
  color: #fffdf5;
}
.gx-dlg::backdrop, .sky-photo-dlg::backdrop { background: rgba(0, 0, 0, .94); }
.gx-dlg .gx-tray, .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;
}
.gx-dlg .gx-tray img, .sky-photo-stage img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
.gx-dlg .gx-notes {
  box-sizing: border-box;
  flex: none;
  max-height: min(26dvh, 232px);
  min-height: 72px;
  padding: 10px clamp(14px, 2.5vw, 32px) 16px;
  border: 0;
  border-top: 2px solid #e2a72c;
  background: #121512;
  overflow-y: auto;
}
.gx-dlg .gx-ctl {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2px 0 4px;
  background: #121512;
}
.sky-photo-dlg { box-sizing: border-box; }
.sky-photo-foot {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(24dvh, 190px);
  min-height: 66px;
  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,
.sky-photo-actions a:focus-visible, .sky-photo-actions button:focus-visible {
  outline: 2px solid #5be69a;
  outline-offset: 2px;
  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;
}
/* Gallery cards need visible separation from their black rail. The sunrise
   chip gets a green edge and a light gold/orange face under dark ink. */
body[data-carry] main .gx-products .item { border: 2px solid #ffd15c; background: #121512; color: #fffdf5; }
body[data-carry] main .gx-products .item:nth-child(3n + 2) { border-color: #ff7569; }
body[data-carry] main .gx-products .item:nth-child(3n + 3) { border-color: #5be69a; }
body[data-carry] main .gx .gx-toc .gx-toc-chip.tone-sunrise {
  border: 2px solid #5be69a !important;
  background: linear-gradient(135deg, #ffe083, #e8ae3c 60%, #e08d35) !important;
  box-shadow: inset 0 -4px 0 #14110a, 0 5px 18px rgba(0, 0, 0, .5) !important;
  color: #14110a !important;
}
@media (max-width: 760px) {
  .gx-dlg .gx-notes { max-height: min(26dvh, 220px); }
  .sky-photo-foot { max-height: min(23dvh, 180px); }
}
/* END skyhigh-photo-fullscreen-20260928 */

/* MARKED LAYER skyhigh-record-listen-20260928: music destinations sit below
   the cover pictures, which open at full size on click. */
.gx-cover-listen {
  display: flex;
  gap: 9px;
  max-width: 100%;
  margin-top: 18px;
  padding: 3px 2px 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.gx-cover-listen-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  padding: 7px 14px;
  border: 2px solid #ffd15c;
  border-radius: 3px;
  background: #101511;
  color: #fffdf5;
  font: 700 14px/1.25 var(--body, sans-serif);
  text-decoration: none;
  scroll-snap-align: start;
}
.gx-cover-listen-link:nth-child(3n + 2) { border-color: #ff7569; }
.gx-cover-listen-link:nth-child(3n + 3) { border-color: #5be69a; }
.gx-cover-listen-link:hover, .gx-cover-listen-link:focus-visible {
  outline: 2px solid #ffd15c;
  outline-offset: 2px;
  background: #ffd15c;
  color: #101511;
}

/* MARKED LAYER skyhigh-video-still-photo-20260928: the visible still is a
   picture target; Play remains its own centered, accessible video control. */
.video .player button[data-yt] {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 24px);
  min-width: 104px;
  height: auto;
  min-height: 52px;
  border: 2px solid #ffd15c;
  border-radius: 4px;
  background: #101511;
  color: #fffdf5;
  font: 700 clamp(14px, 1.3vw, 18px)/1.2 var(--body, sans-serif);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .65);
}
.video .player button[data-yt] .play-mark {
  border: 0;
  background: transparent;
}
.video .player button[data-yt]:hover,
.video .player button[data-yt]:focus-visible {
  outline: 3px solid #5be69a;
  outline-offset: 3px;
  background: #ffd15c;
  color: #101511;
}


/* ==========================================================================
   RED GOLD GREEN BLACK — DEPTH, SHADING & ZERO-DOUBLING LAYER ARCHITECTURE
   Owner invariant: "RED GOLD GREEN BLACK - KEEP THE COLORS IN THE DEPTH AND
   SHADING COMPARISONS ALWAYS, ENSURE NO COLORS ARE DOUBLED ON TOP OF EACH
   OTHER AND THEREFORE NOT VISIBLE/OFF"
   ========================================================================== */

/* 1. TOC CHAPTER CHIPS (RED, GOLD, GREEN, BLACK WITH DEPTH & SHADING) */
body[data-carry] .gx-toc {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scroll-snap-type: x proximity !important;
  padding: 8px 4px 14px 4px !important;
}
body[data-carry] .gx-toc-chip {
  position: relative !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease !important;
}
body[data-carry] .gx-toc-chip:hover {
  transform: translateY(-2px) !important;
}

/* Tone Black Chip: Black ground, gold border/accent, salt text — NO BLACK ON BLACK */
body[data-carry] .gx-toc-chip.tone-black {
  background: #141512 !important;
  border: 1.5px solid rgba(226, 167, 44, 0.6) !important;
  box-shadow: inset 0 -4px 0 var(--reggae-gold, #e2a72c), 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}
body[data-carry] .gx-toc-chip.tone-black b {
  color: var(--reggae-gold-bright, #ffd15c) !important;
}
body[data-carry] .gx-toc-chip.tone-black span {
  color: var(--salt, #f8f8f6) !important;
}
body[data-carry] .gx-toc-chip.tone-black small {
  color: #d4d4cc !important;
}

/* Tone Green Chip: Green ground, emerald border/accent, salt text — NO GREEN ON GREEN */
body[data-carry] .gx-toc-chip.tone-green {
  background: #15452b !important;
  border: 1.5px solid rgba(74, 222, 128, 0.5) !important;
  box-shadow: inset 0 -4px 0 #2f9e66, 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
body[data-carry] .gx-toc-chip.tone-green b {
  color: #ffffff !important;
}
body[data-carry] .gx-toc-chip.tone-green span {
  color: #ffffff !important;
}
body[data-carry] .gx-toc-chip.tone-green small {
  color: #d1fae5 !important;
}

/* Tone Red Chip: Red ground, crimson border/accent, salt text — NO RED ON RED */
body[data-carry] .gx-toc-chip.tone-red {
  background: #82221c !important;
  border: 1.5px solid rgba(255, 107, 94, 0.5) !important;
  box-shadow: inset 0 -4px 0 #e64a38, 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
body[data-carry] .gx-toc-chip.tone-red b {
  color: #ffffff !important;
}
body[data-carry] .gx-toc-chip.tone-red span {
  color: #ffffff !important;
}
body[data-carry] .gx-toc-chip.tone-red small {
  color: #ffe4e6 !important;
}

/* Tone Gold Chip: Gold ground, dark obsidian text & borders — NO GOLD ON GOLD */
body[data-carry] .gx-toc-chip.tone-gold {
  background: #e2a72c !important;
  border: 1.5px solid rgba(0, 0, 0, 0.4) !important;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
body[data-carry] .gx-toc-chip.tone-gold b {
  color: #121110 !important;
}
body[data-carry] .gx-toc-chip.tone-gold span {
  color: #121110 !important;
}
body[data-carry] .gx-toc-chip.tone-gold small {
  color: #2b1b08 !important;
}

/* Tone Sunrise Chip: Gold-to-orange gradient, dark obsidian text — NO GOLD ON GOLD */
body[data-carry] .gx-toc-chip.tone-sunrise {
  background: linear-gradient(135deg, #ffd15c, #e2a72c 55%, #c94018) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.35) !important;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
body[data-carry] .gx-toc-chip.tone-sunrise b {
  color: #121110 !important;
}
body[data-carry] .gx-toc-chip.tone-sunrise span {
  color: #121110 !important;
}
body[data-carry] .gx-toc-chip.tone-sunrise small {
  color: #2b1b08 !important;
}

/* 2. GOLD GROUND (.canvas-gold, [data-canvas="gold"], .gx-ch.tone-gold, .section--gold):
   - Background: Gold (#e2a72c)
   - Foreground Text: Deep obsidian ink (#121110)
   - Eyebrows & metadata: Deep mahogany (#2b1b08)
   - NO GOLD ON GOLD! Never permit gold text or yellow borders on gold canvas. */
body[data-carry] :is(.canvas-gold, [data-canvas="gold"], [class*="canvas-gold"], .gx-ch.tone-gold, .section--gold) {
  background-color: var(--canvas-gold, #e2a72c);
  color: var(--ink-on-gold, #121110) !important;
}

body[data-carry] :is(.canvas-gold, [data-canvas="gold"], [class*="canvas-gold"], .gx-ch.tone-gold, .section--gold) :is(
  h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .title, .lede, .body, blockquote, dt, dd, figcaption, cite
) {
  color: var(--ink-on-gold, #121110) !important;
}

body[data-carry] :is(.canvas-gold, [data-canvas="gold"], [class*="canvas-gold"], .gx-ch.tone-gold, .section--gold) :is(
  .sub, .item .sub, .meta .sub, .eyebrow, .ld-era__years, .ld-era__cap, .code .c, .code .n, .album-type-badge, .era-tag, .era-pill, small, .crest-label
) {
  color: #2b1b08 !important;
  font-weight: 600;
}

/* Dark elements/buttons on gold canvas retain salt text and dark depth */
body[data-carry] :is(.canvas-gold, [data-canvas="gold"], [class*="canvas-gold"], .gx-ch.tone-gold, .section--gold) :is(.btn, .st-chip, .ar-btn, [data-tone="black"]) {
  background: #121110 !important;
  color: var(--salt, #f8f8f6) !important;
  border-color: #121110 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
body[data-carry] :is(.canvas-gold, [data-canvas="gold"], [class*="canvas-gold"], .gx-ch.tone-gold, .section--gold) :is(.btn, .st-chip, .ar-btn, [data-tone="black"]) :is(span, small, b) {
  color: var(--salt, #f8f8f6) !important;
}

/* 3. RED GROUND (.canvas-red, [data-canvas="red"], .gx-ch.tone-red, .section--red):
   - Background: Deep Reggae Red (#a12f28 / #85221d)
   - Foreground Text: Crisp Salt (#f8f8f6)
   - Eyebrows & metadata: Bright Gold (#ffd15c)
   - NO RED ON RED! Never permit red text or red badges without contrasting borders. */
body[data-carry] :is(.canvas-red, [data-canvas="red"], [class*="canvas-red"], .gx-ch.tone-red, .section--red) {
  background-color: var(--canvas-red, #a12f28);
  color: var(--salt, #f8f8f6) !important;
}

body[data-carry] :is(.canvas-red, [data-canvas="red"], [class*="canvas-red"], .gx-ch.tone-red, .section--red) :is(
  h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .title, .lede, .body, blockquote, dt, dd, figcaption, cite
) {
  color: var(--salt, #f8f8f6) !important;
}

body[data-carry] :is(.canvas-red, [data-canvas="red"], [class*="canvas-red"], .gx-ch.tone-red, .section--red) :is(
  .sub, .item .sub, .meta .sub, .eyebrow, .ld-era__years, .ld-era__cap, .code .c, .code .n, .album-type-badge, .era-tag, .era-pill, small, .crest-label
) {
  color: var(--reggae-gold-bright, #ffd15c) !important;
  font-weight: 600;
}

/* 4. GREEN GROUND (.canvas-green, [data-canvas="green"], .gx-ch.tone-green, .section--green):
   - Background: Deep Reggae Green (#1c5b3a / #15452b)
   - Foreground Text: Crisp Salt (#f8f8f6)
   - Eyebrows & metadata: Bright Gold (#ffd15c)
   - NO GREEN ON GREEN! Never permit green text or green badges without contrasting borders. */
body[data-carry] :is(.canvas-green, [data-canvas="green"], [class*="canvas-green"], .gx-ch.tone-green, .section--green) {
  background-color: var(--canvas-green, #1c5b3a);
  color: var(--salt, #f8f8f6) !important;
}

body[data-carry] :is(.canvas-green, [data-canvas="green"], [class*="canvas-green"], .gx-ch.tone-green, .section--green) :is(
  h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .title, .lede, .body, blockquote, dt, dd, figcaption, cite
) {
  color: var(--salt, #f8f8f6) !important;
}

body[data-carry] :is(.canvas-green, [data-canvas="green"], [class*="canvas-green"], .gx-ch.tone-green, .section--green) :is(
  .sub, .item .sub, .meta .sub, .eyebrow, .ld-era__years, .ld-era__cap, .code .c, .code .n, .album-type-badge, .era-tag, .era-pill, small, .crest-label
) {
  color: var(--reggae-gold-bright, #ffd15c) !important;
  font-weight: 600;
}

body[data-carry] main .item .title,
body[data-carry] main .card .title {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--salt);
}

body[data-carry] main .item .links a {
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--salt);
  border-bottom: 2px solid var(--reggae-gold);
  padding: 4px 0;
  transition: all 0.2s ease;
}
body[data-carry] main .item .links a:hover {
  color: var(--reggae-gold-bright);
  border-bottom-color: var(--reggae-red-bright);
}

/* 3. IMAGES & SVGs SHINE BRIGHT: No hover dimming penalty anywhere */
body[data-carry] .item:hover .art img,
body[data-carry] .item:hover img,
body[data-carry] .frame:hover img,
body[data-carry] .card:hover img {
  filter: brightness(1.08) contrast(1.05) saturate(1.1) !important;
  transform: scale(1.02);
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Generous, artistic borders around media items */
body[data-carry] main .item {
  border: 1px solid var(--reggae-gold-border);
  background: #0d0e0c;
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body[data-carry] main .item:hover {
  border-color: var(--reggae-gold);
  box-shadow: 0 4px 20px rgba(226, 167, 44, 0.15);
}

/* 4. SVGs SIZED FOR CLARITY AND VIBRANCE */
body[data-carry] .ld-sectionart img,
body[data-carry] .section-head .ld-sectionart img {
  width: auto;
  max-height: 90px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}

/* 5. ARTISTIC HORIZONTAL SCROLLING RAILS FOR PORTFOLIO SHOWCASE */
body[data-carry] .horizontal-rail,
body[data-carry] .studio-rail,
body[data-carry] .grid.horizontal,
body[data-carry] [data-rail="horizontal"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 12px 4px 24px 4px !important;
  border: 0 !important;
  background: transparent !important;
  scrollbar-width: thin;
  scrollbar-color: var(--reggae-gold) rgba(255, 255, 255, 0.05);
}

body[data-carry] .horizontal-rail::-webkit-scrollbar,
body[data-carry] .studio-rail::-webkit-scrollbar,
body[data-carry] .grid.horizontal::-webkit-scrollbar,
body[data-carry] [data-rail="horizontal"]::-webkit-scrollbar {
  height: 8px;
}
body[data-carry] .horizontal-rail::-webkit-scrollbar-track,
body[data-carry] .studio-rail::-webkit-scrollbar-track,
body[data-carry] .grid.horizontal::-webkit-scrollbar-track,
body[data-carry] [data-rail="horizontal"]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}
body[data-carry] .horizontal-rail::-webkit-scrollbar-thumb,
body[data-carry] .studio-rail::-webkit-scrollbar-thumb,
body[data-carry] .grid.horizontal::-webkit-scrollbar-thumb,
body[data-carry] [data-rail="horizontal"]::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--reggae-red), var(--reggae-gold), var(--reggae-green));
  border-radius: 4px;
}

body[data-carry] .horizontal-rail > *,
body[data-carry] .studio-rail > *,
body[data-carry] .grid.horizontal > *,
body[data-carry] [data-rail="horizontal"] > * {
  flex: 0 0 clamp(280px, 32vw, 360px) !important;
  scroll-snap-align: start !important;
  min-width: 0 !important;
}

/* 6. EXPANDED CONTAINER WIDTH FOR ART GALLERY PORTFOLIO */
body[data-carry] .wrap,
body[data-carry] .gallery-wrap,
body[data-carry] main > .section {
  max-width: 1400px;
}

/* 7. STUDIO SHOWCASE RAILS & ELEMENTS (RECORDS, VIDEOS, PRINTS, BOOKS) */
body[data-carry] .st-rail {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px 4px 28px 4px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--reggae-gold) rgba(255, 255, 255, 0.05);
}

@media (max-width: 599px) {
  body[data-carry] .st-rail {
    scroll-snap-type: x mandatory !important;
  }
}

body[data-carry] .st-rec {
  flex: 0 0 clamp(280px, 32vw, 360px) !important;
  scroll-snap-align: start !important;
  position: relative;
  background: #0f110d;
  border: 2px solid var(--reggae-gold-border);
  border-radius: 4px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-carry] .st-rec:hover {
  border-color: var(--reggae-gold);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(226, 167, 44, 0.2);
}
body[data-carry] .st-rec__sleeve {
  position: relative;
  display: block;
  overflow: visible;
  border-radius: 2px;
}
body[data-carry] .st-rec__cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}
body[data-carry] .st-rec__disc {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #222 2px 3px, #000 3px 6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: -1;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-carry] .st-rec:hover .st-rec__disc {
  transform: translateX(34px) rotate(45deg);
}
body[data-carry] .st-rec__kind {
  font: 600 13px/1.3 var(--mono);
  color: var(--reggae-gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-carry] .st-rec__title {
  font: 700 clamp(1.2rem, 1.8vw, 1.5rem)/1.15 var(--display);
  text-transform: uppercase;
  color: var(--salt);
  margin: 0;
}
body[data-carry] .st-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  font: 600 12px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--salt);
  border: 1.5px solid var(--reggae-gold-border);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.2s ease;
}
body[data-carry] .st-chip:hover {
  background: var(--reggae-gold);
  color: #111;
  border-color: var(--reggae-gold);
  box-shadow: 0 0 14px rgba(226, 167, 44, 0.4);
}

/* Video Screen Rail */
body[data-carry] .st-vid {
  flex: 0 0 clamp(300px, 36vw, 420px) !important;
  scroll-snap-align: start !important;
  background: #0f110d;
  border: 2px solid var(--reggae-red-border);
  border-radius: 4px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.3s ease;
}
body[data-carry] .st-vid:hover {
  border-color: var(--reggae-red-bright);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(161, 47, 40, 0.25);
}
body[data-carry] .st-vid__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 2px;
}
body[data-carry] .st-vid__player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-carry] .st-vid__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font: 700 13px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #111;
  background: var(--reggae-gold-bright);
  border: none;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
body[data-carry] .st-vid__play:hover {
  background: #fff;
  transform: scale(1.05);
}

/* Darkroom Prints Rail */
body[data-carry] .st-print {
  flex: 0 0 clamp(280px, 32vw, 380px) !important;
  scroll-snap-align: start !important;
  background: #0b0d09;
  border: 2px solid var(--reggae-green-border);
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  transition: all 0.3s ease;
}
body[data-carry] .st-print:hover {
  border-color: var(--reggae-green-bright);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(28, 91, 58, 0.25);
}
body[data-carry] .st-print__pic img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  filter: none;
}

/* Books Shelf Rail */
body[data-carry] .st-book {
  flex: 0 0 clamp(280px, 32vw, 360px) !important;
  scroll-snap-align: start !important;
  background: #12100b;
  border: 2px solid var(--reggae-gold);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
}
body[data-carry] .st-book:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(226, 167, 44, 0.3);
}

/* END skyhigh-reggae-artistic-portfolio-20260928 */


/* BEGIN skyhigh-themebook-art-upgrade — CALMED 2026-09-28 by claude-code:70f1f7ba (owner 12:0xZ: "FIX THE FOOTER AND THE 3D
   EFFECT THATS TOO MUCH, ALSO IMPROVE THE HEADER SLIGHTLY"). Same selectors as Gemini's block; the red/green offset shadows
   (the doubled-colour 3D) are gone. Depth = soft black shadow; colour = one gold edge or one thin red/gold/green line. */

/* Buttons: gold edge, soft depth, a small lift on hover (no scale, no colour echoes) */
body[data-carry] main .btn,
body[data-carry] main .ar-btn,
body[data-carry] :is(.gx-dig button, .era-pill, .turntable-btn, .siren-btn) {
  border-radius: 6px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
  text-shadow: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  border: 2px solid var(--canvas-gold, #e2a72c) !important;
}
body[data-carry] main .btn:is(:hover, :focus-visible),
body[data-carry] main .ar-btn:is(:hover, :focus-visible),
body[data-carry] :is(.gx-dig button, .era-pill, .turntable-btn, .siren-btn):is(:hover, :focus-visible) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55) !important;
  background: var(--canvas-gold, #e2a72c) !important;
  color: var(--void, #000) !important;
}

/* Footer: clean black ground, one gold rule, the wordmark at a calm size with soft depth only */
body .footer {
  border-top: 4px solid var(--canvas-gold) !important;
  box-shadow: none !important;
  background: #050505 !important;
}
body .footer .wordmark {
  font-size: clamp(44px, 8vw, 96px) !important;
  text-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
  letter-spacing: 0.02em !important;
}
body .footer nav .footer-nav-link {
  font-family: var(--display, "Big Shoulders Display", Impact, sans-serif) !important;
  font-size: clamp(20px, 3.2vw, 30px) !important;
  letter-spacing: 0.06em !important;
  text-shadow: none !important;
  transition: color 0.2s ease !important;
}
body .footer nav .footer-nav-link:is(:hover, :focus-visible) {
  transform: none !important;
  text-shadow: none !important;
  color: var(--canvas-gold) !important;
  text-decoration: underline 2px !important;
  text-underline-offset: 6px;
}

/* Containers: brighter 2px edge, soft depth, a gold ring on hover (no red/green offsets) */
body[data-carry] :is(.item, .book, .connect-logo-card, .leader-pillar-card) {
  border: 2px solid rgba(248,248,246,0.22) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.55) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
body[data-carry] :is(.item, .book, .connect-logo-card, .leader-pillar-card):is(:hover, :focus-within) {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.65), 0 0 0 2px var(--canvas-gold) !important;
}

/* Header: one thin red/gold/green line under a black bar, nav a touch smaller and steadier, a gold underline on hover */
.masthead {
  border-bottom: 0 !important;
  background-image: linear-gradient(90deg, var(--canvas-red) 0 33.33%, var(--canvas-gold) 33.33% 66.66%, var(--canvas-green) 66.66% 100%) !important;
  background-size: 100% 3px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6) !important;
}
.nav a {
  font-family: var(--display, "Big Shoulders Display", Impact, sans-serif) !important;
  font-size: 19px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  min-height: 44px;
  transition: color 0.2s ease, box-shadow 0.2s ease !important;
}
@media (min-width: 600px) { .nav a { font-size: 21px !important; } }
.nav a:is(:hover, :focus-visible), .nav a[aria-current="page"] {
  transform: none !important;
  color: var(--canvas-gold) !important;
  text-shadow: none !important;
  box-shadow: inset 0 -3px 0 var(--canvas-gold) !important;
}
@media (prefers-reduced-motion: reduce) {
  body[data-carry] :is(main .btn, main .ar-btn, .item, .book, .connect-logo-card, .leader-pillar-card) { transition: none !important; transform: none !important; }
}
/* END skyhigh-themebook-art-upgrade */

/* BEGIN skyhigh-UX-update-captions-below */
.frame { display: flex; flex-direction: column; height: auto; }
.frame img { flex-shrink: 0; }
.frame .code { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; padding: 12px !important; background: var(--void, #000) !important; color: var(--salt, #fff) !important; }

/* Lightbox Full Screen Update */
.gallery-lightbox dialog {
    padding: 0 !important;
    background: #000 !important;
    display: flex; flex-direction: column;
}
.gallery-lightbox .img-container {
    flex: 1 1 auto;
    display: flex; justify-content: center; align-items: center;
    background: #000 !important;
}
.gallery-lightbox img {
    max-width: 100vw !important; max-height: 85vh !important;
    object-fit: contain !important;
}
.gallery-lightbox .lightbox-caption {
    position: relative !important;
    top: auto !important; bottom: auto !important;
    background: #111 !important;
    padding: 16px !important;
    border-top: 2px solid var(--canvas-gold) !important;
}

/* Caption strip below each hero image on Home and His Story. */
body[data-carry] .hero .sheet .frame {
  display: flex; flex-direction: column; align-self: start;
  height: auto; min-height: 0; aspect-ratio: auto !important;
  overflow: visible !important; background: #0b0a09;
}
body[data-carry] .hero .sheet .frame img {
  display: block; flex: 0 0 auto; width: 100%; height: auto !important;
  aspect-ratio: 4 / 5; object-fit: contain;
  background: #0b0a09; filter: none;
}
body[data-carry] .hero .sheet .frame .code {
  display: grid; position: static !important; flex: 0 0 auto;
  min-height: 56px; padding: 10px 12px !important;
  border-top: 2px solid var(--canvas-gold); background: #0b0a09 !important;
  color: var(--salt) !important; text-shadow: none !important;
}