/* ===== Design tokens (from Vara Site Directions, path 6b/6c) ===== */
:root{
  --navy:#032f4b;
  --orange:#fc7400;
  --blue:#037cb9;
  --bg:#f0eee9;
  --ink-soft:#41525e;
  --white:#ffffff;
  --border-w:3px;
  --radius:2px;
  --maxw:1200px;
  --dur:.5s;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sticky-h:72px; /* overridden by main.js to match the sticky bar's real (possibly wrapped) height */
}

@media (prefers-reduced-motion: reduce){
  :root{--dur:.001s}
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font-family:'Public Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.035em;
  margin:0;
}

.eyebrow{
  font:700 24px/1 'Archivo',sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font:900 15px/1 'Archivo',sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:15px 24px;
  border-radius:var(--radius);
  border:2px solid var(--navy);
  cursor:pointer;
  transition:transform .15s var(--ease), background-color .15s, color .15s, box-shadow .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-donate{background:var(--orange);border-color:var(--orange);color:var(--navy)}
.btn-donate:hover{box-shadow:0 6px 18px rgba(252,116,0,.4)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{box-shadow:0 6px 18px rgba(3,47,75,.3)}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline-light:hover{border-color:#fff}

/* ===== Top utility bar ===== */
.topbar{
  background:var(--navy);
  color:#fff;
  font:600 12px/1 'Archivo',sans-serif;
  letter-spacing:.02em;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;gap:12px;flex-wrap:wrap;
}
.topbar-links{display:flex;gap:18px;align-items:center}
.topbar-links a,.topbar-links button{
  background:none;border:none;color:#fff;opacity:.85;
  font:600 12px/1 'Archivo',sans-serif;cursor:pointer;padding:0;
  transition:opacity .15s;
}
.topbar-links a:hover,.topbar-links button:hover{opacity:1}
#lang-toggle[aria-pressed="true"]{opacity:1;text-decoration:underline}

/* ===== Scrolling ticker =====
   main.js builds the track: it shuffles the phrase pool, clones the group
   enough times to cover the viewport, and sets --ticker-shift (one group's
   measured width in px) and --ticker-dur (that width / a constant px-per-sec
   speed). Animating a measured px distance instead of translateX(-50%) is
   deliberate: iOS Safari can resolve `width:max-content` on a flex container
   inside overflow:hidden to the containing block instead of the content, and
   a percentage shift against that wrong width scrolls a few px and reads as
   frozen. Empty until JS runs, so there is no orphan stripe. */
.ticker{
  background:var(--navy);
  overflow:hidden;
  border-top:3px solid var(--orange);
  border-bottom:3px solid var(--orange);
}
.ticker:empty{display:none}
.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker-scroll var(--ticker-dur,60s) linear infinite;
  will-change:transform;
  backface-visibility:hidden;
  transform:translate3d(0,0,0); /* promote to its own layer up front on iOS */
}
.ticker-group{
  display:flex;align-items:center;flex-shrink:0;
  padding:12px 0;
}
.ticker-item{
  font:900 14px/1 'Archivo',sans-serif;
  color:#fff;letter-spacing:.06em;text-transform:uppercase;
  padding:0 26px;white-space:nowrap;
}
.ticker-star{color:var(--orange);font-size:14px}
@keyframes ticker-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--ticker-shift,0px)),0,0)}
}

/* Reduced motion: a short centred row rather than a track frozen mid-scroll
   with a word sliced in half at the viewport edge. main.js adds the class and
   trims the item count to match. */
.ticker--static .ticker-track{
  animation:none;
  width:100%;
  flex-wrap:wrap;
  justify-content:center;
}
.ticker--static .ticker-group{flex-wrap:wrap;justify-content:center}
}

/* ===== Main nav ===== */
.nav{
  background:#fff;
  border-bottom:var(--border-w) solid var(--navy);
  position:sticky;top:0;z-index:40;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.logo{
  font:900 22px/1 'Archivo',sans-serif;letter-spacing:-.02em;color:var(--navy);
}
.nav-links{display:flex;align-items:center;gap:22px;font:700 12.5px/1 'Archivo',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.nav-links a{padding:6px 0;border-bottom:3px solid transparent;transition:border-color .15s,color .15s}
.nav-links a:hover,.nav-links a.active{border-color:var(--orange)}
.nav-links .btn{padding:11px 20px}
.nav-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:var(--radius);width:44px;height:40px;cursor:pointer;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--navy);transition:transform .2s,opacity .2s;
}
.nav-toggle span{top:19px}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);height:100vh;
    background:var(--navy);flex-direction:column;align-items:flex-start;
    padding:100px 28px 28px;gap:22px;transform:translateX(100%);
    transition:transform .3s var(--ease);color:#fff;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{color:#fff}
  .nav-links .btn{margin-top:10px}
  .nav-toggle{display:block}
}

/* ===== Hero (home) ===== */
.hero{position:relative;height:min(72vh,620px);min-height:420px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,47,75,.94) 0%,rgba(3,47,75,.84) 45%,rgba(3,47,75,.45) 100%);
}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 24px}
.hero-content .eyebrow{color:var(--orange)}
.hero-content h1{font-size:clamp(38px,7vw,76px);line-height:.95;color:#fff;margin-top:14px}
.hero-content p{font:600 18px/1.5 'Public Sans',sans-serif;color:#fff;max-width:38ch;margin:18px 0 0}

/* ===== Donate strip ===== */
.donate-strip{
  background:var(--orange);color:var(--navy);
  padding:30px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.donate-strip h3{font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;max-width:24ch}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font:900 15px/1 'Archivo',sans-serif;padding:15px 22px;border-radius:var(--radius);
  cursor:pointer;transition:transform .15s,box-shadow .15s;border:2px solid var(--navy);
}
.chip:hover{transform:translateY(-2px)}
.chip-solid{background:var(--navy);color:#fff}
.chip-outline{background:transparent;color:var(--navy)}
.chip-dashed{background:transparent;border-style:dashed;border-color:rgba(3,47,75,.6);color:var(--navy)}

/* ===== Two-col why section ===== */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split-text{padding:56px 24px;display:flex;flex-direction:column;justify-content:center;max-width:560px;margin:0 auto}
.split-text .eyebrow{color:#c25400}
.split-text h2{font-size:clamp(28px,4vw,38px);margin-top:14px}
.split-text p{font:400 16.5px/1.6 'Public Sans',sans-serif;color:var(--ink-soft);margin:16px 0 0}
.split-link{display:inline-block;margin-top:20px;font:800 14px/1 'Archivo',sans-serif;color:var(--blue);letter-spacing:.04em}
.split-photo{min-height:340px;overflow:hidden}
.split-photo img{width:100%;height:100%;object-fit:contain}
@media (max-width:760px){.split{grid-template-columns:1fr}.split-photo{order:-1;min-height:280px}}

/* ===== Stats bar ===== */
.stats{background:var(--blue);color:#fff;padding:48px 24px}
.stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;gap:0}
.stat{padding:0 10px;border-left:1px solid rgba(255,255,255,.35)}
.stat:first-child{border-left:none}
.stat-num{font:900 42px/1 'Archivo',sans-serif;letter-spacing:-.04em}
.stat-label{font:600 12px/1.4 'Public Sans',sans-serif;margin-top:8px}
.stat-sub{font:600 10px/1.3 'Public Sans',sans-serif;color:rgba(255,255,255,.6);margin-top:2px}
@media (max-width:700px){.stats .wrap{grid-template-columns:repeat(2,1fr);gap:24px 0}.stat{border-left:none;padding:0}}

/* ===== Priority cards ===== */
.priorities-grid{padding:52px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
.priority-card{border:var(--border-w) solid var(--navy);padding:24px;transition:box-shadow .2s,transform .2s}
.priority-card:hover{box-shadow:6px 6px 0 var(--orange);transform:translate(-3px,-3px)}
.priority-card h3{font-size:23px;line-height:1.05}
.priority-card p{font:400 15px/1.55 'Public Sans',sans-serif;color:var(--ink-soft);margin:12px 0 0}
@media (max-width:760px){.priorities-grid{grid-template-columns:1fr}}

/* ===== Photo band ===== */
.photo-band{height:min(300px,32vw);min-height:180px;overflow:hidden}
.photo-band img{width:100%;height:100%;object-fit:cover}

/* ===== Sticky donate bar ===== */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--navy);border-top:4px solid var(--orange);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;transform:translateY(110%);transition:transform .35s var(--ease);
}
.sticky-bar.visible{transform:translateY(0)}
.sticky-bar-msg{font:900 16px/1.15 'Archivo',sans-serif;color:#fff;text-transform:uppercase}
.sticky-bar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sticky-chip{border:2px solid rgba(255,255,255,.5);color:#fff;font:900 14px/1 'Archivo',sans-serif;padding:12px 16px;border-radius:var(--radius);transition:border-color .15s}
.sticky-chip:hover{border-color:#fff}
.sticky-close{
  background:none;border:none;color:rgba(255,255,255,.6);
  font-size:24px;line-height:1;padding:6px 4px;margin-left:2px;
  cursor:pointer;transition:color .15s;flex:none;
}
.sticky-close:hover{color:#fff}
@media (max-width:640px){.sticky-bar{flex-direction:column;align-items:flex-start}.sticky-bar-msg{font-size:14px}}

/* ===== Page masthead (inner pages) ===== */
.masthead{background:var(--orange);color:var(--navy);padding:56px 24px 46px}
.masthead h1{font-size:clamp(34px,6vw,58px);line-height:.95}
.masthead p{font:600 17px/1.45 'Public Sans',sans-serif;margin:14px 0 0;max-width:46ch}

/* ===== Timeline (Record page) ===== */
.timeline{max-width:var(--maxw);margin:0 auto;padding:44px 24px}
.timeline-list{border-top:var(--border-w) solid var(--navy)}
.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid rgba(3,47,75,.2)}
.timeline-yrs{font:900 30px/1 'Archivo',sans-serif;color:var(--blue);letter-spacing:-.03em}
.timeline-item h3{font:800 19px/1.25 'Archivo',sans-serif;text-transform:none;letter-spacing:0}
.timeline-item p{font:400 15px/1.55 'Public Sans',sans-serif;color:var(--ink-soft);margin:6px 0 0}
@media (max-width:600px){.timeline-item{grid-template-columns:1fr}}

/* ===== Priority detail module ===== */
.priority-detail{max-width:var(--maxw);margin:0 auto;padding:44px 24px}
.priority-detail + .priority-detail{padding-top:0}
.pd-card{display:grid;grid-template-columns:1fr 1fr;border:var(--border-w) solid var(--navy);margin-top:20px;overflow:hidden}
.pd-text{padding:32px}
.pd-text h2{font-size:34px}
.pd-text p{font:400 16px/1.6 'Public Sans',sans-serif;color:var(--ink-soft);margin:14px 0 0}
.pd-list{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.pd-list div{display:flex;gap:10px;font:600 15px/1.5 'Public Sans',sans-serif}
.pd-list span{color:var(--orange)}
.pd-photo{min-height:300px;overflow:hidden}
.pd-photo img{width:100%;height:100%;object-fit:cover}
.pd-video{min-height:300px;overflow:hidden;background:var(--navy)}
.pd-video video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.pd-card{grid-template-columns:1fr}.pd-photo{min-height:220px;order:-1}.pd-video{min-height:220px;order:-1}}

/* ===== Full-story video module (Highlights page) ===== */
.video-feature{max-width:var(--maxw);margin:0 auto;padding:0 24px 52px}
.video-feature-head{max-width:640px;margin:0 0 20px}
.video-feature-head h2{font-size:clamp(26px,3.6vw,34px)}
.video-feature-head p{font:400 16px/1.6 'Public Sans',sans-serif;color:var(--ink-soft);margin:12px 0 0}
.video-feature-frame{border:var(--border-w) solid var(--navy);overflow:hidden;background:var(--navy)}
.video-feature-frame video{width:100%;display:block;max-height:640px}

/* ===== Testimonial parts grid (Testimonials page) ===== */
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.video-card{border:var(--border-w) solid var(--navy);background:var(--white);overflow:hidden}
.video-card h3{font-size:22px;padding:14px 18px;border-bottom:var(--border-w) solid var(--navy)}
.video-card video{width:100%;aspect-ratio:9/16;object-fit:contain;display:block;background:var(--navy)}
.pd-video--tall video{object-fit:contain;aspect-ratio:9/16;max-height:600px}
@media (max-width:960px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.video-grid{grid-template-columns:1fr}}

/* ===== Photo gallery (Highlights page) ===== */
.gallery{position:relative;border:var(--border-w) solid var(--navy);background:var(--navy);aspect-ratio:4/3;overflow:hidden;touch-action:pan-y;user-select:none}
.gallery:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.gallery img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.gallery-btn{position:absolute;top:0;bottom:0;width:50%;background:none;border:0;cursor:pointer;display:flex;align-items:center;padding:0 14px;color:var(--white)}
.gallery-prev{left:0;justify-content:flex-start}
.gallery-next{right:0;justify-content:flex-end}
.gallery-btn span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(3,47,75,.7);font-size:30px;line-height:1;transition:background var(--dur) var(--ease)}
.gallery-btn:hover span,.gallery-btn:focus-visible span{background:var(--orange)}
.gallery-count{position:absolute;right:12px;bottom:12px;padding:4px 10px;background:rgba(3,47,75,.75);color:var(--white);font:600 13px/1.4 'Public Sans',sans-serif;pointer-events:none}
@media (max-width:760px){.gallery{aspect-ratio:4/5}.gallery-btn span{width:40px;height:40px;font-size:24px}}

/* ===== Endorsement wall ===== */
.endorse{max-width:var(--maxw);margin:0 auto;padding:44px 24px}
.endorse-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.endorse-logo{border:var(--border-w) solid var(--navy);height:86px;display:flex;align-items:center;justify-content:center;font:11px/1 ui-monospace,Menlo,monospace;color:#5e6b75}
.endorse-quote{border-left:8px solid var(--orange);padding:4px 0 4px 22px;margin-top:28px}
.endorse-quote p{font:600 24px/1.4 'Public Sans',sans-serif;margin:0;max-width:44ch}
.endorse-quote cite{font:700 13px/1 'Archivo',sans-serif;letter-spacing:.1em;color:#5e6b75;margin-top:14px;display:block;font-style:normal;text-transform:uppercase}
@media (max-width:700px){.endorse-logos{grid-template-columns:repeat(2,1fr)}}

/* ===== Standalone donate page ===== */
.donate-module{max-width:var(--maxw);margin:0 auto;padding:44px 24px}
.donate-card{border:var(--border-w) solid var(--navy)}
.donate-card-head{background:var(--navy);color:#fff;padding:10px 24px;font:700 12.5px/1 'Archivo',sans-serif;letter-spacing:.2em}
.donate-card-body{display:grid;grid-template-columns:1fr .9fr}
.donate-breakdown{padding:30px}
.donate-breakdown h2{font-size:34px}
.breakdown-row{display:flex;justify-content:space-between;font:700 15px/1 'Archivo',sans-serif;border-bottom:1px solid rgba(3,47,75,.2);padding:12px 0;gap:12px}
.breakdown-row span:last-child{font:400 15px/1 'Public Sans',sans-serif;text-align:right}
.donate-legal{font:400 13px/1.55 'Public Sans',sans-serif;color:#5e6b75;margin-top:18px}
.donate-pick{background:var(--orange);padding:30px}
.donate-pick h3{font-size:22px}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.amount-grid .chip{padding:15px 0;text-align:center}
.donate-cta{margin-top:14px}
.donate-cta .btn{width:100%}
.donate-pick .donate-legal{color:rgba(3,47,75,.75)}
@media (max-width:760px){.donate-card-body{grid-template-columns:1fr}}

/* ===== Simple content page (About / Volunteer / Contact) ===== */
.content{max-width:780px;margin:0 auto;padding:52px 24px}
.content h2{font-size:clamp(28px,4vw,38px)}
.content h3{font-size:20px;margin-top:32px}
.content p{font:400 16.5px/1.65 'Public Sans',sans-serif;color:var(--ink-soft);margin:16px 0 0}
.content ul{padding-left:20px;color:var(--ink-soft);font:400 16px/1.7 'Public Sans',sans-serif}
.contact-list{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.contact-item{display:flex;align-items:center;gap:14px;border:2px solid var(--navy);padding:16px 18px;transition:background-color .15s}
.contact-item:hover{background:#fff}
.contact-item strong{font:800 15px/1 'Archivo',sans-serif;letter-spacing:.02em}

/* ===== Footer ===== */
footer{background:var(--navy);color:#fff;padding:26px 24px calc(var(--sticky-h) + 20px);font:400 11.5px/1.6 'Public Sans',sans-serif}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:16px;font-weight:600}
.footer-links a,.footer-links button{background:none;border:none;color:#fff;font:600 11.5px/1.6 'Public Sans',sans-serif;cursor:pointer;padding:0}

.social-row{display:flex;gap:10px;align-items:center}
.social-row a{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background-color .15s,border-color .15s,transform .15s;
  flex:none;
}
.social-row a:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}
.social-row svg{width:16px;height:16px;fill:none;stroke:currentColor}
body:has(.sticky-bar) footer{padding-bottom:26px}

/* body padding so sticky bar never covers content on short pages */
body.has-sticky{padding-bottom:0}

/* ===== Scroll reveal =====
   Content is visible by default (opacity:1). Only once main.js confirms it can
   run the reveal animation does it arm the effect via the js-ready class on
   <html> -- so a failed script load, disabled JS, an ad blocker, or a crawler
   never leaves a section permanently invisible. */
html.js-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
html.js-ready .reveal.in{opacity:1;transform:none}

/* Directional variants, used by the record page portrait block. */
html.js-ready .reveal--left{transform:translateX(-28px)}
html.js-ready .reveal--right{transform:translateX(28px)}
html.js-ready .reveal--left.in,html.js-ready .reveal--right.in{transform:none}

/* Staggered children. main.js numbers each child into --i; the cap lives there
   too, so a long list finishes arriving instead of trickling. Do not also put
   .reveal on a .reveal-stagger element -- the container would fade as one block
   and hide the stagger. */
html.js-ready .reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js-ready .reveal-stagger.in > *{opacity:1;transform:none}

/* Vertical rule that draws down the career ladder as it enters view. */
.reveal-line{position:relative}
html.js-ready .reveal-line::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease)}
html.js-ready .reveal-line.in::before{transform:scaleY(1)}
@media (prefers-reduced-motion: reduce){html.js-ready .reveal-line::before{transform:scaleY(1)}}

/* ===== Marquee (optional slogan strip) ===== */
.marquee{background:var(--navy);color:#fff;overflow:hidden;white-space:nowrap;padding:14px 0}
.marquee-track{display:inline-block;font:900 18px/1 'Archivo',sans-serif;letter-spacing:.04em;text-transform:uppercase;animation:marquee 22s linear infinite}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Record page ===== */
.section-head{max-width:var(--maxw);margin:0 auto;padding:52px 24px 0}
.section-head .eyebrow{color:#c25400}
.section-head h2{font-size:clamp(28px,4vw,38px);margin-top:12px}
.section-head p{font:400 16.5px/1.6 'Public Sans',sans-serif;color:var(--ink-soft);margin:14px 0 0;max-width:70ch}
/* The record portrait is a 2:3 studio headshot. Left to the default
   .split-photo rules it drives the column over 1000px tall and strands the
   intro text beside a wall of empty space, so cap it and crop from the chest
   down. The top bias keeps his head clear of the crop at every width. */
.split-photo--portrait{min-height:0;max-height:560px;background:var(--navy)}
.split-photo--portrait img{object-fit:cover;object-position:50% 12%}
/* The career ladder shows ranges ("1993-1995"), not single years, so it needs
   a wider column and a smaller face than the education list to stay on one
   line. Scoped to the modifier so education keeps the big year treatment. */
.timeline--ranges .timeline-item{grid-template-columns:150px 1fr}
.timeline--ranges .timeline-yrs{font-size:20px;letter-spacing:-.01em;padding-top:3px;white-space:nowrap}
@media (max-width:600px){.timeline--ranges .timeline-item{grid-template-columns:1fr}}
.timeline-step{font:900 13px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);background:var(--navy);display:inline-block;padding:9px 14px;margin:30px 0 0}
.timeline-list .timeline-step:first-child{margin-top:0}
.result-num{display:block;font:900 clamp(30px,4.4vw,40px)/1 'Archivo',sans-serif;color:var(--blue);letter-spacing:-.03em;margin-bottom:10px}
.section-head .chip{cursor:default}   /* credential chips are labels, not links */
.cert-note{max-width:var(--maxw);margin:0 auto;padding:22px 24px 0}
.cert-note span{font:900 12px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);display:block;margin-bottom:8px}
.cert-note p{font:400 15px/1.6 'Public Sans',sans-serif;color:var(--ink-soft);margin:0}
.record-quote{max-width:var(--maxw);margin:0 auto;padding:10px 24px 56px}

/* ===== Experience in numbers (record page) =====
   The four tiles carry their own colours straight from the source data
   (navy / blue / deep navy / orange), with the label chip outlined in the
   contrasting accent. Kept as its own module rather than mapped onto the
   generic .stats band, because the 2x2 grid, the arrow and the framed total
   are the point of the layout. */
.xp{
  max-width:var(--maxw);margin:0 auto;padding:26px 24px 10px;
  display:grid;grid-template-columns:minmax(0,1.5fr) auto minmax(0,1fr);
  gap:24px;align-items:center;
}
.xp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xp-tile{padding:22px 20px 24px;display:flex;flex-direction:column;min-width:0}
.xp-n{font:900 clamp(40px,5vw,68px)/.85 'Archivo',sans-serif;letter-spacing:-.05em}
.xp-yrs{font:900 clamp(18px,2.2vw,28px)/1 'Archivo',sans-serif;letter-spacing:-.02em;margin-top:8px}
.xp-label{align-self:flex-start;border:2px solid currentColor;padding:8px 11px;margin-top:16px;font:900 11.5px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.07em}
.xp-detail{font:600 13px/1.45 'Public Sans',sans-serif;margin:12px 0 0}
.xp-tile--a{background:var(--navy);color:var(--white)}
.xp-tile--a .xp-label{border-color:var(--orange)}
.xp-tile--b{background:var(--blue);color:var(--white)}
.xp-tile--b .xp-label{border-color:var(--white)}
.xp-tile--c{background:#021f33;color:var(--white)}   /* deeper navy, from the source data */
.xp-tile--c .xp-label{border-color:var(--orange)}
.xp-tile--d{background:var(--orange);color:var(--navy)}
.xp-tile--d .xp-label{border-color:var(--navy)}
.xp-arrow{display:flex;align-items:center;justify-content:center;color:var(--orange)}
.xp-arrow svg{width:clamp(44px,4.6vw,68px);height:auto;display:block}
.xp-total{border:var(--border-w) solid var(--navy);background:var(--white);display:flex;flex-direction:column}
.xp-total-head{padding:26px 24px 20px;color:var(--navy);display:flex;flex-direction:column;align-items:flex-start}
.xp-total-band{background:var(--orange);color:var(--navy);padding:14px 24px;font:900 clamp(17px,2vw,25px)/1.2 'Archivo',sans-serif;text-transform:uppercase}
.xp-total-note{font:400 14.5px/1.6 'Public Sans',sans-serif;color:var(--ink-soft);margin:0;padding:20px 24px 24px}
@media (max-width:980px){
  .xp{grid-template-columns:1fr;gap:16px}
  .xp-arrow{transform:rotate(90deg)}   /* points down the stack; no .reveal on it, since .reveal.in sets transform:none and would undo this */
}
@media (max-width:520px){.xp-grid{grid-template-columns:1fr}}