/* ==========================================================================
   THRYA HEALTH AND RESEARCH FOUNDATION
   Stylesheet: IMPACT STORIES (impact-stories.html)

   Structure of this file:
     1.  Design tokens          (kept identical across every page stylesheet)
     2.  Reset & base
     3.  Typography utilities
     4.  Buttons & links
     5.  Layout utilities
     6.  Site header & navigation
     7.  Site footer
     8.  Scroll reveal / motion
     9.  PAGE — Page hero
     10. PAGE — Featured story
     11. PAGE — Filters & story grid
     12. Back-to-top button
     13. MOBILE RESPONSIVE (section by section, labelled)
   ========================================================================== */


/* ----------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------- */
:root{
  --color-cream:        #FBF6EF;
  --color-cream-deep:   #F3E8D8;
  --color-paper:        #FFFDF9;
  --color-forest:       #14332A;
  --color-forest-2:     #1F5040;
  --color-terracotta:   #B85C34;
  --color-terracotta-deep:#93482A;
  --color-gold:         #C08A34;
  --color-ink:          #211D18;
  --color-ink-soft:     #5B564D;
  --color-line:         #E3D6C2;
  --color-sage:         #E3E8D6;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-xxl: 8rem;

  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 32px;

  --shadow-soft: 0 24px 60px -30px rgba(20,51,42,.35);
  --shadow-lift: 0 14px 34px -18px rgba(20,51,42,.28);

  --container-w: 1200px;
  /* Left offset of the .nav-capsule pill itself (the rounded glass bar),
     computed the way the browser positions it: .header-inner is centered
     at max-width 1200px inside .site-header (which itself has 1.5rem side
     padding), so once the viewport is wider than 1200px + that padding,
     extra space opens up on both sides — (100vw - 1248px)/2 — on top of
     the fixed padding stack up to the capsule's own edge (site-header
     1.5rem + header-inner .6rem = 2.1rem / 33.6px — NOT including the
     capsule's own 1.6rem inner padding, since we want the pill's outer
     edge, not the logo text sitting inside it). max(...,0px) keeps it
     from going negative on narrower screens. */
  --hero-indent: calc(33.6px + max((100vw - 1248px) / 2, 0px));
  --header-h: 124px;
}

/* ----------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body{ margin: 0; background: var(--color-cream); color: var(--color-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--color-forest); margin: 0 0 .6em; line-height: 1.15; font-weight: 500; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor: pointer; }

.skip-link{ position: absolute; left: -999px; top: 0; background: var(--color-forest); color: #fff; padding: .8rem 1.2rem; z-index: 999; border-radius: 0 0 8px 0; }
.skip-link:focus{ left: 0; }
:focus-visible{ outline: 2.5px solid var(--color-terracotta); outline-offset: 3px; }

/* ----------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ---------------------------------------------------------------------- */
.eyebrow{ font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-terracotta); margin: 0 0 .9rem; display: inline-block; }
.text-link{ color: var(--color-forest-2); font-weight: 600; border-bottom: 1.5px solid var(--color-terracotta); padding-bottom: 2px; transition: color .2s ease; }
.text-link:hover{ color: var(--color-terracotta); }

/* ----------------------------------------------------------------------
   4. BUTTONS & LINKS
   ---------------------------------------------------------------------- */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.9rem; border-radius: 999px; font-weight: 600; font-size: .98rem; border: 1.5px solid transparent; transition: transform .2s ease, background .25s ease; }

/* ----------------------------------------------------------------------
   5. LAYOUT UTILITIES
   ---------------------------------------------------------------------- */
.container{ max-width: var(--container-w); margin: 0 auto; padding: 0 1.5rem; }

/* ----------------------------------------------------------------------
   6. SITE HEADER & NAVIGATION — floating glass capsule
   (identical markup/styles to the What We Do / Home page header)
   ---------------------------------------------------------------------- */
.site-header{
  /* NOTE: no backdrop-filter/transform directly on this element or on
     .header-inner — either would make this sticky header the containing
     block for any position:fixed descendant (like the mobile nav panel
     below), trapping it inside the header's own box instead of the
     viewport. The glass effect instead lives on .header-inner::before,
     a pseudo-element, which never becomes a containing block for real
     DOM descendants like .site-nav. */
  position: sticky; top: 0; z-index: 100; width: 100%;
  padding: 14px 1.5rem;
  background: transparent;
  transition: padding .35s ease;
}
.site-header.is-scrolled{ padding-top: 10px; padding-bottom: 10px; }

.header-inner{
  position: relative;
  height: 96px;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 .6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* the nav pill: logo + links, its own glass capsule */
.nav-capsule{
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 70px; padding: 0 .6rem 0 1.6rem;
}
.nav-capsule::before{
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: rgba(251, 246, 239, .62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 18px 40px -22px rgba(20, 51, 42, .35),
    0 2px 8px -2px rgba(20, 51, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled .nav-capsule::before{
  background: rgba(251, 246, 239, .86);
  box-shadow:
    0 22px 44px -20px rgba(20, 51, 42, .4),
    0 2px 10px -2px rgba(20, 51, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}

.brand{ display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand-mark {
    width: 152px;
    height: 47px;
    object-fit: contain;
}.brand-name{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: .04em; color: var(--color-forest); }

.site-nav{ display: flex; align-items: center; gap: .25rem; }
.nav-link{
  font-weight: 600; font-size: .92rem; color: var(--color-ink);
  padding: .6rem 1.05rem; border-radius: 999px;
  transition: color .25s ease, background .25s ease;
}
.nav-link:hover,
.nav-link.is-active{
  color: var(--color-terracotta); background: rgba(20, 51, 42, .07);
}

/* separate floating CTA pill, outside the nav capsule — dark, with a
   circular arrow bubble, matching a "book appointment" style hero CTA */
.nav-cta{
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--color-forest); color: #fff !important; font-weight: 600; font-size: .92rem;
  padding: .5rem .5rem .5rem 1.4rem; border-radius: 999px;
  box-shadow: 0 14px 28px -12px rgba(20, 51, 42, .55);
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.nav-cta:hover{ background: var(--color-forest-deep, #0E241D); transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(20, 51, 42, .65); }
.nav-cta-arrow{
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-terracotta);
  font-size: 1rem; line-height: 1;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    padding: 0;
    margin-right: 1.2rem;
}
.nav-toggle span{ display: block; height: 2px; width: 100%; background: var(--color-forest); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------------
   7. SITE FOOTER
   ---------------------------------------------------------------------- */
.site-footer{
  position: relative;
  background: linear-gradient(175deg, var(--color-forest) 0%, #142b23 100%);
  color: #E9E3D6;
  padding: var(--space-xl) 0 var(--space-md);
  margin-top: var(--space-xxl);
  overflow: hidden;
}

/* subtle top accent line */
.site-footer::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta), var(--color-gold), var(--color-terracotta));
  opacity: .85;
}

/* faint radial glow for depth, matching CTA band */
.site-footer::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(214, 163, 63, .12), transparent 55%);
  pointer-events: none;
}

.footer-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.footer-logo{
  display: block;
  width: 71px;
  height: 65px;
  margin-left: 0px;
  margin-top: -6px;
  margin-bottom: .4rem;
  opacity: 1;
}

.footer-name{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fff;
  margin: 1.1rem 0 .3rem;
  line-height: 1.35;
}

.footer-tagline{
  color: var(--color-gold);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.footer-col h3{
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: .6rem;
}
.footer-col h3::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--color-terracotta);
}

.footer-col a, .footer-col p{
  display: block;
  color: #D9D2C2;
  font-size: .95rem;
  margin-bottom: .65rem;
  line-height: 1.5;
}

.footer-col a{
  position: relative;
  width: fit-content;
  transition: color .25s ease, transform .25s ease;
}
.footer-col a:hover{
  color: #fff;
  transform: translateX(3px);
}

.footer-bottom{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p{
  margin: 0;
  font-size: .85rem;
  color: #B9AF9C;
}

.footer-social{ display: flex; gap: .9rem; }
.footer-social a{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: #E9E3D6;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.footer-social a:hover{
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px -6px rgba(196, 106, 79, .55);
}



/* ----------------------------------------------------------------------
   8. SCROLL REVEAL / MOTION
   ---------------------------------------------------------------------- */
.js [data-reveal]{ opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------------------
   9. PAGE — PAGE HERO
   ---------------------------------------------------------------------- */
.page-hero{
  position: relative;
  padding: var(--space-xl) 0 var(--space-xl);
  overflow: hidden;
  background: linear-gradient(165deg, var(--color-forest) 0%, #0F241D 100%);
  border-radius: 12px;
}
.page-hero::before{
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 90% -12%, rgba(192,138,52,.24), transparent 55%),
    radial-gradient(circle at 2% 118%, rgba(31,80,64,.6), transparent 50%);
}
.page-hero::after{
  content: '';
  position: absolute;
  left: 1.5rem; right: 1.5rem; bottom: 0;
  height: 1px;
  background: rgba(255,255,255,.12);
}

.page-hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.7fr .7fr;
  gap: var(--space-xl);
  align-items: center;
}
.page-hero-copy{ max-width: 62ch; }
.page-hero .eyebrow{ color: var(--color-gold); }
.page-hero h1{
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  max-width: 20ch;
  letter-spacing: -.01em;
  color: #fff;
}
.page-hero-lede{ font-size: 1.15rem; color: rgba(255,255,255,.72); max-width: 56ch; }

/* vertical photo filmstrip — a slow, continuous scroll of field photos,
   masked top and bottom so images fade in/out rather than cut off */
.page-hero-filmstrip{
  position: relative;
  height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.filmstrip-track{
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: filmstrip-scroll 62s linear infinite;
}
.filmstrip-track img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.page-hero-filmstrip:hover .filmstrip-track,
.page-hero-filmstrip:focus-within .filmstrip-track{
  animation-play-state: paused;
}

@keyframes filmstrip-scroll{
  from{ transform: translateY(0); }
  to{ transform: translateY(-2150px); }
}

@media (prefers-reduced-motion: reduce){
  .filmstrip-track{ animation: none; }
}

/* ---- responsive: drop the filmstrip on tablet/mobile, stack copy full-width ---- */
@media (max-width: 860px){
  .page-hero-grid{ grid-template-columns: 1fr; }
  .page-hero-filmstrip{ display: none; }
}

/* ----------------------------------------------------------------------
   FEATURED STORY (rotating, typewriter headline) — full-bleed bg, capped content
   ---------------------------------------------------------------------- */
.featured-story{ padding-bottom: var(--space-xxl); }
.featured-bg{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-cream-deep) 0%, var(--color-sage) 100%);
}
.featured-bg::before{
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 92% 10%, rgba(192,138,52,.22), transparent 55%),
    radial-gradient(circle at 4% 100%, rgba(31,80,64,.14), transparent 50%);
}
.featured-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding-top: var(--space-xl);
  padding-bottom:0;
}
.featured-media{
  align-self: stretch;
  height: 380px;
  min-height: 380px;
  position: relative;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}
.featured-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity .5s ease;
}
.featured-media img.is-active{ opacity: 1; }
.featured-copy{ padding-right: clamp(0px, 4vw, 2rem); }
.story-tag{ display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-terracotta); margin-bottom: .8rem; transition: color .3s ease; }
.featured-copy h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); min-height: 2.5em; }
.featured-copy h2 .fs-cursor{ display: inline-block; width: 2px; margin-left: 2px; background: var(--color-terracotta); animation: fs-blink 1s step-end infinite; }
@keyframes fs-blink{ 50%{ opacity: 0; } }
.featured-meta{ font-size: .85rem; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.featured-copy p:not(.featured-meta){ color: var(--color-ink-soft); opacity: 0; transition: opacity .4s ease; }
.featured-copy p.is-in{ opacity: 1; }
.featured-dots{ display: flex; gap: .5rem; margin-top: 1.6rem; }
.featured-dots button{ width: 26px; height: 4px; border-radius: 2px; border: none; background: var(--color-line); cursor: pointer; padding: 0; }
.featured-dots button.is-active{ background: var(--color-terracotta); }
.featured-dots button:focus-visible{ outline: 2px solid var(--color-terracotta); outline-offset: 2px; }
@media (max-width: 768px){
  .featured-grid{ grid-template-columns: 1fr; padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .featured-copy{ padding-right: 0; }
}
@media (prefers-reduced-motion: reduce){
  .featured-copy h2 .fs-cursor{ animation: none; }
}


/* ----------------------------------------------------------------------
   11. PAGE — FILTERS & STORY GRID
   ---------------------------------------------------------------------- */
.story-index{ padding-bottom:0; }
.filter-row{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem; margin-bottom: var(--space-lg); }
.filter-chips{ display: flex; gap: .8rem; flex-wrap: wrap; }
.filter-chip{ background: var(--color-paper); border: 1.5px solid var(--color-line); border-radius: 999px; padding: .6rem 1.3rem; font-size: .9rem; font-weight: 600; color: var(--color-ink-soft); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filter-chip:hover{ border-color: var(--color-terracotta); }
.filter-chip.is-active{ background: var(--color-forest); border-color: var(--color-forest); color: #fff; }

.sort-control{ display: flex; align-items: center; gap: .6rem; }
.sort-label{ font-size: .82rem; font-weight: 600; color: var(--color-ink-soft); }
.sort-select{
  appearance: none; -webkit-appearance: none;
  background-color: var(--color-paper);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B5147' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 7px;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  padding: .6rem 2.4rem .6rem 1.2rem;
  font-size: .85rem; font-weight: 600; color: var(--color-ink-soft);
  cursor: pointer;
  transition: border-color .2s ease;
}
.sort-select:hover{ border-color: var(--color-terracotta); }
.sort-select:focus{ outline: none; border-color: var(--color-terracotta); }
.story-index-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.story-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.9rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); }

/* Deep-linked story (e.g. from the home page "Latest from the field" cards):
   impact-stories.html#story-diabetes-launch scrolls to the card and makes it
   the :target, which plays this highlight — a terracotta ring + soft glow that
   holds for a few seconds and then fades. Delay lets the scroll start first.
   fill-mode is 'backwards' (not 'both') so the card's normal hover shadow
   works again once the highlight has finished. */
.story-card:target{
  scroll-margin-top: 1rem;
  animation: story-highlight 4.5s ease-out .35s backwards;
}
@keyframes story-highlight{
  0%   { box-shadow: 0 0 0 0 rgba(184,92,52,0); }
  10%, 75%{
    box-shadow:
      0 0 0 4px var(--color-terracotta),
      0 0 0 14px rgba(184,92,52,.18),
      0 22px 44px -18px rgba(20,51,42,.45);
  }
  100% { box-shadow: 0 0 0 0 rgba(184,92,52,0); }
}
@media (prefers-reduced-motion: reduce){
  .story-card:target{ animation: none; box-shadow: 0 0 0 4px var(--color-terracotta); }
}
.story-card-link{ position: absolute; inset: 0; z-index: 1; }
.story-card > *:not(.story-card-photo):not(.story-card-link){ position: relative; z-index: 2; }

/* hover photo reveal */
.story-card-photo{
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  transition: opacity .45s ease, transform .6s ease;
}
.story-card:hover .story-card-photo{ opacity: 1; transform: scale(1); }
.story-card::after{
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(20,51,42,.88) 15%, rgba(20,51,42,.15) 80%);
  opacity: 0; transition: opacity .45s ease;
}
.story-card:hover::after{ opacity: 1; }

.story-date{
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: .45rem;
  transition: color .3s ease;
}
.story-card:hover .story-date{ color: rgba(255,255,255,.7); }

.story-card h3{ font-size: 1.1rem; margin-bottom: .5rem; transition: color .3s ease; }
.story-card .story-teaser{ font-size: .92rem; color: var(--color-ink-soft); margin: 0; transition: color .3s ease; }
.story-card:hover h3,
.story-card:hover .story-teaser{ color: #fff; }
.story-card:hover .story-tag{ color: var(--color-gold); }

/* read more */
.story-more{
  font-size: .92rem; color: var(--color-ink-soft); margin: 0;
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, color .3s ease;
}
.story-card.is-expanded .story-more{ max-height: 280px; margin-top: .6rem; }
.story-card:hover .story-more{ color: rgba(255,255,255,.85); }
.story-more a{ color: var(--color-terracotta-deep); font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; transition: color .3s ease; }
.story-card:hover .story-more a{ color: var(--color-gold); }
/* row holding the "Read more/less" toggle and the LinkedIn pill, bottom of the card */
.story-actions{
  position: relative; z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .7rem;
}
.story-toggle{
  position: relative; z-index: 3;
  display: inline-block;
  background: none; border: none; padding: 0;
  font-family: var(--font-body); font-weight: 600; font-size: .85rem;
  color: var(--color-forest-2); border-bottom: 1.5px solid var(--color-terracotta);
  cursor: pointer; transition: color .3s ease, border-color .3s ease;
}
.story-card:hover .story-toggle{ color: #fff; border-color: var(--color-gold); }
.story-toggle:focus-visible{ outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

/* view post on LinkedIn — sits to the right of the toggle, revealed once the card is expanded */
.story-view-post{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--color-terracotta);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1;
  padding: .55rem .9rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease;
}
.story-card.is-expanded .story-view-post{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.story-view-post:hover,
.story-view-post:focus-visible{ background: var(--color-gold); color: var(--color-forest-2); }
.story-view-post:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .story-card-photo{ transition: opacity .2s ease; }
  .story-view-post{ transition: opacity .2s ease, background .2s ease, color .2s ease; }
}

@media (max-width: 640px){
  .story-view-post{ font-size: .72rem; padding: .48rem .75rem; }
}


/* ----------------------------------------------------------------------
   12. BACK TO TOP BUTTON
   ---------------------------------------------------------------------- */
.to-top{ position: fixed; right: 1.6rem; bottom: 1.6rem; width: 48px; height: 48px; border-radius: 50%; background: var(--color-forest); color: #fff; border: none; font-size: 1.2rem; box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, background .2s ease; z-index: 90; }
.to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover{ background: var(--color-terracotta); }


/* ==========================================================================
   13. MOBILE RESPONSIVE
   Organised section by section, matching the numbering above. Rebuilt to
   match the home page's mobile approach: a single ≤640px breakpoint,
   small header, tight padding, reduced empty space. Nav and footer are
   copied over unchanged from the home page stylesheet so both pages
   behave and look identical on mobile.
   ========================================================================== */

/* ---- 13.1 Layout & tablet breakpoint (≤ 1024px) ---- */
@media (max-width: 1024px){
  :root{ --space-xxl: 6rem; --space-xl: 3.6rem; }
  .story-index-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   13.2 HEADER & NAVIGATION (rebuilt from scratch)
   Identical to the home page's mobile nav capsule.
   ========================================================================== */
@media (max-width: 640px){
  :root{ --header-h: 88px; }

  .site-header{ padding: 10px 1rem; }
  .header-inner{ height: 64px; padding: 0 .3rem; }

  .nav-toggle{ display: flex; }

  .nav-capsule{
    height: 64px;
    padding: 0 .4rem 0 1rem;
  }
  .brand-mark{
    width: 43px;
    height: 64px;
    margin-left: 12px;
  }
  .brand-name{ font-size: 1.05rem; }

  /* CTA pill shrinks to just its arrow bubble to save space */
  .nav-cta{ font-size: .72rem; gap: .4rem; padding: .3rem .3rem .3rem .8rem; }
  .nav-cta-arrow{ width: 26px; height: 26px; font-size: .85rem; }

  /* nav links drop out of the capsule row and open as a small floating
     card — about half the screen height — instead of a full-height panel */
  .site-nav{
    position: fixed;
    top: calc(var(--header-h) + .5rem);
    left: 50%;
    width: min(88vw, 360px);
    max-height: 50vh;
    transform: translateX(-50%) translateY(-12px) scale(.96);
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .8rem;
    border-radius: var(--radius-lg);
    /* same frosted-glass recipe as .nav-capsule::before. backdrop-filter is
       safe here because .site-nav is itself the fixed element — it has no
       fixed descendants that could get trapped by a new containing block. */
    background: rgba(251, 246, 239, .62);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
      0 18px 40px -22px rgba(20, 51, 42, .35),
      0 2px 8px -2px rgba(20, 51, 42, .12),
      inset 0 1px 0 rgba(255, 255, 255, .55);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .35s ease, box-shadow .35s ease;
  }
  /* keep in step with the capsule, which gets more opaque once scrolled */
  .site-header.is-scrolled .site-nav{
    background: rgba(251, 246, 239, .86);
    box-shadow:
      0 22px 44px -20px rgba(20, 51, 42, .4),
      0 2px 10px -2px rgba(20, 51, 42, .16),
      inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  /* browsers without backdrop-filter: fall back to a near-solid panel */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .site-nav,
    .site-header.is-scrolled .site-nav{ background: rgba(251, 246, 239, .97); }
  }
  .site-nav.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  .nav-link{ width: 100%; font-size: 1rem; padding: .8rem .9rem; text-align: left; }

  body.nav-open{ overflow: hidden; }
}

/* ==========================================================================
   13.3 PAGE HERO (rebuilt from scratch)
   Small-header treatment: short section, tight padding, filmstrip already
   hidden at ≤860px, copy takes the full width.
   ========================================================================== */
@media (max-width: 640px){
  .page-hero{
    padding: 1.8rem 0 1.6rem;
    border-radius: var(--radius-sm);
  }
  .page-hero::after{ left: 1rem; right: 1rem; }

  .page-hero-grid{ gap: 1.2rem; }
  .page-hero-copy{ max-width: 100%; }

  .page-hero .eyebrow{ font-size: .7rem; margin-bottom: .5rem; }

  .page-hero h1{
    font-size: 1.7rem;
    line-height: 1.2;
    max-width: 100%;
    margin-bottom: .5rem;
  }
  .page-hero-lede{ font-size: .88rem; max-width: 100%; }

  /* the ≤860px desktop rule turns the filmstrip off entirely — bring it
     back here, stacked under the copy, at a shorter mobile height */
  .page-hero-filmstrip{
    display: block;
    height: 220px;
    border-radius: var(--radius-md);
  }
  /* image height left at its desktop value on purpose — the scroll
     animation's -2150px keyframe distance is tuned to that image height,
     so changing it here would make the loop jump at restart */
}

/* ==========================================================================
   13.4 FEATURED STORY (rebuilt from scratch)
   Photo shrinks and sits above the copy; copy padding and type scale
   pulled in tight, matching the density of the rest of the mobile site.
   ========================================================================== */
@media (max-width: 640px){
  .featured-story{ padding-bottom: 2.6rem; }

  .featured-grid{
    gap: 1.2rem;
    padding-top: 1.8rem;
  }

  .featured-media{
    height: 200px;
    min-height: 200px;
    border-radius: var(--radius-md);
    margin: .9rem 0;
  }

  /* .featured-copy has no box of its own on mobile — this lets its
     children (tag, h2, meta, paragraph) sit as items alongside
     .featured-media in the same grid, so they can be reordered around
     the photo with `order` below, without touching the HTML */
  .featured-copy{ display: contents; }

  .story-tag{ order: 1; font-size: .66rem; margin-bottom: .5rem; }

  .featured-copy h2{
    order: 2;
    font-size: 1.2rem;
    min-height: 3.2em;
  }
  .featured-meta{ order: 3; font-size: .68rem; margin-bottom: 0; }

  .featured-media{ order: 4; }

  .featured-copy p:not(.featured-meta){ order: 5; font-size: .85rem; line-height: 1.55; }

  /* covers a standalone "read more" link if it isn't part of the
     paragraph text itself */
  .featured-copy > a{ order: 6; margin-top: .6rem; }

  .featured-dots{ order: 7; margin-top: 1.1rem; }
  .featured-dots button{ width: 20px; height: 3px; }
}

/* ==========================================================================
   13.5 FILTERS & STORY GRID (rebuilt from scratch)
   Same single-column stack as before, just tighter: smaller card padding,
   type, and radius, with less gap between cards.
   ========================================================================== */
@media (max-width: 640px){
  .story-index{ padding-top: 0; }

  .filter-row{
    gap: .7rem;
    margin-bottom: 1.4rem;
  }
  .filter-chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .4rem;
    -webkit-overflow-scrolling: touch;
    gap: .5rem;
  }
  .filter-chip{
    flex-shrink: 0;
    font-size: .78rem;
    padding: .45rem 1rem;
  }
  .sort-control{ width: 100%; justify-content: flex-end; }
  .sort-select{ font-size: .78rem; padding: .5rem 2.1rem .5rem 1rem; }

  .story-index-grid{ grid-template-columns: 1fr; gap: .9rem; }

  .story-card{ padding: 1.2rem; border-radius: var(--radius-sm); }

  .story-date{ font-size: .64rem; margin-bottom: .35rem; }
  .story-card h3{ font-size: .98rem; margin-bottom: .4rem; }
  .story-card .story-teaser{ font-size: .82rem; }

  .story-more{ font-size: .82rem; }
  .story-toggle{ font-size: .78rem; margin-top: .55rem; }
}

/* ==========================================================================
   13.6 FOOTER (rebuilt from scratch)
   Identical to the home page's mobile footer.
   ========================================================================== */
@media (max-width: 640px){
  .site-footer{ padding: 1.8rem 0 1rem; margin-top: var(--space-lg); }

  .footer-inner{
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem .8rem;
    padding-bottom: 1.1rem;
  }
  .footer-brand{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .6rem;
  }
  /* Quick links (2nd child) and Get involved (3rd child) sit side by
     side; Reach us (4th child) drops back to full width below them */
  .footer-col:nth-child(4){ grid-column: 1 / -1; }

  .footer-logo{ grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 36px; margin: 0; }
  .footer-name{ grid-column: 2; grid-row: 1; font-size: .8rem; margin: 0; line-height: 1.25; align-self: end; }
  .footer-tagline{ grid-column: 2; grid-row: 2; font-size: .58rem; margin: 0; align-self: start; white-space: normal; }

  .footer-col h3{ font-size: .66rem; margin-bottom: .45rem; padding-bottom: .3rem; }
  .footer-col a, .footer-col p{ font-size: .78rem; margin-bottom: .3rem; }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-top: .8rem;
  }
  .footer-bottom p{ font-size: .68rem; }

  .footer-social{ gap: .5rem; }
  .footer-social a{ width: 26px; height: 26px; }
  .footer-social a svg{ width: 14px; height: 14px; }
}

/* ==========================================================================
   13.7 BACK TO TOP (rebuilt from scratch)
   Identical to the home page's mobile back-to-top button.
   ========================================================================== */
@media (max-width: 640px){
  .to-top{ right: 1rem; bottom: 1rem; width: 40px; height: 40px; font-size: 1rem; }
}