/* Swimmers — swimmers.charity
   Minimal, left-justified. On desktop: a persistent left column (identity +
   nav) with the content area to its right. Stacks on mobile.
   Type: Poppins (the wordmark font). */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
}

:root {
  --bg: #ffffff;
  --ink: #18181b;
  --body: #40404a;
  /* Quiet grey for secondary links, but dark enough to clear AA (4.5:1)
     on white at 14px — the nav lives here, so it has to stay legible. */
  --muted: #71717a;
  --muted-strong: #6b6b74;
  --line: #e7e7ea;
  --img: #ededf0;

  --aside-w: 340px;      /* left identity/nav column on desktop */
  --content-w: 560px;    /* right reading column */
  --soon-w: 240px;       /* "Coming soon" card; its note is capped to match */
  --inset: clamp(24px, 6vw, 64px);
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { color: var(--ink); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 0.95rem; font-weight: 500; }
h2 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; }
h3 { font-size: 0.95rem; }

p { margin: 0; }

a { color: var(--ink); text-underline-offset: 2px; text-decoration-color: var(--line); }
a:hover { text-decoration-color: var(--ink); }

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

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

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  text-decoration: none;
}
.skip:focus { left: 16px; top: 16px; }

/* ---------- Two-column shell ---------- */

.page {
  max-width: 1120px;
  margin: 0;
  padding: clamp(40px, 8vh, 72px) 24px clamp(32px, 5vh, 44px) var(--inset);
}

.shell { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vh, 52px); }

@media (min-width: 840px) {
  /* fill the viewport so the footer can pin to the bottom of the left column */
  .page { min-height: 100vh; display: flex; flex-direction: column; }
  .shell {
    flex: 1;
    grid-template-columns: minmax(260px, var(--aside-w)) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(48px, 6vw, 88px);
    row-gap: 0;
    align-items: start;
  }
  /* identity + nav: top of the left column, sticky while content scrolls */
  .aside { grid-column: 1; grid-row: 1; position: sticky; top: clamp(40px, 8vh, 72px); }
  .main-col { grid-column: 2; grid-row: 1 / 3; }
  /* footer: bottom of the left column, pinned to the bottom of the screen */
  .site-footer {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    position: sticky;
    bottom: clamp(24px, 4vh, 36px);
  }
}

.aside { max-width: 430px; }
.main-col { min-width: 0; max-width: var(--content-w); }
.main-col:focus { outline: none; }

/* ---------- Left column: identity + nav ---------- */

.wordmark { display: block; width: clamp(112px, 20vw, 130px); margin: 0 0 12px; }
.wordmark img { width: 100%; height: auto; display: block; }

.hero-meta { font-size: 0.78rem; color: var(--muted-strong); margin-bottom: 26px; }

/* mission tagline — persistent in the left column, not a heading */
.mission {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  max-width: 42ch;
}

.intro p { font-size: 0.92rem; line-height: 1.62; color: var(--body); }
.intro p + p { margin-top: 0.95em; }

.nav {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }

/* ---------- Mobile / portrait-tablet: burger menu ----------
   The single-column layout (below the 840px two-column breakpoint) pushes
   five nav links between the wordmark and the content, so the page opens on
   navigation rather than on what it's for. Below that breakpoint the links
   collapse behind a toggle instead.

   Enhancement only: the toggle is injected by nav.js, which also sets
   .js-nav on <body>. Without JS neither exists, so .nav stays the plain
   stacked list it is today and every link still works. */

.nav-toggle { display: none; }

@media (max-width: 839px) {
  .js-nav .nav-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 71;          /* above the panel: the same button closes it */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
  }
  .js-nav .nav-toggle:hover { border-color: var(--muted); }

  /* two bars that cross into an × when open */
  .nav-toggle-bars { position: relative; display: block; width: 16px; height: 10px; }
  .nav-toggle-bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: top 0.2s ease, transform 0.2s ease;
  }
  .nav-toggle-bars i:first-child { top: 0; }
  .nav-toggle-bars i:last-child { top: 8.5px; }
  .nav-open .nav-toggle-bars i { top: 4.25px; }
  .nav-open .nav-toggle-bars i:first-child { transform: rotate(45deg); }
  .nav-open .nav-toggle-bars i:last-child { transform: rotate(-45deg); }

  .js-nav .nav { display: none; }

  /* open: a plain full-viewport panel, links set large and aligned to the
     wordmark (same left inset as .page) */
  .js-nav.nav-open { overflow: hidden; }
  .js-nav.nav-open .nav {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    margin: 0;
    padding: 88px var(--inset) 40px;
    gap: 2px;
    overflow-y: auto;
    /* body overflow:hidden alone doesn't stop iOS chaining a drag through to
       the page behind, so stop it at the panel too */
    overscroll-behavior: contain;
    background: var(--bg);
  }
  .js-nav.nav-open .nav a {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    padding: 9px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars i { transition: none; }
}

/* ---------- Right column: couples ---------- */

.couples-head h1, .couples-head h2 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 6px; }
.couples-head p { font-size: 0.9rem; color: var(--muted-strong); margin-bottom: 20px; }
/* when the couples block follows the grants copy in the same column */
.couples-after { margin-top: clamp(36px, 5vh, 52px); }

.couple { max-width: 300px; }
.couple img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--img);
  filter: grayscale(1);
  border-radius: 4px;
}
.couple h3 { font-size: 0.95rem; margin: 14px 0 5px; }
.couple p { font-size: 0.88rem; color: var(--body); }

.soon {
  max-width: var(--soon-w);
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: var(--img);
  display: grid;
  place-items: center;
  color: var(--muted-strong);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* placeholder marker — deliberately visible, see README.md */
.ph {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  margin-top: 12px;
}
.ph-note { font-size: 0.85rem; color: var(--muted-strong); font-style: italic; margin-top: 12px; max-width: var(--soon-w); }
.ph-note strong { font-style: normal; color: var(--ink); font-weight: 500; }

/* ---------- Right column: donate ---------- */

.embed { max-width: 380px; background: #fff; }
.embed iframe { display: block; width: 100%; border: 0; }

/* ---------- Right column: prose (grants, research, contact, about, privacy) ---------- */

.prose { max-width: var(--content-w); }
.prose h1 { font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
.prose h2 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 1.9em; margin-bottom: 0.4em; }
.prose h2:first-of-type { margin-top: 1.3em; }
.prose p { font-size: 0.92rem; line-height: 1.65; margin-bottom: 1em; }
.prose ul { padding-left: 1.15em; margin: 0 0 1em; }
.prose li { font-size: 0.92rem; margin-bottom: 0.35em; }

.meta { font-size: 0.82rem; color: var(--muted-strong); margin-bottom: 1.8em; }

/* ---------- Grant-Making Policy popover ---------- */

/* trigger reads as a quiet text link, but is a <button> (Popover API needs one) */
.policy-link {
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong, #d4d4d8);
  text-underline-offset: 3px;
}
.policy-link:hover { text-decoration-color: var(--ink); }
.policy-link .arrow { transition: transform 0.15s ease; }
.policy-link:hover .arrow { transform: translateX(3px); }

.policy-popover {
  width: min(680px, calc(100vw - 32px));
  max-height: min(82vh, 920px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--body);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.20);
}
.policy-popover::backdrop { background: rgba(24, 24, 27, 0.44); }

.policy-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(22px, 4vw, 36px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.policy-head h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }

.policy-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted-strong);
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.policy-close:hover { color: var(--ink); border-color: var(--muted); }

/* .policy-body = inside a popover (padded); .policy-doc = the same content
   rendered on the privacy page (no padding — the page handles layout). */
.policy-body { padding: clamp(20px, 3vw, 30px) clamp(22px, 4vw, 36px) clamp(28px, 4vw, 38px); }
.policy-body > p:first-child, .policy-doc > p:first-child { margin-top: 0; }
.policy-body h3, .policy-doc h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 1.7em 0 0.4em; }
.policy-body h4, .policy-doc h4 { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 1.35em 0 0.35em; }
.policy-body p, .policy-doc p { font-size: 0.9rem; line-height: 1.62; margin: 0 0 0.9em; }
.policy-body ol, .policy-body ul, .policy-doc ol, .policy-doc ul { font-size: 0.9rem; line-height: 1.55; padding-left: 1.35em; margin: 0 0 1em; }
.policy-body li, .policy-doc li { margin-bottom: 0.5em; }
.policy-body li > ul, .policy-body li > ol, .policy-doc li > ul, .policy-doc li > ol { margin-top: 0.5em; margin-bottom: 0; }
.policy-body .policy-note { font-style: italic; color: var(--muted-strong); }
.policy-body .policy-updated { font-size: 0.8rem; color: var(--muted-strong); margin-bottom: 1.6em; }

/* ---------- Footer (in the left column on desktop, below content on mobile) ---------- */

.site-footer {
  font-size: 0.82rem;
  color: var(--muted-strong);
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.footer-social a { display: inline-flex; color: var(--muted); }
.footer-social a:hover { color: var(--ink); }
.ico { width: 18px; height: 18px; fill: currentColor; display: block; }

.site-footer p { margin: 0; }
.site-footer p a { color: var(--muted); text-decoration: none; }
.site-footer p a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Idle-cursor egg (easter egg) ---------- */

/* full-viewport canvas the sperm swarm is drawn on — sits just under the egg.
   Fades via opacity (GPU) so it always clears, even if the frame loop throttles. */
.cursor-egg-swarm {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 59;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cursor-egg-swarm.on { opacity: 1; }

.cursor-egg {
  position: fixed;
  left: 0;
  top: 0;
  width: 108px;
  height: 108px;
  margin: -54px 0 0 -54px;   /* centre on the cursor */
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}
.cursor-egg.is-visible { opacity: 1; transform: scale(1); }
.cursor-egg svg { width: 100%; height: 100%; display: block; }

/* gentle life: the line egg breathes — only while shown, and only when the
   visitor hasn't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .cursor-egg.is-visible .egg-cell {
    animation: egg-breathe 4s ease-in-out infinite;
    transform-origin: center;
  }
}
@keyframes egg-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* reduced motion: no scaling in, no looping — just a quiet fade */
@media (prefers-reduced-motion: reduce) {
  .cursor-egg { transform: none; transition: opacity 0.4s ease; }
  .cursor-egg.is-visible { transform: none; }
}