/* An editorial story page, using the foundation's shared navigation and footer. */

body.has-story-page { --story-paper:#f8fafb; --story-ink:#102d43; --story-muted:#587283; --story-blue:#0003d1; --story-line:#dce6ec; background:var(--story-paper); color:var(--story-ink); }



.has-story-page .story-space { padding-block:clamp(75px,7vw,125px); }

.has-story-page .story-kicker { display:flex; align-items:center; gap:10px; font:500 10px/1.65 JAOF,Arial,sans-serif; letter-spacing:.13em; color:var(--story-blue); }

.has-story-page .story-kicker > span { width:6px; height:6px; border-radius:50%; background:#03bafc; }

.has-story-page .story-text-link { display:flex; align-items:center; justify-content:space-between; gap:36px; width:fit-content; border-bottom:1px solid var(--story-line); padding:0 0 13px; color:var(--story-ink); font:500 13px/1.5 JAOF,Arial,sans-serif; }

.has-story-page .story-text-link > span { font-size:22px; color:var(--story-blue); transition:transform .4s; }

.has-story-page .story-text-link:hover > span { transform:translate(3px,-3px); }

.has-story-page :is(.story-space,.story-hero) h2 { color:var(--story-ink); font:400 clamp(39px,4.1vw,65px)/1.06 JAOF,Arial,sans-serif; letter-spacing:-.055em; margin:22px 0 0; }

.has-story-page :is(.story-space,.story-hero) h2 em { font-family:Georgia,serif; font-weight:400; color:#3c657b; }

.has-story-page .story-hero { padding:70px 0 92px; overflow:hidden; overflow:clip; background:var(--story-paper); }

.has-story-page .story-hero-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,6vw,95px); }

.has-story-page .story-breadcrumb { display:flex; align-items:center; gap:14px; margin-bottom:36px; font:400 11px/1.6 JAOF,Arial,sans-serif; color:var(--story-muted); }

.has-story-page .story-breadcrumb a { color:var(--story-blue); }

.has-story-page .story-hero .story-hero-title { color:var(--story-ink); font:500 clamp(48px,5.7vw,92px)/1.02 JAOF,Arial,sans-serif; letter-spacing:-.065em; margin:24px 0; }

.has-story-page .story-hero .story-hero-title em { display:inline-block; font-family:Georgia,serif; font-weight:400; color:var(--story-blue); position:relative; }

.has-story-page .story-hero .story-hero-title em::after { content:""; position:absolute; left:0; bottom:-8px; width:100%; height:3px; background:#03bafc; transform:rotate(-4deg); }

.has-story-page .story-hero-copy > p { font:400 15px/1.9 JAOF,Arial,sans-serif; color:var(--story-muted); max-width:390px; margin:32px 0 30px; }

.has-story-page .story-hero-collage { position:relative; height:clamp(480px,39vw,665px); min-width:0; isolation:isolate; }

.has-story-page .story-photo-orbit { position:absolute; width:105%; aspect-ratio:1; border:1px solid #03bafc28; border-radius:50%; top:4%; left:-4%; z-index:-1; }

.has-story-page .story-hero-photo { position:absolute; inset:0 0 20px 12%; margin:0; border-radius:180px 180px 22px 22px; overflow:hidden; transform:translateY(var(--story-photo-shift,0px)) rotate(2deg); background:#dde7e8; }

.has-story-page .story-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; }

.has-story-page .story-archive-photo { position:absolute; width:47%; left:-6%; bottom:-6%; margin:0; padding:9px 9px 13px; background:#fff; border-radius:9px; box-shadow:0 15px 38px #102d431b; transform:translateY(calc(var(--story-photo-shift,0px) * -.45)) rotate(-7deg); }

.has-story-page .story-archive-photo img { width:100%; height:auto; aspect-ratio:1.2; object-fit:cover; object-position:50% 50%; border-radius:4px; }

.has-story-page .story-archive-photo figcaption { color:#18394c; font:400 13px/1.5 Georgia,serif; font-style:italic; text-align:center; padding-top:11px; }

.has-story-page .story-since { position:absolute; right:0; bottom:-2%; width:165px; padding:18px 20px; background:#fff; color:#18394c; border-radius:13px; box-shadow:0 12px 35px #102d4310; }

.has-story-page .story-since > span { display:block; font:500 8px/1.5 JAOF,Arial,sans-serif; letter-spacing:.12em; }

.has-story-page .story-since strong { display:block; color:#0003d1; font:400 44px/1.1 JAOF,Arial,sans-serif; letter-spacing:-.06em; margin-top:6px; }

.has-story-page .story-purpose { background:#fff; }

.has-story-page .story-purpose-heading { padding-bottom:44px; border-bottom:1px solid var(--story-line); }

.has-story-page .story-purpose-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,9vw,150px); margin-top:42px; }

.has-story-page .story-purpose-intro p,.has-story-page .story-purpose-principles p { color:var(--story-muted); font:400 15px/1.9 JAOF,Arial,sans-serif; margin:0 0 20px; }

.has-story-page .story-purpose-intro p.story-lead { color:var(--story-ink); font:400 clamp(23px,2.4vw,35px)/1.3 JAOF,Arial,sans-serif; letter-spacing:-.035em; margin-bottom:28px; }

.has-story-page .story-purpose-intro .story-text-link { margin-top:30px; }

.has-story-page .story-small-number { display:block; color:var(--story-muted); font:500 9px/1.65 JAOF,Arial,sans-serif; letter-spacing:.13em; }

.has-story-page .story-purpose-principles article + article { margin-top:30px; padding-top:28px; border-top:1px solid var(--story-line); }

.has-story-page .story-purpose-principles h3 { color:var(--story-ink); font:400 27px/1.15 JAOF,Arial,sans-serif; letter-spacing:-.04em; margin:14px 0 18px; }

.has-story-page .story-journey { background:#102d43; --story-ink:#fff; --story-muted:#b9ccd8; --story-line:#426073; --story-blue:#68d9ff; }

.has-story-page .story-journey-layout { display:grid; grid-template-columns:.85fr 1.1fr; gap:clamp(50px,9vw,150px); align-items:start; }

.has-story-page .story-journey-intro { position:sticky; top:80px; }

.has-story-page .story-journey h2 { color:#fff; }

.has-story-page .story-journey h2 em { color:#a9d5e7; }

.has-story-page .story-journey-intro > p { color:#b9ccd8; font:400 14px/1.9 JAOF,Arial,sans-serif; margin:28px 0; max-width:320px; }

.has-story-page .story-year-nav { display:flex; flex-wrap:wrap; gap:18px; margin-top:36px; }

.has-story-page .story-year-nav a { display:block; min-height:38px; padding-bottom:10px; border-bottom:1px solid #426073; font:400 12px/1.8 JAOF,Arial,sans-serif; color:#b9ccd8; }

.has-story-page .story-year-nav a[aria-current] { color:#68d9ff; border-bottom-color:#68d9ff; }

.has-story-page .story-timeline { position:relative; padding-left:36px; }

.has-story-page .story-timeline::before { content:""; position:absolute; top:12px; bottom:0; left:4px; width:1px; background:linear-gradient(to bottom,#68d9ff 0 var(--story-journey-fill,0%),#426073 var(--story-journey-fill,0%) 100%); }

.has-story-page .story-milestone { position:relative; padding:0 0 65px; scroll-margin-top:65px; }

.has-story-page .story-milestone:last-child { padding-bottom:0; }

.has-story-page .story-timeline-dot { position:absolute; top:20px; left:-36px; width:9px; height:9px; background:#426073; border-radius:50%; box-shadow:0 0 0 7px #102d43; transition:background .4s,box-shadow .4s; }

.has-story-page .story-milestone.is-current .story-timeline-dot { background:#68d9ff; box-shadow:0 0 0 7px #102d43,0 0 0 8px #68d9ff40; }

.has-story-page .story-milestone-year { display:block; color:#7896a9; font:400 clamp(48px,5vw,76px)/1 JAOF,Arial,sans-serif; letter-spacing:-.07em; margin:0 0 24px; transition:color .5s; }

.has-story-page .story-milestone.is-current .story-milestone-year { color:#68d9ff; }

.has-story-page .story-milestone h3 { color:#fff; font:400 25px/1.2 JAOF,Arial,sans-serif; letter-spacing:-.04em; margin:13px 0 16px; }

.has-story-page .story-milestone p { color:#b9ccd8; font:400 14px/1.9 JAOF,Arial,sans-serif; margin:0; }

.has-story-page .story-founder { background:var(--story-paper); }

.has-story-page .story-founder-layout { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,7vw,115px); align-items:center; }

.has-story-page .story-founder-visual { position:relative; min-width:0; }

.has-story-page .story-founder-visual figure { position:relative; margin:0; background:#102d43; border-radius:24px; overflow:hidden; }

.has-story-page .story-founder-visual img { width:100%; height:auto; aspect-ratio:1.22; object-fit:cover; object-position:25% center; opacity:.92; }

.has-story-page .story-founder-visual figcaption { display:flex; flex-direction:column; gap:9px; padding:26px 28px 32px; background:#102d43; }

.has-story-page .story-founder-visual figcaption > span:first-child { color:#8dd8f6; font:500 8px/1.5 JAOF,Arial,sans-serif; letter-spacing:.13em; }

.has-story-page .story-founder-visual figcaption > span:last-child { color:#fff; font:400 25px/1.2 Georgia,serif; font-style:italic; }

.has-story-page .story-watch { position:absolute; left:25px; top:25px; display:flex; align-items:center; gap:13px; padding:10px 15px 10px 10px; border:1px solid #ffffff80; border-radius:40px; color:#fff; background:#102d4380; backdrop-filter:blur(8px); font:500 11px/1.4 JAOF,Arial,sans-serif; cursor:pointer; }

.has-story-page .story-watch-play { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fff; color:#102d43; font-size:10px; }

.has-story-page .story-watch > span:last-child { font-size:19px; margin-left:8px; }

.has-story-page .story-founder-copy h2 { margin-bottom:28px; }

.has-story-page .story-founder-copy > h3 { color:var(--story-ink); font:500 19px/1.4 JAOF,Arial,sans-serif; letter-spacing:-.025em; margin:0 0 22px; }

.has-story-page .story-founder-copy p { color:var(--story-muted); font:400 14px/1.9 JAOF,Arial,sans-serif; margin:0 0 18px; }

.has-story-page .story-founder-copy p:last-child { margin-bottom:0; }

.has-story-page .story-objectives { background:#fff; }

.has-story-page .story-section-heading { display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:55px; margin-bottom:50px; }

.has-story-page .story-section-heading > p { color:var(--story-muted); font:400 14px/1.9 JAOF,Arial,sans-serif; margin:0; max-width:350px; }

.has-story-page .story-objective-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:55px; align-items:start; }

.has-story-page .story-objective-grid details { border-top:1px solid var(--story-line); }

.has-story-page .story-objective-grid summary { display:flex; align-items:center; gap:19px; padding:26px 0; cursor:pointer; list-style:none; color:var(--story-ink); font:400 19px/1.4 JAOF,Arial,sans-serif; letter-spacing:-.025em; }

.has-story-page .story-objective-grid summary::-webkit-details-marker { display:none; }

.has-story-page .story-objective-number { color:var(--story-blue); font:400 10px/1.5 JAOF,Arial,sans-serif; letter-spacing:.03em; flex:none; }

.has-story-page .story-plus { position:relative; width:15px; height:15px; margin-left:auto; flex:none; }

.has-story-page .story-plus::before,.has-story-page .story-plus::after { content:""; position:absolute; background:var(--story-blue); }

.has-story-page .story-plus::before { inset:7px 0 auto; height:1px; }

.has-story-page .story-plus::after { inset:0 auto 0 7px; width:1px; transition:transform .4s; }

.has-story-page .story-objective-grid details[open] .story-plus::after { transform:rotate(90deg); }

.has-story-page .story-objective-grid details > div { padding:0 32px 25px; }

.has-story-page .story-objective-grid p { margin:0; color:var(--story-muted); font:400 14px/1.9 JAOF,Arial,sans-serif; }

.has-story-page .story-governance { background:var(--story-paper); }

.has-story-page .story-identity { display:grid; grid-template-columns:1.25fr 1fr .65fr; gap:40px; border-block:1px solid var(--story-line); padding:28px 0; margin:0; }

.has-story-page .story-identity > div { min-width:0; }

.has-story-page .story-identity dt { color:var(--story-muted); font:400 11px/1.6 JAOF,Arial,sans-serif; margin:0 0 10px; }

.has-story-page .story-identity dd { margin:0; color:var(--story-ink); font:400 19px/1.4 JAOF,Arial,sans-serif; letter-spacing:-.025em; }

.has-story-page .story-governance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:42px; }

.has-story-page .story-governance-grid h3 { color:var(--story-ink); font:400 23px/1.2 JAOF,Arial,sans-serif; letter-spacing:-.04em; margin:16px 0; }

.has-story-page .story-governance-grid p { color:var(--story-muted); font:400 13px/1.9 JAOF,Arial,sans-serif; margin:0; }

.has-story-page .story-governance-contact { margin-top:45px; }

.has-story-page :is(.story-text-link,.story-watch,.story-year-nav a,.story-objective-grid summary):focus-visible { outline:3px solid #03bafc; outline-offset:6px; }

html[data-theme="dark"] body.has-story-page { --story-paper:#0c1e2b; --story-ink:#e6eef3; --story-muted:#aec3d0; --story-blue:#6cdaff; --story-line:#304957; }

html[data-theme="dark"] .has-story-page :is(.story-purpose,.story-objectives) { background:#102635; }

html[data-theme="dark"] .has-story-page .story-journey { background:#071b2a; }

html[data-theme="dark"] .has-story-page .story-timeline-dot { box-shadow:0 0 0 7px #071b2a; }

html[data-theme="dark"] .has-story-page .story-milestone.is-current .story-timeline-dot { box-shadow:0 0 0 7px #071b2a,0 0 0 8px #68d9ff40; }

html[data-theme="dark"] body.has-story-page .story-journey :is(h2,h3) { color:#fff; }

html[data-theme="dark"] .has-story-page :is(.story-space,.story-hero) h2 em { color:#a9d5e7; }

@media(min-width:1700px) { .has-story-page .story-hero .story-hero-title { font-size:clamp(92px,5.5vw,110px); } }

@media(max-width:1100px) {

 .has-story-page .story-hero { padding-top:55px; }

 .has-story-page .story-hero-layout { gap:35px; }

 .has-story-page .story-hero .story-hero-title { font-size:clamp(48px,6.1vw,68px); }

 .has-story-page .story-hero-collage { height:475px; }

 .has-story-page .story-hero-photo { inset:0 0 30px 9%; }

 .has-story-page .story-since { width:140px; }

 .has-story-page .story-purpose-layout,.has-story-page .story-journey-layout,.has-story-page .story-founder-layout { gap:40px; }

 .has-story-page .story-founder-layout { align-items:start; }

 .has-story-page .story-objective-grid { column-gap:35px; }

 .has-story-page .story-governance-grid { gap:26px; }

}

@media(max-width:800px) {

 .has-story-page .story-hero-layout { grid-template-columns:1fr; gap:55px; }

 .has-story-page .story-hero { padding-top:45px; padding-bottom:75px; }

 .has-story-page .story-hero .story-hero-title { font-size:clamp(54px,8.5vw,77px); }

 .has-story-page .story-hero-copy > p { max-width:480px; }

 .has-story-page .story-hero-collage { width:min(520px,92%); height:560px; margin:0 auto; }

 .has-story-page .story-purpose-layout,.has-story-page .story-founder-layout { grid-template-columns:1fr; gap:38px; }

 .has-story-page .story-purpose-principles { display:grid; grid-template-columns:1fr 1fr; gap:28px; }

 .has-story-page .story-purpose-principles article + article { margin:0; padding:0; border:0; }

 .has-story-page .story-journey-layout { grid-template-columns:.8fr 1fr; gap:30px; }

 .has-story-page .story-journey h2 { font-size:39px; }

 .has-story-page .story-journey-intro { top:45px; }

 .has-story-page .story-founder-visual { max-width:600px; }

 .has-story-page .story-section-heading { grid-template-columns:1fr; gap:25px; margin-bottom:36px; }

 .has-story-page .story-section-heading > p { max-width:500px; }

 .has-story-page .story-identity { grid-template-columns:1fr 1fr; gap:25px; }

 .has-story-page .story-identity > div:first-child { grid-column:1/-1; }

 .has-story-page .story-governance-grid { grid-template-columns:1fr; gap:30px; }

 .has-story-page .story-governance-grid article + article { border-top:1px solid var(--story-line); padding-top:28px; }

}

@media(max-width:560px) {

 .has-story-page .story-space { padding-block:60px; }

 .has-story-page .story-hero { padding-top:40px; padding-bottom:70px; }

 .has-story-page .story-breadcrumb { margin-bottom:27px; }

 .has-story-page .story-kicker { font-size:8px; letter-spacing:.11em; }

 .has-story-page .story-hero .story-hero-title { font-size:clamp(43px,12vw,63px); margin-top:20px; }

 .has-story-page .story-hero-copy > p { font-size:14px; margin-top:30px; }

 .has-story-page .story-hero-collage { height:420px; width:93%; }

 .has-story-page .story-hero-photo { inset:0 0 20px 6%; border-radius:140px 140px 16px 16px; }

 .has-story-page .story-archive-photo { width:48%; left:-4%; bottom:-3%; padding:7px 7px 10px; }

 .has-story-page .story-archive-photo figcaption { font-size:11px; padding-top:8px; }

 .has-story-page .story-since { width:119px; padding:15px; right:-1%; bottom:0; }

 .has-story-page .story-since > span { font-size:6px; }

 .has-story-page .story-since strong { font-size:36px; }

 .has-story-page :is(.story-space,.story-hero) h2 { font-size:clamp(34px,9.5vw,45px); }

 .has-story-page .story-purpose-heading { padding-bottom:30px; }

 .has-story-page .story-purpose-layout { margin-top:30px; }

 .has-story-page .story-purpose-principles { grid-template-columns:1fr; gap:28px; }

 .has-story-page .story-purpose-principles article + article { padding-top:26px; border-top:1px solid var(--story-line); }

 .has-story-page .story-purpose-intro p,.has-story-page .story-purpose-principles p { font-size:14px; }

 .has-story-page .story-purpose-principles h3 { font-size:25px; }

 .has-story-page .story-journey-layout { grid-template-columns:1fr; gap:44px; }

 .has-story-page .story-journey-intro { position:static; }

 .has-story-page .story-journey h2 br:nth-child(2) { display:none; }

 .has-story-page .story-year-nav { margin-top:25px; }

 .has-story-page .story-timeline { padding-left:29px; }

 .has-story-page .story-timeline-dot { left:-29px; }

 .has-story-page .story-milestone { padding-bottom:48px; }

 .has-story-page .story-milestone-year { font-size:58px; margin-bottom:18px; }

 .has-story-page .story-milestone h3 { font-size:24px; }

 .has-story-page .story-founder-visual figure { border-radius:17px; }

 .has-story-page .story-founder-visual figcaption { padding:22px; }

 .has-story-page .story-founder-visual figcaption > span:last-child { font-size:23px; }

 .has-story-page .story-watch { left:15px; top:15px; font-size:10px; padding:8px 12px 8px 8px; gap:9px; }

 .has-story-page .story-watch-play { width:28px; height:28px; }

 .has-story-page .story-objective-grid { grid-template-columns:1fr; }

 .has-story-page .story-objective-grid summary { padding-block:23px; font-size:18px; gap:15px; }

 .has-story-page .story-objective-grid details > div { padding-left:28px; }

 .has-story-page .story-identity { gap:22px; }

 .has-story-page .story-identity dd { font-size:17px; }

 .has-story-page .story-governance-grid h3 { font-size:24px; }

}

@media(prefers-reduced-motion:reduce) {

 .has-story-page :is(.story-milestone-year,.story-timeline-dot,.story-plus::after,.story-text-link>span) { transition:none; }

 .has-story-page :is(.story-hero-photo,.story-archive-photo) { transform:none; }

}



/* Compass of Hope: content and labels come from the editable Our Story page. */

body.has-story-page .story-objectives.story-compass {

 --compass-paper:#102d43; --compass-ink:#fff; --compass-muted:#c1d4df; --compass-accent:#92e6ff; --compass-line:#ffffff30;

 background:var(--compass-paper); color:var(--compass-ink); overflow:hidden; overflow:clip;

}

body.has-story-page .story-compass .story-compass-heading { max-width:none; margin-bottom:58px; }

body.has-story-page .story-compass .story-kicker { color:var(--compass-accent); }

body.has-story-page .story-compass h2 { color:var(--compass-ink); margin-top:25px; }

body.has-story-page .story-compass h2 em { color:var(--compass-accent); }

body.has-story-page .story-compass-heading > p { margin:25px 0 0; color:var(--compass-muted); font:400 16px/1.8 JAOF,Arial,sans-serif; max-width:640px; }

body.has-story-page .story-compass-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(45px,7vw,110px); }

body.has-story-page .story-compass-dial { width:min(100%,440px); aspect-ratio:1; border:1px solid var(--compass-line); border-radius:50%; position:relative; margin:0 auto; }

body.has-story-page .story-compass-dial::before,body.has-story-page .story-compass-dial::after { content:""; position:absolute; inset:10%; border:1px solid #ffffff19; border-radius:50%; pointer-events:none; }

body.has-story-page .story-compass-dial::after { inset:20%; }

body.has-story-page .story-compass-center { position:absolute; inset:30%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--compass-accent); text-align:center; font:400 clamp(30px,3.3vw,47px)/1.05 Georgia,serif; font-style:italic; }

body.has-story-page .story-compass-center > span { white-space:nowrap; }

body.has-story-page .story-compass-number { display:block; flex:none; color:var(--compass-accent); font:400 12px/1 JAOF,Arial,sans-serif; }

body.has-story-page .story-compass-choice { font-family:JAOF,Arial,sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; }

body.has-story-page .story-compass-dial .story-compass-choice { position:absolute; transform:translate(-50%,-50%); width:54px; height:54px; min-width:44px; min-height:44px; border:1px solid #ffffff55; border-radius:50%; padding:0; background:var(--compass-paper); color:var(--compass-ink); font-size:12px; transition:background-color .55s ease,color .55s ease,border-color .55s ease; }

body.has-story-page .story-compass-dial .story-compass-choice[aria-pressed="true"] { background:var(--compass-accent); border-color:var(--compass-accent); color:#102d43; }

body.has-story-page .story-compass-dial .story-compass-choice:hover { border-color:var(--compass-accent); }

body.has-story-page .story-compass-panels { min-width:0; }

body.has-story-page .story-compass-panel { display:grid; grid-template-columns:1fr; gap:23px; padding:20px 0; }

body.has-story-page .story-compass-panel + .story-compass-panel { border-top:1px solid var(--compass-line); }

body.has-story-page .story-compass-panel[hidden] { display:none; }

body.has-story-page .story-compass-panel .story-compass-number { color:var(--compass-accent); font:400 clamp(64px,6vw,90px)/1 Georgia,serif; letter-spacing:-.055em; }

body.has-story-page .story-compass-panel h3 { color:var(--compass-ink); margin:0 0 24px; font:500 clamp(29px,3vw,44px)/1.13 JAOF,Arial,sans-serif; letter-spacing:-.04em; max-width:540px; }

body.has-story-page .story-compass-panel p { color:var(--compass-muted); font:400 16px/1.85 JAOF,Arial,sans-serif; max-width:470px; margin:0; }

body.has-story-page .story-compass.is-enhanced .story-compass-panel { border:0; }

body.has-story-page .story-compass-index:empty { display:none; }

body.has-story-page .story-compass-index { display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(30px,7vw,110px); margin-top:65px; }

body.has-story-page .story-compass-index .story-compass-choice { display:flex; align-items:baseline; gap:18px; text-align:left; background:none; color:var(--compass-ink); border:0; border-top:1px solid var(--compass-line); border-radius:0; min-height:74px; width:100%; padding:22px 0; font:400 17px/1.55 JAOF,Arial,sans-serif; transition:color .55s ease; }

body.has-story-page .story-compass-index .story-compass-number { color:var(--compass-accent); font:400 10px/1.5 JAOF,Arial,sans-serif; margin:0; }

body.has-story-page .story-compass-index .story-compass-choice[aria-pressed="true"],body.has-story-page .story-compass-index .story-compass-choice:hover { color:var(--compass-accent); }

body.has-story-page .story-compass-choice:focus-visible { outline:3px solid #03bafc; outline-offset:5px; }

html[data-theme="dark"] body.has-story-page .story-objectives.story-compass { --compass-paper:#071b2a; background:var(--compass-paper); }

html[data-theme="dark"] body.has-story-page .story-compass :is(h2,h3) { color:var(--compass-ink); }

html[data-theme="dark"] body.has-story-page .story-compass h2 em { color:var(--compass-accent); }

@media(min-width:1001px) {

 body.has-story-page .story-compass .story-compass-heading { display:grid; grid-template-columns:1.45fr .9fr; align-items:end; gap:clamp(40px,5vw,85px); }

 body.has-story-page .story-compass-heading > div { min-width:0; }

 body.has-story-page .story-compass-heading > p { margin:0; max-width:430px; justify-self:end; }

}

@media(max-width:1000px) {

 body.has-story-page .story-compass-heading > p { font-size:15px; }

 body.has-story-page .story-compass-layout { gap:45px; }

 body.has-story-page .story-compass-panel h3 { font-size:30px; }

 body.has-story-page .story-compass-panel p { font-size:14px; }

 body.has-story-page .story-compass-dial .story-compass-choice { width:46px; height:46px; font-size:11px; }

 body.has-story-page .story-compass-index .story-compass-choice { font-size:15px; }

}

@media(max-width:700px) {

 body.has-story-page .story-compass .story-compass-heading { margin-bottom:40px; }

 body.has-story-page .story-compass h2 { font-size:clamp(32px,8.7vw,48px); margin-top:24px; letter-spacing:-.04em; }

 body.has-story-page .story-compass .story-kicker { font-size:9px; letter-spacing:.13em; }

 body.has-story-page .story-compass-heading > p { font-size:13px; line-height:1.7; margin-top:20px; max-width:430px; }

 body.has-story-page .story-compass-layout { grid-template-columns:1fr; gap:34px; }

 body.has-story-page .story-compass-dial { width:min(100%,310px); }

 body.has-story-page .story-compass-center { font-size:28px; }

 body.has-story-page .story-compass-dial .story-compass-choice { width:44px; height:44px; }

 body.has-story-page .story-compass-panel { grid-template-columns:54px 1fr; gap:17px; padding:6px 0 24px; }

 body.has-story-page .story-compass-panel .story-compass-number { font-size:49px; line-height:1; letter-spacing:-.06em; }

 body.has-story-page .story-compass-panel h3 { font-size:24px; letter-spacing:-.025em; margin-bottom:16px; }

 body.has-story-page .story-compass-panel p { font-size:13px; line-height:1.7; }

 body.has-story-page .story-compass-index { column-gap:21px; margin-top:20px; }

 body.has-story-page .story-compass-index .story-compass-choice { font-size:12px; line-height:1.5; gap:10px; min-height:66px; padding:17px 0; }

}

@media(max-width:370px) {

 body.has-story-page .story-compass .story-kicker { font-size:8px; letter-spacing:.1em; }

 body.has-story-page .story-compass h2 { font-size:31px; }

 body.has-story-page .story-compass-center { font-size:25px; }

 body.has-story-page .story-compass-panel { grid-template-columns:48px 1fr; gap:14px; }

 body.has-story-page .story-compass-panel h3 { font-size:22px; }

 body.has-story-page .story-compass-index { column-gap:16px; }

}

@media(prefers-reduced-motion:reduce) { body.has-story-page .story-compass-choice { transition:none; } }


/* Our Story page heading size. */
body.has-story-page .page-hero h1 { font-size:35px; line-height:1.2; letter-spacing:-.025em; }

/* An archival group photograph, presented with straight rectangular edges. */
.has-story-page .story-hero-collage { height:auto; aspect-ratio:1.12; }
.has-story-page .story-hero-photo { inset:0 0 20px; border-radius:0; transform:translateY(var(--story-photo-shift,0px)); }
.has-story-page .story-hero-photo img { object-position:50% 42%; }
@media(prefers-reduced-motion:reduce) { .has-story-page .story-hero-photo { transform:none; } }

/* The opening story statement starts directly with its heading. */
body.has-story-page .story-hero .story-kicker{display:none}
body.has-story-page .story-hero h2{margin-top:0}