/* tokens (design-system/tokens.json) */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-Italic-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
:root, [data-theme="paper"] {
  --garden-green: #346130;
  --garden-green-tint: #528155;
  --marigold: #ffaf00;
  --marigold-tint: #ffcf63;
  --seed-paper: #f0eeda;
  --seed-paper-tint: #fbfbf7;
  --black: #000000;
  --white: #ffffff;
  --gold: #b08e55;
  --cp-limestone: #f5f1e8;
  --surface: var(--seed-paper);
  --surface-raised: var(--seed-paper-tint);
  --surface-card: var(--seed-paper);
  --ink: var(--black);
  --ink-heading: var(--garden-green);
  --ink-lead: var(--garden-green);
  --ink-muted: var(--garden-green);
  --ink-name: var(--garden-green);
  --accent: var(--marigold);
  --on-accent: var(--black);
  --primary: var(--garden-green);
  --on-primary: var(--marigold);
  --line: var(--garden-green);
  --link: var(--garden-green);
  --photo-frame: var(--white);
  --focus-ring: 0 0 0 2px #f0eeda, 0 0 0 4px #346130;
}
[data-theme="garden"] {
  --garden-green: #346130;
  --garden-green-tint: #528155;
  --marigold: #ffaf00;
  --marigold-tint: #ffcf63;
  --seed-paper: #f0eeda;
  --seed-paper-tint: #fbfbf7;
  --black: #000000;
  --white: #ffffff;
  --gold: #b08e55;
  --cp-limestone: #f5f1e8;
  --surface: var(--garden-green);
  --surface-raised: var(--garden-green-tint);
  --surface-card: var(--seed-paper);
  --ink: var(--seed-paper);
  --ink-heading: var(--seed-paper);
  --ink-lead: var(--marigold);
  --ink-muted: var(--marigold-tint);
  --ink-name: var(--marigold);
  --accent: var(--marigold);
  --on-accent: var(--black);
  --primary: var(--marigold);
  --on-primary: var(--garden-green);
  --line: var(--seed-paper);
  --link: var(--marigold-tint);
  --photo-frame: var(--white);
  --focus-ring: 0 0 0 2px #346130, 0 0 0 4px #ffaf00;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --measure: 680px;
  --content-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --border-hairline: 1px;
  --border-button: 2px;
  --border-ring: 4px;
  --font-serif: "Instrument Serif", "Times New Roman", Times, serif;
  --font-sans: "Instrument Sans", "Open Sans", Arial, sans-serif;
}
.display { font-family: var(--font-serif); font-size: 168px; line-height: 0.85; font-weight: 400; letter-spacing: 0; }
.headline-xl { font-family: var(--font-serif); font-size: 88px; line-height: 0.95; font-weight: 400; }
.headline-lg { font-family: var(--font-serif); font-size: 64px; line-height: 0.95; font-weight: 400; }
.headline-md { font-family: var(--font-serif); font-size: 36px; line-height: 1.05; font-weight: 400; }
.statement { font-family: var(--font-serif); font-size: 52px; line-height: 1.08; font-weight: 400; }
.lead { font-family: var(--font-serif); font-size: 40px; line-height: 1.1; font-weight: 400; }
.body-serif { font-family: var(--font-serif); font-size: 27px; line-height: 1.1; font-weight: 400; }
.button { font-family: var(--font-serif); font-size: 26px; line-height: 1; font-weight: 400; }
.nav { font-family: var(--font-serif); font-size: 22px; line-height: 28px; font-weight: 400; }
.eyebrow { font-family: var(--font-serif); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.06em; }
.caption-italic { font-family: var(--font-serif); font-size: 18px; line-height: 24px; font-weight: 400; font-style: italic; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }

/* components (design-system/bundle.css) */
/* Joanna Rees, System Changer: component styles. Every color, space and radius is a token from tokens.css; type styles are the tokens' classes (.display, .headline-xl, .body …). */

.jr-root, .jr-band { box-sizing: border-box; }
.jr-band *, .jr-root * { box-sizing: inherit; }

/* Bands: a full-bleed ground whose theme is set with data-theme on the band itself */
.jr-band { background: var(--surface); color: var(--ink); font-family: var(--font-sans); margin: 0; }
.jr-band--raised { background: var(--surface-raised); }
.jr-band--accent { background: var(--accent); color: var(--on-accent); }
.jr-inner { max-width: var(--content-max); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }

.jr-band :focus-visible, .jr-root :focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Logo & star */
.jr-logo { display: inline-block; vertical-align: middle; }
.jr-logo svg { display: block; height: 100%; width: auto; }
.jr-star { display: inline-block; line-height: 0; }
.jr-star svg, .jr-star img { display: block; width: 100%; height: auto; }

/* Button: the pill */
.jr-btn { font-family: var(--font-serif); display: inline-flex; align-items: center; justify-content: center; height: var(--space-8); padding: 0 var(--space-7); border-radius: var(--radius-pill); border: var(--border-button) solid var(--line); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.jr-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.jr-btn--primary.jr-btn--sm { color: var(--seed-paper); }
[data-theme="garden"] .jr-btn--primary.jr-btn--sm { color: var(--black); }
.jr-btn--outline { border-color: var(--line); color: var(--ink); }
.jr-band--accent .jr-btn--outline, .jr-btn--on-accent { border-color: var(--garden-green); color: var(--on-accent); }
.jr-btn--green { background: var(--garden-green); border-color: var(--garden-green); color: var(--seed-paper); }
.jr-btn--marigold { background: var(--marigold); border-color: var(--marigold); color: var(--black); }
.jr-btn:hover { opacity: .88; }
.jr-btn--sm { height: 44px; padding: 0 var(--space-5); font-size: 18px; }

/* Nav */
.jr-nav { display: flex; flex-direction: column; align-items: stretch; padding-top: var(--space-4); }
.jr-nav__links { display: flex; justify-content: flex-end; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.jr-nav__links li { display: flex; align-items: center; }
.jr-nav__links li + li::before { content: ""; display: block; width: var(--border-hairline); height: 16px; background: var(--line); margin: 0 var(--space-4); opacity: .7; }
.jr-nav__links a { color: var(--link); text-decoration: none; white-space: nowrap; }
/* Phones: 18px where it fits on one line, a little less on the narrowest screens. In the home hero the links take the whole bar (the page is home, so the monogram stands down there). */
@media (max-width: 480px) { .jr-hero .jr-nav__home { display: none; } .jr-hero .jr-nav__links { margin-left: auto; } }
@media (max-width: 480px) { .jr-nav__links { font-size: min(18px, 4.6vw); line-height: 24px; flex-wrap: wrap; row-gap: 2px; } .jr-nav__links li + li::before { margin: 0 5px; } .jr-nav__bar { gap: 12px; } }
.jr-nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.jr-nav__mark { display: flex; justify-content: center; padding: var(--space-6) 0 0; color: var(--ink-name); }

/* Hero */
.jr-hero { position: relative; padding: var(--space-6); background-color: var(--gold); background-size: cover; background-position: center; }
.jr-hero__panel { position: relative; background: var(--garden-green); color: var(--seed-paper); border-radius: 0 0 var(--radius-xl) var(--radius-xl); min-height: 520px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-6) var(--space-6) var(--space-8); }
.jr-hero__nav { width: 100%; }
/* The name is drawn at about 29% of the title's size in Website Direction v3 (Arthur, Sep 2026: match the mockup), so it scales with the title rather than sitting at a fixed headline-md. */
.jr-hero__name { margin: var(--space-7) 0 .3em; color: var(--ink-name); font-size: clamp(24px, 6.1cqw, 92px); line-height: 1; }
.jr-hero__title { margin: 0; color: var(--seed-paper); text-transform: uppercase; font-size: clamp(72px, 21cqw, 320px); line-height: .85; max-width: 100%; }
.jr-hero { container-type: inline-size; }
.jr-hero__star { margin-top: var(--space-8); width: 120px; }

/* Statement */
.jr-statement { padding-top: var(--space-11); padding-bottom: var(--space-11); position: relative; }
.jr-statement--center { text-align: center; }
.jr-statement p { margin: 0 auto; max-width: 13.5em; color: var(--ink-heading); }
.jr-statement--ink p { color: var(--ink); }
.jr-statement--left p { margin-left: 0; max-width: 24em; }
.jr-statement__star { position: absolute; width: 72px; }
.jr-statement__star--top-right { top: var(--space-7); right: var(--space-7); }
.jr-statement__star--left { left: var(--space-7); bottom: var(--space-8); }
/* Statement, wide: the line runs the full content width. Its phrases are set apart: italic, Garden Green, each with a
   Marigold underline that draws in turn once the line is in view (site.js adds is-inview). The serif has one weight, so
   italic and color carry the emphasis; Marigold stays a rule, never the text, which keeps it legible on paper. */
.jr-statement--wide p { max-width: none; }
.jr-statement--phrases p { color: var(--ink); }
.jr-statement__phrase { font-style: italic; color: var(--ink-heading); white-space: nowrap; background: linear-gradient(var(--marigold), var(--marigold)) no-repeat 0 94% / 100% .1em; padding: 0 .04em .06em; }
.js-io .jr-statement--phrases:not(.is-inview) .jr-statement__phrase { background-size: 0% .1em; }
.js-io .jr-statement--phrases .jr-statement__phrase { transition: background-size .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.35s + var(--i, 0) * .4s); }
@media (prefers-reduced-motion: reduce) { .js-io .jr-statement--phrases .jr-statement__phrase { transition: none; } .js-io .jr-statement--phrases:not(.is-inview) .jr-statement__phrase { background-size: 100% .1em; } }

/* Section title */
.jr-section-title { text-align: center; padding-top: var(--space-9); padding-bottom: var(--space-7); }
.jr-section-title h2 { margin: 0 auto; max-width: 14em; color: var(--ink-heading); }
.jr-section-title--upper h2 { text-transform: uppercase; }
.jr-section-title__eyebrow { display: block; margin-bottom: var(--space-4); color: var(--ink-muted); text-transform: uppercase; }

/* Change model */
.jr-cm { position: relative; width: 100%; aspect-ratio: 4096 / 2304; container-type: inline-size; color: var(--garden-green); font-family: var(--font-serif); }
.jr-cm__shapes { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The arcs around the Catalytic Role circle, drawn live over the arc-free artwork so they turn. --jr-cm-ring-gold recolors the ring the artwork drew in gray. */
.jr-cm__rings { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.jr-cm__ring { stroke-linecap: round; transform-box: view-box; transform-origin: 2047.5px 1223.5px; animation: jr-cm-turn linear infinite; }
.jr-cm__ring--gold { stroke: var(--jr-cm-ring-gold, var(--gold)); }
.jr-cm__ring--marigold { stroke: var(--marigold); }
.jr-cm__ring--green { stroke: var(--garden-green); }
@keyframes jr-cm-turn { to { transform: rotate(360deg); } }
/* Waves: under the artwork, running out past the figure (the band clips them with .jr-band--clip). */
.jr-cm__waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.jr-cm__wave { fill: none; stroke-linecap: round; }
.jr-band--clip { overflow: clip; }
/* Turbine: swept blades in the core, under the arcs and the name. */
.jr-cm__turbine { transform-box: view-box; transform-origin: 2047.5px 1223.5px; animation: jr-cm-turn 6s linear infinite; }
.jr-cmv__turbine { transform-box: view-box; transform-origin: 200px 800px; animation: jr-cm-turn 6s linear infinite; }
.jr-cm-wrap--still .jr-cm__turbine, .jr-cmv-wrap--still .jr-cmv__turbine { animation: none; }
@media (prefers-reduced-motion: reduce) { .jr-cm__turbine, .jr-cmv__turbine { animation: none; } .jr-cm__waves, .jr-cm__waves-g { display: none; } }
.jr-cm-wrap--still .jr-cm__ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .jr-cm__ring { animation: none; } }
.jr-cm__label { position: absolute; transform: translate(-50%, -50%); text-align: center; margin: 0; white-space: pre-line; line-height: 1.05; }
.jr-cm__node { font-size: 1.35cqw; width: 9.6cqw; }
.jr-cm__head { font-size: 1.6cqw; letter-spacing: .06em; text-transform: uppercase; border-bottom: var(--border-hairline) solid var(--garden-green); padding-bottom: .3cqw; }
.jr-cm__sub { font-size: 1.25cqw; font-family: var(--font-sans); color: var(--garden-green); }
.jr-cm__stage { font-size: 1.35cqw; }
.jr-cm__verb { font-size: 1.1cqw; letter-spacing: .1em; text-transform: uppercase; }
.jr-cm__name { font-size: 1.9cqw; }
.jr-cm__role { font-size: .8cqw; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 500; }
.jr-cm__tool { font-size: .78cqw; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 500; width: 8cqw; }
.jr-cm__tool b { display: block; font-size: 1cqw; font-weight: 500; letter-spacing: .12em; margin-bottom: .2cqw; }
.jr-cm__caption { text-align: center; color: var(--ink-heading); margin: 0; }
.jr-cm-wrap > .jr-cm__caption { font-size: clamp(30px, 3.6cqw, 54px); line-height: 1.1; margin-top: var(--space-6); }
.jr-cm-wrap { padding-bottom: var(--space-9); container-type: inline-size; }
/* Headlines balance their lines so a single word never ends up alone on the last line (Joanna, Sep 2026); copy also joins its closing phrase with no-break spaces ("changing systems", "fuel for lasting change"). */
.display, .headline-xl, .headline-lg, .headline-md, .statement, .lead, .jr-shelf__title, .jr-cta h2, .jr-card h3 { text-wrap: balance; }
/* Running text never ends on a lone word where the browser can help (Nov 10, 2026); the site's build also ties the
   last two words of every heading, caption, label and short line. */
p, li, dd, dt, figcaption, blockquote, .label, .caption { text-wrap: pretty; }
.jr-cm__heads { position: relative; height: 9cqw; color: var(--garden-green); font-family: var(--font-serif); }
.jr-cm__heads .jr-cm__label { top: 40%; }
.jr-cm__heads .jr-cm__sub { top: 85%; white-space: pre; }

/* Band (green lead band) */
.jr-lead-band { position: relative; padding-top: var(--space-10); padding-bottom: var(--space-10); }
.jr-lead-band__lead { margin: 0 0 var(--space-6); max-width: 19em; color: var(--ink-lead); }
.jr-lead-band__body { margin: 0; max-width: 26em; color: var(--ink); }
.jr-lead-band__body p { margin: 0 0 var(--space-4); }
.jr-lead-band__star { position: absolute; right: var(--space-6); top: var(--space-8); width: 88px; }

/* Practice cards */
.jr-practice { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.jr-practice__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (max-width: 720px) { .jr-practice__grid { grid-template-columns: 1fr; } }
.jr-card { background: var(--surface-card); color: var(--black); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.jr-card h3 { margin: 0; color: var(--black); }
.jr-card__img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.jr-card__body p { margin: 0 0 var(--space-5); }
.jr-card__body p:last-child { margin-bottom: 0; }
/* ChangeModelZone: the small model at the foot of a card, its zone lit; brighter while the card is hovered or focused. */
.jr-cmz { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--line); }
.jr-cmz svg { width: 100%; max-width: 240px; height: auto; display: block; overflow: visible; color: var(--garden-green); }
.jr-cmz__links { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 1.5 3; opacity: .35; }
.jr-cmz__part { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .32; transition: opacity .3s ease, fill-opacity .3s ease, stroke-width .3s ease; }
.jr-cmz__part--on { opacity: 1; stroke: var(--marigold); stroke-width: 2.2; fill: var(--marigold); fill-opacity: .28; }
.jr-cmz__arc.jr-cmz__part--on { fill: none; }
.jr-card:hover .jr-cmz__part--on, .jr-card:focus-within .jr-cmz__part--on { fill-opacity: .7; stroke-width: 2.8; }
.jr-card:hover .jr-cmz__arc.jr-cmz__part--on, .jr-card:focus-within .jr-cmz__arc.jr-cmz__part--on { fill: none; }
.jr-cmz__text { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-cmz__kicker { color: var(--ink-muted); text-transform: uppercase; }
.jr-cmz__zone { font-family: var(--font-serif); font-size: 20px; line-height: 1.1; color: var(--ink-heading); }
@media (prefers-reduced-motion: reduce) { .jr-cmz__part { transition: none; } }

/* CTA */
.jr-cta { position: relative; padding-top: var(--space-10); padding-bottom: var(--space-10); }
.jr-cta h2 { margin: 0 0 var(--space-7); max-width: 12em; color: var(--on-accent); }
.jr-cta__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.jr-cta__linkedin { display: inline-block; width: 32px; line-height: 0; }
.jr-cta__linkedin img { width: 100%; display: block; }
.jr-cta__linkedin--labeled { display: inline-flex; align-items: center; gap: var(--space-3); width: auto; line-height: 1.2; color: var(--on-accent); text-decoration: none; }
.jr-cta__linkedin--labeled img { width: 32px; flex: none; }
.jr-cta__linkedin--labeled:hover .jr-cta__linkedin-label { text-decoration: underline; text-underline-offset: 3px; }
.jr-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.jr-cta__star { position: absolute; right: var(--space-6); top: var(--space-7); width: 88px; }

/* Photo stack */
.jr-photostack { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 520; }
.jr-photostack img { position: absolute; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.jr-photostack__front { left: 0; top: 0; width: 63%; height: 78%; z-index: 2; }
.jr-photostack__back { right: 0; bottom: 0; width: 60%; height: 70%; z-index: 1; }

/* Prose */
.jr-prose { max-width: var(--measure); color: var(--ink); }
.jr-prose p { margin: 0 0 var(--space-5); }
.jr-prose p:last-child { margin-bottom: 0; }

/* Photo grid */
.jr-photogrid { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.jr-photogrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-photogrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jr-photogrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .jr-photogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jr-photogrid figure { margin: 0; }
.jr-photogrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.jr-photogrid figcaption { margin-top: var(--space-2); color: var(--ink-muted); }

/* Family fallbacks, in case a consumer loads the bundle without the type classes: serif for every headline and label-in-serif, sans for reading copy */
.jr-hero__title, .jr-hero__name, .jr-statement p, .jr-section-title h2, .jr-section-title__eyebrow, .jr-card h3, .jr-cta h2, .jr-lead-band__lead, .jr-lead-band__body, .jr-cm__caption, .jr-nav__links, .jr-btn { font-family: var(--font-serif); }
.jr-card__body, .jr-prose, .jr-photogrid figcaption, .jr-cm__sub, .jr-cm__role, .jr-cm__tool { font-family: var(--font-sans); }

/* Footer */
.jr-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); padding-top: var(--space-7); padding-bottom: var(--space-7); border-top: var(--border-hairline) solid var(--line); flex-wrap: wrap; }
.jr-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.jr-footer__home { display: inline-flex; align-self: flex-start; color: var(--ink-heading); text-decoration: none; }
.jr-footer__copy { margin: 0; color: var(--ink-muted); }
.jr-footer__links { display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.jr-footer__links a { color: var(--link); text-decoration: none; }
.jr-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Banner (LinkedIn cover, 4:1) */
.jr-banner { position: relative; width: 100%; container-type: inline-size; font-family: var(--font-serif); }
.jr-banner__cover { position: relative; aspect-ratio: 4 / 1; border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.jr-banner--green .jr-banner__cover { background: var(--garden-green); color: var(--seed-paper); }
.jr-banner--marigold .jr-banner__cover { background: var(--marigold); color: var(--garden-green); }
.jr-banner__title { margin: 0; text-transform: uppercase; text-align: center; font-size: 9.8cqw; line-height: .79; letter-spacing: 0; position: relative; left: 1.4cqw; }
.jr-banner__star { position: absolute; left: 67cqw; top: 17%; width: 9.5cqw; }
.jr-banner--mock .jr-banner__cover { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.jr-banner--mock { padding-bottom: 5cqw; }
.jr-banner__portrait { position: absolute; left: 3cqw; top: 15cqw; width: 14cqw; height: 14cqw; border-radius: var(--radius-circle); object-fit: cover; border: 0.5cqw solid var(--photo-frame); box-sizing: border-box; background: var(--photo-frame); }

/* Page layout helpers used by the page showcases (About and Practice heroes, section intros) */
.jr-page-hero { text-align: center; position: relative; z-index: 2; }
.jr-page-hero .jr-inner { padding-top: 0; padding-bottom: 0; }
.jr-page-hero .jr-nav__mark { color: var(--ink-heading); }
.jr-page-hero__name { margin: var(--space-7) 0 var(--space-3); color: var(--ink-name); }
.jr-page-hero__title { margin: 0 auto; max-width: 11em; color: var(--ink-heading); }
.jr-page-hero--short .jr-inner { padding-bottom: var(--space-10); }
.jr-page-hero__row { position: relative; display: flex; justify-content: flex-end; align-items: flex-start; margin-top: var(--space-8); padding-bottom: 0; }
.jr-page-hero__star { position: absolute; left: 6%; top: 42%; }
.jr-page-hero__stack { width: 46%; max-width: 480px; margin-bottom: -180px; }
.jr-page-about { padding-top: 240px; padding-bottom: var(--space-10); }
.jr-page-about__statement { margin: 0 0 var(--space-8); max-width: 20em; color: var(--ink-heading); }
.jr-page-section { padding-bottom: var(--space-10); }
.jr-page-section__intro { margin: 0 0 var(--space-7); max-width: 24em; color: var(--ink-heading); }
.jr-page-section__intro p { margin: 0; }
.jr-page-section__intro p + p { margin-top: var(--space-4); }
.jr-page-section__lead { color: var(--ink-heading); margin: 0 0 var(--space-4); }
.jr-page-section__actions { margin-top: var(--space-7); }
.jr-page-section--split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 720px) { .jr-page-section--split { grid-template-columns: 1fr; } }
.jr-page-section__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); display: block; }

/* Nav as a bar: mark left, links right (markPosition="left") */
.jr-nav__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); }
.jr-nav__home { display: inline-flex; color: var(--ink-heading); }
[data-theme="garden"] .jr-nav__home { color: var(--ink-name); }

/* Change model reveal (animate) */
.jr-cm-wrap--animate .jr-cm__shapes, .jr-cm-wrap--animate .jr-cm__rings { clip-path: inset(0 100% 0 0); animation: jr-cm-wipe 2.6s cubic-bezier(.2, .6, .2, 1) .2s forwards; }
.jr-cm-wrap--animate .jr-cm .jr-cm__label { opacity: 0; animation: jr-cm-fade .7s ease-out forwards; }
@keyframes jr-cm-wipe { to { clip-path: inset(0 0 0 0); } }
.jr-cm-wrap--animate .jr-cm__waves { opacity: 0; animation: jr-cm-fade 1.2s ease-out 2.4s forwards; }
@keyframes jr-cm-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .jr-cm-wrap--animate .jr-cm__shapes, .jr-cm-wrap--animate .jr-cm__rings, .jr-cm-wrap--animate .jr-cm__waves, .jr-cm-wrap--animate .jr-cm .jr-cm__label { animation: none; clip-path: none; opacity: 1; }
}

/* Library: shelf, books, media */
.jr-shelf { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.jr-shelf__title { margin: 0 0 var(--space-5); color: var(--ink-heading); }
.jr-shelf__intro { margin: 0 0 var(--space-8); max-width: 26em; color: var(--ink); }
.jr-shelf__intro + .jr-shelf__meta { margin-top: calc(-1 * var(--space-6)); }
.jr-shelf__meta { margin: 0 0 var(--space-8); max-width: 40em; color: var(--ink-muted); }
.jr-shelf__grid { display: grid; gap: var(--space-8) var(--space-6); margin: 0; padding: 0; list-style: none; }
.jr-shelf__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-shelf__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jr-shelf__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jr-shelf__grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 720px) { .jr-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jr-book { position: relative; padding-bottom: var(--space-5); border-bottom: var(--border-hairline) solid var(--gold); }
.jr-book__link { color: inherit; text-decoration: none; display: block; }
.jr-book__link:hover .jr-book__title { text-decoration: underline; text-underline-offset: 4px; }
.jr-book__cover { display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.jr-book__cover--img { object-fit: cover; }
.jr-book__cover--type { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 14% 12%; font-family: var(--font-serif); box-sizing: border-box; container-type: inline-size; overflow: hidden; }
.jr-book__cover--type::before { content: ""; position: absolute; inset: 8px; border: var(--border-hairline) solid var(--gold); border-radius: 4px; pointer-events: none; }
.jr-book__cover--green { background: var(--garden-green); color: var(--seed-paper); }
.jr-book__cover--marigold { background: var(--marigold); color: var(--black); }
.jr-book__cover--paper { background: var(--seed-paper-tint); color: var(--garden-green); }
.jr-book__cover-title { font-size: clamp(13px, 13.5cqw, 26px); line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.jr-book__cover-author { font-size: clamp(8px, 6.5cqw, 12px); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 500; }
.jr-book__status { margin: 0 0 var(--space-2); color: var(--ink-muted); text-transform: uppercase; }
.jr-book__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--ink-heading); }
.jr-book__author { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.jr-book__note { margin-top: var(--space-3); color: var(--ink); }
.jr-media-list { list-style: none; margin: 0; padding: 0; }
.jr-media { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-5) 0; border-top: var(--border-hairline) solid var(--line); }
.jr-media:last-child { border-bottom: var(--border-hairline) solid var(--line); }
.jr-media__kind { margin: 0 0 var(--space-1); color: var(--ink-muted); text-transform: uppercase; }
.jr-media__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink-heading); }
.jr-media__meta { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.jr-media__note { margin-top: var(--space-2); max-width: 40em; color: var(--ink); }
@media (max-width: 720px) { .jr-media { flex-direction: column; align-items: flex-start; } }
.jr-book__cover { transition: transform .25s ease; }
.jr-book__link:hover .jr-book__cover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .jr-book__cover { transition: none; } .jr-book__link:hover .jr-book__cover { transform: none; } }
.jr-page-library__row { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; padding-bottom: var(--space-10); }
.jr-page-library__row img { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.jr-page-library__statement { margin: 0; color: var(--ink-heading); max-width: 16em; }
@media (max-width: 720px) { .jr-page-library__row { grid-template-columns: 1fr; } }
.jr-shelf + .jr-shelf { padding-top: 0; }

/* Fund of Funds (designer mockup, Sep 2026): values are the mockup's, at 1440 and 390 */
.jr-fof__inner { padding-top: 56px; padding-bottom: 96px; }
.jr-fof__title { margin: 0 0 76px; text-align: center; font-family: var(--font-serif); font-weight: 400; font-size: 76px; line-height: 1.1; color: var(--ink-heading); }
.jr-fof__row { display: flex; gap: 72px; align-items: flex-start; }
.jr-fof__text { flex: 1 1 auto; max-width: 640px; display: flex; flex-direction: column; }
.jr-fof__subhead { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.35; color: var(--ink-heading); }
.jr-fof__p { margin: 22px 0 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--black); }
.jr-fof__subhead + .jr-fof__p { margin-top: 40px; }
.jr-fof__link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 36px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: .01em; text-decoration: none; color: var(--garden-green); border-bottom: 2px solid var(--marigold); transition: color 160ms ease, border-color 160ms ease; }
.jr-fof__link:hover { color: var(--black); border-bottom-color: var(--garden-green); }
.jr-fof__card { width: 520px; height: 480px; flex: 0 0 auto; border-radius: 20px; background: var(--cp-limestone); display: flex; align-items: center; justify-content: center; padding: 64px; box-sizing: border-box; }
.jr-fof__logo { width: 295px; height: auto; display: block; }
.jr-fof__logo-text { font-family: var(--font-serif); font-size: 40px; color: #053d1e; letter-spacing: .06em; text-transform: uppercase; }
.jr-fof__note { position: relative; margin: 44px 0 0; padding-top: 22px; max-width: 30em; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--ink-heading); }
.jr-fof__note::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 2px; background: var(--gold); }
.jr-fof__disclaimer { margin: 48px 0 0; padding-top: 16px; border-top: var(--border-hairline) solid var(--line); color: var(--ink-muted); max-width: 640px; }
/* founder layout */
.jr-fof--founder .jr-fof__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.jr-fof__eyebrow { margin: 0 0 12px; color: var(--ink-muted); text-transform: uppercase; }
.jr-fof__eyebrow::after { content: ""; display: block; width: 64px; height: 2px; background: var(--marigold); margin-top: 12px; }
.jr-fof__headline { margin: 20px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 56px; line-height: 1.05; color: var(--ink-heading); max-width: 11em; }
.jr-fof--founder .jr-fof__right { border-left: var(--border-hairline) solid var(--line); padding-left: 64px; display: flex; flex-direction: column; }
.jr-fof--founder .jr-fof__right .jr-fof__p { margin: 0 0 22px; }
.jr-fof--founder .jr-fof__right .jr-fof__p:first-child { margin-top: 12px; }
.jr-fof--founder .jr-fof__link { margin-top: 14px; letter-spacing: .1em; font-size: 14px; }
/* Tablets and small laptops: the card shrinks with the row instead of pushing past the screen edge (Nov 10, 2026). */
@media (min-width: 721px) and (max-width: 1100px) {
  .jr-fof__row { gap: 48px; }
  .jr-fof__text { flex: 1 1 0; min-width: 0; }
  .jr-fof__card { flex: 0 0 36%; width: auto; height: auto; aspect-ratio: 13 / 12; padding: 40px; }
  .jr-fof__logo { width: 100%; max-width: 295px; }
}
@media (max-width: 720px) {
  .jr-fof__inner { padding-top: 40px; padding-bottom: 40px; }
  .jr-fof__title { font-size: 40px; margin-bottom: 40px; }
  .jr-fof__row { flex-direction: column; gap: 0; }
  .jr-fof__subhead { font-size: 21px; }
  .jr-fof__subhead + .jr-fof__p { margin-top: 28px; }
  .jr-fof__p { font-size: 16px; margin-top: 20px; }
  .jr-fof__link { margin-top: 28px; }
  .jr-fof__note { margin-top: 32px; font-size: 20px; }
  .jr-fof__card { width: 100%; max-width: 342px; height: 340px; margin-top: 32px; border-radius: 16px; padding: 48px; }
  .jr-fof__logo { width: 196px; }
  .jr-fof--founder .jr-fof__cols { grid-template-columns: 1fr; gap: 32px; }
  .jr-fof--founder .jr-fof__right { border-left: 0; padding-left: 0; border-top: var(--border-hairline) solid var(--line); padding-top: 24px; }
  .jr-fof__headline { font-size: 36px; }
}

/* ---------- Phones and small tablets (Sep 2026 mobile pass). The type tokens are desktop values; below 720px every serif style steps down so headlines fit a 342px column, and the bands tighten. Checked at 390px. */
@media (max-width: 720px) {
  .headline-xl { font-size: 44px; line-height: 1; }
  .headline-lg { font-size: 36px; line-height: 1; }
  .headline-md { font-size: 27px; line-height: 1.08; }
  .statement { font-size: 30px; line-height: 1.12; }
  .lead { font-size: 27px; line-height: 1.15; }
  .body-serif { font-size: 21px; line-height: 1.2; }
  .button { font-size: 22px; }
  .jr-statement { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .jr-statement p { max-width: 100%; }
  .jr-statement__star { width: 48px; }
  .jr-statement__star--top-right { top: var(--space-5); right: var(--space-5); }
  .jr-lead-band { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .jr-lead-band__star { width: 56px; top: var(--space-5); }
  .jr-lead-band__lead { padding-right: 64px; }
  .jr-section-title { padding-top: var(--space-8); padding-bottom: var(--space-6); }
  .jr-cta { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .jr-cta__star { width: 56px; top: var(--space-5); }
  .jr-cta h2 { padding-right: 64px; }
  .jr-footer { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .jr-footer__links { flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
  .jr-footer__links a { white-space: nowrap; }
  .jr-page-hero__title { max-width: 100%; }
  .jr-page-hero__row { margin-top: var(--space-6); }
  .jr-page-hero__stack { width: 78%; max-width: 300px; margin-bottom: -96px; }
  .jr-page-hero__star { display: none; }
  .jr-page-about { padding-top: 150px; }
  .jr-page-about__statement, .jr-page-section__intro { max-width: 100%; }
  .jr-page-library__row img { max-width: 240px; }
  .jr-hero__star { width: 88px; margin-top: var(--space-7); }
  .jr-hero__panel { min-height: 0; }
}
@media (max-width: 480px) {
  .jr-photogrid, .jr-photogrid--2, .jr-photogrid--3, .jr-photogrid--4 { grid-template-columns: 1fr; }
  .jr-btn { max-width: 100%; }
}
/* Change Model on phones: the diagram needs 720px, so below that ChangeModel shows the vertical model (ChangeModelVertical, the default) or, with phone="stack", a stacked reading of the five stages. iPad and up keep the horizontal diagram. */
.jr-cm-stack, .jr-cm-wrap .jr-cm__phone { display: none; }
@media (max-width: 720px) {
  .jr-cm-wrap .jr-cm__heads, .jr-cm-wrap .jr-cm, .jr-cm-wrap > .jr-cm__caption { display: none; }
  .jr-cm-wrap .jr-cm__phone { display: block; padding-top: 0; }
  .jr-cm-wrap { padding-bottom: var(--space-8); }
  .jr-cm-stack { display: block; margin: 0; padding: 0; list-style: none; font-family: var(--font-serif); color: var(--garden-green); }
  .jr-cm-stack__stage { position: relative; padding: var(--space-6) 0 var(--space-6) var(--space-6); border-left: var(--border-hairline) solid var(--line); }
  .jr-cm-stack__stage::before { content: ""; position: absolute; left: -5px; top: var(--space-6); width: 9px; height: 9px; border-radius: 50%; background: var(--garden-green); }
  .jr-cm-stack__stage:last-child { border-left-color: transparent; }
  .jr-cm-stack__head { margin: 0; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
  .jr-cm-stack__head--sentence { text-transform: none; letter-spacing: 0; font-size: 22px; }
  .jr-cm-stack__sub { margin: var(--space-1) 0 0; font-family: var(--font-sans); font-size: 15px; line-height: 18px; color: var(--ink-muted); }
  .jr-cm-stack__nodes { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .jr-cm-stack__node { border: var(--border-hairline) solid var(--line); background: var(--surface-card); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 16px; line-height: 1.2; }
  .jr-cm-stack__node--harvest { border-color: var(--marigold); border-width: 2px; }
  .jr-cm-stack__tool b { display: block; font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; margin-bottom: 2px; }
  .jr-cm-stack__tool { border-radius: var(--radius-md); }
  .jr-cm-stack__center { position: relative; width: 220px; margin: var(--space-4) auto 0; aspect-ratio: 1; }
  .jr-cm-stack__center svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .jr-cm-stack__center-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin: 0; font-size: 22px; line-height: 1.05; padding: 0 36px; }
  .jr-cm-stack__center-text span { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
  .jr-cm-stack__verbs { display: flex; justify-content: center; gap: var(--space-5); margin: var(--space-4) 0 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
  .jr-cm-stack .jr-cm__caption { text-align: left; margin-top: var(--space-6); padding-left: var(--space-6); }
}

/* ---------- ChangeModelVertical: the model read top to bottom, one live SVG on a 400-unit canvas (Sep 2026). */
.jr-cmv-wrap { max-width: 560px; margin: 0 auto; padding: var(--space-6) 0 var(--space-8); }
.jr-cmv { display: block; width: 100%; height: auto; overflow: visible; }
.jr-cmv__text { font-family: var(--font-serif); fill: var(--garden-green); }
.jr-cmv__head { font-size: 15.5px; letter-spacing: .09em; text-transform: uppercase; }
.jr-cmv__rule { stroke: var(--garden-green); stroke-width: .8; }
.jr-cmv__sub { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: .01em; }
.jr-cmv__stage { font-size: 17px; }
.jr-cmv__node { fill: var(--surface-card); stroke: var(--garden-green); stroke-width: 1.4; }
.jr-cmv__node-text { font-size: 14px; }
.jr-cmv__tool-name { font-family: var(--font-sans); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.jr-cmv__tool { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.jr-cmv__picto-fallback { fill: var(--seed-paper); }
.jr-cmv__verb { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.jr-cmv__core { fill: var(--surface-card); }
.jr-cmv__name { font-size: 22px; fill: var(--black); }
.jr-cmv__role { font-family: var(--font-sans); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.jr-cmv__ring { stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 50%; animation: jr-cm-turn linear infinite; }
.jr-cmv__arrow { fill: none; stroke: var(--garden-green); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: .01 4.6; animation: jr-cmv-flow 3.5s linear infinite; }
.jr-cmv__head-fill { fill: var(--garden-green); }
.jr-cmv__brace { fill: none; stroke: var(--garden-green); stroke-width: 1.2; }
.jr-cmv__harvest { fill: var(--surface-card); stroke: var(--marigold); stroke-width: 3; }
.jr-cmv__caption { font-style: italic; font-size: 20px; fill: var(--ink-heading); }
@keyframes jr-cmv-flow { to { stroke-dashoffset: -46; } }
.jr-cmv-wrap--still .jr-cmv__ring, .jr-cmv-wrap--noflow .jr-cmv__arrow { animation: none; }
.jr-cmv-wrap--animate .jr-cmv { clip-path: inset(0 0 100% 0); animation: jr-cmv-wipe 3.2s cubic-bezier(.2, .6, .2, 1) .2s forwards; }
@keyframes jr-cmv-wipe { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .jr-cmv__ring, .jr-cmv__arrow { animation: none; } .jr-cmv-wrap--animate .jr-cmv { animation: none; clip-path: none; } }

/* ---------- Working together: the coaching invitation on the Collaborate page (Joanna's copy, Oct 2026), on the garden band. */
.jr-working { padding-top: 0; padding-bottom: var(--space-10); max-width: 760px; margin-left: auto; margin-right: auto; }
.jr-working__eyebrow { margin: 0 0 var(--space-5); color: var(--ink-muted); text-transform: uppercase; }
.jr-working__lead { margin: 0 0 var(--space-6); color: var(--ink-lead); max-width: 18em; }
.jr-working__body { margin: 0; color: var(--ink); max-width: 26em; }
.jr-working__body p { margin: 0 0 var(--space-4); }
.jr-working__for { margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--line); display: grid; grid-template-columns: 9em 1fr; gap: var(--space-5); align-items: start; }
.jr-working__for .label { margin: 0; color: var(--ink-muted); text-transform: uppercase; padding-top: 4px; }
.jr-working__for .body { margin: 0; color: var(--ink); max-width: 30em; }
.jr-working__actions { margin-top: var(--space-7); }
@media (max-width: 720px) { .jr-working__for { grid-template-columns: 1fr; gap: var(--space-2); } }
/* Library at launch: the Coming soon band under the hero (Arthur, Oct 2026). */
.jr-coming__inner { padding-top: var(--space-9); padding-bottom: var(--space-10); max-width: 760px; margin-left: auto; margin-right: auto; }
.jr-coming__eyebrow { margin: 0 0 var(--space-5); color: var(--ink-muted); text-transform: uppercase; }
.jr-coming__title { margin: 0 0 var(--space-6); color: var(--ink-heading); }
.jr-coming__text { margin: 0; color: var(--ink); max-width: 26em; }
@media (max-width: 720px) { .jr-coming__inner { padding-top: var(--space-8); padding-bottom: var(--space-9); } }
/* Capital page: the four funds beside CP Capital, as a row of hairline cards (Oct 2026). */
.jr-funds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.jr-funds__card { display: flex; flex-direction: column; min-height: 200px; padding: var(--space-5); border: var(--border-hairline) solid var(--gold); border-radius: var(--radius-md); box-sizing: border-box; }
.jr-funds__role { display: flex; align-items: center; min-height: 2.7em; line-height: 1.35; margin: 0 0 var(--space-4); color: var(--ink-muted); text-transform: uppercase; }
.jr-funds__name { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink-heading); }
.jr-funds__line { margin: 0; color: var(--ink); }
/* A fund's logo at the top of its card: one color (ink-heading), drawn from the file as a mask, in a slot of one height
   so the four sit in a row. --ar is the file's width / height; --s nudges a square mark up so the set reads as even. */
.jr-funds__mark { display: flex; align-items: center; height: 76px; margin: 0 0 var(--space-5); }
.jr-funds__logo { display: block; height: calc(44px * var(--s, 1)); max-height: 76px; max-width: 100%; aspect-ratio: var(--ar, 3); background: var(--ink-heading); -webkit-mask: var(--src) left center / contain no-repeat; mask: var(--src) left center / contain no-repeat; }
.jr-funds__more { margin: auto 0 0; padding-top: var(--space-5); color: var(--ink-muted); }
@media (max-width: 1080px) { .jr-funds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .jr-funds { grid-template-columns: 1fr; } .jr-funds__card { min-height: 0; } .jr-funds__role { min-height: 0; } }


/* ---------- The Library as the agency's direction draws it (Faymous Brands, Oct 2026): the hero over Joanna's shelves, and one collection with three filters. */
.jr-libhero { position: relative; overflow: hidden; container-type: inline-size; min-height: clamp(560px, 52cqw, 820px); display: flex; flex-direction: column; background: #0f1f10; color: var(--seed-paper); }
.jr-libhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 100%; }
.jr-libhero--duotone .jr-libhero__img { filter: grayscale(1) contrast(1.05) brightness(.8); }
.jr-libhero--duotone::before { content: ""; position: absolute; inset: 0; background: var(--garden-green); mix-blend-mode: multiply; opacity: .85; z-index: 1; }
.jr-libhero__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 24, 11, .82) 0%, rgba(10, 24, 11, .55) 38%, rgba(10, 24, 11, .05) 70%), linear-gradient(0deg, rgba(10, 24, 11, .35) 0%, rgba(10, 24, 11, 0) 35%); }
.jr-libhero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; width: 100%; padding-bottom: var(--space-8); }
.jr-libhero__nav { padding-top: var(--space-5); }
.jr-libhero .jr-nav__home { color: var(--marigold); }
.jr-libhero .jr-nav__links a { color: var(--seed-paper); }
.jr-libhero .jr-nav__links a[aria-current] { color: var(--marigold); text-decoration: none; }
.jr-libhero .jr-nav__links li + li::before { background: var(--seed-paper); opacity: .4; }
.jr-libhero__text { margin-top: auto; padding-top: var(--space-10); max-width: 30em; }
.jr-libhero__eyebrow { margin: 0 0 var(--space-4); color: var(--seed-paper); opacity: .8; text-transform: uppercase; letter-spacing: .2em; }
.jr-libhero__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(56px, 8.6cqw, 132px); line-height: .95; color: var(--marigold); max-width: 5.2em; text-wrap: balance; }
.jr-libhero__rule { display: block; width: 40px; height: 1px; background: var(--marigold); margin: var(--space-5) 0; }
.jr-libhero__sub { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.7cqw, 24px); line-height: 1.3; color: var(--seed-paper); max-width: 22em; }
.jr-libhero__star { margin-top: var(--space-7); display: block; }
.jr-collection { padding-top: var(--space-8); padding-bottom: var(--space-10); }
.jr-collection__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-7); margin-bottom: var(--space-8); padding-bottom: var(--space-5); border-bottom: var(--border-hairline) solid var(--gold); }
.jr-collection__intro { margin: 0; max-width: 24em; color: var(--ink); }
.jr-collection__filters { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.jr-collection__filter { background: none; border: 0; padding: 6px 0; margin: 0; color: var(--ink-muted); text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; font: inherit; }
.jr-collection__filter:hover { color: var(--ink); }
.jr-collection__filter--on { color: var(--marigold); border-bottom-color: var(--marigold); }
.jr-collection__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-9) var(--space-7); margin: 0; padding: 0; list-style: none; align-items: start; }
.jr-collection__empty { margin: 0; color: var(--ink-muted); }
.jr-entry__link { color: inherit; text-decoration: none; display: block; }
.jr-entry__link:hover .jr-entry__title { text-decoration: underline; text-underline-offset: 4px; }
.jr-entry__visual { margin-bottom: var(--space-4); }
.jr-entry__visual .jr-book__cover { margin-bottom: 0; max-width: 240px; }
.jr-entry__tile { display: block; width: 100%; max-width: 240px; aspect-ratio: 1; border-radius: var(--radius-sm); object-fit: cover; }
.jr-entry__tile--type { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 10% 10%; font-family: var(--font-serif); box-sizing: border-box; container-type: inline-size; }
.jr-entry__tile--type::before { content: ""; position: absolute; inset: 8px; border: var(--border-hairline) solid var(--gold); border-radius: 4px; pointer-events: none; }
.jr-entry__tile-show { font-size: clamp(12px, 11cqw, 22px); line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; }
.jr-entry__tile-ring { align-self: flex-end; width: 28%; aspect-ratio: 1; border-radius: 50%; border: 2px solid currentColor; box-shadow: inset 0 0 0 6px transparent, inset 0 0 0 7px currentColor; opacity: .85; }
.jr-entry__work { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: var(--border-hairline) solid var(--gold); box-sizing: border-box; }
.jr-entry__work--placeholder { display: flex; align-items: flex-end; padding: var(--space-4); background-color: var(--gold); background-size: cover; background-position: center; color: var(--black); }
.jr-entry__work--placeholder .label { background: var(--seed-paper); padding: 4px 8px; border-radius: 4px; text-transform: uppercase; }
.jr-entry__meta { margin: 0 0 var(--space-1); color: var(--ink-muted); }
.jr-entry__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--ink-heading); }
.jr-entry__line { margin: var(--space-3) 0 0; font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--ink); max-width: 20em; }
.jr-entry__line::before { content: ""; display: block; width: 24px; height: 1px; background: var(--marigold); margin-bottom: var(--space-3); }
@media (max-width: 900px) { .jr-collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .jr-libhero { min-height: 560px; }
  .jr-libhero__title { font-size: clamp(52px, 17cqw, 72px); }
  .jr-libhero__sub { font-size: 18px; }
  .jr-collection__head { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .jr-collection__grid { gap: var(--space-8) var(--space-5); }
  .jr-entry__title { font-size: 21px; }
  .jr-entry__line { font-size: 17px; }
}
@media (max-width: 480px) {
  .jr-collection__filters { gap: 14px; }
  .jr-collection__filter { font-size: 12px; padding: 4px 0; }
  .jr-collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-4); }
  .jr-entry__visual .jr-book__cover, .jr-entry__tile { max-width: none; }
  .jr-entry__title { font-size: 18px; }
  .jr-entry__line { font-size: 15px; }
  .jr-entry__meta { font-size: 11px; }
}

/* Change Model energy (Oct 2026): the two marigold arcs surge each turn; sparks, the nucleus ripple and the Harvest glow are SVG animations drawn by ChangeModel and ChangeModelVertical. */
.jr-cm__ring--surge { animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
.jr-cm__spark { stroke: var(--surface); paint-order: stroke; }
.jr-cm__spark--green { fill: var(--garden-green); }
.jr-cm__spark--marigold { fill: var(--marigold); }
.jr-cm__ripple, .jr-cm__glow { fill: none; stroke: var(--marigold); }
.jr-cm-wrap--still .jr-cm__fx, .jr-cmv-wrap--still .jr-cm__fx { display: none; }
@media (prefers-reduced-motion: reduce) { .jr-cm__fx { display: none; } }

/* ---------- Catalytic: "Her role is catalytic:" as a headline on its own line, the Change Model's turbine turning slowly
   beside it, and the four phrases spinning out of it one after another, settling in gold (Danielle, Nov 2, 2026; home and
   Collaboration). Without the reveal script, or with reduced motion, the phrases simply sit in place. */
.jr-catalytic__inner { padding-top: var(--space-10); padding-bottom: var(--space-10); }
[data-theme="garden"] + .jr-catalytic[data-theme="garden"] .jr-catalytic__inner { padding-top: var(--space-2); }
.jr-catalytic__line { margin: 0; font-family: var(--font-serif); font-weight: 400; }
.jr-catalytic__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .28em; font-size: clamp(40px, 5.4vw, 80px); line-height: 1.05; color: var(--ink-heading); }
.jr-catalytic__swirl { display: block; width: 1.3em; height: 1.3em; flex: none; overflow: visible; margin-left: .06em; }
.jr-catalytic__turbine { transform-box: view-box; transform-origin: 100px 100px; animation: jr-cm-turn 12s linear infinite; }
.jr-catalytic__core { fill: none; stroke: var(--marigold); stroke-width: 2; opacity: .55; }
.jr-catalytic__phrases { display: grid; grid-template-columns: repeat(4, minmax(min-content, 1fr)); gap: var(--space-5) var(--space-6); margin-top: var(--space-8); font-style: italic; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.12; color: var(--marigold); }
[data-theme="paper"] .jr-catalytic__phrases { color: var(--gold); }
.jr-catalytic__phrases { position: relative; }
.jr-catalytic__phrase { display: block; }
.jr-catalytic__and { color: var(--ink-heading); }
/* The reveal: a script measures where each phrase sits relative to the turbine (--fx, --fy) and arms the band; once
   the band is in view, each phrase leaves the turbine spinning and settles in its place, one after another. */
.jr-catalytic--armed .jr-catalytic__phrase { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(-200deg) scale(.12); }
.jr-catalytic--armed.is-inview .jr-catalytic__phrase { opacity: 1; transform: none; transition: transform 1.2s cubic-bezier(.2, .75, .2, 1), opacity .5s ease; transition-delay: calc(.35s + var(--i, 0) * .5s); }
/* Tablets: two columns, so every phrase keeps its last two words together without crowding (Nov 10, 2026). */
@media (min-width: 761px) and (max-width: 1100px) {
  .jr-catalytic__phrases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .jr-catalytic__inner { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .jr-catalytic__phrases { grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-6); }
  .jr-catalytic__head { flex-wrap: nowrap; font-size: min(40px, 9.6vw); }
  .jr-catalytic__swirl { width: 1.05em; height: 1.05em; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-catalytic__turbine { animation: none; }
  .jr-catalytic--armed .jr-catalytic__phrase { opacity: 1; transform: none; transition: none; }
}

/* site (site/site.css) */
/* Site-only rules, on top of the design system's tokens and components. Keep this short:
   anything that is part of the look belongs in the design system, not here. */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--seed-paper); color: var(--black); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
main { display: block; }
a { color: var(--garden-green); }
a:hover { color: var(--black); }

/* Keyboard users can jump past the navigation. */
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--seed-paper); color: var(--garden-green); font-family: var(--font-sans); font-size: 15px; }
.skip-link:focus { left: 16px; }

/* The home offering cards link to their pages through their titles. */
.jr-card h3 a { color: inherit; text-decoration: none; }
.jr-card h3 a:hover, .jr-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* The Change Model reveal waits until the model scrolls into view (site.js adds .is-inview).
   Without JavaScript, or with reduced motion, it plays as the design system defines it. */
.js-io .jr-cm-wrap--animate:not(.is-inview) .jr-cm__shapes,
.js-io .jr-cm-wrap--animate:not(.is-inview) .jr-cm__rings,
.js-io .jr-cm-wrap--animate:not(.is-inview) .jr-cm .jr-cm__label,
.js-io .jr-cmv-wrap--animate:not(.is-inview) .jr-cmv { animation-play-state: paused; }

/* Collection filters (Library, once it switches to the collection) hide entries with [hidden]. */
.jr-collection__grid > li[hidden] { display: none; }

/* Phones: navigation and footer links get 44px-tall tap targets and a slightly larger size. */
@media (max-width: 600px) {
  .jr-nav__links { font-size: 14px; row-gap: 0; }
  .jr-nav__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .jr-footer__links { row-gap: 0; }
  .jr-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The LinkedIn icon in the closing band keeps its size but gets a 44px tap area. */
.jr-cta__linkedin { box-sizing: content-box; padding: 6px; margin: -6px; }

/* Home offering cards: the whole card opens its page, not only the title. */
.jr-card { position: relative; }
.jr-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.jr-card:hover h3 a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.jr-card h3 a:focus-visible { outline: none; }
.jr-card:focus-within { outline: 2px solid var(--garden-green); outline-offset: 4px; }

/* Home offering cards: four across from 1100px, two across from 721px, one column below. */
#offerings .jr-practice__grid { grid-template-columns: 1fr; }
@media (min-width: 721px) { #offerings .jr-practice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #offerings .jr-practice__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Cards side by side keep their photos level when one title wraps and another does not. */
#offerings .jr-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
#offerings .jr-cmz { align-self: start; }

/* Collaborate: a service's single photo at its own proportions, up to 640px, rounded and captioned like the PhotoGrid
   tiles. Until a photo arrives, a placeholder box of the same size holds its place. */
.jr-photo { margin: 0; max-width: 640px; }
.jr-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.jr-photo__placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: var(--space-6); box-sizing: border-box; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); color: var(--ink-muted); text-align: center; }
.jr-photo figcaption { margin-top: var(--space-2); color: var(--ink-muted); font-family: var(--font-sans); }

/* Inner pages open with the nav bar (the JR monogram at the left), so the title takes the space under it. */
.jr-page-hero--bar .jr-page-hero__title { margin-top: var(--space-8); }
@media (max-width: 600px) { .jr-page-hero--bar .jr-page-hero__title { margin-top: var(--space-6); } }

/* The address under each email button (added by site.js), for visitors with no mail app set up. */
.jr-cta__mail { display: flex; flex-direction: column; align-items: flex-start; }
.jr-mail-note { margin: var(--space-3) 0 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.4; color: inherit; }
.jr-mail-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Library rooms (content/library.json, under rooms): previews show them while draftMode is "rooms". */
/* The five room links, as tiles that jump to each room: five across on wide screens, three then two on tablets,
   and one full-width row each on phones. */
.jr-rooms-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin: 0 auto; padding-bottom: var(--space-9); list-style: none; }
.jr-rooms-nav__list li { display: flex; flex: 1 1 0; min-width: 0; }
.jr-rooms-nav__list a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 148px; padding: var(--space-5) var(--space-4); box-sizing: border-box; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); font-family: var(--font-serif); font-size: 24px; line-height: 1.15; color: var(--ink-heading); text-align: center; text-wrap: balance; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.jr-rooms-nav__list a::after { content: "↓" / ""; font-family: var(--font-sans); font-size: 16px; line-height: 1; }
.jr-rooms-nav__list a:hover, .jr-rooms-nav__list a:focus-visible { background: var(--garden-green); border-color: var(--garden-green); color: var(--seed-paper); }
.jr-rooms-nav__list a:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .jr-rooms-nav__list a { transition: none; } }
@media (max-width: 1099px) { .jr-rooms-nav__list li { flex: 0 1 calc((100% - 2 * var(--space-4)) / 3); } }
@media (max-width: 720px) {
  .jr-rooms-nav__list { flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-8); }
  .jr-rooms-nav__list li { flex: none; }
  .jr-rooms-nav__list a { flex-direction: row; justify-content: space-between; gap: var(--space-4); min-height: 60px; padding: var(--space-3) var(--space-5); font-size: 21px; text-align: left; }
}
.jr-room__body { padding-bottom: var(--space-10); }
.jr-room--lead .jr-room__body { padding-bottom: 0; }
.jr-room__question { margin: 0 0 var(--space-6); max-width: 22em; color: var(--ink-lead); }
.jr-room__intro { max-width: 34em; color: var(--ink); }
.jr-room__intro p { margin: 0; }
.jr-room__intro .jr-review-label { display: inline-block; margin: 0 0 var(--space-3); padding: 3px 8px; border-radius: var(--radius-sm); background: var(--marigold); color: var(--black); }
.jr-room__subtitle { margin: 0 0 var(--space-6); color: var(--ink-heading); }
.jr-room__text { margin: 0; max-width: 30em; color: var(--ink); }

/* The reading shelf. Joanna's line covers a book's cover on hover, on keyboard focus, or when the book is tapped
   (each book takes focus). */
.jr-shelf--reveal .jr-book { cursor: pointer; }
.jr-shelf--reveal .jr-book:focus { outline: none; }
.jr-shelf--reveal .jr-book:focus-visible { outline: 2px solid var(--marigold); outline-offset: 6px; }
.jr-shelf--reveal .jr-book__note { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 2 / 3; margin: 0; display: flex; align-items: center; justify-content: center; padding: 12%; box-sizing: border-box; border-radius: var(--radius-sm); background: rgba(15, 31, 16, .92); color: var(--seed-paper); font-family: var(--font-serif); font-size: 20px; line-height: 1.2; text-align: center; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.jr-shelf--reveal .jr-book:hover .jr-book__note, .jr-shelf--reveal .jr-book:focus .jr-book__note { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .jr-shelf--reveal .jr-book__note { transition: none; } }
@media (max-width: 720px) { .jr-shelf--reveal .jr-book__note { font-size: 17px; } }
.jr-line__kind { display: block; margin-bottom: var(--space-2); text-transform: uppercase; color: var(--ink-muted); }
.jr-line__text { display: block; }
.jr-shelf--reveal .jr-book__note { flex-direction: column; }
.jr-shelf--reveal .jr-book__note .jr-line__kind { color: var(--marigold-tint); }
.jr-room-shelf .jr-shelf { padding-top: var(--space-8); }
.jr-room-shelf .jr-book__relation { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: var(--border-hairline) dashed var(--gold); border-radius: var(--radius-sm); color: var(--ink-muted); font-style: italic; }

/* In conversation: the three pairs side by side (stacked on phones). */
.jr-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.jr-pairs__item { padding: var(--space-5); border: var(--border-hairline) solid var(--gold); border-radius: var(--radius-md); }
.jr-pairs__pair { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: 24px; line-height: 1.15; color: var(--ink-heading); }
.jr-pairs__line { margin: 0; color: var(--ink); }
@media (max-width: 720px) { .jr-pairs { grid-template-columns: 1fr; } }

/* The Bookshelf: a placeholder for the shelves photograph with numbered hotspots, and their key below. */
.jr-shelfphoto { margin: 0 0 var(--space-7); }
.jr-shelfphoto__frame { position: relative; aspect-ratio: 2 / 1; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(251, 251, 247, .05) 14px 28px); }
.jr-shelfphoto__label { margin: var(--space-2) 0 0; color: var(--ink-muted); }
.jr-hotspot, .jr-hotspots__n { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--marigold); color: var(--black); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; }
.jr-hotspot { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(255, 175, 0, .3); }
a.jr-hotspot:hover, a.jr-hotspot:focus-visible { color: var(--black); outline: 2px solid var(--seed-paper); outline-offset: 3px; }
.jr-hotspots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); margin: 0; padding: 0; list-style: none; }
.jr-hotspots__item { display: grid; grid-template-columns: 32px 1fr; column-gap: var(--space-3); align-items: start; }
.jr-hotspots__n { grid-row: span 3; width: 28px; height: 28px; font-size: 13px; }
.jr-hotspots__name, .jr-hotspots__text, .jr-hotspots__status { grid-column: 2; margin: 0; }
.jr-hotspots__name { font-family: var(--font-serif); font-size: 20px; line-height: 1.25; color: var(--ink-heading); }
.jr-hotspots__name a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.jr-hotspots__text { margin-top: 2px; color: var(--ink); }
.jr-hotspots__status { margin-top: 2px; color: var(--ink-muted); }
@media (max-width: 720px) { .jr-hotspots { grid-template-columns: 1fr; } .jr-hotspot { width: 26px; height: 26px; font-size: 12px; box-shadow: 0 0 0 3px rgba(255, 175, 0, .3); } }

/* The Walls: one placeholder tile per work, four across (two on phones). */
.jr-walls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); margin: 0; padding: 0; list-style: none; }
.jr-walls__box { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; padding: var(--space-4); box-sizing: border-box; border: var(--border-hairline) solid var(--line); border-radius: var(--radius-md); font-family: var(--font-serif); font-size: 20px; line-height: 1.2; color: var(--ink-heading); text-align: center; }
.jr-walls__status { margin: var(--space-2) 0 0; color: var(--ink-muted); }
@media (max-width: 720px) { .jr-walls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jr-walls__box { font-size: 17px; } }

/* The pinned nav (site.js): the page's own bar, copied into a paper strip fixed at the top once the bar has scrolled
   away (Danielle, Nov 2, 2026: the nav stays at the top as you scroll). */
.jr-pinnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--seed-paper-tint, #fbfbf7); border-bottom: var(--border-hairline) solid var(--line); box-shadow: 0 6px 24px rgba(20, 30, 18, .08); transform: translateY(-110%); transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.jr-pinnav.is-on { transform: none; }
.jr-pinnav .jr-nav { padding-top: 10px; padding-bottom: 10px; }
.jr-pinnav .jr-nav__home svg, .jr-pinnav .jr-nav__home img { height: 32px; width: auto; }
@media (prefers-reduced-motion: reduce) { .jr-pinnav { transition: none; } }

/* Collaboration: each service's zone of the Change Model under its lead line, and its For / Helps you / Format lines
   above the paragraph (Danielle, Nov 2, 2026), so the page reads as one system with the home cards. */
.jr-page-section__zone { margin: var(--space-2) 0 var(--space-6); max-width: 260px; }
.jr-service-lines { margin: 0 0 var(--space-6); padding: var(--space-4) 0 0; border-top: var(--border-hairline) solid var(--line); }
.jr-service-lines__row { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--space-4); padding: 0 0 var(--space-3); }
.jr-service-lines dt { margin: 0; padding-top: .35em; color: var(--ink-muted); text-transform: uppercase; }
.jr-service-lines dd { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.5; color: var(--ink); }
@media (max-width: 600px) { .jr-service-lines__row { grid-template-columns: 1fr; gap: 2px; } .jr-service-lines dd { font-size: 16px; } }

/* Capital: half the white space above Fund of Funds (Danielle, Nov 5, 2026: 216px to 108px on desktop, 136px to 68px on phones). */
.jr-statement-band--tight .jr-statement { padding-bottom: 52px; }
@media (max-width: 600px) { .jr-statement-band--tight .jr-statement { padding-bottom: 28px; } }

/* Capital, The funds: its one-line intro may run the full width, so it stays on one line on desktop (Arthur, Nov 10, 2026). */
.jr-page-section__intro--wide { max-width: none; }