/* Try Easier: science section
   Tokens lifted from index.html so this stays visually consistent with the homepage. */

:root{
  color-scheme:dark;
  --bg:#080b0a;
  --panel:#0d1210;
  --card:#101815;
  --ink:#f2f5f3;
  --dim:#a3b2ac;
  --faint:#5d6d66;
  --line:#1c2622;
  --green:#3fd97f;
  --teal:#35dcc3;
  --gold:#f2c94c;
  --red:#e05252;
  --disp:"Bricolage Grotesque",sans-serif;
  --body:"Hanken Grotesk",sans-serif;
  --max:1060px;
  --read:640px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:var(--green)}

.wrap{width:min(var(--max),calc(100% - 44px));margin:0 auto}
.read{width:min(var(--read),calc(100% - 44px));margin:0 auto}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:40;
  background:rgba(8,11,10,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;justify-content:space-between;align-items:center;height:72px;gap:16px}
.logo img{height:46px;width:auto}
.nav-back{
  font-size:14px;font-weight:600;color:var(--dim);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;
}
.nav-back:hover{color:var(--ink)}
.nav-back svg{width:14px;height:14px;flex-shrink:0}

/* ---------- article head ---------- */
.ahead{padding:clamp(50px,7svh,78px) 0 0}
.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin:0 0 16px;
}
h1{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(34px,5.2vw,48px);
  letter-spacing:-.025em;line-height:1.05;
  text-wrap:balance;margin:0;
}
.standfirst{
  color:var(--dim);font-size:19px;line-height:1.5;
  margin:18px 0 0;text-wrap:pretty;max-width:52ch;
}
.ahead-rule{
  border:0;border-top:1px solid var(--line);
  margin:clamp(34px,5svh,48px) 0 0;
}

/* ---------- body copy ---------- */
article{padding:clamp(30px,4svh,42px) 0 clamp(44px,6svh,68px)}
article p{
  margin:0 0 17px;
  font-size:18px;line-height:1.65;
  text-wrap:pretty;
}
article p:last-child{margin-bottom:0}
article em{font-style:italic}
article strong{font-weight:700;color:var(--ink)}

/* numbered section markers */
.sec{
  margin-top:clamp(46px,6svh,64px);
  padding-top:20px;
  border-top:1px solid var(--line);
}
.sec h2{
  font-family:var(--disp);font-weight:800;
  font-size:22px;letter-spacing:-.015em;line-height:1.2;
  margin:0 0 16px;text-wrap:balance;
}

/* inline citation markers */
a.cite{
  font-size:.7em;font-weight:700;vertical-align:super;line-height:0;
  color:var(--faint);text-decoration:none;
  padding:0 1px 0 2px;
  transition:color .15s;
}
a.cite:hover,a.cite:focus-visible{color:var(--green)}
.sources li:target{color:var(--ink)}

/* ---------- cta ---------- */
.cta{
  padding:clamp(78px,10svh,116px) 0 clamp(88px,12svh,132px);
  text-align:center;border-top:1px solid var(--line);
  background:radial-gradient(720px 460px at 50% 120%,rgba(63,217,127,.14),transparent 65%);
}
.cta h2{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(38px,6.4vw,64px);
  letter-spacing:-.02em;line-height:1.05;margin:0;
  text-wrap:balance;
}
.cta h2 em{font-style:normal;color:var(--green)}
.cta-ctas{margin-top:38px;display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.store{display:inline-flex;text-decoration:none;transition:opacity .2s,transform .2s}
.store:hover{opacity:.88;transform:translateY(-1px)}
.store img{display:block;height:56px;width:auto;aspect-ratio:238.96/70.87}
.soon{
  display:inline-flex;align-items:center;gap:11px;
  height:56px;padding:0 26px;box-sizing:border-box;
  font-weight:700;font-size:16px;color:var(--dim);
  border:1px solid var(--line);background:#0f1513;
  border-radius:999px;
}

/* ---------- sources ---------- */
.sources{
  border-top:1px solid var(--line);
  padding:clamp(38px,5svh,54px) 0 clamp(42px,6svh,60px);
}
.sources h2{
  font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin:0 0 16px;
}
.sources ol{margin:0;padding-left:18px;color:var(--dim);font-size:14px;line-height:1.55}
.sources li{margin-bottom:11px}
.sources li:last-child{margin-bottom:0}
.sources a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.sources a:hover{color:var(--ink)}

/* ---------- also in ---------- */
.also{
  border-top:1px solid var(--line);
  padding:clamp(30px,4svh,42px) 0;
}
.also h2{
  font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin:0 0 14px;
}
.also ul{list-style:none;margin:0;padding:0}
.also li{margin-bottom:9px}
.also li:last-child{margin-bottom:0}
.also a{
  color:var(--dim);text-decoration:none;
  font-size:16px;font-weight:600;
  transition:color .15s;
}
.also a:hover{color:var(--ink)}

/* ---------- index grid ---------- */
.idx{padding:clamp(20px,3svh,34px) 0 clamp(64px,9svh,96px)}
.idx-grid{display:grid;gap:16px;margin-top:clamp(30px,4svh,44px)}
@media(min-width:820px){.idx-grid{grid-template-columns:repeat(3,1fr)}}
.icard{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 24px;text-decoration:none;color:inherit;
  transition:border-color .2s,transform .2s,background .2s;
}
.icard:hover{border-color:#2c3b35;background:#121a17;transform:translateY(-2px)}
.icard-n{
  font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.12em;
  color:var(--green);margin:0 0 14px;text-transform:uppercase;
}
.icard h3{
  font-family:var(--disp);font-weight:800;font-size:23px;
  letter-spacing:-.02em;line-height:1.12;margin:0 0 10px;text-wrap:balance;
}
.icard p{color:var(--dim);font-size:15px;line-height:1.5;margin:0 0 18px}
.icard-go{
  margin-top:auto;font-size:14px;font-weight:700;color:var(--green);
  display:inline-flex;align-items:center;gap:6px;
}
.icard-soon{margin-top:auto;font-size:14px;font-weight:700;color:var(--faint)}
.icard.pending{pointer-events:none;opacity:.55}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:28px 0}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:14px}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot-l{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.28,1)}
.rv.in{opacity:1;transform:none}

a:focus-visible,.icard:focus-visible,.store:focus-visible{
  outline:2px solid var(--green);outline-offset:3px;border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}