/* css/ss-pages/misc.css - page partial for API docs, Biography, HQ, Beyond Music, More, Exclusive.
   Loaded by head.nvx when the page sets INFO["ss_css"] = "misc". Served byte for byte (Optimize = false).
   Every selector starts with ss- and only extends the core components in safety-site.css. */

/* moved from the core (css/ss-pages/safety-site.css) by RD/tools/css_split.py, review 2026-10-05:
   the rules below are used only by the pages that load this partial; they keep their core order */
.ss-prose { max-width: var(--ss-readw); }
.ss-prose p { margin: 0 0 1.1em; }
.ss-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* end of the rules moved from the core */

/* ---------- API documentation (reading context) ---------- */
.ss-api .ss-api-info p { margin: 0 0 12px; color: var(--ss-ink); font-size: 16px; line-height: 1.65; }
.ss-api .ss-api-info p:last-child { margin-bottom: 0; }
.ss-api .ss-api-info strong { color: var(--ss-cream); font-weight: 600; }
.ss-api .ss-api-info .ss-h3 { margin-bottom: 14px; }
.ss-api-intro:empty { display: none; }
/* fonts-1006: "API Documentation" in Brygada is 8.1em, a hair wider than the 45em read column at desktop, so it broke
   onto two lines only once the italic file arrived (a 0.11 layout shift at 1280px). The italic word always takes its
   own line, in every font state, like "Safety - / The Musical". */
.ss-pagehead:has(+ .ss-api) .ss-display em { display: block; }
/* reserved from the first paint until the list arrives (measured: 7 functions = about 1940 px wide / 2260 px on
   a phone). The scripting media feature applies it before any script runs (a class set by the script would
   itself move the footer); without scripting nothing is reserved. The intro keeps its height: its text rewraps
   when the web font arrives. */
@media (scripting: enabled) {
  .ss-api-intro { display: block; min-height: 79px; }
  .ss-api-list:not([data-ss-done]) { min-height: 1940px; }
}
@media (scripting: enabled) and (max-width: 760px) {
  .ss-api-intro { min-height: 132px; }
  .ss-api-list:not([data-ss-done]) { min-height: 2260px; }
}
.ss-api-list { display: grid; gap: 14px; margin-top: clamp(24px, 4vw, 40px); }
.ss-api-list .ss-card { padding: 22px 24px 22px 22px; }
.ss-api-list .ss-card .ss-card-title { margin: 0 0 10px; font-size: clamp(23px, 2.4vw, 27px); }
.ss-api-list .ss-card p { margin: 0; color: var(--ss-ink); font-size: 15.5px; line-height: 1.6; }
.ss-api-list .ss-card p + p { margin-top: 8px; }
.ss-api-list .ss-card p.ss-meta { color: var(--ss-muted); font-size: 13.5px; font-family: var(--ss-mono); letter-spacing: 0; overflow-wrap: anywhere; }
.ss-api-list .ss-card p:nth-child(2) { margin-bottom: 12px; }
.ss-api-list .ss-card .ss-code { font-size: 14px; }

/* ---------- Biography ---------- */
.ss-bio-head { min-height: 52vh; }
@media (max-width: 760px) { .ss-bio-head { min-height: 0; } }
/* the body column starts at the head's left edge (no unexplained indent): the wide wrap, a reading-width prose */
.ss-bio .ss-wrap-read, .ss-bio-facts .ss-wrap-read { max-width: calc(var(--ss-maxw) + 2 * var(--ss-gutter)); }
.ss-bio-stats, .ss-bio-cta { max-width: var(--ss-readw); }
.ss-bio-head .ss-display { font-size: clamp(56px, 10vw, 136px); }
.ss-bio-lead { font-style: italic; color: var(--ss-cream); text-wrap: balance; }
.ss-bio-body { font-size: 17px; line-height: 1.8; color: var(--ss-ink); }
.ss-bio-body p { margin: 0 0 1.15em; }
.ss-bio-body h2 { margin: 1.5em 0 0.4em; }
.ss-bio-body em { color: var(--ss-cream); }
.ss-bio-body .ss-h2 em { color: var(--ss-amber-hi); }
.ss-bio-stats { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.ss-bio-stats .ss-card-row { align-items: center; }
.ss-bio-num { display: block; font-size: clamp(38px, 4vw, 48px); line-height: 1; color: var(--ss-cream); }
.ss-bio-label { display: block; margin-top: 6px; color: var(--ss-muted); font-size: 14.5px; line-height: 1.45; }
.ss-bio-cta { margin-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(24px, 5vw, 64px); }

/* ---------- HQ (the stream.james.com page in a frame) ---------- */
/* a contained, phone-shaped card: the embedded page keeps its own colours, so it is framed, not page-wide */
.ss-hq { padding-bottom: clamp(64px, 9vw, 120px); }
.ss-hq-frame {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  height: min(1000px, 88vh);
  overflow: hidden;
  border-radius: calc(var(--ss-radius) + 4px);
  border: 1px solid rgba(243, 233, 210, 0.1);
  background: var(--ss-navy-2);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(242, 201, 135, 0.05), 0 0 80px -30px rgba(224, 164, 88, 0.3);
}
.ss-hq-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ss-hq-cap { max-width: 600px; /* fonts-1006: the caption is 545px on one line in Brygada italic (467px in Cormorant) */ margin: 18px auto 0; color: var(--ss-muted); font-family: var(--ss-serif); font-size: 19px; font-style: italic; line-height: 1.4; text-align: center; }
.ss-hq-actions { justify-content: center; margin-top: 16px; }
.ss-hq-actions .ss-ico { width: 13px; height: 13px; margin-left: 8px; }

/* ---------- Beyond Music / More / Exclusive ("Coming soon") ---------- */
.ss-soon-head { min-height: 42vh; }
@media (max-width: 760px) { .ss-soon-head { min-height: 0; } }
.ss-soon { padding-bottom: clamp(80px, 12vw, 160px); }
.ss-soon-card { margin-top: clamp(24px, 4vw, 48px); text-align: center; }
.ss-soon-card .ss-h2 { font-size: clamp(32px, 3.6vw, 44px); }
.ss-soon-card .ss-dlg-moon { margin: 0 auto 22px; }
.ss-soon-card .ss-body-2 { max-width: 40ch; margin: 0 auto 26px; }
.ss-soon-card .ss-btn-row { justify-content: center; }
@media (max-width: 520px) {
  .ss-soon-card .ss-btn-row .ss-btn { width: 100%; }
}