@import url("design-tokens.css");
.story-hero{background:var(--aurum-ink);color:#fff;padding:clamp(100px,11vw,165px) clamp(22px,8vw,140px) clamp(70px,9vw,120px);position:relative;overflow:hidden}.story-hero::before{content:"A";position:absolute;right:-.02em;bottom:-.33em;font-size:54vw;line-height:.7;color:rgba(205,32,38,.28);font-weight:700;pointer-events:none}.story-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);gap:clamp(36px,8vw,130px);align-items:end;max-width:1440px;margin:0 auto}.story-hero-copy h1{max-width:900px}.story-hero-copy .lead{color:rgba(255,255,255,.78);max-width:720px;margin-top:34px}.story-hero-media{margin:0;position:relative;min-height:460px;overflow:hidden;border-radius:var(--radius-card);background:var(--aurum-red);box-shadow:var(--shadow-editorial)}.story-hero-media img{width:100%;height:100%;min-height:460px;display:block;object-fit:cover;object-position:center;filter:saturate(.88)}.story-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(25,22,19,.72),transparent 55%);pointer-events:none}.story-hero-media figcaption,.story-figure figcaption{position:absolute;z-index:1;left:18px;right:18px;bottom:16px;color:#fff;font-size:10px;line-height:1.4;text-transform:uppercase;letter-spacing:.1em;text-shadow:0 1px 16px rgba(0,0,0,.45)}.story-hero-media figcaption span,.story-figure figcaption span{display:block;color:var(--aurum-gold);margin-bottom:6px}.story-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}.story-meta span{border:1px solid rgba(247,245,235,.35);padding:9px 11px;border-radius:var(--radius-control);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--aurum-gold)}.story-content{background:#fff}.story-grid{display:grid;grid-template-columns:minmax(180px,.32fr) minmax(0,1fr);gap:clamp(34px,8vw,120px);max-width:1180px;margin:0 auto}.story-aside{border-top:2px solid var(--aurum-gold);padding-top:14px;align-self:start;position:sticky;top:120px}.story-aside .kicker{margin:0 0 30px}.story-aside dl{margin:0}.story-aside dl div{padding:14px 0;border-bottom:1px solid var(--aurum-line)}.story-aside dt{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--aurum-red);margin-bottom:7px}.story-aside dd{margin:0;font-size:16px;line-height:1.3}.story-body{max-width:760px}.story-body>p{font-size:18px;line-height:1.7;color:#524d47;margin:0 0 27px}.story-body .story-intro{font-size:clamp(24px,2.7vw,38px);line-height:1.15;letter-spacing:-.04em;color:var(--aurum-ink);margin-bottom:42px}.story-body blockquote{border-left:3px solid var(--aurum-red);padding:7px 0 7px 24px;margin:42px 0;font-size:clamp(24px,3vw,42px);line-height:1.08;letter-spacing:-.045em;color:var(--aurum-ink)}.story-figure{margin:58px 0;position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--aurum-ink)}.story-figure img{display:block;width:100%;height:auto;max-height:660px;object-fit:cover;filter:saturate(.92)}.story-figure--wide img{aspect-ratio:1.47;object-position:center}.story-figure--inset{width:calc(100% + min(14vw,160px));margin-left:calc(min(14vw,160px) * -1)}.story-figure--inset img{aspect-ratio:1.5;object-position:center}.story-next{padding:clamp(90px,13vw,180px) clamp(22px,8vw,140px);background:var(--aurum-gold);text-align:center}.story-next .eyebrow{color:var(--aurum-red)}.story-next h2{margin:26px auto 40px;font-size:clamp(55px,8vw,120px)}.story-next h2 em{color:var(--aurum-red)}.story-next .button{background:var(--aurum-red);color:#fff;border:0}.story-link,.resource-link,.story-link:visited,.resource-link:visited{display:inline-flex;gap:14px;align-items:center;margin-top:9px;color:var(--aurum-red)!important;font-size:10px;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--aurum-red);padding-bottom:10px}.story-link span,.resource-link span{font-size:14px}.resource-feature-deck{font-size:16px;line-height:1.5;max-width:580px;margin:16px 0 0;color:rgba(255,255,255,.82)}.resource-feature .resource-link{color:#fff;border-color:rgba(255,255,255,.75);margin-top:26px}.resource-feature .resource-link span{color:var(--aurum-gold)}
@media(max-width:850px){.story-hero{padding-top:92px}.story-hero-inner,.story-grid{grid-template-columns:1fr}.story-hero-media{min-height:350px}.story-hero-media img{min-height:350px}.story-aside{position:static}.story-figure--inset{width:100%;margin-left:0}.story-body>p{font-size:17px}.story-body .story-intro{font-size:27px}.story-body blockquote{font-size:29px}.story-hero::before{font-size:90vw}}
.story-hero-inner{display:block;max-width:1180px}.story-hero-copy{max-width:980px}
.site-header nav{gap:7px;align-items:center}.site-header nav a{position:relative;display:inline-flex;align-items:center;color:var(--aurum-ink);padding:10px 12px;border:1px solid transparent;border-radius:var(--radius-control);text-decoration:none;transition:color .25s var(--ease-editorial),background .25s var(--ease-editorial),border-color .25s var(--ease-editorial),transform .25s var(--ease-editorial)}.site-header nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--aurum-gold);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-editorial)}.site-header nav a:hover{color:var(--aurum-red);background:rgba(224,172,38,.12);border-color:rgba(224,172,38,.55);text-decoration:none;transform:translateY(-1px)}.site-header nav a:hover::after,.site-header nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}.site-header nav a[aria-current="page"]{color:var(--aurum-red);background:rgba(205,32,38,.055);border-color:rgba(205,32,38,.34)}.site-header nav a[aria-current="page"]::before{content:"";width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--aurum-gold)}.site-header .header-link{color:var(--aurum-red);text-decoration:none}.site-header .header-link:hover{color:var(--aurum-ink)}
@media(max-width:850px){.site-header nav a{padding:0;border:0;border-radius:0;background:none}.site-header nav a::after,.site-header nav a::before{display:none}}

/* Editorial article layout — one clean reading column, patterned after the
   CHAI blog reference the client asked us to match. No sidebar, no stat
   box, no competing type scales: date, headline, image, then a single
   ~700px column of body copy that reads top to bottom like a story. */
.story-page .story-banner{
  position:relative;
  padding:clamp(90px,9vw,128px) clamp(22px,6vw,64px) 0;
  background:#fff;
}
/* 2026-08-17: reversed — client wants no big hero photo on the story page
   itself (that photo moved to the homepage slider instead); this story
   just gets a programme-logo image inline at the top of the body copy.
   width:100% (matching the reading column) upscaled the source past its
   own 387px native resolution and went visibly blurry — capped at
   max-width:387px so it never renders larger than the source file
   actually supports, while still filling the column on any narrower
   screen. Pulled up close under the headline so it doesn't read as a
   big gap before the story starts. */
.story-program-logo{display:block;width:100%;max-width:387px;height:auto;margin:-8px 0 26px}
@media(max-width:850px){.story-program-logo{margin:-4px 0 20px}}
.story-page .story-banner-shade{display:none}
.story-page .story-banner-inner{position:static;max-width:700px;margin:28px auto 0;text-align:left}
.story-page .story-banner .eyebrow{margin:0 0 14px;color:var(--aurum-red);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.story-page .story-banner h1{margin:0;max-width:none;font-size:clamp(30px,3.6vw,42px);line-height:1.12;letter-spacing:-.02em;color:var(--aurum-ink)}
.story-page .story-banner h1 em{color:var(--aurum-red);font-style:normal}
.story-page .story-banner .story-meta{display:none}
.story-page .story-content{padding:clamp(40px,5vw,60px) clamp(22px,6vw,64px) clamp(70px,8vw,104px)}
.story-page .story-grid{display:block;max-width:700px;margin:0 auto}
.story-page .story-aside{display:none}
.story-page .story-body{max-width:none}
.story-page .story-body .story-deck{margin:0 0 30px;font-size:clamp(19px,1.9vw,22px);line-height:1.5;color:var(--aurum-ink);font-style:italic}
.story-page .story-body .story-intro,
.story-page .story-body>p{max-width:none;font-size:18px;line-height:1.75;color:#3a3632;margin:0 0 22px}
/* 2026-08-18: client wants every story's body copy on this same face, not
   just SUPREME-SECURE — widened from the original body.postid-27 scoping
   (see the aurum-story-serif-font enqueue in functions.php, now loaded on
   every story). Source Serif 4 reads as editorial/premium without tipping
   into a dated "newspaper" serif; kept off headings/eyebrow, which stay
   on-brand. */
.story-page .story-body>p,
.story-page .story-body .story-intro,
.story-page .story-body li,
.story-page .story-body blockquote{font-family:"Source Serif 4",Georgia,"Times New Roman",serif}
.story-doc-list{margin:0 0 22px}
.story-doc-list li{margin-bottom:10px}
.story-doc-list .aurum-arrow-icon{margin-left:6px}
/* 2026-08-17: mailto:/registration links typed inline into a story (e.g.
   the SUPREME-SECURE RFP contact email, Zoom link) inherited the plain
   body-copy color with no underline — real <a> tags, cursor:pointer on
   hover, but visually identical to surrounding text, so nothing signalled
   they were clickable. Red + underline matches the link treatment used
   everywhere else on the site (feature-card-link, story-link, etc).
   !important is required: modern-refresh.css carries a sitewide
   `a, a:visited{color:inherit!important;text-decoration:none!important}`
   reset that otherwise wins over this regardless of specificity — same
   root cause already hit once this session on .map-tooltip-links a. */
.story-page .story-body a{color:var(--aurum-red)!important;text-decoration:underline!important;text-underline-offset:2px;text-decoration-color:rgba(205,32,38,.45)!important}
.story-page .story-body a:hover,
.story-page .story-body a:focus-visible{text-decoration-color:var(--aurum-red)!important}
.story-page .story-body h3{margin:40px 0 14px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--aurum-red)}
/* 2026-08-17: plain WordPress "List" block (wp-block-list) inside a story
   had no rule at all, so it fell back to the browser default (16px, tight
   line-height) next to 18px/1.75 paragraphs around it — client flagged the
   Key Dates list as too small. Sized to match the surrounding body copy so
   any list an editor adds in the block editor looks right without them
   needing to know about the separate dotted .story-list variant below. */
.story-page .story-body ul,
.story-page .story-body ol{margin:0 0 22px;padding-left:22px;font-size:18px;line-height:1.75;color:#3a3632}
.story-page .story-body ul li,
.story-page .story-body ol li{margin-bottom:6px}
.story-page .story-body .story-list{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.story-page .story-body .story-list li{padding-left:18px;position:relative;font-size:17px;line-height:1.6;color:#3a3632}
.story-page .story-body .story-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--aurum-gold)}
.story-page .story-body blockquote{max-width:none;margin:34px 0;padding:2px 0 2px 22px;border-left:3px solid var(--aurum-red);font-size:clamp(20px,2.1vw,24px);line-height:1.4;letter-spacing:-.01em;color:var(--aurum-ink)}
.story-page .story-figure,
.story-page .story-figure--wide,
.story-page .story-figure--inset{width:100%;margin:38px 0;margin-left:0}
.story-page .story-figure img{max-height:520px}
.story-page .story-next{padding-top:58px!important;padding-bottom:58px!important}
@media(max-width:850px){
  .story-page .story-banner{padding:80px 20px 0}
  .story-page .story-banner-inner{padding:0}
  .story-page .story-content{padding:36px 20px 64px}
  .story-page .story-body ul,
  .story-page .story-body ol{font-size:17px}
}