/* ============================================================================
   LIGATURES SUMMER SCHOOL 2026 — "Transitions" · Call for Communications
   New optimized build (folder: new-site-call/)

   Design attitude: Ana Coelho's neo-brutalist editorial direction
   (offset "sticker" shadows, asymmetric grid, bold colour, big Lineal type)
   rebuilt on an accessible, tokenised, light/dark design system.

   Content: merged from temp-site/ (priority) into Ana's design.
   Typeface: Lineal (Velvetyne) — Frank Adebiaye, w/ Anton Moglia & Ariel Martín Pérez.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FONT — Lineal variable (self-hosted, SIL OFL; license bundled in /fonts)
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Lineal";
  src:
    url("../fonts/LinealVF.woff2") format("woff2"),
    url("../fonts/LinealVF.woff") format("woff");
  font-weight: 100 900; /* variable weight axis: Thin → Heavy */
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. DESIGN TOKENS — light theme is the default (:root)
   --------------------------------------------------------------------------- */
:root {
  /* -- Brand palette (Ana's CSS variables, renamed to roles) -- */
  --c-white: #ffffff;
  --c-black: #121212;
  --c-pink: #f7cae0; /* was --rosa        (light pink)   */
  --c-purple: #977cbf; /* was --azul        (light purple) */
  --c-blue: #08058f; /* was --azulEscuro  (deep blue)    */
  --c-magenta: #e35197; /* was --rosaEscuro  (magenta)      */

  /* -- Semantic roles (LIGHT). Body text uses high-contrast inks;
        magenta/purple/pink are reserved for large text & decoration. -- */
  --bg: var(--c-white);
  --bg-soft: #fbf1f7; /* pale pink tint for alt blocks */
  --ink: var(--c-black); /* body text — 21:1 on white     */
  --ink-soft: #57525e; /* secondary text — ~7:1         */
  --link: var(--c-blue); /* inline links — ~13:1 on white */
  --link-hover: var(--c-magenta);
  --accent: var(--c-magenta); /* large/decorative only         */
  --accent-2: var(--c-purple);
  --shadow: var(--c-purple); /* offset "sticker" shadow       */
  --line: rgba(18, 18, 18, 0.16);
  --line-strong: rgba(18, 18, 18, 0.9);
  --card-bg: var(--c-white);

  /* Footer is a constant deep-blue band in BOTH themes (white logos read
     at ~13:1; the mandatory CMT acknowledgment stays legible). */
  --footer-bg: var(--c-blue);
  --footer-ink: #ffffff;
  --footer-soft: rgba(255, 255, 255, 0.74);
  --footer-accent: var(--c-pink);

  /* -- Type scale: perfect fourth (1.333), generous base for legibility -- */
  --step--1: 0.89rem; /* ~14px  fine print            */
  --step-0: 1.1875rem; /* ~19px  body base             */
  --step-1: 1.58rem; /* ~25px                        */
  --step-2: 2.11rem; /* ~34px                        */
  --step-3: 2.81rem; /* ~45px                        */
  --step-4: 3.75rem; /* ~60px                        */
  --step-5: 5rem; /* ~80px                        */
  --step-6: 6.66rem; /* ~107px display               */

  /* -- Spacing -- */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6.5rem;

  /* -- Layout -- */
  --wrap: 78rem;
  --gutter: clamp(1.5rem, 4vw, 3rem);
  --header-h: 4.5rem;

  color-scheme: light dark;
}

/* ---------------------------------------------------------------------------
   3. DARK THEME — near-black canvas + bright accents.
      Applies when (a) OS prefers dark and user hasn't forced light, or
      (b) user explicitly chooses dark via the toggle (data-theme="dark").
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100e16; /* near-black, faint purple cast */
    --bg-soft: #1a1722;
    --ink: #f3f0f8;
    --ink-soft: #b6b0c2;
    --link: var(--c-pink); /* pink on near-black ~12:1      */
    --link-hover: var(--c-magenta);
    --accent: var(--c-magenta);
    --accent-2: var(--c-purple);
    --shadow: var(--c-magenta); /* magenta offset pops on black  */
    --line: rgba(243, 240, 248, 0.18);
    --line-strong: rgba(243, 240, 248, 0.9);
    --card-bg: #1a1722;
  }
}
:root[data-theme="dark"] {
  --bg: #100e16;
  --bg-soft: #1a1722;
  --ink: #f3f0f8;
  --ink-soft: #b6b0c2;
  --link: var(--c-pink);
  --link-hover: var(--c-magenta);
  --accent: var(--c-magenta);
  --accent-2: var(--c-purple);
  --shadow: var(--c-magenta);
  --line: rgba(243, 240, 248, 0.18);
  --line-strong: rgba(243, 240, 248, 0.9);
  --card-bg: #1a1722;
}

/* ---------------------------------------------------------------------------
   4. RESET / BASE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

html {
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: "Lineal", system-ui, sans-serif;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   5. TYPOGRAPHY — Lineal everywhere; bold, high-contrast hierarchy
   --------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: "Lineal", sans-serif;
  line-height: 1.04;
  text-wrap: balance;
}
h1 {
  font-size: clamp(var(--step-3), 7vw, var(--step-4));
  font-weight: 900;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(var(--step-2), 5vw, var(--step-3));
  font-weight: 800;
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--step-1);
  font-weight: 700;
}
p,
li {
  font-size: var(--step-0);
  max-width: 62ch;
}
p + p {
  margin-top: var(--space-s);
}
strong,
b {
  font-weight: 900;
}
em,
i {
  font-style: italic;
}

/* Display word (feature / theme) */
.display {
  font-size: clamp(var(--step-4), 16vw, var(--step-6));
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  max-width: none;
}

/* Eyebrow — small uppercase kicker (demotes "Theme: Transitions") */
.eyebrow {
  font-size: var(--step-0);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6em;
  max-width: none;
}
.eyebrow::before {
  content: attr(data-index);
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}

.lead {
  font-size: clamp(var(--step-0), 2.4vw, var(--step-1));
  color: var(--ink);
}
.muted {
  color: var(--ink-soft);
}

/* Big pull-quote (call section) */
.pullquote {
  font-size: clamp(var(--step-2), 5.5vw, var(--step-3));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: var(--space-l) 0 0;
  text-wrap: balance;
  max-width: none;
}
/* "We are accepting…" — a touch larger than body */
.accepting {
  font-size: clamp(var(--step-0), 2.6vw, var(--step-1));
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   6. LAYOUT — centered max-width container + asymmetric editorial grid
      (re-implements Ana's offset blocks with a zoom-safe 12-col grid)
   --------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-2xl);
  border-top: 2px solid var(--line);
}
.section__head {
  margin-bottom: var(--space-xl);
}

/* Editorial grid: place children with .pos-* helpers for asymmetric rhythm */
.editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-l) var(--gutter);
  align-items: start;
}
.pos-left-half {
  grid-column: 1 / 7;
}
.pos-right-half {
  grid-column: 7 / 13;
}
.pos-left-two3 {
  grid-column: 1 / 9;
}
.pos-right-two3 {
  grid-column: 5 / 13;
}
.pos-mid {
  grid-column: 4 / 11;
}
.pos-left-third {
  grid-column: 1 / 5;
}
.pos-right-third {
  grid-column: 9 / 13;
}
.pos-full {
  grid-column: 1 / -1;
}

/* Collapse to a single column on small screens (replaces vw offsets) */
@media (max-width: 760px) {
  .editorial > * {
    grid-column: 1 / -1 !important;
  }
}

/* --- Embedded 12-column system: per-element LEFT OFFSET + WIDTH --------------
   Drives the asymmetric prose rhythm (and the layout randomizer). Each child
   reads --start (= offset columns + 1) and --w (span). Set them with the
   .off-* / .w-* helpers, or override at runtime via JS inline styles.
   Offsets: 0 · 1/4 (3) · 1/3 (4) · 1/2 (6)  — never more than 1/2 of the row.
   Widths:  1/3 (4) · 1/2 (6) · 2/3 (8) · 3/4 (9) · full (12).               */
.editorial-flow {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-m);
  align-items: start;
}
.editorial-flow > * {
  grid-column: var(--start, 1) / span var(--w, 12);
  max-width: none;
  min-width: 0;
}
.off-0 {
  --start: 1;
} /* flush left       */
.off-quarter {
  --start: 4;
} /* 1/4 left padding */
.off-third {
  --start: 5;
} /* 1/3 left padding */
.off-half {
  --start: 7;
} /* 1/2 left padding */
.w-third {
  --w: 4;
}
.w-half {
  --w: 6;
}
.w-twothirds {
  --w: 8;
}
.w-threeq {
  --w: 9;
}
.w-full {
  --w: 12;
}
@media (max-width: 760px) {
  .editorial-flow > * {
    grid-column: 1 / -1 !important;
  }
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100%;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6em 1em;
  font-weight: 700;
}
.skip-link:focus {
  top: var(--space-s);
  color: var(--bg);
}

/* ---------------------------------------------------------------------------
   7. LINKS-AS-BUTTONS — Ana's offset "sticker" style, now accessible <a>
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.6em 1.2em;
  font-family: "Lineal", sans-serif;
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  /* Constant white "sticker" with dark text — legible on light & dark pages */
  color: #121212;
  background: var(--c-white);
  border: 2px solid #121212;
  box-shadow: 6px 6px 0 var(--shadow);
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition:
      box-shadow 0.12s ease,
      transform 0.12s ease,
      background-color 0.12s ease;
  }
}
.btn:hover,
.btn:focus-visible {
  background: var(--c-pink);
  color: #121212;
  box-shadow: 10px 10px 0 var(--shadow);
}
.btn:active {
  box-shadow: 2px 2px 0 var(--shadow);
  transform: translate(4px, 4px);
}
.btn--magenta {
  box-shadow: 6px 6px 0 var(--c-magenta);
}
.btn--magenta:hover,
.btn--magenta:focus-visible {
  box-shadow: 10px 10px 0 var(--c-magenta);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

/* ---------------------------------------------------------------------------
   8. HEADER — top colour stripe + sticky nav (logo, links, theme toggle)
   --------------------------------------------------------------------------- */
.topbar {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--c-magenta),
    var(--c-purple),
    var(--c-blue),
    var(--c-pink)
  );
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-header {
  position: sticky;
  top: 6px;
  z-index: 55;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img {
  height: 27px;
  width: auto;
}
.brand .logo-dark {
  display: none;
} /* white wordmark, shown in dark */

/* theme-aware wordmark swap (honours OS pref AND manual toggle) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light {
    display: none;
  }
  :root:not([data-theme="light"]) .brand .logo-dark {
    display: block;
  }
}
:root[data-theme="dark"] .brand .logo-light {
  display: none;
}
:root[data-theme="dark"] .brand .logo-dark {
  display: block;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Mobile menu button + theme toggle share a compact look */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.4em 0.8em;
  cursor: pointer;
  font-family: "Lineal", sans-serif;
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #121212;
  background: var(--c-white);
  border: 2px solid #121212;
  box-shadow: 3px 3px 0 var(--shadow);
}
.nav-toggle:hover {
  background: var(--c-pink);
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--accent);
}
.theme-toggle svg {
  display: block;
}

.nav-menu {
  list-style: none;
  padding: 0;
}
.nav-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4em 0.7em;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.nav-menu a:hover {
  color: #121212;
  background: var(--c-pink);
}
.nav-menu a[aria-current="true"] {
  color: var(--accent);
}

/* Mobile: collapse menu into a dropdown */
@media (max-width: 860px) {
  .nav-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 2px solid var(--line-strong);
    padding: var(--space-2xs) var(--gutter) var(--space-s);
  }
  .nav-menu.is-open {
    display: flex;
  }
  .nav-menu a {
    border-top: 2px solid var(--line);
  }
}
@media (min-width: 861px) {
  .nav-toggle {
    display: none;
  }
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }
  .nav-controls {
    gap: 0.5rem;
  }
}

/* ---------------------------------------------------------------------------
   9. FEATURE (#top) — full-viewport hero with Ana's colour LSS logo.
      Reserved for a future Three.js object (#scene canvas, behind content).
   --------------------------------------------------------------------------- */
#scene {
  /* future WebGL canvas — inert for now */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}
.feature {
  position: relative;
  min-height: calc(100vh - var(--header-h) - 6px);
  display: grid;
  place-items: center;
  padding-block: var(--space-xl);
  overflow-x: hidden;
  max-width: 100vw;
  transition:
    min-height 0.5s ease-out,
    padding 0.5s ease-out;
}

.feature__logo {
  width: min(92vw, 1280px);
  transform-origin: center;
  display: block;
  transform: rotate(0deg);
  transition:
    width 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, width;
}

.feature__logo img {
  width: 100%;
  display: block;
}

.feature__down {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-l);
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  color: #121212;
  border: 2px solid #121212;
  box-shadow: 4px 4px 0 var(--shadow);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.feature__down:hover {
  background: var(--c-pink);
}

.feature__down svg,
.feature__down img {
  width: 26px;
  height: 26px;
}

/* ----------------------------------------------------
   Mobile Breakpoints (Cascading downwards)
---------------------------------------------------- */

/* 760px: Trigger mobile layout and width, rotation stays 0deg */
@media (max-width: 760px) {
  .feature {
    min-height: calc(82svh - var(--header-h) - 6px);
    padding-block: var(--space-m);
  }

  .feature__logo {
    width: 108vw;
    transform: rotate(0deg);
  }
}

/* 600px: First rotation step */
@media (max-width: 600px) {
  .feature__logo {
    transform: rotate(-15deg);
  }
}

/* 480px: Second rotation step */
@media (max-width: 480px) {
  .feature__logo {
    transform: rotate(-30deg);
  }
}

/* 320px: Maximum rotation */
@media (max-width: 320px) {
  .feature__logo {
    transform: rotate(-45deg);
  }
}

/* ---------------------------------------------------------------------------
   10. CONTENT COMPONENTS
   --------------------------------------------------------------------------- */
.prose > * + * {
  margin-top: var(--space-s);
}

/* Key facts strip (dates · location · URL) — leads the overview */
.facts {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-l);
}
.facts dt {
  font-size: var(--step-2);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.facts dd {
  font-size: var(--step-1);
  margin: 0;
}
.facts .url {
  font-weight: 700;
}

/* "This year's edition" — definition-style feature list */
.feature-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-l);
  display: grid;
  gap: 0;
}
.feature-list > div {
  padding: var(--space-m) 0;
  border-top: 2px solid var(--line);
}
.feature-list > div:last-child {
  border-bottom: 2px solid var(--line);
}
.feature-list dt {
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--ink);
}
.feature-list dd {
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: var(--space-2xs);
}

/* Submission categories — sticker cards */
.cards {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-l);
}
@media (min-width: 760px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  background: var(--card-bg);
  border: 2px solid var(--line-strong);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: var(--space-m);
}
.card__index {
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card h3 {
  font-size: var(--step-1);
  margin-top: var(--space-2xs);
}
.card p {
  color: var(--ink-soft);
  font-size: var(--step-0);
  margin-top: var(--space-2xs);
}

/* Key dates */
.dates {
  margin-top: var(--space-l);
  border-top: 2px solid var(--line);
}
.date-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  padding: var(--space-m) 0;
  border-bottom: 2px solid var(--line);
}
@media (min-width: 640px) {
  .date-row {
    grid-template-columns: 13rem 1fr;
    gap: var(--space-l);
    align-items: baseline;
  }
}
.date-row dt {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-1);
}
.date-row dd {
  color: var(--ink-soft);
  margin: 0;
}
.date-row--key dt {
  color: var(--accent);
}
.date-row--key dd {
  color: var(--ink);
}

/* Guidelines checklist + numbered steps */
.checklist {
  list-style: none;
  padding: 0;
  margin-top: var(--space-m);
  display: grid;
  gap: var(--space-s);
}
.checklist li {
  position: relative;
  padding-left: 1.7em;
}
.checklist li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin-top: var(--space-m);
  display: grid;
  gap: var(--space-m);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.2rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  font-size: var(--step-1);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* CMT acknowledgment — plain, unmodified, full-contrast static text.
   Appears twice (after the submit link + in the footer). */
.cmt-ack {
  color: var(--ink);
  font-size: var(--step--1);
  max-width: 62ch;
  margin-top: var(--space-m);
}
.cmt-ack--standalone {
  border-top: 2px solid var(--line);
  padding-top: var(--space-m);
  margin-top: var(--space-l);
}
/* Footer copy sits on the constant deep-blue band — keep it white in BOTH themes. */
.site-footer .cmt-ack {
  color: var(--footer-ink);
}

/* Committee */
.committee-group + .committee-group {
  margin-top: var(--space-xl);
}
.committee-group h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--line-strong);
}
.people {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 640px) {
  .people {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .people--wide {
    grid-template-columns: repeat(3, 1fr);
  }
}
.people .name {
  font-weight: 800;
  display: block;
}
.people .aff {
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.people .role {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   11. FOOTER — temp-site structure (logo order/count, brand, CMT ack, credits)
       restyled to Ana's palette: constant deep-blue band, white logos/text.
   --------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding-block: var(--space-2xl);
  margin-top: var(--space-2xl);
}
.site-footer a {
  color: #fff;
}
.site-footer a:hover {
  color: var(--footer-accent);
}

.partners {
  margin-bottom: var(--space-xl);
}
.partners h2 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--footer-soft);
  margin-bottom: var(--space-m);
}
.partner-logos {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3rem) clamp(1.75rem, 6vw, 4rem);
}
.partner-logos img {
  height: clamp(30px, 5vw, 44px);
  width: auto;
}

.footer-grid {
  display: grid;
  gap: var(--space-l);
  border-top: 2px solid var(--footer-soft);
  padding-top: var(--space-xl);
}
@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}
.footer-brand img {
  height: 32px;
  width: auto;
}
.footer-url {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-size: var(--step-1);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.footer-note {
  color: var(--footer-soft);
  font-size: var(--step--1);
}
.footer-note + .footer-note {
  margin-top: var(--space-s);
}

.footer-credits {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 2px solid var(--footer-soft);
  color: var(--footer-soft);
  font-size: var(--step--1);
  display: grid;
  gap: var(--space-2xs);
}
.footer-credits a {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   12. BACK-TO-TOP (revealed after scroll by JS)
   --------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 40;
  width: 52px;
  height: 52px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  color: #121212;
  border: 2px solid #121212;
  box-shadow: 4px 4px 0 var(--shadow);
  text-decoration: none;
  font-size: var(--step-1);
}
.to-top:hover {
  background: var(--c-pink);
  color: #121212;
}
.to-top.is-visible {
  display: inline-flex;
}

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