/* ============================================================================
   GESDA — Geneva Public Portal to Anticipation · Bern 2026
   Surface class A (landing page), light theme. Naming: flat kebab-case.
   Requires fonts.css and tokens.css before this file. No raw colour values
   here: every colour, space, radius and type size is a token from tokens.css.
   Section mechanisms (designv2.1 §11.2): hero video · process rail + gallery ·
   card grid · date cards · logo strip · accordion · prose · footer.
   ========================================================================= */

/* ---------------------------------------------------------------- base -- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--layout-topbar) + var(--space-4));
}
html.nav-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-body);
  font: 400 var(--type-body) / 1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* height:auto neutralises the HTML height attribute so CSS aspect ratios win */
img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

a { color: var(--color-action-primary); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.prose a { text-decoration: underline; }   /* §10.1 links in running text */

:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.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;
}

/* §10.7 skip link: hidden until focused, then a primary button top-left */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 48px; padding: 14px 28px;
  background: var(--color-action-primary); color: var(--color-on-action);
  border-radius: var(--radius-lg); font-weight: 600;
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

/* ----------------------------------------------------------- type roles -- */

.type-display {
  font: 700 var(--type-display) / 1.05 var(--font-display);
  letter-spacing: -0.02em; color: var(--color-ink);
}
.type-h1 { font: 700 var(--type-h1) / 1.1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.type-h2 { font: 600 var(--type-h2) / 1.2 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); }
.type-h3 { font: 600 var(--type-h3) / 1.3 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); }
.type-h4 { font: 600 var(--type-h4) / 1.4 var(--font-display); color: var(--color-ink); }
.type-subhead { font: 500 var(--type-subhead) / 1.5 var(--font-body); }
.type-lead { font: 400 var(--type-lead) / 1.65 var(--font-body); }
.type-body-sm { font: 400 var(--type-body-sm) / 1.5 var(--font-body); }
.type-caption { font: 400 var(--type-caption) / 1.45 var(--font-body); color: var(--color-muted); }

/* Space Grotesk is scoped to eyebrows, uppercase labels and numerals (§4.3) */
.eyebrow {
  font: 600 var(--type-eyebrow) / 1.2 var(--font-accent);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
}
.data-label {
  font: 500 var(--type-data-label) / 1.3 var(--font-accent);
  letter-spacing: 0.02em;
}

.prose { display: flex; flex-direction: column; gap: var(--space-4); }
.prose p { max-width: 65ch; }

/* ------------------------------------------------------------- buttons -- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 14px 28px;
  border: 1px solid transparent; border-radius: var(--radius-lg);
  font: 600 var(--type-button) / 1.2 var(--font-body);
  cursor: pointer; text-align: center;
  transition: background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.button:hover, .button:focus-visible { text-decoration: none; }

.button-primary { background: var(--color-action-primary); color: var(--color-on-action); }
.button-primary:hover,
.button-primary:focus-visible { background: var(--color-action-primary-hover); color: var(--color-on-action); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.button-primary:active { background: var(--color-action-primary-active); box-shadow: none; transform: none; }
.button-primary:disabled,
.button-primary[aria-disabled="true"] { background: var(--purple-100); color: var(--color-muted); box-shadow: none; cursor: not-allowed; }

.button-secondary { background: transparent; color: var(--color-action-primary); border-color: var(--color-action-primary); }
.button-secondary:hover { background: var(--color-canvas-tinted); }
.button-secondary:active { background: var(--color-canvas-pressed); }

/* §13.1 actions go full width on mobile */
@media (max-width: 767px) { .actions .button { width: 100%; } }

/* --------------------------------------------------------------- todo -- */

/* Visible placeholder for content the client still owes (brief: never
   invent content where a marker exists). Remove when the item lands. */
.todo {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px 10px; border: 1px dashed currentColor; border-radius: var(--radius-pill);
  font: 600 var(--type-eyebrow) / 1.2 var(--font-accent);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-warning);
}
.todo-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--color-muted); }

.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-6);
  border: 1px dashed var(--color-warning); border-radius: var(--radius-md);
  background: var(--color-canvas-tinted); color: var(--color-muted);
  font: 400 var(--type-body-sm) / 1.5 var(--font-body); text-align: center;
}

/* -------------------------------------------------------------- layout -- */

.container {
  width: 100%;
  max-width: calc(var(--layout-container-max) + 2 * var(--space-6));
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 1440px) {
  .container { max-width: calc(var(--layout-container-max) + 2 * var(--space-12)); padding-inline: var(--space-12); }
}
.container-narrow { max-width: calc(var(--layout-container-narrow) + 2 * var(--space-6)); }

.section-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8) var(--space-16); align-items: start;
}
.section-head { display: flex; flex-direction: column; gap: var(--space-4); }
.section-head-centred { max-width: var(--layout-container-narrow); margin-inline: auto; text-align: center; }
.section-head-centred .prose p { margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }

@media (max-width: 899px) {
  .section-split { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* --------------------------------------------------------------- bands -- */

.band { padding-block: var(--space-section); }
.band-canvas { background: var(--color-canvas); }
.band-tinted { background: var(--color-canvas-tinted); }
.band-brand  { background: var(--purple-700); }
.band-deep   { background: var(--purple-900); }
.band-hero   { background: var(--gradient-mesh); }

/* §10.4 A coloured band is a complete local theme context: every surface
   token and every text token inverts together. Shadows are invisible on
   dark, so elevation there is a hairline (§7). */
.band-hero, .band-brand, .band-deep {
  --color-canvas: var(--color-wash-on-band);
  --color-canvas-tinted: var(--color-wash-on-band);
  --color-canvas-pressed: var(--color-wash-on-band-strong);
  --color-hairline: var(--color-hairline-on-band);
  --color-hairline-soft: var(--color-hairline-on-band-soft);
  --color-ink: var(--purple-050);
  --color-body: var(--purple-100);
  --color-muted: var(--purple-100);
  --color-action-primary: var(--color-white);
  --color-action-primary-hover: var(--purple-050);
  --color-action-primary-active: var(--purple-100);
  --color-on-action: var(--purple-900);
  --color-focus-ring: var(--purple-300);
  --color-warning: var(--p4-orange);
  --shadow-sm: none;
  --shadow-md: none;
  color: var(--color-body);
}
.band-brand { --color-ink: var(--color-white); --color-body: var(--purple-050); }
.band-deep  { --color-muted: var(--purple-300); }

/* Opts a subtree back to light semantics: a solid white card on a band */
.on-light {
  --color-canvas: var(--color-white);
  --color-canvas-tinted: var(--purple-050);
  --color-canvas-pressed: var(--purple-100);
  --color-hairline: var(--color-hairline-on-light);
  --color-hairline-soft: var(--color-hairline-soft-on-light);
  --color-ink: var(--purple-900);
  --color-body: var(--neutral-body);
  --color-muted: var(--neutral-muted);
  --color-action-primary: var(--purple-700);
  --color-action-primary-hover: var(--purple-800);
  --color-action-primary-active: var(--purple-900);
  --shadow-sm: var(--shadow-sm-on-light);
  --shadow-md: var(--shadow-md-on-light);
  --color-on-action: var(--color-white);
  --color-focus-ring: var(--purple-700);
  color: var(--color-body);
}

/* §6.2 A light section lifting off the dark band above it */
.band-lift {
  position: relative;
  margin-top: calc(-1 * var(--space-6));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* -------------------------------------------------------------- topbar -- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--color-hairline-soft);
  transition: box-shadow var(--motion-fast);
}
/* The blur lives on a pseudo-element: backdrop-filter on the bar itself would
   make it the containing block for the fixed-position navigation sheet. */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-topbar);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.topbar.is-scrolled { box-shadow: var(--shadow-sm); }
.topbar-inner { display: flex; align-items: center; gap: var(--space-6); height: var(--layout-topbar); }

.brand { display: inline-flex; align-items: center; margin-right: auto; border-radius: var(--radius-sm); }
.brand img { height: 40px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.nav-list { display: flex; align-items: center; gap: var(--space-6); }
.nav-list a {
  display: inline-block; padding: var(--space-2) 0;
  font: 500 0.9375rem / 1.2 var(--font-body); color: var(--color-ink);
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.nav-list a:hover, .nav-list a:focus-visible { color: var(--color-action-primary); border-bottom-color: currentColor; text-decoration: none; }

.nav-toggle { display: none; }

@media (max-width: 1023px) {
  .brand img { height: 34px; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-3);
    min-height: 44px; padding: 0 var(--space-4);
    background: none; border: 1px solid var(--color-hairline); border-radius: var(--radius-pill);
    color: var(--color-ink); font: 600 var(--type-label) / 1 var(--font-body); cursor: pointer;
  }
  .nav-toggle:hover { background: var(--color-canvas-tinted); }
  .nav-toggle:active { background: var(--color-canvas-pressed); }
  .nav-toggle-icon {
    position: relative; width: 18px; height: 12px;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  }
  .nav-toggle-icon::before, .nav-toggle-icon::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform var(--motion-fast), top var(--motion-fast), bottom var(--motion-fast);
  }
  .nav-toggle-icon::before { top: 0; }
  .nav-toggle-icon::after { bottom: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 5px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { bottom: 5px; transform: rotate(-45deg); }

  /* §10.7 full-screen sheet, never a cramped dropdown */
  .site-nav {
    position: fixed; top: var(--layout-topbar); left: 0; right: 0; bottom: 0; z-index: 49;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-8);
    padding: var(--space-6) var(--space-6) var(--space-12);
    background: var(--color-canvas); overflow-y: auto;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    display: block; padding: var(--space-4) 0;
    font: 600 var(--type-h3) / 1.3 var(--font-display); letter-spacing: -0.01em;
    border-bottom: 1px solid var(--color-hairline);
  }
  .nav-list a:hover, .nav-list a:focus-visible { border-bottom-color: var(--color-hairline); }
  .nav-cta { width: 100%; }
}

/* ---------------------------------------------------------------- hero -- */

.band-hero {
  position: relative; overflow: hidden;
  padding-block: var(--space-16) calc(var(--space-section) + var(--space-6));
}
@media (min-width: 1024px) { .band-hero { padding-top: var(--space-24); } }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: var(--space-12) var(--space-16); align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--space-6); }
.hero-copy .type-subhead { color: var(--color-ink); max-width: 46ch; }
.hero-copy .type-lead { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-2); }
.hero-media { display: flex; flex-direction: column; gap: var(--space-3); }

@media (max-width: 979px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Click-to-load video: the poster is local; YouTube loads only on request */
.video {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-md); border: 1px solid var(--color-hairline);
  background: var(--purple-900);
}
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.video-play:focus-visible { outline-offset: -4px; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-wash { position: absolute; inset: 0; background: var(--color-photo-wash); transition: opacity var(--motion-fast); }
.video-play:hover .video-wash, .video-play:focus-visible .video-wash { opacity: 0.5; }
.video-play-ring {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--color-white); color: var(--purple-900);
  transition: transform var(--motion-fast);
}
.video-play:hover .video-play-ring, .video-play:focus-visible .video-play-ring { transform: scale(1.06); }
.video-play-ring svg { width: 26px; height: 26px; margin-left: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video noscript { position: absolute; left: var(--space-4); bottom: var(--space-4); }
.video noscript a { color: var(--purple-050); text-decoration: underline; }

/* ------------------------------------------------------------- journey -- */

/* §10.8 process-rail: numbered ring nodes on a continuous route. Solid
   connector = completed leg; dashed = conditional (the next stop is open). */
.rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8); margin-top: var(--space-16);
}
.rail-step {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  padding-top: calc(48px + var(--space-4)); padding-right: var(--space-6);
}
.rail-node {
  position: absolute; top: 0; left: 0; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  border: 2px solid var(--color-action-primary);
  background: var(--color-action-primary); color: var(--color-on-action);
  font: 600 var(--type-data-label) / 1 var(--font-accent); letter-spacing: 0.02em;
}
.rail-step-open .rail-node { background: var(--color-canvas); color: var(--color-action-primary); }
.rail-step:not(:last-child)::after {
  content: ""; position: absolute; top: 23px;
  left: calc(48px + var(--space-3)); right: calc(var(--space-3) - var(--space-8));
  border-top: 2px solid var(--color-action-primary);
}
.rail-step-conditional::after { border-top-style: dashed; }
.rail-step .type-body-sm { color: var(--color-muted); }

@media (max-width: 719px) {
  .rail { grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-12); }
  .rail-step { min-height: 48px; justify-content: center; padding: 0 0 0 calc(48px + var(--space-4)); }
  .rail-step:not(:last-child)::after {
    top: calc(48px + var(--space-2)); bottom: calc(var(--space-2) - var(--space-8));
    left: 23px; right: auto; width: 0;
    border-top: 0; border-left: 2px solid var(--color-action-primary);
  }
  .rail-step-conditional::after { border-left-style: dashed; }
}

/* Gallery: photos at {radius.md} (§14.2), captions and credits in HTML */
.gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4); margin-top: var(--space-16);
}
.gallery-item { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-button {
  display: block; width: 100%; padding: 0; border: 0; background: var(--color-canvas-tinted);
  border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in;
}
.gallery-button img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--motion-medium);
}
.gallery-button img.gallery-img-top { object-position: bottom; }
.gallery-button:hover img, .gallery-button:focus-visible img { transform: scale(1.03); }
.gallery-item figcaption { display: flex; flex-direction: column; gap: var(--space-1); }
.gallery-caption { color: var(--color-body); }
.gallery-credit { color: var(--color-muted); }

@media (max-width: 1023px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
@media (max-width: 599px)  { .gallery { grid-template-columns: 1fr; margin-top: var(--space-12); } }

/* ------------------------------------------------------- science topics -- */

/* §10.3 card: objects the reader compares */
.card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-canvas); border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card-index { color: var(--color-muted); }

/* Five equal cards: three on the first row, two centred on the second */
.topic-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-6); margin-top: var(--space-12);
}
.topic-card { grid-column: span 2; }
.topic-card:nth-child(4) { grid-column: 2 / span 2; }
.topic-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 1023px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-card, .topic-card:nth-child(4), .topic-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 719px) {
  .topic-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .card { padding: var(--space-6); }
}

/* ---------------------------------------------------------- where next -- */

.next-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8) var(--space-16); align-items: end;
}
.next-copy { display: flex; flex-direction: column; gap: var(--space-6); }
.next-copy .type-lead { max-width: 60ch; }
.road-to-geneva { justify-self: end; width: min(100%, 320px); }

.schedule {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6); margin-top: var(--space-12);
}
.schedule-card { box-shadow: none; }
.schedule-dates { display: flex; flex-direction: column; gap: var(--space-4); }
.schedule-date { color: var(--color-action-primary); }

/* Card foot: the no-registration note, or the CTA line and Register button */
.schedule-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline-soft);
}
.schedule-foot p { color: var(--color-ink); }
/* Compact button: negative margins keep the foot one text line tall in both cards */
.schedule-foot .button { min-height: 0; padding: 8px 20px; margin: -8px 0; }

@media (max-width: 899px) {
  .next-head { grid-template-columns: 1fr; }
  .road-to-geneva { justify-self: start; }
}
@media (max-width: 719px) {
  .schedule { grid-template-columns: 1fr; gap: var(--space-4); }
  .schedule-foot .button { width: 100%; margin: 0; }
}

/* ------------------------------------------------------------ partners -- */

.logo-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6); align-items: stretch;
  margin-top: var(--space-12); padding-top: var(--space-12);
  border-top: 1px solid var(--color-hairline);
}
.logo-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 128px; padding: var(--space-6);
}
.logo-slot img { max-height: 60px; width: auto; max-width: 100%; }
.logo-slot .placeholder { width: 100%; height: 100%; }

@media (max-width: 719px) {
  .logo-strip { grid-template-columns: 1fr; gap: var(--space-4); }
  .logo-slot { min-height: 112px; }
}

/* ----------------------------------------------------------------- faq -- */

/* §10.6 accordion: a real <button> with aria-expanded, {type.h4}, chevron */
.accordion { border-top: 1px solid var(--color-hairline); }
.accordion-item { border-bottom: 1px solid var(--color-hairline); }
.accordion-trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 56px; padding: var(--space-4) var(--space-6);
  background: none; border: 0; border-radius: var(--radius-md);
  font: 600 var(--type-h4) / 1.4 var(--font-display); color: var(--color-ink);
  text-align: left; cursor: pointer;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}
.accordion-trigger:hover { color: var(--color-action-primary); }
.accordion-trigger:active { background: var(--color-canvas-pressed); }
.accordion-chevron {
  flex: none; width: 20px; height: 20px; color: var(--color-action-primary);
  transition: transform var(--motion-medium);
}
.accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
.accordion-panel { padding: 0 var(--space-6) var(--space-6); }
.accordion-panel p { max-width: 65ch; }

.section-note { margin-top: var(--space-4); }

@media (max-width: 719px) {
  .accordion-trigger { padding-inline: var(--space-3); }
  .accordion-panel { padding-inline: var(--space-3); }
}

/* --------------------------------------------------------------- about -- */

.about-copy { display: flex; flex-direction: column; gap: var(--space-6); }

/* -------------------------------------------------------------- footer -- */

.footer { padding-block: var(--space-16); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: var(--space-12) var(--space-16); align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-brand img { height: 60px; width: auto; align-self: flex-start; }
.footer-brand p { max-width: 40ch; }
.footer-group { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-group .type-h4 { color: var(--color-ink); }
.footer-group ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-group a { color: var(--color-muted); font: 400 var(--type-body-sm) / 1.5 var(--font-body); }
.footer-group a:hover, .footer-group a:focus-visible { color: var(--color-ink); }
.footer-group .todo { align-self: flex-start; margin-top: var(--space-2); }
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6);
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}
.footer-legal p, .footer-legal a { font: 400 var(--type-caption) / 1.45 var(--font-body); color: var(--color-muted); }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--color-ink); }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

@media (max-width: 899px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ------------------------------------------------------------ lightbox -- */

.lightbox {
  width: min(92vw, 1200px); max-width: none; max-height: 92vh;
  padding: 0; overflow: visible; background: transparent; border: 0;
}
.lightbox::backdrop { background: var(--color-scrim-strong); }
.lightbox-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.lightbox-img {
  width: 100%; height: auto; max-height: 78vh; object-fit: contain;
  border-radius: var(--radius-md); background: var(--purple-900);
}
.lightbox-caption { font: 400 var(--type-body-sm) / 1.5 var(--font-body); color: var(--purple-100); text-align: center; }
.lightbox-button {
  position: absolute; z-index: 1; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); border: 1px solid var(--color-hairline-on-band);
  background: var(--color-scrim); color: var(--purple-050); cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.lightbox-button svg { width: 20px; height: 20px; }
.lightbox-button:hover { background: var(--purple-700); border-color: var(--purple-300); }
.lightbox-button:focus-visible { outline: 3px solid var(--purple-300); outline-offset: 2px; }
.lightbox-prev { left: -12px; top: calc(50% - 24px); }
.lightbox-next { right: -12px; top: calc(50% - 24px); }
.lightbox-close { right: -12px; top: -12px; }

@media (max-width: 767px) {
  .lightbox { width: 94vw; }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
  .lightbox-close { right: 4px; top: 4px; }
}