/* =====================================================================
   RUN4RICKY FOUNDATION — bold & energetic, LIGHT edition
   Warm off-white surfaces · near-black type · electric-orange energy
   Vanilla CSS, no build step. See DESIGN.md for rationale.
   ===================================================================== */

@layer tokens, base, layout, components, motion, responsive;

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* light surfaces (warm porcelain), OKLCH, no pure white — "Second Wind" */
    --paper:      oklch(0.978 0.007 80);   /* page background       ~#faf7f3 */
    --paper-2:    oklch(0.94 0.013 80);    /* alternate band        ~#f0eae2 */
    --card:       oklch(0.995 0.003 90);   /* cards / raised        ~#fefdfb */
    --line:       oklch(0.89 0.013 80);    /* hairlines             ~#dfdad1 */

    /* ink (warm near-black) */
    --ink:        oklch(0.215 0.014 60);   /* headings / text       ~#1e1813 */
    --ink-dim:    oklch(0.42 0.017 58);    /* body copy             ~#5f564e */
    --ink-mute:   oklch(0.50 0.016 60);    /* muted / captions      ~#6a615a */

    /* energy — rose-ember primary + molten-amber secondary */
    --orange:     oklch(0.545 0.195 22);   /* PRIMARY rose ember    ~#c92838 */
    --orange-hi:  oklch(0.605 0.185 24);   /* hover                 ~#e23a48 */
    --ember:      oklch(0.52 0.115 66);    /* readable bronze/amber ~#8a6a20 */
    --amber:      oklch(0.76 0.14 78);     /* graphic-only amber    ~#e1a536 */

    /* dark band (hero overlay text, lightbox) */
    --night:      oklch(0.18 0.014 55);
    --on-night:   oklch(0.965 0.010 85);

    /* type */
    --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --font-body:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

    --step-hero: clamp(2.6rem, 9vw, 8.5rem);
    --step-xl:   clamp(2.5rem, 6vw, 5rem);
    --step-lg:   clamp(1.9rem, 4vw, 3rem);
    --step-md:   clamp(1.4rem, 2.4vw, 1.9rem);
    --step-sm:   1.125rem;
    --step-xs:   0.8rem;

    /* space — fluid */
    --s-1: clamp(0.5rem, 1vw, 0.75rem);
    --s-2: clamp(0.75rem, 1.6vw, 1.15rem);
    --s-3: clamp(1.15rem, 2.6vw, 1.9rem);
    --s-4: clamp(1.9rem, 4.5vw, 3.25rem);
    --s-5: clamp(3rem, 8vw, 6rem);
    --s-6: clamp(4.5rem, 12vw, 9rem);

    --content: min(92vw, 1120px);
    --measure: 66ch;

    --radius: 14px;
    --radius-sm: 8px;
    --shadow-sm: 0 6px 18px -10px oklch(0.30 0.04 45 / 0.35);
    --shadow: 0 22px 48px -26px oklch(0.30 0.05 45 / 0.45);
    --shadow-orange: 0 16px 38px -16px oklch(0.545 0.195 22 / 0.5);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.5s;
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5rem;
  }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.6vw + 0.9rem, 1.125rem);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  img, video, iframe, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 0.95;
               letter-spacing: 0.01em; text-transform: uppercase; margin: 0; color: var(--ink); }
  p { margin: 0 0 1em; }
  ::selection { background: var(--orange); color: var(--card); }

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

  .skip-link {
    position: absolute; left: var(--s-2); top: -100%;
    background: var(--orange); color: var(--card); font-weight: 700;
    padding: 0.6em 1em; border-radius: var(--radius-sm); z-index: 2000;
    transition: top var(--dur) var(--ease-out);
  }
  .skip-link:focus { top: var(--s-2); }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .wrap { width: var(--content); margin-inline: auto; }
  main { display: block; }

  .kicker {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--step-xs);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--orange);
    display: inline-flex; align-items: center; gap: 0.7em;
    margin: 0 0 var(--s-2);
  }
  .kicker::before {
    content: ""; width: 2.2rem; height: 2px; background: var(--orange);
    display: inline-block;
  }

  .section { padding-block: var(--s-6); }
  .section > .wrap > .section-head { max-width: 44ch; margin: 0 auto var(--s-4); text-align: center; }
  .section-title { font-size: var(--step-xl); }
  .section-lead { color: var(--ink-dim); font-size: var(--step-md);
                  max-width: var(--measure); margin: var(--s-2) auto 0;
                  font-family: var(--font-body); text-transform: none;
                  line-height: 1.5; font-weight: 500; }

  .prose { max-width: var(--measure); margin-inline: auto; }
  .prose p { color: var(--ink-dim); }

  /* alternate tonal band (still light) */
  .invert { background: var(--paper-2); }
  .invert .kicker { color: var(--ember); }
  .invert .kicker::before { background: var(--ember); }
}

/* ------------------------------------------------------------ components */
@layer components {

  /* ---- top navigation ---- */
  .nav {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    padding: 0.7rem var(--s-3);
    background: color-mix(in oklch, var(--paper) 85%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-left { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem); }
  .nav-right { display: flex; align-items: center; gap: var(--s-2); }
  .nav-ig { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
    color: var(--ink-dim); font-size: 1.15rem; border: 1px solid var(--line);
    transition: color 0.25s, border-color 0.25s, transform 0.3s var(--ease-out); }
  .nav-ig:hover { color: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
  .nav-brand { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
  .nav-brand img { width: 34px; height: 34px; border-radius: 50%;
                   box-shadow: 0 0 0 2px var(--orange); }
  .nav-brand b { font-family: var(--font-display); font-weight: 900;
                 font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; }
  .nav-brand b span { color: var(--orange); }

  .nav-links { display: flex; align-items: center; gap: 0.4rem; }
  .nav-links a {
    font-weight: 600; font-size: 0.82rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-dim);
    padding: 0.55rem 0.8rem; border-radius: var(--radius-sm);
    position: relative; transition: color 0.25s var(--ease-out);
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a[aria-current="page"] { color: var(--ink); }
  .nav-links a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.28rem;
    height: 2px; background: var(--orange);
  }
  .nav-cta {
    background: var(--orange); color: var(--card); font-weight: 700;
    font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.62rem 1.2rem; border-radius: 999px;
    transition: background 0.25s, transform 0.3s var(--ease-out);
  }
  .nav-cta:hover { background: var(--orange-hi); color: var(--card); transform: translateY(-2px); }

  .nav-toggle { display: none; width: 46px; height: 46px; align-items: center;
                justify-content: center; border-radius: var(--radius-sm); }
  .nav-toggle span { position: relative; display: block; width: 24px; height: 2px;
                     background: var(--ink); transition: background 0.2s; }
  .nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink);
    transition: transform 0.3s var(--ease-out); }
  .nav-toggle span::before { transform: translateY(-7px); }
  .nav-toggle span::after  { transform: translateY(7px);  }
  .nav[data-open="true"] .nav-toggle span { background: transparent; }
  .nav[data-open="true"] .nav-toggle span::before { transform: rotate(45deg); }
  .nav[data-open="true"] .nav-toggle span::after  { transform: rotate(-45deg); }

  /* ---- buttons ---- */
  .btn {
    display: inline-flex; align-items: center; gap: 0.6em;
    font-family: var(--font-body); font-weight: 700;
    font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.95em 1.6em; border-radius: 999px;
    transition: transform 0.35s var(--ease-out), background 0.25s, box-shadow 0.35s, color 0.25s;
    will-change: transform;
  }
  .btn svg { width: 1.1em; height: 1.1em; }
  .btn-primary { background: var(--orange); color: var(--card); box-shadow: var(--shadow-orange); }
  .btn-primary:hover { background: var(--orange-hi); transform: translateY(-3px); color: var(--card); }
  .btn-ghost { border: 2px solid var(--ink); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-3px); }

  /* ---- hero (light) ---- */
  .hero {
    position: relative; min-height: 100svh;
    display: grid; align-items: start;
    padding: clamp(2rem, 7vh, 5rem) 0 var(--s-5);
    overflow: hidden; isolation: isolate;
  }
  .hero-bg {
    position: absolute; inset: -8% 0 0 0; z-index: -2;
    background: var(--paper) center/cover no-repeat;
    will-change: transform;
  }
  .hero::after { /* light wash so centered text stays legible over the marathon image */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(to bottom,
        oklch(0.978 0.007 80 / 0.82) 0%,
        oklch(0.978 0.007 80 / 0.62) 30%,
        oklch(0.978 0.007 80 / 0.34) 52%,
        oklch(0.978 0.007 80 / 0.14) 70%,
        transparent 84%);
  }
  .hero-inner { position: relative; text-align: center; }
  .hero h1 {
    font-size: var(--step-hero); font-weight: 900; letter-spacing: -0.01em;
    color: var(--ink); margin: 0.1em 0 0.15em; text-wrap: balance;
    text-shadow: 0 2px 22px oklch(0.985 0.004 85 / 0.6);
  }
  .hero h1 .em { color: var(--orange); font-style: italic; }
  .hero-sub { max-width: 46ch; font-size: var(--step-md); color: var(--ink);
              font-weight: 600; margin: 0 auto var(--s-3);
              text-shadow: 0 1px 14px oklch(0.985 0.004 85 / 0.92), 0 0 3px oklch(0.985 0.004 85 / 0.75); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
  .hero-scroll {
    position: absolute; bottom: var(--s-3); right: 0;
    font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--ink-mute); display: flex; align-items: center; gap: 0.6em;
    writing-mode: vertical-rl;
  }
  .hero-scroll::after { content: ""; width: 1px; height: 3rem;
    background: linear-gradient(var(--orange), transparent); }

  /* compact page hero (interior pages) */
  .phero { position: relative; padding: calc(var(--s-6) + 3rem) 0 var(--s-5);
           overflow: hidden; isolation: isolate; }
  .phero-bg { position: absolute; inset: 0; z-index: -2;
    background: var(--paper-2) center/cover no-repeat; }
  .phero::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to bottom, oklch(0.978 0.007 80 / 0.56),
      oklch(0.978 0.007 80 / 0.42) 55%, oklch(0.978 0.007 80 / 0.66)); }
  .phero h1 { font-size: var(--step-xl); }
  .phero .kicker { margin-bottom: var(--s-2); }
  .phero .wrap { text-align: center; }
  .phero h1, .phero p, .phero .kicker { text-shadow: 0 1px 12px oklch(0.985 0.004 85 / 0.8); }
  .phero p { color: var(--ink-dim); max-width: var(--measure); margin: var(--s-2) auto 0; }

  /* ---- timeline ---- */
  .timeline { list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 960px; }
  .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 3px; background: linear-gradient(var(--orange), var(--ember)); }
  .timeline li { position: relative; width: 50%; box-sizing: border-box;
                 padding: 0 0 var(--s-5); min-height: 3.5rem; }
  .timeline li:nth-child(odd)  { margin-left: 0;   padding-right: calc(27px + var(--s-3)); text-align: right; }
  .timeline li:nth-child(even) { margin-left: 50%; padding-left:  calc(27px + var(--s-3)); text-align: left; }
  .t-node { position: absolute; top: 0; width: 54px; height: 54px;
    border-radius: 50%; background: var(--card); border: 3px solid var(--orange);
    display: grid; place-items: center; z-index: 1; box-shadow: var(--shadow-sm); }
  .timeline li:nth-child(odd)  .t-node { right: -27px; }
  .timeline li:nth-child(even) .t-node { left: -27px; }
  .t-node svg { width: 25px; height: 25px; stroke: var(--orange); fill: none; }
  .t-date { font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
            color: var(--orange); font-size: 1.3rem; letter-spacing: 0.04em; }
  .t-body { color: var(--ink-dim); margin-top: 0.15rem; }
  .t-body strong { color: var(--ink); font-weight: 700; }
  .t-media { margin-top: var(--s-2); border-radius: var(--radius);
             overflow: hidden; box-shadow: var(--shadow); max-width: 100%; }
  .timeline li:nth-child(odd)  .t-media { margin-left: auto; }
  .timeline li:nth-child(even) .t-media { margin-right: auto; }
  .t-media img, .t-media video { width: 100%; aspect-ratio: 16/10; object-fit: cover;
    cursor: zoom-in; transition: transform 0.6s var(--ease-out); }
  .t-media:hover img { transform: scale(1.04); }
  /* logo / graphic that should fit, not crop */
  .t-media.contain { background: var(--paper-2); }
  .t-media.contain img { object-fit: contain; padding: var(--s-2); }
  .t-media.contain:hover img { transform: none; }

  /* ---- editorial mosaic gallery (varied sizes) ---- */
  .gallery { display: grid; grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(82px, 10.5vw, 150px); grid-auto-flow: dense; gap: clamp(10px, 1.1vw, 18px); }
  .tile { position: relative; grid-column: span 2; grid-row: span 2; margin: 0; padding: 0;
    overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-2);
    box-shadow: var(--shadow-sm); cursor: zoom-in; outline: 2px solid transparent; outline-offset: -2px;
    transition: transform 0.45s var(--ease-out), box-shadow 0.4s, outline-color 0.3s; }
  .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
  .tile:hover, .tile:focus-visible { box-shadow: var(--shadow); outline-color: var(--orange); }
  .tile:hover img { transform: scale(1.05); }
  .tile--feature { grid-column: span 4; grid-row: span 3; }
  .tile--wide    { grid-column: span 4; grid-row: span 2; }
  .tile--tall    { grid-column: span 2; grid-row: span 3; }
  .tile--big     { grid-column: span 3; grid-row: span 3; }
  .pos-top  { object-position: center 22%; }
  .pos-face { object-position: center 35%; }
  .tile .play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--orange);
    background: linear-gradient(oklch(0.15 0.01 55 / 0), oklch(0.15 0.01 55 / 0.34)); }
  .tile .play svg { width: 54px; height: 54px; filter: drop-shadow(0 4px 12px oklch(0.1 0 0 / 0.5)); }
  .tile-video:hover .play { color: var(--orange-hi); }
  .tile-cap { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 1.6em 0.9em 0.8em;
    text-align: left; font: 800 clamp(1rem, 1.4vw, 1.35rem)/1.05 var(--font-display);
    text-transform: uppercase; letter-spacing: 0.02em; color: var(--on-night);
    background: linear-gradient(transparent, oklch(0.14 0.02 55 / 0.74));
    transform: translateY(0.5em); opacity: 0;
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
  .tile--feature .tile-cap { opacity: 1; transform: none; }
  @media (hover: hover) { .tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; } }

  /* youtube grid */
  .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: var(--s-3); }
  .video-container { position: relative; padding-top: 56.25%; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); background: var(--paper-2); }
  .video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* ---- team carousel ---- */
  .carousel { position: relative; max-width: 940px; margin-inline: auto; }
  .carousel-slide { display: none; }
  .carousel-slide.is-active { display: block; animation: fade var(--dur) var(--ease-out); }
  .carousel-slide figure { margin: 0; display: grid; gap: var(--s-3);
    grid-template-columns: minmax(220px, 340px) 1fr; align-items: center; }
  .carousel-slide img { width: 100%; aspect-ratio: 3/4; object-fit: cover;
    object-position: center 22%;
    border-radius: var(--radius); box-shadow: var(--shadow); }
  .carousel-slide img.face-top { object-position: center top; }
  .carousel-slide figcaption { color: var(--ink-dim); font-size: 1.08rem; line-height: 1.6; }
  .carousel-slide figcaption::before { content: "\201C"; color: var(--orange);
    font-family: var(--font-display); font-size: 3rem; line-height: 0; display: block;
    height: 0.6em; }
  .car-controls { display: flex; align-items: center; justify-content: center;
    gap: var(--s-3); margin-top: var(--s-3); }
  .car-btn { width: 3rem; height: 3rem; border-radius: 999px; background: var(--orange);
    color: var(--card); font-size: 1.6rem; font-weight: 700; display: grid;
    place-items: center; box-shadow: var(--shadow-orange);
    transition: transform 0.3s var(--ease-out), background 0.25s; }
  .car-btn:hover { background: var(--orange-hi); transform: scale(1.1); }
  .car-dots { display: flex; gap: 0.5rem; justify-content: center; }
  .car-dots button { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
  .car-dots button[aria-current="true"] { background: var(--orange); width: 26px; border-radius: 6px; }

  /* ---- cards ---- */
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: var(--s-3); }
  .card { background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: var(--s-3); box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.3s; }
  .card:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: var(--shadow); }
  .card h3 { font-size: 1.5rem; margin-bottom: 0.4rem; color: var(--ink); }
  .card p { color: var(--ink-dim); }
  .card .ic { width: 44px; height: 44px; color: var(--orange); margin-bottom: var(--s-2); }
  .card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
  .card li a { color: var(--ink-dim); display: inline-flex; gap: 0.5em; align-items: baseline;
    transition: color 0.25s; }
  .card li a:hover { color: var(--orange); }
  .card li a::before { content: "\2192"; color: var(--orange); }

  /* ---- date / calendar lists ---- */
  .cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
  .cal li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline;
    padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); color: var(--ink-dim); }
  .cal li b { font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
    color: var(--orange); letter-spacing: 0.02em; white-space: nowrap; font-size: 1.05rem; }
  .invert .cal li b { color: var(--ember); }

  /* ---- donate ---- */
  .give { display: grid; gap: var(--s-4); grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
  .amount { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
    padding: var(--s-3) var(--s-2); text-align: center; color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s; }
  .amount:hover, .amount.is-active { border-color: var(--orange); transform: translateY(-3px);
    box-shadow: var(--shadow); }
  .amount b { display: block; font-family: var(--font-display); font-weight: 900;
    font-size: 2.4rem; line-height: 1; color: var(--ink); }
  .amount span { font-size: 0.8rem; color: var(--ink-mute); }
  .give-aside { background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: var(--s-3); box-shadow: var(--shadow-sm); }
  .give-aside img { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); cursor: zoom-in; }

  /* ---- quotes ---- */
  .quote-wrap { text-align: center; max-width: 30ch; margin-inline: auto; }
  .quote-wrap blockquote { font-family: var(--font-display); font-weight: 800; color: var(--ink);
    text-transform: uppercase; font-size: var(--step-lg); line-height: 1; margin: 0; }
  .quote-wrap cite { display: block; margin-top: var(--s-2); color: var(--orange);
    font-style: normal; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    font-size: 0.8rem; font-family: var(--font-body); }
  .quote-ctrl { display: flex; gap: 0.6rem; justify-content: center; margin-top: var(--s-3); }
  .quote-ctrl button { width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 2px solid var(--line); color: var(--ink); display: grid; place-items: center;
    transition: border-color 0.25s, color 0.25s, transform 0.3s var(--ease-out); }
  .quote-ctrl button:hover { border-color: var(--orange); color: var(--orange); transform: scale(1.08); }

  /* ---- forms ---- */
  form.share { display: grid; gap: var(--s-2); max-width: 520px; margin-inline: auto; justify-items: center; }
  form.share input, form.share textarea {
    width: 100%; background: var(--card); border: 1px solid var(--line);
    color: var(--ink); border-radius: var(--radius-sm); padding: 0.85em 1em;
    font: inherit; transition: border-color 0.25s; }
  form.share input:focus, form.share textarea:focus { border-color: var(--orange); outline: none; }
  form.share input::placeholder, form.share textarea::placeholder { color: var(--ink-mute); }

  /* ---- footer (light, orange-edged) ---- */
  .site-footer { background: var(--paper-2); border-top: 4px solid var(--orange);
    padding-block: var(--s-5) var(--s-3); }
  .site-footer .wrap { display: grid; gap: var(--s-4);
    grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer h2 { font-size: var(--step-lg); }
  .site-footer .foot-cta p { color: var(--ink-dim); max-width: 40ch; margin-inline: auto; }
  .social { display: flex; gap: 0.8rem; margin-top: var(--s-2); justify-content: center; }
  .social a { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line);
    display: grid; place-items: center; font-size: 1.2rem; color: var(--ink-dim);
    background: var(--card);
    transition: color 0.25s, border-color 0.25s, transform 0.3s var(--ease-out); }
  .social a:hover { color: var(--orange); border-color: var(--orange); transform: translateY(-3px); }
  .foot-fine { color: var(--ink-mute); font-size: 0.85rem; margin-top: var(--s-4);
    border-top: 1px solid var(--line); padding-top: var(--s-3); }
  .foot-fine .disc { max-width: 70ch; margin-top: 0.5rem; }

  /* ---- lightbox (with gallery navigation) ---- */
  .lightbox { position: fixed; inset: 0; z-index: 3000; display: none;
    place-items: center; background: oklch(0.12 0.01 55 / 0.94); padding: var(--s-3); }
  .lightbox.show { display: grid; }
  .lb-media { display: grid; place-items: center; }
  .lightbox img, .lightbox video { max-width: min(92vw, 1180px); max-height: 84vh;
    width: auto; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
  .lb-nav { position: absolute; top: 50%; transform: translateY(-50%);
    width: 3.4rem; height: 3.4rem; border-radius: 999px; background: var(--orange); color: var(--card);
    font-size: 2rem; line-height: 1; display: grid; place-items: center; box-shadow: var(--shadow-orange);
    transition: background 0.25s, transform 0.3s var(--ease-out); }
  .lb-nav:hover { background: var(--orange-hi); }
  .lb-prev { left: clamp(0.5rem, 3vw, 2.5rem); }
  .lb-next { right: clamp(0.5rem, 3vw, 2.5rem); }
  .lb-prev:hover { transform: translateY(-50%) scale(1.08); }
  .lb-next:hover { transform: translateY(-50%) scale(1.08); }
  .lb-nav[hidden] { display: none; }
  .lb-count { position: absolute; top: var(--s-3); left: var(--s-3); color: var(--on-night);
    font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: 1.1rem; }
  .lightbox-caption { position: absolute; bottom: var(--s-3); left: 0; right: 0;
    text-align: center; color: var(--on-night); font-size: 0.95rem; padding-inline: var(--s-5); }
  .lightbox-close { position: absolute; top: var(--s-3); right: var(--s-3);
    width: 3rem; height: 3rem; border-radius: 50%; background: var(--orange); color: var(--card);
    font-size: 1.6rem; display: grid; place-items: center; z-index: 2; }
}

/* ------------------------------------------------------------------ motion */
@layer motion {
  :root { --rise: 26px; --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1); }

  .js .reveal { opacity: 0; will-change: transform, opacity; }
  .js .reveal:not([data-reveal]) { transform: translateY(var(--rise)); }
  .js .reveal[data-reveal="up"]    { transform: translateY(var(--rise)); }
  .js .reveal[data-reveal="fade"]  { transform: none; }
  .js .reveal[data-reveal="left"]  { transform: translateX(calc(var(--rise) * -1.4)); }
  .js .reveal[data-reveal="right"] { transform: translateX(calc(var(--rise) * 1.4)); }
  .js .reveal[data-reveal="pop"]   { transform: translateY(var(--rise)) scale(0.96); }
  .js .reveal[data-reveal="clip"]  { opacity: 1; clip-path: inset(0 100% 0 0); }

  .js .reveal.is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0);
    transition: opacity 0.7s var(--ease-out), transform 0.75s var(--ease-out), clip-path 0.9s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms); }
  .js .reveal[data-reveal="fade"].is-visible { transition-duration: 0.9s; }

  .js .stagger > * { opacity: 0; transform: translateY(20px); will-change: transform, opacity; }
  .js .stagger.is-visible > * { opacity: 1; transform: none;
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms); }

  /* timeline node pops as each milestone enters */
  .js .timeline li .t-node { transform: scale(0); }
  .js .timeline li.is-visible .t-node { transform: scale(1);
    transition: transform 0.5s var(--ease-back) 0.1s; }

  @keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .reveal, .stagger > *, .timeline li .t-node { opacity: 1 !important; transform: none !important;
      clip-path: none !important; }
    .hero-bg { transform: none !important; }
  }
}

/* -------------------------------------------------------------- responsive */
@layer responsive {
  @media (max-width: 900px) {
    .gallery { grid-template-columns: repeat(4, 1fr); }
    .tile { grid-column: span 2; grid-row: span 2; }
    .tile--feature, .tile--wide { grid-column: span 4; grid-row: span 3; }
    .tile--big, .tile--tall { grid-column: span 2; grid-row: span 3; }
  }
  @media (max-width: 540px) {
    .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 40vw, 200px); }
    .tile, .tile--tall, .tile--big { grid-column: span 1; grid-row: span 2; }
    .tile--feature, .tile--wide { grid-column: span 2; grid-row: span 2; }
  }
  @media (max-width: 900px) {
    .give { grid-template-columns: 1fr; }
    .carousel-slide figure { grid-template-columns: 1fr; }
    .carousel-slide img { max-width: 300px; }
    .site-footer .wrap { grid-template-columns: 1fr; }
    /* timeline: collapse alternating layout to a single left spine */
    .timeline { max-width: 100%; }
    .timeline::before { left: 27px; transform: none; }
    .timeline li,
    .timeline li:nth-child(odd),
    .timeline li:nth-child(even) {
      width: 100%; margin-left: 0; text-align: left;
      padding: 0 0 var(--s-5) calc(27px + var(--s-4));
    }
    .timeline li:nth-child(odd) .t-node,
    .timeline li:nth-child(even) .t-node { left: 0; right: auto; }
    .timeline li:nth-child(odd) .t-media,
    .timeline li:nth-child(even) .t-media { margin-inline: 0; }
  }
  @media (max-width: 760px) {
    .nav-toggle { display: flex; }
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0.15rem;
      background: var(--paper); border-bottom: 1px solid var(--line);
      padding: var(--s-2) var(--s-3) var(--s-3);
      transform: translateY(-8px); opacity: 0; pointer-events: none;
      box-shadow: var(--shadow);
      transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    }
    .nav[data-open="true"] .nav-links { transform: none; opacity: 1; pointer-events: auto; }
    .nav-links a { padding: 0.9rem 0.6rem; font-size: 0.95rem; }
    .nav-links a[aria-current="page"]::after { left: 0.6rem; right: auto; width: 1.4rem; }
    .nav-links a.nav-cta { text-align: center; margin-top: 0.4rem; }
    .amounts { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 460px) {
    .amounts { grid-template-columns: 1fr 1fr; }
    .hero-scroll { display: none; }
  }
}

/* =====================================================================
   Authored polish — hover craft, type detailing, rhythm, de-uniforming.
   Unlayered on purpose so these intentional touches win over the base layers.
   ===================================================================== */

/* type detailing */
h1, h2, h3 { text-wrap: balance; }
p, .section-lead, .t-body, figcaption, .prose p { text-wrap: pretty; }
.t-date, .cal li b, .amount b, .lb-count { font-variant-numeric: tabular-nums; }

/* de-uniform the 3-up card rows: lead card carries more weight */
@media (min-width: 820px) {
  .cards { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* rhythm: the first section after the hero opens with more air */
.hero + .section { padding-block: clamp(5rem, 12vw, 9rem); }

/* subtle timeline asymmetry so it doesn't read as a folded-in-half object */
@media (min-width: 901px) {
  .timeline li:nth-child(odd)  .t-media { margin-left: auto; width: 94%; }
  .timeline li:nth-child(even) .t-media { width: 100%; }
}

/* nav: active + hover share one origin-swept underline (reads hand-built) */
.nav-links a::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.28rem; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* per-component hover craft (guarded for real pointers) */
@media (hover: hover) {
  .card { position: relative; overflow: hidden; }
  .card::after {
    content: ""; position: absolute; inset: 0 auto auto 0; height: 3px; width: 100%;
    background: var(--orange); transform: scaleX(0); transform-origin: left;
    transition: transform 0.45s var(--ease-out);
  }
  .card:hover::after { transform: scaleX(1); }

  .btn svg { transition: transform 0.25s var(--ease-out); }
  .btn:hover svg { transform: translateX(2px); }
  .btn:active { transform: translateY(-1px) scale(0.985); }

  .prose a, .card li a {
    background-image: linear-gradient(var(--orange), var(--orange));
    background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size 0.3s var(--ease-out), color 0.25s;
  }
  .prose a:hover, .card li a:hover { background-size: 100% 2px; }
}

/* story section: portrait + prose (a face for the founding story) */
.story-grid { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 820px) {
  .story-grid { grid-template-columns: 0.82fr 1.18fr; align-items: center; }
}
.story-figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.story-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.story-grid .prose { margin-inline: 0; max-width: none; text-align: left; }

/* full-bleed emotional image band (one per page, deliberate) */
.band { position: relative; width: 100vw; margin-inline: calc(50% - 50vw);
  min-height: min(64vh, 540px); display: grid; place-items: center;
  overflow: hidden; isolation: isolate; background: var(--night) center/cover no-repeat; }
.band::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(oklch(0.12 0.02 40 / 0.34), oklch(0.12 0.02 40 / 0.62)); }
.band > .wrap { position: relative; z-index: 1; text-align: center; padding-block: var(--s-5); }
.band .kicker { color: var(--amber); justify-content: center; }
.band .kicker::before { background: var(--amber); }
.band h2 { color: var(--on-night); font-size: var(--step-xl); max-width: 20ch; margin-inline: auto;
  text-shadow: 0 2px 24px oklch(0.1 0.02 40 / 0.5); }
.band p { color: var(--on-night); max-width: 44ch; margin: var(--s-2) auto 0; opacity: 0.92; }

/* hero background video (muted autoplay loop; poster + reduced-motion fall back to the image) */
.hero-video { position: absolute; inset: -8% 0 0 0; z-index: -2; width: 100%; height: 108%;
  object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* donation tally (manually updated; embed a platform widget for a live total) */
.tracker-nums { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.tracker-nums b { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem;
  line-height: 1; color: var(--orange); }
.tracker-nums span { color: var(--ink-mute); font-size: 0.9rem; }
.tracker-bar { height: 12px; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; margin-top: 0.65rem; }
.tracker-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--amber));
  border-radius: 999px; }

/* timeline media that should keep the top of frame (heads not cropped) */
.t-media.top img, .t-media.top video { object-position: center top; }

/* video shown in full (no crop) — natural aspect ratio, letterbox on black if needed */
.t-media.video-full { background: #000; }
.t-media.video-full video {
  aspect-ratio: auto; height: auto; max-height: 70vh;
  object-fit: contain; cursor: default;
}
.t-media.video-full:hover video { transform: none; }

/* small phones: keep the top bar uncrowded — social lives in the footer there */
@media (max-width: 520px) { .nav-right .nav-ig { display: none; } }