/* ==========================================================================
   MIRAI-ENERGY — shared stylesheet for the whole site
   (hub · /tfe/ seed project · /retreat/ · /community/)

   Plain CSS, no build step, no external requests. Design tokens are CSS custom
   properties (see :root) — retheme the entire site by editing that block.
   Retheme history: originally the MIRAI Retreat stylesheet (teal/sand), then
   generalised Aug 2026; retinted Sep 2026 to "Sunrise" — warm paper, indigo
   ink, amber accent — to match the holding page at index.html.
   ========================================================================== */

/* ----- Design tokens ----------------------------------------------------- */
:root {
  /* Palette — "Sunrise": warm paper + indigo ink + amber accent, matching
     the holding page at /index.html. --c-* names are kept from the original
     teal/sand palette so every component below still works unchanged. */
  --c-deep:    #171034; /* primary — indigo ink (headers, nav, footer)       */
  --c-deep-2:  #110c28; /* darker shade for gradients / hovers               */
  --c-teal:    #6f6a90; /* secondary muted violet (links, highlights)        */
  --c-teal-ink:#4a4667; /* muted violet for text on light bg (AA contrast)   */
  --c-accent:  #ffb020; /* amber accent (CTAs, rules) — the "energy" note    */
  --c-accent-d:#a15c00; /* dark amber — hover state, readable as text        */
  --c-green:   #7a6a00; /* olive-gold "confirmed" accent (badges only)       */
  --c-green-d: #4a3f00; /* deep olive for gradients                          */

  --c-ink:     #1d1b33; /* primary body text                                 */
  --c-muted:   #6f6a90; /* secondary text                                    */
  --c-line:    #e7ded0; /* hairline borders on paper                         */
  --c-line-2:  #d8cdb3; /* slightly stronger border                         */

  --c-sand:    #fdfaf4; /* warm paper page background                       */
  --c-sand-2:  #f5efe0; /* alternating section background                   */
  --c-paper:   #ffffff; /* cards / raised surfaces                          */

  --c-focus:   #a15c00; /* focus ring                                       */

  /* Typography — MIRAI brand fonts (self-hosted, see @font-face below).
     Space Grotesk = body/UI · Archivo (expanded, bold) = display headings.  */
  --font-sans:    "Space Grotesk", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Archivo", "Arial Narrow", var(--font-sans);
  --font-serif:   var(--font-sans); /* legacy alias — serif retired for the MIRAI look */

  /* Spacing scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;

  /* Layout */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(23, 16, 52, 0.06), 0 8px 24px rgba(23, 16, 52, 0.07);
  --shadow-sm: 0 1px 2px rgba(23, 16, 52, 0.08);

  --nav-h: 64px;
}

/* ----- MIRAI brand webfonts (self-hosted, offline-safe) ------------------ */
/* Both are variable fonts: one file covers the whole weight/width range.    */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("../fonts/space-grotesk-var.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap; src: url("../fonts/archivo-var.woff2") format("woff2");
}

/* ----- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px); /* offset for sticky nav */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;       /* 17px */
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  line-height: 1.18;
  color: var(--c-deep);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
}
/* Big display headings in Archivo (expanded, bold) — the Sunrise look.
   Archivo needs an explicit weight/width to read as "display"; Space Grotesk
   is normal-width, so h3/h4 (below) look deliberately quieter by contrast.   */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.012em;
  line-height: 1.06;
}
/* Sub-heads stay in Space Grotesk: more legible at small sizes. */
h3, h4 { font-family: var(--font-sans); }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; }

p  { margin: 0 0 var(--sp-4); }
a  { color: var(--c-teal-ink); text-decoration-thickness: 1px;
     text-underline-offset: 2px; }
a:hover { color: var(--c-accent-d); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

strong { color: var(--c-deep); }

/* Accessibility: visible focus everywhere */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -120px;
  z-index: 1100;
  background: var(--c-deep);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-weight: 600;
  transition: top 0.18s ease;
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

/* The default focus ring (dark amber) disappears against the dark header. */
.site-header :focus-visible { outline-color: var(--c-accent); }

/* ----- Layout helpers ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--c-line);
}
.section--alt { background: var(--c-sand-2); }
.section__head { max-width: var(--maxw-narrow); margin-bottom: var(--sp-6); }
.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-accent-d);
  margin: 0 0 var(--sp-3);
}
.lead { font-size: 1.15rem; color: var(--c-muted); }

/* ----- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.85em 1.4em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-accent); color: #1a1206; }
.btn--primary:hover { background: var(--c-accent-d); color: #fff; }
.btn--ghost {
  background: transparent;
  color: var(--c-deep);
  border-color: var(--c-line-2);
}
.btn--ghost:hover { border-color: var(--c-deep); color: var(--c-deep); }
.btn--on-dark {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.5);
}
.btn--on-dark:hover { background: rgba(255,255,255,0.12); color: #fff;
  border-color: #fff; }

/* ----- Site header / nav ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Dark, matching .site-footer: the page reads as dark / sunrise / dark.
     It also keeps the sticky bar legible over every section below it. */
  background: rgba(23, 16, 52, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  line-height: 1.0;
}
.brand__mark {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--c-accent), #ff8a00);
  color: #1a1206;
  display: grid; place-items: center;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  font-family: var(--font-sans);
}
/* Split brand (retreat pages): the mark links to the site home, the words
   to the section home. The logo mark drops the tile — on the indigo bar the
   favicon's own indigo square would vanish anyway. */
div.brand a { color: inherit; text-decoration: none; }
.brand__mark--logo { background: none; border-radius: 50%; transition: transform 0.15s ease; }
.brand__mark--logo svg { display: block; width: 34px; height: 34px; }
.brand__mark--logo:hover { transform: scale(1.08); }
a.brand__text:hover small { color: #fff; }
.brand__text small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #b9b2d6;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: #e6e1f7;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}
.nav__links a:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav__links a[aria-current="true"] {
  color: var(--c-accent);
  background: rgba(255, 176, 32, 0.18);
}
.nav__cta { margin-left: var(--sp-2); }

.nav__toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  cursor: pointer;
  color: #fff;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* ----- Hero -------------------------------------------------------------- */
/* Light "Sunrise" hero: warm paper ground with two soft glows (amber lower
   right, violet upper left) — the same treatment as the holding page's hero,
   no photo. --hero-img exists for a future page that wants one; unset, it
   contributes nothing to the background stack. */
.hero {
  --hero-img: none;
  position: relative;
  color: var(--c-ink);
  background-color: var(--c-sand);
  background-image:
    radial-gradient(1200px 620px at 82% 112%, rgba(255,176,32,0.30), transparent 62%),
    radial-gradient(900px 520px at 8% -12%, rgba(120,80,255,0.14), transparent 60%),
    var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  padding-block: clamp(var(--sp-8), 11vw, var(--sp-9));
  max-width: 760px;
}
.hero .eyebrow { color: var(--c-accent-d); }
.hero h1 { color: var(--c-deep); margin-bottom: var(--sp-4); }
.hero__tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--c-teal-ink);
  margin-bottom: var(--sp-5);
}
.hero__desc { font-size: 1.12rem; color: var(--c-teal-ink); max-width: 60ch; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-6) 0 var(--sp-7);
  padding: 0; list-style: none;
}
.hero__meta li {
  margin: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  font-weight: 500;
}
.hero__meta .label {
  display: block;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-muted); font-weight: 700;
}
.hero__meta .value { font-size: 1.05rem; color: var(--c-deep); }
.hero__meta .ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  background: rgba(23, 16, 52, 0.06);
  display: grid; place-items: center;
}
.hero__meta .ico svg { width: 20px; height: 20px; stroke: var(--c-accent-d); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Split hero: the copy on the left, a framed photograph on the right.
   The photo sits beside the headline, never behind it, and keeps its credit
   visible on the image. Stacks below the copy on narrow screens. */
.hero--split .hero__inner {
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}
.hero__copy { max-width: 640px; }
/* Narrow screens: the photo leads, so the place is seen before the long copy. */
.hero__photo { position: relative; margin: 0 12px 0 0; max-width: 560px; order: -1; }
/* A warm offset block behind the photo — the sunrise, echoed. */
.hero__photo::before {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,176,32,0.55), rgba(255,138,0,0.18));
}
.hero__photo-frame {
  position: relative;
  aspect-ratio: 10 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(23,16,52,0.08), 0 28px 60px -18px rgba(23,16,52,0.45);
}
.hero__photo-frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% center;
}
.hero__photo figcaption {
  position: absolute; right: 10px; bottom: 10px;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: rgba(23,16,52,0.62);
  color: #fff;
  font-size: 0.72rem; line-height: 1.3;
}
/* Date badge, the same indigo tile the home page uses for events. */
.hero__badge {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  margin: 0;
  display: grid; justify-items: center;
  min-width: 76px;
  padding: 0.55rem 0.8rem 0.6rem;
  border-radius: 12px;
  background: var(--c-deep);
  box-shadow: 0 10px 24px -8px rgba(23,16,52,0.55);
  line-height: 1;
}
.hero__badge-day {
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 112%;
  font-size: 2.1rem; color: #fff;
}
.hero__badge-month {
  margin-top: 0.3rem;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-accent);
}
@media (max-width: 520px) {
  .hero__photo-place { display: none; }
  .hero__badge { min-width: 62px; padding: 0.45rem 0.65rem 0.5rem; }
  .hero__badge-day { font-size: 1.7rem; }
}
@media (min-width: 980px) {
  .hero--split .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  }
  /* Starts level with the headline, below the flags and eyebrow. */
  .hero__photo { max-width: none; margin: 3.6rem 0 0; order: 0; }
  .hero__photo-frame { aspect-ratio: 5 / 4; }
  .hero__photo::before { inset: 20px -20px -20px 20px; }
  .hero__badge { left: -22px; top: auto; bottom: 34px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__photo { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Sweden-Japan globe arc: decorative art for the right half of a split hero
   on pages without a photograph (community, TFE). Wide screens only — on a
   phone it would push the copy down without telling the reader anything. */
.hero__art { display: none; margin: 0; }
.globe-arc text {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  fill: var(--c-deep);
}
.globe-arc__comet { opacity: 0; }
@media (min-width: 980px) {
  .hero__art { display: block; align-self: center; }
  .hero__art svg { width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .globe-arc__comet { opacity: 1; animation: ga-travel 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .globe-arc__pulse {
    transform-box: fill-box; transform-origin: center;
    animation: ga-pulse 2.6s ease-out infinite;
  }
  .globe-arc__pulse--jp { animation-delay: 1.3s; }
}
@keyframes ga-travel {
  from { stroke-dashoffset: 10; }
  to   { stroke-dashoffset: -100; }
}
@keyframes ga-pulse {
  from { transform: scale(1);   opacity: 0.7; }
  to   { transform: scale(3.2); opacity: 0; }
}

/* ----- Generic content blocks ------------------------------------------- */
.prose { max-width: var(--maxw-narrow); }
.grid { display: grid; gap: var(--sp-5); }

.cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
.card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: var(--sp-3); }

/* Outcome / feature list with accent markers */
.feature-list { list-style: none; padding: 0; margin: 0; display: grid;
  gap: var(--sp-4); }
.feature-list li { position: relative; padding-left: 1.9rem; margin: 0; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(194,112,58,0.16);
}

/* Logo placeholder box (partner institutions) */
.logo-ph {
  width: 100%;
  height: 56px;
  margin-bottom: var(--sp-3);
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, #eef4f5 0 10px, #e6eef0 10px 20px);
  border: 1px solid var(--c-line);
}

/* Indicative time pill (programme cards) — distinct from .todo markers */
.time-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--c-teal-ink);
  background: rgba(74, 70, 103, 0.10);
  padding: 0.2em 0.7em;
  border-radius: 999px;
  margin-bottom: var(--sp-3);
}

/* TODO marker — visible reminders of items needing Roman's input. Left as-is
   for provenance; unpublished pages may still use it. Published pages use
   .draft instead (below), which reads as a normal note rather than a warning. */
.todo {
  display: inline-block;
  background: rgba(194, 112, 58, 0.12);
  border: 1px dashed var(--c-accent);
  color: var(--c-accent-d);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.15em 0.6em;
  border-radius: 6px;
}

/* Draft marker — content that is a placeholder skeleton, ready to be
   corrected, but not an alarming "something is broken" warning to a visitor. */
.draft {
  display: inline-block;
  background: rgba(255, 176, 32, 0.14);
  border: 1px solid rgba(255, 176, 32, 0.55);
  color: var(--c-accent-d);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.15em 0.6em;
  border-radius: 999px;
}

/* ----- Schedule (program.html) ------------------------------------------ */
.schedule { list-style: none; margin: 0; padding: 0; }
.sched-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--c-line);
  margin: 0;
}
.sched-item:first-child { border-top: none; }
.sched-time {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-accent-d);
  padding-top: 2px;
}
.sched-body h3 { margin-bottom: var(--sp-2); }
.sched-body p { margin-bottom: var(--sp-2); }
.sched-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-teal-ink);
  background: rgba(74,70,103,0.10);
  padding: 0.15em 0.6em;
  border-radius: 6px;
  margin-bottom: 0 !important;
}

@media (min-width: 680px) {
  .sched-item { grid-template-columns: 96px 1fr; gap: var(--sp-6); }
  .sched-time { font-size: 1.85rem; }
}

/* ----- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--c-deep);
  color: #cfc9e8;
  padding-block: var(--sp-7);
  margin-top: var(--sp-8);
}
.site-footer a { color: #ffffff; }
.footer__grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
.site-footer h4 { color: #fff; margin-bottom: var(--sp-3); }
.site-footer .muted { color: #b9b2d6; font-size: 0.92rem; }
.footer__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.88rem; color: #b9b2d6;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
}

/* ----- Utilities --------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   Responsive — mobile-first; the rules above target small screens.
   ========================================================================== */
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-deep);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
  }
  .nav__links[data-open="true"] {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .nav__links a { padding: var(--sp-3) var(--sp-2); font-size: 1.05rem;
    border-radius: var(--radius); }
  .nav__cta { margin: var(--sp-3) 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }
}

@media (min-width: 680px) {
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .cards--5 { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (min-width: 980px) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  /* five short name-cards on one row: tighter gap and padding, or the longer
     university names have almost no room left inside the card */
  .cards--5 { grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
  .cards--5 > .card { padding: var(--sp-5) var(--sp-4); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print: hide nav chrome, show plain content */
@media print {
  .site-header, .nav__toggle, .hero__actions, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Components added for the merged MIRAI-ENERGY site (Aug 2026)
   Hub cards · people · research · updates archive · notices · tools
   ========================================================================== */

/* ----- Branch cards (hub home) ------------------------------------------ */
.branch-cards { display: grid; gap: var(--sp-5); }
@media (min-width: 780px) { .branch-cards { grid-template-columns: repeat(3, 1fr); } }

.branch {
  display: flex; flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-teal);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.branch:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.branch--tfe       { border-top-color: var(--c-teal); }
.branch--retreat   { border-top-color: var(--c-accent); }
.branch--community { border-top-color: var(--c-green); }
.branch h3 { margin-bottom: var(--sp-2); font-size: 1.35rem; }
.branch__kicker {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; color: var(--c-muted); margin-bottom: var(--sp-3);
}
.branch__desc { color: var(--c-muted); flex: 1 1 auto; }
.branch__meta {
  list-style: none; padding: 0; margin: 0 0 var(--sp-5);
  font-size: 0.92rem; color: var(--c-muted);
}
.branch__meta li { margin-bottom: var(--sp-1); }
.branch__link { font-weight: 700; text-decoration: none; }
.branch__link::after { content: " →"; }
.branch a.stretched::after {           /* whole card clickable, link stays real */
  content: ""; position: absolute; inset: 0;
}
.branch { position: relative; }

/* ----- Flags -------------------------------------------------------------
   Drawn once as <symbol>s at the top of the page and instanced with <use>.
   Every instance carries its own width/height so it never inflates when the
   stylesheet is stale. */
.flag {
  display: block; flex: 0 0 auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(23,16,52,0.18), 0 1px 2px rgba(23,16,52,0.14);
}
.flags { display: flex; align-items: center; gap: 0.45rem; }

/* Inline in a line of text (roster affiliations). Windows renders the flag
   emoji as the letters "SE" / "JP", so those are drawn from the sprite. */
.flag--inline {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 0.4em;
  position: relative; top: 2px;
}

/* Hero: the pair plus a "Sweden × Japan" label */
.flagpair {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-accent-d);
}

/* Institution cards: flag(s) centred above the name */
.inst__flags { justify-content: center; margin-bottom: var(--sp-3); }

/* ----- Guiding-question call-out ----------------------------------------- */
.qcall {
  position: relative;
  margin: var(--sp-7) 0 var(--sp-6);
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7);
  border: 1px solid var(--c-line-2);
  border-left: 5px solid var(--c-accent);
  border-radius: var(--radius-lg);
  background: #fff8e9;
  background: color-mix(in srgb, var(--c-accent) 7%, #fff);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.qcall::after {
  content: "?";
  position: absolute; right: var(--sp-5); top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: 6.5rem; line-height: 1;
  color: rgba(255,176,32,0.18);
  pointer-events: none; user-select: none;
}
.qcall__label {
  position: relative; z-index: 1;
  margin: 0 0 var(--sp-3);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-accent-d);
}
.qcall__q {
  position: relative; z-index: 1;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display); font-weight: 800; font-stretch: 105%;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--c-deep);
  max-width: 34ch;
}
.qcall__note {
  position: relative; z-index: 1;
  margin: 0; max-width: 62ch;
  color: var(--c-teal-ink);
}
@media (max-width: 620px) {
  .qcall { padding: var(--sp-5); }
  /* the big "?" would sit behind the text at this width — drop it */
  .qcall::after { display: none; }
}

/* ----- Stat strip -------------------------------------------------------- */
.stats {
  display: grid; gap: var(--sp-5); list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats li { margin: 0; }
.stats .num {
  display: block; font-family: var(--font-display); font-size: 2.6rem;
  line-height: 1; color: var(--c-deep);
}
.stats .lbl {
  display: block; font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--c-muted); font-weight: 700;
  margin-top: var(--sp-2);
}

/* ----- People ------------------------------------------------------------ */
.people { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .people--3 { grid-template-columns: repeat(3, 1fr); } }

.person {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.person__photo {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%;
  object-fit: cover; background: var(--c-sand-2);
  border: 2px solid var(--c-line-2);
}
.person__initials {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-deep); color: #fff;
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .04em;
}
.person__body { min-width: 0; }
.person__name { font-weight: 700; color: var(--c-deep); font-size: 1.05rem; }
.person__name a { color: inherit; text-decoration: none; }
.person__name a:hover { color: var(--c-accent-d); text-decoration: underline; }
.person__inst { color: var(--c-muted); font-size: 0.92rem; margin: 2px 0 var(--sp-2); }
.person__focus { font-size: 0.92rem; margin-bottom: var(--sp-2); }
.person__links { font-size: 0.85rem; }
.person__links a { margin-right: var(--sp-3); }

.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--c-sand-2); color: var(--c-muted);
  border: 1px solid var(--c-line-2);
}
.badge--pi   { background: #e7f1f3; color: var(--c-teal-ink); border-color: #cadfe3; }
.badge--ecr  { background: #f4ede4; color: #8a5a2b;           border-color: #e6d6c2; }
.badge--chair{ background: #e8f0ea; color: var(--c-green);    border-color: #cfe0d4; }

/* ----- Participant cards (retreat) --------------------------------------
   A uniform square photo (Roman pre-crops these to square — see
   docs/HANDOVER.md), a GCT4/GCT3 colour tag reusing the Organizers section's
   two colours, role + institution, a speech-bubble "why I'm here" quote in
   the person's own words, and a link out to their institutional profile.
   The whole thing lifts slightly on hover — the one static-feeling page on
   the site that's meant to invite a closer look. */
.participant-card {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: var(--sp-5);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.participant-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.participant-card__photo-wrap {
  position: relative;
  width: 148px; height: 148px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-sand-2);
  border: 3px solid var(--c-paper);
  box-shadow: 0 0 0 3px var(--gct-color, var(--c-line-2));
}
.participant-card__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.participant-card:hover .participant-card__photo { transform: scale(1.06); }

/* Placeholder for a participant with no photo yet — initials on a tinted
   square, same footprint as a real photo so the grid never jumps later. */
.participant-card__photo-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 108%;
  font-size: 2.2rem;
  color: var(--gct-color, var(--c-muted));
  background: var(--c-sand-2);
  background: color-mix(in srgb, var(--gct-color, var(--c-muted)) 12%, var(--c-paper));
}

.participant-card__body { min-width: 0; }
.participant-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.participant-card__name { margin: 0; font-size: 1.3rem; }
.participant-card__gct {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  background: var(--c-sand-2);
  background: color-mix(in srgb, var(--gct-color) 16%, transparent);
  color: var(--gct-color-ink, var(--gct-color));
  border-color: var(--c-line-2);
  border-color: color-mix(in srgb, var(--gct-color) 40%, transparent);
}
/* GCT colour, set once per card and reused by the photo ring, the tag and
   the quote's accent bar. amber = GCT4 (Energy Materials, this project's own
   team); muted violet = GCT3 (Resilient Cities & Communities). */
.participant-card--gct4 { --gct-color: #ffb020; --gct-color-ink: var(--c-accent-d); }
.participant-card--gct3 { --gct-color: #6f6a90; --gct-color-ink: var(--c-teal-ink); }

.participant-card__role {
  color: var(--c-muted);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--sp-4);
}

/* The "why I'm here" note, styled as a speech bubble in the person's voice. */
.participant-card__quote {
  position: relative;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background: var(--c-sand-2);
  background: color-mix(in srgb, var(--gct-color, var(--c-muted)) 8%, var(--c-sand));
  border-left: 3px solid var(--gct-color, var(--c-line-2));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--c-ink);
}
.participant-card__quote p { margin: 0; }
.participant-card__quote p::before { content: "\201C"; }
.participant-card__quote p::after  { content: "\201D"; }

/* Awaiting the person's own words — same shape as a real quote so the three
   cards stay uniform, but visibly a placeholder rather than a statement. */
.participant-card__quote--empty {
  background: transparent;
  border-left-style: dashed;
  color: var(--c-muted);
}
.participant-card__quote--empty p::before,
.participant-card__quote--empty p::after { content: ""; }

.participant-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gct-color-ink, var(--c-teal-ink));
  text-decoration: none;
}
.participant-card__link svg {
  flex: 0 0 auto;              /* a flex item will otherwise shrink and distort */
  width: 14px; height: 14px;
  transition: transform 0.15s ease;
}
.participant-card__link:hover svg { transform: translate(2px, -2px); }

/* ----- Photo band ------------------------------------------------------
   A photograph shown at its own size rather than as a washed-out backdrop
   behind text, with a visible caption. Every image on this site is either
   ours or used with permission — the caption is where that is stated. */
.photo-band { margin: 0 0 var(--sp-6); }
.photo-band img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: center 58%;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
}
.photo-band figcaption {
  font-size: 0.85rem;
  color: var(--c-muted);
  padding-top: var(--sp-3);
}
@media (max-width: 620px) {
  .photo-band img { aspect-ratio: 3 / 2; }
}

/* ----- Flow diagram (the shape of a day) --------------------------------
   Four steps on a connecting line. Built in HTML/CSS with small inline SVG
   icons rather than one big SVG, so the text stays real text — selectable,
   translatable, and readable at any size. Horizontal on wide screens, a
   vertical timeline on narrow ones. */
/* ----- Day timeline (retreat overview, "The shape of the day") ------------
   A 525-minute track, 10:30-19:15. Each piece carries --s/--e (or --t) in
   minutes from 10:30 and is placed as a percentage of the track. Phones get
   and tablets get a plain vertical list instead (below 1000px the blocks are
   too narrow for their text): the phases stay, the picture rows go.        */
.dayline {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.dayline__row { display: grid; grid-template-columns: 1fr; }
.dayline__label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-muted);
}
.dayline__track { position: relative; margin: 0; padding: 0; list-style: none; }
.dayline__phases { display: grid; gap: var(--sp-2); }
.dayline__phase {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border-left: 5px solid var(--c-line-2);
  background: var(--c-sand);
  display: grid; gap: 1px;
  line-height: 1.3;
}
.dayline__time { font-size: 0.8rem; font-weight: 700; color: var(--c-accent-d); font-variant-numeric: tabular-nums; }
.dayline__name { font-weight: 700; color: var(--c-deep); }
.dayline__detail, .dayline__who { font-size: 0.85rem; color: var(--c-teal-ink); }
.dayline__who { font-weight: 600; }
.dayline__phase--travel   { border-left-style: dashed; }
.dayline__phase--core     { border-left-color: var(--c-accent); background: #fff4dc; }
.dayline__phase--research { border-left-color: #6f6a90; background: #eeecf6; }
.dayline__phase--dinner   { border-left-color: var(--c-deep); background: #e6e3ef; }
.dayline__row--lane, .dayline__row--axis, .dayline__row--bus { display: none; }
.dayline__row:first-child > .dayline__label { display: none; }
.dayline__note { font-size: 0.9rem; color: var(--c-muted); margin: 0 0 var(--sp-6); }

@media (min-width: 1000px) {
  .dayline { padding: var(--sp-6) var(--sp-6) var(--sp-5); }
  .dayline__row {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
  }
  .dayline__row + .dayline__row { margin-top: var(--sp-3); }
  .dayline__row--lane, .dayline__row--axis, .dayline__row--bus { display: grid; }
  .dayline__row:first-child > .dayline__label { display: block; }

  /* Phases become blocks on the track. */
  .dayline__phases { display: block; height: 104px; }
  .dayline__phase {
    position: absolute; top: 0; bottom: 0;
    left:  calc(var(--s) / 525 * 100%);
    width: calc((var(--e) - var(--s)) / 525 * 100% - 4px);
    border-left: 0;
    border-radius: var(--radius);
    padding: var(--sp-3);
    align-content: start;
    overflow: hidden;
  }
  .dayline__phase--travel {
    background: transparent;
    border: 1.5px dashed var(--c-line-2);
    padding: var(--sp-3) 0;
    justify-items: center; align-content: center;
  }
  .dayline__phase--travel .dayline__time { display: none; }
  .dayline__phase--travel .dayline__name {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-muted);
  }
  .dayline__phase--core {
    background: linear-gradient(135deg, #ffc043, #ffa21f);
    box-shadow: 0 10px 22px -12px rgba(161, 92, 0, 0.6);
  }
  .dayline__phase--core .dayline__time,
  .dayline__phase--core .dayline__detail { color: #5a3500; }
  .dayline__phase--research { background: #e9e6f5; }
  .dayline__phase--dinner { background: var(--c-deep); }
  .dayline__phase--dinner .dayline__name { color: #fff; }
  .dayline__phase--dinner .dayline__time { color: var(--c-accent); }
  .dayline__phase--dinner .dayline__detail { color: #cfcbe6; }
  /* On the wide layout the lanes below say who is there. */
  .dayline__phase .dayline__who {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Who is there: one lane each. */
  .dayline__row--lane .dayline__track { height: 26px; }
  .dayline__run {
    position: absolute; top: 0; bottom: 0;
    left:  calc(var(--s) / 525 * 100%);
    width: calc((var(--e) - var(--s)) / 525 * 100% - 4px);
    border-radius: 999px;
    display: flex; align-items: center;
    padding-inline: 0.7rem;
    font-size: 0.74rem; font-weight: 700; white-space: nowrap; overflow: hidden;
    font-variant-numeric: tabular-nums;
  }
  .dayline__run--res { background: #4a4667; color: #fff; }
  .dayline__run--co  { background: var(--c-accent-d); color: #fff; }
  .dayline__run--opt {
    color: var(--c-muted); font-weight: 600;
    background: repeating-linear-gradient(135deg,
      rgba(111,106,144,0.13) 0 6px, rgba(111,106,144,0.04) 6px 12px);
    border: 1px dashed rgba(111,106,144,0.45);
  }

  /* Hour ticks. */
  .dayline__row--axis .dayline__track {
    height: 22px;
    border-top: 1px solid var(--c-line-2);
  }
  .dayline__tick {
    position: absolute; top: 0;
    left: calc(var(--t) / 525 * 100%);
    transform: translateX(-50%);
    padding-top: 6px;
    font-size: 0.72rem; color: var(--c-muted); font-variant-numeric: tabular-nums;
  }
  .dayline__tick::before {
    content: ""; position: absolute; top: -1px; left: 50%;
    width: 1px; height: 5px; background: var(--c-line-2);
  }

  /* Shuttle departures. */
  .dayline__row--bus .dayline__track { height: 26px; }
  .dayline__bus {
    position: absolute; top: 0;
    left: calc(var(--t) / 525 * 100%);
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 0.3em;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    background: var(--c-sand-2); border: 1px solid var(--c-line);
    font-size: 0.74rem; font-weight: 700; color: var(--c-deep);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .dayline__bus svg { color: var(--c-accent-d); }
  .dayline__bus--first { transform: none; }
  .dayline__bus--last  { transform: translateX(-100%); }
}

.flow { display: grid; grid-template-columns: 1fr; margin: 0 0 var(--sp-6); }
.flow__step { position: relative; }
.flow__icon {
  position: relative;
  z-index: 1;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-sand-2);
  background: color-mix(in srgb, var(--c-accent) 14%, var(--c-paper));
  border: 2px solid var(--c-accent);
  color: var(--c-accent-d);
}
.flow__icon svg { width: 26px; height: 26px; }
.flow__label {
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 108%;
  font-size: 1.1rem; letter-spacing: -0.01em;
  color: var(--c-deep);
  margin: 0 0 var(--sp-2);
}
.flow__text { font-size: 0.92rem; color: var(--c-muted); margin: 0; }

/* wide: a horizontal run, connector behind the circles */
@media (min-width: 780px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .flow__step { text-align: center; padding: 0 var(--sp-2); }
  .flow__icon { margin: 0 auto var(--sp-4); }
  .flow__step::before {
    content: "";
    position: absolute; z-index: 0;
    top: 31px; right: 50%; width: 100%; height: 2px;
    background: var(--c-line-2);
  }
  .flow__step:first-child::before { display: none; }
}

/* narrow: a vertical timeline */
@media (max-width: 779px) {
  .flow__step {
    display: grid; grid-template-columns: 64px 1fr;
    gap: var(--sp-4); padding-bottom: var(--sp-5);
  }
  .flow__step::before {
    content: "";
    position: absolute; z-index: 0;
    left: 31px; top: 64px; bottom: 0; width: 2px;
    background: var(--c-line-2);
  }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__step:last-child::before { display: none; }
}

/* ----- Route at a glance (retreat venue) ---------------------------------
   A schematic train line: a dot per stop, a bar to the next stop. Horizontal
   on wide screens, vertical on phones. --d is the dot's diameter, so dots of
   different sizes stay centred on the line. */
.route { list-style: none; margin: var(--sp-5) 0 var(--sp-4); padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.route__stop { position: relative; margin: 0; padding: 34px 4px 0; text-align: center; }
.route__stop::before {               /* the line to the next stop */
  content: ""; position: absolute; top: 12px; left: 50%; width: 100%; height: 4px;
  background: var(--c-deep);
}
.route__stop:last-child::before { display: none; }
.route__stop::after {                /* the stop */
  content: ""; position: absolute; z-index: 1;
  top: calc(14px - var(--d, 16px) / 2); left: calc(50% - var(--d, 16px) / 2);
  width: var(--d, 16px); height: var(--d, 16px); box-sizing: border-box;
  border-radius: 50%; background: var(--c-paper); border: 3px solid var(--c-deep);
}
.route__stop--uni::after    { background: var(--c-deep); }
.route__stop--change::after { --d: 22px; border-width: 4px; }
.route__stop--change::before {
  background: repeating-linear-gradient(90deg, var(--c-accent) 0 9px, transparent 9px 15px);
}
.route__stop--end::after    { --d: 24px; background: var(--c-accent); border-color: var(--c-deep); }
.route__name { display: block; font-weight: 700; font-size: 0.9rem; line-height: 1.25; color: var(--c-deep); }
.route__note { display: block; margin-top: 3px; font-size: 0.8rem; line-height: 1.3; color: var(--c-muted); }
.route__stop--uni .route__note { color: var(--c-accent-d); font-weight: 600; }

.route__legend { list-style: none; margin: 0; padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--c-line); font-size: 0.88rem; color: var(--c-muted); }
.route__legend li { display: flex; gap: var(--sp-3); align-items: baseline; margin: 0 0 var(--sp-2); }
.route__legend li:last-child { margin-bottom: 0; }
.route__key { flex: 0 0 28px; height: 4px; align-self: flex-start; margin-top: 0.6em; background: var(--c-deep); }
.route__key--bus { background: repeating-linear-gradient(90deg, var(--c-accent) 0 9px, transparent 9px 15px); }

@media (max-width: 700px) {
  .route { grid-template-columns: 1fr; }
  .route__stop { padding: 0 0 var(--sp-4) 40px; text-align: left; }
  .route__stop:last-child { padding-bottom: 0; }
  .route__stop::before { top: 10px; left: 10px; width: 4px; height: 100%; }
  .route__stop::after  { top: calc(10px - var(--d, 16px) / 2); left: calc(12px - var(--d, 16px) / 2); }
  .route__stop--change::before {
    background: repeating-linear-gradient(180deg, var(--c-accent) 0 9px, transparent 9px 15px);
  }
}

/* ----- GCT roster: two columns, one team each --------------------------- */
.gct-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) { .gct-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }

.gct-col__head {
  border-top: 4px solid var(--gct-color, var(--c-line-2));
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.gct-col__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 0.2em 0.7em; border-radius: 999px;
  background: var(--c-sand-2);
  background: color-mix(in srgb, var(--gct-color) 18%, transparent);
  color: var(--gct-color-ink, var(--c-muted));
  margin-bottom: var(--sp-3);
}
.gct-col__head h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: var(--sp-2); }
.gct-col__count { font-size: 0.88rem; color: var(--c-muted); margin: 0; }

.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.roster__row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--sp-4);
  align-items: start;
  margin: 0;
  padding: var(--sp-4);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.roster__row:hover {
  transform: translateY(-2px);
  border-color: var(--gct-color, var(--c-line-2));
}

.roster__photo-wrap {
  width: 60px; height: 60px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--c-sand-2);
  box-shadow: 0 0 0 2px var(--gct-color, var(--c-line-2));
}
.roster__photo { width: 100%; height: 100%; object-fit: cover; }
.roster__initials {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 105%;
  font-size: 1.05rem;
  color: var(--gct-color-ink, var(--c-muted));
  background: var(--c-sand-2);
  background: color-mix(in srgb, var(--gct-color) 12%, var(--c-paper));
}

.roster__name {
  font-weight: 700; color: var(--c-deep);
  font-size: 1.02rem; line-height: 1.3;
  margin: 0 0 2px;
}
.roster__chair {
  display: inline-block;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.1em 0.5em; border-radius: 999px;
  border: 1px solid var(--c-line-2);
  border-color: color-mix(in srgb, var(--gct-color) 45%, transparent);
  color: var(--gct-color-ink, var(--c-muted));
  vertical-align: 2px; margin-left: var(--sp-2);
}
/* Attendance confirmed. Solid olive, so it reads differently from the
   outlined role chips (Chair, Host) that sit beside it. */
.roster__status {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.15em 0.55em; border-radius: 999px;
  background: var(--c-green); color: #fff;
  vertical-align: 2px; margin-left: var(--sp-2);
  white-space: nowrap;
}
.roster__status svg { flex: 0 0 auto; width: 10px; height: 10px; }
.roster__affil {
  font-size: 0.85rem; color: var(--c-muted);
  margin: 0 0 var(--sp-2); line-height: 1.45;
}
.roster__link {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.82rem; font-weight: 700;
  color: var(--gct-color-ink, var(--c-teal-ink));
  text-decoration: none;
}
.roster__link svg { flex: 0 0 auto; width: 12px; height: 12px; transition: transform 0.15s ease; }
.roster__link:hover svg { transform: translate(2px, -2px); }

/* A row can carry the person's own note, same bubble as the detailed card. */
.roster__quote {
  margin: var(--sp-3) 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-sand-2);
  background: color-mix(in srgb, var(--gct-color) 8%, var(--c-sand));
  border-left: 3px solid var(--gct-color, var(--c-line-2));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem; line-height: 1.55;
  color: var(--c-ink);
}
.roster__quote p { margin: 0; }
.roster__quote p::before { content: "\201C"; }
.roster__quote p::after  { content: "\201D"; }

/* Long notes: two lines, then "Read more" opens the rest inside the card
   (nav.js adds the button). The clamp only applies once the script has run
   (html.js-notes), so without JavaScript every note is shown in full. */
.js-notes .roster__quote p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.js-notes .roster__quote.is-open p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.roster__more {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-top: var(--sp-2); padding: 0.2em 0.7em 0.2em 0.55em;
  font: inherit; font-size: 0.8rem; font-weight: 700;
  color: var(--gct-color-ink, var(--c-teal-ink));
  background: var(--c-paper);
  border: 1px solid var(--c-line-2);
  border-color: color-mix(in srgb, var(--gct-color) 45%, transparent);
  border-radius: 999px; cursor: pointer;
}
.roster__more:hover { border-color: var(--gct-color, var(--c-line-2)); }
.roster__more svg { flex: 0 0 auto; width: 14px; height: 14px; }

@media (max-width: 420px) {
  .roster__row { grid-template-columns: 1fr; }
}

/* A roster that runs two abreast on desktop (the ECR places). */
@media (min-width: 900px) {
  .roster--2col { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

/* An unfilled place. Dashed and quiet, so it reads as a slot being held
   rather than as a person whose photo failed to load. */
.roster__row--tbc { border-style: dashed; background: transparent; }
.roster__row--tbc:hover { transform: none; border-color: var(--c-line-2); }
.roster__row--tbc .roster__photo-wrap {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--c-line-2);
}
.roster__row--tbc .roster__initials {
  background: transparent;
  color: var(--c-line-2);
  font-size: 1.6rem;
}
.roster__row--tbc .roster__name { color: var(--c-muted); font-weight: 600; }

/* Desktop: bigger photos and text. The roster is the page's main content, and
   at the two-column width there is room for it to be read comfortably rather
   than scanned. Photos go 60px -> 90px; type goes up about 2pt (0.167rem).
   The <img> width/height attributes stay at 60 on purpose — they are the
   no-stylesheet fallback, where small is the safe failure. */
@media (min-width: 900px) {
  .roster__row       { grid-template-columns: 90px 1fr; }
  .roster__photo-wrap { width: 90px; height: 90px; border-radius: 12px; }
  .roster__initials  { font-size: 1.55rem; }
  .roster__name      { font-size: 1.19rem; }
  .roster__chair     { font-size: 0.81rem; }
  .roster__status    { font-size: 0.81rem; }
  .roster__status svg { width: 12px; height: 12px; }
  .roster__affil     { font-size: 1.02rem; }
  .roster__link      { font-size: 0.99rem; }
  .roster__link svg  { width: 14px; height: 14px; }
  .roster__quote     { font-size: 1.07rem; }
  .roster__more      { font-size: 0.9rem; }
}

/* Narrow screens: stack. Keeping the photo in its own column starves the
   quote — at 390px it collapsed to about ten characters a line. */
@media (max-width: 620px) {
  .participant-card { grid-template-columns: 1fr; gap: var(--sp-4); }
  .participant-card__photo-wrap { width: 112px; height: 112px; }
  .participant-card__photo-ph { font-size: 1.7rem; }
  .participant-card__quote { padding: var(--sp-4); }
}
.flag { font-size: 1rem; }

/* ----- Numbered research topics ----------------------------------------- */
.topics { display: grid; gap: var(--sp-5); }
@media (min-width: 800px) { .topics { grid-template-columns: repeat(2, 1fr); } }
.topic {
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.topic__num {
  font-family: var(--font-display); font-size: 2rem; line-height: 1;
  color: var(--c-accent); display: block; margin-bottom: var(--sp-2);
}
.topic h3 { margin-bottom: var(--sp-3); font-size: 1.15rem; }
.topic p  { color: var(--c-muted); margin-bottom: var(--sp-3); }
.topic__cite {
  font-size: 0.82rem; color: var(--c-muted);
  border-top: 1px solid var(--c-line); padding-top: var(--sp-3);
  font-style: italic;
}

/* ----- Updates archive (ex-WordPress posts) ----------------------------- */
.updates { list-style: none; padding: 0; margin: 0; }
.update {
  border-top: 1px solid var(--c-line); padding: var(--sp-5) 0; margin: 0;
}
.update:first-child { border-top: none; }
.update__date {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--c-muted); font-weight: 700;
}
.update h3 { margin: var(--sp-2) 0; font-size: 1.2rem; }
.update h3 a { color: var(--c-deep); text-decoration: none; }
.update h3 a:hover { color: var(--c-accent-d); text-decoration: underline; }
.update__excerpt { color: var(--c-muted); margin-bottom: var(--sp-2); }
.update__meta { font-size: 0.85rem; color: var(--c-muted); }

/* Article body — content imported from WordPress. Keep the selectors generic:
   the imported HTML uses plain tags plus a few wp-* classes.                 */
.article { max-width: var(--maxw-narrow); }
.article h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: var(--sp-7); }
.article h3 { margin-top: var(--sp-6); }
.article img,
.article .wp-block-image img { border-radius: var(--radius); margin: var(--sp-5) 0; }
.article figure { margin: var(--sp-5) 0; }
.article figcaption { font-size: 0.85rem; color: var(--c-muted); text-align: center; }
.article blockquote {
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--c-accent); background: var(--c-sand-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article blockquote p:last-child { margin-bottom: 0; }
.article table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; }
.article th, .article td {
  border: 1px solid var(--c-line); padding: var(--sp-3); text-align: left;
}
.article th { background: var(--c-sand-2); }
.article pre {
  overflow-x: auto; background: var(--c-deep); color: #e8f1f2;
  padding: var(--sp-4); border-radius: var(--radius);
}
.article iframe, .article video { max-width: 100%; }

/* Preserved comment threads (read-only) */
.comments { margin-top: var(--sp-7); border-top: 2px solid var(--c-line); padding-top: var(--sp-5); }
.comment {
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.comment--reply { margin-left: var(--sp-6); border-left: 3px solid var(--c-teal); }
.comment__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.comment__author { font-weight: 700; color: var(--c-deep); }
.comment__date { font-size: 0.8rem; color: var(--c-muted); }
.comment__body p:last-child { margin-bottom: 0; }

/* ----- Notices / callouts ----------------------------------------------- */
.notice {
  border: 1px solid var(--c-line-2); border-left: 4px solid var(--c-teal);
  background: var(--c-paper); border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
  font-size: 0.95rem;
}
.notice--archive { border-left-color: var(--c-muted); background: var(--c-sand-2); }
.notice--warn    { border-left-color: var(--c-accent); }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--c-deep); }

/* ----- Breadcrumb -------------------------------------------------------- */
.crumbs {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-4) 0 0; margin: 0; font-size: 0.85rem; color: var(--c-muted);
}
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-line-2); }

/* ----- Timeline (community activities) ---------------------------------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--c-line-2);
}
.timeline > li { position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-6); }
.timeline > li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-paper); border: 3px solid var(--c-teal);
}
.timeline > li.is-next::before { border-color: var(--c-accent); background: var(--c-accent); }
.timeline__when {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--c-muted);
}
.timeline h3 { margin: var(--sp-1) 0 var(--sp-2); font-size: 1.1rem; }

/* ----- Tool cards / embeds ---------------------------------------------- */
.tool-card {
  display: block; background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tool-card__thumb {
  aspect-ratio: 16 / 9; background: var(--c-deep);
  display: grid; place-items: center; color: #cfe4e6;
  font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .06em;
}
.tool-card__body { padding: var(--sp-4) var(--sp-5); }
.tool-card__body h3 { margin-bottom: var(--sp-2); font-size: 1.05rem; }
.tool-card__body p { color: var(--c-muted); font-size: 0.92rem; margin: 0; }

/* Full-bleed frame for an embedded tool page */
.tool-frame {
  width: 100%; height: min(88vh, 900px); border: 1px solid var(--c-line);
  border-radius: var(--radius); background: var(--c-paper);
}

/* ----- Definition-style key/value list ---------------------------------- */
.kv { display: grid; gap: var(--sp-3) var(--sp-5); margin: 0 0 var(--sp-5); }
@media (min-width: 620px) { .kv { grid-template-columns: max-content 1fr; } }
.kv dt {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--c-muted);
}
.kv dd { margin: 0; }

/* ----- Partner / institution strip -------------------------------------- */
.institutions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  list-style: none; padding: 0; margin: 0;
}
.institutions li {
  margin: 0; padding: var(--sp-2) var(--sp-4);
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: 999px; font-size: 0.9rem; font-weight: 500;
}

/* ----- Per-section hero photos ------------------------------------------
   Paths are relative to this stylesheet (assets/css/), which keeps them
   correct whether the site is served from a domain root or a subpath.        */
/* No .hero--retreat background: Sunrise keeps the plain .hero — paper and glows.
   A photograph goes beside the headline (.hero--split, 24 Sep 2026) or in a .photo-band, where they are shown at their own size and
   credited, rather than washed out behind headline text. */