/* =========================================================
   MoralMatrix Project — stylesheet
   Palette sampled from the logo gradient (cyan → indigo).
   Everything keys off the token block below.
   ========================================================= */

:root {
  /* ---- Brand (sampled from assets/logo-mark.png) ---- */
  --cyan:   #18e0d8;
  --teal:   #24ccd8;
  --blue:   #3c9ce4;
  --indigo: #5478e4;
  --brand-gradient: linear-gradient(110deg, var(--cyan), var(--blue) 55%, var(--indigo));

  /* ---- Surfaces ---- */
  --bg: #05070c;
  --bg-alt: #090d16;
  --surface: #0d1220;
  --surface-hi: #121a2c;
  --border: #1c2540;
  --border-hi: #2a3557;

  /* ---- Text ---- */
  --text: #e8eefc;
  --text-muted: #94a3c4;
  --text-dim: #6a7793;

  /* ---- Type ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Metrics ---- */
  --page-max: 1140px;
  --measure: 66ch;
  --radius: 0.875rem;
  --radius-sm: 0.5rem;
  --band: clamp(3.75rem, 9vw, 7rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand, .btn, .nav a, .eyebrow, .stat-num, .t-date {
  font-family: var(--font-display);
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: #ffffff;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.35rem + 3.4vw, 3.7rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; }

p { margin: 0 0 1em; max-width: var(--measure); color: var(--text-muted); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan); text-underline-offset: 0.2em; }
a:hover { color: #ffffff; }

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

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

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

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--surface); color: var(--text);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Gradient text, used sparingly for emphasis in headings. */
.grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   Layout
   ========================================================= */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.band { padding-block: var(--band); }
.band--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }

.eyebrow {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.9rem;
}

.section-head { margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.section-head p { font-size: 1.06rem; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 7, 12, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand img { height: 34px; width: auto; }

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.89rem;
  font-weight: 500;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #ffffff; }
.nav a[aria-current="true"] { color: #ffffff; border-bottom-color: var(--cyan); }

/* =========================================================
   Buttons
   ========================================================= */
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.25rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: var(--brand-gradient);
  color: #04121c;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  color: #04121c;
  transform: translateY(-1px);
  box-shadow: 0 8px 26px -10px var(--blue);
}
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover { color: #ffffff; border-color: var(--cyan); box-shadow: none; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  /* Fill the screen below the sticky header. svh accounts for mobile
     browser chrome; vh is the fallback for older engines. */
  min-height: calc(100vh - 70px);
  min-height: calc(100svh - 70px);
  display: grid;
  align-content: center;
  padding-block: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(46rem 26rem at 15% 0%, rgba(24, 224, 216, 0.10), transparent 65%),
    radial-gradient(40rem 24rem at 85% 20%, rgba(84, 120, 228, 0.14), transparent 65%);
}

/* Matrix rain sits behind everything in the hero. The mask keeps it out
   of the way of the logo (centre) and off the section edges, so it reads
   as texture rather than content. */
.rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
  /* The clear area around the logo is punched out by the canvas itself,
     which measures the real layout. This mask only softens the top and
     bottom edges so the field does not cut off hard at the section seam. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 12%, #000 86%, transparent 100%);
}

.hero-stack {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.scroll-cue { z-index: 1; }

/* Sized against the viewport's *height* so the mark fills the screen
   without ever pushing the slogan out of view. */
.hero-logo {
  width: auto;
  max-width: 88vw;
  max-height: 62vh;
  max-height: 62svh;
  filter: drop-shadow(0 0 90px rgba(60, 156, 228, 0.38));
}

.hero-slogan {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.45rem);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  max-width: 46ch;
  margin: clamp(1.5rem, 4vh, 2.75rem) 0 0;
}

/* Affordance that there is more below the splash. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  animation: cue 2.4s ease-in-out infinite;
}
.scroll-cue svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.scroll-cue:hover { color: var(--cyan); border-color: var(--cyan); }

@keyframes cue {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* ---- Premise: the question, now the second screen ---- */
.premise-stack { display: grid; justify-items: center; text-align: center; }

.hero-question {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  margin: 0 0 0.35em;
  max-width: none;
}

.hero-sub { margin-top: 0; }
.hero-actions { justify-content: center; }
.premise .stats { justify-content: center; width: 100%; }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  margin: 0;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.stats > div { display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.stats dd { margin: 0; }

.stat-num {
  display: block;
  font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =========================================================
   Cards
   ========================================================= */
.grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card:hover { border-color: var(--blue); transform: translateY(-2px); }
.card p { font-size: 0.97rem; max-width: none; }

.card-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan);
  margin-bottom: 0.85rem;
}

/* =========================================================
   Problem → approach pairs

   Each pair is a <details>. Collapsed it shows the problem and a
   one-line summary of our answer, so the whole section can be
   skimmed in one screenful; the full text expands on click.
   ========================================================= */
.pairs { margin: 0; padding: 0; }

.pair { border-top: 1px solid var(--border); }
.pair:first-child { border-top: 0; }

/* ---- Collapsed row ---- */
.pair-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1.5rem;
  padding-block: clamp(1.35rem, 3vw, 1.9rem);
  cursor: pointer;
  list-style: none;
}
.pair-summary::-webkit-details-marker { display: none; }
.pair-summary::marker { content: ""; }
.pair-summary:hover .pair-title { color: var(--cyan); }

.pair-summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.pair-head { min-width: 0; }

.pair-title {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}

/* The teaser is a preview of the approach, so it steps aside once the
   full text it previews is on screen. */
.pair-teaser {
  display: flex;
  gap: 0.55rem;
  font-size: 0.97rem;
  margin: 0;
  color: var(--text-muted);
}
.pair-teaser::before { content: "\2192"; color: var(--cyan); flex: 0 0 auto; }
.pair[open] .pair-teaser { display: none; }

.pair-chevron {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.15s ease, border-color 0.15s ease;
}
.pair-chevron svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.pair-summary:hover .pair-chevron { color: var(--cyan); border-color: var(--cyan); }
.pair[open] .pair-chevron { transform: rotate(180deg); }

/* ---- Expanded body ---- */
.pair-body {
  display: grid;
  gap: clamp(1rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
  align-items: start;
  padding-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}
@media (min-width: 56rem) {
  /* problem | connector | answer */
  .pair-body { grid-template-columns: 1fr auto 1fr; }
}

.pair-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  color: var(--text-dim);
}
.pair-summary .pair-tag { margin-bottom: 0.6rem; }
.pair-summary .pair-tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}
.pair-problem p { font-size: 0.98rem; }

/* The connector: an arrow on wide screens, a downward tick when stacked. */
.pair-link { display: grid; place-items: center; color: var(--blue); padding-top: 1.6rem; }
.pair-link svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
@media (max-width: 55.99rem) {
  .pair-link { justify-items: start; padding-top: 0; }
  .pair-link svg { transform: rotate(90deg); width: 1.3rem; height: 1.3rem; }
}

.pair-answer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  overflow: hidden;
}
.pair-answer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand-gradient);
}
.pair-answer .pair-tag { color: var(--cyan); }
.pair-answer p { font-size: 0.98rem; max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .pair-chevron { transition: none; }
}

/* =========================================================
   Timeline
   ========================================================= */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }

/* One connector per entry, so an unfinished entry can dash its own segment. */
.timeline li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.75rem;
  bottom: -0.15rem;
  width: 2px;
  background: var(--indigo);
  opacity: 0.55;
}
.timeline li:last-child::after { display: none; }

.timeline li {
  position: relative;
  padding-left: 2.6rem;
  padding-bottom: clamp(1.85rem, 4vw, 2.6rem);
}
.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid var(--cyan);
  box-shadow: 0 0 0 4px rgba(24, 224, 216, 0.10);
}

.t-date {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.25rem;
}
.t-title { font-size: 1.08rem; margin-bottom: 0.3rem; }
.timeline p { font-size: 0.97rem; }

/* =========================================================
   Team
   ========================================================= */
.team-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.7rem);
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
}

.member {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: border-color 0.18s ease;
}
/* Names wrap to different heights; pin the links to the bottom so they
   line up across the row. */
.member .member-links { margin-top: auto; padding-top: 0.5rem; }
.member:hover { border-color: var(--blue); }

.member .avatar,
.advisor .avatar {
  width: 82px;
  height: 82px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-hi);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cyan);
  border: 1px solid var(--border);
}

.member h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.member .role {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}

.member-links {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  font-size: 0.84rem;
  margin: 0;
}
.member-links a { text-decoration: none; }
.member-links a:hover { text-decoration: underline; }

/* --- Group labels (team, affiliations) -------------------
   Same small-caps treatment as the section eyebrows and the
   "Supported by" strip, so this reads as existing vocabulary
   rather than a new component. Both groups get one, so neither
   is the labelled exception. */
.team-group + .team-group { margin-top: clamp(2.5rem, 5.5vw, 3.75rem); }

.group-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.3rem;
}

/* One card can't sit in a four-column grid without looking stranded,
   so the advisor gets its own horizontal card. */
.advisor {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 1.75rem);
  max-width: 34rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.advisor:hover { border-color: var(--blue); }
.advisor::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand-gradient);
}
.advisor .avatar { margin: 0; flex: 0 0 auto; }
.advisor-body { min-width: 0; }
.advisor h3 { font-size: 1.05rem; margin-bottom: 0.1rem; }
.advisor .role {
  display: block;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}
.advisor .member-links { justify-content: flex-start; margin-top: 0; padding-top: 0; }

@media (max-width: 30rem) {
  .advisor { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* =========================================================
   Dedication

   The quietest thing on the page. No surface, no border, no
   accent — twice the usual vertical space and a narrow measure
   do the work. It should feel like the page pauses here.
   ========================================================= */
.dedication {
  padding-block: clamp(6.5rem, 16vw, 11rem);
  text-align: center;
  border-block: 1px solid var(--border);
}

.dedication .wrap {
  display: grid;
  justify-items: center;
  max-width: 46rem;
}

.dedication-label {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 2.25rem;
}

.dedication-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
  max-width: none;
}

.dedication-dates {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 0.9rem 0 0;
}

.dedication-words {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 42ch;
  margin: 2.5rem 0 0;
  text-wrap: pretty;
}

.dedication-photo {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 0 2.25rem;
  filter: grayscale(1);
  opacity: 0.9;
}

/* If a photo is used it leads, so the label sits beneath it. */
.dedication-photo ~ .dedication-label { margin-top: 0; }

/* =========================================================
   Repo band
   ========================================================= */
.repo .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.4);
  padding: clamp(1.75rem, 5vw, 2.75rem);
}
.repo h2 { margin-bottom: 0.35em; }
/* Narrower than the page default so the button keeps its place on the
   right rather than wrapping and leaving the card lopsided. */
.repo p { max-width: 52ch; }
.repo .actions { margin-top: 0; }

/* A button that is deliberately not usable yet: flattened to a muted
   surface, desaturated, and inert. Not a link, so it cannot be clicked,
   focused or followed — the look and the behaviour agree. */
.btn.is-locked {
  background: var(--surface);
  border: 1px dashed var(--border-hi);
  color: var(--text-dim);
  cursor: not-allowed;
  filter: saturate(0.4);
  box-shadow: none;
}
.btn.is-locked:hover { transform: none; box-shadow: none; filter: saturate(0.4); }
.btn.is-locked svg { opacity: 0.7; }

.lock-note {
  align-self: center;
  font-size: 0.86rem;
  font-style: normal;
  color: var(--text-dim);
}

/* =========================================================
   Affiliations
   ========================================================= */
.affiliations { text-align: center; }
.support-group + .support-group { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.affiliations .group-label { color: var(--text-dim); margin-bottom: 1.1rem; }

.affiliations h2 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 2rem; }

.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  flex-wrap: wrap;
}
.logo-row img {
  height: clamp(56px, 9vw, 76px);
  width: auto;
  border-radius: var(--radius-sm);
  opacity: 0.8;
  transition: opacity 0.18s ease;
}
.logo-row a:hover img, .logo-row img:hover { opacity: 1; }

/* A wide wordmark needs less height than a square seal to carry the same
   optical weight, so the sponsor row is sized independently. */
/* The official lockup is vertical (wordmark over Δομή), so it carries its
   weight in a squarer block and needs more height than a wide wordmark. */
.logo-row--sponsor img { height: clamp(46px, 7vw, 68px); }

/* Sized by optical weight rather than raw height: the square seal needs more
   height than the wide wordmark to read as equally present. */
.logo-uth  { height: clamp(62px, 10vw, 86px) !important; }
.logo-ieee { height: clamp(46px, 7.5vw, 64px) !important; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding-block: 2.5rem;
  font-size: 0.89rem;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer p { margin: 0; max-width: none; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: #ffffff; }

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

/* An entry still underway. Deliberately *less* emphatic than a finished
   milestone: hollow marker, dashed connector, no glow. Legibility untouched —
   the status is carried by the marker and the label, not by degrading text. */
.t-date--live { color: var(--cyan); }

.timeline li:has(.t-date--live)::before {
  /* A dashed border is unreadable as a ring at 16px, so the marker stays a
     clean open circle. The dashed connector below carries "unfinished". */
  background: transparent;
  border: 2px solid var(--cyan);
  box-shadow: none;
}
.timeline li:has(.t-date--live)::after {
  background: repeating-linear-gradient(
    to bottom,
    var(--cyan) 0 4px,
    transparent 4px 10px
  );
  opacity: 0.7;
}