/* ═══════════════════════════════════════════════════════════
   Lady Stellar NPO
   The idea: the logo is a rainbow arc over a heart, and the
   organisation's own phrase is "walking the journey". So the arc
   is structural, not decoration. It masks the photography, it
   marks the values, and in the journey section it becomes a path
   that draws itself as you walk down the page.
   Type: Newsreader (display) · Caveat (hand) · Karla (body)
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #2c2320;
  --ink-soft: #4a3f38;
  --paper: #fff8ee;
  --paper-deep: #fcecd8;
  --paper-warm: #fffdf8;
  --red: #d0342c;
  --red-deep: #a8271f;
  --orange: #e8801f;
  --gold: #e0a021;
  --green: #6f9f36;
  --green-deep: #55801f;
  --text-ink: #4a3f38;
  --text-cream: #f0e2cf;
  --rule: rgba(44, 35, 32, 0.16);
  --rule-warm: rgba(208, 52, 44, 0.22);

  --display: "Newsreader", Georgia, serif;
  --hand: "Caveat", cursive;
  --body: "Karla", "Avenir Next", sans-serif;

  /* Exponential ease-out throughout. Personality comes from the choreography
     (drawn arcs, the walking path, staggered entrances), not from springy easing. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --arch: 50% 50% 14px 14px / 34% 34% 14px 14px;
  --gutter: clamp(1.5rem, 5vw, 5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Arcs and the tilted ticker bleed past the viewport on purpose.
     clip contains them without creating a scroll container; hidden is the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--body);
  color: var(--text-ink);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--red); color: var(--paper); }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

/* ── Shared type ──────────────────────────────────────────── */
.h-display {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.h-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--red);
}
.section--ink .h-display { color: var(--paper); }
.section--ink .h-display em { color: var(--gold); }

/* Width is set for the display face, not the body face: a ch-based cap here
   would break two-line headings onto three lines. The intro keeps its own measure. */
.lead {
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  text-align: center;
}
.lead--center { max-width: 48rem; }
.lead__intro {
  margin: 1.5rem auto 0;
  font-size: 1.08rem;
  max-width: 46ch;
  text-wrap: pretty;
  color: var(--ink-soft);
}
.lead__intro--center { margin-inline: auto; text-align: center; }

.container {
  width: min(74rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.container--overlay { position: relative; z-index: 2; }

.section {
  position: relative;
  padding-block: clamp(4rem, 7vw, 6.5rem);
}
.section--paper { background: var(--paper); }
.section--peach { background: var(--paper-deep); }
.section--ink { background: var(--ink); color: var(--text-cream); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.3rem;
  border: 2px solid var(--red);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.3s var(--ease),
              color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.btn--red {
  background: var(--red);
  color: var(--paper);
  box-shadow: 0 12px 26px -14px rgba(168, 39, 31, 0.75);
}
.btn--red:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -14px rgba(168, 39, 31, 0.75);
}
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); transform: translateY(-3px); }

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.nav--solid {
  background: rgba(255, 248, 238, 0.9);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--rule-warm), 0 16px 34px -26px rgba(44, 35, 32, 0.5);
}
.nav__brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.nav__logo { width: 52px; height: auto; mix-blend-mode: multiply; }
.nav__wordmark {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav__wordmark em { font-style: normal; color: var(--red); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2rem); }
.nav__links a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 0.3rem;
  transition: color 0.3s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  border-bottom: 2px solid var(--gold);
  border-radius: 2px;
  transition: right 0.45s var(--ease);
}
.nav__links a:hover { color: var(--red); }
.nav__links a:hover::after { right: 0; }
.nav__links .nav__cta {
  background: var(--red);
  border: 2px solid var(--red);
  color: var(--paper);
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  transition: transform 0.4s var(--ease), background 0.3s;
}
.nav__links .nav__cta::after { display: none; }
.nav__links .nav__cta:hover { background: var(--red-deep); color: var(--paper); transform: translateY(-2px); }
/* 44x44 hit area (the bars stay visually small and centred inside it) */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 6px; right: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transition: transform 0.45s var(--ease), top 0.45s var(--ease);
}
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 27px; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(8rem, 17vh, 12rem) var(--gutter) 0;
  background:
    radial-gradient(120% 70% at 50% 0%, #fff5e3 0%, var(--paper) 60%);
  overflow: hidden;
}
.hero__sky { position: absolute; inset: 0; pointer-events: none; }
/* aspect-ratio matches the viewBox so the arc keeps its curve at every width.
   Sized by height alone it crops to flat bands on narrow screens. */
.hero__arcs {
  position: absolute;
  left: 50%;
  top: -4%;
  width: min(150%, 1500px);
  aspect-ratio: 1200 / 640;
  height: auto;
  transform: translateX(-50%) translateY(calc(var(--py, 0) * 0.4px));
  opacity: 0.42;
}
.hero__arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawArc 2.2s var(--ease) forwards;
}
.hero__arc:nth-child(2) { animation-delay: 0.16s; }
.hero__arc:nth-child(3) { animation-delay: 0.32s; }
@keyframes drawArc { to { stroke-dashoffset: 0; } }

.floater { position: absolute; display: block; }
.floater svg { width: 100%; height: auto; }
.floater--1 { width: 26px; left: 7%;  top: 30%; color: var(--red);    animation: bob 9s ease-in-out infinite; }
.floater--2 { width: 17px; left: 16%; top: 58%; color: var(--orange); animation: bob 11s ease-in-out -2s infinite; }
.floater--3 { width: 21px; right: 9%; top: 26%; color: var(--green);  animation: bob 10s ease-in-out -4s infinite; }
.floater--4 { width: 14px; right: 18%; top: 54%; color: var(--gold);  animation: bob 13s ease-in-out -1s infinite; }
.floater--5 { width: 11px; left: 46%; top: 15%; color: var(--red);    animation: bob 12s ease-in-out -6s infinite; }
.floater svg { fill: currentColor; opacity: 0.5; }
@keyframes bob {
  0%,100% { transform: translate3d(0,0,0) rotate(-8deg); }
  33%     { transform: translate3d(6px,-18px,0) rotate(6deg); }
  66%     { transform: translate3d(-5px,-9px,0) rotate(-3deg); }
}

.hero__grid {
  position: relative;
  z-index: 2;
  width: min(74rem, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--red);
  position: relative;
  white-space: nowrap;
}
.hero__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.12em;
  height: 0.1em;
  background: var(--gold);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  animation: swipe 0.9s var(--ease) 0.9s forwards;
}
@keyframes swipe { to { transform: scaleX(1); } }

.hero__aside { padding-bottom: 0.6rem; }
.hero__subtitle {
  font-size: 1.05rem;
  max-width: 42ch;
  color: var(--ink-soft);
}
.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero__credential {
  margin-top: 1.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-warm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.hero__stage {
  position: relative;
  z-index: 2;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  width: min(88rem, 100%);
}
.hero__media {
  overflow: hidden;
  border-radius: 50% 50% 18px 18px / 22% 22% 18px 18px;
  box-shadow: 0 40px 70px -40px rgba(120, 40, 20, 0.55);
  aspect-ratio: 16 / 8;
}
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Flows below the video on the paper. Absolutely positioned over the photo it
   needed an opaque backing plate, which read as a glitch rather than a note. */
.hero__scribble {
  width: fit-content;
  margin: 1.5rem auto 0;
  transform: rotate(-2deg);
  font-family: var(--hand);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--green-deep);
}

/* ── Values ticker ────────────────────────────────────────── */
.ticker {
  overflow: hidden;
  background: var(--red);
  padding: 0.9rem 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  transform: rotate(-0.7deg) scale(1.03);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.ticker__track span {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.ticker__heart { width: 12px; height: 12px; fill: var(--gold); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Our story ────────────────────────────────────────────── */
.story {
  width: min(74rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.story__text { max-width: 60ch; }
.story__text .h-display { margin-bottom: 2rem; }
.story__text p + p { margin-top: 1.1rem; }
.lede {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.story__figure {
  position: relative;
  margin-right: calc(var(--gutter) * -1);
  border-radius: var(--arch);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 40px 70px -46px rgba(120, 40, 20, 0.6);
}
.story__figure img { width: 100%; height: 100%; object-fit: cover; }

.pullquote {
  width: min(60rem, 100% - var(--gutter) * 2);
  margin: clamp(3rem, 5.5vw, 4.5rem) auto 0;
  text-align: center;
}
.pullquote__mark { width: 30px; height: 30px; margin: 0 auto 1.4rem; fill: var(--red); }
.pullquote blockquote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.7vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.pullquote figcaption {
  margin-top: 1.4rem;
  font-family: var(--hand);
  font-size: 1.25rem;
  color: var(--red);
}

.facts {
  width: min(74rem, 100% - var(--gutter) * 2);
  margin: clamp(2.75rem, 5vw, 4rem) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
}
.facts__item { border-top: 2px solid var(--rule-warm); padding-top: 1rem; }
.facts__item:nth-child(even) { transform: translateY(1.6rem); }
.facts__item dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 0.3rem;
}
.facts__item dd {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ── The work: broken grid, no equal cards ────────────────── */
.pathways {
  width: min(80rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
.path { display: flex; flex-direction: column; }
.path:nth-child(-n+2) { grid-column: span 3; }
.path:nth-child(n+3)  { grid-column: span 2; }
.path--low { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.path__figure {
  overflow: hidden;
  border-radius: var(--arch);
  margin-bottom: 1.3rem;
  box-shadow: 0 26px 50px -34px rgba(120, 40, 20, 0.55);
}
.path:nth-child(-n+2) .path__figure { aspect-ratio: 5 / 4; }
.path:nth-child(n+3) .path__figure  { aspect-ratio: 4 / 5; }
.path__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.path:hover .path__figure img { transform: scale(1.05); }
.path__body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.path__body p { font-size: 0.95rem; max-width: 42ch; }
.path--feature .path__body h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.path--feature .path__body p { font-size: 1.02rem; }

.assurances {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 2.6rem;
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule-warm);
}
.assurances li {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

/* ── The journey: a path that draws itself ────────────────── */
.walk {
  position: relative;
  width: min(64rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.walk__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.45;
}
#walkTrace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.walk__steps {
  list-style: none;
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 3.5vw, 2.75rem);
}
.walk__step {
  display: grid;
  grid-template-columns: 1fr 4.6rem 1fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
/* Both children are pinned to row 1. Without it, a card placed in column 1
   after a number in column 2 is auto-placed onto a second row, because grid
   auto-placement never flows backwards. That doubled every odd step's height. */
.walk__step:nth-child(odd) .walk__card { grid-column: 1; grid-row: 1; text-align: right; }
.walk__step:nth-child(even) .walk__card { grid-column: 3; grid-row: 1; }
.walk__num {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--red);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--red);
  transition: transform 0.5s var(--ease), background 0.4s, color 0.4s;
}
.walk__step.in .walk__num { animation: pop 0.6s var(--ease) both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.walk__step:hover .walk__num { background: var(--red); color: var(--paper); transform: scale(1.08); }
.walk__card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.walk__step.in .walk__card { opacity: 1; transform: none; }
.walk__card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.walk__card p { font-size: 0.95rem; max-width: 38ch; }
.walk__step:nth-child(odd) .walk__card p { margin-left: auto; }

.walk__summary {
  width: min(46rem, 100% - var(--gutter) * 2);
  margin: clamp(2.75rem, 5vw, 4rem) auto 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.walk__summary span {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--hand);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0;
  color: var(--red);
}

/* ── Gugulethu ────────────────────────────────────────────── */
#gugulethu { overflow: hidden; }
.gugu__backdrop { position: absolute; inset: -12% 0; z-index: 0; }
.gugu__backdrop img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateY(calc(var(--py, 0) * 1px));
  will-change: transform;
}
/* Vertical scrim now that the header is centred: a side-weighted gradient
   left the middle of the photo too light to carry centred text. */
.gugu__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(35,27,24,0.9) 0%, rgba(35,27,24,0.74) 42%, rgba(35,27,24,0.92) 100%);
}
.section--ink .lead__intro { color: var(--text-cream); }
.ledger { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 46rem; }
.ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(240, 226, 207, 0.28);
}
.ledger__row dt { transition: transform 0.45s var(--ease); }
.ledger__row:hover dt { transform: translateX(0.6rem); }
.ledger__row dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--paper);
}
.ledger__row dd {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  text-align: right;
}

/* ── Trust ────────────────────────────────────────────────── */
/* A 15rem minimum fits only four tracks, orphaning the fifth value onto its
   own row beside three empty cells. 10.5rem lets all five sit in one band. */
.values {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}
.values__item { max-width: 34ch; }
.values__mark { width: 34px; height: 19px; margin-bottom: 1rem; }
.values__mark--red { color: var(--red); }
.values__mark--orange { color: var(--orange); }
.values__mark--gold { color: var(--gold); }
.values__mark--green { color: var(--green); }
.values__item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.values__item p { font-size: 0.94rem; }

.governance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}
.governance__col h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 1rem;
}
.governance__col ul { list-style: none; }
.governance__col li {
  font-size: 0.93rem;
  padding: 0.4rem 0 0.4rem 1.3rem;
  position: relative;
}
.governance__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 0.5rem;
  height: 1px;
  background: var(--red);
}

/* ── Walk with us ─────────────────────────────────────────── */
.section--contact { padding-bottom: 0; overflow: hidden; }
.contact__watermark {
  position: absolute;
  top: 44%;
  left: 50%;
  width: clamp(20rem, 44vw, 34rem);
  height: auto;
  transform: translate(-50%, -50%) rotate(-8deg);
  fill: var(--red);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.contact__head { position: relative; z-index: 1; text-align: center; }
.contact__lead { width: fit-content; margin-inline: auto; margin-bottom: 2rem; }
.contact__cta { display: block; width: 100%; padding-inline: 2.6rem; text-align: center; }
.contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  max-width: 56rem;
  margin: clamp(2.5rem, 4.5vw, 3.5rem) auto 0;
  text-align: center;
}
.contact__block h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.9rem;
}
.contact__block p { font-size: 0.95rem; }
.contact__block p a { text-decoration: none; transition: color 0.3s; }
.contact__block p a:hover { color: var(--red); }
.contact__icons { display: flex; justify-content: center; gap: 0.9rem; }
.contact__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s;
}
.contact__icon:hover { background: var(--red); color: var(--paper); transform: translateY(-3px) rotate(-6deg); }

.footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 5vw, 4rem);
  padding: 1.9rem var(--gutter) 2.2rem;
  background: var(--ink);
  color: rgba(240, 226, 207, 0.72);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

/* ── Scroll to top ────────────────────────────────────────── */
.to-top {
  position: fixed;
  right: clamp(1.1rem, 3vw, 2rem);
  bottom: clamp(1.1rem, 3vw, 2rem);
  z-index: 90;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--red);
  border: none;
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  box-shadow: 0 14px 28px -14px rgba(168, 39, 31, 0.8);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.8rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s;
}
.to-top--visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--red-deep); transform: translateY(-3px); }

/* ── Motion: three distinct entrances, not one on repeat ──── */
.reveal-rise {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal-rise.in { opacity: 1; transform: none; }

.reveal-mask {
  clip-path: inset(-0.25em -0.15em 105% -0.15em);
  transition: clip-path 1s var(--ease);
}
.reveal-mask.in { clip-path: inset(-0.25em -0.15em -0.25em -0.15em); }

.reveal-arch { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.reveal-arch.in { clip-path: inset(0 0 0 0); }
.reveal-arch img { transform: scale(1.12); transition: transform 1.5s var(--ease); }
.reveal-arch.in img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-rise, .reveal-mask, .reveal-arch,
  .reveal-arch img, .walk__card {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .hero__arc { stroke-dashoffset: 0; animation: none; }
  .hero__title em::after { transform: scaleX(1); animation: none; }
  .floater, .ticker__track { animation: none; }
  .walk__step.in .walk__num { animation: none; }
  .gugu__backdrop img, .hero__arcs { transform: none; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__aside { max-width: 46rem; }
  .story { grid-template-columns: 1fr; }
  .story__figure { margin-right: 0; aspect-ratio: 16 / 11; max-height: 30rem; }
  .pathways { grid-template-columns: repeat(4, 1fr); }
  .path:nth-child(-n+2) { grid-column: span 2; }
  .path:nth-child(n+3) { grid-column: span 2; }
  .governance { grid-template-columns: 1fr; gap: 2rem; }
  .contact__grid { grid-template-columns: 1fr; gap: 2.2rem; }
}

@media (max-width: 900px) {
  .nav__links {
    position: fixed;
    inset: 0;
    background: rgba(255, 248, 238, 0.98);
    backdrop-filter: blur(8px);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    pointer-events: none;
    /* visibility, not just opacity: an opacity-0 overlay keeps its links in the
       tab order, so a keyboard or switch user lands on six invisible links.
       visibility transitions discretely, so the fade still plays both ways. */
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
  }
  .nav__links.open { opacity: 1; pointer-events: auto; visibility: visible; }
  .nav__links a { font-size: 1rem; }
  .nav__toggle { display: block; z-index: 110; }
  .nav__toggle.open span:first-child { top: 21px; transform: rotate(45deg); }
  .nav__toggle.open span:last-child { top: 21px; transform: rotate(-45deg); }
  .nav__wordmark { display: none; }
  .nav__logo { width: 44px; }
}

@media (max-width: 760px) {
  .hero { padding-top: 6.5rem; }
  .hero__media { aspect-ratio: 4 / 3.2; border-radius: 46% 46% 16px 16px / 16% 16% 16px 16px; }
  /* Keep one heart, in the clear space beside the buttons, never over the copy */
  .floater--1, .floater--2, .floater--4, .floater--5 { display: none; }
  .floater--3 { right: 7%; top: 46%; width: 18px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts__item:nth-child(even) { transform: none; }
  .pathways { grid-template-columns: 1fr; }
  .path:nth-child(-n+2), .path:nth-child(n+3) { grid-column: 1 / -1; }
  .path__figure, .path:nth-child(-n+2) .path__figure,
  .path:nth-child(n+3) .path__figure { aspect-ratio: 5 / 4; }
  .path--low { margin-top: 0; }
  .path__body p, .path--feature .path__body p { max-width: none; }

  .walk__path { left: 0; width: 3rem; }
  .walk__step { grid-template-columns: 3rem 1fr; gap: 1.1rem; align-items: start; }
  .walk__step:nth-child(odd) .walk__card,
  .walk__step:nth-child(even) .walk__card { grid-column: 2; text-align: left; }
  .walk__step:nth-child(odd) .walk__card p { margin-left: 0; }
  .walk__num { grid-column: 1; width: 3rem; height: 3rem; font-size: 1.1rem; }
  .walk__card p { max-width: none; }

  .ledger__row { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .ledger__row dd { text-align: left; }
  .footer { justify-content: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   Content protection (ported from the osandmac.com site)
   Deterrents against casual copying, not real security: anyone
   determined can still read the source over the network.
   ═══════════════════════════════════════════════════════════ */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

img,
svg,
video,
canvas,
picture,
object {
  -webkit-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* Interactive elements keep their pointer events */
button img, button svg,
a img, a svg,
[role="button"] img, [role="button"] svg {
  pointer-events: auto;
}

@media print {
  body { display: none !important; }
}

.footer__credit a {
  color: var(--text-cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 226, 207, 0.4);
  transition: border-color 0.3s, color 0.3s;
}
.footer__credit a:hover { color: var(--paper); border-bottom-color: var(--paper); }


/* ── 404 page ──────────────────────────────────────────────
   Lived in an inline <style> in 404.html. Moved here so the site
   carries no inline styles at all, which lets the CSP drop
   'unsafe-inline' from style-src. */
.lost {
    min-height: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem var(--gutter);
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 70% at 50% 0%, #fff5e3 0%, var(--paper) 60%);
  }
  .lost__arcs {
    position: absolute;
    left: 50%;
    top: -6%;
    width: min(140%, 1100px);
    aspect-ratio: 1200 / 640;
    transform: translateX(-50%);
    opacity: 0.32;
    pointer-events: none;
  }
  .lost__inner { position: relative; z-index: 1; max-width: 34rem; }
  .lost__code {
    font-family: var(--hand);
    font-size: 2rem;
    color: var(--green-deep);
    transform: rotate(-2deg);
    margin-bottom: 0.5rem;
  }
  .lost__title {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .lost__title em { font-style: italic; font-weight: 500; color: var(--red); }
  .lost__text { margin: 1.4rem auto 2.2rem; max-width: 42ch; color: var(--ink-soft); }