/* ==========================================================================
   Astrid Foundation — landing page
   Aesthetic: modern scientific publication. Warm paper, deep ink,
   precise hairlines, vivid accents. The ornament is the science.
   ========================================================================== */

:root{
  --paper:#fbfaf7;
  --paper-2:#f4f2ed;
  --card:#ffffff;
  --line:#e0ddd4;
  --line-soft:#eae7df;
  --ink:#14181d;
  --ink-dim:#4d5762;
  --muted:#7b8590;
  --teal:#0d8f77;
  --teal-bright:#12b394;
  --teal-wash:#e6f5f1;
  --amber:#b8701a;
  --amber-wash:#fbf1e4;
  --coral:#c8442f;
  --indigo:#3b3fa8;
  --display:"Instrument Serif",ui-serif,Georgia,serif;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --measure:34rem;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --shadow:0 1px 2px rgba(20,24,29,.04),0 8px 24px -12px rgba(20,24,29,.10);
  --shadow-lift:0 2px 4px rgba(20,24,29,.05),0 16px 40px -16px rgba(20,24,29,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(1rem,.55vw + .88rem,1.075rem)/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper tooth — barely-there texture */
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit}

/* ── masthead ───────────────────────────────────────────────────────── */
.masthead{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem var(--pad);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
}
.wordmark{
  display:inline-flex;align-items:center;gap:.6rem;
  font:500 .95rem/1 var(--sans);letter-spacing:.005em;text-decoration:none;
}
.mark{display:block;width:22px;height:22px;color:var(--teal)}
.mark svg{width:100%;height:100%;display:block}
.signin-top{
  font:500 .8rem/1 var(--mono);letter-spacing:.02em;
  color:var(--ink-dim);text-decoration:none;
  padding:.52rem .85rem;border:1px solid var(--line);border-radius:3px;
  background:var(--card);
  transition:border-color .25s,color .25s,box-shadow .25s,transform .25s;
}
.signin-top:hover{
  color:var(--teal);border-color:var(--teal);
  box-shadow:0 4px 14px -6px rgba(13,143,119,.4);transform:translateY(-1px);
}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;align-items:center;
  padding:clamp(3.5rem,9vw,7rem) var(--pad) clamp(3rem,7vw,5.5rem);
  max-width:82rem;margin-inline:auto;
}
/* soft gradient mesh — atmosphere without imagery */
.hero::before{
  content:"";position:absolute;inset:-10% -20% 0 -20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46rem 26rem at 76% 32%, rgba(18,179,148,.16), transparent 62%),
    radial-gradient(34rem 22rem at 12% 8%,  rgba(59,63,168,.09),  transparent 66%),
    radial-gradient(30rem 20rem at 92% 84%, rgba(184,112,26,.09), transparent 64%);
  animation:meshdrift 26s ease-in-out infinite alternate;
}
@keyframes meshdrift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2%,1.5%,0) scale(1.05)}
}
@media (min-width:62rem){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}

/* staggered entrance */
.hero-copy > *{animation:rise .8s cubic-bezier(.2,.7,.25,1) backwards}
.hero-copy > *:nth-child(1){animation-delay:.05s}
.hero-copy > *:nth-child(2){animation-delay:.14s}
.hero-copy > *:nth-child(3){animation-delay:.23s}
.hero-copy > *:nth-child(4){animation-delay:.32s}
.hero-fig{animation:rise 1s cubic-bezier(.2,.7,.25,1) .3s backwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.eyebrow{
  display:flex;align-items:center;gap:.55rem;
  font:500 .73rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin:0 0 1.4rem;
}
.tick{width:16px;height:2px;background:var(--teal);display:inline-block;flex:none;border-radius:2px}

h1{
  font:400 clamp(2.15rem,5.5vw,3.85rem)/1.11 var(--display);
  letter-spacing:-.015em;margin:0 0 1.6rem;text-wrap:balance;color:var(--ink);
}
h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--teal) 10%,var(--indigo) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.lede{max-width:var(--measure);color:var(--ink-dim);margin:0 0 2.2rem;font-size:1.06em}
.lede strong{color:var(--ink);font-weight:500}

.actions{display:flex;flex-wrap:wrap;gap:.7rem}

.cta{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.82rem 1.3rem;border-radius:3px;
  background:var(--ink);color:var(--paper);
  font:500 .92rem/1 var(--sans);text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s;
}
.cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);background:#1d232b}
.cta-arrow{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.cta:hover .cta-arrow{transform:translateX(3px)}
.cta.large{padding:.95rem 1.7rem;font-size:1rem;background:var(--teal)}
.cta.large:hover{background:var(--teal-bright)}

.cta-ghost{
  display:inline-flex;align-items:center;padding:.82rem 1.2rem;
  border:1px solid var(--line);border-radius:3px;background:var(--card);
  font:500 .92rem/1 var(--sans);color:var(--ink-dim);text-decoration:none;
  transition:border-color .25s,color .25s,box-shadow .25s,transform .25s;
}
.cta-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow)}

/* ── figures ────────────────────────────────────────────────────────── */
figure{margin:0}
figcaption{
  margin-top:1rem;font:400 .78rem/1.6 var(--mono);
  color:var(--muted);max-width:30rem;
}
.fig-n{color:var(--teal);font-weight:500;margin-right:.5rem}
.hero-fig .extrusion{width:100%;height:auto;display:block;overflow:visible}

/* loop extrusion animation ------------------------------------------- */
.loop{transform-box:fill-box;transform-origin:50% 100%;opacity:.92}
@keyframes extrude{
  0%,100%{transform:scaleY(.35) scaleX(.92);opacity:.3}
  50%    {transform:scaleY(1)    scaleX(1);  opacity:.95}
}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
.l1{animation:extrude 9s ease-in-out infinite}
.l2{animation:extrude 11s ease-in-out infinite -2.4s}
.l3{animation:extrude 8s ease-in-out infinite -4.1s}
.l4{animation:extrude 12s ease-in-out infinite -1.3s}
.l5{animation:extrude 10s ease-in-out infinite -5.7s}
.loops{animation:drift 24s ease-in-out infinite}
.ring{fill:var(--paper);stroke:var(--teal);stroke-width:1.8;opacity:.85}
.r1{animation:breathe 9s ease-in-out infinite}
.r2{animation:breathe 11s ease-in-out infinite -2.4s}
.r3{animation:breathe 8s ease-in-out infinite -4.1s}
.r4{animation:breathe 12s ease-in-out infinite -1.3s}
.r5{animation:breathe 10s ease-in-out infinite -5.7s}
.halo{animation:breathe 16s ease-in-out infinite}

/* ── bands ──────────────────────────────────────────────────────────── */
.band{border-top:1px solid var(--line-soft);padding:clamp(3.5rem,8vw,6rem) var(--pad)}
.band.alt{background:var(--paper-2)}
.band-inner{max-width:74rem;margin-inline:auto}

h2{
  font:400 clamp(1.65rem,3.1vw,2.45rem)/1.18 var(--display);
  letter-spacing:-.012em;margin:0 0 1.3rem;text-wrap:balance;color:var(--ink);
}
.band p{color:var(--ink-dim);max-width:var(--measure);margin:0 0 1.15rem}
.band p strong{color:var(--ink);font-weight:500}
.band em{font-style:italic;color:var(--teal)}
.note{
  border-left:2px solid var(--teal);padding-left:1.05rem;
  color:var(--muted);font-style:italic;
}

.two-col{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:58rem){.two-col{grid-template-columns:1fr 1fr}}

/* dosage curve -------------------------------------------------------- */
.curve-fig{
  background:var(--card);border:1px solid var(--line-soft);border-radius:4px;
  padding:1.4rem 1.2rem 1.1rem;box-shadow:var(--shadow);
}
.curve-fig svg{width:100%;height:auto;display:block}
.axis{stroke:var(--line);stroke-width:1.2}
.win{stroke:var(--teal);stroke-width:1;stroke-dasharray:4 5;opacity:.55}
.win-band{stroke:var(--teal);stroke-width:3;fill:none;stroke-linecap:round}
.ucurve{
  fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:draw 2.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.pt{stroke:var(--card);stroke-width:2.5}
.pt.healthy{fill:var(--teal)}
.pt.low{fill:var(--coral)}
.pt.high{fill:var(--amber)}
.lab{font:500 11.5px var(--mono);letter-spacing:.03em}
.low-lab{fill:var(--coral)}
.high-lab{fill:var(--amber)}
.win-lab{fill:var(--teal)}
.axis-lab{font:400 10.5px var(--mono);fill:var(--muted);letter-spacing:.04em}

/* ── statistics ─────────────────────────────────────────────────────── */
.stats.band{background:var(--paper-2)}
.stats-lede{max-width:44rem;font-size:1.04em;margin-bottom:clamp(2.2rem,4vw,3rem)}

.stat-grid{
  display:grid;gap:1rem;margin:0 0 clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:56rem){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{
  background:var(--card);border:1px solid var(--line-soft);border-radius:4px;
  padding:1.6rem 1.35rem;box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.stat dt{
  font:400 clamp(2.1rem,4.4vw,3rem)/1 var(--display);
  color:var(--teal);letter-spacing:-.015em;margin-bottom:.55rem;
}
.stat dt .unit{font-size:.5em;color:var(--muted);letter-spacing:0}
.stat dd{margin:0;font:400 .87rem/1.5 var(--sans);color:var(--ink-dim)}

.src{
  display:block;margin-top:.55rem;
  font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .25s;
}
.src:hover{color:var(--teal)}

.contrast{
  border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:4px;padding:clamp(1.6rem,3.5vw,2.4rem);
  background:var(--amber-wash);
}
.contrast h3{font:500 1.08rem/1.35 var(--ink);margin:0 0 1.6rem;font-family:var(--sans);color:var(--ink)}
.contrast-grid{display:grid;gap:1.4rem 2rem;margin:0 0 1.6rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:56rem){.contrast-grid{grid-template-columns:repeat(4,1fr)}}
.c-stat dt{font:400 clamp(2rem,3.8vw,2.6rem)/1 var(--display);color:var(--ink);margin-bottom:.42rem}
.c-stat.zero dt{color:var(--amber)}
.c-stat dd{margin:0;font:400 .85rem/1.5 var(--sans);color:var(--ink-dim)}
.contrast-note{
  margin:0;padding-top:1.3rem;border-top:1px solid rgba(184,112,26,.22);
  color:var(--ink-dim);max-width:46rem;font-size:.95rem;
}

.sources{
  margin:1.6rem 0 0;font:400 .76rem/1.75 var(--mono);
  color:var(--muted);max-width:52rem;
}
.sources a{color:var(--teal);text-decoration:none}
.sources a:hover{text-decoration:underline}
.sources em{font-style:italic}

/* ── programme ──────────────────────────────────────────────────────── */
.partner{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.partner-lede{max-width:44rem;font-size:1.04em}

.phases{
  list-style:none;padding:0;margin:0 0 2.5rem;
  display:grid;gap:1rem;grid-template-columns:1fr;
}
@media (min-width:52rem){.phases{grid-template-columns:repeat(3,1fr)}}
.phase{
  background:var(--card);border:1px solid var(--line-soft);border-radius:4px;
  padding:1.8rem 1.55rem;box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.phase:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--teal)}
.phase-n{
  display:block;font:500 .72rem/1 var(--mono);letter-spacing:.14em;
  color:var(--teal);margin-bottom:1rem;
}
.phase h3{font:500 1.14rem/1.32 var(--sans);margin:0 0 .7rem;color:var(--ink)}
.phase p{font-size:.93rem;line-height:1.62;margin:0;color:var(--ink-dim);max-width:none}

.disclaimer{
  font:400 .79rem/1.65 var(--mono);color:var(--muted);
  max-width:46rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);
}

/* ── closing ────────────────────────────────────────────────────────── */
.closing.band{background:var(--paper-2)}
.closing .band-inner{max-width:44rem;text-align:center}
.closing-copy{margin-inline:auto;margin-bottom:2rem}
.closing-note{margin:2rem auto 0;font-size:.9rem;color:var(--muted)}

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding:2.2rem var(--pad);background:var(--paper)}
.foot-inner{
  max-width:74rem;margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;
  align-items:center;justify-content:space-between;
  font:400 .82rem/1 var(--mono);color:var(--muted);
}
.foot-inner a{color:var(--muted);text-decoration:none;transition:color .25s}
.foot-inner a:hover{color:var(--teal)}

/* ── motion & focus ─────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .ucurve{stroke-dashoffset:0}
  .loop{transform:scaleY(.8)}
  .hero-copy > *,.hero-fig{opacity:1;transform:none}
}

/* ── learning centre entry ──────────────────────────────────────────── */
.mast-nav{display:flex;align-items:center;gap:1.1rem}
.mast-link{
  font:500 .82rem/1 var(--mono);letter-spacing:.02em;color:var(--ink-dim);
  text-decoration:none;transition:color .25s;
}
.mast-link:hover{color:var(--teal)}
.learn-preview{
  list-style:none;padding:0;margin:0;display:grid;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:4px;
  overflow:hidden;
}
.learn-preview li{
  background:var(--card);padding:.85rem 1.1rem;
  font:400 .92rem/1.45 var(--sans);color:var(--ink-dim);
  display:flex;gap:.9rem;align-items:baseline;
}
.learn-preview span{
  font:500 .74rem/1 var(--mono);color:var(--teal);flex:none;
}
@media (max-width:34rem){ .mast-nav{gap:.7rem} .mast-link{display:none} }