/* PORTAL website. Tokens from the PORTAL Visual Identity Guidelines (recursos/01_identidad-visual). */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colour scheme */
  --navy: #023f63;
  --teal: #026d82;
  --sky: #7cc3e6;
  --mint: #cbe8e6;
  --coral: #ff8a7a;
  --paper: #f7fafb;
  --white: #ffffff;

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius-s: 10px;
  --radius-m: 20px;
  --arch: 999px 999px 0 0;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --step-3: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --step-4: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);

  /* Motion: things rise like a doorway out of the ground, and settle */
  --ease-rise: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--navy);
  background: var(--paper);
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.015em; }
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Brand: links are bold and underlined */
a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { color: var(--teal); }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--navy); color: var(--white); border-radius: var(--radius-s); }
.skip-link:focus { top: 12px; color: var(--white); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Brand: tags and buttons are upper case extrabold */
.btn {
  --btn-fill: var(--teal); --btn-fill-text: var(--white);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px;
  font: 800 var(--step--1)/1.2 var(--font); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--radius-s); border: 2px solid var(--navy);
  background: var(--navy); color: var(--white); cursor: pointer;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
/* Hover and focus: the new colour rises from below as a doorway, the same gesture as the lit door in the headers */
.btn::before {
  content: ""; position: absolute; z-index: -1; left: -6%; right: -6%; top: 0; height: 280%;
  border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  background: var(--btn-fill);
  transform: translateY(100%);
  transition: transform .45s var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: var(--btn-fill-text); border-color: var(--btn-fill); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(-40%); }
.btn-ghost { --btn-fill: var(--navy); background: transparent; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.tag {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--mint); color: var(--navy);
}

.placeholder-tag {
  display: inline-block; margin: 0; padding: 6px 12px; border: 2px dashed var(--coral); border-radius: 8px;
  background: #fff1ee; color: var(--navy); font-size: var(--step--1); font-weight: 600;
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--mint); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.brand { display: block; padding: 6px 0; }
.brand img { width: 132px; height: auto; }

.nav-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-link, .nav-group > button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  font: 600 0.9375rem/1.2 var(--font); color: var(--navy); text-decoration: none;
  background: none; border: 0; border-radius: var(--radius-s); cursor: pointer;
}
.nav-link:hover, .nav-group > button:hover { background: var(--mint); color: var(--navy); }
.nav-link[aria-current="page"], .nav-group.is-active > button { box-shadow: inset 0 -3px 0 var(--teal); border-radius: 0; }
.nav-group { position: relative; }
.nav-group > button::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .15s ease;
}
.nav-group > button[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-sub {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; margin: 0; padding: 8px; list-style: none;
  background: var(--white); border: 1px solid var(--mint); border-radius: var(--radius-m);
  box-shadow: 0 12px 32px rgba(2, 63, 99, 0.12); /* elevation: dropdown floats over page content */
  /* Opens with a short drop so it is clear where the list came from; hidden stays out of the tab order */
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s var(--ease-out), visibility 0s linear .18s;
}
.nav-group > button[aria-expanded="true"] + .nav-sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-sub a { display: block; padding: 10px 14px; border-radius: var(--radius-s); font-weight: 600; text-decoration: none; }
.nav-sub a:hover { background: var(--mint); color: var(--navy); }
.nav-sub a[aria-current="page"] { background: var(--mint); }
/* Information Hub opens to the right edge, so it must not overflow the window */
.nav-group:last-child .nav-sub { left: auto; right: 0; }
/* Nested group (Resources inside Information Hub, as on keepcaring.eu): a label, its links indented under it, a rule after */
.nav-sub-label { display: block; padding: 10px 14px 2px; font-size: var(--step--1); font-weight: 700; color: var(--teal); }
.nav-sub-group ul { margin: 0; padding: 0 0 6px; list-style: none; }
.nav-sub-group a { padding-left: 26px; }
.nav-sub-group + li { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--mint); }

.menu-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
  font: 800 var(--step--1)/1 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy);
  background: none; border: 2px solid var(--navy); border-radius: var(--radius-s); cursor: pointer;
}
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .22s var(--ease-out), top .22s var(--ease-out), background-color .1s linear; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after { top: 6px; }
/* Open: the bars turn into a cross, so the same button reads as "close" */
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background-color: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 820px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 76px); overflow-y: auto;
    background: var(--paper); border-bottom: 1px solid var(--mint); padding: 8px var(--gutter) 24px;
  }
  .menu-open .site-nav { display: block; animation: menu-drop .24s var(--ease-out); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link, .nav-group > button { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 1.0625rem; border-radius: 0; border-bottom: 1px solid var(--mint); }
  .nav-link[aria-current="page"], .nav-group.is-active > button { box-shadow: inset 3px 0 0 var(--teal); padding-left: 14px; }
  .nav-sub { position: static; min-width: 0; padding: 4px 0 8px 12px; border: 0; box-shadow: none; background: transparent; display: none; visibility: visible; opacity: 1; transform: none; transition: none; }
  .nav-group > button[aria-expanded="true"] + .nav-sub { display: block; }
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-mint { background: var(--mint); }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head p { margin-top: 16px; font-size: var(--step-1); line-height: 1.55; }
.prose { max-width: 68ch; }
.prose h2 { margin-bottom: 20px; }
.prose h3 { margin: 32px 0 10px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.lead { font-size: var(--step-1); line-height: 1.55; }

/* ---------- Headers: brand gradient (navy/teal) with a row of doorways along the bottom ---------- */
.hero, .page-hero {
  position: relative; overflow: hidden; color: var(--white);
  background: linear-gradient(115deg, var(--teal) 0%, #02567a 50%, var(--navy) 100%);
}
.hero h1, .page-hero h1 { color: var(--white); }
.hero :focus-visible, .page-hero :focus-visible { outline-color: var(--white); }
.hero-pattern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* Page load, the one moment per page: the row of doorways rises from the ground, left to right, like a street coming into view */
.arch-row path { transform-box: fill-box; transform-origin: 50% 100%; }
.hero .arch-row path, .page-hero .arch-row path { animation: arch-up .9s var(--ease-rise) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes arch-up { from { transform: translateY(100%); } }
@keyframes sun-up { from { transform: translateY(100%); } }

.btn-light { --btn-fill: var(--mint); --btn-fill-text: var(--navy); background: var(--white); border-color: var(--white); color: var(--navy); }
.btn-outline-light { --btn-fill: var(--white); --btn-fill-text: var(--navy); background: transparent; border-color: var(--white); color: var(--white); }

/* Home: the lit doorway (PORTAL symbol) stands on the row of doorways */
/* The home header fills the first screen under the sticky nav (77px), so no strip of the next section shows */
.hero { display: flex; flex-direction: column; min-height: max(560px, calc(100svh - 77px)); padding-top: clamp(56px, 7vw, 96px); }
.hero-grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.hero-copy { align-self: center; padding-bottom: clamp(56px, 7vw, 96px); }
.hero-copy h1 { max-width: 15ch; }
.hero-copy .lead { max-width: 46ch; margin-top: 24px; }
.hero-figure { display: flex; justify-content: center; align-self: end; }
.hero-figure-arch {
  display: flex; align-items: flex-end; justify-content: center;
  width: min(100%, 420px); aspect-ratio: 5 / 6; padding: 48px 12% 0;
  border-radius: var(--arch); background: linear-gradient(180deg, var(--mint) 0%, var(--paper) 100%);
  animation: door-rise 1.1s var(--ease-rise) .35s both; /* then the lit doorway rises into the row */
}
.hero-symbol { width: 100%; }
.hero-symbol svg { width: 100%; height: auto; }
/* ...and last, the sun comes up behind the children: the symbol's first path. It starts hidden behind the ground of the drawing. */
.hero-symbol #Layer_2 > path:first-child { transform-box: fill-box; animation: sun-up 1.3s var(--ease-out) 1.15s both; }
@keyframes door-rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }

/* "Under construction" page: the home header alone, full screen, with the logo on top instead of the menu */
.hero-construction { min-height: 100svh; padding-top: 0; }
.construction-top { position: relative; z-index: 1; padding-block: clamp(24px, 4vw, 40px) 0; }
.construction-top img { width: clamp(130px, 14vw, 170px); height: auto; }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding-bottom: 8px; }
  .hero-figure-arch { width: min(72%, 300px); }
}

/* ---------- Inner page header ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 88px) clamp(56px, 7vw, 96px); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero-arch { z-index: 1; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 60ch; margin-top: 20px; }
.page-hero-arch { position: absolute; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); bottom: 0; width: clamp(120px, 18vw, 230px); height: auto; animation: door-rise .9s var(--ease-rise) .3s both; }
.page-hero-arch .sun { transform-box: fill-box; animation: sun-up 1s var(--ease-out) .95s both; }
@media (max-width: 720px) { .page-hero-arch { display: none; } }

/* ---------- Split layout (text + figure) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split-wide-text { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.split-top { align-items: start; }
@media (max-width: 820px) { .split, .split-wide-text { grid-template-columns: 1fr; } }

/* ---------- Partner logo wall (home) ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.logo-wall li { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--white); border-radius: var(--radius-m); border: 2px solid transparent; transition: border-color .2s ease; }
/* Each card links to that partner's entry: the teal edge confirms which one you are about to open */
.logo-wall li:hover, .logo-wall li:focus-within { border-color: var(--teal); }
.logo-wall .logo-box { display: flex; align-items: center; justify-content: center; height: 72px; text-decoration: none; border-radius: var(--radius-s); }
.logo-wall img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
.logo-wall .logo-name { font-size: var(--step--1); font-weight: 600; line-height: 1.35; }
.logo-wall .logo-country { display: block; font-weight: 400; color: var(--teal); }
.logo-fallback { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 8px; border: 2px dashed var(--mint); border-radius: var(--radius-s); font-weight: 800; letter-spacing: 0.02em; text-align: center; }

/* ---------- Approach: route line with circle nodes (brand "elements in use") ---------- */
.route { margin: 0; padding: 0; list-style: none; }
.route li { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 24px; padding-bottom: 36px; }
/* line joins each node to the next one and stops at the last */
.route li:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 58px; bottom: 0; width: 4px; background: var(--sky); }
.route li:last-child { padding-bottom: 0; }
.route-node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--white); border: 5px solid var(--teal); font-weight: 800; color: var(--navy);
}
.route li:last-child .route-node { border-color: var(--coral); }
.route h3 { margin: 12px 0 6px; }
.route .wp-meta { font-size: var(--step--1); color: var(--teal); font-weight: 600; margin-bottom: 6px; }
/* With motion (main.js adds .route-live): the route still ahead is dashed, the stretch already read fills in solid teal
   as you scroll, and each node lights up when reading reaches it. The content is a real sequence, so the motion shows the order. */
.route-live .route li:not(:last-child)::before { background: repeating-linear-gradient(to bottom, var(--sky) 0 8px, transparent 8px 16px); }
.route-live .route li:not(:last-child)::after {
  content: ""; position: absolute; left: 27px; top: 58px; bottom: 0; width: 4px; background: var(--teal);
  transform: scaleY(var(--fill, 0)); transform-origin: top;
}
.route-live .route li .route-node { border-color: var(--sky); transition: border-color .35s ease; }
.route-live .route li.is-reached .route-node { border-color: var(--teal); }
.route-live .route li:last-child.is-reached .route-node { border-color: var(--coral); }

/* ---------- Objectives: arches with numbers (brand "elements in use") ---------- */
.arch-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(24px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .arch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .arch-list { grid-template-columns: 1fr; gap: 32px; } }
.arch-list li { display: flex; flex-direction: column; }
.arch-list .arch-num { display: grid; place-items: end center; width: 88px; height: 96px; padding-bottom: 14px; border-radius: var(--arch); font-size: 1.5rem; font-weight: 800; }
.arch-list li:nth-child(3n+1) .arch-num { background: var(--sky); color: var(--navy); }
.arch-list li:nth-child(3n+2) .arch-num { background: var(--mint); color: var(--navy); }
.arch-list li:nth-child(3n) .arch-num { background: var(--teal); color: var(--white); }
.arch-list p { margin-top: 16px; }
/* On entering: each numbered door fills from the ground up, one after the other, so the six read as a set in order */
.arch-list .arch-num { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-rise); transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Navy band: breaks the paper/mint alternation once per long page ---------- */
.section-navy { background: var(--navy); color: var(--white); }
.section-navy .section-head p { color: var(--mint); }
.section-navy a { color: var(--white); }
.section-navy a:hover { color: var(--sky); }
.section-navy :focus-visible { outline-color: var(--sky); }
/* teal doors disappear on navy, so the third colour becomes white */
.section-navy .arch-list li:nth-child(3n) .arch-num { background: var(--white); color: var(--navy); }

/* ---------- Partners page ---------- */
.partner-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 48px; padding: 0; list-style: none; }
.partner-index a { display: inline-block; padding: 8px 14px; background: var(--white); border-radius: var(--radius-s); font-size: var(--step--1); text-decoration: none; }
.partner-index a:hover { background: var(--navy); color: var(--white); }

.partner { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-block: 48px; border-top: 2px solid var(--mint); }
.partner:first-of-type { border-top: 0; padding-top: 0; }
.partner-logo { display: flex; align-items: center; justify-content: center; height: 140px; padding: 20px; background: var(--white); border-radius: var(--radius-m); }
.partner-logo img { max-height: 96px; width: auto; object-fit: contain; }
.partner-country { margin-bottom: 6px; color: var(--teal); font-weight: 600; }
.partner h2 { font-size: var(--step-2); }
.partner-role { margin: 10px 0 16px; }
.partner-body { max-width: 68ch; }
.partner-link { display: inline-block; margin-top: 8px; }
.partner-team { grid-column: 2 / -1; }
.partner-team .people { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 20px; }
@media (min-width: 761px) { .partner-team .people { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (max-width: 760px) { .partner-team { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .partner { grid-template-columns: 1fr; }
  .partner-logo { height: 120px; max-width: 320px; }
}

/* ---------- People (arch-framed portraits) ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.person-photo { aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--mint); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.person-initials { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2rem; font-weight: 800; color: var(--teal); }

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.board li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 24px; background: var(--white); border-radius: var(--radius-m); }
.board .person-photo { width: 112px; }
.board h2 { font-size: var(--step-1); }
.board p { font-size: 0.9375rem; line-height: 1.55; margin-top: 8px; }

/* ---------- Empty states (news, resources, media) ---------- */
.empty {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 28px; align-items: center;
  max-width: 760px; padding: 32px; background: var(--white); border-radius: var(--radius-m);
}
.empty-arch { width: 96px; height: 112px; border-radius: var(--arch); background: linear-gradient(180deg, var(--sky), var(--mint)); position: relative; overflow: hidden; }
.empty-arch::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: var(--coral); transition: transform .9s var(--ease-out) .2s; }
/* "Not yet": the sun is still coming up in the doorway */
.empty h2 { font-size: var(--step-1); margin-bottom: 8px; }
@media (max-width: 560px) { .empty { grid-template-columns: 1fr; } }

.resource-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding: 0; list-style: none; }
.resource-tabs a { display: inline-block; padding: 10px 18px; border-radius: var(--radius-s); background: var(--white); text-decoration: none; }
.resource-tabs a[aria-current="page"] { background: var(--navy); color: var(--white); }

/* ---------- Contact ---------- */
.contact-card { padding: 32px; background: var(--white); border-radius: var(--radius-m); }
.contact-card h2 { font-size: var(--step-2); margin-bottom: 12px; }
.contact-card dl { margin: 16px 0 0; }
.contact-card dt { font-weight: 700; margin-top: 12px; }
.contact-card dd { margin: 2px 0 0; }

/* ---------- Route map (home): trusted places, through the PORTAL doorway, to care ---------- */
.route-map { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rm-group { width: 100%; }
.rm-group ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
/* no grid gap: the column centres must sit exactly at 1/6, 3/6 and 5/6, where the lines start and end */
.rm-group li { display: flex; justify-content: center; padding-inline: 5px; }
.rm-group li span {
  display: flex; align-items: flex-end; justify-content: center;
  width: min(100%, 150px); aspect-ratio: 5 / 4; padding: 0 4px clamp(10px, 2vw, 16px);
  border-radius: var(--arch); clip-path: inset(0 0 0 0);
  font-size: clamp(0.6875rem, 0.55rem + 0.6vw, 0.9375rem); font-weight: 800; line-height: 1.2;
}
.rm-from li span { background: var(--sky); color: var(--navy); }
.rm-to li span { background: var(--teal); color: var(--white); }
.rm-label { margin: 0; font-weight: 700; color: var(--teal); }
.rm-from .rm-label { margin-bottom: 14px; }
.rm-to .rm-label { margin-top: 14px; }
.rm-links { display: block; width: 100%; height: clamp(40px, 6vw, 64px); clip-path: inset(0 0 0 0); }
.rm-links path { fill: none; stroke: var(--sky); stroke-width: 4; vector-effect: non-scaling-stroke; }
.rm-door { width: clamp(88px, 14vw, 124px); height: auto; }
.rm-door .sun { transform-box: fill-box; }
.route-map figcaption { max-width: 46ch; margin-top: 24px; font-size: var(--step--1); line-height: 1.55; }
/* Entering: drawn once, in reading order. Places rise, lines run into the door, the sun comes up, lines run out, care rises. */
.rm-from li span { transition: clip-path .6s var(--ease-rise) calc(var(--i, 0) * 90ms); }
.rm-links-in { transition: clip-path .55s ease-in-out .45s; }
.rm-door .sun { transition: transform .7s var(--ease-out) .95s; }
.rm-links-out { transition: clip-path .55s ease-in-out 1.35s; }
.rm-to li span { transition: clip-path .6s var(--ease-rise) calc(1.75s + var(--i, 0) * 90ms); }

/* ---------- News teaser (home) ---------- */
.news-band { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 820px) { .news-band { grid-template-columns: 1fr; } }

/* ---------- Tiered programme: stepped arches (brand pattern), height = level of care ---------- */
.tiers-figure { margin: 0; }
/* padding-top holds the sun; overflow hides the bars below the ground line before they rise */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin: 0; padding: 44px 0 0; list-style: none; position: relative; overflow: hidden; }
.tier { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 24px clamp(10px, 2vw, 20px) 22px; border-radius: var(--arch); transition: transform .9s var(--ease-rise); }
/* On entering: the steps rise one after another, so the climb in level of care is felt, and the sun lands on the top step */
.tier-2 { transition-delay: .14s; }
.tier-3 { transition-delay: .28s; }
.tier-3::before { transition: opacity .5s ease 1s, transform .7s var(--ease-out) 1s; }
.tier-1 { min-height: 210px; background: var(--mint); color: var(--navy); }
.section-mint .tier-1 { background: var(--white); }
.tier-2 { min-height: 280px; background: var(--sky); color: var(--navy); }
.tier-3 { min-height: 350px; background: var(--navy); color: var(--white); position: relative; }
.tier-3::before { content: ""; position: absolute; top: -34px; left: 50%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: var(--coral); }
.tier-name { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.tier-title { font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem); font-weight: 700; line-height: 1.25; }
.tiers-figure figcaption { margin-top: 14px; font-size: var(--step--1); }
.tier-notes { margin: 32px 0 0; }
.tier-notes dt { font-weight: 700; margin-top: 16px; }
.tier-notes dd { margin: 4px 0 0; }
.approach { align-items: start; }
.approach-tiers { padding-top: 4px; }

/* ---------- News ---------- */
.news-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.news-item { padding: 28px; background: var(--white); border-radius: var(--radius-m); }
.news-item h3 { margin: 12px 0 8px; font-size: var(--step-2); }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: var(--step--1); font-weight: 600; color: var(--teal); }
.news-band-link { margin-top: 16px; }
.news-list-page { max-width: 820px; }

/* ---------- Project page ---------- */
/* The site's one figure, inside a doorway (manual, Graphics, shapes: navy arch with the sun at its foot).
   It is the evidence behind the project, so it is the focal point of the page. Top padding keeps text below the curve. */
.fact {
  position: relative; overflow: hidden; align-self: start;
  padding: clamp(96px, 30%, 150px) clamp(24px, 9%, 44px) 92px;
  border-radius: var(--arch); text-align: center; color: var(--white);
  background: linear-gradient(180deg, var(--navy) 0%, var(--teal) 100%);
}
.fact::after { content: ""; position: absolute; left: 50%; bottom: -60px; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: var(--coral); transition: transform 1s var(--ease-out) .25s; }
.fact-figure { margin: 0 0 10px; font-size: var(--step-4); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--white); }
.fact p { position: relative; z-index: 1; }
.fact-source { margin-top: 14px; font-size: 0.8125rem; color: var(--mint); }
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.groups h3 { margin-bottom: 10px; padding-top: 18px; border-top: 4px solid var(--teal); }
@media (max-width: 820px) { .groups { grid-template-columns: 1fr; } }
.outputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin: 0; }
.outputs > div { padding: 22px 0; border-top: 2px solid var(--mint); }
.outputs dt { font-size: var(--step-1); font-weight: 700; }
.outputs dd { margin: 6px 0 0; }
@media (max-width: 700px) { .outputs { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; border-radius: var(--radius-m); background: var(--white); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mint); }
.data-table thead th { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--navy); color: var(--white); }
.data-table tbody th { font-weight: 600; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.wp-num { display: inline-block; min-width: 3.4em; font-weight: 800; color: var(--teal); }
@media (max-width: 640px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--mint); }
  .data-table th, .data-table td { display: block; padding: 2px 0; border: 0; }
}

.side-panel { align-self: start; padding: 32px; background: var(--white); border-radius: var(--radius-m); }
.section-mint .side-panel { background: var(--paper); }
.side-panel h2 { font-size: var(--step-2); margin-bottom: 12px; }
.side-panel h3 { margin-bottom: 10px; }
.side-panel .tag { margin-bottom: 14px; }

/* ---------- Partner extras ---------- */
.partner-body h3 { margin: 28px 0 8px; }
.partner-body > .placeholder-tag { margin-bottom: 16px; }
.partner-quote { margin: 28px 0 0; padding: 24px 28px; background: var(--mint); border-radius: var(--radius-m) var(--radius-m) var(--radius-m) 0; }
.partner-quote p { font-size: var(--step-1); font-weight: 600; line-height: 1.5; }
.partner-quote p::before { content: "\201C"; }
.partner-quote p::after { content: "\201D"; }
.logo-fallback .placeholder-note { display: block; margin-top: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }
.partner-logo .logo-fallback { flex-direction: column; width: 100%; height: 100%; font-size: 1.25rem; }
.person-name { margin: 14px 0 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.person-title { margin: 4px 0 0; font-size: var(--step--1); line-height: 1.45; }
.person-role { margin: 4px 0 0; font-size: var(--step--1); font-weight: 600; color: var(--teal); }
.person-bio { margin-top: 10px; font-size: 0.9375rem; line-height: 1.55; }
.person .person-bio + p { margin-top: 8px; font-size: var(--step--1); }
.people-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; margin-top: 16px; }
.people-compact .person-name { font-size: 0.9375rem; }
.board-heading { margin-top: 8px; }
.more-link { margin-top: 24px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.contact-partners { margin-top: 32px; }

/* ---------- Footer ---------- */
.footer-steps { width: 100%; height: auto; aspect-ratio: 1440 / 120; }
/* The same street of doorways closes every page: it rises when you reach it */
.footer-steps path { transition: transform .8s var(--ease-rise); transition-delay: calc(var(--i, 0) * 40ms); }
.footer-body { background: var(--navy); color: var(--mint); padding-block: 56px 32px; margin-top: -1px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 72px); }
.footer-brand img { width: 160px; }
.footer-brand p { margin-top: 18px; max-width: 34ch; font-size: 0.9375rem; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer-links h2 { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
.footer-links ul { margin: 0; padding: 0; list-style: none; }
.footer-links li + li { margin-top: 6px; }
.site-footer a { color: var(--white); font-weight: 600; text-decoration-thickness: 1px; }
.site-footer a:hover { color: var(--sky); }
.site-footer :focus-visible { outline-color: var(--sky); }
.footer-funding { font-size: 0.875rem; line-height: 1.55; }
.eu-funding { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* EU visual identity: on dark backgrounds the flag sits on a white border */
.eu-flag { width: 72px; height: 48px; border: 3px solid var(--white); box-sizing: content-box; }
.eu-label { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--white); }
.placeholder-tag.on-dark { margin-bottom: 14px; background: transparent; color: var(--white); border-color: var(--coral); }
.footer-funding .disclaimer { font-size: 0.8125rem; color: var(--mint); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(203, 232, 230, .3); font-size: 0.875rem; }
.footer-legal p { margin: 0; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Reveal: start states ----------
   Only with JS (.js, set in <head>) and only when motion is welcome. main.js adds .is-in once the graphic
   is on screen; the transitions declared with each component carry it to its final place.
   Without JS or with reduced motion, nothing here applies and every graphic is already in place. */
@media (prefers-reduced-motion: no-preference) {
  .js .footer-steps:not(.is-in) path { transform: translateY(100%); }
  .js .arch-list:not(.is-in) .arch-num { clip-path: inset(100% 0 0 0); }
  .js .tiers:not(.is-in) .tier { transform: translateY(calc(100% + 44px)); }
  .js .tiers:not(.is-in) .tier-3::before { opacity: 0; transform: translateY(24px); }
  .js .fact:not(.is-in)::after { transform: translateY(100%); }
  .js .empty:not(.is-in) .empty-arch::after { transform: translateY(100%); }
  .js .route-map:not(.is-in) li span { clip-path: inset(100% 0 0 0); }
  .js .route-map:not(.is-in) .rm-links { clip-path: inset(0 0 100% 0); }
  .js .route-map:not(.is-in) .rm-door .sun { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}