/* james.com Safety site - page partial for the legal pages (privacy, terms, refund policy) and the social page.
   Loaded by head.nvx when the page sets INFO["ss_css"] = "legal-social". Served byte for byte (css/ss-pages/main.mdk).
   Extends the core (safety-site.css) only with new ss- classes; never restyles a shared component. */

/* 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-social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ss-social {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-line-2);
  background: linear-gradient(135deg, var(--ss-card-hi), var(--ss-card));
  color: var(--ss-ink);
  text-decoration: none;
  position: relative;
  /* its own layer from the start: nothing switches when the hover begins (the text never snaps), and the lift is a pure
     compositor move */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s var(--ss-ease-out), border-color 0.4s ease;
}
/* The lift's glow, painted once and only faded in: animating a 60px-blur shadow repainted it every frame and stuttered at
   the start (owner 2026-10-12: "it still shakes before lifting"). */
.ss-social::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 30px 60px -32px rgba(224, 164, 88, 0.42), 0 14px 30px -18px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity 0.6s var(--ss-ease-out);
  pointer-events: none;
}
/* The lift starts from the list item, which does not move: lifting the box itself under the pointer took the bottom edge
   out from under it, the hover ended, the box dropped back and it shook (owner 2026-10-12: "the box wiggles and shakes
   instead of beautifully lifts"). */
.ss-social-grid > li { display: block; }
.ss-social-grid > li:hover > .ss-social, .ss-social:focus-visible {
  transform: translate3d(0, -5px, 0);
  border-color: rgba(224, 164, 88, 0.6);
}
.ss-social-grid > li:hover > .ss-social::after, .ss-social:focus-visible::after { opacity: 1; }
.ss-social-glyph { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ss-line); color: var(--ss-cream); transition: background-color 0.3s, color 0.3s; }
.ss-social-glyph .ss-ico { width: 22px; height: 22px; }
.ss-social-grid > li:hover .ss-social-glyph, .ss-social:focus-visible .ss-social-glyph { background: var(--ss-brand, var(--ss-amber)); color: #fff; border-color: transparent; }
.ss-social b { display: block; font-family: var(--ss-serif); font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ss-cream); }
.ss-social small { color: var(--ss-muted); font-size: 13px; }
.ss-social > .ss-ico { width: 18px; height: 18px; color: var(--ss-amber-hi); transition: transform 0.55s var(--ss-ease-out); }
.ss-social-grid > li:hover .ss-social > .ss-ico, .ss-social:focus-visible > .ss-ico { transform: translateX(3px); }
.ss-social[data-brand="instagram"] { --ss-brand: #c13584; }
.ss-social[data-brand="spotify"] { --ss-brand: #1db954; }
.ss-social[data-brand="apple"] { --ss-brand: #fa243c; }
.ss-social[data-brand="deezer"] { --ss-brand: #a238ff; }
.ss-social[data-brand="youtube"] { --ss-brand: #ff0000; }
.ss-social[data-brand="soundcloud"] { --ss-brand: #ff5500; }
.ss-social[data-brand="x"] { --ss-brand: #1d2a3a; }
.ss-social[data-brand="facebook"] { --ss-brand: #1877f2; }
.ss-social[data-brand="tiktok"] { --ss-brand: #111111; }
.ss-legal { position: relative; padding: calc(var(--ss-topbar-h) + clamp(40px, 8vw, 110px)) 0 clamp(64px, 9vw, 120px); }
.ss-legal::before { content: ""; position: absolute; z-index: -1; left: -10%; top: 0; width: 70%; height: 520px; background: radial-gradient(closest-side, rgba(224, 164, 88, 0.1), rgba(224, 164, 88, 0) 100%); pointer-events: none; }
.ss-legal .ss-legal-body > header + * { margin-top: 0; }
.ss-legal header h1, .ss-legal > header h1, .ss-legal .ss-legal-title {
  margin: 0;
  font-family: var(--ss-serif);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ss-cream);
}
.ss-legal header { padding: 0; margin: 0 0 clamp(28px, 4vw, 48px); background: none; text-align: left; }
.ss-legal section, .ss-legal [class$="-container"], .ss-legal [class$="-content"] { margin: 0; padding: 0; max-width: none; background: none; box-shadow: none; border: 0; }
.ss-legal-body { max-width: var(--ss-readw); font-size: 17px; line-height: 1.75; color: var(--ss-ink); }
.ss-legal-body h2 { margin: 2.2em 0 0.5em; font-family: var(--ss-serif); font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--ss-cream); }
.ss-legal-body h2:first-child { margin-top: 0; }
.ss-legal-body h3 { margin: 1.8em 0 0.5em; color: var(--ss-amber); font-family: var(--ss-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.ss-legal-body p { margin: 0 0 1.1em; }
.ss-legal-body ul, .ss-legal-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.ss-legal-body ul { list-style: none; padding-left: 0; }
.ss-legal-body ul li { position: relative; padding-left: 22px; margin: 0 0 0.55em; }
.ss-legal-body ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-amber); }
.ss-legal-body strong { color: var(--ss-cream); font-weight: 600; }
.ss-legal-body a { color: var(--ss-amber-hi); text-decoration: underline; }
/* end of the rules moved from the core */

/* ---------- legal: the reading column, with an "On this page" list from 1100 px ---------- */
.ss-legal .ss-toc-target { scroll-margin-top: calc(var(--ss-topbar-h) + 28px); }
.ss-legal .ss-legal-body > header h1 { text-wrap: balance; }
.ss-toc { display: none; }

@media (min-width: 1100px) {
  /* the three columns from the first paint: the "On this page" list only fills the reserved column 1 */
  .ss-legal .ss-wrap-read {
    max-width: calc(var(--ss-readw) + 2 * var(--ss-gutter) + 2 * 250px);
    display: grid;
    grid-template-columns: 210px minmax(0, var(--ss-readw)) minmax(0, 210px);
    column-gap: 40px;
    justify-content: center;
  }
  .ss-legal .ss-wrap-read > * { grid-column: 2; }
  .ss-legal.ss-has-toc .ss-toc { display: block; grid-column: 1; grid-row: 1 / span 2; }
  .ss-toc-in {
    position: sticky;
    top: calc(var(--ss-topbar-h) + 32px);
    max-height: calc(100vh - var(--ss-topbar-h) - 64px);
    overflow: auto;
    padding: 4px 0 4px 2px;
    scrollbar-width: thin;
  }
  .ss-toc-h {
    margin: 0 0 14px;
    color: var(--ss-amber);
    font: 600 11.5px/1.3 var(--ss-sans);
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .ss-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--ss-line); }
  .ss-toc li { margin: 0; }
  .ss-toc a {
    display: block;
    margin-left: -1px;
    padding: 7px 0 7px 16px;
    border-left: 2px solid transparent;
    color: var(--ss-muted);
    font: 500 13px/1.4 var(--ss-sans);
    text-decoration: none;
    transition: color 0.25s, border-color 0.25s;
  }
  .ss-toc a:hover { color: var(--ss-cream); }
  .ss-toc a[aria-current] { color: var(--ss-amber-hi); border-left-color: var(--ss-amber); }
  .ss-toc a:focus-visible { outline: 2px solid var(--ss-amber-hi); outline-offset: 2px; border-radius: 4px; }
}

/* ---------- social: nine cards, three by three on desktop ---------- */
/* the page head's seam darkens to 0.6 and stops at a hard edge when the next section has no fill: none here */
.ss-social-head::after { content: none; }
/* two lines in both the fallback and the web font (the one-line width is right at the 1180 px column, so the
   font swap would flip it): an em width, independent of the font */
.ss-social-head .ss-display { max-width: 11em; }
.ss-social-page { padding-top: clamp(8px, 2vw, 24px); }
.ss-social-grid-3 { max-width: 1040px; }
@media (min-width: 900px) {
  .ss-social-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .ss-social-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ss-social-grid-3 .ss-social { min-height: 92px; }
.ss-social-grid-3 .ss-social b i { font-style: normal; font-family: var(--ss-sans); font-size: 13px; font-weight: 500; color: var(--ss-muted); letter-spacing: 0.02em; }
.ss-social-grid-3 .ss-social small { display: block; margin-top: 4px; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11.5px; font-weight: 600; }
.ss-social-grid-3 .ss-social:focus-visible { outline: 2px solid var(--ss-amber-hi); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ss-toc a { transition: none; }
}