/* ==========================================================================
   Golden Rain — GR-2 "Training prospectus"
   The register of a school or institute prospectus: a transitional serif for
   headings, a calm off-white ground, deep pine for structure, amber reserved
   for the licence figure and the roman enumerators, hairline rules throughout.

   COLOUR / CONTRAST NOTES (measured against the ground each token sits on)
     --ink      #1C2A22 on --paper  14.2:1
     --ink-2    #4C5B52 on --paper   6.8:1
     --ink-3    #67736C on --paper   4.7:1   (darkened from the prototype's
                #7C8A83, which measured 3.4:1 and failed AA at caption size)
     --pine     #23503C on --paper   8.7:1
     --amber    #A8721A on --paper   3.9:1 — LARGE TEXT ONLY. Used only at
                >=20px bold or >=24px: the licence figure and the enumerators.
     --amber-ink #8A5A05 on --paper  5.6:1 — the amber for anything smaller.
     --amber-lt #D9A648 on --pine-deep 6.0:1 — amber on the dark grounds.
   ========================================================================== */

:root{
  --ink:#1C2A22;
  --ink-2:#4C5B52;
  --ink-3:#67736C;
  --paper:#FAF9F6;
  --paper-2:#FFFFFF;
  --line:#DFDCD2;
  --line-2:#C4C0B3;
  --line-3:#94907F;   /* 3.0:1 — borders that bound an interactive control */
  --pine:#23503C;
  --pine-deep:#173627;
  --pine-line:#2E4A3B;
  --amber:#A8721A;
  --amber-ink:#8A5A05;
  --amber-lt:#D9A648;
  --pale:#F6EFE1;
  --on-deep:#C6D4CB;
  --on-deep-2:#8AA294;
  --on-deep-3:#E4EDE7;
  --shell:1200px;
  --gut:clamp(20px,4vw,56px);
  --d:"Source Serif 4",Georgia,"Times New Roman",serif;
  --b:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --my:"Noto Sans Myanmar","Padauk",var(--b);
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--b);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--d);font-weight:600;letter-spacing:-.016em;text-wrap:balance}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--pine);
  outline-offset:3px;
  border-radius:1px;
}
.cand :where(a):focus-visible,.foot :where(a):focus-visible{outline-color:var(--amber-lt)}

:lang(my){font-family:var(--my);line-height:1.95;letter-spacing:0}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
section[id],main[id]{scroll-margin-top:clamp(78px,11vh,104px)}
main:focus{outline:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--pine);color:var(--paper);
  padding:12px 20px;font-size:15px;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ============================ HEADER ============================ */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.hdr.is-stuck{box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(28,42,34,.5)}
.hdr__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);min-height:86px;padding-block:12px}

.mark{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.mark img{width:42px;height:auto;flex:none}
.mark__txt b{display:block;font-family:var(--d);font-size:21px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.mark__txt span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px;letter-spacing:.02em}

.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(16px,2vw,28px);list-style:none;margin:0;padding:0}
.nav a{
  position:relative;display:inline-block;padding-block:4px;
  font-size:14.5px;color:var(--ink-2);text-decoration:none;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:var(--pine)}
.nav a:hover::after{transform:scaleX(1)}

.cta{
  flex:none;border:1px solid var(--pine);color:var(--pine);text-decoration:none;
  padding:11px 20px;font-size:14px;font-weight:600;
  transition:background .18s ease,color .18s ease;
}
.cta:hover{background:var(--pine);color:var(--paper)}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;
  background:none;border:1px solid var(--line-3);cursor:pointer;
  padding:0;place-items:center;
}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);margin:4px auto;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ============================ LEAD ============================ */
.lead__in{
  display:grid;grid-template-columns:1.18fr .82fr;
  gap:clamp(28px,4.5vw,68px);align-items:center;
  padding-block:clamp(38px,5.5vw,80px);
}
h1{font-size:clamp(34px,4.9vw,58px);line-height:1.08;margin-bottom:22px}
.lead__text > p{font-size:18px;color:var(--ink-2);max-width:46ch}
.lead__sub{
  font-size:15px;color:var(--ink-3);max-width:52ch;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.lead__act{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.lead__fig{margin:0}
.lead__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line-2)}
figcaption{font-size:13px;color:var(--ink-3);padding-top:10px;font-style:italic;line-height:1.5}

/* ============================ BUTTONS / LINKS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 26px;font-size:15px;font-weight:600;text-decoration:none;
  border:1px solid transparent;text-align:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn--solid{background:var(--pine);color:var(--paper);border-color:var(--pine)}
.btn--solid:hover{background:var(--pine-deep);border-color:var(--pine-deep)}
.btn--line{border-color:var(--line-3);color:var(--ink);background:var(--paper-2)}
.btn--line:hover{border-color:var(--pine);color:var(--pine)}
.btn--gold{background:var(--amber-lt);color:#1B2E22;border-color:var(--amber-lt)}
.btn--gold:hover{background:#E8BC63;border-color:#E8BC63}
.btn--line-light{border-color:#4A6D59;color:var(--on-deep-3)}
.btn--line-light:hover{background:#1F4231;border-color:#6E8C79}
.btn--wide{width:100%;margin-top:22px}

.lnk{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:600;color:var(--pine);text-decoration:none;
  border-bottom:1px solid var(--line-3);padding-bottom:2px;
  transition:border-color .18s ease;
}
.lnk::after{content:"→";font-size:15px;transition:transform .2s ease}
.lnk:hover{border-bottom-color:var(--pine)}
.lnk:hover::after{transform:translateX(3px)}

/* ============================ RECORD + CONTENTS ============================ */
.rec{background:var(--paper-2);border-block:1px solid var(--line)}
.rec__grid{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0}
.rec__grid > div{padding:22px 26px;border-right:1px solid var(--line)}
.rec__grid > div:nth-child(3n+1){padding-left:0}
.rec__grid > div:nth-child(3n){border-right:0;padding-right:0}
.rec__grid > div:nth-child(n+4){border-top:1px solid var(--line)}
.rec dt{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.rec dd{
  margin:6px 0 0;font-family:var(--d);font-size:26px;font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;
}
.rec__acc{color:var(--amber)}
.rec__nm{font-size:21px}
.rec__sm{font-size:17px;letter-spacing:-.008em}

.idx{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;padding:16px 0 20px;border-top:1px solid var(--line)}
.idx__lbl{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.idx__list{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0;counter-reset:idx}
.idx__list li{counter-increment:idx}
.idx__list li::before{
  content:counter(idx,upper-roman) ".";
  font-family:var(--d);font-weight:700;font-size:12.5px;color:var(--amber-ink);
  margin-right:7px;letter-spacing:.04em;
}
.idx__list a{font-size:14.5px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.idx__list a:hover{color:var(--pine);border-bottom-color:var(--line-2)}

/* ============================ SECTION SCAFFOLD ============================ */
.sect{padding-block:clamp(44px,5.5vw,84px)}
.sect--field{background:var(--paper-2);border-block:1px solid var(--line)}
.sect__head{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(16px,2vw,26px);align-items:start;max-width:72ch}
.sect__n{
  grid-row:1 / span 2;
  font-family:var(--d);font-size:20px;font-weight:700;color:var(--amber);
  letter-spacing:.06em;line-height:1.5;padding-top:.2em;
}
.sect__n--light{color:var(--amber-lt)}
.sect__head :is(h1,h2){grid-column:2;font-size:clamp(27px,3.4vw,40px);line-height:1.14;margin-bottom:12px}
.sect__head p{grid-column:2;color:var(--ink-2);max-width:60ch}
.rule{height:2px;background:var(--pine);margin:clamp(20px,2.4vw,30px) 0 clamp(24px,3vw,40px);transform-origin:left}

/* ============================ I · DESTINATIONS ============================ */
.dest{display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:start}
.dest__main{background:var(--paper-2);border:1px solid var(--line);padding:clamp(22px,3vw,34px)}
.sect--field .dest__main{background:var(--paper)}
.dest__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.dest__top h3{font-size:clamp(24px,2.6vw,30px)}
.tag{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:5px 11px;white-space:nowrap}
.tag--fill{background:var(--pale);color:var(--amber-ink);border:1px solid #E4D6B7}
.prog{margin:14px 0 0}
.prog > div{display:grid;grid-template-columns:78px 1fr;gap:18px;padding:15px 0;border-top:1px solid var(--line)}
.prog dt{font-family:var(--d);font-size:19px;font-weight:700;color:var(--pine);letter-spacing:.01em}
.prog dd{margin:0;font-size:15.5px;color:var(--ink-2)}
.dest__note{font-size:15px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:16px;margin-bottom:20px;max-width:56ch}

.dest__side{display:grid;gap:clamp(22px,3vw,38px)}
.dest__gen{grid-column:1/-1;font-size:14.5px;color:var(--ink-3);padding-top:16px;
  border-top:1px solid var(--line);max-width:46ch}
.dest__side h3{font-size:22px;margin-bottom:2px}
.rows{list-style:none;margin:10px 0 0;padding:0}
.rows li{font-size:15.5px;color:var(--ink-2);padding:11px 0;border-top:1px solid var(--line)}
.rows--link li{padding:9px 0}
.rows--link a{
  color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line-3);padding-bottom:1px;
  transition:color .18s ease,border-color .18s ease;
}
.rows--link a:hover{color:var(--pine);border-bottom-color:var(--pine)}

/* ============================ II · SECTORS ============================ */
.roll{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(28px,4.5vw,72px)}
.roll li{
  display:grid;grid-template-columns:46px 1fr;align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--line);
}
.roll li:first-child,.roll li:nth-child(2){border-top:1px solid var(--line-2)}
.roll__n{font-family:var(--d);font-size:20px;font-weight:700;color:var(--amber);letter-spacing:.04em}
.roll__t{font-family:var(--d);font-size:20px;font-weight:600;letter-spacing:-.012em;transition:color .18s ease}
.roll li:hover .roll__t{color:var(--pine)}

/* ============================ III · THE SEQUENCE ============================
   Five stages read as measurements along one rule: a hairline spans the band
   and each stage hangs an amber tick from it. No cards, no arrows, and the
   numbering is roman like everything else enumerated on this page. */
.seq{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line-2);
}
.seq li{position:relative;padding:26px 20px 2px 0}
.seq li + li{padding-left:22px;border-left:1px solid var(--line)}
.seq li::before{
  content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;
  background:var(--amber);transition:transform .2s ease;
}
.seq li + li::before{left:22px}
.seq li:hover::before{transform:scale(1.5)}
.seq__n{
  display:block;font-family:var(--d);font-size:15px;font-weight:700;
  color:var(--amber-ink);letter-spacing:.07em;margin-bottom:9px;
}
.seq b{
  font-family:var(--d);font-size:19px;font-weight:600;display:block;
  margin-bottom:6px;letter-spacing:-.012em;
}
.seq p{font-size:14.5px;color:var(--ink-2);line-height:1.62}

/* One photograph and one note. The figure gets a fixed track at its native
   width — the brochure master is only ~330px and stretching it would show. */
.seq__notes{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(18px,2.6vw,34px);margin-top:clamp(28px,3.4vw,44px);
  align-items:start;
}
.seq__fig{margin:0}
.seq__fig img{width:100%;aspect-ratio:323/235;object-fit:cover;border:1px solid var(--line-2)}
.seq__note{
  font-size:15.5px;color:var(--ink-2);max-width:50ch;
  padding-left:20px;border-left:2px solid var(--line-2);
}
.seq__note--mark{border-left-color:var(--pine)}
.seq__note b{
  display:block;font-family:var(--d);font-size:17.5px;font-weight:600;
  color:var(--ink);letter-spacing:-.012em;margin-bottom:3px;
}

/* ============================ IV · CURRICULUM ============================ */
.curr{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(28px,4vw,64px);align-items:start}
.mods{list-style:none;margin:0;padding:0;counter-reset:m;border-top:1px solid var(--line-2)}
.mods li{counter-increment:m;position:relative;padding:19px 0 19px 54px;border-bottom:1px solid var(--line)}
.mods li::before{
  content:counter(m,upper-roman);
  position:absolute;left:0;top:21px;
  font-family:var(--d);font-size:16px;font-weight:700;color:var(--amber-ink);letter-spacing:.05em;
}
.mods b{font-family:var(--d);font-size:19px;font-weight:600;display:block;margin-bottom:4px;letter-spacing:-.01em}
.mods p{font-size:15.5px;color:var(--ink-2);line-height:1.68;max-width:56ch}
.curr__media{display:grid;gap:22px}
/* The brochure masters top out around 330px wide. Cap the figures there rather
   than stretching them to fill the column: a soft photograph costs this page
   more than a small one does. departure-terminal is a camera file and serves
   680px into the same slot, so it simply lands at 2x. */
.curr__media figure{margin:0;max-width:340px}
.curr__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-2)}

/* ============================ IV · THE AGENCY ============================ */
.agy{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.agy__dir{margin:0}
.agy__dir img{width:100%;aspect-ratio:5/6;object-fit:cover;border:1px solid var(--line-2);background:var(--pale)}
.agy__dir figcaption{padding-top:12px;font-style:normal;border-top:1px solid var(--line);margin-top:12px}
.agy__dir b{display:block;font-family:var(--d);font-size:18px;font-weight:600;color:var(--ink)}
.agy__dir span{display:block;font-size:13px;color:var(--ink-3);letter-spacing:.02em}
.agy__lede{font-size:17.5px;color:var(--ink-2);max-width:58ch;line-height:1.72}
.agy__lede::first-letter{
  float:left;font-family:var(--d);font-size:3.4em;line-height:.84;font-weight:600;
  color:var(--pine);padding:.06em .1em 0 0;
}
.agy__note{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:15.5px;color:var(--ink-2);max-width:56ch;
}
.agy__body h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-family:var(--b);margin:clamp(26px,3vw,38px) 0 0}
.svc{margin:12px 0 0}
.svc > div{padding:17px 0;border-top:1px solid var(--line)}
.svc > div:last-child{border-bottom:1px solid var(--line)}
.svc dt{font-family:var(--d);font-size:18.5px;font-weight:600;color:var(--pine);letter-spacing:-.01em}
.svc dd{margin:4px 0 0;font-size:15.5px;color:var(--ink-2);max-width:60ch}

/* ============================ V · PLATES ============================ */
.plate__wide{margin:0 0 clamp(20px,2.6vw,32px)}
.plate__wide img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 40%;border:1px solid var(--line-2)}
.plate__pair{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,2.6vw,32px)}
.plate__pair figure{margin:0}
.plate__pair img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line-2)}

/* ============================ VI · CANDIDATES ============================ */
.cand{background:var(--pine-deep);color:var(--on-deep)}
.cand__in{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,64px);padding-block:clamp(40px,5vw,72px);align-items:start}
.cand__body{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(16px,2vw,26px);align-items:start}
.cand__body h2{grid-column:2;color:#fff;font-size:clamp(25px,3vw,34px);margin-bottom:16px}
.cand__body p{grid-column:2;font-size:16px;color:var(--on-deep);max-width:56ch}
.cand__body p + p{margin-top:14px}
.cand__act{display:grid;gap:12px;align-content:start;padding-top:6px}
.cand__addr{font-size:14.5px;color:var(--on-deep-2);margin-top:8px}

/* ============================ VII · CONTACT ============================ */
.con{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.con__cols{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3vw,34px) clamp(24px,3vw,40px)}
.hrs{margin:10px 0 0}
.hrs > div{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.hrs dt{color:var(--ink-2)}
.hrs dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.con__block h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-family:var(--b)}
.con__block address{font-style:normal;font-size:16px;line-height:1.8;margin-top:10px}
.con__note{font-size:14.5px;color:var(--ink-3);margin-top:8px}
.con__note a{color:var(--pine);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--line-3);transition:border-color .18s ease}
.con__note a:hover{border-bottom-color:var(--pine)}
.con__brief{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--pine);padding:clamp(22px,3vw,34px)}
.sect--field .con__brief{background:var(--paper)}
.con__brief h3{font-family:var(--d);font-size:21px;font-weight:600;letter-spacing:-.012em;text-transform:none;color:var(--ink);margin-bottom:8px}
.con__brief > p{font-size:15px;color:var(--ink-2)}
.brief__list{list-style:none;margin:16px 0 0;padding:0;counter-reset:b}
.brief__list li{
  counter-increment:b;position:relative;padding:11px 0 11px 34px;
  border-top:1px solid var(--line);font-size:15px;color:var(--ink-2);
}
.brief__list li::before{
  content:counter(b,upper-roman);position:absolute;left:0;top:12px;
  font-family:var(--d);font-size:14px;font-weight:700;color:var(--amber-ink);letter-spacing:.05em;
}

/* ============================ FOOTER ============================ */
.foot{background:var(--pine-deep);color:var(--on-deep);padding-top:clamp(38px,4vw,60px)}
.foot__in{display:grid;grid-template-columns:1.25fr 1.4fr .8fr;gap:clamp(24px,4vw,56px);padding-bottom:clamp(30px,3.5vw,48px)}
.foot__brand img{width:44px;margin-bottom:14px;filter:saturate(.9)}
.foot__brand b{font-family:var(--d);font-size:19px;font-weight:600;color:#fff;display:block;margin-bottom:8px}
.foot__brand p{font-size:14.5px;line-height:1.7;max-width:42ch}
.foot__keys{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.foot__keys span{
  font-size:12px;font-weight:600;letter-spacing:.05em;
  border:1px solid var(--pine-line);padding:5px 11px;color:var(--on-deep-3);
  font-variant-numeric:tabular-nums;
}
.foot__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
.foot__near{font-size:13.5px;color:var(--on-deep-2);margin-top:8px;max-width:26ch}
.foot h2{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-2);margin-bottom:12px;font-family:var(--b)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{font-size:14.5px;line-height:1.9}
.foot address{font-style:normal;font-size:14.5px;line-height:1.8}
.foot a{color:var(--on-deep-3);text-decoration:none;font-variant-numeric:tabular-nums;border-bottom:1px solid transparent;transition:border-color .18s ease,color .18s ease}
.foot a:hover{color:#fff;border-bottom-color:var(--amber-lt)}
.foot__base{border-top:1px solid var(--pine-line);padding-block:16px;font-size:12.5px;color:var(--on-deep-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot__base p{font-variant-numeric:tabular-nums}

/* ============================ MOTION ============================
   Scroll-linked, CSS only. Where view() timelines are unsupported the
   content simply renders in its finished state — no JS, no flash, nothing
   to fail. Reduced motion opts out entirely. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{
      animation:gr-rise linear both;
      animation-timeline:view();
      animation-range:entry 8% entry 46%;
    }
    .rule{
      animation:gr-draw linear both;
      animation-timeline:view();
      animation-range:entry 12% entry 58%;
    }
  }
}
@keyframes gr-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gr-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .lead__in{grid-template-columns:1.1fr .9fr}
  .agy{grid-template-columns:250px 1fr}
}

@media (max-width:940px){
  .seq{grid-template-columns:1fr;border-top:0}
  .seq li{padding:20px 0 20px 28px;border-top:1px solid var(--line)}
  .seq li:first-child{border-top:1px solid var(--line-2)}
  .seq li + li{padding-left:28px;border-left:0}
  .seq li::before,.seq li + li::before{left:0;top:26px}
  .seq__notes{grid-template-columns:1fr;gap:20px}
}

@media (max-width:960px){
  .lead__in{grid-template-columns:1fr;gap:30px}
  .lead__fig{max-width:400px}
  .rec__grid{grid-template-columns:repeat(2,1fr)}
  .rec__grid > div{padding-inline:24px}
  .rec__grid > div:nth-child(2n){border-right:0;padding-right:0}
  .rec__grid > div:nth-child(2n+1){padding-left:0}
  .rec__grid > div:nth-child(n+3){border-top:1px solid var(--line)}
  .dest{grid-template-columns:1fr}
  .dest__side{grid-template-columns:repeat(2,1fr)}
  .curr{grid-template-columns:1fr}
  .curr__media{grid-template-columns:repeat(2,1fr)}
  .agy{grid-template-columns:1fr}
  .agy__dir{max-width:260px}
  .con{grid-template-columns:1fr}
  .cand__in{grid-template-columns:1fr;gap:26px}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}

@media (max-width:900px){
  .hdr__in{position:relative;gap:12px}
  .burger{display:grid}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper-2);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px -22px rgba(28,42,34,.6);
    display:none;margin:0;
  }
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:6px var(--gut) 14px}
  .nav li{border-bottom:1px solid var(--line)}
  .nav li:last-child{border-bottom:0}
  .nav a{display:block;padding:13px 0;font-size:16px;color:var(--ink)}
  .nav a::after{display:none}
  .cta{margin-left:auto;padding:10px 16px;font-size:13.5px}
}

@media (max-width:720px){
  .roll{grid-template-columns:1fr}
  .roll li:nth-child(2){border-top:0}
  .plate__pair{grid-template-columns:1fr}
  .dest__side{grid-template-columns:1fr}
  .con__cols{grid-template-columns:1fr}
  .curr__media{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr;gap:26px}
}

@media (max-width:520px){
  .brk{display:none}
  .foot__nav{grid-template-columns:1fr;gap:24px}
}

@media (max-width:620px){
  body{font-size:16px}
  .rec__grid{grid-template-columns:1fr}
  .rec__grid > div{border-right:0;border-top:0;padding:16px 0}
  .rec__grid > div + div{padding-left:0;border-top:1px solid var(--line)}
  .lead__act .btn,.cand__act .btn{width:100%}
  .prog > div{grid-template-columns:1fr;gap:4px}
  .sect__head,.cand__body{grid-template-columns:1fr}
  .sect__n{grid-row:auto;padding-top:0;margin-bottom:2px;font-size:19px}
  .sect__head :is(h1,h2),.sect__head p,.cand__body h2,.cand__body p{grid-column:1}
  .agy__lede{font-size:16.5px}
}

@media (max-width:420px){
  .mark__txt b{font-size:18px}
  .mark img{width:36px}
  .cta{padding:9px 12px;font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}