/* ==========================================================================
   Kafenia Peace Collective — site styles
   Hand-coded static rebuild. No framework, no build step.
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  /* Brand */
  --ink:        #2e1a10;
  --brown:      #6b4838;
  --terracotta: #8b3c2b;
  --clay:       #c4614a;
  --clay-soft:  #b86850;
  --ochre:      #df9040;
  --ochre-deep: #a85d13;   /* carries white text at 4.95:1 */
  --sky:        #e3edf6;   /* the one cool note in a warm palette */
  --sky-edge:   #bcd4e8;
  --gold:       #e6b352;
  --orange:     #ee8b28;
  --crimson:    #be384a;
  --maroon:     #5a1828;   /* the accomplishments band on the original */
  --sage:       #7d8f5a;

  /* Surfaces */
  --cream:  #fbf6ee;
  --sand:   #f1e6d6;
  --tan:    #e2d0b8;
  --blush:  #f9f0ee;
  --mist:   #eef2e3;
  --white:  #ffffff;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid scale */
  --fs-hero:  clamp(2.25rem, 1.4rem + 3.8vw, 4.25rem);
  --fs-h1:    clamp(1.9rem,  1.3rem + 2.6vw, 3.1rem);
  --fs-h2:    clamp(1.55rem, 1.15rem + 1.8vw, 2.4rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
  --fs-body:  clamp(0.975rem, 0.94rem + 0.18vw, 1.06rem);
  --fs-small: 0.85rem;

  /* Rhythm */
  --gutter:  clamp(1.1rem, 4vw, 2.5rem);
  --band-y:  clamp(3rem, 7vw, 6rem);
  --header-h: 74px;
  --radius:  14px;
  --radius-lg: 22px;
  --measure: 68ch;
  --wrap:    1180px;
  --wrap-narrow: 820px;

  --shadow-card: 0 2px 4px rgba(46,26,16,.05), 0 12px 32px rgba(46,26,16,.07);
  --shadow-lift: 0 4px 10px rgba(46,26,16,.09), 0 20px 48px rgba(46,26,16,.13);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img, picture, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.16; margin: 0 0 .5em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: var(--terracotta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay); }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 3px; }
/* Terracotta all but disappears on the darkest band, so the ring switches to cream there. */
.band--maroon :focus-visible, .band--brown :focus-visible { outline-color: var(--cream); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -120%;
  background: var(--ink); color: var(--cream); padding: .7em 1.4em;
  border-radius: 0 0 var(--radius) var(--radius); z-index: 200; transition: translate .2s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* ---- Layout helpers ---- */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }
.band { padding-block: var(--band-y); }
.band--cream    { background: var(--cream); }
.band--sand     { background: var(--sand); }
.band--blush    { background: var(--blush); }
.band--ochre    { background: var(--ochre); }
.band--ochre-deep { background: var(--ochre-deep); color: var(--white); }
.band--gold     { background: var(--gold); }
.band--crimson  { background: var(--crimson); }
.band--maroon   { background: var(--maroon); }
.band--brown    { background: var(--brown); }
.band--flush    { padding-block: 0; }
.band--ochre, .band--crimson, .band--brown, .band--maroon { color: var(--cream); }
.band--ochre a, .band--crimson a, .band--brown a { color: var(--cream); }
.band--maroon a { color: var(--gold); }
.band--ochre h1, .band--ochre h2, .band--crimson h1, .band--crimson h2,
.band--brown h1, .band--brown h2, .band--maroon h1, .band--maroon h2 { color: var(--cream); }

/* ---- Type patterns ---- */
.section-title {
  font-size: var(--fs-h2);
  text-align: center;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  text-wrap: balance;
}
.section-title .accent { font-style: italic; color: var(--gold); }
.band--gold .section-title .accent,
.band--cream .section-title .accent,
.band--sand .section-title .accent,
.band--blush .section-title .accent { color: var(--clay); }
.band--gold .section-title { color: var(--terracotta); }
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
  margin-bottom: .75rem;
}
.lede { font-size: 1.12em; }
/* A standfirst set in the display face, like the section-title accents and the
   pull quotes. Cormorant has a small x-height, so it needs the size bump and a
   slightly looser line to sit level with the body copy beneath it.
   Clay is 3.79:1 on cream and 3.30:1 on sand, its tightest pairing — both are
   AA for large text only, so the floor stays at 1.5rem (24px). Do not set this
   smaller, or use it on a darker band, without darkening the colour. */
.lede--italic {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem);
  line-height: 1.3; color: var(--clay);
}
.prose { max-width: var(--measure); margin-inline: auto; }
.center { text-align: center; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid rgba(139,60,43,.14);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand img { width: 52px; height: 52px; border-radius: 50%; }
.brand__name { font-family: var(--serif); font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem); color: var(--terracotta); font-weight: 600; }
.nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); list-style: none; margin: 0; padding: 0; }
.nav a {
  font-size: .95rem; color: var(--brown); text-decoration: none;
  padding-block: .35em; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--terracotta); border-bottom-color: var(--clay); }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .55rem;
  color: var(--terracotta);
}
.nav-toggle svg { width: 26px; height: 26px; }
@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto; background: var(--cream);
    border-bottom: 1px solid rgba(139,60,43,.14);
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease);
  }
  .nav > ul { overflow: hidden; flex-direction: column; gap: 0; padding-inline: var(--gutter); }
  .nav[data-open="true"] { grid-template-rows: 1fr; }
  .nav li { border-top: 1px solid rgba(139,60,43,.1); }
  .nav a { display: block; padding: .95em 0; border-bottom: 0; }
}

/* ---- Hero ---- */
.hero { position: relative; }
.hero img { width: 100%; height: clamp(320px, 56vh, 640px); object-fit: cover; }
.hero__caption {
  background: var(--ochre); color: var(--cream);
  font-family: var(--serif); font-size: var(--fs-h2);
  text-align: center; padding: clamp(1.1rem, 3vw, 2.2rem) var(--gutter);
  text-wrap: balance;
}

/* ---- Cards ---- */
.card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-card);
  text-align: center;
  display: flex; flex-direction: column; gap: .35rem;
}
.card h2, .card h3 { font-style: italic; color: var(--clay); font-size: var(--fs-h3); }
.card__icon { font-size: 1.9rem; line-height: 1; margin-bottom: .4rem; }
.card__img { border-radius: var(--radius); overflow: hidden; margin-bottom: 1.1rem; }
.card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card--plain { box-shadow: none; background: transparent; padding: 0; }
/* A card carries its own surface, so it must not inherit a colour band's text colour. */
.band--ochre .card, .band--crimson .card, .band--brown .card,
.band--maroon .card { color: var(--ink); }
.band--ochre .card a, .band--crimson .card a, .band--brown .card a { color: var(--terracotta); }
.band--ochre .card a:hover, .band--crimson .card a:hover, .band--brown .card a:hover { color: var(--clay); }
.band--ochre .card h2, .band--ochre .card h3,
.band--crimson .card h2, .band--crimson .card h3,
.band--brown .card h2, .band--brown .card h3 { color: var(--clay); }
.card__link { margin-top: auto; padding-top: 1rem; font-weight: 600; }

.grid { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
@media (min-width: 1100px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

/* ---- Quote ---- */
.quote {
  font-family: var(--serif); font-size: var(--fs-h3); font-style: italic;
  text-align: center; max-width: 34ch; margin-inline: auto; line-height: 1.4;
}
.quote cite {
  display: block; font-style: normal; font-family: var(--sans);
  /* a fraction of the quote, but never small enough to be hard work */
  font-size: max(.8rem, .62em); margin-top: 1.1rem; opacity: .85;
}
/* A quote set inside a card: the column is narrow, so it scales down from the
   page-level .quote — but never below the card's own body text, and the
   attribution keeps a readable floor of its own. */
.quote--card { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem); margin-top: 1.25rem; max-width: none; }
.quote--card cite { font-size: max(.8rem, .68em); margin-top: .85rem; }

/* ---- Carousel (full-bleed image strip) ---- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(100% / 4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel img { width: 100%; height: clamp(150px, 17vw, 260px); object-fit: cover; }
.carousel button.carousel__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(46,26,16,.55); color: #fff; display: grid; place-items: center;
  transition: background .18s;
}
.carousel__nav:hover { background: rgba(46,26,16,.8); }
.carousel__nav[data-dir="prev"] { left: .75rem; }
.carousel__nav[data-dir="next"] { right: .75rem; }
.carousel__nav svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .carousel__track { grid-auto-columns: calc(100% / 2); } }
@media (max-width: 520px) { .carousel__track { grid-auto-columns: 78%; } }

/* ---- Gallery ---- */
.gallery {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.gallery a {
  display: block; border-radius: 8px; overflow: hidden; background: var(--tan);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gallery a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* A gallery with fewer images than the row has room for. The grid's auto-fill
   keeps the empty tracks, so the images end up flush left against a run of
   nothing — wrong under a centred heading. Flex rather than grid, because grid
   cannot centre a partial last row: with a cap of 240px the images hold their
   size instead of stretching across the band, and every row centres, including
   a trailing one. Below the stacking point the base grid still applies, so
   narrow screens keep full-width images. */
@media (min-width: 560px) {
  .gallery--center { display: flex; flex-wrap: wrap; justify-content: center; }
  .gallery--center > * { flex: 0 1 240px; min-width: 160px; }
}
/* One picture, filling whatever column it is given. The lightbox binds to
   .gallery, so the wrapper stays even for a single image — this just stops the
   auto-fill grid splitting that column into tracks the image then sits left of. */
.gallery--single { grid-template-columns: 1fr; }
.caption { font-size: var(--fs-small); font-style: italic; opacity: .78; margin-top: .85rem; }

/* ---- Video ---- */
.video { max-width: 760px; margin-inline: auto; }
.video__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: var(--brown); cursor: pointer; border: 0; padding: 0; width: 100%;
}
.video__frame img { width: 100%; height: 100%; object-fit: cover; }
.video__frame::after {
  content: ""; position: absolute; inset: 0; background: rgba(46,26,16,.22);
  transition: background .2s;
}
.video__frame:hover::after { background: rgba(46,26,16,.05); }
.video__play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; z-index: 2;
  width: 72px; height: 72px; border-radius: 50%; background: rgba(251,246,238,.92);
  display: grid; place-items: center; transition: transform .22s var(--ease);
}
.video__frame:hover .video__play { transform: scale(1.08); }
.video__play svg { width: 26px; height: 26px; fill: var(--terracotta); margin-left: 4px; }
.video__title { font-family: var(--serif); font-size: var(--fs-h3); text-align: center; margin-top: 1rem; }

/* ---- Modal (video + lightbox) ---- */
.modal {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(20,11,6,.93); padding: clamp(1rem, 4vw, 3rem);
  place-items: center;
}
.modal[data-open="true"] { display: grid; }
.modal__body { width: min(100%, 1100px); }
.modal__body iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.modal__body img { max-height: 84vh; width: auto; margin-inline: auto; border-radius: var(--radius); }
.modal__caption { color: var(--cream); text-align: center; margin-top: 1rem; font-size: var(--fs-small); font-style: italic; }
.modal__close, .modal__prev, .modal__next {
  position: absolute; background: rgba(251,246,238,.14); border: 0; cursor: pointer;
  color: var(--cream); width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; transition: background .18s;
}
.modal__close:hover, .modal__prev:hover, .modal__next:hover { background: rgba(251,246,238,.3); }
.modal__close { top: 1.1rem; right: 1.1rem; }
.modal__prev { left: 1.1rem; top: 50%; translate: 0 -50%; }
.modal__next { right: 1.1rem; top: 50%; translate: 0 -50%; }
.modal svg { width: 22px; height: 22px; }

/* ---- Timeline (History) ---- */
.timeline { position: relative; padding-left: clamp(1.6rem, 4vw, 3rem); }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: .5rem; bottom: 0;
  width: 2px; background: linear-gradient(var(--tan), var(--tan) 92%, transparent);
}
.tl-year, .tl-item { position: relative; }
.tl-year::before, .tl-item::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1.6rem, 4vw, 3rem) + 1px);
  top: .55em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--clay); box-shadow: 0 0 0 4px var(--blush);
}
.tl-year {
  font-family: var(--serif); font-size: var(--fs-h2); color: var(--clay);
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem;
}
.tl-year:first-child { margin-top: 0; }
.tl-item { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.tl-item::before { background: var(--terracotta); width: 10px; height: 10px; top: .7em; }
.tl-date { font-family: var(--serif); font-size: 1.1rem; color: var(--clay); margin-bottom: .55rem; }
.tag {
  display: inline-block; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--terracotta); background: rgba(196,97,74,.16);
  padding: .32em .85em; border-radius: 4px; margin-bottom: .9rem;
}
.tl-item h3 { font-size: var(--fs-h3); color: var(--brown); }
.tl-item .gallery { margin-top: 1.4rem; }
.callout {
  background: var(--mist); border-left: 4px solid var(--sage);
  padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
}
.callout h4 { font-family: var(--serif); font-size: 1.15rem; color: var(--sage); margin-bottom: .5rem; }

/* ---- Stats ---- */
.stats {
  display: flex; flex-wrap: wrap; justify-content: center; text-align: center;
  gap: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
}
.stats > * { flex: 0 1 200px; }
.stat__num { font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; color: var(--gold); font-weight: 600; white-space: nowrap; }
/* A figure carrying a word ("3 Million +") is far wider than a bare numeral and
   broke across two or three lines in its column, so it gets its own scale.
   Sized against Cormorant Garamond measured in a real browser, not against the
   Georgia fallback — Cormorant sets this string at 0.75x Georgia's width, so
   measuring in the fallback would shrink it by a third for no reason. Fits
   every breakpoint from 320 to 1600 with 16px of headroom at its tightest
   (1024px, where the row goes five across). */
.stat__num--wordy { font-size: clamp(2.2rem, 1.1rem + 2.7vw, 3.6rem); }
.band--cream .stat__num, .band--sand .stat__num { color: var(--clay); }
/* The figure is a <p>, so the global p { margin-bottom: 1.15em } was being read
   at the figure's own size — 74px of air under a 64px number. Zero it and let
   the label's margin set the gap; the label's own bottom margin goes too, since
   .stats supplies the spacing between cells. */
.stat__num, .stat__num--wordy { margin-bottom: 0; }
.stat__label {
  font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase;
  margin-top: .5rem; margin-bottom: 0; opacity: .9;
}

/* ---- Community accomplishments (Impact) ----
   The original sets these as six cards on a maroon band: five accomplishments,
   each on a cream card under an orange rule, and a sixth left empty as a dashed
   invitation to send in your own. */
.acc-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-card {
  border-top: 5px solid var(--orange);
  text-align: left; justify-content: center;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.3rem, 2.8vw, 1.9rem);
}
.acc-card p { margin-bottom: 0; }
.acc-add {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 160px; padding: 2rem;
  border: 2px dashed var(--gold); border-radius: var(--radius-lg);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.75rem);
  line-height: 1.1; text-decoration: none;
  transition: background .18s, color .18s, border-style .18s;
}
.acc-add:hover, .acc-add:focus-visible {
  background: var(--gold); color: var(--maroon); border-style: solid;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .8em 1.8em; border-radius: 999px; text-decoration: none;
  background: var(--terracotta); color: var(--cream);
  transition: background .18s, transform .18s var(--ease);
}
.btn:hover { background: var(--clay); color: var(--cream); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--terracotta); box-shadow: inset 0 0 0 2px currentColor; }
.btn--ghost:hover { background: var(--terracotta); color: var(--cream); }

/* ---- Footer ---- */
.site-footer { background: var(--brown); color: var(--sand); padding-block: clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.site-footer h2 { color: var(--cream); font-size: var(--fs-h2); }
.site-footer a { color: var(--gold); }
.site-footer__made { margin-top: 1.25rem; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; list-style: none; padding: 0; margin: 1.75rem 0 0; }
.site-footer__link { display: inline-flex; align-items: center; gap: .5em; }
/* Sized in em so an icon tracks its label, and stroked in currentColor so it
   picks up the link's hover and focus states without a second rule. */
.site-footer__link .ico { width: 1.15em; height: 1.15em; flex: none; }
/* A link with no icon still lines up with the ones that have one. */
.site-footer__link:not(:has(.ico)) { padding-left: 1.65em; }
/* Instagram's own mark, supplied as a file rather than drawn here. Used as a
   mask so only its shape is taken: the colour comes from currentColor, which
   keeps it with the other two through hover and focus.

   Inlined as a data: URI rather than linked. Chromium refuses to load a mask
   image over file://, so a linked one renders blank whenever the pages are
   opened straight off disk — which is how they are reviewed before deploy. It
   also saves a request for a 2 KB asset. Regenerate with:
       python3 _source/tools/make_icon_mask.py
   from assets/img/icons/instagram.png. */
/* The drawn icons' artwork sits inside its 24-unit box — the globe's circle spans
   77% of it, the envelope 78% — while this mark runs edge to edge, so at the same
   box size it read noticeably larger. 80% brings its outer square to the globe's
   diameter, checked side by side at 8x. Scaling the mask rather than the box keeps
   all three boxes identical, so the row's spacing stays even.
   Its stroke is still heavier than the two drawn icons; that is the mark's own
   weight and the only way to change it would be to redraw it. */
.ico--instagram {
  background: currentColor;
  -webkit-mask: url(data:image/png;base64,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) center / 80% no-repeat;
          mask: url(data:image/png;base64,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) center / 80% no-repeat;
}
.site-footer__fine { font-size: var(--fs-small); opacity: .72; margin-top: 2.25rem; }

/* Portrait (vertical) videos */
.video--portrait { max-width: 380px; }
.video--portrait .video__frame { aspect-ratio: 9 / 16; }
.modal__body--portrait iframe { aspect-ratio: 9 / 16; max-height: 84vh; width: auto; margin-inline: auto; }
.video-pair { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }

/* Ochre band reads best in a single cream tone — the italic alone carries the accent */
.band--ochre .section-title .accent { color: var(--cream); }

/* ---- Feature (image beside copy) ---- */
.feature { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; }
.feature__media img { border-radius: var(--radius); }
.feature__body h3 { color: var(--clay); font-size: var(--fs-h3); margin-top: 1.4rem; }
.feature__body h3:first-child { margin-top: 0; }

/* ---- Menu card ---- */
.menu-card {
  background: var(--cream); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 4vw, 2.75rem); max-width: 620px; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: center;
}
.menu-card h3 { color: var(--clay); font-style: italic; font-size: var(--fs-h3); }
.menu-list { list-style: none; padding: 0; margin: 1.5rem 0 0; text-align: left; }
.menu-list li { padding: .65em 0; border-bottom: 1px dotted rgba(139,60,43,.28); }
.menu-list li:last-child { border-bottom: 0; }

/* ---- Month grid ---- */
.months { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 740px) { .months { grid-template-columns: repeat(3, 1fr); } }
.month { background: var(--cream); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-card); }
.month__when { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--clay); margin-bottom: .35rem; }
.month h3 { font-size: 1.4rem; color: var(--terracotta); margin-bottom: .2rem; }
.month__tag { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--brown); margin-bottom: .7rem; }
.month p:last-child { font-size: .93rem; }

/* ---- Impact page ---- */
.quote-card { margin: 0; max-width: 660px; margin-inline: auto; }
.quote-card img { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.stat__pre { font-size: var(--fs-small); opacity: .85; margin-bottom: .3rem; }
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 2rem; margin-bottom: 1.1rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--clay);
}
.projects { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 760px) { .projects { grid-template-columns: repeat(3, 1fr); } }
.project { background: var(--cream); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.9rem); box-shadow: var(--shadow-card); }
.project h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.project h3 a { text-decoration: none; display: inline-block; padding-block: .2em; }
/* A heading that is itself a link keeps the heading's colour and loses the
   underline, the same treatment the project cards already use — otherwise the
   one linked heading in a run of plain ones reads as a different kind of thing.
   The underline comes back on hover and focus, so it is still discoverable. */
.prose h3 a { color: inherit; text-decoration: none; }
.prose h3 a:hover, .prose h3 a:focus-visible { text-decoration: underline; }
.project h3 a:hover { text-decoration: underline; }
.project__with { font-size: var(--fs-small); font-style: italic; opacity: .8; margin-top: .8rem; }

/* ---- People ---- */
.people { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.person { text-align: center; }
.person__photo { width: 150px; margin: 0 auto 1rem; }
.person__photo img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.person h3 { font-size: 1.2rem; color: var(--terracotta); margin-bottom: .2rem; }
.person__role { font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--clay); margin-bottom: .7rem; }
.person p:last-child { font-size: .93rem; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.two-up img { border-radius: var(--radius); }

/* ---- Chapter chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.chip {
  display: inline-flex; align-items: baseline; gap: .45rem;
  background: var(--cream); color: var(--terracotta); text-decoration: none;
  padding: .6em 1.2em; border-radius: 999px; box-shadow: var(--shadow-card);
  font-weight: 600; font-size: .92rem; transition: transform .18s var(--ease), background .18s;
}
.chip span { font-weight: 400; opacity: .7; font-size: .85em; }
.chip:hover { background: var(--terracotta); color: var(--cream); transform: translateY(-2px); }

/* ---- Full-story disclosure ---- */
.more { margin-top: clamp(1.6rem, 4vw, 2.6rem); text-align: center; }
.more > summary {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  color: var(--terracotta); list-style: none;
  padding: .55em 1.35em; border: 1px solid currentColor; border-radius: 999px;
  transition: background .18s, color .18s;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::marker { content: ""; }
.more > summary:hover { background: var(--terracotta); color: var(--cream); }
.more > summary .more__less { display: none; }
.more[open] > summary .more__open { display: none; }
.more[open] > summary .more__less { display: inline; }
.more__body { margin-top: 1.6rem; text-align: left; }
.more__body > p + p { margin-top: 1rem; }

/* ---- Stat notes (History, COVID response) ---- */
.stat-notes {
  display: grid; gap: 1.3rem; margin: 1.6rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.stat-note { border-top: 3px solid var(--terracotta); padding-top: .9rem; }
.stat-note b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1.14rem; color: var(--clay); margin-bottom: .45rem;
}
.stat-note p { font-size: .96rem; }

/* ---- Chapters ---- */
.chapter { scroll-margin-top: 90px; }
.tl-year__span { font-size: .6em; opacity: .7; }
.chapter > .tl-year { margin-bottom: .45rem; }
.chapter__place {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--clay);
  opacity: .9; margin-bottom: 1.4rem;
}
.chapter__intro { font-size: 1.06em; margin-bottom: clamp(2rem, 5vw, 3rem); }
.chips--inline { justify-content: flex-start; margin: 1.1rem 0 1.3rem; }
.chips--inline .chip {
  box-shadow: none; background: rgba(196,97,74,.12); cursor: default;
  font-size: .84rem; padding: .45em 1.05em;
}

/* Timeline galleries read as contact sheets — smaller tiles, more per row */
.tl-item .gallery { grid-template-columns: repeat(auto-fill, minmax(min(30%, 118px), 1fr)); gap: .45rem; }
.tl-item .gallery img { border-radius: 6px; }

/* ==========================================================================
   Contrast corrections (WCAG 2.1 AA)
   The original palette is kept intact; only text colours move, and only where
   the pairing fell short. Ratios noted against the band behind them.
   ========================================================================== */

/* Ochre band: cream on #df9040 was 2.38:1. Dark ink on the same ochre is 6.45:1. */
.band--ochre { color: var(--ink); }
.band--ochre h1, .band--ochre h2, .band--ochre h3 { color: var(--ink); }
.band--ochre .section-title .accent { color: var(--ink); }
.band--ochre a { color: var(--ink); text-decoration-color: rgba(46,26,16,.5); }
.band--ochre a:hover { color: var(--terracotta); }
.band--ochre .quote cite { color: var(--ink); opacity: .78; }

/* Crimson band accent: #e6b352 was 2.84:1, just under the 3:1 large-text floor. */
.band--crimson .section-title .accent { color: #f2cc86; }   /* 3.57:1 */

/* Footer links: #e6b352 on brown was 4.19:1, under the 4.5:1 body-text floor. */
.site-footer a { color: #eec06a; }                          /* 4.75:1 */
.site-footer a:hover { color: var(--cream); }

/* ==========================================================================
   Hero slideshow — matches the original row-background slideshow:
   33 slides, 3s each, 1s crossfade.
   ========================================================================== */
.hero__slides {
  position: relative;
  /* Header plus hero come to 90% of the screen, so a clear tenth of the band below
     sits above the fold. The header is in the flow rather than over the hero, so its
     height comes off here. dvh tracks mobile browser chrome as it hides and shows;
     the vh line above is the fallback for anything that lacks it. */
  height: calc(90vh - var(--header-h));
  height: calc(90dvh - var(--header-h));
  min-height: 380px;          /* keeps it sane on a short landscape phone */
  background: var(--tan);
  overflow: hidden;
}
/* Portrait screens: cap the hero so the photographs stay readable. Every slide is a
   landscape group shot; at full height a portrait box shows only ~38% of the frame
   width, cutting whoever stands at the edges. At this height it keeps ~56%, and the
   section below peeks above the fold as a cue to keep scrolling. */
@media (orientation: portrait) {
  .hero__slides {
    height: 62vh;
    height: 62dvh;
  }
}

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--hero-fade, 1000ms) ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

.hero__pause {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(46,26,16,.5); color: var(--cream);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s, background .18s;
}
.hero__slides:hover .hero__pause,
.hero__pause:focus-visible { opacity: 1; }
.hero__pause:hover { background: rgba(46,26,16,.78); }
.hero__pause svg { width: 16px; height: 16px; fill: currentColor; }

/* Someone who asked for less motion gets a single still image. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__pause { display: none; }
}

/* Carousel slides open in the lightbox, so they need the affordances of a link */
.carousel__track > a { display: block; position: relative; overflow: hidden; }
.carousel__track > a img { transition: transform .4s var(--ease), filter .25s; }
.carousel__track > a:hover img,
.carousel__track > a:focus-visible img { transform: scale(1.04); filter: brightness(1.06); }
.carousel__track > a:focus-visible { outline: 3px solid var(--cream); outline-offset: -3px; }

/* "What we did together" sits beneath the other two and spans both, as on the original */
.grid--pair-then-wide { grid-template-columns: repeat(2, 1fr); }
.grid--pair-then-wide > :last-child { grid-column: 1 / -1; }
@media (max-width: 720px) { .grid--pair-then-wide { grid-template-columns: 1fr; } }

/* This photo is already a 2560x696 banner, so it needs no crop — just room. The global
   .card__img 4:3 cover rule is undone here. A single 1100px column of text would be far
   past a readable line length, hence the two columns below it. */
/* width:100% matters — .card is a column flexbox, and margin-inline:auto alone makes a
   flex item shrink to its content instead of stretching to the card. */
.card--wide .card__img { width: 100%; max-width: 1120px; margin-inline: auto; }
.card--wide .card__img img { aspect-ratio: auto; height: auto; object-fit: contain; }
.card__cols { columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); text-align: left; margin-top: .4rem; }
.card__cols p { break-inside: avoid; margin-bottom: 1.1em; }
@media (max-width: 760px) { .card__cols { columns: 1; } }

/* Kafenia bird emblem above each of the three pillar cards.
   The source is 800x384, not square — the old markup declared 120x120, which reserved
   the wrong box and shifted the layout as the image arrived. */
.card__emblem { display: block; width: 84px; height: auto; margin: 0 auto .75rem; }

/* Farewell quotes — these are the emotional close of the page, so they carry weight.
   They were sitting at 1.15rem, below even the .quote default. */
.farewell-quotes {
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  gap: clamp(2rem, 4vw, 3.25rem);
}
.quote--lead {
  font-size: clamp(1.3rem, 1.05rem + 1.05vw, 1.85rem);
  max-width: 30ch;
  line-height: 1.35;
}

/* Sections where the text column leads and the photo sits beside it, ~60/40,
   matching the About Us rows on the original. */
@media (min-width: 821px) {
  .feature--text-led { grid-template-columns: 1.5fr 1fr; align-items: start; }
}
.feature--text-led .feature__media .caption { margin-top: .8rem; text-align: left; }

/* About Us proportions, matched to the original:
   the founder portrait column is narrower than her biography, and the board
   runs three across rather than filling the row. */
@media (min-width: 821px) {
  .feature--portrait { grid-template-columns: 1fr 1.5fr; }
  .people { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) and (min-width: 561px) {
  .people { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .people { grid-template-columns: 1fr; } }

/* White quotation, used on --ochre-deep where white clears AA at 4.95:1. */
.quote--white, .quote--white cite { color: var(--white); }
.quote--white cite { opacity: 1; }

/* ---- Note card ----
   A cool aside inside the warm palette, for the World Pulse piece on About Us. */
.note-card {
  background: var(--sky);
  border: 1px solid var(--sky-edge);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.75rem);
  max-width: 820px;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  box-shadow: var(--shadow-card);
}
.note-card p { max-width: var(--measure); }

/* the olive rule the original runs down the left edge of this card */
.note-card { border-left: 5px solid #6b7c3e; }

.note-card__meta { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.note-card__badge {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta);
}
.note-card__byline { font-size: .94rem; font-style: italic; color: var(--brown); }
.note-card__title {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.25; color: var(--ink);
  margin-bottom: 1.4rem; max-width: none;
}
.note-card__pq { margin: 0 0 1.75rem; font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.note-card__rule { border: 0; border-top: 1px solid var(--sky-edge); margin: 1.75rem 0; }
.note-card__pull { max-width: 32ch; margin-inline: auto; }
.note-card__cta { margin-top: 1.5rem; max-width: none; }
.note-card__link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: #194a97;          /* 7.18:1 on the card */
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.note-card__link:hover { color: #194a97; text-decoration-thickness: 2px; }

/* ---- Hover swap ----
   Two photographs in one frame, the second crossfading over the first. Mirrors the
   PowerPack rollover on the original, which stacks both in a single grid cell. */
.swap {
  display: grid;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.swap > .swap__layer { grid-area: 1 / 1; transition: opacity .3s ease; }
.swap__layer:last-child { opacity: 0; }
.swap:hover   .swap__layer:first-child,
.swap:focus-visible .swap__layer:first-child,
.swap.is-swapped    .swap__layer:first-child { opacity: 0; }
.swap:hover   .swap__layer:last-child,
.swap:focus-visible .swap__layer:last-child,
.swap.is-swapped    .swap__layer:last-child { opacity: 1; }
.swap:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.swap__hint { text-align: center; }
@media (prefers-reduced-motion: reduce) { .swap > .swap__layer { transition: none; } }

/* ---- Pull quote ----
   Mary Jane's spoken lines through the founder biography, and the grandfather
   quotation in the World Pulse card. Clay rule on the left, as on the original. */
.pullquote {
  border-left: 4px solid var(--clay);
  padding: 1rem 0 1rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.45rem);
  line-height: 1.45;
  color: var(--brown);
}
.feature__body .pullquote { margin-bottom: 0; }
.pullquote cite {
  display: block; font-family: var(--sans); font-style: normal;
  /* floored like .quote cite, so it stays readable as the quote shrinks */
  font-size: max(.8rem, .62em); margin-top: 1rem; opacity: .85;
}

/* Lead paragraph with a pull quote alongside it, as the original History page
   sets them. Stacks below 860px, quote first-to-last so the reading order
   still runs paragraph then quote. */
.lead-pair {
  display: grid; align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: left;
}
.lead-pair > .prose { max-width: none; margin-inline: 0; }
.lead-pair .pullquote { margin: 0; }
@media (max-width: 860px) {
  .lead-pair { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* A quotation given a whole band to itself carries more weight than an inline one. */
.quote--display {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
  line-height: 1.3;
  max-width: 28ch;          /* ch scales with the font, so this holds the line length */
}
/* the attribution gets its own scale — as a fraction of a 40px quote it fell to 10px */
.quote--display cite { font-size: clamp(.85rem, .8rem + .25vw, 1rem); margin-top: 1.4rem; }
@media (min-width: 900px) { .quote--display { max-width: 60rem; } }   /* the original runs to ~1060px */