/* ============================================================
   AIST design system
   Tokens: primitive, semantic, component.
   Light theme locked. Radius 0. One accent. System type only.
   Breakpoints: mobile < 40rem | tablet 40-64rem | laptop > 64rem
   ============================================================ */

:root{
  /* PRIMITIVE */
  --navy-900:#001C28; --navy-800:#002A3C; --navy-600:#0F455C;
  --orange-600:#C93B14; --orange-500:#E8481F; --orange-050:#FCEDE8;
  --grey-050:#F4F6F7; --grey-100:#E4EAEC; --grey-400:#7A8B93; --grey-600:#4A5A62;
  --white:#FFFFFF;

  /* SEMANTIC */
  --bg:var(--white); --bg-sunk:var(--grey-050); --bg-brand:var(--navy-800); --bg-accent:var(--orange-050);
  --ink:var(--navy-900); --ink-muted:var(--grey-600); --ink-faint:var(--grey-400);
  --ink-on-brand:var(--white); --ink-muted-on-brand:#B4C8D2;
  --accent:var(--orange-500); --accent-strong:var(--orange-600);
  /* Border ramp: subtle separates, default divides, strong frames. */
  --line-subtle:#EEF2F3; --line:var(--grey-100); --line-strong:#C7D2D7;
  --line-on-brand:rgba(255,255,255,.18);

  /* Semantic z-index scale. Nothing in this stylesheet may invent its own value. */
  --z-sticky:100; --z-drawer:200; --z-skip:300;

  /* COMPONENT */
  --btn-bg:var(--navy-800); --btn-ink:var(--white); --btn-bg-hover:var(--navy-600);
  --btn-give-bg:var(--orange-600); --btn-give-ink:var(--white); --btn-give-hover:#A93010;
  --btn-line-ink:var(--navy-800);
  --bar-h:64px;

  /* SCALE */
  --radius:0px; --measure:62ch;
  /* Heading steps hold a >=1.25 ratio: 2.5 / 2.0 / 1.32. Body steps below
     sit close together on purpose, since they are one text size, not a hierarchy. */
  --s6:clamp(1.85rem,3.6vw,2.5rem); --s5:clamp(1.45rem,2.9vw,2rem);
  --s4:1.32rem; --s3:1.05rem; --s2:1rem; --s1:.92rem; --s0:.81rem;
  --stat:clamp(2.2rem,5.2vw,3.2rem);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* MOTION */
  --ease-out:cubic-bezier(.23,1,.32,1); --t:140ms;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B1A22; --bg-sunk:#102630; --bg-brand:#061219; --bg-accent:#2A1810;
    --ink:#EAF1F4; --ink-muted:#A9BEC8; --ink-faint:#7E939D;
    --accent:#F0764E; --accent-strong:#F0764E;
    --line-subtle:#162C36; --line:#1E3743; --line-strong:#2F4C59;
    --btn-bg:#F0764E; --btn-ink:#0B1A22; --btn-bg-hover:#E8481F;
    --btn-give-bg:#F0764E; --btn-give-ink:#0B1A22; --btn-give-hover:#E8481F;
    --btn-line-ink:#EAF1F4;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 1rem)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--s6)} h2{font-size:var(--s5)} h3{font-size:var(--s4);letter-spacing:-.02em}
p{margin:0 0 1rem;max-width:var(--measure);text-wrap:pretty}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.15rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:var(--z-skip);background:var(--bg);padding:.6rem 1rem;border:2px solid var(--accent)}

/* ============ STICKY HEADER ============ */
.masthead{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:.4rem;min-height:var(--bar-h)}
.brand{flex:none;margin-right:auto;display:block}
.brand img{height:28px;width:auto}
@media (prefers-color-scheme:dark){.brand img{filter:brightness(0) invert(1)}}

.navlinks{display:flex;align-items:center;gap:1.1rem;font-size:var(--s1)}
.navlinks a{text-decoration:none;font-weight:600;padding:.3rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.navlinks a:hover,.navlinks a[aria-current="page"]{border-bottom-color:var(--accent)}
.navcta{display:flex;align-items:center;gap:.4rem;flex:none}

/* 44px minimum touch target. */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:2px solid var(--line-strong);background:none;color:var(--ink);cursor:pointer;padding:0;text-decoration:none;
  transition:background var(--t) var(--ease-out),border-color var(--t) var(--ease-out)}
.iconbtn:hover{border-color:var(--ink);background:var(--bg-sunk)}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menubtn{display:none}
.drawer-only{display:none}

/* mobile + tablet: links collapse into a drawer */
@media (max-width:63.99rem){
  .menubtn{display:inline-flex}
  .navlinks{
    position:absolute;left:0;right:0;top:100%;z-index:var(--z-drawer);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:.25rem 1.15rem 1.15rem;font-size:var(--s2);
    box-shadow:0 14px 26px -14px rgba(0,28,40,.3);
  }
  /* 44px minimum touch target on every drawer row. */
  .navlinks a{padding:.85rem 0;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
  .navlinks a[aria-current="page"]{color:var(--accent-strong)}
  .drawer-only{display:block;margin-top:1rem}
  .drawer-only .btn{display:block;text-align:center}
  .masthead[data-nav="closed"] .navlinks{display:none}
}
/* mobile only */
@media (max-width:39.99rem){
  .brand img{height:24px}
  .navcta .btn{padding:.48rem .75rem;font-size:var(--s1)}
}

/* ============ BUTTONS ============ */
.btn{display:inline-block;padding:.72rem 1.35rem;border-radius:var(--radius);font-weight:700;font-size:var(--s2);
  text-decoration:none;border:2px solid transparent;transition:background var(--t) var(--ease-out),transform var(--t) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn-primary:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}
.btn-give{background:var(--btn-give-bg);color:var(--btn-give-ink);border-color:var(--btn-give-bg)}
.btn-give:hover{background:var(--btn-give-hover);border-color:var(--btn-give-hover)}
.btn-line{border-color:var(--btn-line-ink);color:var(--btn-line-ink)}
.btn-line:hover{background:var(--btn-line-ink);color:var(--bg)}
.btn-sm{padding:.48rem .9rem;font-size:var(--s1)}
.actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ============ HEADERS AND SECTIONS ============ */
.hero{padding:2.25rem 0;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:1.75rem;align-items:center}
.hero h1{max-width:none}
.hero-grid > img{width:100%;aspect-ratio:4/3;object-fit:cover;max-height:26rem}
/* placeholder tone, so a slow or failed image is a calm block rather than a broken icon */
.hero-grid img,.prog img,figure img{background:var(--bg-sunk)}
.hero .lede{font-size:var(--s3);color:var(--ink-muted);max-width:42ch;margin-top:.95rem}
.phead{padding:2.25rem 0 1.9rem;border-bottom:1px solid var(--line)}
.phead .lede{font-size:var(--s3);color:var(--ink-muted);max-width:46ch;margin-top:.85rem}
.crumb{font-size:var(--s1);color:var(--ink-muted);margin-bottom:.8rem}
.crumb a{color:var(--ink-muted)}
.tagline{display:block;font-size:var(--s1);font-weight:700;color:var(--accent-strong);margin-bottom:.55rem}

.sec{padding:3rem 0;border-bottom:1px solid var(--line)}
.sec.sunk{background:var(--bg-sunk)}
.sec.brand{background:var(--bg-brand);color:var(--ink-on-brand);border-bottom:0}
.sec.brand .lede-sec,.sec.brand p{color:var(--ink-muted-on-brand)}
.sec:last-of-type{border-bottom:0}
.sec > .wrap > h2{max-width:20ch}
.lede-sec{margin-top:.8rem;color:var(--ink-muted);font-size:var(--s3);max-width:var(--measure)}
.stack{max-width:var(--measure)}

/* ============ STATS ============ */
.stats{display:grid;gap:1.6rem;margin-top:2rem}
.stat b{display:block;font-size:var(--stat);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--accent-strong)}
.sec.brand .stat b{color:var(--white)}
.stat span{display:block;font-size:var(--s1);color:var(--ink-muted);margin-top:.4rem;max-width:22ch}
.sec.brand .stat span{color:var(--ink-muted-on-brand)}

/* ============ PROGRAMME CARDS ============ */
.progs{display:grid;gap:2rem;margin-top:2rem}
.prog img{width:100%;aspect-ratio:3/2;object-fit:cover}
.prog h3{margin-top:.95rem}
.prog p{font-size:var(--s1);color:var(--ink-muted);margin:.45rem 0 0}
.prog .fact{margin-top:.75rem;padding:.65rem .9rem;background:var(--bg-accent);font-size:var(--s1);font-weight:600;color:var(--ink)}
.sunk .prog .fact{background:var(--bg)}
.prog .actions{margin-top:.95rem}

/* ============ LIFECYCLE LADDER ============ */
.ladder{position:relative;padding-right:4.8rem}
.rungs{list-style:none;margin:0;padding:0;position:relative;--node:.8rem}
.rungs::before{content:"";position:absolute;left:5px;top:var(--node);bottom:var(--node);width:2px;background:var(--line)}
.rung{position:relative;padding:0 0 1.2rem 1.85rem}
.rung:last-child{padding-bottom:0}
.rung::before{content:"";position:absolute;left:0;top:calc(var(--node) - 6px);width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--ink-faint)}
.rung b{display:block;font-size:var(--s3);font-weight:700;letter-spacing:-.02em;line-height:1.5rem}
.rung span{display:block;font-size:var(--s0);color:var(--ink-muted)}
.rung a{text-decoration:none;border-bottom:2px solid transparent}
.rung a:hover{border-bottom-color:var(--accent)}
.rung.wait::before{border-style:dashed}
.rung.wait b{font-weight:600;color:var(--ink-muted)}
.rung.back::before{background:var(--accent);border-color:var(--accent)}
.rung.back b{color:var(--accent-strong)}
/* current position marker, used on programme pages.
   A hollow orange ring, so it stays distinct from the filled dot on "returns as a tutor". */
.rung.now::before{background:var(--bg);border-color:var(--accent);box-shadow:0 0 0 3px var(--bg-accent)}
.rung.now b{color:var(--accent-strong)}
.rung .here{display:inline-block;width:auto;margin-top:.3rem;padding:.1rem .45rem;
  background:var(--accent-strong);color:var(--white);font-size:var(--s0);font-weight:700;line-height:1.5}

.loop{position:absolute;right:1.6rem;top:.8rem;bottom:.8rem;width:2.9rem;overflow:visible}
.loop path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 900ms var(--ease-out) 250ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.loop-tip{position:absolute;right:4.4rem;top:.55rem;width:0;height:0;border:5px solid transparent;
  border-right-color:var(--accent);opacity:0;animation:tip 160ms var(--ease-out) 1100ms forwards}
@keyframes tip{to{opacity:1}}
.loop-txt{position:absolute;right:0;top:.8rem;bottom:.8rem;writing-mode:vertical-rl;display:flex;align-items:center;
  justify-content:center;font-size:var(--s0);font-weight:600;color:var(--accent-strong)}
@media (prefers-reduced-motion:reduce){
  .loop path{animation:none;stroke-dashoffset:0}
  .loop-tip{animation:none;opacity:1}
}
.model{display:grid;gap:2rem;margin-top:2rem;align-items:center}

/* ============ PROGRAMME PAGE LAYOUT ============ */
.pgrid{display:grid;gap:2.25rem;align-items:start}
.aside{background:var(--bg-sunk);padding:1.35rem;border-top:3px solid var(--accent)}
.aside h2{font-size:var(--s4);letter-spacing:-.02em}
.aside > p{font-size:var(--s1);color:var(--ink-muted);margin:.5rem 0 0}
.aside .ladder{margin-top:1.1rem;padding-right:0}
.aside .loop,.aside .loop-tip,.aside .loop-txt{display:none}
.aside .rung{padding-bottom:1rem}
.aside .rung b{font-size:var(--s2);line-height:1.4rem}
.aside .rung::before{background:var(--bg-sunk)}
.aside .rung.now::before{background:var(--bg-sunk);border-color:var(--accent)}
.aside .rung.back::before{background:var(--accent)}
.aside .btn{display:block;text-align:center;margin-top:1.15rem}

/* ============ GROUPED DEFINITIONS ============ */
.groups{display:grid;gap:1.9rem;margin-top:1.9rem}
.group h3{font-size:var(--s3);padding-bottom:.45rem;border-bottom:2px solid var(--accent)}
.group dl{margin:0}
.group dt{font-weight:700;margin-top:.85rem;font-size:var(--s2)}
.group dd{margin:.1rem 0 0;color:var(--ink-muted);font-size:var(--s1);max-width:52ch}
.group > p{font-size:var(--s1);color:var(--ink-muted);margin-top:.85rem}

.spec{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:1.25rem 0 0;font-size:var(--s1);
  padding-top:1.1rem;border-top:1px solid var(--line)}
.spec dt{color:var(--ink-muted)} .spec dd{margin:0;font-weight:600}

/* ============ PANELS, MEDIA, CALLOUT ============ */
.panels{display:grid;gap:1px;margin-top:2rem;background:var(--line);border:1px solid var(--line)}
.panel{background:var(--bg);padding:1.35rem}
.panel h3{font-size:var(--s3)}
.panel p{font-size:var(--s1);color:var(--ink-muted);margin:.45rem 0 .95rem}
.pair{display:grid;gap:1.35rem;margin-top:2rem}
figure{margin:0}
figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
figure.wide img{aspect-ratio:21/9}
figcaption{font-size:var(--s0);color:var(--ink-muted);margin-top:.45rem;max-width:44ch}
.callout{background:var(--bg-accent);padding:1.2rem 1.3rem;margin-top:1.9rem;max-width:44rem;font-size:var(--s1);color:var(--ink-muted)}
.callout strong{color:var(--ink)}
.callout p:last-child{margin-bottom:0}

/* ============ FUNDERS ============ */
.wall{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:1.9rem;background:var(--line);border:1px solid var(--line)}
.wall div{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1.15rem;min-height:100px}
.wall img{max-height:48px;width:auto;object-fit:contain}
.funder-notes{display:grid;gap:1.5rem;margin-top:1.9rem}
.funder-notes h3{font-size:var(--s3)}
.funder-notes p{font-size:var(--s1);color:var(--ink-muted);margin:.3rem 0 0}

/* ============ MISC ============ */
.bank{border:2px solid var(--ink);padding:1.3rem;margin-top:1.4rem;max-width:28rem}
.bank dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.15rem;margin:0;font-size:var(--s1)}
.bank dt{color:var(--ink-muted)} .bank dd{margin:0;font-weight:700}
.grow{margin-top:1.6rem;max-width:26rem;font-size:var(--s1);border-collapse:collapse;width:100%}
.grow th{text-align:left;font-size:var(--s0);color:var(--ink-muted);font-weight:600;padding:0 1rem .45rem 0;border-bottom:2px solid var(--line-strong)}
.grow td{padding:.48rem 1rem .48rem 0;font-variant-numeric:tabular-nums}
.grow tbody tr:last-child td{font-weight:700;border-top:2px solid var(--line)}
.systems{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);max-width:34rem;border:1px solid var(--line)}
.systems a{display:block;text-decoration:none;padding:1.15rem 1.3rem;background:var(--bg);
  transition:background var(--t) var(--ease-out)}
.systems a:hover{background:var(--bg-sunk)}
.systems b{display:block;font-size:var(--s3);font-weight:700;letter-spacing:-.02em}
.systems a:hover b{color:var(--accent-strong)}
.systems span{display:block;font-size:var(--s1);color:var(--ink-muted);margin-top:.18rem}

/* ============ FOOTER ============ */
.foot{background:var(--bg-brand);color:var(--ink-muted-on-brand);padding:2.5rem 0;font-size:var(--s1)}
.foot-grid{display:grid;gap:1.6rem}
.foot h3{font-size:var(--s0);font-weight:700;color:var(--ink-on-brand);margin-bottom:.5rem;letter-spacing:0}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.32rem}
.foot a{color:#D2E1E8}
.foot p{max-width:34ch;margin-bottom:.45rem}
.foot dl{display:grid;grid-template-columns:auto 1fr;gap:.18rem .85rem;margin:0;font-size:var(--s0)}
.foot dt{color:var(--ink-muted-on-brand)} .foot dd{margin:0;color:var(--ink-on-brand)}
.foot-base{margin-top:2rem;padding-top:1.05rem;border-top:1px solid var(--line-on-brand);font-size:var(--s0);max-width:none}

/* ============ BREAKPOINTS ============ */
/* tablet */
@media (min-width:40rem){
  .wrap{padding:0 1.6rem}
  .stats{grid-template-columns:repeat(2,1fr);gap:1.9rem}
  .progs{grid-template-columns:repeat(2,1fr);gap:2.25rem 1.9rem}
  .pair{grid-template-columns:1fr 1fr}
  .groups{grid-template-columns:1fr 1fr;gap:2.25rem}
  .panels{grid-template-columns:1fr 1fr}
  .wall{grid-template-columns:repeat(4,1fr)}
  .funder-notes{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:1.9rem}
  .hero{padding:3rem 0}
  .sec{padding:3.5rem 0}
}
/* laptop */
@media (min-width:64rem){
  .hero-grid{grid-template-columns:1fr 1fr;gap:3.25rem}
  .stats{grid-template-columns:repeat(4,1fr)}
  .model{grid-template-columns:1fr 1fr;gap:3.75rem}
  .pgrid{grid-template-columns:minmax(0,1fr) 19.5rem;gap:3.25rem}
  .aside{position:sticky;top:calc(var(--bar-h) + 1.4rem)}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
  .hero{padding:3.75rem 0}
}
@media (max-width:32rem){
  .ladder{padding-right:4rem}
  .loop{right:1.2rem;width:2.3rem}
  .loop-tip{right:3.4rem}
}

/* Utility last, so it wins over component display rules such as .btn */
@media (max-width:39.99rem){
  .hide-mobile{display:none}
}