/* james.com - the James Tonic hero, the latest-release block, the content-page night and the footer columns
   (css/ss-pages/hero-james.css, hero-live-1006). Loaded by modules/safety_site/head.nvx on every Safety page after the
   core and the page partial. Served byte for byte (css/ss-pages/main.mdk).
   Source: hero-james/prototype-r3/css/hero-james.css (critic PASS + ChatGPT SHIP, round 3) with the integration changes
   marked "hl:". Images: /img/safety-site/hero-james/ (round 4: collar smoothing, tablet particle plates). */

/* ---------- the figure box, in fractions of the plane (= the rig), shared by the figure and the front keep-out mask ----------
   --jf-x centre, --jf-t + --jf-tpx top, --jf-h height, --jf-ar the image aspect (1024 / 1502),
   --jf-k = (1 + 0.4 x 0.07) / (1 + 0.4 x 0.16): the figure plane's rest scale over the front plane's (safety-site-hero.js) */
.ss-hero { --jf-x: 0.64; --jf-t: 0.17; --jf-tpx: 0px; --jf-h: 1.08; --jf-ar: 0.68176; --jf-k: 0.96617; --jf-mf: 16%; }
@media (min-aspect-ratio: 2/1) { .ss-hero { --jf-x: 0.63; --jf-t: 0.15; --jf-h: 1.12; } }
@media (max-aspect-ratio: 3/2) { .ss-hero { --jf-x: 0.63; --jf-t: 0.2; --jf-h: 0.98; } }
/* phone: the crown sits at ~96 css px (>= 84 = the 64 px bar + 20) at 375x667, 390x844 and 430x932 */
@media (max-aspect-ratio: 4/5) { .ss-hero { --jf-x: 0.5; --jf-t: 0.0376; --jf-tpx: 94px; --jf-h: 0.70; --jf-mf: 26%; } }

/* the figure dissolves over the last --jf-mf of its own box: it can never end in a visible edge */
.ss-jfig img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--jf-mf)), rgba(0, 0, 0, 0.5) calc(100% - var(--jf-mf) * 0.45), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--jf-mf)), rgba(0, 0, 0, 0.5) calc(100% - var(--jf-mf) * 0.45), transparent 100%); }

/* ---------- home hero: the figure (depth 0.07) ---------- */
.ss-jfig { position: absolute; left: calc(var(--jf-x) * 100%); top: calc(var(--jf-t) * 100% + var(--jf-tpx)); height: calc(var(--jf-h) * 100%);
  aspect-ratio: 1024 / 1502; transform: translateX(-50%); }
.ss-jfig img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
/* the backlit sky behind the hat */
.ss-jfig::before { content: ""; position: absolute; left: 50%; top: 15%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(150, 192, 255, 0.28), rgba(112, 152, 232, 0.11) 48%, rgba(80, 120, 210, 0) 100%); }
.ss-jdust { opacity: .9; }

/* ---------- home hero: particle banks (depth 0.035 behind the figure, 0.16 in front) ---------- */
.ss-jp, .ss-jp picture, .ss-jp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-jp img { object-fit: cover; object-position: 50% 50%; max-width: none; }
.ss-jp { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 6%, #000 17%); mask-image: linear-gradient(180deg, transparent 0, transparent 6%, #000 17%); }
.ss-jp-back { animation: ss-jdrift 52s ease-in-out infinite alternate-reverse; opacity: .85; }
/* the front bank drifts INSIDE its masked box, so the keep-out mask stays registered on the figure */
.ss-jp-front picture { animation: ss-jdrift 38s ease-in-out infinite alternate; }
@keyframes ss-jdrift { from { transform: translate3d(-1.2%, 0, 0); } to { transform: translate3d(1.2%, -0.4%, 0); } }

/* the front keep-out: (top fade) minus (the figure silhouette dilated ~18 css px), placed in the front plane's own
   coordinates: x' = 50% + k (x - 50%), y' = H - k (H - y) about the plane's transform-origin (50% 100%) */
.ss-hero .ss-plane[data-depth="0.16"] { container-type: size; }
.ss-jp-front {
  --kx: calc((0.5 + var(--jf-k) * (var(--jf-x) - 0.5)) * 100cqw - var(--jf-k) * var(--jf-h) * var(--jf-ar) * 50cqh);
  --ky: calc((1 - var(--jf-k) * (1 - var(--jf-t))) * 100cqh + var(--jf-k) * var(--jf-tpx));
  --ks: calc(var(--jf-k) * var(--jf-h) * 100cqh);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 6%, #000 17%), url("/img/safety-site/hero-james/hero-figure-keepout.webp?v=4");
  -webkit-mask-size: 100% 100%, auto var(--ks);
  -webkit-mask-position: 0 0, var(--kx) var(--ky);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-out;
  mask-image: linear-gradient(180deg, transparent 0, transparent 6%, #000 17%), url("/img/safety-site/hero-james/hero-figure-keepout.webp?v=4");
  mask-size: 100% 100%, auto var(--ks);
  mask-position: 0 0, var(--kx) var(--ky);
  mask-repeat: no-repeat, no-repeat;
  mask-composite: subtract, add;
}
@supports not (width: 1cqh) { .ss-jp-front { display: none; } }

/* ---------- the existing fog (now behind the figure) and light leak (masked off the figure) ---------- */
.ss-hero .ss-fog { --fog-op: 0.08; }
.ss-hero .ss-leak.is-loaded { opacity: .1; animation: none; }
.ss-hero .ss-leak { -webkit-mask-image: radial-gradient(ellipse 26% 48% at 64% 50%, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse 26% 48% at 64% 50%, transparent 55%, #000 100%); }

/* ---------- the site grain over the hero, blended as film grain (the coat stays near-black) ---------- */
.ss-grain[data-ss-ctx="hero"] { mix-blend-mode: normal; } /* owner 2026-10-06: overlay made the grain vanish on the blue sky - the film grain shows again */

/* ---------- the bottom fade: a navy gradient over the figure AND the sky together ---------- */
.ss-jfade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 11, 23, 0) 0%, rgba(6, 11, 23, 0) 70%, rgba(6, 11, 23, 0.35) 88%, rgba(6, 11, 23, 0.6) 100%); }

/* ---------- desktop: the copy scrim +0.1 alpha (contrast) ---------- */
@media (min-aspect-ratio: 801/1000) {
  .ss-hero .ss-scrim { background: radial-gradient(closest-side, rgba(6, 11, 23, 0.82), rgba(6, 11, 23, 0.5) 55%, rgba(6, 11, 23, 0) 100%); }
}

/* ---------- the LATEST RELEASE block (hl: owner 2026-10-06, in place of "James Tonic" and the tagline) ---------- */
.ss-hl-top { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.ss-hl-cover {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  background: #0b1426;
  box-shadow: 0 0 0 1px rgba(243, 233, 210, 0.26), 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 36px rgba(150, 192, 255, 0.16);
}
.ss-hl-cover img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ss-hl-meta { min-width: 0; }
.ss-hl .ss-eyebrow { margin: 0 0 7px; }
.ss-hl-facts {
  margin: 0;
  color: rgba(243, 233, 210, 0.88);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
/* close-1006: the release date ~20% smaller, so it reads as a line under the title, not a second headline */
.ss-hl .ss-title .ss-t2 { font-size: clamp(18px, 2.1vw, 32px); }
/* close-1006: the Listen-now pulse ring grows by a fixed 6 px, not by a share of the button (home.css ss-pulse scales
   to 1.14 x 1.5: a full-width phone button got a ring past both screen edges and into the button below; on tablets it
   crossed the musical button). The same 2 px gold ring, drawn as an outline whose offset grows (paint only: no layout
   shift, unlike animating inset); it starts on the button's edge and ends 7 px out. Only the hero button; reduced
   motion still hides the ring (home.css). */
.ss-hl .ss-btn-pulse::before, .ss-hl .ss-btn-pulse::after { border: 0; outline: 2px solid rgba(242, 201, 135, 0.75); outline-offset: -2px; animation-name: ss-hl-pulse; }
.ss-hl .ss-btn-pulse::after { outline-color: rgba(242, 201, 135, 0.5); }
@keyframes ss-hl-pulse { 0% { outline-offset: -2px; opacity: 0.9; } 100% { outline-offset: 4px; opacity: 0; } }
.ss-hl-lede {
  margin: 16px 0 0;
  max-width: 34em;
  color: rgba(243, 233, 210, 0.9);
  font-size: 15.5px;
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* release names longer than "James Tonic" keep to the copy column */
.ss-title .ss-t1.is-long { font-size: clamp(46px, 7vw, 110px); text-wrap: balance; }
.ss-title .ss-t1.is-xlong { font-size: clamp(38px, 5.2vw, 84px); line-height: 0.95; text-wrap: balance; }
/* desktop: Listen now + Lyrics + the musical stay on one row (the row may run a few px past the text column, over sky) */
@media (min-aspect-ratio: 801/1000) and (min-width: 1000px) {
  .ss-hl .ss-hero-actions { flex-wrap: nowrap; gap: 12px; }
  .ss-hl .ss-hero-actions .ss-btn { flex: none; white-space: nowrap; }
}
@media (min-width: 1100px) and (min-aspect-ratio: 1/1) {
  .ss-hl .ss-title .ss-t2 { font-size: clamp(18px, 1.7vw, 26px); }
  /* close-1006: the scroll cue leaves the coat and stands under the copy column's left edge, 22 px under the buttons
     (the copy ends clamp(56px, 13vh, 150px) above the hero's bottom, home.css; the cue is 46 px tall) */
  .ss-hero .ss-scroll-cue { left: max(var(--ss-gutter), calc((100vw - var(--ss-maxw)) / 2)); transform: none;
    bottom: max(12px, calc(clamp(56px, 13vh, 150px) - 68px)); }
  .ss-title .ss-t1.is-long { font-size: clamp(48px, 5.4vw, 72px); }
  .ss-title .ss-t1.is-xlong { font-size: clamp(40px, 4.2vw, 56px); }
}

/* ---------- phone and portrait tablet ---------- */
@media (max-aspect-ratio: 4/5) {
  /* hl: the copy is anchored 84 px above the bottom of the screen (CRITIQUE-r3 should-fix 1: no empty band under the
     buttons, whatever the block's height); it never starts above 44 % of the screen (safe: overflow goes down, not over
     the hat) */
  .ss-hero-copy.ss-hl {
    top: 44vh; top: 44svh;
    bottom: 84px; bottom: calc(84px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    justify-content: safe flex-end;
  }
  .ss-hl-top { gap: 14px; margin-bottom: 14px; }
  .ss-hl-cover { width: 60px; height: 60px; border-radius: 8px; }
  .ss-hl .ss-title .ss-t2 { font-size: clamp(18px, 4.7vw, 26px); }
  /* close-1006: over the dark coat the title's warm glow read as a brownish smudge (tablets): keep the dark lift,
     drop most of the warm halo */
  .ss-hl .ss-title { text-shadow: 0 2px 40px rgba(0, 0, 0, 0.65); }
  .ss-hl .ss-title .ss-t1 { filter: drop-shadow(0 0 22px rgba(242, 201, 135, 0.1)) drop-shadow(0 3px 18px rgba(0, 0, 0, 0.55)); }
  .ss-hl-lede { font-size: 14.5px; -webkit-line-clamp: 2; margin-top: 12px; }
  .ss-title .ss-t1.is-long { font-size: clamp(42px, 12vw, 66px); }
  .ss-title .ss-t1.is-xlong { font-size: clamp(34px, 9vw, 52px); }
  .ss-hero .ss-leak { -webkit-mask-image: radial-gradient(ellipse 50% 32% at 50% 36%, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse 50% 32% at 50% 36%, transparent 55%, #000 100%); }
  /* ends fully opaque in --ss-navy-0, the colour of .ss-seam and .ss-after-hero below */
  .ss-jfade { background: linear-gradient(180deg, rgba(6, 11, 23, 0) 0%, rgba(6, 11, 23, 0) 50%, rgba(6, 11, 23, 0.3) 64%, rgba(6, 11, 23, 0.62) 80%, rgba(6, 11, 23, 0.9) 92%, #060b17 100%); }
}
/* narrow phones stack the buttons (home.css); with a third button (Lyrics) the second row pairs Lyrics with the musical,
   so the block stays short enough to clear the scroll cue */
@media (max-width: 420px) {
  .ss-hl .ss-hero-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .ss-hl .ss-hero-actions .ss-btn { width: auto; }
  .ss-hl .ss-hero-actions .ss-btn:first-child, .ss-hl .ss-hero-actions .ss-btn:nth-child(2):last-child { grid-column: 1 / -1; }
  .ss-hl .ss-hero-actions .ss-btn:nth-child(2):not(:last-child) { padding-left: 22px; padding-right: 22px; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .ss-hero-copy.ss-hl { top: 40vh; top: 40svh; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ss-hl-cover { width: 52px; height: 52px; }
  .ss-hl-lede { display: none; }
}
/* portrait tablets: the copy runs wide over the side stipple bank, so the scrim gets the desktop strength */
@media (max-aspect-ratio: 4/5) and (min-width: 600px) {
  .ss-hero .ss-scrim { background: radial-gradient(closest-side, rgba(6, 11, 23, 0.86), rgba(6, 11, 23, 0.6) 55%, rgba(6, 11, 23, 0) 100%); }
  .ss-hl-cover { width: 76px; height: 76px; border-radius: 10px; }
}
/* short landscape screens (phones on their side): the block keeps to the space under the bar */
@media (min-aspect-ratio: 4/5) and (max-height: 560px) {
  .ss-hl-cover, .ss-hl-lede, .ss-hl-facts, .ss-hero .ss-scroll-cue { display: none; }
  /* the block grows down from under the bar, never up into it */
  .ss-hero-copy.ss-hl { max-width: min(560px, 54vw); top: 76px; bottom: 28px; display: flex; flex-direction: column;
    justify-content: flex-end; justify-content: safe flex-end; }
  .ss-hl-top { margin-bottom: 8px; }
  .ss-hl .ss-eyebrow { margin-bottom: 4px; }
  .ss-hl .ss-title .ss-t1 { font-size: clamp(40px, 13vh, 64px); }
  .ss-hl .ss-title .ss-t1.is-long, .ss-hl .ss-title .ss-t1.is-xlong { font-size: clamp(30px, 9vh, 44px); line-height: 0.95; }
  .ss-hl .ss-hero-actions { flex-wrap: nowrap; gap: 10px; }
  .ss-hl .ss-hero-actions .ss-btn { flex: none; width: auto; padding: 10px 16px; white-space: nowrap; }
  .ss-hl .ss-title .ss-t2 { font-size: clamp(18px, 5vh, 26px); margin-top: 6px; }
  .ss-hl .ss-hero-actions { margin-top: 14px; }
  /* the copy reaches the stipple bank here: a taller, stronger scrim under it (eyebrow 4.5, title 3.0) */
  .ss-hero .ss-scrim { left: -25%; bottom: -35%; width: 110%; height: 175%; background: radial-gradient(closest-side, rgba(6, 11, 23, 0.9), rgba(6, 11, 23, 0.66) 55%, rgba(6, 11, 23, 0) 100%); }
}

/* ---------- touch: the figure gets the existing slow drift (no idle loop, no device motion) ---------- */
.ss-hero.is-touch .ss-plane[data-depth="0.07"] { --hd: 4px; }
.ss-hero.is-touch .ss-plane > .ss-jfig { animation: ss-hdrift 22s ease-in-out infinite alternate; }

/* ---------- reduced motion: fully static ---------- */
.ss-hero.is-static .ss-jp, .ss-hero.is-static .ss-jp picture, .ss-hero.is-static .ss-jfig { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ss-jp, .ss-jp picture, .ss-jfig { animation: none !important; }
}

/* ---------- content pages (.ss-night): the James sky + back particles, no moon, no stars, no ridge ---------- */
.ss-nl-jp, .ss-nl-jp .ss-nl-in, .ss-nl-jp picture, .ss-nl-jp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-nl-jp img { object-fit: cover; opacity: .55; max-width: none; }
.ss-nl-glow img { opacity: 0.12; }
@media (pointer: fine) { .ss-nl-glow img { opacity: 0.19; } }
@media (hover: none), (pointer: coarse) {
  .ss-nl-jp .ss-nl-in { animation: ss-drift-2 62s ease-in-out infinite alternate; }
}

/* ---------- footer: Follow / Explore / Info (hl: the name and the tagline above the socials are gone) ---------- */
.ss-footer-follow .ss-socials { margin-top: 0; max-width: 270px; }
@media (min-width: 761px) {
  .ss-footer-grid.is-nosocial { grid-template-columns: 1fr 1fr; }
}