/* ==========================================================================
   Wies Design Lab — Earth, Architecture & Code
   Skinned to the brand sheet: Playfair Display + Montserrat, the six-colour
   rural palette (deep green, leaf green, blue, kiln red, gold, cream) and
   fine line-art illustration. Structure follows the two project phases:
   the Lab, then the incubation.
   ========================================================================== */

/* --- Tokens: light -------------------------------------------------------- */
:root {
  --cream:     #F3EEE4;
  --cream-2:   #E9E1D1;
  --paper:     #FBF8F1;

  --green-deep: #1F4D33;   /* wordmark green — body text and dark bands */
  --green:      #3D8248;   /* leaf green */
  --blue:       #1B4C8B;
  --red:        #B03C25;   /* kiln red */
  --gold:       #E3A92F;

  --ink:        #1F4D33;
  --ink-soft:   #45604E;

  /* band pairs: background / foreground / muted foreground */
  --b-cream:  #F3EEE4;  --f-cream:  #1F4D33;  --s-cream:  #45604E;
  --b-cream2: #E9E1D1;  --f-cream2: #1F4D33;  --s-cream2: #435D4C;
  --b-green:  #1F4D33;  --f-green:  #F3EEE4;  --s-green:  rgba(243,238,228,.84);
  --b-leaf:   #35703E;  --f-leaf:   #FFFFFF;  --s-leaf:   rgba(255,255,255,.92);
  --b-blue:   #1B4C8B;  --f-blue:   #F2F6FB;  --s-blue:   rgba(242,246,251,.9);
  --b-red:    #A83A24;  --f-red:    #FFF3EE;  --s-red:    rgba(255,243,238,.92);
  --b-gold:   #EDCB7A;  --f-gold:   #3A2708;  --s-gold:   rgba(58,39,8,.86);

  --accent:     #A83A24;
  --accent-ink: #FFF3EE;

  --rule: rgba(31,77,51,.18);
  --eit-blue: #034FA3;

  --page-bg: var(--cream);
  --page-fg: var(--ink);
  --page-soft: var(--ink-soft);

  --wrap: 1240px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --band-y: clamp(3.25rem, 7.5vw, 6.5rem);

  --t--1: clamp(.76rem, .74rem + .1vw, .82rem);
  --t-0:  clamp(1rem, .97rem + .14vw, 1.06rem);
  --t-1:  clamp(1.16rem, 1.08rem + .4vw, 1.4rem);
  --t-2:  clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem);
  --t-3:  clamp(2rem, 1.5rem + 2.2vw, 3.3rem);
  --t-4:  clamp(2.6rem, 1.8rem + 4vw, 5.4rem);

  color-scheme: light;
}

/* --- Tokens: dark --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:     #141D17;
    --cream-2:   #1C271F;
    --paper:     #1A241C;

    --green-deep: #E9E3D5;
    --green:      #8CB682;
    --blue:       #93B6DE;
    --red:        #E5906F;
    --gold:       #EBC470;

    --ink:        #E9E3D5;
    --ink-soft:   #A6B2A6;

    --b-cream:  #141D17;  --f-cream:  #E9E3D5;  --s-cream:  #A6B2A6;
    --b-cream2: #1C271F;  --f-cream2: #E9E3D5;  --s-cream2: #A6B2A6;
    --b-green:  #0E1712;  --f-green:  #E9E3D5;  --s-green:  rgba(233,227,213,.82);
    --b-leaf:   #24422A;  --f-leaf:   #E4EFE1;  --s-leaf:   rgba(228,239,225,.86);
    --b-blue:   #17293F;  --f-blue:   #DCE9F6;  --s-blue:   rgba(220,233,246,.86);
    --b-red:    #3D1D13;  --f-red:    #F6D9CC;  --s-red:    rgba(246,217,204,.88);
    --b-gold:   #3A2E12;  --f-gold:   #F3E2B8;  --s-gold:   rgba(243,226,184,.88);

    --accent:     #E5906F;
    --accent-ink: #24100A;

    --rule: rgba(233,227,213,.16);
    --icon-tile: #F3EEE4;
    --icon-tile-pad: .65rem;

    --page-bg: var(--cream);
    --page-fg: var(--ink);
    --page-soft: var(--ink-soft);

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cream:     #141D17;
  --cream-2:   #1C271F;
  --paper:     #1A241C;

  --green-deep: #E9E3D5;
  --green:      #8CB682;
  --blue:       #93B6DE;
  --red:        #E5906F;
  --gold:       #EBC470;

  --ink:        #E9E3D5;
  --ink-soft:   #A6B2A6;

  --b-cream:  #141D17;  --f-cream:  #E9E3D5;  --s-cream:  #A6B2A6;
  --b-cream2: #1C271F;  --f-cream2: #E9E3D5;  --s-cream2: #A6B2A6;
  --b-green:  #0E1712;  --f-green:  #E9E3D5;  --s-green:  rgba(233,227,213,.82);
  --b-leaf:   #24422A;  --f-leaf:   #E4EFE1;  --s-leaf:   rgba(228,239,225,.86);
  --b-blue:   #17293F;  --f-blue:   #DCE9F6;  --s-blue:   rgba(220,233,246,.86);
  --b-red:    #3D1D13;  --f-red:    #F6D9CC;  --s-red:    rgba(246,217,204,.88);
  --b-gold:   #3A2E12;  --f-gold:   #F3E2B8;  --s-gold:   rgba(243,226,184,.88);

  --accent:     #E5906F;
  --accent-ink: #24100A;

  --rule: rgba(233,227,213,.16);
  --icon-tile: #F3EEE4;
  --icon-tile-pad: .65rem;

  --page-bg: var(--cream);
  --page-fg: var(--ink);
  --page-soft: var(--ink-soft);

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: var(--t-0);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: .7rem 1.1rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --- Wordmark ------------------------------------------------------------- */
/* The brand sheet's "wordmark only" lockup, set in the brand faces. Replace
   with assets/brand/logo-horizontal.svg once the artwork file is in place. */
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.wordmark__name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: var(--wm, 1.5rem);
  color: var(--wm-color, var(--page-fg));
  letter-spacing: -.01em;
}
.wordmark__sub {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(var(--wm, 1.5rem) * .27);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wm-color, var(--page-fg));
  margin-top: .5em;
  padding-bottom: .5em;
  border-bottom: 2px solid var(--gold);
  align-self: flex-start;
}

/* --- Shared type helpers -------------------------------------------------- */
.eyebrow {
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

/* --- White top zone ------------------------------------------------------- */
/* The logo bar stays white in both themes: the brand logo and the EIT/NEB
   artwork are both drawn for light grounds, and a full-width white band reads
   as one piece with them instead of a floating plate. Everything below it
   returns to the cream ground. */
.on-white {
  --page-bg:   #FFFFFF;
  --page-fg:   #1F4D33;
  --page-soft: #45604E;
  --band-bg:   #FFFFFF;
  --band-fg:   #1F4D33;
  --band-soft: #45604E;
  --rule:      rgba(31,77,51,.16);
  --accent:     #A83A24;
  --accent-ink: #FFF3EE;
  --gold:       #E3A92F;
  background: #FFFFFF;
  color: #1F4D33;
}

/* --- Top bar: our logo, then the funders ---------------------------------- */
.topbar { border-bottom: 1px solid rgba(31,77,51,.12); }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(.9rem, 2vw, 1.35rem);
}
.topbar__brand { display: block; line-height: 0; }
.topbar__brand img { height: clamp(52px, 7vw, 78px); width: auto; }

/* The official Ignite NEB host lockup, used as one unmodified image: NEB
   logo, EIT-blue divider, EIT Community NEB mark, EU emblem and the funding
   line, all at the proportions EIT sets. */
.lockup { width: clamp(280px, 36vw, 440px); height: auto; }
@media (max-width: 34rem) { .lockup { width: min(100%, 290px); } }

/* --- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--page-bg);
  border-bottom: 1px solid var(--rule);
}
.nav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-height: 3.6rem; }
.nav__links {
  display: flex; align-items: center; gap: clamp(.85rem, 1.9vw, 1.7rem);
  list-style: none; margin: 0; padding: 0;
  margin-inline-end: auto;
}
/* narrow screens: the links scroll instead of disappearing */
@media (max-width: 62rem) {
  .nav__links {
    order: 2; width: 100%;
    flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: .5rem; margin-inline-end: 0;
    scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links li { flex: 0 0 auto; }
  .nav .btn { order: 1; margin-inline-start: auto; }
}
.nav__links a {
  text-decoration: none; font-weight: 600; font-size: .8rem; letter-spacing: .04em;
  color: var(--page-soft);
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav__links a:hover { color: var(--page-fg); }
.nav__links a[aria-current="true"] { color: var(--page-fg); border-bottom-color: var(--gold); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600; font-size: .84rem; letter-spacing: .06em;
  text-decoration: none; cursor: pointer;
  padding: .8rem 1.35rem;
  background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--accent);
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.btn:hover { background: transparent; color: inherit; border-color: currentColor; }
.btn:active { transform: translateY(1px); }
.btn--line { background: transparent; color: inherit; border-color: currentColor; }
.btn--line:hover { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
.btn--lg { padding: .95rem 1.65rem; font-size: .92rem; }
.btn__arrow { font-size: 1.05em; line-height: 1; }

/* --- Bands ---------------------------------------------------------------- */
.band { background: var(--band-bg); color: var(--band-fg); }
.band__inner { padding-block: var(--band-y); }
/* the section straight after the split hero starts closer, so it reads as a
   continuation rather than a floating block */
.band__inner--lead { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.band--cream  { --band-bg: var(--b-cream);  --band-fg: var(--f-cream);  --band-soft: var(--s-cream); }
.band--cream2 { --band-bg: var(--b-cream2); --band-fg: var(--f-cream2); --band-soft: var(--s-cream2); }
.band--green  { --band-bg: var(--b-green);  --band-fg: var(--f-green);  --band-soft: var(--s-green); }
.band--leaf   { --band-bg: var(--b-leaf);   --band-fg: var(--f-leaf);   --band-soft: var(--s-leaf); }
.band--blue   { --band-bg: var(--b-blue);   --band-fg: var(--f-blue);   --band-soft: var(--s-blue); }
.band--red    { --band-bg: var(--b-red);    --band-fg: var(--f-red);    --band-soft: var(--s-red); }
.band--green .btn, .band--blue .btn, .band--leaf .btn, .band--red .btn {
  background: var(--band-fg); color: var(--band-bg); border-color: var(--band-fg);
}
.band--green .btn:hover, .band--blue .btn:hover, .band--leaf .btn:hover, .band--red .btn:hover {
  background: transparent; color: var(--band-fg);
}

.band__head { display: grid; gap: 1.25rem clamp(2rem, 6vw, 5rem); margin-bottom: clamp(2rem, 5vw, 3.25rem); }
@media (min-width: 58rem) { .band__head { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: end; } }
.band__title { font-size: var(--t-3); max-width: 17ch; }
.band__intro { color: var(--band-soft); max-width: 56ch; }
.band__head--tight { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* --- Phase marker --------------------------------------------------------- */
.phasemark {
  display: inline-flex; align-items: baseline; gap: .65rem;
  padding: .35rem .85rem .45rem;
  background: var(--pm-bg); color: var(--pm-fg);
  font-weight: 700; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.phasemark b { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; letter-spacing: 0; }

/* --- Hero ----------------------------------------------------------------- */
.hero { background: var(--cream); color: var(--page-fg); }
.hero__intro { padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.75rem, 4vw, 2.75rem); }
/* The supplied artwork is drawn for light grounds, so on a dark theme it
   sits on a cream plate rather than being recoloured. */
.hero h1 { font-size: var(--t-4); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.hero h1 em { font-style: italic; color: var(--red); }
.hero__sub { font-size: var(--t-1); max-width: 58ch; margin-top: 1.1rem; color: var(--page-soft); line-height: 1.55; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; }
.chip {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .42rem .8rem;
  background: var(--chip-bg); color: var(--chip-fg);
}

/* the hero is split in two: one half per project phase */
.split { display: grid; }
@media (min-width: 60rem) { .split { grid-template-columns: 1fr 1fr; } }
.half {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: .75rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--h-bg); color: var(--h-fg);
  text-decoration: none;
  transition: filter .2s ease;
}
.half:hover { filter: brightness(1.06); }
.half:focus-visible { outline-offset: -4px; }
.half__phase { margin: 0 0 .1rem; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.half__title { font-size: var(--t-3); max-width: 14ch; }
.half__when { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.half__text { margin: .35rem 0 0; max-width: 46ch; opacity: .95; position: relative; }
.half__facts {
  display: flex; flex-wrap: wrap; gap: 1.1rem 2rem;
  list-style: none; margin: auto 0 1.5rem; padding: 1.25rem 0 0;
  border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  position: relative;
}
.half__facts b {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.9rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  line-height: 1; margin-bottom: .2rem; font-variant-numeric: tabular-nums;
}
.half__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: .88rem; letter-spacing: .05em;
  padding-bottom: .3rem;
  border-bottom: 2px solid currentColor;
  position: relative;
}
.half:hover .half__cta { gap: .85rem; }

/* --- Stat blocks ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .stats { grid-template-columns: repeat(6, 1fr); } }
.stat { padding: clamp(1.1rem, 2.4vw, 1.6rem); background: var(--st-bg); color: var(--st-fg); }
.stat__n {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__l { display: block; margin-top: .45rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; line-height: 1.45; opacity: .94; }

/* --- Pillars -------------------------------------------------------------- */
.pillars {
  display: grid; gap: 0;
  border-top: 1px solid var(--rule);
}
.pillar {
  display: flex; flex-direction: column; gap: .7rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.pillar + .pillar { border-top: 1px solid var(--rule); }
@media (min-width: 54rem) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillar { padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
  .pillar + .pillar { border-top: 0; border-left: 1px solid var(--rule); }
  .pillar:first-child { padding-inline-start: 0; }
  .pillar:last-child { padding-inline-end: 0; }
}
/* Sized by height so the three illustrations read at the same optical weight
   despite different proportions. The artwork is line art in the brand colours,
   drawn for light grounds, so in the dark theme it sits on a cream tile rather
   than being recoloured. */
.pillar__icon {
  width: clamp(96px, 10vw, 116px);
  height: clamp(96px, 10vw, 116px);
  object-fit: contain;                  /* one square tile, whatever the drawing's shape */
  object-position: center;
  align-self: flex-start;               /* the pillar is a flex column - do not stretch */
  margin-bottom: .35rem;
  background: var(--icon-tile, transparent);
  padding: var(--icon-tile-pad, 0);
  box-sizing: content-box;
}
.pillar h3 { font-size: var(--t-2); }
.pillar__pl { font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin: 0; opacity: .92; }
.pillar p { color: var(--band-soft); margin: 0; max-width: 34ch; }

/* --- Cards ---------------------------------------------------------------- */
.cards { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 54rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--c-bg); color: var(--c-fg);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: flex; flex-direction: column; gap: .85rem;
}
.card h3 { font-size: var(--t-1); }
.card p { margin: 0; opacity: .95; }
.card ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; opacity: .95; font-size: .96em; }
.card__tag { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .92; margin: 0; }
.card .btn { margin-top: auto; align-self: flex-start; }

/* --- Row lists ------------------------------------------------------------ */
.rows { display: grid; gap: 0; }
.row { display: grid; gap: .25rem 1.75rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.rows .row:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) { .row { grid-template-columns: 13rem minmax(0,1fr); align-items: baseline; } }
@media (min-width: 48rem) { .rows--narrow .row { grid-template-columns: 9.5rem minmax(0,1fr); } }
.row__key { font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.row__val { margin: 0; color: var(--band-soft); }
.row__val b { color: var(--band-fg); font-weight: 600; }
.row h3 { font-family: "Montserrat", system-ui, sans-serif; font-size: .98rem; font-weight: 700; letter-spacing: .01em; }

/* --- Village photos ------------------------------------------------------- */
.photos { display: grid; gap: clamp(.6rem, 1.4vw, 1rem); }
@media (min-width: 46rem) { .photos { grid-template-columns: repeat(2, 1fr); } }
.photos figure { margin: 0; }
.photos__note {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
  max-width: 58ch; font-size: var(--t-1); line-height: 1.5;
  color: var(--band-fg);
}
.photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 46rem) {
  .photos__wide { grid-column: 1 / -1; }
  .photos__wide img { aspect-ratio: 21 / 9; }
}

/* --- Community consultation ----------------------------------------------- */
.survey {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--paper);
  border-top: 4px solid var(--green);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.survey__head { display: grid; gap: 1rem clamp(2rem, 5vw, 4rem); margin-bottom: 1.75rem; }
@media (min-width: 54rem) { .survey__head { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; } }
.survey h3 { font-size: var(--t-2); }
.survey__meta { margin: 0; color: var(--band-soft); font-size: .95em; }

.survey__top {
  display: grid; gap: 1rem clamp(1.5rem, 4vw, 3rem);
  list-style: none; margin: 0 0 1.75rem; padding: 0;
}
@media (min-width: 42rem) { .survey__top { grid-template-columns: repeat(3, 1fr); } }
.survey__top li { display: flex; flex-direction: column; gap: .2rem; }
.survey__top b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 600; line-height: 1;
  color: var(--green); font-variant-numeric: tabular-nums;
}
.survey__top span { font-size: .92em; color: var(--band-soft); max-width: 24ch; }

.survey__rows { display: grid; }
.srow {
  display: grid; gap: .35rem 1.25rem; padding: .9rem 0;
  border-top: 1px solid var(--rule);
  align-items: center;
}
.survey__rows .srow:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 52rem) {
  .srow { grid-template-columns: 11rem minmax(0,1fr) 8rem 3rem; }
}
.srow__q { margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--band-soft); }
.srow__a { margin: 0; }
.srow__bar { height: 8px; background: color-mix(in srgb, var(--green) 18%, transparent); }
.srow__bar span { display: block; height: 100%; background: var(--green); }
.srow__n {
  margin: 0; font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right;
}

.survey__quote { margin: 1.75rem 0 0; border-left: 3px solid var(--gold); padding-left: 1.1rem; }
.survey__quote blockquote {
  margin: 0; font-family: "Playfair Display", Georgia, serif;
  font-size: var(--t-1); line-height: 1.35;
}
.survey__quote figcaption { margin-top: .6rem; font-size: .88em; color: var(--band-soft); }
.survey__note { margin: 1.5rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--band-soft); max-width: 78ch; }


/* --- Village plate -------------------------------------------------------- */
.plate { display: grid; gap: 1.25rem; }
.plate figure { margin: 0; }
.plate figcaption { margin-top: .8rem; font-size: .84rem; color: var(--band-soft); font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 600; color: var(--band-soft); }
.legend i { width: 14px; height: 14px; display: block; }

/* --- Days ----------------------------------------------------------------- */
.days { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .days { grid-template-columns: 16rem minmax(0,1fr); gap: 2.5rem; } }

.daylist { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin: 0; }
@media (min-width: 62rem) { .daylist { flex-direction: column; overflow: visible; padding: 0; } }
.daytab {
  flex: 0 0 auto; width: 100%;
  display: flex; align-items: center; gap: .7rem;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600; font-size: .82rem; letter-spacing: .05em; text-align: left;
  padding: .85rem 1rem;
  border: 0; border-left: 5px solid transparent; cursor: pointer;
  background: var(--d-bg); color: var(--d-fg);
  opacity: .94;
  transition: opacity .18s, transform .18s, border-color .18s;
}
.daytab:hover { opacity: 1; }
.daytab[aria-selected="true"] { opacity: 1; border-left-color: currentColor; }
@media (min-width: 62rem) { .daytab[aria-selected="true"] { transform: translateX(6px); } }
.daytab b { font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.daypanel { background: var(--d-bg); color: var(--d-fg); padding: clamp(1.5rem, 3.5vw, 2.6rem); }
.daypanel[hidden] { display: none; }
.daypanel__meta { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .92; margin: 0 0 .7rem; }
.daypanel h3 { font-size: var(--t-2); margin-bottom: 1.1rem; }
.daypanel ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.daypanel li { opacity: .96; }
.daypanel li b { font-weight: 600; }

/* --- Timeline ------------------------------------------------------------- */
.timeline { display: grid; gap: 0; }
.tl { display: grid; gap: .3rem 1.75rem; padding: 1.15rem 0; border-top: 1px solid var(--rule); }
.timeline .tl:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 50rem) { .tl { grid-template-columns: 14rem minmax(0,1fr); align-items: baseline; } }
.tl__when { font-weight: 700; font-size: .8rem; letter-spacing: .06em; margin: 0; }
.tl__what { margin: 0; color: var(--band-soft); }
.tl__what b { color: var(--band-fg); font-weight: 600; }
.tl--now { background: color-mix(in srgb, var(--gold) 28%, transparent); padding-inline: 1rem; margin-inline: -1rem; }
.tl__badge {
  display: inline-block; margin-left: .5rem; padding: .12rem .5rem;
  background: var(--accent); color: var(--accent-ink);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  vertical-align: .12em;
}
.tl__phase {
  display: inline-block; margin-bottom: .3rem; padding: .1rem .45rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor;
}

/* --- Tables --------------------------------------------------------------- */
.tablewrap { overflow-x: auto; background: var(--paper); }
table { border-collapse: collapse; width: 100%; min-width: 36rem; }
caption { text-align: left; padding: 1rem 1.15rem; font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
th, td { text-align: left; padding: .85rem 1.15rem; border-top: 1px solid var(--rule); vertical-align: top; color: var(--ink); }
thead th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
tbody th { font-weight: 600; white-space: nowrap; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
tr.total th, tr.total td { background: color-mix(in srgb, var(--gold) 26%, transparent); }

/* --- Exchange ------------------------------------------------------------- */
.exchange { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 52rem) { .exchange { grid-template-columns: repeat(2, 1fr); } }
.exchange__col { background: var(--x-bg); color: var(--x-fg); padding: clamp(1.4rem, 3vw, 2.1rem); }
.exchange__col h3 { font-size: var(--t-1); margin-bottom: 1rem; }
.exchange ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.exchange li { padding-left: 1.5rem; position: relative; opacity: .96; }
.exchange li::before { content: "\2192"; position: absolute; left: 0; font-weight: 700; }
.exchange__col--back li::before { content: "\2190"; }

/* --- Incubation ----------------------------------------------------------- */
.incu__h { font-size: var(--t-2); margin: 0 0 .5rem; }
.incu__lead { margin: 0 0 1.5rem; color: var(--band-soft); max-width: 62ch; }
.incu__scope {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .84rem; line-height: 1.6; color: var(--band-soft); max-width: 80ch;
}

/* what comes with the place - a quiet strip, not a column */
.withit {
  display: grid; gap: 1rem clamp(1.25rem, 3vw, 2.25rem);
  list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0;
}
@media (min-width: 40rem) { .withit { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .withit { grid-template-columns: repeat(4, 1fr); } }
.withit li { display: flex; flex-direction: column; gap: .15rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.withit b { font-weight: 600; }
.withit span { font-size: .9em; color: var(--band-soft); }

/* --- The stipend ---------------------------------------------------------- */
.stipend {
  display: grid; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--band-fg) 10%, transparent);
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
@media (min-width: 46rem) { .stipend { grid-template-columns: auto minmax(0,1fr); } }
.stipend__figure {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 2rem + 5vw, 5.4rem); font-weight: 600; line-height: .9;
  margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stipend__cap { margin: 0; max-width: 52ch; }
.stipend__cap b { font-weight: 600; }
.stipend__cap--sub { margin-top: .6rem; color: var(--band-soft); font-size: .95em; }

/* --- The schedule --------------------------------------------------------- */
.months { list-style: none; margin: 0; padding: 0; display: grid; }
.months li {
  display: grid; gap: .3rem 1.5rem;
  padding: 1rem 0; border-top: 1px solid var(--rule);
  align-items: baseline;
}
.months li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 50rem) {
  .months li { grid-template-columns: 9rem minmax(0,1fr) 9.5rem; }
}
.months__when {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  display: flex; flex-direction: column; gap: .1rem;
}
.months__when span { font-weight: 500; letter-spacing: .06em; opacity: .8; }
.months__what { margin: 0; color: var(--band-soft); }
.months__what b { color: var(--band-fg); font-weight: 600; }
.months__gate {
  margin: 0; justify-self: start;
  padding: .3rem .6rem;
  background: var(--b-gold); color: var(--f-gold);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 50rem) { .months__gate { justify-self: end; } }

/* --- Gantt timelines ------------------------------------------------------ */
/* Rebuilt from the delivery calendar rather than embedded as an image, so the
   bars stay crisp, scroll instead of shrinking on a phone, and keep the track
   colours of the original charts. Both charts sit on a dark ground, in both
   themes, because the track palette is drawn for dark grounds. */
.gantt {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  --gantt-ink: #F1EFE6;
  --gantt-rule: rgba(241, 239, 230, .22);
  color: var(--gantt-ink);
}
.gantt--dark {
  background: #1F4D33;
  padding: clamp(1.1rem, 2.6vw, 1.75rem) clamp(1rem, 2.4vw, 1.6rem);
}
.band--blue .gantt { --gantt-rule: rgba(241, 239, 230, .22); }

.gantt__scroll { overflow-x: auto; padding-bottom: .5rem; }
.gantt__grid {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  min-width: 46rem;
}
@media (max-width: 40rem) { .gantt__grid { grid-template-columns: 9.5rem minmax(0,1fr); min-width: 42rem; } }

.gantt__label {
  margin: 0; padding: .42rem 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.3;
  border-top: 1px solid var(--gantt-rule);
}
.gantt__label--head { border-top: 0; }

.gantt__track {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  align-items: center;
  height: 100%;
  padding: .3rem 0;
  border-top: 1px solid var(--gantt-rule);
  background-image: repeating-linear-gradient(
    to right,
    var(--gantt-rule) 0 1px,
    transparent 1px calc(100% / var(--cols))
  );
  background-size: calc(100% / var(--cols)) 100%;
}
.gantt__track--head { border-top: 0; background-image: none; padding-bottom: .55rem; }
.gantt__track--head i {
  grid-column: var(--from) / span 1;
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  font-style: normal;
}
.gantt__track--head b { font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.gantt__track--head span { font-size: .6rem; letter-spacing: .08em; opacity: .75; }

.bar {
  grid-column: var(--from) / span var(--span);
  height: 11px; border-radius: 6px;
  margin-inline: 2px;
  background: var(--track, #9FB0A6);
}

/* track palette, taken from the delivery calendar charts */
.c-comms    { --track: #D8E7F5; }
.c-prep     { --track: #F1D07A; }
.c-tutor    { --track: #D0A155; }
.c-part     { --track: #8FC46E; }
.c-select   { --track: #E08A62; }
.c-fac      { --track: #90A9C8; }
.c-jury     { --track: #B3A5DC; }
.c-lab      { --track: #E9B93C; }
.c-prep2    { --track: #5FC6C1; }
.c-mentor   { --track: #F0CE72; }
.c-setup    { --track: #C3A7DE; }
.c-material { --track: #E08A6A; }
.c-design   { --track: #6ECBC4; }
.c-proto    { --track: #F2A0BE; }
.c-test     { --track: #8ED08A; }
.c-business { --track: #EFAE55; }
.c-legal    { --track: #A9B7C9; }
.c-demo     { --track: #F1EFE6; }

.gate {
  grid-column: var(--from) / span 1;
  justify-self: end;
  width: 11px; height: 11px;
  background: #E9B93C;
  transform: rotate(45deg) translateX(3px);
}
.gate--inline {
  display: inline-block; vertical-align: -1px;
  transform: rotate(45deg); margin-inline-end: .3rem;
  grid-column: auto; justify-self: auto;
}

.gantt__legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.15rem;
  list-style: none; margin: .95rem 0 0; padding: 0;
  font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.gantt__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.gantt__legend i {
  width: 20px; height: 9px; border-radius: 5px; flex: 0 0 auto;
  background: var(--track, #9FB0A6);
}
.gantt__legend .gate--inline { width: 10px; height: 10px; border-radius: 0; }

/* --- Closing call to action ----------------------------------------------- */
.closer {
  display: grid; gap: 1.25rem clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 46rem) { .closer { grid-template-columns: minmax(0,1fr) auto; } }
.closer__h { font-size: var(--t-2); }
.closer__p { margin: .4rem 0 0; color: var(--band-soft); max-width: 52ch; }

/* --- Open calls block ----------------------------------------------------- */
.calls { scroll-margin-top: 7rem; }
.calls__note {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: .88rem; line-height: 1.65; color: var(--band-soft); max-width: 82ch;
}


/* --- Demo days ------------------------------------------------------------ */
.demo { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 52rem) { .demo { grid-template-columns: repeat(2, 1fr); } }
.demo__card {
  background: color-mix(in srgb, var(--band-fg) 10%, transparent);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  display: flex; flex-direction: column; gap: .5rem;
}
.demo__when { margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.demo__card h4 { font-size: var(--t-1); }
.demo__card p { margin: 0; color: var(--band-soft); }


/* --- Footer --------------------------------------------------------------- */
.foot { background: var(--b-green); color: var(--f-green); }
.foot__inner { padding-block: clamp(3rem, 6vw, 4.5rem); display: grid; gap: 2.5rem; }
.foot__top { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .foot__top { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); } }
.foot .wordmark { --wm: 2.4rem; --wm-color: var(--f-green); margin-bottom: 1.1rem; }
.foot p { color: var(--s-green); max-width: 46ch; }
.foot__contact { display: grid; gap: .55rem; margin: 0; }
.foot__contact > div { display: grid; gap: .1rem .9rem; }
@media (min-width: 36rem) { .foot__contact > div { grid-template-columns: 8rem minmax(0,1fr); } }
.foot__contact dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--s-green); }
.foot__contact dd { margin: 0; }
.foot__contact a { text-underline-offset: 3px; }

.support { display: grid; gap: 1.4rem; padding-top: 2rem; border-top: 1px solid rgba(243,238,228,.22); }
.support .lockup { background: #FFFFFF; padding: .7rem .9rem; justify-self: start; }
.support p { font-size: .84rem; color: var(--s-green); max-width: 72ch; }
.colophon {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-top: 1.5rem; border-top: 1px solid rgba(243,238,228,.22);
  font-size: .78rem; color: var(--s-green);
}

/* --- Reveal --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}