/* ============================================================================
   STELLAR-X — single shared stylesheet (one source of truth for ALL pages).
   Page type is set via a body class: <body class="home"> or <body class="page">.
   Do NOT add per-page <style> blocks — edit here so every page stays identical.
   ========================================================================== */

/* ---------- Fonts (self-hosted, GDPR-friendly) ---------- */
@font-face {
  font-family: "Norwester";
  src: url("fonts/norwester.woff2") format("woff2"),
       url("fonts/norwester.otf")   format("opentype");
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}

/* ---------- Design tokens ---------- */
:root {
  --black: #000000;
  --ink-black: #0c1821;
  --deep-space-blue: #1b2a41;
  --charcoal-blue: #324a5f;
  --lavender: #ccc9dc;

  --text-primary: var(--lavender);
  --accent: var(--charcoal-blue);
  /* secondary/detail text — lightened to PASS WCAG 2.1 AA (>=4.5:1 on all our backgrounds).
     ONE shared token controls every muted text (footer, notes, lang buttons, etc.). */
  --text-muted: #8a9eb0;
  /* progress green (user request 2026-08-08): timeline/WP completion state.
     The ONLY colours outside the 5-colour palette — do not reuse elsewhere.
     --success = accents (bar, dots, badges), --success-bg = done-box fill,
     --success-deep = the oversized background tick. */
  --success: #6fcf97;
  --success-bg: #1c3a30;
  --success-deep: #2f8a5c;
}

/* Skip-to-content link (WCAG 2.4.1) — hidden until keyboard-focused */
.skip-link {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  transform: translateY(-180%);
  background: var(--lavender);
  color: var(--ink-black);
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  z-index: 100;
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--lavender); outline-offset: 2px; }

/* Visually-hidden (screen-reader-only) text */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  min-height: 100%;
  background-color: var(--ink-black);   /* overscroll alanı koyu — beyaz parlama yok */
  -webkit-text-size-adjust: 100%;        /* iOS yatayda yazıyı şişirmesin */
  text-size-adjust: 100%;
  overscroll-behavior: none;             /* aşağı çekince rubber-band/beyaz alan olmasın */
  /* html = tek scroll konteyneri (native scroll davranışı). overflow-y:scroll scrollbar'ı hep
     rezerve eder → sayfalar arası kayma olmaz. overflow-x:hidden burada (body'de DEĞİL) ki
     body ikinci bir scroll konteynerine dönüşüp scroll'u bozmasın. */
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

/* WebKit/Chromium (Edge, Opera, Brave, Safari) scrollbar — koyu, ince, siteyle uyumlu */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--charcoal-blue);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--deep-space-blue); }

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  min-height: 100vh;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Page-type backgrounds */
body.home {
  background: radial-gradient(ellipse at 50% 35%, var(--deep-space-blue) 0%, var(--ink-black) 55%, var(--black) 100%);
}
body.page {
  background: radial-gradient(ellipse at 50% 0%, var(--deep-space-blue) 0%, var(--ink-black) 55%, var(--black) 100%);
  background-attachment: fixed;
}

/* Home background network (bg-network.js draws into this canvas; user request 2026-09-28).
   Fixed full-viewport layer UNDER everything: content elements get position:relative + z-index
   so header/main/footer stay clickable and readable. pointer-events:none → never blocks input. */
.bg-net {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body.home > header,
body.home > main,
body.home > footer { position: relative; z-index: 1; }

/* ---------- Header / navigation ---------- */
header {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1.6rem 2.5rem;
}
body.home header,
body.page header { justify-content: space-between; }
/* Home keeps the left brand as an invisible spacer so the nav lands in the exact
   same position as the inner pages (no visible "STELLAR-X" needed on the home page) */
body.home .brand { visibility: hidden; }

/* Brand = the white wordmark SVG (user's drawing); sized to match the old
   1.6rem Norwester text footprint */
.brand { display: inline-block; line-height: 0; text-decoration: none; }
.brand img { display: block; height: 1.15rem; width: auto; }

nav ul { list-style: none; display: flex; gap: 2.4rem; }

/* ABOUT is a pure submenu toggle (button), not a link — reset chrome; the
   shared nav link rules below give it identical type/underline styling */
nav .nav-sub-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  vertical-align: top;   /* buttons baseline-align differently than inline links —
                            pin to the line-box top so ABOUT sits level with the row */
}

/* Hamburger toggle — hidden above the phone breakpoint */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--lavender);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; border-radius: 4px; }
/* open state: bars fold into an X */
header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

nav a,
nav .nav-sub-toggle {
  display: inline-block;      /* same box model for links AND the toggle button —
                                 inline links ignore padding in layout, the
                                 inline-block button doesn't, which pushed ABOUT
                                 5px below the row */
  vertical-align: top;
  color: var(--lavender);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.25s ease;
}
nav a::after,
nav .nav-sub-toggle::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--lavender);
  transition: width 0.25s ease;
}
nav a:hover, nav a:focus-visible,
nav .nav-sub-toggle:hover, nav .nav-sub-toggle:focus-visible { color: #fff; }
nav a:hover::after, nav a:focus-visible::after,
nav .nav-sub-toggle:hover::after, nav .nav-sub-toggle:focus-visible::after { width: 100%; }
nav a.active,
nav .nav-sub-toggle.active { color: #fff; }
nav a.active::after,
nav .nav-sub-toggle.active::after { width: 100%; }
nav a:focus-visible,
nav .nav-sub-toggle:focus-visible {
  outline: 2px solid var(--lavender); outline-offset: 6px; border-radius: 2px;
}

/* ---------- Nav submenu (CSS-only dropdown: hover + keyboard focus-within) ---------- */
.has-sub { position: relative; }
.has-sub > a .caret,
.has-sub > .nav-sub-toggle .caret {
  display: inline-block;
  margin-left: 0.4rem;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}
/* NOTE: the generic `nav ul` flex rule above also matches .sub-menu — override it here. */
.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.45rem 0;
  background: var(--deep-space-blue);
  border: 1px solid rgba(204, 201, 220, 0.16);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  /* 0.12s hover-intent delay both ways: sweeping the cursor across ABOUT on the
     way to NEWS no longer flashes the menu open, and briefly leaving the panel
     while reaching for an item no longer snaps it shut */
  transition: opacity 0.15s ease 0.12s, visibility 0.15s ease 0.12s;
}
/* open on hover (desktop) or explicit toggle (.open, set by nav.js). NO
   :focus-within here — the focused toggle button kept the menu stuck open
   after a click, making it appear while hovering unrelated nav items. */
.has-sub:hover .sub-menu,
.has-sub.open .sub-menu { opacity: 1; visibility: visible; }
.sub-menu a {
  display: block;
  padding: 0.55rem 1.2rem;
  /* same type as the top-level nav links (size + tracking inherit the nav a rule) */
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.sub-menu a::after { display: none; }        /* no underline animation inside the panel */
.sub-menu a:hover,
.sub-menu a:focus-visible { background: rgba(204, 201, 220, 0.07); }
.sub-menu a:focus-visible { outline-offset: -2px; }

/* ---------- Home hero ---------- */
body.home main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

/* Home hero logo = the white wordmark SVG (user's own drawing, 2026-08-07).
   The heartbeat glow moved from text-shadow to filter: drop-shadow (images
   have no text-shadow); same 7s cycle, same lavender tint. */
.logo { user-select: none; line-height: 0; }
.logo img {
  display: block;
  width: clamp(19rem, 74vw, 56rem);
  height: auto;
  will-change: filter;
  animation: heartbeat-glow 7s ease-in-out infinite;
}
/* IMPORTANT: every keyframe must have the SAME number of drop-shadow layers (two),
   otherwise Chromium/Edge can't interpolate the filter and the glow looks static. */
/* 7s cycle: hold fully off for ~5s (0%–71%), then a ~2s pulse up to ~20% and back to 0 */
@keyframes heartbeat-glow {
  0%, 71% { filter: drop-shadow(0 0 8px rgba(204, 201, 220, 0)) drop-shadow(0 0 15px rgba(204, 201, 220, 0)); }
  85%     { filter: drop-shadow(0 0 13px rgba(204, 201, 220, 0.12)) drop-shadow(0 0 28px rgba(204, 201, 220, 0.18)); }
  100%    { filter: drop-shadow(0 0 8px rgba(204, 201, 220, 0)) drop-shadow(0 0 15px rgba(204, 201, 220, 0)); }
}
/* Accessibility (WCAG 2.2.2 / 2.3.3): users who request reduced motion get a calm STATIC
   subtle glow instead of the pulse. Everyone else keeps the animation. */
@media (prefers-reduced-motion: reduce) {
  .logo img { animation: none; filter: drop-shadow(0 0 15px rgba(204, 201, 220, 0.18)); }
}

.hero {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}
.tagline {
  margin-top: 1rem;
  /* width:0 keeps the tagline from widening the wrapper; min-width:100% locks it to
     the logo's width. It wraps within that width (centred) instead of overflowing —
     so it stays one line on wide screens but never spills right on tablets. */
  width: 0;
  min-width: 100%;
  white-space: nowrap;          /* single line on desktop AND tablet (iPad) */
  text-align: center;
  line-height: 1.2;
  /* tuned so the line shrinks enough to stay within the logo width at tablet
     widths — never overflows / shifts right (phones wrap instead, see below) */
  font-size: clamp(0.35rem, 0.95vw, 0.72rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lavender);
}
.tagline .accent { color: var(--text-muted); }

/* ---------- Inner page content ---------- */
body.page main {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.page-title {
  font-family: "Norwester", "Inter", sans-serif;
  font-size: clamp(2.4rem, 6vw, 4rem);
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 40px rgba(204, 201, 220, 0.05);   /* subtle glow */
}

.content p {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.85;
  margin-bottom: 1.4rem;
  color: var(--lavender);
}
.content h2 {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 2.6rem 0 1rem;
}
.content ul { margin: 0 0 1.4rem 1.2rem; padding: 0; }
.content li {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--lavender);
  margin-bottom: 0.5rem;
}
.content a { color: #fff; text-decoration: underline; }
.content .muted { color: var(--text-muted); font-size: 0.85rem; }

/* ---------- Auth form ---------- */
.auth { max-width: 380px; margin: 2.5rem auto 0; }
.auth .field { margin-bottom: 1.3rem; }
.auth label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 0.5rem;
}
.auth input[type="email"],
.auth input[type="password"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--lavender);
  background: rgba(204, 201, 220, 0.04);
  border: 1px solid rgba(204, 201, 220, 0.50);   /* >=3:1 boundary (WCAG 1.4.11) */
  border-radius: 4px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.auth input::placeholder { color: var(--text-muted); }
.auth input:focus {
  outline: none;
  border-color: var(--lavender);
  background: rgba(204, 201, 220, 0.07);
}
.btn {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.9rem 1rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-black);
  background: var(--lavender);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn:hover, .btn:focus-visible { opacity: 0.85; }
.btn:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.auth-note {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.auth-note a { color: var(--lavender); text-decoration: none; }
.auth-note a:hover, .auth-note a:focus-visible { text-decoration: underline; }

/* ---------- Partner logo wall (uniform scale) ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}
.partner-tile { display: flex; flex-direction: column; }
/* white card = brand-correct logos on our dark theme; fixed height = same scale for all */
.partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  padding: 1.2rem 1.3rem;
  background: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.partner-card:hover, .partner-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.partner-card:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.partner-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-card .noimg {
  color: var(--ink-black);
  font-family: "Norwester", "Inter", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.2;
}
.partner-cap {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: center;
}
.partner-cap .coord {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 0.15rem;
}

/* ---------- Archive: project timeline (5 key moments, cards alternate above/below) ----------
   Grid contract: row 1 = cards above, row 2 = the line band (fixed height, line
   + dots centred in it), row 3 = cards below. Rows auto-size to the tallest
   card, so nothing can overlap or clip at any width. The line is inset by half
   a column on each side, so it runs exactly from the first to the last marker. */
.timeline {
  padding: 0.5rem 0 0.4rem;
  /* break out of the 820px content column — the timeline spreads across the
     viewport (up to 1400px, centred) while the rest of the page stays narrow */
  width: min(94vw, 87.5rem);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.tl-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto 4.4rem auto;
  margin: 0;
  padding: 0;
}
.tl-track::after {                     /* the project line, first->last marker */
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  height: 2px;
  margin: 0 10%;                       /* half a column each side = marker centres */
  background: var(--charcoal-blue);
}
.tl-track::before {                    /* green progress overlay on the line */
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  justify-self: start;
  height: 4px;
  margin-left: 10%;
  width: calc(80% * var(--tl-progress, 0));
  border-radius: 2px;
  background: var(--success);
  z-index: 1;
}
.tl-item { display: contents; }
.tl-item:nth-child(1) > * { grid-column: 1; }
.tl-item:nth-child(2) > * { grid-column: 2; }
.tl-item:nth-child(3) > * { grid-column: 3; }
.tl-item:nth-child(4) > * { grid-column: 4; }
.tl-item:nth-child(5) > * { grid-column: 5; }
.tl-card {
  border: 1px solid rgba(204, 201, 220, 0.16);
  border-radius: 8px;
  background: var(--deep-space-blue);
  padding: 0.8rem 0.9rem 0.85rem;
  margin: 0 0.5rem;
}
.tl-item:nth-child(odd)  .tl-card { grid-row: 1; align-self: end; }
.tl-item:nth-child(even) .tl-card { grid-row: 3; align-self: start; }
.tl-dot {                              /* same colour as the line, centred on it */
  grid-row: 2;
  justify-self: center;
  align-self: center;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--charcoal-blue);
  z-index: 2;
}
/* reached markers/cards turn progress-green: green box fill + an oversized
   darker-green tick in the background (frame stays unchanged) */
.tl-item.done .tl-dot { background: var(--success); }
.tl-item.done .tl-card {
  background: var(--success-bg);
  border-color: var(--success);
  position: relative;
  overflow: hidden;
}
.tl-item.done .tl-card::before {
  content: "";
  position: absolute;
  right: -2.2rem; bottom: -2.6rem;
  width: 13rem; height: 13rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 58 L42 80 L84 26' fill='none' stroke='%232f8a5c' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.45;
  pointer-events: none;
}
.tl-item.done .tl-card > * { position: relative; z-index: 1; }
.tl-major .tl-dot {                    /* start / end markers double as line caps */
  width: 4px; height: 18px;
  border-radius: 2px;
}
.tl-date {
  grid-row: 2;
  justify-self: center;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.tl-item:nth-child(odd)  .tl-date { align-self: end; }
.tl-item:nth-child(even) .tl-date { align-self: start; }
.tl-card h3 { font-size: 0.92rem; color: #fff; margin: 0.4rem 0 0.3rem; }
.tl-card p { font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); margin: 0; }
.tl-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tl-wp {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lavender);
  border: 1px solid rgba(204, 201, 220, 0.5);
  border-radius: 4px;
  padding: 0.14rem 0.4rem;
  white-space: nowrap;
}

/* completed work packages: green fill + oversized background tick */
.wp-item.done {
  background: var(--success-bg);
  border-color: var(--success);
  position: relative;
}

.wp-item.done > * { position: relative; z-index: 1; }
.wp-item.done .tl-wp { color: var(--success); border-color: var(--success); }

/* Below 900px five side-by-side cards get too narrow — go vertical.
   Dots, segments and caps share one x-anchor (line centre 6px from the left). */
@media (max-width: 900px) {
  .timeline { width: auto; left: auto; transform: none; }
  .tl-track { display: flex; flex-direction: column; padding: 0 0 0 1.6rem; gap: 1.1rem; }
  .tl-track::before { content: none; }
  .tl-track::after { content: none; }
  .tl-item { display: flex; flex-direction: column; position: relative; }
  .tl-item::after {                    /* per-item vertical segment of the line */
    content: "";
    position: absolute;
    left: calc(-1.6rem + 5px);
    top: -0.55rem; bottom: -0.55rem;
    width: 2px;
    background: var(--charcoal-blue);
  }
  .tl-item.done::after { background: var(--success); width: 4px; margin-left: -1px; border-radius: 2px; }
  .tl-item:first-child::after { top: calc(0.14rem + 5px); }
  .tl-item:last-child::after  { bottom: calc(100% - 0.14rem - 5px); }
  .tl-dot {
    position: absolute;
    left: calc(-1.6rem + 6px); top: 0.14rem;
    transform: translateX(-50%);
    z-index: 1;
  }
  .tl-major .tl-dot { width: 16px; height: 4px; top: calc(0.14rem + 3px); }
  .tl-card { margin: 0; }
  .tl-item:nth-child(odd) .tl-date,
  .tl-item:nth-child(even) .tl-date { align-self: flex-start; }
  .tl-date { text-align: left; margin: 0 0 0.4rem; order: -1; }
}

/* ---------- Archive: milestones accordion (one <details> per work package) ---------- */
.wp-acc { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.wp-item {
  border: 1px solid rgba(204, 201, 220, 0.16);
  border-radius: 8px;
  background: var(--deep-space-blue);
  overflow: hidden;
}
.wp-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
}
.wp-item summary::-webkit-details-marker { display: none; }
.wp-item summary:focus-visible { outline: 2px solid var(--lavender); outline-offset: -2px; border-radius: 8px; }
.wp-name { font-weight: 600; font-size: 0.95rem; color: var(--lavender); transition: color 0.2s ease; }
.wp-item summary:hover .wp-name { color: #fff; }
.wp-item summary .caret {
  margin-left: auto;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--lavender);
  transition: transform 0.2s ease;
}
.wp-item[open] summary .caret { transform: rotate(180deg); }
.wp-body {
  padding: 0 1.1rem 1.05rem;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
  animation: wp-open 0.22s ease;
}
@keyframes wp-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-body { animation: none; }
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid rgba(204, 201, 220, 0.08);
  padding: 0.6rem 2rem 1rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.8rem;
  margin-bottom: 1rem;
}
.footer-links a {
  color: var(--text-muted);
  opacity: 0.8;
  text-decoration: none;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer-links a:hover, .footer-links a:focus-visible { opacity: 1; color: var(--lavender); }
.footer-links a:focus-visible {
  outline: 2px solid var(--lavender); outline-offset: 4px; border-radius: 2px;
}
/* ---------- News & Events cards ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  background: rgba(204, 201, 220, 0.03);
  border: 1px solid rgba(204, 201, 220, 0.12);
  border-radius: 8px;
}
.news-meta { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.7rem; }
.news-tag {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-black);
  background: var(--lavender);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.news-tag.event { background: var(--charcoal-blue); color: var(--lavender); }
.news-date { font-size: 0.72rem; color: var(--text-muted); }
.news-card h3 {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 0.4rem;
}
.news-card p { font-size: 0.92rem; line-height: 1.6; color: var(--lavender); margin: 0; }
.news-more {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--lavender);
  text-decoration: none;
}
.news-more:hover, .news-more:focus-visible { text-decoration: underline; }

/* ---------- Results page: anchor table of contents ---------- */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 1.4rem 0 0.6rem;
  padding: 0;
}
.toc a {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lavender);
  text-decoration: none;
  border: 1px solid rgba(204, 201, 220, 0.5);   /* >=3:1 boundary (WCAG 1.4.11) */
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.toc a:hover, .toc a:focus-visible {
  color: #fff;
  border-color: var(--lavender);
  background: rgba(204, 201, 220, 0.07);
}
.toc a:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }

/* Social media icons */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: 1rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible { color: var(--lavender); background: rgba(204, 201, 220, 0.06); }
.footer-social a:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-bottom {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ---------- EIT HEI branding (mandatory — Partner Style Guide V1.0 §3.1, Horizon GA Art.17) ----------
   Hierarchy: 1 project logo → 2 "Supported by" KIC logo + EU "Funded by" lock-up → 3 HEI watermark.
   Header: lock-up 100px tall, right-aligned, ≥15px from the top — nothing else is prescribed, so no
   plate: white KIC + white EU lock-up on our background. Footer: lock-up + watermark, 100px tall,
   LEFT-aligned, ≥25px to the bottom, on a footer BAR (guide p.9: "use a footer bar on darker
   backgrounds" — written rule, so the bar stays). Wording stays in English. */
.eit-lockup {
  margin-left: 1.6rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  height: 100px;                      /* no plate: the guide sets only size/position for the header;
                                         white KIC + white EU lock-up (kit asset) straight on our bg */
}
#site-nav { margin-left: auto; }
.eit-kic { display: inline-flex; flex-direction: column; justify-content: center; gap: 0.15rem; }
.eit-label {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  color: #fff;
}
.eit-kic img { display: block; height: 30px; width: auto; }
.eit-eu { display: block; height: 42px; width: auto; }
.eit-divider { display: block; width: 1px; height: 54px; background: #fff; opacity: 0.55; }
.eit-stamp { display: block; height: 68px; width: auto; }

.footer-row {                          /* logos LEFT, legal text RIGHT, one row (Goksu, 28 Sep) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 0.6rem;
}
.footer-row .eit-bar { flex: 0 0 auto; margin: 0; padding: 0; }
.footer-row .eu-funding { flex: 1 1 auto; max-width: 720px; margin: 0; text-align: right; align-items: flex-end; }
.eit-bar {
  background: transparent;             /* the guide names a footer BAR but no colour → no fill at all:
                                          the lock-up sits on the page's own background (Goksu, 28 Sep) */
  margin: 0;                          /* first footer row: logos above the legal text (Goksu, 28 Sep) */
  padding: 0 0 25px;                  /* ≥25px below the lock-up (guide §3.1) */
}
.eit-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;        /* left-aligned to the page content */
  gap: 1.4rem;
  height: 100px;
}
.eu-funding p + p { margin-top: 0.35rem; }

/* EU funding acknowledgement (mandatory for EU-funded projects) */
.eu-funding {
  display: flex;
  flex-direction: column;              /* text-only since the EIT bar carries the emblems (2026-09-28) */
  align-items: center;
  gap: 0.9rem;
  max-width: 760px;
  margin: 0 auto 0.9rem;
  text-align: center;
}
.eu-funding p {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Language switcher — lives inside the nav bar */
.nav-lang {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}
.nav-lang button {
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid rgba(204, 201, 220, 0.50);   /* >=3:1 boundary (WCAG 1.4.11) */
  padding: 0.22rem 0.5rem;
  min-height: 24px;                               /* >=24px target (WCAG 2.5.8) */
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.nav-lang button:hover,
.nav-lang button:focus-visible { color: var(--lavender); border-color: var(--lavender); }
.nav-lang button[aria-current="true"] {
  color: var(--ink-black);
  background: var(--lavender);
  border-color: var(--lavender);
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  /* brand + 5 links + 4 lang buttons don't fit one row — stack the header */
  body.home header,
  body.page header {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
  }
  /* keep the home brand as an INVISIBLE spacer row (same as desktop) so the
     nav sits at the identical height on the home page and the inner pages */
  body.home .brand { visibility: hidden; }
  #site-nav ul {
    gap: 1rem 1.8rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  body.page main { padding: 2.5rem 1.5rem 4rem; }
  .footer-row { flex-direction: column; align-items: center; gap: 0.6rem; }
  .footer-row .eu-funding { text-align: center; align-items: center; }
  .eit-lockup { margin-left: 0; height: 84px; }
  .eit-lockup .eit-kic img { height: 26px; }
  .eit-lockup .eit-eu { height: 36px; }
  #site-nav { margin-left: 0; }
}

/* ---------- Phone: hamburger + dropdown panel ---------- */
@media (max-width: 600px) {
  /* header goes back to a single row: brand left, hamburger right */
  body.home header,
  body.page header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 0;
    padding: 0.6rem 0.8rem;
  }
  body.home .brand { display: inline; visibility: visible; }  /* real brand, not a spacer */
  .nav-toggle { display: flex; }

  /* nav panel = closed dropdown under the header (same look as the desktop
     submenu). Scoped to #site-nav — bare `nav` would also hit the footer's
     .footer-links/.footer-social navs and turn them into floating panels. */
  #site-nav {
    position: absolute;
    top: 100%;
    left: 0.8rem;
    right: 0.8rem;
    z-index: 90;
    display: none;
    background: var(--deep-space-blue);
    border: 1px solid rgba(204, 201, 220, 0.16);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
  header.nav-open #site-nav { display: block; }
  #site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.45rem 0; }
  #site-nav a {
    display: block;
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
  }
  #site-nav a::after { display: none; }        /* underline animation is a desktop affordance */
  #site-nav a:hover, #site-nav a:focus-visible, #site-nav a.active { background: rgba(204, 201, 220, 0.07); }
  #site-nav a:focus-visible { outline-offset: -2px; }

  /* submenu items stay nested: always expanded — the toggle button is redundant
     in the panel, so hide it; the About link (.sub-home) reads as top-level */
  .has-sub { display: block; }
  .has-sub > .nav-sub-toggle { display: none; }
  .sub-menu .sub-home a { padding: 0.7rem 1.2rem; font-size: 0.9rem; }
  .sub-menu {
    position: static;
    transform: none;
    visibility: visible;
    opacity: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sub-menu a { padding: 0.55rem 1.2rem 0.55rem 2.4rem; font-size: 0.82rem; }

  .nav-lang { padding: 0.55rem 1.2rem 0.7rem; }
  /* phone: lock-up becomes its own row under the header bar (still ≥15px from the top edge) */
  body.home header, body.page header { flex-wrap: wrap; }
  .eit-lockup { order: 3; width: 100%; height: 72px; margin: 0.6rem 0 0; justify-content: center; }
  .eit-lockup .eit-kic img { height: 22px; }
  .eit-lockup .eit-eu { height: 32px; }
  .footer-row { flex-direction: column; align-items: center; gap: 0.6rem; }
  .footer-row .eu-funding { text-align: center; align-items: center; }
  .eit-bar { margin: 0; padding: 0; }
  .eit-bar-inner { gap: 0.9rem; height: 84px; }
  .eit-bar .eit-kic img { height: 22px; }
  .eit-bar .eit-eu { height: 32px; }
  .eit-divider { height: 40px; }
  .eit-stamp { height: 52px; }

  body.home main { padding: 1.5rem 1.2rem; }
  body.page main { padding: 2rem 1.2rem 3rem; }

  .hero { width: 100%; max-width: 100%; }
  .tagline {
    width: auto;
    min-width: 0;
    max-width: 92vw;
    white-space: normal;
    line-height: 1.55;
    font-size: 0.72rem;
  }

  .page-title { font-size: clamp(2rem, 11vw, 3rem); }
  .content p,
  .content li { font-size: 0.98rem; }
  .content h2 { font-size: 1.3rem; }
}

@media (max-width: 380px) {
  .tagline { font-size: 0.66rem; }
}