/*
 * Site Team Base: the design layer.
 *
 * Not a thin reset. A real design system the WordPress Site Team pipeline extends
 * and overrides from the approved design contract. It ships:
 *   1. Fluid foundations   - guards, tokens, everything scales 360px to 1600px+.
 *   2. Layout primitives    - full-bleed by default, container-query responsive.
 *   3. Visual primitives     - grain, gradient, blend, hairline, clip, cursor.
 *   4. Signature sections    - 15 archetype treatments, token-driven.
 *   5. Craft + motion        - states, and the CSS side of the GSAP motion engine.
 *
 * Everything reads a token, so re-theming is a token edit. The pipeline appends
 * per-project overrides after this file; it does not fork it. Full width is the
 * DEFAULT for signature zones, and nothing here depends on the host theme's
 * content-width behaving, so the design survives being dropped into any theme.
 */

/* ------------------------------------------------------------------ *
 * 1. Reset + fluid foundations
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
/* Overflow guard: flex/grid children default to min-width:auto and can push a
 * container wider than the viewport. Zero it everywhere structural. */
.wp-block-columns > *, .wp-block-column, .wp-block-group, [class*="bento-"], .sig__inner > * { min-width: 0; }
/* Client-editable locked headings: one long unbroken token can never overflow. */
:where(h1, h2, h3, h4, .stat-number, .eyebrow) { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }

:root {
  /* Layout fallbacks so constrained content self-heals on a foreign host that
   * never defines these WordPress custom properties. */
  --wp--style--global--content-size: var(--wp--style--global--content-size, 760px);
  --wp--style--global--wide-size: var(--wp--style--global--wide-size, 1200px);
  --container: var(--wp--style--global--wide-size, 1200px);
  --gut: clamp(1.5rem, 4vw, 4rem);
  --measure: 68ch;
  --sig-pad-y: clamp(3.5rem, 8vw, 8rem);
  --sig-gap: clamp(2rem, 5vw, 5rem);
  --radius: 12px;
  --line: var(--wp--preset--color--line, #e7e5e4);
  --shadow-1: 0 1px 2px rgba(12, 10, 9, .06), 0 8px 24px rgba(12, 10, 9, .06);
  --shadow-2: 0 2px 6px rgba(12, 10, 9, .08), 0 24px 60px rgba(12, 10, 9, .12);
  /* Motion tokens, shared by this file and assets/motion.js so nothing drifts. */
  --reveal-y: 24px;
  --reveal-dur: 0.7s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 180ms;
  --dur-entrance: 700ms;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * 2. Typography rhythm
 * ------------------------------------------------------------------ */
.entry-content p, .wp-block-post-content p { max-width: var(--measure); }
:where(.entry-content, .wp-block-post-content) > * + * { margin-block-start: 1.5rem; }
.eyebrow, .has-eyebrow {
  display: inline-block;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.is-mono { font-family: var(--wp--preset--font-family--mono); }

/* ------------------------------------------------------------------ *
 * 3. Layout primitives (full-bleed by default, container-query responsive)
 * ------------------------------------------------------------------ */

/* Full-bleed: any .sig section, .full-bleed utility, or the header/footer spans
 * the viewport edge to edge on its own. alignfull in Site Team Base uses the FSE
 * mechanism; the :not(.alignfull) rule guarantees full width everywhere else
 * (foreign host, REST injection). overflow-x is already clipped above so the
 * 100vw breakout never adds a scrollbar. */
.sig, .full-bleed { padding-block: var(--sig-pad-y); }
.sig:not(.alignfull), .full-bleed:not(.alignfull),
.site-header, .site-footer { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.site-header, .site-footer { padding-block: 0; }
/* The readable column inside a full-bleed section. */
.sig__inner, .site-header > .wp-block-group, .site-footer > .wp-block-group {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}
.sig__inner.is-narrow { max-width: var(--wp--style--global--content-size); }

/* Sections respond to their OWN rendered width, not the viewport, so a section
 * never breaks when embedded narrower than the screen. */
@supports (container-type: inline-size) {
  .sig, .full-bleed { container-type: inline-size; }
}

/* Editorial asymmetry: uneven split, not centered 50/50. */
.sig-feature .wp-block-columns, .sig-split .wp-block-columns { align-items: center; gap: var(--sig-gap); }
.sig-feature .wp-block-column:first-child { flex-basis: 58%; }
.sig-feature .wp-block-column:last-child { flex-basis: 42%; }
.sig-feature.is-flipped .wp-block-columns { flex-direction: row-reverse; }

/* Bento: real CSS grid, spanning tiles. */
.sig-bento .is-bento, .sig-bento .is-layout-grid.is-bento {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(160px, auto); gap: 1rem;
}
.sig-bento .bento-lg { grid-column: span 4; grid-row: span 2; }
.sig-bento .bento-md { grid-column: span 3; }
.sig-bento .bento-sm { grid-column: span 2; }
.sig-bento .bento-tall { grid-column: span 2; grid-row: span 2; }

.pull-up { margin-block-start: clamp(-6rem, -8vw, -3rem); position: relative; z-index: 2; }
.is-sticky-media .wp-block-column:first-child > * { position: sticky; top: 6rem; }
.bleed-media { aspect-ratio: 16 / 9; }
.bleed-media img { width: 100%; height: 100%; object-fit: cover; }

/* Aspect-ratio media utilities (kill layout shift). */
.ar-16-9 { aspect-ratio: 16 / 9; } .ar-4-5 { aspect-ratio: 4 / 5; }
.ar-1-1 { aspect-ratio: 1 / 1; } .ar-21-9 { aspect-ratio: 21 / 9; } .ar-3-4 { aspect-ratio: 3 / 4; }
[class*="ar-"] > img, [class*="ar-"] > .wp-block-image, [class*="ar-"] img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ *
 * 4. Visual primitives (opt-in texture, per the contract's effects block)
 * ------------------------------------------------------------------ */
/* Film grain / noise overlay: fixed, non-interactive, cheap, subtle. */
.grain::after, .noise::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain, .noise { position: relative; }
/* Tonal / mesh gradient washes, driven by tokens. */
.wash-radial { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 60%); }
.wash-mesh {
  background:
    radial-gradient(40% 60% at 15% 20%, color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent), transparent),
    radial-gradient(50% 50% at 85% 30%, color-mix(in srgb, var(--wp--preset--color--accent-2, var(--wp--preset--color--accent)) 16%, transparent), transparent);
}
/* Duotone image treatment via blend. */
.duotone { position: relative; background: var(--wp--preset--color--accent); }
.duotone img { mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.1); }
/* Hairline system: rule lines as a real primitive, not ad hoc borders. */
.hairline { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.hairline-t { border-top: 1px solid var(--line); } .hairline-b { border-bottom: 1px solid var(--line); }
/* Clip-path reveal (paired with motion.js, class or data-attribute). */
[data-clip-reveal], .clip-reveal { clip-path: inset(0 100% 0 0); }
/* Opt-in custom cursor, off by default. Accessible: pointer stays functional. */
.cursor-dot { cursor: none; }
.ff-cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--accent); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; }
@media (hover: none) { .cursor-dot { cursor: auto; } .ff-cursor { display: none; } }

/* ------------------------------------------------------------------ *
 * 5. Signature section treatments (15 archetypes, token-driven defaults)
 * ------------------------------------------------------------------ */
/* Hero */
.sig-hero { padding-block: clamp(4rem, 10vw, 10rem); position: relative; }
.sig-hero :is(h1, .wp-block-heading, .wp-block-post-title) { font-size: var(--wp--preset--font-size--mega, 5rem); line-height: .98; letter-spacing: -.03em; }
.sig-hero p:not(.eyebrow) { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); }
.sig-hero .wp-block-image img { border-radius: var(--radius); box-shadow: var(--shadow-2); }
/* Statement */
.sig-statement { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--background); text-align: center; }
.sig-statement :is(h2, .wp-block-heading) { font-size: var(--wp--preset--font-size--display, 3.5rem); max-width: 20ch; margin-inline: auto; }
.sig-statement :is(a, p) { color: inherit; }
/* Oversized statement: one word/number fills the view */
.sig-oversized :is(h1, h2) { font-size: var(--wp--preset--font-size--mega, 8rem); line-height: .9; text-align: center; }
/* Feature */
.sig-feature .wp-block-image img { border-radius: var(--radius); box-shadow: var(--shadow-1); }
/* Split-scroll narrative: one column sticky, the other scrolls */
.sig-split .wp-block-column:first-child > * { position: sticky; top: 12vh; }
/* Bento already covered above */
/* Stats */
.sig-stats .wp-block-columns { gap: var(--sig-gap); text-align: center; }
.sig-stats .count-up, .sig-stats .stat-number { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display, 3.5rem); font-weight: 800; line-height: 1; color: var(--wp--preset--color--accent); }
.sig-stats .stat-label { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); letter-spacing: .04em; }
/* CTA */
.sig-cta { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); text-align: center; }
.sig-cta :is(h2, p, a) { color: inherit; }
.sig-cta :is(h2, .wp-block-heading) { font-size: var(--wp--preset--font-size--display, 3.5rem); max-width: 18ch; margin-inline: auto; }
/* Marquee band */
.sig-marquee { overflow: hidden; }
.sig-marquee .marquee { display: flex; gap: 3rem; white-space: nowrap; font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 6vw, 5rem); text-transform: uppercase; }
/* Ticker (logos/press) */
.sig-ticker .marquee { display: flex; gap: 4rem; align-items: center; opacity: .7; }
/* Editorial index: numbered/dated list */
.sig-index .idx-row { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.5rem; align-items: baseline; padding-block: 1.4rem; border-top: 1px solid var(--line); transition: padding-inline var(--dur-micro) var(--ease); }
.sig-index .idx-row:hover { padding-inline-start: 1rem; }
.sig-index .idx-num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); }
.sig-index .idx-row h3 { font-size: clamp(1.4rem, 3vw, 2.4rem); }
/* Quote wall: asymmetric masonry-ish grid */
.sig-quotes .q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sig-quotes blockquote, .sig-quotes .q-card { background: var(--wp--preset--color--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); margin: 0; }
.sig-quotes .q-card:nth-child(3n+1) { grid-row: span 2; }
/* Before / after */
.sig-beforeafter .ba { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); }
.sig-beforeafter .ba > * { position: absolute; inset: 0; }
.sig-beforeafter .ba .after { clip-path: inset(0 0 0 50%); }
/* Image break: full-bleed image, no text */
.sig-imagebreak { padding-block: 0; }
.sig-imagebreak img { width: 100%; height: clamp(40vh, 60vh, 80vh); object-fit: cover; }
/* Pinned / scroll gallery */
.sig-gallery .g-track { display: grid; gap: 1.5rem; }
.sig-gallery .g-track img { border-radius: var(--radius); }
/* Horizontal showcase (motion.js drives the scroll) */
.sig-showcase .h-scroll { display: flex; gap: var(--sig-gap); }
.sig-showcase .h-panel { flex: 0 0 min(80vw, 640px); }
/* Sticky spec */
.sig-spec .wp-block-columns { align-items: start; gap: var(--sig-gap); }
.sig-spec .spec-list { position: sticky; top: 12vh; }
.sig-spec dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; }
.sig-spec dt { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }

/* Cards (shared tile treatment) */
.card, .sig-bento .is-tile { background: var(--wp--preset--color--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); height: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover, .sig-bento .is-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }

/* ------------------------------------------------------------------ *
 * 6. Components + states
 * ------------------------------------------------------------------ */
a { color: var(--wp--preset--color--accent); text-underline-offset: .18em; }
a:hover { text-decoration: underline; }
.wp-block-button__link { transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); will-change: transform; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); filter: brightness(1.04); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid currentColor; }
.site-header { border-bottom: 1px solid var(--line); }
.site-header.is-sticky { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); }
.wp-block-navigation a { color: var(--wp--preset--color--text); }
.wp-block-navigation a:hover { color: var(--wp--preset--color--accent); text-decoration: none; }
:where(input, textarea, select) { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; font: inherit; background: var(--wp--preset--color--background); color: var(--wp--preset--color--text); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
:where(input, textarea, select):focus { border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent); outline: none; }
.form-error { color: #b91c1c; font-size: var(--wp--preset--font-size--small); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--wp--preset--color--text); color: var(--wp--preset--color--background); padding: .6rem 1rem; }
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ *
 * 7. Motion (CSS side; assets/motion.js drives the classes)
 * ------------------------------------------------------------------ */
.reveal, .reveal-stagger > * { opacity: 1; }
[data-scroll-progress] { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--wp--preset--color--accent); z-index: 100; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
  .js .reveal[data-reveal="left"] { transform: translateX(calc(var(--reveal-y) * -1.5)); }
  .js .reveal[data-reveal="right"] { transform: translateX(calc(var(--reveal-y) * 1.5)); }
  .js .reveal[data-reveal="scale"] { transform: scale(.94); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
  .js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
  .js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
  .js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
  .js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
  .js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
  .js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: .40s; }
}

/* ------------------------------------------------------------------ *
 * 8. Responsive (container queries, with a viewport-media fallback)
 * ------------------------------------------------------------------ */
@supports (container-type: inline-size) {
  @container (max-width: 700px) {
    .sig-feature .wp-block-column:first-child, .sig-feature .wp-block-column:last-child { flex-basis: 100%; }
    .sig-bento .is-bento { grid-template-columns: repeat(2, 1fr); }
    .sig-bento [class*="bento-"] { grid-column: span 2; grid-row: auto; }
    .sig-quotes .q-grid { grid-template-columns: 1fr; }
    .sig-quotes .q-card:nth-child(3n+1) { grid-row: auto; }
    .sig-split .wp-block-column:first-child > *, .sig-spec .spec-list, .is-sticky-media .wp-block-column:first-child > * { position: static; }
    .sig-index .idx-row { grid-template-columns: 2.5rem 1fr; }
    .pull-up { margin-block-start: 0; }
  }
  @container (min-width: 701px) and (max-width: 1024px) {
    .sig-bento .is-bento { grid-template-columns: repeat(4, 1fr); }
  }
}
@supports not (container-type: inline-size) {
  @media (max-width: 781px) {
    .sig-feature .wp-block-column:first-child, .sig-feature .wp-block-column:last-child { flex-basis: 100%; }
    .sig-bento .is-bento { grid-template-columns: repeat(2, 1fr); }
    .sig-bento [class*="bento-"] { grid-column: span 2; grid-row: auto; }
    .sig-quotes .q-grid { grid-template-columns: 1fr; }
    .is-sticky-media .wp-block-column:first-child > *, .sig-split .wp-block-column:first-child > *, .sig-spec .spec-list { position: static; }
    .pull-up { margin-block-start: 0; }
  }
}

/* ------------------------------------------------------------------ *
 * 9. RTL + print
 * ------------------------------------------------------------------ */
[dir="rtl"] .sig-feature .wp-block-columns { flex-direction: row-reverse; }
[dir="rtl"] .sig-feature.is-flipped .wp-block-columns { flex-direction: row; }
@media print {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .sig-statement, .sig-cta { background: none !important; color: var(--wp--preset--color--text) !important; }
  .site-header.is-sticky, .wp-block-button, .skip-link, .grain::after, .noise::after { display: none !important; }
}


/* ================================================================== *
 * JAMMING JUNCTION LAYER
 * Spine: a live jam, set on paper. Cream pages, the logo's orange-to-teal
 * record grooves as the only ornament, one dot-marked word per headline,
 * real photos of people playing in one room. Orange = organizer / main
 * action. Teal = musician path. Nothing dark.
 * ================================================================== */

/* Self-hosted fonts (latin subsets). Variable files cover every weight the contract allows. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 300 700; font-stretch: 100%; font-display: swap; src: url("fonts/bricolage-grotesque-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/figtree-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dm-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/dm-mono-latin-500.woff2") format("woff2"); }

:root {
  --jj-cream: var(--wp--preset--color--background);
  --jj-surface: var(--wp--preset--color--surface);
  --jj-ink: var(--wp--preset--color--text);
  --jj-muted: var(--wp--preset--color--muted);
  --jj-orange: var(--wp--preset--color--accent);
  --jj-orange-text: var(--wp--preset--color--accent-text);
  --jj-teal: var(--wp--preset--color--accent-2);
  --jj-white: #fff;
  --jj-teal-tint: color-mix(in srgb, var(--jj-teal) 8%, var(--jj-white));
  --jj-orange-tint: color-mix(in srgb, var(--jj-orange) 12%, var(--jj-white));
  --jj-display: var(--wp--preset--font-family--display);
  --jj-body: var(--wp--preset--font-family--body);
  --jj-mono: var(--wp--preset--font-family--mono);
  --radius: 20px;
  --radius-sm: 14px;
  --container: 1240px;
  --line: var(--wp--preset--color--line);
  --shadow-1: 0 1px 2px rgba(31, 26, 21, .05), 0 12px 30px -18px rgba(31, 26, 21, .28);
  --shadow-2: 0 24px 60px -28px rgba(31, 26, 21, .32);
  --jj-glow-orange: 0 14px 30px -14px color-mix(in srgb, var(--jj-orange) 85%, transparent);
  --jj-header-h: 84px;
  --sig-pad-y: clamp(3.25rem, 6.5vw, 6.5rem);
}

/* Links read in teal (orange text on cream is too faint). */
.jj-main a:not(.wp-block-button__link), .jj-footer a:not(.wp-block-button__link) { color: var(--jj-teal); }
.jj-main a:not(.wp-block-button__link):hover { color: var(--jj-orange-text); }
.jj-footer .jj-footer__links a { color: var(--jj-ink); }
.jj-footer .jj-footer__legal a { color: var(--jj-muted); }
.jj-footer .jj-footer__links a:hover, .jj-footer .jj-footer__legal a:hover { color: var(--jj-orange-text); }

/* ---- Block-gap zero-outs (three known hits on block themes) ---- */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > .jj-header-wrap { position: sticky; top: 0; z-index: 60; }
.jj-main { margin: 0; }
.jj-main > .wp-block-post-content > *, .jj-main .entry-content > * { margin-block: 0; }
.jj-main .wp-block-post-content { max-width: none; }

body { font-family: var(--jj-body); background: var(--jj-cream); color: var(--jj-ink); }
::selection { background: color-mix(in srgb, var(--jj-orange) 35%, transparent); }
section[id], .sig[id], .jj-section[id] { scroll-margin-top: calc(var(--jj-header-h) + 1rem); }

/* ---- Type ---- */
h1, h2, h3, h4 { color: var(--jj-ink); font-family: var(--jj-display); }
h1, h2 { font-weight: 300; letter-spacing: -.025em; }
h1 strong, h2 strong, .jj-mega strong { font-weight: 700; }
h3 { font-weight: 700; letter-spacing: -.01em; }
p { margin-block: 0; }
.jj-main p + p { margin-top: 1em; }
.eyebrow {
  display: inline-block; font-family: var(--jj-mono); font-weight: 500; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--jj-orange-text); line-height: 1.3;
}
.eyebrow.is-teal { color: var(--jj-teal); }
.eyebrow a { color: inherit; text-decoration: none; }
.jj-lede { font-size: var(--wp--preset--font-size--large); color: var(--jj-muted); line-height: 1.55; }
.jj-main a:not(.wp-block-button__link):not(.jj-logo) { text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* The dot mark: dotted notation as typography. One word per headline.
 * It sits just before the bold word, at cap height, on that word's own line,
 * so a wrapping headline can never push it into the line above. */
.has-dot strong { white-space: nowrap; }
.has-dot strong::before {
  content: ""; display: inline-block; width: .16em; height: .16em; min-width: 6px; min-height: 6px;
  margin-right: .16em; border-radius: 50%; background: var(--jj-orange);
  vertical-align: .54em; vertical-align: calc(1cap - .16em);
  transition: transform .75s var(--ease-pop), opacity .3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .js .has-dot:not(.dot-in) strong::before { transform: translateY(-.9em); opacity: 0; }
}
/* SplitText must not re-wrap a headline after load (layout shift). */
.split-words { text-wrap: wrap; }

/* ---- Buttons ---- */
.wp-block-button__link {
  font-family: var(--jj-body); font-weight: 700; border-radius: 999px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s ease, color .2s ease;
}
.wp-block-button:not(.is-style-outline):not(.jj-btn-jam) .wp-block-button__link:hover {
  transform: translateY(-2px); box-shadow: var(--jj-glow-orange); filter: none; text-decoration: none;
}
.wp-block-button.jj-btn-jam .wp-block-button__link {
  background: transparent; color: var(--jj-teal); box-shadow: inset 0 0 0 2px var(--jj-teal);
}
.wp-block-button.jj-btn-jam .wp-block-button__link:hover {
  background: var(--jj-teal); color: var(--jj-white); transform: translateY(-2px); text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--jj-teal), 0 14px 30px -14px color-mix(in srgb, var(--jj-teal) 80%, transparent);
}
.wp-block-button.jj-btn-ink .wp-block-button__link { background: var(--jj-ink); color: var(--jj-cream); }
.wp-block-button.jj-btn-ink .wp-block-button__link:hover { background: var(--jj-teal); color: var(--jj-white); transform: translateY(-2px); }
.wp-block-buttons { gap: .75rem; }
.jj-textlink a, a.jj-textlink { font-weight: 600; color: var(--jj-teal); }

/* ---- Header: floating pill ---- */
.jj-header.site-header { border: 0; background: transparent; padding: 12px max(var(--gut), env(safe-area-inset-left)) 0; width: auto; max-width: none; margin: 0; }
.jj-nav-pill {
  max-width: 1180px; margin-inline: auto; gap: 1rem; align-items: center;
  background: var(--jj-cream); border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .5rem .45rem .55rem; box-shadow: 0 10px 30px -22px rgba(31, 26, 21, .45);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.jj-header.is-scrolled .jj-nav-pill { box-shadow: 0 16px 40px -20px rgba(31, 26, 21, .45); }
.jj-logo { display: block; flex: 0 0 auto; line-height: 0; border-radius: 50%; transition: transform .6s var(--ease-out); }
.jj-logo:hover { transform: rotate(-18deg); }
.jj-logo img { width: 52px; height: 52px; }
.jj-nav { font-family: var(--jj-body); font-weight: 600; font-size: .95rem; }
.jj-nav .wp-block-navigation__container { gap: clamp(.9rem, 1.6vw, 1.6rem); }
.jj-nav a, .jj-nav .wp-block-navigation-item__content { color: var(--jj-ink); text-decoration: none; position: relative; }
.jj-nav a:hover, .jj-nav a:hover .wp-block-navigation-item__content { color: var(--jj-orange-text); }
.jj-nav .current-menu-item > a::after, .jj-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -.55em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--jj-orange); transform: translateX(-50%);
}
.jj-nav-cta { flex: 0 0 auto; }
.jj-nav-cta .wp-block-button__link { padding: .8rem 1.3rem; white-space: nowrap; }
.home .jj-logo { box-shadow: 0 0 0 3px var(--jj-cream), 0 0 0 5px var(--jj-orange); }
/* Hamburger below 1100px (core's own breakpoint is 600px, too late for 7 links). */
@media (max-width: 1100px) {
  .jj-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .jj-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .jj-nav { margin-left: auto; }
}
.jj-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--jj-cream); color: var(--jj-ink); padding: 1.25rem var(--gut) 2rem; }
.jj-nav .wp-block-navigation__responsive-container.is-menu-open::before { content: ""; display: block; flex: 0 0 auto; width: 56px; height: 56px; margin-bottom: 1rem; background: url("img/jj-badge-112.webp") center / contain no-repeat; }
.jj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; font-family: var(--jj-display); font-size: 1.8rem; font-weight: 300; }
.jj-nav .wp-block-navigation__responsive-container-open, .jj-nav .wp-block-navigation__responsive-container-close { color: var(--jj-ink); }
@media (max-width: 560px) {
  .jj-nav-cta .wp-block-button__link { padding: .7rem 1rem; font-size: .9rem; }
  .jj-logo img { width: 44px; height: 44px; }
}

/* ---- Section scaffolding ---- */
.sig__inner, .jj-section__inner {
  max-width: var(--container); margin-inline: auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}
.jj-section { padding-block: var(--sig-pad-y); position: relative; }
.jj-section.is-surface { background: var(--jj-surface); }
.jj-section.is-tight { padding-block: clamp(2.5rem, 5vw, 5rem); }
.jj-section__inner.is-narrow, .sig__inner.is-narrow { max-width: calc(760px + 2 * var(--gut)); }
.jj-section h2 { font-size: var(--wp--preset--font-size--xx-large); margin-bottom: .5em; }
.jj-section h3 { margin-top: 1.6em; margin-bottom: .4em; }
.jj-section p, .jj-section li { max-width: 68ch; }
.jj-section__head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.jj-section__head .eyebrow { margin-bottom: 1rem; }
.jj-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.jj-2col > * { margin: 0 !important; }
@media (max-width: 860px) { .jj-2col { grid-template-columns: 1fr; } }

/* ---- Groove rings (the logo's own motif) ---- */
.jj-rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.jj-rings circle { fill: none; stroke-width: .55; }
.jj-rings circle.jj-marker { fill: var(--jj-orange); stroke: var(--jj-cream); stroke-width: 1.5; }
.jj-price sub { font-family: var(--jj-body); font-weight: 400; font-size: .95rem; letter-spacing: 0; color: var(--jj-muted); vertical-align: baseline; margin-left: .15em; }
@media (prefers-reduced-motion: no-preference) {
  .jj-spin { animation: jj-spin 90s linear infinite; transform-origin: 50% 50%; }
}
@keyframes jj-spin { to { transform: rotate(360deg); } }

/* ---- HERO ---- */
.sig-hero.jj-hero { padding-block: clamp(2.5rem, 6vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; isolation: isolate; }
.jj-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 55% at 4% 32%, color-mix(in srgb, var(--jj-orange) 17%, transparent), transparent 72%),
    radial-gradient(40% 60% at 98% 62%, color-mix(in srgb, var(--jj-teal) 14%, transparent), transparent 72%);
}
.jj-hero .wp-block-columns { align-items: center; gap: clamp(2rem, 5vw, 5rem); margin: 0; }
.jj-hero .wp-block-column:first-child { flex-basis: 56%; }
.jj-hero .wp-block-column:last-child { flex-basis: 44%; }
.sig-hero.jj-hero h1 { font-size: clamp(2.5rem, 4.3vw, 4.4rem); line-height: 1.04; letter-spacing: -.03em; margin: .9rem 0 1.1rem; }
.sig-hero.jj-hero .jj-lede { font-size: clamp(1.08rem, 1.3vw, 1.25rem); color: var(--jj-muted); max-width: 40ch; }
.jj-clarify {
  margin-top: 1.5rem !important; border-left: 3px solid var(--jj-orange); padding-left: 1rem;
  font-size: 1rem; color: var(--jj-ink); max-width: 46ch;
}
.sig-hero.jj-hero p.jj-clarify { color: var(--jj-ink); font-size: 1rem; }
.jj-hero .wp-block-buttons { margin-top: 2rem; }
.jj-record { position: relative; aspect-ratio: 1; width: min(620px, 116%); margin-left: auto; margin-right: -6%; }
.jj-record .jj-rings { inset: -2%; width: 104%; height: 104%; }
.jj-record .wp-block-image { position: absolute; inset: 12.5%; margin: 0; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-2); }
.jj-record .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: none; }
.jj-record::after { /* the record spindle */
  content: ""; position: absolute; left: 50%; top: 50%; width: 3.2%; aspect-ratio: 1; border-radius: 50%;
  background: var(--jj-cream); box-shadow: 0 0 0 5px color-mix(in srgb, var(--jj-ink) 70%, transparent); transform: translate(-50%, -50%); z-index: 2;
}
.jj-record.is-teal .jj-rings circle { stroke: var(--jj-teal); }
@media (max-width: 781px) {
  .jj-record { width: 100%; max-width: 290px; margin: .5rem auto 0; }
  .sig-hero.jj-hero h1 { font-size: clamp(2.3rem, 9vw, 3rem); }
}

/* ---- FEATURE (arched photo) ---- */
.sig-feature.jj-feature .wp-block-columns { margin: 0; }
.jj-feature h2 { font-size: var(--wp--preset--font-size--xx-large); margin-bottom: .6em; }
.jj-feature p { color: var(--jj-ink); }
.jj-arch { margin: 0; }
.sig-feature .jj-arch img, .jj-arch img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 999px 999px var(--radius) var(--radius); box-shadow: var(--shadow-2);
}
.jj-shot img { border-radius: var(--radius-sm); box-shadow: var(--shadow-2); border: 1px solid var(--line); }
.jj-feature .jj-shot { margin: 0; }
.jj-feature h3 { margin-top: 1.8em; margin-bottom: .4em; }

/* ---- BENTO: One platform instead of four ---- */
.jj-bento-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.jj-bento-grid > * { margin: 0 !important; }
.jj-tile {
  background: var(--jj-white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.4rem); position: relative; overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.jj-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.jj-t-lg { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; }
.jj-t-lg > .jj-chart { margin-top: auto !important; }
.jj-t-sm { grid-column: span 2; }
.jj-t-full { grid-column: 1 / -1; }
.jj-tile h3 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 .6rem; }
.jj-tile p { font-size: 1.02rem; }
.jj-tile.is-stat { background: var(--jj-orange-tint); border-color: color-mix(in srgb, var(--jj-orange) 35%, var(--line)); display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; }
.jj-tile.is-stat .jj-stat { font-family: var(--jj-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.8rem); line-height: .95; letter-spacing: -.03em; color: var(--jj-ink); }
.jj-tile.is-stat .jj-stat-label { font-family: var(--jj-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--jj-orange-text); margin-top: .7rem; }
.jj-tile.is-shot { padding: 0; min-height: 220px; background: var(--jj-surface); }
.jj-tile.is-shot .wp-block-image { margin: 0; height: 100%; }
.jj-tile.is-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .8s var(--ease-out); }
.jj-tile.is-shot:hover img { transform: scale(1.04); }
.jj-tile.is-wide { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1rem, 4vw, 4rem); align-items: start; background: var(--jj-teal-tint); border-color: color-mix(in srgb, var(--jj-teal) 22%, var(--line)); }
.jj-tile.is-wide > * { margin: 0 !important; }
.jj-tile.is-wide h3 { color: var(--jj-teal); }
@media (max-width: 900px) {
  .jj-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jj-t-lg, .jj-t-full { grid-column: 1 / -1; grid-row: auto; }
  .jj-t-sm { grid-column: span 1; }
  .jj-tile.is-wide { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .jj-t-sm { grid-column: 1 / -1; } }

/* ---- The dotted chart (built in code) ---- */
.jj-chart { background: var(--jj-cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.4rem 1.6rem 1.1rem; margin-top: 1.6rem; }
.jj-chart__head { display: flex; justify-content: space-between; font-family: var(--jj-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--jj-muted); margin-bottom: .6rem; }
.jj-chart__line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .2em .42em; margin: 0 0 .7rem !important; font-family: var(--jj-body); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--jj-ink); line-height: 1.1; }
.jj-chart .jj-w { display: inline-flex; align-items: flex-end; }
.jj-chart .syl { display: inline-flex; flex-direction: column; align-items: flex-start; }
.jj-chart .syl::before { content: "\00a0"; order: -2; font-family: var(--jj-mono); font-weight: 500; font-size: .8rem; line-height: 1; height: 1em; color: var(--jj-teal); transition: opacity .4s ease; }
.jj-chart .syl[data-chord]::before { content: attr(data-chord); }
.jj-chart .syl::after { content: ""; order: -1; width: .46rem; height: .46rem; margin: .32rem 0 .38rem .06em; border-radius: 50%; background: transparent; }
.jj-chart .syl[data-chord]::after { background: var(--jj-orange); transition: transform .5s var(--ease-pop), opacity .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .js .jj-chart:not(.is-on) .syl[data-chord]::after { transform: translateY(-.8rem) scale(.4); opacity: 0; }
  .js .jj-chart:not(.is-on) .syl[data-chord]::before { opacity: 0; }
  .jj-chart .syl[data-chord]::after, .jj-chart .syl[data-chord]::before { transition-delay: calc(var(--i, 0) * 180ms); }
}
.jj-chart__note { font-size: .82rem !important; color: var(--jj-muted); margin: .2rem 0 0 !important; }
.jj-chart.is-big { padding: 1.8rem 2rem 1.3rem; }
.jj-chart.is-big .jj-chart__line { font-size: clamp(1.15rem, 2vw, 1.55rem); }

/* ---- SHOWCASE: How it works, pinned sideways (jj.js drives .jj-track) ---- */
.sig-showcase.jj-steps { overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); background: var(--jj-surface); }
.jj-steps.is-pinned .sig__inner { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--jj-header-h) + 1rem); padding-bottom: 1.5rem; }
.jj-steps__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.jj-steps__head h2 { font-size: var(--wp--preset--font-size--xx-large); margin: 0; }
.jj-steps .jj-track { display: flex; gap: clamp(1rem, 2.5vw, 2rem); margin: 0; will-change: transform; }
.jj-steps .jj-track > * { margin: 0 !important; }
.jj-steps .h-panel {
  flex: 0 0 min(80vw, 520px); background: var(--jj-white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: 1rem;
}
.jj-steps .h-panel > * { margin: 0 !important; }
.jj-step-num { font-family: var(--jj-mono) !important; font-size: .85rem !important; letter-spacing: .14em; color: var(--jj-orange-text); text-transform: uppercase; }
.jj-steps .h-panel p { font-size: 1.02rem; }
.jj-steps .h-panel .wp-block-image { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--jj-surface); }
.jj-steps .h-panel .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.jj-steps .h-panel.is-photo .wp-block-image img { object-position: center; }
.jj-steps__track { position: relative; height: 3px; background: var(--line); border-radius: 3px; margin-top: clamp(1.25rem, 2.5vw, 2rem); overflow: hidden; }
.jj-steps__bar { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--jj-orange), #E7A15E 55%, var(--jj-orange-text)); }
/* Not pinned (reduced motion, blocked CDN, no JS): a normal swipeable row. */
.jj-steps:not(.is-pinned) .jj-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.jj-steps:not(.is-pinned) .h-panel { scroll-snap-align: start; }
/* Legible crops on phones, full screenshots elsewhere. */
.jj-only-mobile { display: none !important; }
@media (max-width: 600px) {
  .jj-only-desktop { display: none !important; }
  .jj-only-mobile { display: block !important; }
}

/* ---- BOTH SIDES (comparison) ---- */
.jj-sides-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.jj-sides-grid > * { margin: 0 !important; }
.jj-side { padding: clamp(1.75rem, 4vw, 3.5rem) clamp(0rem, 3vw, 3rem) 0 0; }
.jj-side + .jj-side { padding-left: clamp(1.5rem, 4vw, 3.5rem); padding-right: 0; border-left: 1px solid var(--line); }
.jj-side > * + * { margin-top: 1.1rem !important; }
.jj-side h3 { font-size: var(--wp--preset--font-size--x-large); }
.jj-side.is-org h3 { color: var(--jj-orange-text); }
.jj-side.is-jam h3 { color: var(--jj-teal); }
.jj-notice {
  background: var(--jj-teal-tint); border-left: 4px solid var(--jj-teal); border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem; font-size: 1rem; color: var(--jj-ink);
}
.jj-notice strong { color: var(--jj-teal); }
.jj-closing { margin-top: clamp(2rem, 4vw, 3rem) !important; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--jj-muted); max-width: none !important; }
@media (max-width: 760px) {
  .jj-sides-grid { grid-template-columns: 1fr; }
  .jj-side, .jj-side + .jj-side { padding: 2rem 0 0; border-left: 0; }
  .jj-side + .jj-side { border-top: 1px solid var(--line); margin-top: 2rem !important; }
}

/* ---- INDEX rows ---- */
.sig-index.jj-index h2 { font-size: var(--wp--preset--font-size--xx-large); margin-bottom: 1.5rem; }
.jj-index .idx-list { border-bottom: 1px solid var(--line); margin: 0; }
.jj-index .idx-row {
  display: grid; grid-template-columns: 4rem minmax(0, 20rem) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: baseline;
  padding-block: clamp(1.25rem, 2.6vw, 2rem); border-top: 1px solid var(--line); margin: 0 !important;
  transition: padding-inline .35s var(--ease-out), background-color .35s ease;
}
.jj-index .idx-row > * { margin: 0 !important; }
.jj-index .idx-row:hover { padding-inline-start: 1rem; background: color-mix(in srgb, var(--jj-surface) 60%, transparent); }
.jj-index .idx-num { font-family: var(--jj-mono); font-size: .9rem; color: var(--jj-orange-text); }
.jj-index .idx-row h3 { font-family: var(--jj-display); font-weight: 300; font-size: clamp(1.45rem, 2.4vw, 2.15rem); letter-spacing: -.02em; line-height: 1.05; }
.jj-index .idx-row p { color: var(--jj-muted); }
.jj-index .idx-row h3 { hyphens: manual; word-break: normal; overflow-wrap: normal; }
@media (max-width: 900px) {
  .jj-index .idx-row { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .jj-index .idx-row > :nth-child(n+3) { grid-column: 2; }
}
@media (max-width: 600px) {
  .jj-index .idx-row { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .jj-index .idx-row > :nth-child(n+3) { grid-column: auto; }
}

/* ---- PRICING (records) ---- */
.jj-pricing .jj-section__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.jj-pricing .jj-section__head > * { margin: 0 !important; }
.jj-billing { display: inline-flex; gap: 4px; padding: 4px; background: var(--jj-white); border: 1px solid var(--line); border-radius: 999px; }
.jj-billing button {
  appearance: none; border: 0; background: transparent; color: var(--jj-ink); font: 600 .95rem var(--jj-body);
  padding: .75rem 1.25rem; min-height: 44px; border-radius: 999px; cursor: pointer; transition: background-color .25s ease, color .25s ease;
}
.jj-billing button[aria-pressed="true"] { background: var(--jj-orange); color: var(--jj-ink); }
.jj-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.jj-plans > * { margin: 0 !important; }
.jj-plan {
  background: var(--jj-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem;
  display: flex; flex-direction: column; gap: .35rem; position: relative;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}
.jj-plan > * { margin: 0 !important; }
.jj-plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--jj-orange) 45%, var(--line)); }
.jj-vinyl {
  width: 70px; height: 70px; border-radius: 50%; margin-bottom: .9rem !important; box-shadow: 0 8px 18px -10px rgba(31, 26, 21, .6);
  background: radial-gradient(circle, var(--lbl, var(--jj-orange)) 0 21%, var(--jj-cream) 21.5% 23%, #1f1a15 23.5% 27%, #2f2822 28% 35%, #1f1a15 36% 44%, #2f2822 45% 55%, #1f1a15 56% 100%);
  transition: transform .9s var(--ease-out);
}
.jj-plan:hover .jj-vinyl { transform: rotate(120deg); }
.jj-plan.is-25 .jj-vinyl { --lbl: #E7A15E; }
.jj-plan.is-75 .jj-vinyl { --lbl: var(--jj-orange-text); }
.jj-plan.is-gold { background: linear-gradient(165deg, var(--jj-white) 35%, #FBEEDB); border-color: #E5C489; }
.jj-plan.is-gold .jj-vinyl { background: radial-gradient(circle, #1f1a15 0 9%, #D9A441 10% 24%, #B98526 25% 34%, #E7BD5F 35% 46%, #B98526 47% 58%, #E7BD5F 59% 100%); }
.jj-plan-name { font-family: var(--jj-mono); font-size: .82rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--jj-muted); }
.jj-price { font-family: var(--jj-display); font-weight: 700; font-size: clamp(2.2rem, 3vw, 2.7rem); line-height: 1.05; letter-spacing: -.02em; color: var(--jj-ink); }
.jj-plan-meta { font-size: .95rem; color: var(--jj-muted); }
.jj-plan-cap { font-weight: 600; color: var(--jj-ink); margin-top: .4rem !important; }
.jj-limited { position: absolute; top: -.9rem; left: 1.2rem; font-family: var(--jj-mono); font-size: .7rem !important; letter-spacing: .1em; text-transform: uppercase; background: var(--jj-orange); color: var(--jj-ink); padding: .38rem .7rem; border-radius: 999px; max-width: calc(100% - 2.4rem); line-height: 1.3; }
.jj-pricing .price-annual { display: none; }
.jj-pricing[data-billing="annual"] .price-annual { display: block; }
.jj-pricing[data-billing="annual"] .price-monthly { display: none; }
.jj-plans-note { margin-top: 1.5rem !important; color: var(--jj-muted); font-size: 1rem; }
.jj-pricing .wp-block-buttons { margin-top: 1.5rem; }
@media (max-width: 1024px) { .jj-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .jj-plans { grid-template-columns: 1fr; } }

/* ---- STATEMENT (teal band) ---- */
.sig-statement.jj-statement { background: var(--jj-teal); color: var(--jj-cream); position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.sig-statement.jj-statement h2 { color: var(--jj-cream); font-size: clamp(2.3rem, 5.4vw, 4.8rem); max-width: 18ch; margin-inline: auto; line-height: 1.02; }
.sig-statement.jj-statement p { color: color-mix(in srgb, var(--jj-cream) 88%, transparent); font-size: var(--wp--preset--font-size--large); max-width: 40ch; margin: 1.5rem auto 0; }
.jj-statement .jj-rings { inset: auto; left: 50%; top: 50%; width: min(90vw, 900px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .2; z-index: -1; }
.jj-statement .jj-rings circle { stroke: var(--jj-cream); }

/* ---- OVERSIZED ---- */
.sig-oversized.jj-oversized { text-align: center; }
.sig-oversized.jj-oversized :is(h1, h2) { font-size: var(--wp--preset--font-size--mega); line-height: .98; letter-spacing: -.035em; max-width: 14ch; margin-inline: auto; }
.jj-mega { font-family: var(--jj-display); font-weight: 300; font-size: var(--wp--preset--font-size--mega); line-height: .95; letter-spacing: -.04em; color: var(--jj-orange-text); text-align: center; }
.jj-oversized.is-left { text-align: left; }
.jj-oversized.is-left :is(h1, h2) { margin-inline: 0; }
.jj-404 { min-height: 60vh; display: grid; place-items: center; }

/* ---- SPLIT (pinned left) ---- */
.sig-split.jj-split .wp-block-columns { align-items: start; gap: clamp(2rem, 6vw, 6rem); margin: 0; }
.jj-split .wp-block-column:first-child > * { top: calc(var(--jj-header-h) + 2rem); }
.jj-beat { padding-block: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line); }
.jj-beat:first-child { border-top: 0; padding-top: 0; }
.jj-beat > * + * { margin-top: .8rem !important; }
.jj-beat h3 { font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.jj-split-photo { margin: 0; position: relative; }
.jj-split-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--radius) var(--radius); box-shadow: var(--shadow-2); }
.jj-split-stat { font-family: var(--jj-display); font-weight: 700; font-size: clamp(3.4rem, 7vw, 6rem); line-height: .9; color: var(--jj-orange-text); letter-spacing: -.04em; margin-top: 1.25rem !important; }
.jj-split-stat-label { font-family: var(--jj-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--jj-muted); }

/* ---- MARQUEE (what you replace) ---- */
.sig-marquee.jj-replace { padding-block: clamp(2rem, 4vw, 3.5rem); border-block: 1px solid var(--line); background: var(--jj-cream); }
.jj-replace .marquee { display: flex; gap: clamp(2rem, 4vw, 4rem); white-space: nowrap; width: max-content; margin: 0; font-family: var(--jj-display); font-weight: 300; font-size: clamp(1.8rem, 4.5vw, 3.6rem); text-transform: none; letter-spacing: -.02em; }
.jj-replace .marquee > * { margin: 0 !important; display: inline-flex; align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.jj-replace .marquee > *::after { content: ""; width: .28em; height: .28em; border-radius: 50%; background: var(--jj-orange); flex: 0 0 auto; }
.jj-replace .marquee p { text-decoration: line-through; text-decoration-color: var(--jj-orange); text-decoration-thickness: .07em; color: var(--jj-muted); }

/* ---- SPEC sheet ---- */
.sig-spec.jj-spec .wp-block-columns { align-items: start; gap: clamp(2rem, 6vw, 6rem); margin: 0; }
.jj-spec .wp-block-column:first-child > * { position: sticky; top: calc(var(--jj-header-h) + 2rem); }
.jj-spec-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.5rem; padding-block: 1.4rem; border-top: 1px solid var(--line); margin: 0 !important; }
.jj-spec-row > * { margin: 0 !important; }
.jj-spec-term { font-family: var(--jj-mono); font-size: .82rem !important; letter-spacing: .1em; text-transform: uppercase; color: var(--jj-orange-text); padding-top: .25rem; }
@media (max-width: 781px) {
  .jj-spec .wp-block-column:first-child > * { position: static; }
  .jj-spec-row { grid-template-columns: 1fr; gap: .4rem; }
}

/* ---- CTA (orange band) ---- */
.sig-cta.jj-cta { background: var(--jj-orange); color: var(--jj-ink); position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.sig-cta.jj-cta h2 { color: var(--jj-ink); font-size: clamp(2.4rem, 6vw, 5rem); max-width: 16ch; margin-inline: auto; line-height: 1; }
.sig-cta.jj-cta p { color: var(--jj-ink); max-width: 52ch; margin-inline: auto; font-size: 1.1rem; }
.sig-cta.jj-cta .wp-block-buttons { justify-content: center; margin-top: 2rem; }
.sig-cta.jj-cta .wp-block-button .wp-block-button__link { background: var(--jj-cream); color: var(--jj-ink); }
.sig-cta.jj-cta .wp-block-button .wp-block-button__link:hover { background: var(--jj-white); color: var(--jj-ink); transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(31, 26, 21, .55); }
.sig-cta.jj-cta .wp-block-button.jj-btn-jam .wp-block-button__link { background: transparent; color: var(--jj-ink); box-shadow: inset 0 0 0 2px var(--jj-ink); }
.sig-cta.jj-cta .wp-block-button.jj-btn-jam .wp-block-button__link:hover { background: var(--jj-cream); color: var(--jj-ink); }
.sig-cta.jj-cta .has-dot strong::before { background: var(--jj-cream); }
.jj-cta .jj-rings { width: min(120vw, 1400px); height: auto; aspect-ratio: 1; inset: auto; left: 50%; top: 58%; transform: translate(-50%, 0); opacity: .35; z-index: -1; }
.jj-cta .jj-rings circle { stroke: var(--jj-cream); }
.jj-cta-small { font-size: .98rem !important; margin-top: 1.5rem !important; }
.jj-cta-small a { color: var(--jj-ink); font-weight: 700; }
.jj-cta-links { font-size: .95rem !important; margin-top: 1rem !important; }
.jj-cta-links a { color: var(--jj-ink); }

/* ---- FAQ (native details) ---- */
.jj-faq .wp-block-details { border-top: 1px solid var(--line); padding-block: 1.2rem; margin: 0 !important; }
.jj-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--line); }
.jj-faq summary {
  list-style: none; cursor: pointer; font-family: var(--jj-body); font-weight: 600; font-size: clamp(1.08rem, 1.6vw, 1.25rem); padding-block: .55rem;
  letter-spacing: -.01em; line-height: 1.3; padding-right: 2.5rem; position: relative; color: var(--jj-ink);
}
.jj-faq summary::-webkit-details-marker { display: none; }
.jj-faq summary::after {
  content: ""; position: absolute; right: .2rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -.8rem; border-radius: 50%;
  background:
    linear-gradient(var(--jj-ink), var(--jj-ink)) center / 10px 2px no-repeat,
    linear-gradient(var(--jj-ink), var(--jj-ink)) center / 2px 10px no-repeat,
    var(--jj-orange-tint);
  transition: transform .35s var(--ease-out), background-color .3s ease;
}
.jj-faq details[open] summary::after { transform: rotate(135deg); background-color: var(--jj-orange); }
.jj-faq summary:hover { color: var(--jj-orange-text); }
.jj-faq .wp-block-details > :not(summary) { margin-top: .8rem; color: var(--jj-ink); max-width: 70ch; }
@media (prefers-reduced-motion: no-preference) {
  .jj-faq details[open] > :not(summary) { animation: jj-fade .45s var(--ease-out) both; }
}
@keyframes jj-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Stories: designed reading layout (standing rule) ---- */
.jj-article .jj-section__inner { max-width: calc(44rem + 2 * var(--gut)); }
.jj-article p, .jj-article li { font-size: 1.06rem; line-height: 1.75; max-width: none; }
.jj-article .jj-dropcap::first-letter {
  float: left; font-family: var(--jj-display); font-weight: 700; font-size: 4.4em; line-height: .82; margin: .06em .12em 0 0; color: var(--jj-orange-text);
}
.jj-article h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 2.4em 0 .6em; position: relative; padding-top: 1rem; }
.jj-article h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--jj-orange); }
.jj-pullquote { margin: 2.4rem 0 !important; padding: 0 0 0 0 !important; border: 0 !important; position: relative; }
.jj-pullquote p { font-family: var(--jj-display); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; line-height: 1.25 !important; letter-spacing: -.015em; color: var(--jj-ink); }
.jj-pullquote::before { content: "\201C"; display: block; font-family: var(--jj-display); font-weight: 700; font-size: 5rem; line-height: .6; color: var(--jj-orange); margin-bottom: .4rem; }
.jj-pullquote cite { display: block; margin-top: .8rem; font-family: var(--jj-mono); font-style: normal; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--jj-muted); }
.jj-band { margin: 0 !important; }
.jj-band img { width: 100%; height: clamp(280px, 52vh, 560px); object-fit: cover; border-block: 3px solid var(--jj-orange); display: block; }
.jj-opening { text-align: center; padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.jj-opening h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); max-width: 22ch; margin: 1rem auto 1.2rem; text-wrap: balance; }
.jj-opening .jj-lede { max-width: 46rem; margin-inline: auto; }
.jj-divider { border: 0; height: 1px; max-width: 12rem; margin: 3rem auto !important; background: linear-gradient(90deg, transparent, var(--jj-orange), transparent); }

/* Blog single + archive (future Jammin Stories posts) */
.jj-post__opening { text-align: center; padding: clamp(3rem, 7vw, 6rem) var(--gut) clamp(2rem, 4vw, 3rem); max-width: 60rem; margin-inline: auto; }
.jj-post__title { font-size: clamp(2.1rem, 4.2vw, 3.6rem) !important; max-width: 22ch; margin: 1rem auto; text-wrap: balance; }
.jj-post__meta { font-family: var(--jj-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--jj-muted); }
.jj-post__band { width: 100vw; margin-inline: calc(50% - 50vw); }
.jj-post__band img { width: 100%; height: clamp(280px, 52vh, 560px) !important; object-fit: cover; border-block: 3px solid var(--jj-orange); }
.jj-post__body { max-width: calc(44rem + 2 * var(--gut)); margin: clamp(2rem, 5vw, 4rem) auto; padding-inline: var(--gut); }
.jj-post__body > * + * { margin-top: 1.3rem; }
.jj-post__body p { font-size: 1.06rem; line-height: 1.75; }
.jj-post__body > p:first-of-type::first-letter { float: left; font-family: var(--jj-display); font-weight: 700; font-size: 4.4em; line-height: .82; margin: .06em .12em 0 0; color: var(--jj-orange-text); }
.jj-post__body h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 2.2em; position: relative; padding-top: 1rem; }
.jj-post__body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--jj-orange); }
.jj-post__body blockquote { border: 0; padding: 0; margin: 2.4rem 0; }
.jj-post__body blockquote p { font-family: var(--jj-display); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; }
.jj-post__body blockquote::before { content: "\201C"; display: block; font-family: var(--jj-display); font-weight: 700; font-size: 5rem; line-height: .6; color: var(--jj-orange); }
.jj-post__body figcaption { text-align: center; color: var(--jj-muted); font-size: .9rem; }
.jj-post__body hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--jj-orange), transparent); }
.jj-post__nav { max-width: calc(44rem + 2 * var(--gut)); margin: 0 auto clamp(3rem, 6vw, 5rem); padding: 1.5rem var(--gut) 0; display: flex; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); }
.jj-post__nav a { color: var(--jj-teal); font-weight: 600; text-decoration: none; }
.jj-archive__query { max-width: var(--container); margin: 0 auto clamp(3rem, 6vw, 6rem); padding-inline: var(--gut); }
.jj-archive__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.jj-archive__grid > li { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.jj-archive__img { overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.jj-archive__img img { transition: transform .8s var(--ease-out); }
.jj-archive__grid > li:hover .jj-archive__img img { transform: scale(1.05); }
.jj-archive__title { font-size: 1.5rem !important; font-weight: 700 !important; margin: .4rem 0 !important; }
.jj-archive__title a { color: var(--jj-ink); text-decoration: none; }
.jj-archive__grid > li:hover .jj-archive__title a { color: var(--jj-orange-text); }
.jj-archive__date { font-family: var(--jj-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--jj-muted); }
@media (max-width: 1024px) { .jj-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jj-archive__grid { grid-template-columns: 1fr; } }

/* ---- Contact form (labels above fields) ---- */
.jj-contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.jj-contact-grid > * { margin: 0 !important; }
@media (max-width: 860px) { .jj-contact-grid { grid-template-columns: 1fr; } }
.jj-form { background: var(--jj-white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.2rem; }
.jj-field { display: flex; flex-direction: column; gap: .45rem; }
.jj-field label { font-weight: 600; font-size: .95rem; color: var(--jj-ink); }
.jj-field label .opt { font-weight: 400; color: var(--jj-muted); }
.jj-field input, .jj-field textarea { width: 100%; border: 1px solid #908477; border-radius: 12px; padding: .85rem 1rem; font: 400 1rem var(--jj-body); background: var(--jj-cream); color: var(--jj-ink); }
.jj-field textarea { min-height: 9rem; resize: vertical; }
.jj-field input:focus, .jj-field textarea:focus { outline: none; border-color: var(--jj-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jj-teal) 22%, transparent); background: var(--jj-white); }
.jj-field .jj-err { font-size: .88rem; color: #A4260E; min-height: 0; }
.jj-field.has-error input, .jj-field.has-error textarea { border-color: #A4260E; }
.jj-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.jj-submit { justify-self: start; appearance: none; border: 0; cursor: pointer; background: var(--jj-orange); color: var(--jj-ink); font: 700 1rem var(--jj-body); padding: .95rem 1.6rem; border-radius: 999px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.jj-submit:hover { transform: translateY(-2px); box-shadow: var(--jj-glow-orange); }
.jj-submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.jj-status { font-weight: 600; min-height: 1.4em; }
.jj-status.is-ok { color: var(--jj-teal); }
.jj-status.is-err { color: #A4260E; }
.jj-contact-aside > * + * { margin-top: 1.1rem !important; }
.jj-contact-aside .jj-email a { font-family: var(--jj-display); font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--jj-teal); }

/* ---- Footer ---- */
.jj-footer.site-footer { background: var(--jj-surface); border-top: 1px solid var(--line); padding: clamp(3.5rem, 7vw, 6rem) 0 6rem; width: auto; max-width: none; margin: 0; }
.jj-footer__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
}
.jj-footer__inner > * { margin: 0 !important; }
.jj-footer__logo { display: inline-block; line-height: 0; transition: transform .8s var(--ease-out); }
.jj-footer__logo:hover { transform: rotate(-24deg); }
.jj-footer__logo img { width: 112px; height: 112px; }
.jj-footer__definition { margin-top: 1.25rem !important; max-width: 46ch; color: var(--jj-muted); font-size: .98rem; }
.jj-footer__col > * + * { margin-top: .9rem !important; }
.jj-footer__links { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .45rem; }
.jj-footer__links a { color: var(--jj-ink); text-decoration: none; font-weight: 400; }
.jj-footer__links a:hover { color: var(--jj-orange-text); }
.jj-footer__paths .eyebrow.is-teal { margin-top: 1.8rem !important; }
.jj-footer__musician { font-size: .95rem; color: var(--jj-muted); max-width: 32ch; }
.jj-footer__legal {
  max-width: var(--container); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 1.4rem var(--gut) 0; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-size: .88rem; color: var(--jj-muted);
}
.jj-footer__legal > * { margin: 0 !important; }
.jj-footer__legal a { color: var(--jj-muted); }
.jj-footer__legal a:hover { color: var(--jj-ink); }
@media (max-width: 860px) { .jj-footer__inner { grid-template-columns: 1fr 1fr; } .jj-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .jj-footer__inner { grid-template-columns: 1fr; } }

/* ---- Back to top: the JJ mark itself ---- */
#site-back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 140; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--jj-ink); display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s var(--ease-out), box-shadow .3s ease;
  box-shadow: 0 12px 26px -12px rgba(31, 26, 21, .6);
}
#site-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
#site-back-to-top:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--jj-orange) 45%, transparent), 0 12px 26px -12px rgba(31, 26, 21, .6); }
#site-back-to-top svg { width: 44px; height: 44px; transition: transform .6s var(--ease-out); }
#site-back-to-top:hover svg { transform: rotate(-20deg); }
@media (prefers-reduced-motion: no-preference) {
  #site-back-to-top.is-visible { animation: jj-toppulse 2.4s ease-in-out infinite; }
}
@keyframes jj-toppulse { 0% { box-shadow: 0 0 0 0 rgba(242, 135, 58, .5); } 70% { box-shadow: 0 0 0 16px rgba(242, 135, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 135, 58, 0); } }

/* ---- Motion safety (never leave content hidden) ---- */
html:not(.js) .clip-reveal, html:not(.js) [data-clip-reveal] { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .clip-reveal, [data-clip-reveal] { clip-path: none !important; }
  .jj-tile:hover, .jj-plan:hover { transform: none; }
}
.clip-reveal.jj-unclipped { clip-path: none !important; }

/* ---- Small screens ---- */
@media (max-width: 781px) {
  .jj-steps__head { flex-direction: column; align-items: start; }
  .sig-feature.jj-feature .wp-block-column { flex-basis: 100% !important; }
}

/* ---- Hero variants ---- */
/* Type-led (Features, Plans): one column, the words are the design, rings arc off the right edge. */
.jj-hero--type .sig__inner { position: relative; }
.sig-hero.jj-hero--type h1 { font-size: clamp(2.8rem, 6.6vw, 6.2rem); line-height: 1.02; max-width: 13ch; margin: .9rem 0 1.5rem; }
.jj-hero--type .jj-lede { max-width: 48ch; }
.jj-hero--type > .jj-rings { inset: auto; left: auto; right: -26vw; top: 50%; width: min(66vw, 880px); height: min(66vw, 880px); margin-top: calc(min(66vw, 880px) / -2); opacity: .75; z-index: -1; }
@media (max-width: 1100px) { .jj-hero--type > .jj-rings { right: -40vw; width: 62vw; height: 62vw; margin-top: -31vw; opacity: .6; } }
@media (max-width: 700px) { .jj-hero--type > .jj-rings { display: none; } }
.jj-hero--type.is-compact { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.jj-hero--type.is-compact h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); }
.jj-hero--type .jj-hero__body { margin-top: 1rem !important; max-width: 60ch; color: var(--jj-ink); }
/* Full-bleed real photo (For Organizers), cream card over it. */
.sig-hero.jj-hero--photo { min-height: min(88vh, 820px); display: flex; align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
.jj-hero--photo > .wp-block-image { position: absolute; inset: 0; margin: 0; z-index: -2; }
.jj-hero--photo > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; border-radius: 0; box-shadow: none; }
.jj-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--jj-cream) 55%, transparent) 0%, transparent 60%); pointer-events: none; }
.jj-hero--photo::before { display: none; }
.jj-hero--photo .sig__inner { width: 100%; }
.jj-hero-card { background: var(--jj-cream); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 3rem); max-width: 640px; box-shadow: var(--shadow-2); }
.jj-hero-card > * + * { margin-top: 1.1rem !important; }
.sig-hero.jj-hero--photo h1 { font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: 1.04; margin: 0; }
.sig-hero.jj-hero--photo p:not(.eyebrow) { font-size: 1.05rem; color: var(--jj-ink); }
.jj-hero-card .jj-lede { color: var(--jj-muted) !important; font-size: 1.12rem !important; }
@media (max-width: 781px) {
  .sig-hero.jj-hero--photo { min-height: 0; padding-top: 42vh; }
  .jj-hero--photo > .wp-block-image { bottom: auto; height: 50vh; }
  .jj-hero--photo::after { display: none; }
}

/* Page opening (Stories, Contact) */
.jj-opening.sig { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
.jj-opening .eyebrow { margin-bottom: .2rem; }

/* Two buttons in the orange band */
.sig-cta.jj-cta .wp-block-buttons { gap: .8rem; }

/* Plan detail cards (Plans & Pricing) */
.jj-plans.is-detailed .jj-plan { gap: .5rem; }
.jj-plan-body { font-size: .98rem; color: var(--jj-ink); margin-top: .6rem !important; }
.jj-plan-best, .jj-plan-inc { font-size: .9rem; color: var(--jj-muted); }
.jj-plan-best strong, .jj-plan-inc strong { color: var(--jj-ink); font-weight: 600; }
.jj-plan-inc { padding-top: .6rem; border-top: 1px dashed var(--line); margin-top: auto !important; }
.jj-plan .price-monthly + .price-annual { margin-top: 0 !important; }
.jj-plan-both { font-size: .9rem; color: var(--jj-muted); }
.jj-plan-notes { margin-top: clamp(2rem, 4vw, 3rem) !important; }
.jj-case { background: var(--jj-white); border: 1px solid var(--line); border-left: 4px solid var(--jj-orange); border-radius: var(--radius-sm); padding: 1.25rem 1.4rem; }
.jj-case > * + * { margin-top: .7rem !important; }

/* Index rows that carry more than one paragraph */
.jj-index .idx-row > .wp-block-group > * + * { margin-top: .8rem !important; }
.jj-index .idx-intro { color: var(--jj-muted); max-width: 60ch; margin: -.5rem 0 1.5rem !important; }

/* Oversized money line (For Organizers) */
.jj-budget .sig__inner > * + * { margin-top: 1.2rem !important; }
.jj-budget h2 { font-size: var(--wp--preset--font-size--xx-large) !important; max-width: none !important; }
.jj-budget p:not(.jj-mega) { max-width: 60ch; margin-inline: auto; }
.jj-main .sig-cta a:not(.wp-block-button__link), .jj-main .sig-statement a:not(.wp-block-button__link) { color: inherit; font-weight: 600; }
.jj-replace__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.jj-replace .marquee { padding-inline: var(--gut); }
h2.jj-plan-name, .jj-plan-name { font-family: var(--jj-mono) !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--jj-muted); }
.jj-hero.is-teal-led::before {
  background:
    radial-gradient(38% 55% at 4% 32%, color-mix(in srgb, var(--jj-teal) 14%, transparent), transparent 72%),
    radial-gradient(40% 60% at 98% 62%, color-mix(in srgb, var(--jj-orange) 12%, transparent), transparent 72%);
}
/* About hero: the oversized line inside slowly turning grooves. */
.sig-oversized.jj-about-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(4rem, 9vw, 8.5rem); }
.jj-about-hero > .jj-rings { inset: auto; left: 50%; top: 50%; width: min(86vw, 820px); height: min(86vw, 820px); margin-left: calc(min(86vw, 820px) / -2); margin-top: calc(min(86vw, 820px) / -2); opacity: .5; z-index: -1; }
.sig-split.jj-split.is-surface-band { background: var(--jj-surface); }


/* ================================================================== *
 * Review pass 1 fixes (taste-report.md, 2026-09-10)
 * ================================================================== */

/* Focus: two-tone ring (ink + cream halo) that clears 3:1 on cream, surface, orange and teal. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--jj-ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--jj-cream); border-radius: 4px;
}
.jj-faq summary:focus-visible { outline-offset: 4px; }
.jj-field input:focus-visible, .jj-field textarea:focus-visible { outline-offset: 2px; }
.skip-link.screen-reader-text:focus {
  background: var(--jj-orange) !important; color: var(--jj-ink) !important; font: 700 1rem var(--jj-body) !important;
  border-radius: 999px; padding: .8rem 1.2rem !important; box-shadow: 0 0 0 3px var(--jj-cream), 0 0 0 5px var(--jj-ink) !important; text-decoration: none;
}

/* Tap targets at least 44px. */
.jj-nav .wp-block-navigation__responsive-container-open, .jj-nav .wp-block-navigation__responsive-container-close { padding: 10px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
@media (min-width: 1101px) { .jj-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; } }
.jj-nav-cta .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }
.jj-faq summary { min-height: 44px; display: flex; align-items: center; }
.jj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding-block: .35rem; }

/* The Start Your Jam item only shows inside the open mobile menu. */
.jj-nav .jj-mobile-cta { display: none !important; }
.jj-nav .is-menu-open .jj-mobile-cta { display: list-item !important; margin-top: 1rem; }
.jj-nav .is-menu-open .jj-mobile-cta > a, .jj-nav .is-menu-open .jj-mobile-cta .wp-block-navigation-item__content {
  display: inline-flex; background: var(--jj-orange); color: var(--jj-ink) !important; border-radius: 999px; padding: .85rem 1.4rem !important;
  font: 700 1.05rem var(--jj-body); letter-spacing: 0;
}
.jj-nav .is-menu-open .jj-mobile-cta a::after { display: none !important; }

/* Hero content arrives on load, never waits for a scroll trigger. Pure CSS, so it
 * ends visible even if every script fails. */
@keyframes jj-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .jj-load { animation: jj-rise .8s var(--ease-out) both; }
  .jj-load-1 { animation-delay: .05s; } .jj-load-2 { animation-delay: .35s; } .jj-load-3 { animation-delay: .55s; } .jj-load-4 { animation-delay: .75s; }
}
.sig-hero.jj-hero .jj-lede { max-width: 44ch; }
.sig-hero.jj-hero .wp-block-buttons { margin-top: 1.5rem; }

/* For Organizers photo hero: the card is shorter, so the button sits above the fold on laptops. */
.sig-hero.jj-hero--photo h1 { font-size: clamp(2.1rem, 3.7vw, 3.5rem); }
.jj-hero-card .jj-lede { font-size: 1.05rem !important; }
.jj-hero-card > * + * { margin-top: .95rem !important; }
.jj-hero-card .jj-hero-card__more { font-size: .98rem !important; color: var(--jj-muted) !important; }

/* Plans: the hero is compact and the pricing section starts right under it. */
.jj-hero--type.is-compact { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.5rem); }
.jj-hero--type.is-compact h1 { margin-bottom: .8rem; font-size: clamp(2.4rem, 4.4vw, 4rem); }
.jj-hero--type.is-compact .jj-lede { max-width: 50ch; font-size: 1.1rem; }
.jj-pricing.is-flush-top { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.jj-pricing.is-flush-top .jj-section__head { margin-bottom: 1.5rem; }
.jj-pricing .jj-vinyl { width: 60px; height: 60px; margin-bottom: .7rem !important; }
.jj-plans .jj-plan { padding-top: 2.6rem; }
.jj-limited { font-size: .66rem !important; letter-spacing: .08em !important; }