/* ==============================================================
   BOLD MOVES — UMBC Strategic Plan microsite
   Hub: page-strategic-plan.php · Pillars: page-strategic-plan-pillar.php
   Namespace: sb- (plus wc- letters/charter/values, wj- imagine carousel)

   GENERATED BY MERGE, then maintained by hand from here on.
   Sources: index.html's inline <style> (canonical for everything shared)
            + the 56 rules that existed only in pillar.css
            + the port additions at the foot of this file.

   The merge dropped 112 rules that pillar.css had copied verbatim from
   index.html. The only genuine conflict was --pad, which pillar pages set
   tighter; that is now a scoped override, not a second :root.

   Fonts: Antique Olive Nord (display) · EB Garamond (serif) · Inter (body),
   all self-hosted in the theme's /fonts/ folder. No Google Fonts, no base64.
   ============================================================== */
:root{
  --gold:#fdb515;
  --umbc-red:#da2128;
  --umbc-teal:#007176;
  --accent:var(--umbc-teal);   /* type accent on cream — swap to var(--umbc-red) for red */
  --gold-deep:var(--accent);   /* legacy name; gold fails as small type on cream, so the accent carries type */
  --ink:#161310;
  --ink-soft:#565049;
  --ink-faint:#8b847a;
  --ink-faint-strong:#6a645b;   /* faint text that failed WCAG AA (4.5:1) on band/cream/paper — captions, value tags, carousel count */
  --cream:#f7f3ea;          /* page ground */
  --paper:#fffdf8;          /* cards / raised */
  --band:#efe8da;           /* alternating band */
  --rule:#ddd4c2;
  --black:#141210;
  --white:#fff;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-serif:"EB Garamond","Garamond","Georgia",serif;
  --font-display:"Antique Olive Nord","Inter",system-ui,sans-serif;
  --easing:cubic-bezier(0.22,1,0.36,1);
  --content:1180px;
  --wide:1360px;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --pad:clamp(4rem,8vw,7.5rem);
  /* Type scale — every text style uses one of these (audit 2026-09-16) */
  --fs-body:clamp(1rem,1.3vw,1.125rem);          /* 18px  Inter running copy */
  --fs-serif-lead:clamp(1.625rem,2.9vw,2.5rem);  /* 40px  serif openers ("From the beginning", North Star, pillar name) */
  --fs-serif-feature:clamp(1.375rem,2.3vw,1.9rem);/* 30px serif statements (carousel, closing note, vision, goal statements) */
  --fs-serif-item:clamp(1.125rem,1.7vw,1.5rem);  /* 24px  serif quotes & list titles (letters, pillar names, appendices, pillar mission) */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;}
/* clip, not hidden: `overflow-x:hidden` computes to `overflow:hidden auto`,
   which makes <body> a scroll container. The page scrolls on <html>, so the
   sticky nav was sticking to a box that never scrolls and simply scrolled
   away — taking the pillar subnav's first line under it. `clip` clips
   without creating a scroll container, so sticky works as designed. */
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}
.sb-wrap{max-width:var(--wide);margin:0 auto;width:100%;}
.sb-wrap--wide{max-width:var(--wide);}
.sb-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:.75rem 1.25rem;font-weight:700;z-index:200;}
.sb-skip:focus{left:1rem;top:1rem;}

/* shared bits */
.sb-eyebrow{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);}
.sb-rule{width:64px;height:3px;background:var(--gold);border:0;margin:1.5rem 0;}
.sb-kicker-num{font-family:var(--font-display);color:var(--gold);}

/* ══════════════ STICKY NAV ══════════════ */
.sb-nav{position:sticky;top:0;z-index:100;background:rgba(247,243,234,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule);}
.sb-nav__inner{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;display:flex;align-items:center;gap:1.25rem;padding:.7rem var(--gutter);}
.sb-nav__brand{display:flex;align-items:center;gap:.7rem;}
.sb-nav__logo{height:1.55rem;width:auto;display:block;}
.sb-nav__brand-label{font-family:var(--font-body);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-left:.7rem;border-left:1px solid var(--rule);}
.sb-nav__links{margin-left:auto;display:flex;gap:1.75rem;}
.sb-nav__links a{font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);padding:.35rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.sb-nav__links a:hover,.sb-nav__links a:focus-visible{color:var(--ink);border-color:var(--gold);outline:none;}
.sb-nav__cta{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--ink);padding:.55em 1.1em;border-radius:2px;transition:background .15s,color .15s;}
.sb-nav__cta:hover,.sb-nav__cta:focus-visible{background:var(--ink);color:var(--cream);outline:none;}
@media(max-width:860px){.sb-nav__links{display:none;}}
.sb-nav__has-menu{position:relative;display:inline-flex;align-items:center;}
.sb-nav__trigger{display:inline-flex;align-items:center;gap:.35rem;}
.sb-nav__caret{display:inline-block;width:.85em;height:.85em;flex:none;color:var(--gold-deep);transition:transform .18s var(--easing);}
html:not(.js) .sb-nav__has-menu:hover .sb-nav__caret,html:not(.js) .sb-nav__has-menu:focus-within .sb-nav__caret,.sb-nav__has-menu.is-open .sb-nav__caret{transform:rotate(180deg);}
.sb-nav__mgroup .m-verb{display:block;font-family:var(--font-display);font-size:.9rem;letter-spacing:.01em;color:var(--ink);}
.sb-nav__mgroup .m-sub{display:block;font-size:.72rem;font-weight:500;color:var(--ink-faint);margin-top:.1rem;}
/* The home page's Read the Plan dropdown (restored 2026-09-18). */
.sb-nav__menu{position:absolute;top:calc(100% + .55rem);left:50%;transform:translateX(-50%) translateY(6px);min-width:320px;background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);border-radius:0 0 5px 5px;box-shadow:0 22px 48px -20px rgba(0,0,0,.4);padding:.5rem;opacity:0;visibility:hidden;transition:opacity .16s var(--easing),transform .16s var(--easing),visibility .16s;z-index:120;}
/* With JS, .is-open alone decides (hover, click, Escape and outside-click are
   handled in strategic-plan.js) — otherwise :focus-within would hold the menu
   open after a click meant to close it. Without JS, hover and keyboard focus
   open it. */
html:not(.js) .sb-nav__has-menu:hover .sb-nav__menu,html:not(.js) .sb-nav__has-menu:focus-within .sb-nav__menu,.sb-nav__has-menu.is-open .sb-nav__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.sb-nav__menu a{display:block;padding:.6rem .8rem;border:0;border-radius:3px;color:var(--ink);}
.sb-nav__menu a:hover,.sb-nav__menu a:focus-visible{background:var(--band);outline:none;}
.sb-nav__menu .m-verb{display:block;font-family:var(--font-display);font-size:.9rem;letter-spacing:.01em;color:var(--ink);}
.sb-nav__menu .m-sub{display:block;font-size:.72rem;font-weight:500;color:var(--ink-faint);margin-top:.1rem;}
.sb-nav__menu-all{margin-top:.35rem;border-top:1px solid var(--rule);border-radius:0 0 3px 3px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);}
/* ── MOBILE NAV ── */
.sb-nav__toggle{display:none;appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;width:2.75rem;height:2.75rem;margin-left:auto;align-items:center;justify-content:center;color:var(--ink);}
.sb-nav__bars,.sb-nav__bars::before,.sb-nav__bars::after{display:block;width:1.5rem;height:2px;background:currentColor;transition:transform .25s var(--easing),background .1s;}
.sb-nav__bars{position:relative;}
.sb-nav__bars::before{content:"";position:absolute;top:-6px;left:0;}
.sb-nav__bars::after{content:"";position:absolute;top:6px;left:0;}
.sb-nav__toggle[aria-expanded="true"] .sb-nav__bars{background:transparent;}
.sb-nav__toggle[aria-expanded="true"] .sb-nav__bars::before{transform:translateY(6px) rotate(45deg);}
.sb-nav__toggle[aria-expanded="true"] .sb-nav__bars::after{transform:translateY(-6px) rotate(-45deg);}
.sb-nav__mobile{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 24px 44px -24px rgba(0,0,0,.4);padding:.25rem var(--gutter) 1.5rem;max-height:calc(100dvh - 56px);overflow-y:auto;}
.sb-nav__mobile.is-open{display:block;}
.sb-nav__mobile a{display:block;padding:.9rem 0;font-size:1.05rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--rule);}
.sb-nav__mlabel{display:block;padding:1.1rem 0 .4rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);}
.sb-nav__mgroup a{padding-left:1rem;font-family:var(--font-display);font-size:1.15rem;font-weight:400;}
.sb-nav__mcta{margin-top:1.25rem;display:inline-block;background:var(--ink);color:var(--cream)!important;padding:.9em 1.6em;border-radius:2px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:0!important;}
@media(max-width:860px){.sb-nav__toggle{display:inline-flex;}.sb-nav__cta{display:none;}}
@media(min-width:861px){.sb-nav__mobile{display:none!important;}}

/* "Read the Plan" = the pillars dropdown trigger (menu anchored right) */
.sb-nav__has-menu--cta{margin-left:1.25rem;}
.sb-nav__has-menu--cta .sb-nav__menu{left:auto;right:0;transform:translateY(6px);}
html:not(.js) .sb-nav__has-menu--cta:hover .sb-nav__menu,html:not(.js) .sb-nav__has-menu--cta:focus-within .sb-nav__menu,.sb-nav__has-menu--cta.is-open .sb-nav__menu{transform:translateY(0);}
.sb-nav__has-menu--cta .sb-nav__caret{color:inherit;}
@media(max-width:860px){.sb-nav__has-menu--cta{display:none;}}

/* ══════════════ HERO ══════════════ */
.sb-hero{padding:clamp(3.5rem,8vw,7rem) var(--gutter) clamp(2.5rem,5vw,4rem);position:relative;}
.sb-hero__inner{max-width:var(--wide);margin:0 auto;}
.sb-hero__eyebrow{margin-bottom:1.5rem;}
/* The 4rem floor used to hold on phones and clip "MOVES" past the viewport;
   the 2.75rem floor lets the 15vw scale carry down to tiny screens, so the
   widest line (MOVES) always fits and never causes horizontal scroll. */
.sb-hero__title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.75rem,15vw,13rem);line-height:.82;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);text-indent:-.055em;}
.sb-hero__title .sb-hero__moves{color:var(--ink);display:block;position:relative;}
.sb-hero__title .sb-hero__moves::after{content:"";display:block;width:min(360px,60%);height:5px;background:var(--gold);margin-top:1.25rem;}
.sb-hero__sub{font-family:var(--font-serif);font-size:clamp(1.625rem,3.35vw,2.75rem);font-style:italic;color:var(--ink-soft);line-height:1.3;margin-top:1.75rem;max-width:24ch;}
.sb-hero__meta{text-align:right;font-size:.8rem;line-height:1.9;color:var(--ink-faint);font-weight:600;letter-spacing:.04em;}
.sb-hero__meta b{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--ink);letter-spacing:0;}
@media(max-width:820px){.sb-hero__meta{text-align:left;margin-top:2rem;}}

/* ══════════════ SECTION SHELL ══════════════ */
.sb-sec{padding:var(--pad) var(--gutter);}
.sb-sec--band{background:var(--band);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.sb-sec__head{max-width:var(--wide);margin:0 auto clamp(2.5rem,5vw,4rem);}
/* --split: heading left, actions (e.g. carousel controls) aligned right on the heading baseline */
.sb-sec__head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;}
.sb-sec__num{display:inline-flex;align-items:center;gap:.85rem;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.1rem;}
.sb-sec__num::before{content:"";width:1.75rem;height:2px;background:var(--gold);flex:0 0 auto;}
.sb-h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.25rem,5vw,4rem);line-height:1.05;letter-spacing:-.01em;color:var(--ink);}
.sb-h2 em{font-style:italic;color:var(--gold-deep);}

/* editorial prose */
.sb-prose{max-width:68ch;}
.sb-prose>p{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.75;color:var(--ink-soft);margin-bottom:1.5rem;}
.sb-prose>p:first-of-type .sb-dropcap{float:left;font-family:var(--font-display);font-size:3.4em;line-height:.72;padding:.04em .1em 0 0;color:var(--gold-deep);}
.sb-prose strong{color:var(--ink);font-weight:600;}

/* ══════════════ SIXTY YEARS → THE MOMENT ══════════════ */
.sb-moment{--mspace:clamp(2rem,4vw,3rem);background:var(--ink);padding:var(--pad) var(--gutter) 0;}
.sb-moment__inner{max-width:var(--wide);margin:0 auto;padding-bottom:var(--mspace);}
.sb-moment__cols{--mgap:clamp(2rem,5vw,5rem);display:grid;grid-template-columns:1fr 1fr;gap:var(--mgap);}
.sb-moment__cols p{font-size:var(--fs-body);line-height:1.75;color:#d8d1c4;}
.sb-moment__cols p+p{position:relative;}
.sb-moment__cols p+p::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--mgap) / -2);width:1px;background:rgba(255,255,255,.14);}
@media(max-width:860px){.sb-moment__cols{grid-template-columns:1fr;--mgap:1.5rem;}.sb-moment__cols p+p::before{display:none;}}
.sb-moment__statement{margin-top:clamp(2.5rem,5vw,4rem);padding-top:var(--mspace);border-top:1px solid rgba(255,255,255,.14);position:relative;font-family:var(--font-display);font-size:clamp(1.875rem,4.6vw,4rem);line-height:1;text-transform:uppercase;color:var(--cream);}
.sb-moment__statement::before{content:"";position:absolute;top:-2px;left:0;width:64px;height:3px;background:var(--gold);}
.sb-moment__statement em{color:var(--gold);font-style:normal;}
/* The longest word (COMMITMENT) outruns the column below ~350px; the 4.6vw
   scale needs a hand on the very smallest screens. */
@media(max-width:360px){.sb-moment__statement{font-size:clamp(1.375rem,8.5vw,1.875rem);}}
/* Follow-up band: dark gray, butts directly against the black so the statement sits in equal space above and below. */
.sb-moment__follow{background:#2c2925;margin:0 calc(var(--gutter) * -1);padding:var(--mspace) var(--gutter);}
.sb-moment__follow p+p{margin-top:1em;}
.sb-moment__follow p{max-width:var(--wide);margin:0 auto;font-size:var(--fs-body);line-height:1.75;color:#d8d1c4;}
/* Commitment lede + "We imagine" anaphora */
.sb-prose p.sb-lede-serif{font-family:var(--font-serif);font-size:clamp(1.375rem,2.6vw,2.1rem);line-height:1.32;color:var(--ink);margin-bottom:1.75rem;}
/* ══════════════ INTRO LETTERS (pullquotes · from wireframe 2) ══════════════ */
.wc-letter{margin:0;border:1px solid var(--rule);background:var(--paper);transition:box-shadow .35s var(--easing);}
.wc-letter:hover{box-shadow:0 26px 50px -38px rgba(22,19,16,.45);}
.wc-letter__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.35rem 1rem;padding:1.1rem clamp(1.25rem,3vw,2rem);}
.wc-letter__from{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.wc-letter__when{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap;}
.wc-letter__seal{padding:0 clamp(1.25rem,3vw,2rem) 1.75rem;font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint-strong);} /* "— Report of the Commission, 1962" was 3.64:1 on paper */
.sb-origin{padding-top:clamp(1rem,3vw,2.5rem);}
.sb-origin__inner{max-width:var(--wide);margin:0 auto;display:grid;gap:clamp(3rem,6vw,5rem);}
.sb-origin__row{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
/* Row 2: early-years photo stack | lead-in, Kuhn letter, closing paragraph (one column, one reading line). */
.sb-origin__stack{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);}
/* Three archival prints, slightly overlapping; each opens the full photo */
.sb-archive__stack{display:flex;flex-direction:column;width:100%;max-width:480px;justify-self:center;padding:.5rem 0;}
.sb-archive__item{position:relative;margin:0;}
.sb-archive__item:nth-child(1){width:56%;z-index:1;}
.sb-archive__item:nth-child(2){width:68%;align-self:flex-end;margin-top:-20%;z-index:2;}
.sb-archive__item:nth-child(3){width:60%;margin-top:-12%;margin-left:4%;z-index:3;}
.sb-archive__item:hover,.sb-archive__item:focus-within{z-index:4;}
.sb-archive__open{display:block;cursor:zoom-in;border-radius:2px;}
.sb-archive__open:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.sb-archive__print{display:block;background:var(--paper);padding:clamp(.4rem,.8vw,.6rem);border:1px solid var(--rule);box-shadow:0 22px 44px -28px rgba(22,19,16,.6);transform:rotate(var(--tilt,0deg));transition:transform .45s var(--easing),box-shadow .45s var(--easing);}
.sb-archive__open:hover .sb-archive__print,.sb-archive__open:focus-visible .sb-archive__print{transform:rotate(0deg) scale(1.03);box-shadow:0 30px 60px -28px rgba(22,19,16,.65);}
.sb-archive__print img{display:block;width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover;filter:sepia(.14) contrast(1.03);}
@media(prefers-reduced-motion:reduce){.sb-archive__print{transition:none;}}
/* Lightbox */
.sb-lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh;margin:auto;overflow:visible;}
.sb-lightbox::backdrop{background:rgba(20,18,16,.94);}
.sb-lightbox__fig{margin:0;display:flex;flex-direction:column;align-items:center;}
.sb-lightbox__img{display:block;max-width:min(92vw,1100px);max-height:calc(92vh - 4rem);width:auto;height:auto;background:var(--paper);padding:clamp(.4rem,1vw,.75rem);}
.sb-lightbox__cap{margin-top:.9rem;font-family:var(--font-serif);font-style:italic;font-size:1.0625rem;color:#e9e2d4;text-align:center;}
.sb-lightbox__close{position:fixed;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);width:2.75rem;height:2.75rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(20,18,16,.6);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;}
.sb-lightbox__close:hover,.sb-lightbox__close:focus-visible{background:#fff;color:var(--ink);outline:none;}
@media(max-width:860px){.sb-origin__row{grid-template-columns:1fr;}}
.sb-origin__open{font-family:var(--font-serif);font-size:var(--fs-serif-lead);line-height:1.18;color:var(--ink);margin-bottom:clamp(1.25rem,2.5vw,1.75rem);}
.sb-origin__p{font-size:var(--fs-body);line-height:1.75;color:var(--ink-soft);}
.wc-letter__paper{display:grid;grid-template-rows:1fr;}
html.js .wc-letter__paper{grid-template-rows:0fr;transition:grid-template-rows .8s var(--easing);}
html.js .wc-letter.is-open .wc-letter__paper{grid-template-rows:1fr;}
.wc-letter__paper>div{overflow:hidden;}
.wc-letter__quote{margin:0;padding:clamp(1rem,2.5vw,1.75rem) clamp(1.25rem,3vw,2rem) clamp(1.25rem,3vw,2rem);font-family:var(--font-serif);font-size:var(--fs-serif-item);line-height:1.55;color:var(--ink);}

/* ══════════════ COMMITMENT · THE OATH (from wireframe 1) ══════════════ */
.wa-oath{padding:var(--pad) var(--gutter);}
.wa-oath__plate{position:relative;max-width:860px;margin:0 auto;background:var(--paper);border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:6px;padding:clamp(2.75rem,6vw,4rem) clamp(1.5rem,5vw,3.5rem);text-align:center;}
.wa-oath__tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--gold);padding:.5em 1.1em;margin-bottom:2rem;}
.wa-oath__lead{margin:0 auto 2.5rem;font-family:var(--font-serif);font-size:clamp(1.3rem,2.5vw,1.9rem);line-height:1.5;color:var(--ink);max-width:46ch;}
.wa-oath__clauses{margin:0 auto;font-family:var(--font-serif);font-size:clamp(1.0625rem,1.7vw,1.25rem);line-height:1.6;color:var(--ink-soft);max-width:60ch;text-align:left;}
.wa-oath__clauses .cl{display:block;position:relative;padding:.6rem 0 .6rem 3rem;border-top:1px solid var(--rule);}
.wa-oath__clauses .cl::before{position:absolute;left:0;top:.6rem;bottom:.6rem;display:flex;align-items:center;width:2.1rem;font-family:var(--font-display);font-size:.95rem;color:var(--gold-deep);}
.wa-oath__clauses .cl:nth-child(1)::before{content:"I";}
.wa-oath__clauses .cl:nth-child(2)::before{content:"II";}
.wa-oath__clauses .cl:nth-child(3)::before{content:"III";}
.wa-oath__clauses .cl:nth-child(4)::before{content:"IV";}
.wa-oath__clauses .cl:nth-child(5)::before{content:"V";}

/* ══════════════ WE IMAGINE CAROUSEL (rows from wireframe 3) ══════════════ */
.wj-carousel__inner{max-width:var(--wide);margin:0 auto;}
.wj-carousel__viewport{overflow:hidden;touch-action:pan-y;transition:height .45s var(--easing);}
.wj-carousel__track{display:flex;align-items:flex-start;transition:transform .6s var(--easing);}
.wj-slide{flex:0 0 100%;min-width:0;}
.wj-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,4rem);align-items:center;}
.wj-row--flip{grid-template-columns:.95fr 1.05fr;}
.wj-row--flip .wj-row__media{order:-1;}
@media(max-width:820px){.wj-row,.wj-row--flip{grid-template-columns:1fr;align-items:start;}.wj-row__media{order:-1;}}
.wj-row__text{margin:0;font-family:var(--font-serif);font-size:var(--fs-serif-feature);line-height:1.42;color:var(--ink);max-width:34ch;}
.wj-row__media .sb-photo{aspect-ratio:4/3;}
/* post-section note — closes the Introduction inside the carousel band */
.wj-carousel__note{position:relative;max-width:var(--wide);margin:clamp(3rem,6vw,4.5rem) auto 0;padding-top:clamp(1.5rem,3vw,2rem);font-family:var(--font-serif);font-size:var(--fs-serif-feature);line-height:1.5;color:var(--ink);}
.wj-carousel__note::before{content:"";position:absolute;top:0;left:0;width:64px;height:3px;background:var(--gold);}
@supports(text-wrap:pretty){.wj-carousel__note{text-wrap:pretty;}}
.wj-carousel__controls{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.25rem);}
.wj-carousel__btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,color .15s;}
.wj-carousel__btn svg{width:1.25rem;height:1.25rem;}
.wj-carousel__btn:hover{background:var(--ink);color:var(--cream);}
.wj-carousel__btn:focus-visible,.wj-carousel__dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.wj-carousel__dots{display:flex;gap:.25rem;}
.wj-carousel__dot{appearance:none;-webkit-appearance:none;position:relative;width:1.75rem;height:2.75rem;border:0;background:transparent;cursor:pointer;}
.wj-carousel__dot::after{content:"";position:absolute;left:.25rem;right:.25rem;top:50%;height:3px;margin-top:-1.5px;background:var(--rule);transition:background .2s;}
.wj-carousel__dot:hover::after{background:var(--ink-faint);}
.wj-carousel__dot[aria-current="true"]::after{background:var(--gold);}
/* Phones: the dots are too small to be reliable touch targets, so they are
   hidden and Back / Next split the row — each is a full-size tap target. */
@media(max-width:560px){.wj-carousel__controls{width:100%;gap:.75rem;}.wj-carousel__dots{display:none;}.wj-carousel__btn{flex:1 1 0;min-width:0;width:auto;height:2.75rem;}}
/* ══════════════ VISION & VALUES ══════════════ */
/* two columns: vision (left) · core values (right); inclusive-excellence text flows in two columns below */
.sb-vv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start;}
@media(max-width:900px){.sb-vv{grid-template-columns:1fr;}}
.sb-vv__p{font-size:var(--fs-body);line-height:1.75;color:var(--ink-soft);}
/* the charter — vision statement plate (wireframe 2) */
.wc-charter{position:relative;margin-top:clamp(1.75rem,3.5vw,2.5rem);background:var(--paper);border:1px solid var(--ink);padding:clamp(2.5rem,5vw,3.5rem) clamp(1.5rem,4vw,3rem);}
.wc-charter::before,.wc-charter::after{content:"";position:absolute;width:1.6rem;height:1.6rem;border:2px solid var(--gold);}
.wc-charter::before{top:.9rem;left:.9rem;border-right:0;border-bottom:0;}
.wc-charter::after{bottom:.9rem;right:.9rem;border-left:0;border-top:0;}
.wc-charter__head{text-align:center;font-size:.64rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.75rem;}
.wc-charter__head b{display:block;color:var(--gold-deep);margin-top:.45rem;}
.wc-charter__text{text-align:center;font-family:var(--font-serif);font-size:var(--fs-serif-feature);line-height:1.45;color:var(--ink);margin:0 auto;}
.wc-charter__text b{color:var(--gold-deep);font-weight:600;}
/* numbered values ledger (wireframe 2) */
.wc-values{list-style:none;margin-top:clamp(1.75rem,3.5vw,2.5rem);border-top:2px solid var(--ink);}
.wc-val{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(.75rem,2vw,1.75rem);padding:clamp(1.05rem,2.4vw,1.5rem) 0;border-bottom:1px solid var(--rule);}
.wc-val__num{font-family:var(--font-display);font-size:.95rem;color:var(--gold-deep);}
.wc-val__name{font-family:var(--font-serif);font-size:clamp(1.3rem,2.2vw,1.875rem);color:var(--ink);}
.wc-val__tag{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint-strong);} /* "Core value" tags were 3.34:1 on cream */
.wc-val--lead .wc-val__name,.wc-val--lead .wc-val__tag{color:var(--gold-deep);}
.sb-ie{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule);columns:2;column-gap:clamp(2rem,5vw,5rem);}
@media(max-width:900px){.sb-ie{columns:1;}}
.sb-ie p{font-size:var(--fs-body);line-height:1.75;color:var(--ink-soft);margin-bottom:1.25rem;break-inside:avoid;}
.sb-ie p b{color:var(--ink);font-weight:600;}

/* ══════════════ PILLARS (report index) ══════════════ */
.sb-pillars__list{max-width:var(--wide);margin:0 auto;border-top:2px solid var(--ink);}
.sb-pillar{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(1.75rem,4vw,3rem) 0;border-bottom:1px solid var(--rule);position:relative;}
@media(max-width:760px){.sb-pillar{grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start;}}
/* hover: gentle drift + gold rule drawn along the bottom — transforms only, so nothing reflows */
.sb-pillar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--easing);}
.sb-pillar__lead{transition:transform .6s var(--easing);}
.sb-pillar:hover::after,.sb-pillar:focus-within::after{transform:scaleX(1);}
.sb-pillar:hover .sb-pillar__lead,.sb-pillar:focus-within .sb-pillar__lead{transform:translateX(.375rem);}
.sb-pillar:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px;}
.sb-pillar__index{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.6rem;}
.sb-pillar__verb{font-family:var(--font-display);font-size:clamp(2.25rem,6vw,4.75rem);line-height:.9;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;}
.sb-pillar__name{font-family:var(--font-serif);font-size:var(--fs-serif-item);color:var(--black);}
.sb-pillar__mission{font-size:var(--fs-body);line-height:1.65;color:var(--ink-soft);max-width:52ch;margin-top:.9rem;}
.sb-pillar__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:3px;}
.sb-pillar__link .sb-arrow{transition:transform .45s var(--easing);}
.sb-pillar:hover .sb-arrow,.sb-pillar:focus-within .sb-arrow{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){.sb-pillar::after,.sb-pillar__lead,.sb-pillar__link .sb-arrow{transition:none;}}

/* ══════════════ PROCESS ══════════════ */
.sb-figs{max-width:var(--wide);margin:0 auto clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink);}
@media(max-width:820px){.sb-figs{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.sb-figs{grid-template-columns:1fr;}}
.sb-fig{padding:1.75rem 1.5rem 1.75rem 0;border-right:1px solid var(--rule);}
.sb-fig:last-child{border-right:0;}
.sb-fig__num{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,3.5rem);line-height:1;color:var(--ink);}
.sb-fig__label{margin-top:.6rem;font-size:.8125rem;line-height:1.4;color:var(--ink-soft);max-width:22ch;}
.sb-dev{max-width:var(--wide);margin:0 auto;display:grid;grid-template-columns:minmax(180px,1fr) 4fr;gap:clamp(2rem,5vw,5rem);align-items:start;}
@media(max-width:860px){.sb-dev{grid-template-columns:1fr;}}
.sb-dev__figs{border-top:2px solid var(--ink);display:grid;}
@media(max-width:860px){.sb-dev__figs{grid-template-columns:1fr 1fr;}}
.sb-dev__figs .sb-fig{border-right:0;border-bottom:1px solid var(--rule);padding:1.5rem 0;}
.sb-dev__body{columns:2;column-gap:clamp(2rem,4vw,3.5rem);}
@media(max-width:1000px){.sb-dev__body{columns:1;}}
.sb-dev__body p{font-size:var(--fs-body);line-height:1.75;color:var(--ink-soft);margin-bottom:1.25rem;break-inside:avoid;}
.sb-dev__body a,.sb-impl__body a{color:var(--ink);border-bottom:2px solid var(--gold);transition:color .15s;}
.sb-dev__body a:hover,.sb-dev__body a:focus-visible{color:var(--gold-deep);}
.sb-process__body{max-width:68ch;}
.sb-process__body p{font-size:clamp(1rem,1.4vw,1.1875rem);line-height:1.75;color:var(--ink-soft);margin-bottom:1.5rem;}
.sb-timeline{max-width:var(--wide);margin:clamp(2.5rem,5vw,3.5rem) auto 0;}
.sb-tl{display:grid;grid-template-columns:minmax(120px,1fr) 4fr;gap:clamp(1rem,3vw,2.5rem);padding:1.1rem 0;border-top:1px solid var(--rule);}
.sb-tl:last-child{border-bottom:1px solid var(--rule);}
.sb-tl__when{font-family:var(--font-display);font-size:.95rem;letter-spacing:.04em;color:var(--gold-deep);}
.sb-tl__what{font-size:clamp(.9375rem,1.3vw,1.0625rem);color:var(--ink);}

/* ══════════════ IMPLEMENTING ══════════════ */
.sb-north{max-width:32ch;font-family:var(--font-serif);font-size:var(--fs-serif-lead);line-height:1.25;color:var(--ink);margin-bottom:2rem;}
.sb-north b{color:var(--gold-deep);font-style:italic;font-weight:600;}
.sb-impl__body{max-width:68ch;}
.sb-impl__body p{font-size:var(--fs-body);line-height:1.75;color:var(--ink-soft);margin-bottom:1.5rem;}

/* ══════════════ APPENDICES ══════════════ */
.sb-res-list{max-width:var(--wide);margin:0 auto;border-top:2px solid var(--ink);}
.sb-res{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.5rem;padding:clamp(1.1rem,2.5vw,1.6rem) 0;border-bottom:1px solid var(--rule);position:relative;}
/* Same hover language as the pillar rows: gold rule sweeps in, title eases right, arrow nudges */
.sb-res::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--easing);}
.sb-res__title{transition:transform .6s var(--easing);}
.sb-res:hover::after,.sb-res:focus-visible::after{transform:scaleX(1);}
.sb-res:hover .sb-res__title,.sb-res:focus-visible .sb-res__title{transform:translateX(.375rem);}
.sb-res:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;}
.sb-res__title{display:block;font-family:var(--font-serif);font-size:var(--fs-serif-item);color:var(--ink);}
.sb-res__meta{display:block;font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:.4rem;}
.sb-res__arrow{display:inline-flex;flex:none;width:1.25rem;height:1.25rem;color:var(--gold-deep);transition:transform .45s var(--easing);}
/* Drawn arrows, not the ↗ character: U+2197 has an emoji presentation, and
   with no glyph for it in Inter, Apple systems drew it as a blue emoji tile. */
.sb-res__arrow svg{display:block;width:100%;height:100%;}
.sb-btn__icon{display:block;width:1em;height:1em;flex:none;}
.sb-res:hover .sb-res__arrow,.sb-res:focus-visible .sb-res__arrow{transform:translate(4px,-4px);}
@media(prefers-reduced-motion:reduce){.sb-res::after,.sb-res__title,.sb-res__arrow{transition:none;}}

/* ── ABOUT BOLD MOVES ── */
.sb-about{padding:var(--pad) var(--gutter);}
.sb-about__inner{max-width:var(--wide);margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;}
@media(max-width:760px){.sb-about__inner{grid-template-columns:1fr;}}
.sb-about__mark{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);color:var(--ink);white-space:nowrap;line-height:.95;}
.sb-about__mark span{color:inherit;}   /* one colour, matching the hero's mark (2026-09-18) */
.sb-about__body p{font-size:var(--fs-body);line-height:1.7;color:var(--ink-soft);margin-bottom:1.25rem;}
.sb-about__links{display:flex;flex-wrap:wrap;gap:1rem;}
.sb-btn{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.9em 1.8em;border-radius:2px;transition:background .15s,color .15s,transform .15s;}
.sb-btn--gold{background:var(--gold);color:var(--ink);}
.sb-btn--gold:hover,.sb-btn--gold:focus-visible{transform:translateY(-3px);outline:none;}
.sb-btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.sb-btn--ghost:hover,.sb-btn--ghost:focus-visible{background:var(--ink);color:var(--cream);outline:none;}

/* ── FOOTER ── */

/* ══════════════ FOOTER ══════════════ */
.sb-footer{background:var(--cream);padding:clamp(2.25rem,4vw,3.5rem) var(--gutter);border-top:1px solid var(--rule);}
.sb-footer__inner{max-width:var(--wide);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;}
.sb-footer__brand{font-family:var(--font-display);font-size:1.15rem;color:var(--ink);}
.sb-footer__logo{height:1.7rem;width:auto;display:block;}
.sb-footer__meta{font-size:.8125rem;color:var(--ink-soft);line-height:1.6;}
.sb-footer__note{margin-left:auto;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}

/* ══════════════ IMAGE PLACEHOLDERS (→ ACF image fields in WP) ══════════════ */
.sb-media{max-width:var(--wide);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;}
@media(max-width:820px){.sb-media{grid-template-columns:1fr;}}
.sb-figure{margin:0;}
.sb-figure__cap{margin-top:.75rem;font-family:var(--font-serif);font-style:italic;font-size:.8125rem;color:var(--ink-faint);}
.sb-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:var(--band);}
.sb-photo--wide{aspect-ratio:16/9;}
.sb-photo--portrait{aspect-ratio:4/5;}
.sb-photo--square{aspect-ratio:1/1;}

/* ══════════════ TIMELINE (full-bleed horizontal-scroll mock → WP component) ══════════════ */
.sb-tlmock{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;background:var(--band);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(2rem,4vw,3.5rem) 0;}
.sb-tlmock__head{max-width:var(--wide);margin:0 auto clamp(1.25rem,2.5vw,2rem);padding:0 var(--gutter);display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.sb-tlmock__hint{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:.5rem;}
.sb-tlmock__hint::after{content:"↔";font-size:1rem;color:var(--gold-deep);}
.sb-tlmock__scroller{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:0 var(--gutter) 1rem;scrollbar-color:var(--gold-deep) transparent;}
.sb-tlmock__track{display:flex;gap:clamp(1rem,2vw,1.5rem);width:max-content;}
.sb-tlmock__panel{scroll-snap-align:start;flex:0 0 auto;width:clamp(240px,32vw,380px);height:clamp(220px,26vw,300px);background:linear-gradient(160deg,#d9d2c3,#cfc7b6);border:1px solid var(--rule);border-radius:4px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;overflow:hidden;}
.sb-tlmock__panel::before{content:"";position:absolute;top:0;left:1.5rem;width:2px;height:2rem;background:var(--gold);}
.sb-tlmock__panel::after{content:"";position:absolute;top:2rem;left:1.5rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--gold);transform:translate(-.35rem,-.35rem);}
.sb-tlmock__yr{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);opacity:.55;}
.sb-tlmock__bar{height:10px;border-radius:5px;background:rgba(22,19,16,.14);margin-top:.9rem;}
.sb-tlmock__bar--sm{width:60%;}
.sb-tlmock__label{position:absolute;top:1.4rem;left:50%;transform:translateX(-50%);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;}

/* ══════════════ REVEAL ══════════════ */
html.js .sb-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--easing),transform .6s var(--easing);}
html.js .sb-reveal.is-in{opacity:1;transform:translateY(0);}
.sb-stagger>*{opacity:0;transform:translateY(16px);transition:opacity .55s var(--easing),transform .55s var(--easing);}
.sb-stagger.is-in>*{opacity:1;transform:translateY(0);}
.sb-stagger.is-in>*:nth-child(2){transition-delay:.05s;}
.sb-stagger.is-in>*:nth-child(3){transition-delay:.1s;}
.sb-stagger.is-in>*:nth-child(4){transition-delay:.15s;}
.sb-stagger.is-in>*:nth-child(5){transition-delay:.2s;}

/* ── ACTIVE NAV ITEM ── */
.sb-nav__links a[aria-current]{color:var(--ink);border-color:var(--gold);}

/* ── BREADCRUMB ── */
.sb-crumb{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:1.25rem var(--gutter) 0;font-size:.8rem;color:var(--ink-faint);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}
.sb-crumb a{color:var(--ink-soft);border-bottom:1px solid transparent;transition:border-color .15s;}
.sb-crumb a:hover{border-color:var(--gold);}
.sb-crumb__sep{color:var(--rule);}

/* ── PILLAR HERO ── */
.sb-phero{padding:clamp(1.5rem,3vw,2.5rem) var(--gutter) clamp(2.5rem,5vw,4rem);}
.sb-phero__inner{max-width:var(--wide);margin:0 auto;}
.sb-phero__kicker{font-family:var(--font-display);font-size:.95rem;letter-spacing:.08em;color:var(--gold-deep);margin-bottom:1rem;}
.sb-phero__verb{font-family:var(--font-display);font-size:clamp(4rem,16vw,14rem);line-height:.82;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em;text-indent:-.055em;white-space:nowrap;}
.sb-phero__verb::after{content:"";display:block;width:min(320px,55%);height:5px;background:var(--gold);margin-top:1.25rem;margin-left:.055em;}
.sb-phero__name{font-family:var(--font-serif);font-size:var(--fs-serif-lead);line-height:1.2;color:var(--ink);margin-top:1.75rem;max-width:20ch;}
.sb-phero__mission{font-family:var(--font-serif);font-size:var(--fs-serif-item);font-style:italic;line-height:1.5;color:var(--ink-soft);margin-top:1.5rem;max-width:52ch;}
/* Hero image fills the height of the text column beside it (no orphaned gap). */
.sb-phero .sb-media{align-items:stretch;}
.sb-phero .sb-figure{display:flex;flex-direction:column;}
.sb-phero .sb-photo{aspect-ratio:auto;flex:1 1 auto;height:100%;min-height:clamp(240px,26vw,340px);}
@media(max-width:820px){.sb-phero .sb-photo{aspect-ratio:16/9;height:auto;min-height:0;}}

/* ── PILLAR SUBNAV ── */
.sb-switch{background:var(--band);border-bottom:1px solid var(--rule);padding:0 var(--gutter);}
.sb-switch__inner{max-width:var(--wide);margin:0 auto;display:flex;align-items:stretch;gap:clamp(1rem,3vw,2rem);}
.sb-switch__label{flex:none;align-self:center;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.sb-switch__row{position:relative;flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
@media(max-width:760px){.sb-switch__inner{display:block;padding-top:.75rem;}.sb-switch__row{display:flex;overflow-x:auto;scrollbar-width:none;margin-top:.25rem;}.sb-switch__row::-webkit-scrollbar{display:none;}.sb-switch__item{flex:none;}}
.sb-switch__item{display:block;padding:.85rem 1rem;border-bottom:3px solid transparent;text-align:center;transition:border-color .2s,background .2s;}
.sb-switch__item:hover{background:rgba(255,255,255,.4);}
.sb-switch__item:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;}
.sb-switch__verb{font-family:var(--font-display);font-size:clamp(1rem,1.5vw,1.2rem);text-transform:uppercase;color:var(--ink-soft);line-height:1.1;}
.sb-switch__item[aria-current]{border-bottom-color:var(--gold);background:var(--paper);}
.sb-switch__item[aria-current] .sb-switch__verb{color:var(--ink);}

/* ── GOALS & COMMITMENTS ── */
.sb-goals{padding:var(--pad) var(--gutter);}
.sb-goals__head{max-width:var(--wide);margin:0 auto clamp(2rem,4vw,3rem);}
.sb-goals__index{max-width:var(--wide);margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;}
.sb-goals__index a{font-size:.8rem;font-weight:600;color:var(--ink-soft);border-bottom:2px solid var(--gold);padding-bottom:2px;}
.sb-goals__index a:hover{color:var(--ink);}
.sb-goal{max-width:var(--wide);margin:0 auto;padding:clamp(2rem,4vw,3rem) 0;border-top:2px solid var(--ink);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);}
@media(max-width:820px){.sb-goal{grid-template-columns:1fr;gap:1.5rem;}}
.sb-goal__label{font-family:var(--font-display);font-size:clamp(1rem,1.6vw,1.25rem);color:var(--gold-deep);margin-bottom:1rem;}
.sb-goal__statement{font-family:var(--font-serif);font-size:var(--fs-serif-feature);line-height:1.25;color:var(--ink);}
.sb-commit__label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.25rem;}
.sb-commit{list-style:none;display:flex;flex-direction:column;gap:1.25rem;}
.sb-commit li{position:relative;padding-left:2.25rem;font-size:var(--fs-body);line-height:1.65;color:var(--ink-soft);}
.sb-commit li::before{content:"";position:absolute;left:0;top:.55em;width:1.25rem;height:2px;background:var(--gold);}
.sb-commit li b{color:var(--ink);font-weight:600;}
/* A goal with a single commitment is a paragraph in the final copy (no bullet). */
.sb-commit__single{font-size:var(--fs-body);line-height:1.65;color:var(--ink-soft);}
.sb-commit__single b{color:var(--ink);font-weight:600;}

/* ── CROSS-NAV (prev / next) ── */
.sb-xnav{background:var(--band);border-top:1px solid var(--rule);padding:clamp(2.5rem,5vw,4rem) var(--gutter);}
.sb-xnav__inner{max-width:var(--wide);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.sb-xnav__link{display:flex;flex-direction:column;gap:.35rem;}
.sb-xnav__link--next{text-align:right;margin-left:auto;}
.sb-xnav__dir{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.sb-xnav__verb{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);text-transform:uppercase;color:var(--ink);transition:color .15s;}
.sb-xnav__link:hover .sb-xnav__verb{color:var(--gold-deep);}

/* ══════════════════════════════════════════════════════════════
   PORT ADDITIONS — everything below is new for the WordPress port.
   Nothing above this line changes the approved design.
   ══════════════════════════════════════════════════════════════ */

/* ── FONTS — self-hosted, no Google Fonts, no base64 (plan §2.13, §2.15) ──
   Antique Olive Nord and Inter 400/700/800/900 are already declared in the
   theme's css/fonts.css, but that sheet is loaded async (media="print" then
   swapped), so the microsite declares what it needs itself and never depends
   on that swap. Same file URLs, so nothing downloads twice.
   Inter 500 and 600 are declared ONLY here: the prototype uses both, the
   theme sheet stops at 400/700, and without these the browser would synthesise
   them from 400. */
@font-face{font-family:"Antique Olive Nord";src:url("../../fonts/antique-olive-nord.woff") format("woff");font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../../fonts/Inter-Medium.woff2") format("woff2"),url("../../fonts/Inter-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../../fonts/Inter-SemiBold.woff2") format("woff2"),url("../../fonts/Inter-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap;}
/* EB Garamond ships as a variable font (wght 400–800), so two files cover the
   five weight/style combinations the design uses. */
@font-face{font-family:"EB Garamond";src:url("../../fonts/EBGaramond-roman.var.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:"EB Garamond";src:url("../../fonts/EBGaramond-italic.var.woff2") format("woff2");font-weight:400 800;font-style:italic;font-display:swap;}

/* ── PILLAR PAGE SCOPE ──
   The prototype's pillar.css set a tighter --pad than the hub. That was the
   only real conflict between the two stylesheets, so it becomes a scoped
   override instead of a second :root. */
body[data-pillar]{--pad:clamp(3.5rem,7vw,6rem);}

/* ── INLINE STYLES FROM THE PROTOTYPE (plan §2.3) ── */
.sb-phero .sb-media{margin-top:clamp(1.5rem,3vw,2.25rem);}
.sb-phero .sb-phero__name{margin-top:0;}

/* ── WP ADMIN BAR (plan §3) ── */
body.admin-bar .sb-nav{top:32px;}
@media screen and (max-width:782px){body.admin-bar .sb-nav{top:46px;}}

/* ══════════════ "READ THE PLAN" + PILLAR SUBNAV (plan §2.6) ══════════════
   One pillar-navigation component site-wide: always open on pillar pages,
   collapsed under the nav bar on the hub until the toggle opens it. */

/* On pillar pages "Read the Plan" is the active nav item, not a toggle. */
.sb-nav__cta--active{background:var(--ink);color:var(--cream);}

/* JS swaps the hub's link for a <button>; it has to look identical. */
button.sb-nav__cta{appearance:none;-webkit-appearance:none;font-family:inherit;line-height:inherit;cursor:pointer;}
.sb-nav__trigger[aria-expanded="true"] .sb-nav__caret{transform:rotate(180deg);}


/* The strip sticks directly under the nav bar. The nav is sticky, so anything
   after it slides underneath as you scroll and the strip's first line — the
   label and the verbs — was disappearing behind it. strategic-plan.js measures
   the bar (its height changes with the admin bar and with any wrap) into
   --sb-nav-h; the fallback covers the moment before that runs. */
.sb-switch{position:sticky;top:var(--sb-nav-h,3.5rem);z-index:98;}

/* Descriptor line under each verb, from the prototype dropdown's .m-sub. */
.sb-switch__sub{display:block;margin-top:.15rem;font-family:var(--font-body);font-size:.72rem;font-weight:500;line-height:1.25;color:var(--ink-faint);text-wrap:balance;}
/* Between the scroll breakpoint and a wide desktop, tighter item padding
   keeps every descriptor to two lines (measured 1024–1280; below ~900 the
   shortest verb's column still gives "Student Opportunity & Success" three). */
@media(min-width:761px) and (max-width:1180px){.sb-switch__item{padding-left:.5rem;padding-right:.5rem;}}
.sb-switch__item[aria-current] .sb-switch__sub{color:var(--ink-soft);}

/* The label and "All five pillars →" stack in the strip's first column, so
   the five pillars get the full width of the row. Teal caps, like the
   prototype's dropdown link. */
.sb-switch__head{flex:none;align-self:center;display:flex;flex-direction:column;gap:.4rem;}
.sb-switch__head .sb-switch__label{align-self:auto;}
.sb-switch__all{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap;border-bottom:2px solid transparent;align-self:flex-start;padding-bottom:1px;transition:border-color .2s;}
.sb-switch__all:hover,.sb-switch__all:focus-visible{border-bottom-color:var(--gold);outline:none;}

/* Below 760px the strip scrolls horizontally, so descriptors give way to
   keep the tap targets big (plan §2.6). */
@media(max-width:760px){
  .sb-switch__sub{display:none;}
  .sb-switch__head{flex-direction:row;justify-content:space-between;align-items:baseline;gap:1rem;}
}

/* The mobile panel keeps verb + descriptor stacked. */
.sb-nav__mgroup .m-sub{margin-top:.1rem;}
.sb-nav__mobile .sb-nav__menu-all{display:block;margin-top:.35rem;}

/* ══════════════ NO JAVASCRIPT (plan §2, No-JS table) ══════════════
   Every "hidden until JS runs" rule is scoped under html.js above; these
   rules give the finished, static state when JS never runs. */

/* Hamburger does nothing without JS, so show the panel as a static list. */
html:not(.js) .sb-nav__toggle{display:none;}
@media(max-width:860px){
  html:not(.js) .sb-nav__mobile{display:block;position:static;max-height:none;overflow:visible;box-shadow:none;padding-bottom:1rem;}
}

/* The carousel becomes the stacked layout it was built from: all nine slides
   as alternating rows, controls hidden. */
html:not(.js) .wj-carousel__viewport{overflow:visible;}
html:not(.js) .wj-carousel__track{display:block;transform:none!important;}
html:not(.js) .wj-slide{width:100%;}
html:not(.js) .wj-slide + .wj-slide{margin-top:clamp(2rem,5vw,3.5rem);}
html:not(.js) .wj-carousel__controls{display:none;}

/* The verb is sized by JS to fill its column. Without JS — or before the
   display font is ready — the clamp alone would clip the longest verb
   (STRENGTHEN) on phones, so below 560px the CSS fits it to the column
   itself (8.8vw ≈ the width of STRENGTHEN at that size). Above 560px the JS
   fit continues to do the work, so the desktop scale is untouched. */
.sb-phero__verb{max-width:100%;}
@media(max-width:560px){
  .sb-phero__verb{font-size:clamp(1.375rem,8.8vw,4rem);}
  .sb-pillar__verb{font-size:clamp(1.25rem,8.8vw,3rem);}
}

/* ── "WHAT WE IMAGINE" NAVIGATION (revised 2026-09-18) ──
   The controls used to sit top-right in the section heading, where a reviewer
   read the first statement and never realised eight more were behind it. They
   now sit under the slide, in the reading path: a counter that states the
   extent, then prev / dots / a Next button that carries a word. */
.wj-carousel__nav{max-width:var(--wide);margin:clamp(1.5rem,3vw,2.25rem) auto 0;display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;}
.wj-carousel__count{display:flex;align-items:baseline;gap:.4rem;font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.75rem);color:var(--ink);line-height:1;white-space:nowrap;}
.wj-carousel__count-sep{color:var(--rule);}
.wj-carousel__count-total{color:var(--ink-faint-strong);} /* the "09" was 3.03:1 on the band */
/* Back and Next share one shape, both outlined. Next takes the teal accent —
   the colour this design already uses for type that invites action ("All five
   pillars →", the eyebrows) — so it still reads as the way forward without a
   block of gold that appears nowhere else in the section. */
.wj-carousel__btn--prev,.wj-carousel__btn--next{width:auto;border-radius:2px;padding:0 1.15em;gap:.55rem;background:transparent;}
.wj-carousel__btn--prev{border-color:var(--ink);color:var(--ink);}
.wj-carousel__btn--next{border-color:var(--accent);color:var(--accent);}
.wj-carousel__btn--next:hover,.wj-carousel__btn--next:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--white);}
.wj-carousel__btn-label{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
@media(max-width:560px){
  .wj-carousel__nav{gap:.75rem 1rem;}
  .wj-carousel__count{font-size:1.15rem;}
  .wj-carousel__btn--prev,.wj-carousel__btn--next{padding:0 .9em;}
}

/* The plan's title in running copy, set in the display face (2026-09-21).
   Antique Olive Nord has no italic and is heavy by nature, so the rule also
   cancels any <b>/<i> it inherits — the approved copy wraps one mention in
   bold italic — and sits a touch smaller, since the display face runs large
   against both the serif and Inter. */
.sb-bm{font-family:var(--font-display);font-weight:400;font-style:normal;font-size:.93em;letter-spacing:.005em;}
/* The same words as an ordinary phrase, not the title: Inter, bold. Slightly
   reduced because Inter's x-height runs larger than the serif it sits in. */
.sb-bm-phrase{font-family:var(--font-body);font-weight:700;font-style:normal;font-size:.94em;}

/* ── HUB ODDS AND ENDS ── */
/* Was an inline style on the observatory photo in the prototype (plan §2.3). */
.sb-photo--observatory{object-position:30% 50%;}
/* An appendix listed before its document is published: same row, no link. */
.sb-res--plain{cursor:default;}
.sb-res--plain .sb-res__title{color:var(--ink-soft);}

/* ══════════════ THEME RESET ══════════════
   The site-wide css/style.css styles bare elements, not just editor content:

     p, li, dt, dd, figcaption { font-size; line-height; letter-spacing: -0.014em }
     h1 { font-size; font-weight: 900; line-height; letter-spacing: -0.032em }

   Those are plain element selectors, so they lose to our `.sb-*` classes
   wherever we set a property — but they win wherever we do not, which is how
   a -0.014em tracking the prototype never had ended up on nearly every line of
   text here, and how the giant pillar verb rendered at weight 900 instead of
   700. (The page-scoped rules, including the 1200px measure cap, are handled
   by dropping the `page` body class in inc/strategic-plan.php.)

   Restores the prototype's baseline. Anything that wants its own tracking or
   weight still sets it on the class and wins on specificity, as before. */
/* Specificity is the whole game here. `:where()` contributes nothing, so each
   reset below scores (0,0,1) — exactly the same as the theme's bare `p` and
   `h1` rules, which this sheet then beats by loading later. Anything of ours
   carrying a class still outranks it, so .sb-h2 keeps its own weight of 500
   and .sb-commit__label keeps its own tracking. Resetting the body too, so the
   tracking stops inheriting into divs and spans that no rule here touches. */
/* Something in the parent theme (Astra) makes <body> a flex column — it does
   not show up as a matchable rule in the CSSOM, but the computed value is
   flex. That matters because several top-level bands here use `margin: 0 auto`
   with a max-width, and inside a flex container auto margins mean shrink to
   fit rather than fill: the breadcrumb came out 577px wide instead of spanning
   the page. The prototype's body is an ordinary block, so restore that. */
body.sb-body { display: block; }

body.sb-body { letter-spacing: normal; }
:where(body.sb-body) p,
:where(body.sb-body) li,
:where(body.sb-body) dt,
:where(body.sb-body) dd,
:where(body.sb-body) figcaption { letter-spacing: normal; }
:where(body.sb-body) h1,
:where(body.sb-body) h2,
:where(body.sb-body) h3,
:where(body.sb-body) h4,
:where(body.sb-body) h5,
:where(body.sb-body) h6 { letter-spacing: normal; font-weight: 700; }