/* ============================================================ TOKENS === */
:root{
  --forest:#123c22;      --forest-2:#1b5730;   --green:#2f7d43;
  --green-lt:#4d9c5f;    --moss:#e7f0e7;       --clay:#b6402f;
  /* the hero wash, kept in sync with the ramp above */
  --wash-1:rgba(77,156,95,.5);  --wash-2:rgba(182,64,47,.3);
  --wash-3:rgba(232,217,189,.22);
  --deep:#0c2a18;        --deep-2:#0d2d19;     --deep-foot:#0b2415;
  --clay-lt:#d4593f;     --sand:#e8d9bd;
  --cream:#faf7f0;       --paper:#ffffff;
  --ink:#16201a;         --ink-2:#415044;      --ink-3:#7d8a80;
  --line:#e2ded2;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --shell:min(1180px,92vw);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--clay);color:#fff}

/* ======================================================= SMOOTH SCROLL == */
#viewport{position:fixed;inset:0;overflow:hidden;will-change:transform}
#scroll{will-change:transform}
body.no-smooth #viewport{position:static;overflow:visible}
body.no-smooth #scroll{transform:none!important}

/* ========================================================== PROGRESS === */
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--green),var(--clay));transition:width .1s linear}

/* ============================================================== CURSOR = */
#glow{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;
  z-index:1;opacity:0;transition:opacity .5s;mix-blend-mode:multiply;
  background:radial-gradient(circle,rgba(47,125,67,.13),transparent 62%)}
@media(hover:hover) and (min-width:900px){#glow{opacity:1}}

/* ================================================================ NAV == */
header{position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:transform .45s var(--ease),background .35s,box-shadow .35s,padding .35s}
/* Over the hero the header has no background of its own, so the mark and the
   links were sitting straight on the photograph's own contrast — and the
   brand, coloured for a cream header, was forest green on a forest green
   hero. A scrim gives every header this site will ever have something to sit
   on, whatever is behind it; it fades out once the solid bar takes over. */
header::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,24,13,.62),rgba(5,24,13,.16) 62%,rgba(5,24,13,0));
  transition:opacity .35s var(--ease)}
header.solid::before{opacity:0}
/* Light type while the header floats; the .solid rules below put it back. */
header:not(.solid) .brand b{color:#fff}
header:not(.solid) .brand span{color:rgba(255,255,255,.74)}
header:not(.solid) nav a{color:#fff}
header .bar{width:var(--shell);margin:0 auto;display:flex;align-items:center;
  position:relative;z-index:1;
  justify-content:space-between;padding:18px 0;transition:padding .35s var(--ease)}
header.solid{background:rgba(250,247,240,.86);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--line)}
header.solid .bar{padding:11px 0}
header.hide{transform:translateY(-102%)}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{width:46px;height:46px;border-radius:11px;object-fit:cover;
  box-shadow:0 3px 14px rgba(18,60,34,.16);transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-6deg) scale(1.07)}
.brand b{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.02em;
  color:var(--forest);display:block;line-height:1.05}
.brand span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
nav{display:flex;align-items:center;gap:30px}
nav a{font-size:14px;font-weight:600;color:rgba(255,255,255,.88);text-decoration:none;
  position:relative;padding:4px 0;transition:color .3s var(--ease)}
/* :not(.btn) so the rule never reaches a button in the nav. The Submit
   Abstract pill is an <a class="btn btn-solid"> inside <nav>, and once the
   header went solid this repainted its label forest green — on a forest
   green pill. The button vanished on scroll. Excluding buttons here means
   any future one (Register, Buy tickets) is safe without its own patch. */
header.solid nav a:not(.btn){color:var(--forest)}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--clay);transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease)}
nav a:hover{color:#fff}
header.solid nav a:not(.btn):hover{color:var(--clay)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-size:14.5px;font-weight:600;padding:13px 26px;border-radius:100px;
  text-decoration:none;border:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn-solid{background:var(--forest);color:#fff;box-shadow:0 6px 22px rgba(18,60,34,.24)}
.btn-solid:hover{box-shadow:0 12px 34px rgba(18,60,34,.32)}
.btn-clay{background:var(--clay);color:#fff;box-shadow:0 6px 22px rgba(182,64,47,.26)}
.btn-ghost{background:transparent;color:var(--forest);border:1.5px solid rgba(18,60,34,.24)}
.btn-ghost:hover{border-color:var(--forest);background:rgba(18,60,34,.05)}
.btn-light{background:#fff;color:var(--forest)}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:8px}
.burger i{display:block;width:22px;height:2px;background:var(--forest);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s}
.burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================== HERO === */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;
  overflow:hidden;padding:150px 0 90px;
  background:radial-gradient(120% 90% at 8% 8%,var(--forest-2) 0%,var(--forest) 46%,var(--deep) 100%)}
.mesh{position:absolute;inset:-25%;opacity:.5;pointer-events:none;
  background:radial-gradient(closest-side,var(--wash-1),transparent),
             radial-gradient(closest-side,var(--wash-2),transparent),
             radial-gradient(closest-side,var(--wash-3),transparent);
  background-size:52% 52%,46% 46%,40% 40%;background-repeat:no-repeat;
  background-position:12% 18%,84% 26%,52% 88%;
  animation:drift 26s ease-in-out infinite alternate;filter:blur(28px)}
@keyframes drift{
  50%{background-position:26% 42%,64% 12%,34% 68%}
  100%{background-position:8% 30%,92% 40%,60% 82%}}
.grain{position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.55) .5px,transparent .5px);
  background-size:4px 4px}
#leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubble{position:absolute;bottom:0;pointer-events:none;opacity:0;border-radius:50%;
  background:rgba(255,255,255,.42);animation:bubbleUp linear infinite}
@keyframes bubbleUp{
  0%{transform:translateY(0) translateX(0) scale(.7);opacity:0}
  10%{opacity:1}
  50%{transform:translateY(-45vh) translateX(14px) scale(1)}
  90%{opacity:1}
  100%{transform:translateY(-100vh) translateX(-10px) scale(.8);opacity:0}}
.hero-in{width:var(--shell);margin:0 auto;position:relative;z-index:3;
  display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 17px;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.92);font-size:12.5px;font-weight:500;letter-spacing:.02em;
  backdrop-filter:blur(8px);margin-bottom:26px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--sand);
  animation:beat 2.4s ease infinite}
@keyframes beat{50%{transform:scale(1.6);opacity:.45}}
h1.big{font-family:var(--serif);font-size:clamp(2.5rem,5.6vw,4.35rem);font-weight:600;
  line-height:1.04;letter-spacing:-.03em;color:#fff;margin-bottom:26px}
h1.big em{font-style:normal;color:var(--sand);position:relative;white-space:nowrap}
.hero p.lede{font-size:17.5px;line-height:1.78;color:rgba(255,255,255,.76);
  max-width:36em;margin-bottom:36px;font-weight:300}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* word-by-word reveal
 *
 * The mask has to reach below the baseline. Each word is clipped to its own
 * box, and a descender — the tail of a g, p or y — hangs below that box. With
 * a line-height as tight as the headline's, they were being shaved flat:
 * "published research" arrived with no tail on either the p or the g.
 *
 * Padding drops the clipping edge; the matching negative margin takes the
 * space straight back, so nothing under the headline moves. */
.word{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.16em;margin-bottom:-.16em}
.word>span{display:inline-block;transform:translateY(105%);
  transition:transform .95s var(--ease)}
.ready .word>span{transform:translateY(0)}

/* stat cards */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:26px 22px;backdrop-filter:blur(9px);
  opacity:0;transform:translateY(26px);transition:all .9s var(--ease)}
.ready .stat{opacity:1;transform:none}
.ready .stat:nth-child(1){transition-delay:.75s}
.ready .stat:nth-child(2){transition-delay:.87s;margin-top:22px}
.ready .stat:nth-child(3){transition-delay:.99s;margin-top:-22px}
.ready .stat:nth-child(4){transition-delay:1.11s}
.stat b{font-family:var(--serif);font-size:2.5rem;font-weight:600;color:var(--sand);
  display:block;line-height:1;letter-spacing:-.02em}
.stat span{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5;
  display:block;margin-top:9px}
.scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.42);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue::after{content:'';width:1px;height:36px;
  background:linear-gradient(rgba(255,255,255,.5),transparent);
  animation:cue 2.1s ease infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================== MARQUEE === */
.strip{background:var(--forest);padding:15px 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08)}
.strip-in{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite}
.strip:hover .strip-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.strip span{display:flex;align-items:center;gap:11px;white-space:nowrap;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:500}
.strip span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--clay-lt)}

/* ========================================================== SECTIONS === */
section{padding:118px 0;position:relative}
.shell{width:var(--shell);margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.eyebrow::before{content:'';width:26px;height:1.5px;background:var(--clay)}
h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.05rem);font-weight:600;
  line-height:1.1;letter-spacing:-.028em;margin-bottom:20px}
h2 em{font-style:normal;color:var(--green)}
.lede2{font-size:17px;color:var(--ink-2);line-height:1.8;max-width:60ch}

/* reveal */
[data-rise]{opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rise].in{opacity:1;transform:none}

/* ============================================================= ABOUT === */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:76px;align-items:center}
.frame{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(150deg,var(--forest),var(--green));
  display:flex;align-items:flex-end;padding:34px}
.frame::before{content:'';position:absolute;inset:0;opacity:.14;
  background:repeating-linear-gradient(48deg,#fff 0 1px,transparent 1px 22px)}
.frame img{position:absolute;top:34px;left:34px;width:74px;height:74px;
  border-radius:16px;object-fit:cover;box-shadow:0 10px 34px rgba(0,0,0,.28)}
.frame-t{position:relative;color:#fff}
.frame-t b{font-family:var(--serif);font-size:1.6rem;font-weight:600;display:block;
  line-height:1.2;margin-bottom:8px}
.frame-t span{font-size:13.5px;color:rgba(255,255,255,.72)}
.chip{position:absolute;right:-14px;top:16%;background:var(--cream);border-radius:16px;
  padding:16px 20px;box-shadow:0 14px 42px rgba(18,60,34,.18);text-align:center;
  border:1px solid var(--line)}
.chip b{font-family:var(--serif);font-size:1.55rem;color:var(--forest);display:block;line-height:1}
.chip span{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.ticks{list-style:none;margin:30px 0 34px;display:grid;gap:15px}
.ticks li{display:flex;gap:14px;font-size:15.5px;color:var(--ink-2);line-height:1.65}
.tick{flex:0 0 23px;height:23px;border-radius:50%;background:var(--moss);
  display:grid;place-items:center;margin-top:2px}
.tick::after{content:'';width:9px;height:5px;border-left:2px solid var(--green);
  border-bottom:2px solid var(--green);transform:rotate(-45deg) translate(1px,-1px)}

/* ============================================================ PILLARS == */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:36px 32px;
  position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--clay));transform:scaleX(0);
  transform-origin:left;transition:transform .55s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(18,60,34,.11)}
.card:hover::after{transform:scaleX(1)}
.ico{width:54px;height:54px;border-radius:15px;background:var(--moss);display:grid;
  place-items:center;margin-bottom:22px;transition:transform .5s var(--ease)}
.card:hover .ico{transform:rotate(-8deg) scale(1.08)}
.ico svg{width:25px;height:25px;stroke:var(--forest);fill:none;stroke-width:1.7}
.card h3{font-family:var(--serif);font-size:1.28rem;font-weight:600;margin-bottom:11px;
  letter-spacing:-.015em}
.card p{font-size:14.5px;color:var(--ink-2);line-height:1.75}

/* =========================================================== PROGRAMS == */
.programs{background:var(--forest);color:#fff;overflow:hidden}
.programs h2{color:#fff}.programs h2 em{color:var(--sand)}
.programs .eyebrow{color:var(--sand)}
.programs .lede2{color:rgba(255,255,255,.68)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px}
.pcard{border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:34px;
  position:relative;overflow:hidden;transition:background .45s,border-color .45s,transform .5s var(--ease)}
.pcard::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(70% 100% at 0% 0%,rgba(255,255,255,.12),transparent)}
.pcard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.3)}
.pcard:hover::before{opacity:1}
.pnum{position:absolute;right:24px;top:18px;font-family:var(--serif);font-size:3.1rem;
  color:rgba(255,255,255,.07);font-weight:700;line-height:1}
.ptag{display:inline-block;padding:5px 14px;border-radius:100px;font-size:11px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(212,89,63,.24);color:#f0b7a8;margin-bottom:16px}
.pcard h3{font-family:var(--serif);font-size:1.24rem;font-weight:600;margin-bottom:10px;
  position:relative}
.pcard p{font-size:14.5px;color:rgba(255,255,255,.65);line-height:1.75;position:relative}

/* ============================================================ EVENTS === */
.ehead{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px}
.egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.ecard{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  display:flex;flex-direction:column}
.ecard:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(18,60,34,.12)}
.etop{background:linear-gradient(145deg,var(--forest),var(--green));padding:28px;
  min-height:156px;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden}
.etop::before{content:'';position:absolute;inset:0;opacity:.13;
  background:repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 16px)}
.ecard:nth-child(2) .etop{background:linear-gradient(145deg,#5b2f1f,var(--clay))}
.ecard:nth-child(3) .etop{background:linear-gradient(145deg,#1a3d4d,#2c6b7d)}
.edate{position:absolute;top:20px;right:20px;background:var(--cream);border-radius:13px;
  padding:9px 13px;text-align:center;min-width:56px}
.edate b{font-family:var(--serif);font-size:1.5rem;color:var(--forest);display:block;line-height:1}
.edate span{font-size:10px;font-weight:600;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.1em}
.ekind{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:8px;position:relative}
.etop h3{font-family:var(--serif);font-size:1.22rem;color:#fff;font-weight:600;
  position:relative;line-height:1.25}
.ebody{padding:24px;flex:1;display:flex;flex-direction:column}
.emeta{font-size:12.5px;color:var(--ink-3);margin-bottom:12px;display:flex;
  gap:14px;flex-wrap:wrap}
.ebody p{font-size:14.5px;color:var(--ink-2);line-height:1.7;flex:1}
.elink{display:inline-flex;align-items:center;gap:7px;color:var(--clay);font-size:13.5px;
  font-weight:600;text-decoration:none;margin-top:18px}
.elink .arw{transition:transform .35s var(--ease)}
.elink:hover .arw{transform:translateX(4px)}

/* ============================================================== TEAM === */
.team{background:var(--paper)}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}
.tcard{background:var(--cream);border:1px solid var(--line);border-radius:22px;
  padding:32px 22px;text-align:center;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tcard:hover{transform:translateY(-8px);box-shadow:0 24px 54px rgba(18,60,34,.1)}
.tcard::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--forest),var(--clay));transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--ease)}
.tcard:hover::after{transform:scaleX(1)}
.av{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;
  place-items:center;font-family:var(--serif);font-size:1.7rem;font-weight:600;color:#fff;
  background:linear-gradient(145deg,var(--forest),var(--green));position:relative;
  transition:transform .5s var(--ease)}
.tcard:hover .av{transform:scale(1.07)}
.av::after{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--clay);opacity:0;transition:opacity .4s}
.tcard:hover .av::after{opacity:1}
.tcard h4{font-family:var(--serif);font-size:1.08rem;font-weight:600;margin-bottom:9px}
.role{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;background:var(--green);color:#fff;padding:4px 13px;
  border-radius:100px;margin-bottom:11px}
.tcard:first-child .role{background:var(--clay)}
.tcard p{font-size:12.5px;color:var(--ink-3);line-height:1.55}

/* ============================================================== JOIN === */
.join{background:radial-gradient(110% 80% at 50% 0%,var(--forest-2),var(--forest) 60%,var(--deep));
  color:#fff;text-align:center;overflow:hidden}
.join h2{color:#fff;max-width:16ch;margin:0 auto 20px}
.join h2 em{color:var(--sand)}
.join .eyebrow{color:var(--sand);justify-content:center}
.join .lede2{color:rgba(255,255,255,.72);margin:0 auto 20px;text-align:center}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:46px 0 40px;
  text-align:left}
.cat{border:1px solid rgba(255,255,255,.16);border-radius:17px;padding:24px 22px;
  cursor:pointer;transition:all .4s var(--ease);background:rgba(255,255,255,.03)}
.cat:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34);
  transform:translateY(-5px)}
.cat b{font-family:var(--serif);font-size:1.1rem;font-weight:600;display:block;margin-bottom:7px}
.cat span{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6}

/* ============================================================ FOOTER === */
footer{background:var(--deep-foot);color:rgba(255,255,255,.58);padding:76px 0 28px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px}
.fbrand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.fbrand img{width:44px;height:44px;border-radius:11px;object-fit:cover}
.fbrand b{font-family:var(--serif);font-size:19px;color:#fff;font-weight:700}
footer p{font-size:14px;line-height:1.75;max-width:32ch}
footer h5{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:17px}
footer .fcol a{display:block;font-size:14px;color:rgba(255,255,255,.52);
  text-decoration:none;margin-bottom:11px;transition:color .3s,transform .3s var(--ease)}
footer .fcol a:hover{color:var(--sand);transform:translateX(3px)}
.fbot{border-top:1px solid rgba(255,255,255,.09);padding-top:26px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}
.socials{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.socials a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.07);
  display:grid;place-items:center;text-decoration:none;color:rgba(255,255,255,.62);
  font-size:13px;font-weight:700;transition:all .35s var(--ease)}
.socials a svg{display:block;width:18px;height:18px}
.socials a:hover{background:var(--clay);color:#fff;transform:translateY(-3px)}

/* ============================================================= MODAL === */
.veil{position:fixed;inset:0;z-index:3000;background:rgba(11,36,21,.72);
  backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:40px 20px}
.veil.on{display:flex;animation:fade .35s ease}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--cream);border-radius:24px;width:min(720px,100%);
  position:relative;animation:pop .5s var(--ease);overflow:hidden}
@keyframes pop{from{opacity:0;transform:translateY(26px) scale(.98)}}
.sheet-h{background:linear-gradient(140deg,var(--forest),var(--green));
  padding:30px 34px;color:#fff;position:relative}
.sheet-h h3{font-family:var(--serif);font-size:1.6rem;font-weight:600;margin-bottom:6px}
.sheet-h p{font-size:13.5px;color:rgba(255,255,255,.72)}
.x{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.14);border:none;color:#fff;font-size:19px;cursor:pointer;
  transition:background .3s,transform .3s}
.x:hover{background:rgba(255,255,255,.26);transform:rotate(90deg)}
.steps{display:flex;gap:6px;padding:18px 34px 0}
.steps i{height:3px;flex:1;background:var(--line);border-radius:2px;overflow:hidden;
  position:relative}
.steps i.on::after{content:'';position:absolute;inset:0;background:var(--green);
  animation:grow .5s var(--ease)}
@keyframes grow{from{transform:scaleX(0);transform-origin:left}}
form{padding:26px 34px 34px}
.step{display:none}.step.on{display:block;animation:slidein .45s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}}
.f{margin-bottom:17px}
.f label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);
  margin-bottom:7px;letter-spacing:.02em}
.f input,.f select,.f textarea{width:100%;padding:12px 15px;border:1.5px solid var(--line);
  border-radius:11px;font-family:var(--sans);font-size:14.5px;background:var(--paper);
  color:var(--ink);transition:border-color .3s,box-shadow .3s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(47,125,67,.13)}
.f textarea{resize:vertical;min-height:110px;line-height:1.65}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.pickers{display:grid;gap:11px;margin-bottom:8px}
.pick{border:1.5px solid var(--line);border-radius:13px;padding:15px 17px;cursor:pointer;
  display:flex;align-items:center;gap:13px;transition:all .3s var(--ease);background:var(--paper)}
.pick:hover{border-color:var(--green-lt)}
.pick.on{border-color:var(--green);background:var(--moss)}
.pick .dot{width:19px;height:19px;border-radius:50%;border:2px solid var(--line);
  flex-shrink:0;position:relative;transition:border-color .3s}
.pick.on .dot{border-color:var(--green)}
.pick.on .dot::after{content:'';position:absolute;inset:3px;border-radius:50%;
  background:var(--green)}
.pick b{font-size:14.5px;font-weight:600;display:block}
.pick span{font-size:12.5px;color:var(--ink-3)}
.drop{border:2px dashed var(--line);border-radius:14px;padding:28px;text-align:center;
  cursor:pointer;transition:all .3s;background:var(--paper)}
.drop:hover,.drop.over{border-color:var(--green);background:var(--moss)}
.drop b{display:block;font-size:14.5px;margin-bottom:5px;color:var(--forest)}
.drop span{font-size:12.5px;color:var(--ink-3)}
.nav2{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.msg{padding:13px 16px;border-radius:11px;font-size:13.5px;margin-bottom:16px;display:none}
.msg.err{display:block;background:#fbe9e6;color:#8d2b1c;border:1px solid #f0c4bb}
.msg.ok{display:block;background:var(--moss);color:var(--forest);border:1px solid #bcd9c0}
.done{text-align:center;padding:44px 34px}
.done .tickbig{width:70px;height:70px;border-radius:50%;background:var(--moss);
  display:grid;place-items:center;margin:0 auto 22px;animation:pop .5s var(--ease)}
.done .tickbig::after{content:'';width:22px;height:12px;border-left:3px solid var(--green);
  border-bottom:3px solid var(--green);transform:rotate(-45deg) translate(2px,-3px)}
.done h3{font-family:var(--serif);font-size:1.6rem;margin-bottom:10px}
.done p{font-size:14.5px;color:var(--ink-2);line-height:1.75;margin-bottom:8px}
.refbox{display:inline-block;font-family:ui-monospace,monospace;font-size:16px;
  background:var(--forest);color:#fff;padding:11px 20px;border-radius:11px;margin:14px 0 22px;
  letter-spacing:.06em}

/* ======================================================== RESPONSIVE === */
@media(max-width:1000px){
  .hero-in,.about-grid{grid-template-columns:1fr;gap:48px}
  .hero .stats{max-width:440px}
  .cards3,.egrid{grid-template-columns:1fr 1fr}
  .tgrid{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:36px}
  .cats{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  nav{position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);background:var(--cream);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    padding:40px;transform:translateX(100%);transition:transform .55s var(--ease);
    box-shadow:-14px 0 46px rgba(0,0,0,.16)}
  nav.open{transform:none}
  nav a{font-size:19px;font-family:var(--serif)}
  .burger{display:flex;z-index:1001}
  section{padding:78px 0}
  .cards3,.egrid,.pgrid,.tgrid,.cats,.fgrid,.row2{grid-template-columns:1fr}
  .chip{right:10px}
  .stats{grid-template-columns:1fr 1fr}
  .ready .stat{margin-top:0!important}
  h1.big{font-size:clamp(2.1rem,8vw,2.9rem)}
  .fbot{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-rise]{opacity:1;transform:none}
  .word>span{transform:none}
  .stat{opacity:1;transform:none}
}

/* ==========================================================================
   MULTI-PAGE ADDITIONS
   Page heroes, team profiles, FAQ accordions, featured events.
   ========================================================================== */

/* ------------------------------------------------------- PAGE HERO ----- */
.phero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 100% at 20% 0%,var(--forest-2),var(--forest) 55%,var(--deep-2));
  padding:190px 0 108px;
}
.phero .mesh{inset:-40% -12%;opacity:.62;animation-duration:32s}
.phero-in{position:relative;z-index:2;max-width:900px}
.phero .eyebrow{color:var(--sand)}
.phero h1{
  font-family:var(--serif);font-weight:600;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(2.5rem,6vw,4.6rem);color:#fff;margin:20px 0 22px;
}
.phero h1 em{font-style:normal;color:var(--sand);position:relative}
/* The clay underline under the page-hero heading was removed to match
   the home hero. The em keeps its sand colour. */
.phero .lede{color:rgba(255,255,255,.76);max-width:60ch;font-size:1.06rem}
.pcrumb{
  display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px;
}
.pcrumb a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .3s}
.pcrumb a:hover{color:#fff}

/* intro paragraph that sits under a page hero */
.pintro{background:var(--cream);padding:76px 0 0}
.pintro p{
  font-family:var(--serif);font-size:clamp(1.1rem,2.1vw,1.45rem);line-height:1.62;
  color:var(--ink-2);max-width:58ch;
}

/* ------------------------------------------------------- NAV CURRENT --- */
#nav a.cur{color:var(--sand)}
#nav a.cur::after{transform:scaleX(1)}
#hdr.solid #nav a.cur{color:var(--clay)}

/* --------------------------------------------------------- VALUE GRID -- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
.pillar{
  background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:34px 30px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.pillar:hover{box-shadow:0 26px 60px rgba(18,60,34,.1)}
.pillar .pnum{
  font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--sand);
  line-height:1;margin-bottom:16px;
}
.pillar h3{font-family:var(--serif);font-size:1.28rem;font-weight:600;margin-bottom:11px}
.pillar p{font-size:14px;color:var(--ink-3);line-height:1.72}

/* ----------------------------------------------------------- POINTS ---- */
.points{list-style:none;display:grid;gap:15px;margin-top:8px}
.points li{
  display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--ink-2);
  line-height:1.6;
}
.points .tick{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--green-soft,#e7f1e6);
  color:var(--green);display:grid;place-items:center;font-size:13px;font-weight:700;
  margin-top:1px;
}

/* mini statistics used on the About page */
.ministats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.mini{
  background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:26px 22px;
}
.mini b{
  display:block;font-family:var(--serif);font-size:2.1rem;font-weight:600;
  color:var(--forest);letter-spacing:-.03em;line-height:1;margin-bottom:9px;
}
.mini span{font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* --------------------------------------------------- FEATURED EVENT ---- */
.feat{
  position:relative;overflow:hidden;border-radius:26px;padding:46px 44px;color:#fff;
  background:linear-gradient(135deg,var(--forest),var(--forest-2) 60%,#0d2d19);
  box-shadow:0 30px 70px rgba(18,60,34,.22);
}
.feat::before{
  content:'';position:absolute;inset:0;opacity:.13;
  background:repeating-linear-gradient(45deg,transparent 0 12px,#fff 12px 13px);
}
.feat>*{position:relative;z-index:2}
.feat-tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;background:var(--clay);padding:5px 13px;border-radius:100px;
  margin-bottom:18px;
}
.feat h3{
  font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.14;margin-bottom:16px;max-width:20ch;
}
.feat-meta{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:18px}
.feat-meta span{
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sand);font-weight:600;
}
.feat p{color:rgba(255,255,255,.75);max-width:62ch;line-height:1.75;margin-bottom:28px}

.none{
  text-align:center;padding:60px 20px;color:var(--ink-3);font-size:15px;
  border:1px dashed var(--line);border-radius:20px;
}

/* ------------------------------------------------------- TEAM GROUPS --- */
.tgroup{margin-bottom:64px}
.gname{
  display:flex;align-items:center;gap:20px;font-family:var(--serif);font-size:1.45rem;
  font-weight:600;letter-spacing:-.02em;margin-bottom:34px;
}
.gname i{flex:1;height:1px;background:var(--line)}
.tcard[data-member]{cursor:pointer}
.av.has-photo{background:var(--line);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.batch{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:9px;
}
.tmore{
  display:inline-flex;align-items:center;gap:6px;margin-top:15px;font-size:12.5px;
  font-weight:600;color:var(--clay);opacity:0;transform:translateY(5px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.tcard:hover .tmore{opacity:1;transform:none}
@media(hover:none){.tmore{opacity:1;transform:none}}

/* member profile dialog */
#memberVeil{
  position:fixed;inset:0;z-index:120;background:rgba(11,26,15,.6);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
#memberVeil.on{opacity:1;pointer-events:auto}
.msheet{
  background:var(--cream);border-radius:26px;max-width:560px;width:100%;
  padding:40px 38px;position:relative;box-shadow:0 40px 90px rgba(0,0,0,.35);
  transform:translateY(24px) scale(.97);transition:transform .5s var(--ease);
  max-height:88vh;overflow-y:auto;
}
#memberVeil.on .msheet{transform:none}
.mhead{display:flex;gap:22px;align-items:center;margin-bottom:24px}
.av.big{width:104px;height:104px;font-size:2.1rem;margin:0;flex:none}
.mhead h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin-bottom:10px}
.mhead .dept{font-size:13px;color:var(--ink-3);margin-top:8px}
.mbio{font-size:14.5px;line-height:1.78;color:var(--ink-2);margin-bottom:22px}
.mlinks{display:flex;gap:9px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.mlinks a{
  font-size:12.5px;font-weight:600;padding:8px 15px;border:1px solid var(--line);
  border-radius:100px;text-decoration:none;color:var(--ink-2);transition:all .3s var(--ease);
}
.mlinks a:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}

/* ------------------------------------------------------------- FAQ ----- */
.faqs{display:grid;gap:12px;margin-top:20px;max-width:800px}
.faq{background:var(--cream);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq-q{
  width:100%;text-align:left;background:none;border:0;padding:21px 24px;cursor:pointer;
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-q i{
  flex:none;width:20px;height:20px;position:relative;transition:transform .45s var(--ease);
}
.faq-q i::before,.faq-q i::after{
  content:'';position:absolute;background:var(--green);border-radius:2px;
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.faq-q i::before{width:13px;height:1.8px}
.faq-q i::after{width:1.8px;height:13px;transition:opacity .35s}
.faq.open .faq-q i{transform:rotate(180deg)}
.faq.open .faq-q i::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq.open .faq-a{max-height:400px}
.faq-a p{padding:0 24px 22px;font-size:14px;line-height:1.78;color:var(--ink-3)}

.closed-note{
  background:#fdf3dd;border:1px solid #eddcb3;color:#7d5710;padding:16px 20px;
  border-radius:14px;font-size:14px;margin-bottom:30px;
}

/* ---------------------------------------------------------- RESPONSIVE - */
@media(max-width:960px){
  .vgrid{grid-template-columns:1fr}
  .ministats{grid-template-columns:repeat(2,1fr)}
  .phero{padding:150px 0 80px}
  .feat{padding:34px 28px}
}
@media(max-width:620px){
  .ministats{grid-template-columns:1fr}
  .mhead{flex-direction:column;text-align:center}
  .av.big{margin:0 auto}
  .msheet{padding:30px 24px}
}


/* Compact event card used on the home page teaser row. */
.ecard.mini .ebody{padding-bottom:22px}
.ecard.mini .emeta{margin-bottom:4px}

/* =========================================================================
   MOBILE
   =========================================================================
   Most students submit from a phone, so the phone is the primary case, not
   the fallback. Everything below fixes something that actually stops a
   submission rather than something that merely looks cramped.
   ====================================================================== */

@media(max-width:820px){

  /* ---------------------------------------------------------------------
     The single worst mobile bug on any form.

     Safari on iOS zooms the whole page in whenever a focused input has a
     font-size below 16px — and it does not zoom back out afterwards. On a
     three-step form that means the student taps Full name, the page jumps
     to 130%, and every field after that is half off-screen until they
     pinch out by hand. 14.5px looks better on a desktop; 16px is the
     difference between a form that works on a phone and one that does not.
     --------------------------------------------------------------------- */
  .f input,.f select,.f textarea{font-size:16px;padding:13px 15px}

  /* A select at 16px still needs room for the native chevron. */
  .f select{padding-right:38px}

  /* ---------------------------------------------------------------------
     Full-screen sheet rather than a centred dialog.

     The old modal was centred with 40px of page padding and relied on the
     veil scrolling. On a phone, the moment the keyboard opens the visible
     area halves, the sheet keeps its full height, and the Submit button
     ends up somewhere below the keyboard with no way to reach it. A sheet
     pinned to the viewport with its own scroll cannot do that.

     100dvh, not 100vh: vh on mobile is measured against the browser with
     its toolbars hidden, so a 100vh element is always taller than what you
     can actually see.
     --------------------------------------------------------------------- */
  .veil{padding:0;align-items:stretch;
    /* Fallback first for older Android WebViews that ignore dvh. */
    height:100vh;height:100dvh;
    /* Dropped on small screens: blurring a full-screen layer costs real
       frames on the mid-range Androids most students are holding. */
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(11,36,21,.85)}
  .sheet{border-radius:0;width:100%;min-height:100%;
    display:flex;flex-direction:column;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    /* Below the notch, and clear of the iOS home indicator. */
    padding-bottom:env(safe-area-inset-bottom)}
  .sheet-h{padding-top:calc(26px + env(safe-area-inset-top))}

  form{padding:22px 20px 34px}
  .steps{padding:16px 20px 0}

  /* The header was eating a third of a 780px screen before the student
     saw a single field. It is a title, not a hero — shrink it and give
     the room back to the form. */
  .sheet-h{padding:calc(20px + env(safe-area-inset-top)) 20px 20px}
  .sheet-h h3{font-size:1.25rem;margin-bottom:3px}
  .sheet-h p{font-size:12.5px}

  /* 34px was a comfortable target with a mouse. A finger needs 44. */
  .x{width:44px;height:44px;top:calc(14px + env(safe-area-inset-top));right:14px;font-size:22px}

  /* Category cards are the first thing tapped — make them unmistakably
     tappable rather than merely clickable. */
  .pick{padding:17px;min-height:60px}

  /* Back / Continue must never collide or shrink below a finger. */
  .nav2{gap:12px}
  .nav2 .btn{min-height:48px;padding:13px 20px;font-size:15px}

  .drop{padding:24px 18px;min-height:104px;display:flex;flex-direction:column;
    align-items:center;justify-content:center}
  .drop b{font-size:15.5px}

  .btn{min-height:46px}
}

/* Very small handsets — a 360px Android is still the commonest screen in
   Pakistan, and two buttons plus their padding stop fitting on one line. */
@media(max-width:380px){
  form{padding:20px 16px 30px}
  .sheet-h{padding-left:16px;padding-right:16px}
  .steps{padding:14px 16px 0}
  .nav2{flex-direction:column-reverse;align-items:stretch}
  .nav2 .btn{justify-content:center;width:100%}
  .nav2 span:empty{display:none}
}

/* -------------------------------------------------------------------------
   Upload progress.

   A 10 MB abstract over Pakistani mobile data can take well over a minute.
   The button used to say "Submitting…" and then nothing moved, so students
   assumed it had frozen and either closed the tab or tapped again. A bar
   that visibly advances is the whole fix.
   ---------------------------------------------------------------------- */
.uprog{height:4px;background:var(--line);border-radius:3px;overflow:hidden;
  margin:14px 0 0;display:none}
.uprog.on{display:block}
.uprog i{display:block;height:100%;width:0;background:var(--green);
  border-radius:3px;transition:width .25s linear}
.uprog-txt{font-size:12.5px;color:var(--ink-3);margin-top:7px;display:none}
.uprog-txt.on{display:block}

/* Nothing on a phone should be able to push the page sideways. A single
   over-wide element turns every vertical scroll into a fight. */
html,body{overflow-x:hidden}

/* ==================================================================
   NRO — NRO additions. Everything below is what gets appended to
   site.css. Nothing above this line is changed.
   ================================================================== */
:root{ --nro-maroon:#470505; --nro-maroon-2:#63120f; --nro-green:#076901; }

/* ---- the event band on the home page ---- */
.nro-band{background:radial-gradient(120% 90% at 18% 0%,var(--nro-maroon-2),var(--nro-maroon) 58%,#2c0303);
  color:#fff;overflow:hidden;position:relative}
.nro-band::after{content:'';position:absolute;right:-6%;top:-30%;width:52%;height:160%;
  background:radial-gradient(ellipse closest-side at 50% 50%,rgba(7,105,1,.30),transparent 62%);pointer-events:none}
.nro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;position:relative;z-index:2}
.nro-mark{background:#fff;border-radius:26px;padding:34px 30px;
  box-shadow:0 30px 70px rgba(0,0,0,.34)}
.nro-mark img{width:100%}
/* The same card on a cream section rather than the maroon band. */
.nro-mark--light{box-shadow:0 26px 60px rgba(18,60,34,.12);border:1px solid var(--line)}
.nro-date{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;
  display:flex;align-items:baseline;gap:10px}
.nro-date b{font-family:var(--serif);font-size:1.5rem;color:var(--nro-maroon);line-height:1}
.nro-date span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.nro-band .eyebrow{color:#f0c9c2}
.nro-band .eyebrow::before{background:var(--sand)}
.nro-band h2{color:#fff;margin-bottom:18px}
.nro-band h2 em{font-style:normal;color:var(--sand)}
.nro-band p{color:rgba(255,255,255,.76);font-size:16.5px;line-height:1.85;max-width:62ch}
.nro-tag{font-family:var(--serif);font-size:1.12rem;color:#fff;margin-top:22px;
  padding-left:18px;border-left:2px solid var(--sand)}
.nro-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.nro-acts span{font-size:12.5px;padding:7px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:rgba(255,255,255,.86)}
.nro-band .hero-cta{margin-top:32px}
.btn-nro{background:var(--sand);color:var(--nro-maroon);box-shadow:0 6px 22px rgba(0,0,0,.28)}
.btn-nro:hover{box-shadow:0 12px 34px rgba(0,0,0,.4)}

/* ---- leadership block ---- */
.lead{background:linear-gradient(180deg,#0f3520,var(--deep));color:#fff;position:relative;overflow:hidden}
.lead::before{content:'';position:absolute;left:50%;top:-58%;width:130%;height:110%;transform:translateX(-50%);
  border-radius:50%;background:rgba(255,255,255,.03)}
.lead .shell{position:relative;z-index:2}
.lead h2{color:#fff}
.lead h2 em{font-style:normal;color:var(--sand)}
.lead .eyebrow{color:var(--sand)}
.lead .lede2{color:rgba(255,255,255,.7)}
.lgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:46px}
.lcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:10px 10px 14px;text-align:center;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),background .4s,border-color .4s}
.lcard:hover{transform:translateY(-7px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
/* Fixed-height plates so a two-line role or name never shunts the photo
   out of line with its neighbours. */
.lrole{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--sand);color:var(--nro-maroon);border-radius:9px;padding:6px;margin-bottom:10px;
  min-height:38px;display:grid;place-items:center;line-height:1.35}
.lphoto{border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#0b2415}
.lphoto img{width:100%;height:100%;object-fit:cover}
.lname{font-family:var(--serif);font-size:13.5px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.34);border-radius:9px;padding:8px 6px;margin-top:10px;line-height:1.3;
  min-height:50px;display:grid;place-items:center}
.lsub{font-size:11px;color:rgba(255,255,255,.62);margin-top:8px;line-height:1.45}

/* ---- registration band ---- */
.reg{background:var(--cream);text-align:center}
.reg-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:26px;padding:52px 44px;box-shadow:0 26px 60px rgba(18,60,34,.07)}
.reg-card h2{margin-bottom:14px}
.reg-card h2 em{font-style:normal;color:var(--clay)}
.reg-fee{display:inline-flex;align-items:baseline;gap:9px;margin:26px 0 8px}
.reg-fee b{font-family:var(--serif);font-size:2.6rem;color:var(--forest);line-height:1}
.reg-fee span{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.reg-note{font-size:13px;color:var(--ink-3);margin-bottom:28px}
.reg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;text-align:left}
.reg-step{border:1px solid var(--line);border-radius:15px;padding:16px 15px;background:var(--cream)}
.reg-step b{display:block;font-family:var(--serif);font-size:12px;color:var(--clay);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.reg-step span{font-size:12.5px;color:var(--ink-2);line-height:1.55}

/* ---- registration modal ---- */
/* The dialog toggles rows with the hidden attribute; without this the
   display rules below would win and a hidden row would still show. */
.nro-band [hidden],.reg [hidden],.mask [hidden],.modal [hidden]{display:none!important}
/* Where to pay, printed above the receipt upload. */
.nro-account{background:var(--moss);border:1px solid rgba(18,60,34,.12);border-radius:13px;
  padding:14px 16px;margin:0 0 17px}
.nro-account b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--forest);margin-bottom:7px}
.nro-account pre{font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.7;
  white-space:pre-wrap;margin:0}
.mask{position:fixed;inset:0;background:rgba(9,24,15,.62);backdrop-filter:blur(5px);
  z-index:3000;display:none;padding:26px;overflow-y:auto}
.mask.open{display:block}
.modal{width:min(560px,100%);margin:28px auto;background:var(--paper);border-radius:24px;
  box-shadow:0 40px 90px rgba(0,0,0,.4);overflow:hidden;animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.mhead{background:var(--nro-maroon);color:#fff;padding:26px 30px;position:relative}
.mhead b{font-family:var(--serif);font-size:1.32rem;font-weight:600;display:block}
.mhead span{font-size:13px;color:rgba(255,255,255,.7)}
.mclose{position:absolute;right:20px;top:20px;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;font-size:17px;line-height:1}
.mbody{padding:28px 30px 32px}
.fld{margin-bottom:17px}
.fld label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.fld input,.fld select{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:11px;font-family:var(--sans);font-size:14.5px;color:var(--ink);background:var(--cream)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--green);background:#fff}
/* The registration dialog now asks for department and year, and a <select>
   was inheriting nothing — it has to be dressed like the inputs beside it. */
.mask .fld select{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:11px;font-family:var(--sans);font-size:14.5px;color:var(--ink);
  background:var(--cream);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%,calc(100% - 14px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.mask .fld select:focus{outline:none;border-color:var(--green);background-color:#fff}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.promo-row{display:flex;gap:9px}
.promo-row input{flex:1}
.promo-btn{padding:12px 18px;border-radius:11px;border:1.5px solid var(--forest);
  background:var(--forest);color:#fff;font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer}
.promo-msg{font-size:12.5px;margin-top:7px;display:none}
.promo-msg.ok{display:block;color:var(--green)}
.promo-msg.bad{display:block;color:var(--clay)}
.drop{border:1.5px dashed var(--line);border-radius:13px;padding:22px;text-align:center;
  background:var(--cream);cursor:pointer;transition:border-color .3s,background .3s}
.drop:hover{border-color:var(--green);background:#fff}
.drop b{display:block;font-size:13.5px;color:var(--forest);margin-bottom:4px}
.drop span{font-size:12px;color:var(--ink-3)}
.drop.has{border-color:var(--green);background:rgba(47,125,67,.06)}
.total{background:var(--cream);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin:4px 0 20px}
.total div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-2);padding:4px 0}
.total div.off{color:var(--green)}
.total div.sum{border-top:1px solid var(--line);margin-top:8px;padding-top:11px;
  font-family:var(--serif);font-size:1.22rem;color:var(--forest);font-weight:600}
.msubmit{width:100%;padding:15px;border:none;border-radius:13px;background:var(--forest);
  color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;cursor:pointer;
  box-shadow:0 8px 24px rgba(18,60,34,.26)}
.msubmit:hover{box-shadow:0 14px 34px rgba(18,60,34,.34)}
.mfine{font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:14px;line-height:1.6}
.done{padding:46px 34px;text-align:center}
.done .tick{width:62px;height:62px;border-radius:50%;background:rgba(47,125,67,.12);
  color:var(--green);display:grid;place-items:center;margin:0 auto 20px;font-size:29px}
.done b{font-family:var(--serif);font-size:1.4rem;display:block;margin-bottom:10px}
.done p{font-size:14px;color:var(--ink-2);line-height:1.75;max-width:40ch;margin:0 auto}
.refno{display:inline-block;margin-top:20px;font-family:var(--serif);font-size:1.28rem;
  color:var(--forest);background:var(--cream);border:1px solid var(--line);
  border-radius:12px;padding:12px 22px;letter-spacing:.04em}

@media(max-width:980px){
  .nro-grid{grid-template-columns:1fr;gap:38px}
  .lgrid{grid-template-columns:repeat(3,1fr)}
  .reg-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .lgrid{grid-template-columns:repeat(2,1fr)}
  .reg-card{padding:36px 22px}
  .frow{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   Olympiad mode repaints the red the site already had.

   This site was never only green. It has a second colour — --clay,
   #b6402f — and it is everywhere: the dash before every eyebrow, the
   progress bar, the current nav link, the Details links on event cards,
   the first role pill, the ring on a hovered avatar, the hover rule on
   every card, the tags on the programme cards. Eighteen places.

   The band was arriving in the Olympiad's maroon while all eighteen of
   those stayed orange-red, so the page read as green plus orange with a
   maroon slab dropped into it.

   So while the Olympiad is running, those two tokens move to a red that
   belongs with the logo. Nothing else has to change: every rule that
   already used them follows, on every page, and switching Olympiad mode
   off restores the original clay everywhere in one go.
   ------------------------------------------------------------------ */
body.nro-on{
  --clay:#7a1f16;
  --clay-lt:#9c3122;
  /* the red lobe of the hero's mesh, so the top of the page already
     carries the colour the band below it is about to use */
  --wash-2:rgba(99,18,15,.34);
}

/* On the dark green sections the accent has to come back up to stay
   readable — #7a1f16 on forest green is not a contrast, it is a smudge. */
body.nro-on .ptag{background:rgba(122,31,22,.42);color:#f2b3a6}

/* The second event card was already #5b2f1f, a brown-red one shade off
   the Olympiad's. In Olympiad mode it becomes the Olympiad's. */
body.nro-on .ecard:nth-child(2) .etop{background:linear-gradient(145deg,var(--nro-maroon),var(--clay))}
body.nro-on .ecard:nth-child(2) .edate b{color:var(--nro-maroon)}

/* A maroon breath in the interior-page header, beside the green wash. */
body.nro-on .phero::after{content:'';position:absolute;right:-10%;top:-38%;width:60%;height:150%;
  background:radial-gradient(ellipse closest-side at 50% 50%,rgba(71,5,5,.44),transparent 64%);
  pointer-events:none;z-index:1}

/* ------------------------------------------------------------------
   The closing block, in Olympiad mode.

   #join is the short version on the home page; #categories is the real
   picker on the Submit page, where the six cards are the whole point and
   are left exactly as they are. Only the home one is stripped back to a
   heading and a button, which is what earns it the maroon: two maroon
   grounds, one opening the page and one closing it, with the society's
   green holding everything in between.
   ------------------------------------------------------------------ */
body.nro-on .join#join{
  background:radial-gradient(110% 80% at 50% 0%,var(--nro-maroon-2),var(--nro-maroon) 58%,#2c0303);
}
body.nro-on .join#join .cats{display:none}
/* The cards carried the space between the paragraph and the button. */
body.nro-on .join#join .lede2{margin-bottom:42px}
/* ------------------------------------------------------------------
   The header button, in Olympiad mode.

   The colour goes on the button rather than on its lettering. Maroon
   type on the forest-green pill measures 1.3:1 — legible on a good
   monitor, thin everywhere else, and this is the site's main call to
   action. Filling the button puts the same colour somewhere it can
   carry weight, and keeps the label at 12.9:1 on top of it.
   ------------------------------------------------------------------ */
body.nro-on #hdr .btn-solid{
  background:var(--nro-maroon-2);
  box-shadow:0 6px 22px rgba(71,5,5,.34);
}
body.nro-on #hdr .btn-solid:hover{box-shadow:0 12px 34px rgba(71,5,5,.46)}

/* The Sign in link beside the header button, and the one under the
   register button on the NRO page. Both only exist in Olympiad mode. */
#nav .nav-signin{font-weight:600}
header.solid #nav .nav-signin{color:var(--forest)}
header:not(.solid) #nav .nav-signin{color:#fff}
.reg-signin{margin-top:18px;font-size:13.5px;color:var(--ink-3)}
.reg-signin a{color:var(--clay);font-weight:600;text-decoration:none}
.reg-signin a:hover{text-decoration:underline}
.mask .msignin{margin:0 30px 26px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3);text-align:center}
.mask .msignin a{color:var(--clay);font-weight:600;text-decoration:none;margin-left:4px}
.mask .msignin a:hover{text-decoration:underline}

/* ------------------------------------------------------------------
   No stripe above the Olympiad band.

   Elementor wraps every widget in a container carrying its own padding.
   The band is a full-bleed section with 118px of its own, so that
   wrapper shows through as a band of page background between the
   marquee and the maroon. Collapse it, on the band's widget only.
   ------------------------------------------------------------------ */
.elementor-widget-nrcsf_nro,
.elementor-widget-nrcsf_nro > .elementor-widget-container{margin:0;padding:0}
.e-con:has(> .e-con-inner > .elementor-widget-nrcsf_nro),
.e-con:has(> .elementor-widget-nrcsf_nro),
.e-con-inner:has(> .elementor-widget-nrcsf_nro),
.elementor-widget-wrap:has(> .elementor-widget-nrcsf_nro){
  padding-block:0;margin-block:0;row-gap:0;
}
/* The band draws its own top edge, so nothing above it needs to leave room. */
body.nro-on .strip{margin-bottom:0}
body.nro-on .nro-band{margin-top:0}

/* The eyebrow's dash is the accent, and the accent is now this section's
   own ground — it would vanish. Sand, as it is on the Olympiad band. */
body.nro-on .join#join .eyebrow::before{background:var(--sand)}

/* Every page closes on the accent, forest into red. */
body.nro-on footer{position:relative}
body.nro-on footer::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--forest),var(--clay))}

/* ------------------------------------------------------------------
   The photograph behind the hero.

   Drawn only when Appearance -> Customize -> Hero photograph says so;
   the class and the three custom properties both come from there, so
   nothing below needs editing to change the picture or its strength.

   The order is the whole point. The photograph goes at the bottom, then
   a scrim over it, and only then the hero's own mesh, grain and bubbles,
   with the text above all of it. Put the picture on top instead and the
   contrast of every letter starts depending on what is behind it.
   ------------------------------------------------------------------ */
body.has-hero-photo .hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--hero-shot);
  background-size:cover;
  background-position:center var(--hero-shot-y,46%);
  opacity:var(--hero-shot-op,.32);
  /* Desaturated so warm stone does not fight the green, and lifted a
     little because everything above it is about to darken it again. */
  filter:saturate(.42) contrast(1.06) brightness(1.08);
  transition:opacity .45s var(--ease);
  /* A very slow push, so the building is never quite still behind the type. */
  animation:heroShotDrift 46s ease-in-out infinite alternate;
}
@keyframes heroShotDrift{
  from{transform:scale(1.06)}
  to{transform:scale(1.13) translate3d(-1.2%,-1%,0)}
}
/* The scrim: heaviest on the left under the headline, lightest on the
   right over the counters, which is where the picture can afford to show. */
body.has-hero-photo .hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(8,30,17,.80) 0%, rgba(8,30,17,.52) 42%,
    rgba(8,30,17,.20) 74%, rgba(8,30,17,.10) 100%);
}
/* The hero's own layers, back on top of the photograph in their usual order. */
body.has-hero-photo .hero .mesh,
body.has-hero-photo .hero .grain{z-index:2}
body.has-hero-photo .hero #leaves{z-index:3}
body.has-hero-photo .hero .hero-in,
body.has-hero-photo .hero .scrollcue{z-index:4}

@media (prefers-reduced-motion:reduce){
  body.has-hero-photo .hero::before{animation:none;transform:scale(1.06)}
}

/* ==================================================================
   Green and maroon meeting inside one block.

   The home page opens and closes in maroon. Left alone, the inner
   pages would keep ending in flat forest green, so the two colours
   would only ever alternate between sections and never meet. These
   blend them within a single block instead.
   ================================================================== */

/* The inner-page CTA: About, Programs, Events, Team. Forest at the top
   left, where it meets the page above it, travelling into the Olympiad's
   maroon at the bottom right. */
body.nro-on .join#cta{
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(27,87,48,.85), transparent 62%),
    linear-gradient(126deg, var(--forest) 0%, #1a3319 30%, #43140d 68%, var(--nro-maroon) 100%);
}
/* The dash before the eyebrow is the accent, and the accent is now part
   of this section's own ground — sand keeps it visible, as on the band. */
body.nro-on .join#cta .eyebrow::before{background:var(--sand)}

/* The leadership block stays the society's green. The blend was tried
   there and pulled back out: the maroon logo card already sits directly
   above it, so a second maroon straight underneath was one too many. Its
   eyebrow dash keeps the accent, exactly as the Programmes section does
   on the same green. */

/* The page hero already carries a maroon glow on the right. On the NRO
   page it leans further in, so the page opens in the event's colour. */
body.nro-on.nrcsf-nro .phero::after{
  background:radial-gradient(ellipse closest-side at 50% 50%, rgba(71,5,5,.62), transparent 66%);
}

/* Insurance: the header button is never the "current page" link, but if it
   ever were, the current-link colour would repaint its label onto its own
   solid ground and the button would disappear. */
#hdr.solid #nav a.cur.btn-solid{color:#fff}

/* =====================================================================
   Showcase: event slideshow, developer section, footer credit
   ================================================================== */

/* ---- the slideshow, just above the footer ---- */
.show{background:radial-gradient(120% 90% at 50% -10%,var(--forest-2),var(--deep) 62%,var(--deep-foot));color:#fff;padding:96px 0 104px}
.show-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:44px}
.show-head .eyebrow{color:var(--sand);justify-content:center}
.show-head h2{color:#fff;margin:0}
.show-head h2 em{color:var(--sand)}
.show-stage{position:relative;aspect-ratio:16/8.6;max-height:640px;border-radius:26px;overflow:hidden;
  background:#08200f;box-shadow:0 34px 80px rgba(0,0,0,.45);outline:none;isolation:isolate}
.show-stage:focus-visible{box-shadow:0 0 0 3px var(--sand),0 34px 80px rgba(0,0,0,.45)}
.show-track{position:absolute;inset:0}
.show-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s var(--ease);pointer-events:none}
.show-slide.is-on{opacity:1;pointer-events:auto;z-index:1}
.show-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 9s linear}
.show-slide.is-on img{transform:scale(1.12)}
.show-slide.is-on.from-left img{animation:show-drift-l 9s linear forwards}
.show-slide.is-on.from-right img{animation:show-drift-r 9s linear forwards}
@keyframes show-drift-l{from{transform:scale(1.12) translateX(1.5%)}to{transform:scale(1.04) translateX(-1.5%)}}
@keyframes show-drift-r{from{transform:scale(1.12) translateX(-1.5%)}to{transform:scale(1.04) translateX(1.5%)}}
.show-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,20,11,.82) 0%,rgba(6,20,11,.35) 34%,transparent 62%);pointer-events:none}
.show-slide figcaption{position:absolute;left:clamp(18px,4vw,44px);right:clamp(18px,4vw,44px);bottom:clamp(20px,4vw,42px);z-index:2;
  display:flex;flex-direction:column;gap:8px;max-width:60ch;transform:translateY(14px);opacity:0;transition:opacity .8s var(--ease) .25s,transform .8s var(--ease) .25s}
.show-slide.is-on figcaption{opacity:1;transform:none}
.show-slide figcaption b{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2.05rem);font-weight:600;line-height:1.15;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.show-slide figcaption span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--sand);letter-spacing:.02em}
.show-slide figcaption span svg{flex:none;opacity:.85}
.show-bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.14);z-index:3}
.show-bar i{display:block;height:100%;background:var(--sand);transform-origin:left;transform:scaleX(0)}
.show-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(8,32,15,.42);backdrop-filter:blur(8px);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;
  transition:background .25s,transform .25s,opacity .3s;opacity:0}
.show-stage:hover .show-btn,.show-stage:focus-within .show-btn{opacity:1}
.show-btn:hover{background:var(--clay);border-color:var(--clay)}
.show-prev{left:18px}.show-next{right:18px}
.show-count{position:absolute;top:18px;right:20px;z-index:3;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.75);
  background:rgba(8,32,15,.42);backdrop-filter:blur(8px);padding:6px 12px;border-radius:100px}
.show-count b{color:#fff;font-weight:600}
.show-dots{position:absolute;right:clamp(18px,4vw,44px);bottom:clamp(20px,4vw,42px);z-index:3;display:flex;gap:6px;max-width:40%;flex-wrap:wrap;justify-content:flex-end}
.show-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.38);cursor:pointer;padding:0;transition:all .3s}
.show-dots button.on{width:26px;border-radius:4px;background:var(--sand)}
@media(max-width:760px){
  .show{padding:70px 0 76px}
  .show-stage{aspect-ratio:4/3.4;border-radius:18px}
  .show-btn{opacity:1;width:38px;height:38px;font-size:15px}
  .show-prev{left:10px}.show-next{right:10px}
  .show-dots{display:none}
  .show-slide figcaption b{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){
  .show-slide img,.show-slide.is-on img{transform:none;animation:none;transition:none}
}

/* ---- about the developer, end of the Team page ---- */
.dev{background:var(--cream);border-top:1px solid var(--line)}
.dev-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:76px;align-items:center}
.dev-photo{position:relative;aspect-ratio:4/5;border-radius:26px;overflow:visible;max-width:420px;justify-self:center;width:100%}
.dev-photo::before{content:'';position:absolute;inset:0;border-radius:26px;transform:translate(-16px,16px);
  border:1.5px solid var(--clay);opacity:.55;z-index:0;transition:transform .6s var(--ease)}
.dev-photo:hover::before{transform:translate(-10px,10px)}
.dev-photo img,.dev-photo span{position:relative;z-index:1;width:100%;height:100%;border-radius:26px;display:grid;place-items:center;
  object-fit:cover;box-shadow:0 30px 60px rgba(18,60,34,.16)}
.dev-photo span{background:radial-gradient(110% 80% at 30% 0%,var(--forest-2),var(--forest) 60%,var(--deep));color:var(--sand);
  font-family:var(--serif);font-size:clamp(4rem,9vw,6.5rem);font-weight:600;letter-spacing:.02em}
.dev-body h2{margin:0 0 6px}
.dev-title{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:18px}
.dev-body .lede2{margin-bottom:18px}
.dev-bio p{font-size:15.5px;line-height:1.85;color:var(--ink-2);max-width:62ch;margin-bottom:14px}
.dev-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.dev-links .btn{padding:11px 18px;font-size:13.5px}
@media(max-width:900px){
  .dev-grid{grid-template-columns:1fr;gap:44px}
  .dev-photo{max-width:320px;justify-self:start}
}

/* ---- footer credit ---- */
.fbot .fdev{flex-basis:100%;text-align:center;padding-top:12px;margin-top:4px;border-top:1px dashed rgba(255,255,255,.08);color:rgba(255,255,255,.42)}
.fbot .fdev a{color:var(--sand);text-decoration:none;font-weight:600}
.fbot .fdev a:hover{text-decoration:underline}
.fbot .fdev i{font-style:normal;margin:0 8px;opacity:.5}
.fbot .fdev b{color:rgba(255,255,255,.7)}

/* =====================================================================
   Team cards, second cut: a big portrait, the details underneath
   ================================================================== */
.tcard{padding:0;display:flex;flex-direction:column}
.tcard > .av{width:100%;height:auto;aspect-ratio:4/4.5;border-radius:0;margin:0;font-size:3.2rem;letter-spacing:.04em;
  background:linear-gradient(150deg,var(--forest-2),var(--forest) 55%,var(--deep));color:var(--sand);flex:none}
.tcard > .av::after{display:none}
.tcard:hover > .av{transform:none}
.tcard > .av.has-photo{background:var(--line)}
.tcard > .av img{border-radius:0;object-position:50% 18%;transition:transform 1s var(--ease)}
.tcard:hover > .av img{transform:scale(1.05)}
.tcard .tbody{padding:22px 20px 26px;display:flex;flex-direction:column;align-items:center;flex:1}
.tcard .tbody h4{font-size:1.14rem;margin-bottom:10px}
.tcard .tbody p{max-width:26ch}
.tcard .tmore{margin-top:auto;padding-top:14px}
@media(max-width:960px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tgrid{grid-template-columns:1fr;gap:18px}.tcard > .av{aspect-ratio:4/4.2}}

/* footer credit, larger */
.fbot .fdev{font-size:15px;padding-top:16px;margin-top:8px}
.fbot .fdev a{font-size:15.5px}

/* =====================================================================
   Events: chosen colours, pictures, and the two application pop-ups
   ================================================================== */
.ecard .etop.tone-green{background:linear-gradient(145deg,var(--forest),var(--green))}
.ecard .etop.tone-maroon{background:linear-gradient(145deg,#4a1a12,var(--clay))}
.ecard .etop.tone-teal{background:linear-gradient(145deg,#1a3d4d,#2c6b7d)}
.ecard .etop.tone-navy{background:linear-gradient(145deg,#15213f,#2d4a80)}
.ecard .etop.tone-gold{background:linear-gradient(145deg,#6b4a12,#b8862b)}
.ecard .etop.tone-plum{background:linear-gradient(145deg,#3d1a3f,#7a3b7e)}
.ecard .etop.has-img{background-size:cover;background-position:center;min-height:210px}
.ecard .etop.has-img::before{background:linear-gradient(to top,rgba(6,20,11,.86) 0%,rgba(6,20,11,.45) 45%,rgba(6,20,11,.12) 100%);opacity:1}
body.nro-on .ecard:nth-child(2) .etop{background:none}
body.nro-on .ecard .etop.tone-maroon{background:linear-gradient(145deg,var(--nro-maroon),var(--clay))}
.feat.tone-maroon{background:radial-gradient(120% 90% at 18% 0%,#7a2a1c,#4a1a12 58%,#2c0303)}
.feat.tone-teal{background:radial-gradient(120% 90% at 18% 0%,#2c6b7d,#1a3d4d 58%,#0e2430)}
.feat.tone-navy{background:radial-gradient(120% 90% at 18% 0%,#2d4a80,#15213f 58%,#0b1226)}
.feat.tone-gold{background:radial-gradient(120% 90% at 18% 0%,#b8862b,#6b4a12 58%,#3a2708)}
.feat.tone-plum{background:radial-gradient(120% 90% at 18% 0%,#7a3b7e,#3d1a3f 58%,#220d24)}
.feat.has-img{background-size:cover;background-position:center;position:relative;isolation:isolate}
.feat.has-img::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,20,11,.92) 0%,rgba(6,20,11,.82) 55%,rgba(6,20,11,.62) 100%);z-index:-1;border-radius:inherit}
.feat.has-img::before{display:none}

/* the framed About picture */
.frame.has-photo{background-size:cover;background-position:center}
.frame.has-photo::before{background:linear-gradient(to top,rgba(6,20,11,.82) 0%,rgba(6,20,11,.25) 50%,rgba(6,20,11,.05) 100%);opacity:1}
.frame.has-photo img{background:#fff;padding:6px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* application forms */
.appform{position:relative}
.appform .f select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23415044' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.appform .drop.has{border-style:solid;border-color:var(--green);background:var(--moss)}
.done .tickbig{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;background:var(--moss);position:relative}
.done .tickbig::after{content:'';position:absolute;left:22px;top:18px;width:14px;height:24px;border-right:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(45deg)}
.done h3{font-family:var(--serif);font-size:1.5rem;margin-bottom:10px}
.done p{color:var(--ink-2);max-width:44ch;margin:0 auto}
@media(max-width:620px){.appform .row2{grid-template-columns:1fr}}

/* NRO pricing windows on the registration card */
.reg-windows{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px auto 6px;max-width:720px;text-align:left}
.reg-win{border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper);transition:transform .4s var(--ease)}
.reg-win.is-on{border-color:var(--forest);background:var(--moss);box-shadow:0 0 0 3px rgba(18,60,34,.08)}
.reg-win.is-past{opacity:.5}
.reg-win b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:600;color:var(--ink)}
.reg-win b i{font-style:normal;white-space:nowrap;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);font-weight:600}
.reg-win small{display:block;font-size:12.5px;color:var(--ink-3);margin:4px 0 10px}
.reg-win strong{font-family:var(--serif);font-size:1.5rem;color:var(--forest);font-weight:600}
.reg-win.is-on strong{color:var(--forest)}
body.nro-on .reg-win.is-on{border-color:var(--nro-maroon-2);background:rgba(99,18,15,.06)}
body.nro-on .reg-win.is-on strong{color:var(--nro-maroon-2)}
@media(max-width:640px){.reg-windows{grid-template-columns:1fr}}

/* =====================================================================
   NRO Highlights — the home band and the page
   ================================================================== */
.hl-band{background:radial-gradient(120% 90% at 82% 0%,var(--forest-2),var(--deep) 60%,var(--deep-foot));color:#fff;position:relative;overflow:hidden}
.hl-band::after{content:'';position:absolute;left:-8%;bottom:-40%;width:50%;height:170%;background:radial-gradient(closest-side,rgba(232,217,189,.12),transparent);pointer-events:none}
.hl-band-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;position:relative;z-index:2}
.hl-band .eyebrow{color:var(--sand)}
.hl-band h2{color:#fff}
.hl-band h2 em{color:var(--sand)}
.hl-band .lede2{color:rgba(255,255,255,.72)}
.hl-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hl-meta.light{color:rgba(255,255,255,.7)}
.hl-meta .hl-status{color:var(--sand);border:1px solid rgba(232,217,189,.4);border-radius:100px;padding:3px 10px}
.hl-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hl-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 20px}
.hl-stat b{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:600;color:var(--sand);line-height:1}
.hl-stat span{display:block;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.66)}
@media(max-width:900px){.hl-band-grid{grid-template-columns:1fr;gap:34px}}

.hlp-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hlp-mark{max-width:360px;justify-self:end;width:100%}
.hlp-intro{max-width:70ch;margin:0 auto 46px;text-align:center}
.hlp-numbers .eyebrow{justify-content:center;display:flex}
.hlp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.hlp-stat{background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:30px 24px;text-align:center}
.hlp-stat b{display:block;font-family:var(--serif);font-size:2.8rem;font-weight:600;color:var(--forest);line-height:1}
.hlp-stat span{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-3)}
.hlp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.hlp-wins{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.hlp-win{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:24px 24px 26px;position:relative;overflow:hidden}
.hlp-win::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--forest),var(--clay))}
.hlp-win-cat{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:10px}
.hlp-win b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink);line-height:1.3}
.hlp-win span{display:block;margin-top:6px;font-size:13px;color:var(--ink-3)}
.hlp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.hlp-pic{display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--line)}
.hlp-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.hlp-pic:hover img{transform:scale(1.06)}
.hlp-pic:nth-child(5n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.hlp-soon{background:var(--cream)}
@media(max-width:960px){.hlp-hero-grid{grid-template-columns:1fr}.hlp-mark{display:none}.hlp-stats,.hlp-cards,.hlp-wins{grid-template-columns:1fr 1fr}.hlp-grid{grid-template-columns:1fr 1fr}.hlp-pic:nth-child(5n+1){grid-column:span 2;grid-row:auto;aspect-ratio:16/9}}
@media(max-width:560px){.hlp-stats,.hlp-cards,.hlp-wins{grid-template-columns:1fr}.hl-stats{grid-template-columns:1fr 1fr}}

/* =====================================================================
   Registration marquee — the thin bar above the header on the home page
   ================================================================== */
.rbar{background:var(--nro-maroon-2,#63120f);color:#fff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;position:relative;z-index:60;border-bottom:1px solid rgba(255,255,255,.08)}
.rbar-track{display:flex;width:max-content;animation:rbar 38s linear infinite;will-change:transform}
.rbar:hover .rbar-track{animation-play-state:paused}
.rbar-item{display:inline-flex;align-items:center;gap:14px;padding:9px 34px 9px 0;white-space:nowrap}
.rbar-item i{width:6px;height:6px;border-radius:50%;background:var(--sand);display:inline-block;flex:none}
.rbar-item b{font-weight:700;color:var(--sand)}
.rbar-item a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.rbar-item a:hover{border-color:#fff}
@keyframes rbar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rbar-track{animation:none}}

/* =====================================================================
   Newsletter — the ring-bound flipbook
   ================================================================== */
.nlp{background:radial-gradient(120% 90% at 50% -10%,#1b3a2a,var(--deep) 55%,var(--deep-foot));color:#fff;padding:60px 0 90px}
.nl-months{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.nl-months button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78);border-radius:100px;padding:9px 18px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:all .3s}
.nl-months button:hover{background:rgba(255,255,255,.14);color:#fff}
.nl-months button.on{background:var(--sand);color:var(--forest);border-color:var(--sand)}
.nl-months button[disabled]{opacity:.35;cursor:default}
.nl-months button small{display:block;font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.nl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1180px;margin:0 auto 22px;padding:0 4px}
.nl-title{display:flex;flex-direction:column;gap:2px}
.nl-title b{font-family:var(--serif);font-size:1.35rem;font-weight:600}
.nl-title span{font-size:12.5px;color:rgba(255,255,255,.6)}
.nl-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nl-btn{height:40px;min-width:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .25s;text-decoration:none}
.nl-btn:hover{background:rgba(255,255,255,.16)}
.nl-btn.solid{background:var(--sand);color:var(--forest);border-color:var(--sand)}
.nl-btn.solid:hover{background:#fff}
.nl-btn[disabled]{opacity:.35;cursor:default}
.nl-count{font-size:13px;color:rgba(255,255,255,.7);padding:0 8px;min-width:90px;text-align:center}
.nl-stage{overflow:auto;max-width:1180px;margin:0 auto;border-radius:22px;background:#08200f;padding:34px 20px;scrollbar-width:thin}
.fb-book{--pw:min(430px,42vw);--ph:calc(var(--pw) * 1.414);position:relative;width:calc(var(--pw) * 2 + 34px);height:var(--ph);margin:0 auto;transform-origin:top center;transition:transform .35s var(--ease)}
.fb-sheet{position:absolute;top:0;left:calc(50% + 17px);width:var(--pw);height:var(--ph);transform-origin:left center;transform-style:preserve-3d;transform:perspective(2200px) rotateY(0);cursor:pointer}
/* the turn itself: a keyframed arc so the page lifts, passes the spine and settles */
.fb-sheet.turn-fwd{animation:fb-turn-fwd .72s cubic-bezier(.42,.05,.25,1) forwards}
.fb-sheet.turn-back{animation:fb-turn-back .72s cubic-bezier(.42,.05,.25,1) forwards}
.fb-sheet.flipped:not(.turn-fwd):not(.turn-back){transform:perspective(2200px) rotateY(-180deg)}
@keyframes fb-turn-fwd{
  0%{transform:perspective(2200px) rotateY(0) translateZ(0)}
  35%{transform:perspective(2200px) rotateY(-62deg) translateZ(26px)}
  65%{transform:perspective(2200px) rotateY(-118deg) translateZ(26px)}
  100%{transform:perspective(2200px) rotateY(-180deg) translateZ(0)}}
@keyframes fb-turn-back{
  0%{transform:perspective(2200px) rotateY(-180deg) translateZ(0)}
  35%{transform:perspective(2200px) rotateY(-118deg) translateZ(26px)}
  65%{transform:perspective(2200px) rotateY(-62deg) translateZ(26px)}
  100%{transform:perspective(2200px) rotateY(0) translateZ(0)}}
.fb-page{position:absolute;inset:0;backface-visibility:hidden;background:#fff;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.32)}
.fb-page img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.fb-page.front{border-radius:0 12px 12px 0}
.fb-page.back{transform:rotateY(180deg);border-radius:12px 0 0 12px}
/* spine shading and the light that travels across a turning page */
.fb-page::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2}
.fb-page.front::before{background:linear-gradient(to right,rgba(0,0,0,.18),rgba(0,0,0,.04) 9%,transparent 16%)}
.fb-page.back::before{background:linear-gradient(to left,rgba(0,0,0,.18),rgba(0,0,0,.04) 9%,transparent 16%)}
.fb-page::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:linear-gradient(105deg,rgba(0,0,0,.28) 0%,rgba(255,255,255,.22) 45%,rgba(0,0,0,.34) 100%);transition:opacity .35s}
.fb-sheet.turn-fwd .fb-page::after,.fb-sheet.turn-back .fb-page::after{animation:fb-sheen .72s cubic-bezier(.42,.05,.25,1) forwards}
@keyframes fb-sheen{0%{opacity:0}30%{opacity:.75}55%{opacity:.9}100%{opacity:0}}
/* the page being uncovered takes a moving shadow */
.fb-sheet.under .fb-page::after{animation:fb-under .72s cubic-bezier(.42,.05,.25,1) forwards;background:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,.15) 40%,transparent 70%)}
.fb-sheet.under-back .fb-page::after{animation:fb-under .72s cubic-bezier(.42,.05,.25,1) forwards;background:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,.15) 40%,transparent 70%)}
@keyframes fb-under{0%{opacity:0}45%{opacity:.85}100%{opacity:0}}
.fb-page.blank{background:transparent;box-shadow:none}
.fb-page.blank::before,.fb-page.blank::after{display:none}
/* no loose sheets beside the book */
.fb-book::before,.fb-book::after{display:none}
/* the rings */
.rings{position:absolute;left:50%;top:0;height:100%;width:34px;transform:translateX(-50%);z-index:500;pointer-events:none;display:flex;flex-direction:column;justify-content:space-evenly;padding:14px 0}
.rings i{display:block;width:34px;height:12px;border-radius:7px;background:linear-gradient(180deg,#f2e9d8,#b9ad93 55%,#7a705a);box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.8)}
.rings i::before{content:'';position:absolute;left:0;right:0;height:1px;background:rgba(0,0,0,.2);margin-top:6px}
.spine-holes{position:absolute;top:0;bottom:0;width:22px;z-index:400;pointer-events:none;display:flex;flex-direction:column;justify-content:space-evenly;padding:14px 0}
.spine-holes.l{right:calc(50% + 6px)}.spine-holes.r{left:calc(50% + 6px)}
.spine-holes i{width:10px;height:10px;border-radius:50%;background:#0f2416;box-shadow:inset 0 1px 2px rgba(0,0,0,.8);align-self:center;display:block}
.nl-hint{text-align:center;font-size:12.5px;color:rgba(255,255,255,.5);margin-top:16px}
.nl-empty{text-align:center;padding:60px 20px;color:rgba(255,255,255,.7)}
/* ---- one page at a time, on a phone ----------------------------------
   A spread on a 390px screen gives each page under 180px, which is not
   readable. The same pages are shown singly instead, in a frame sized to
   the screen, with a binding scaled to match. */
/* aspect-ratio, not a calculated height: a percentage width multiplied in
   calc() would be resolved against the parent's height, which is auto. */
.fb-book.fb-one{width:min(440px,100%);aspect-ratio:1 / 1.414;height:auto;
  position:relative;margin:0 auto}
.fb-leaf{position:absolute;inset:0;background:#fff;border-radius:4px 12px 12px 4px;
  overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.34);
  opacity:0;visibility:hidden;transform-origin:left center;cursor:pointer;
  backface-visibility:hidden}
.fb-leaf.on{opacity:1;visibility:visible}
/* the page sits clear of the rings rather than under them */
.fb-leaf{padding-left:22px}
.fb-leaf img{width:100%;height:100%;object-fit:contain;background:#fff;display:block;
  user-select:none;-webkit-user-drag:none}
/* a shadow along the bound edge, as on the spread */
.fb-leaf::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to right,rgba(0,0,0,.2),rgba(0,0,0,.05) 7%,transparent 14%)}
.fb-leaf.out-fwd{animation:fb-one-out-fwd .48s cubic-bezier(.42,.05,.25,1) forwards}
.fb-leaf.in-fwd{animation:fb-one-in-fwd .48s cubic-bezier(.22,1,.36,1) forwards}
.fb-leaf.out-back{animation:fb-one-out-back .48s cubic-bezier(.42,.05,.25,1) forwards}
.fb-leaf.in-back{animation:fb-one-in-back .48s cubic-bezier(.22,1,.36,1) forwards}
@keyframes fb-one-out-fwd{
  0%{opacity:1;transform:perspective(1400px) rotateY(0)}
  100%{opacity:0;transform:perspective(1400px) rotateY(-96deg)}}
@keyframes fb-one-in-fwd{
  0%{opacity:.2;transform:perspective(1400px) translateX(7%) scale(.97)}
  100%{opacity:1;transform:none}}
@keyframes fb-one-out-back{
  0%{opacity:1;transform:perspective(1400px) translateX(0) scale(1)}
  100%{opacity:0;transform:perspective(1400px) translateX(7%) scale(.97)}}
@keyframes fb-one-in-back{
  0%{opacity:0;transform:perspective(1400px) rotateY(-96deg)}
  100%{opacity:1;transform:perspective(1400px) rotateY(0)}}
/* the binding runs down the left edge and is sized to the page */
.fb-book.fb-one .rings{left:0;transform:none;width:16px;padding:10px 0;z-index:40}
.fb-book.fb-one .rings i{width:16px;height:8px;border-radius:4px}

@media(max-width:760px){
  .fb-book{--pw:min(300px,44vw)}
  .nlp{padding:40px 0 60px}
  .nl-bar{margin-bottom:16px}
  .nl-title b{font-size:1.1rem}
  .nl-stage{padding:14px 10px 18px;border-radius:14px;overflow:hidden}
  .nl-tools{gap:5px}
  .nl-btn{height:36px;min-width:36px;padding:0 10px;font-size:12.5px}
  .nl-count{min-width:64px;padding:0 4px;font-size:12px}
  .nl-months{gap:6px}
  .nl-months button{padding:7px 13px;font-size:12px}
  /* the binding on the spread, if a tablet is still showing one */
  .rings{width:22px}
  .rings i{width:22px;height:9px}
}

/* =====================================================================
   Mission collaborators — the slider (NRO page) and the page
   ================================================================== */
.collab{background:var(--paper);padding:84px 0 92px;overflow:hidden}
.collab-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:38px}
.collab-head .eyebrow{justify-content:center}
.collab-wrap{position:relative}
.collab-track{display:flex;gap:18px;width:max-content;animation:collab 48s linear infinite;padding:12px 0}
.collab-wrap.paused .collab-track,.collab-wrap:hover .collab-track{animation-play-state:paused}
@keyframes collab{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.collab-card{width:220px;height:124px;flex:none;background:#fff;border:1px solid var(--line);border-radius:18px;display:grid;place-items:center;padding:18px;text-decoration:none;position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
/* A logo of any shape is letterboxed into the same box, so a tall square
   and a wide wordmark read as one row. multiply drops a white or
   near-white background into the white card. */
/* An image is a replaced element, so left/right alone will not stretch it —
   the box is given explicitly and object-fit does the letterboxing. */
.collab-card img,.collab-card svg{position:absolute;left:18px;top:15px;
  width:calc(100% - 36px);height:calc(100% - 34px);max-width:none;max-height:none;
  object-fit:contain;object-position:center;
  /* multiply merges a white background into the white card; the small
     brightness lift pushes a near-white one (a JPEG's #f6f6f6) to pure
     white as well. A logo on a coloured ground still needs a PNG. */
  mix-blend-mode:multiply;filter:brightness(1.05);
  transition:transform .45s var(--ease)}
.collab-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(18,60,34,.12);border-color:rgba(18,60,34,.3)}
.collab-card:hover img,.collab-card:hover svg{transform:scale(1.05)}
.collab-card span{position:absolute;left:0;right:0;bottom:0;z-index:2;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:6px;background:linear-gradient(to top,#fff 55%,rgba(255,255,255,0));opacity:0;transition:opacity .3s}
.collab-card:hover span{opacity:1}
.collab-fade{position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.collab-fade.l{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.collab-fade.r{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.collab-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--forest);cursor:pointer;font-size:18px;display:grid;place-items:center;box-shadow:0 8px 20px rgba(18,60,34,.12);transition:background .25s,color .25s}
.collab-nav:hover{background:var(--forest);color:#fff}
.collab-nav.l{left:8px}.collab-nav.r{right:8px}
.collab-more{text-align:center;margin-top:34px}
body.nro-on .collab-card:hover{border-color:rgba(99,18,15,.35)}
body.nro-on .collab-nav:hover{background:var(--nro-maroon-2)}

/* the page: alternating "about" blocks */
.cb{padding:96px 0}
.cb:nth-child(even){background:var(--cream)}
.cb .cb-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center}
.cb.flip .cb-grid{grid-template-columns:1.3fr .7fr}
.cb.flip .cb-frame{order:2}
.cb-frame{position:relative;max-width:380px;width:100%;justify-self:center}
.cb-frame .frame{aspect-ratio:4/4.6}
.cb-frame .frame img.cb-logo{width:96px;height:96px;object-fit:contain;object-position:center;background:#fff;padding:12px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.25);top:28px;left:28px;mix-blend-mode:normal}
.cb-frame .chip{right:-14px;top:auto;bottom:18%;font-size:12px}
.cb-frame .chip b{font-size:1rem}
.cb.maroon .eyebrow::before{background:var(--nro-maroon-2)}
.cb.maroon .eyebrow{color:var(--nro-maroon-2)}
.cb.maroon h2 em{color:var(--nro-maroon-2)}
.cb.maroon .frame{background:radial-gradient(120% 90% at 18% 0%,var(--nro-maroon-2),var(--nro-maroon) 58%,#2c0303)}
.cb.maroon .btn-solid{background:var(--nro-maroon-2)}
.cb.maroon .btn-ghost{border-color:rgba(99,18,15,.35);color:var(--nro-maroon-2)}
.cb-tag{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin-bottom:14px}
.cb-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.cb:target{scroll-margin-top:90px}
@media(max-width:900px){.cb .cb-grid,.cb.flip .cb-grid{grid-template-columns:1fr;gap:36px}.cb.flip .cb-frame{order:0}.cb-frame{max-width:320px;justify-self:start}}

/* =====================================================================
   Reviews — Events page, between the archive and the slideshow
   ================================================================== */
.reviews{background:var(--cream);border-top:1px solid var(--line)}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.rv{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px 28px 26px;position:relative;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rv:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(18,60,34,.1)}
.rv-q{font-family:var(--serif);font-size:3.2rem;line-height:.6;color:var(--clay);opacity:.45;margin-bottom:18px}
.rv p{font-size:15px;line-height:1.8;color:var(--ink-2);flex:1}
.rv-stars{color:#d9a21b;font-size:13px;letter-spacing:2px;margin-bottom:12px}
.rv-who{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rv-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(145deg,var(--forest),var(--green));color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:600}
.rv-av img{width:100%;height:100%;object-fit:cover;display:block}
.rv-who b{display:block;font-size:14.5px}
.rv-who span{display:block;font-size:12.5px;color:var(--ink-3)}
@media(max-width:960px){.rv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.rv-grid{grid-template-columns:1fr}}

/* the bar sits above the fixed header on the home page */
.rbar{position:fixed;top:0;left:0;right:0;z-index:1001}
body.admin-bar .rbar{top:32px}
body.has-rbar #hdr{top:34px}
body.admin-bar.has-rbar #hdr{top:66px}
@media(max-width:782px){body.admin-bar .rbar{top:46px}body.admin-bar.has-rbar #hdr{top:80px}}
.rbar-item{padding:8px 34px 8px 0;font-size:12px}
/* newsletter loading */
.nl-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:90px 20px}
.nl-spin{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--sand);animation:nl-spin 1s linear infinite}
@keyframes nl-spin{to{transform:rotate(360deg)}}
.collab-ini{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--forest);opacity:.55}
.collab-card:hover .collab-ini{opacity:1}
footer .fnews{margin-top:22px;border-color:rgba(255,255,255,.28);color:var(--sand);padding:10px 18px;font-size:13.5px}
footer .fnews:hover{border-color:var(--sand);background:rgba(255,255,255,.06)}
.fb-page img.pending{background:linear-gradient(110deg,#f2ede2 30%,#fbf8f1 50%,#f2ede2 70%);background-size:200% 100%;animation:fb-shimmer 1.4s linear infinite}
@keyframes fb-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* =====================================================================
   PHONES
   One block, last in the file, so it wins over everything above it.
   ================================================================== */

/* ---- the soft colour wash -------------------------------------------
   .mesh is three radial blooms with a 28px blur, sitting inside a
   section that clips its overflow. On a wide screen the blur's edge
   falls well outside the section; on a 390px screen the bleed (-12% of
   390 ≈ 47px) is narrower than the blur radius, so the blur is cut off
   mid-gradient and leaves a hard vertical seam down every section that
   uses it. Radial gradients already fade to transparent on their own,
   so on a phone the blur is dropped and the blooms are grown instead. */
@media(max-width:820px){
  /* Three overlapping blooms that read as one soft wash across a wide
     hero pile up into blotches in a narrow one — green over clay over
     sand turns muddy. A phone gets a single bloom in the top corner
     instead, letting the section's own clean gradient carry the panel,
     and it holds still: an animated full-screen wash is a battery cost
     nobody asked for. */
  .mesh,.phero .mesh{
    filter:none;
    inset:-20% -30%;
    opacity:.42;
    background:radial-gradient(closest-side,var(--wash-1),transparent);
    background-size:150% 125%;
    background-repeat:no-repeat;
    background-position:84% 4%;
    animation:none;
  }
}

/* ---- the hard vertical line down the dark sections --------------------
   The maroon breath on a green hero, and the green one on the maroon
   band, are each a box sitting over the right-hand half of the section
   with a round gradient inside it. A round gradient is sized by the
   box's longest diagonal: on a wide screen the box is wide, the colour
   fades out inside it and nothing shows. On a phone the same box is
   narrow and very tall, so the diagonal is all height — the colour was
   still at nearly full strength when it reached the box's left edge,
   and that edge is a straight line down the middle of the section.
   An ellipse that ends at the closest side fades out in both directions
   instead, at every width. Fixed above, where each gradient is set. */

/* ---- the slide-in menu's links ---------------------------------------
   While the header floats over a dark hero its links are white. On a
   phone those same links are inside a panel with a cream ground, where
   white is invisible — which is what made the menu look empty. Inside
   the panel they are ink, whatever the header behind it is doing. */
@media(max-width:720px){
  header nav a,header:not(.solid) nav a{color:var(--ink)}
  header nav a:hover,header:not(.solid) nav a:hover{color:var(--forest)}
  header nav a.cur,header:not(.solid) nav a.cur,#nav a.cur{color:var(--clay)}
  header:not(.solid) #nav .nav-signin,header.solid #nav .nav-signin{color:var(--forest)}
  header:not(.solid) nav a.btn-solid,header nav a.btn-solid,
  header:not(.solid) #nav .nav-signin.btn-solid,
  #nav a.cur.btn-solid{color:#fff}
  nav a::after{display:none}
}

@media(max-width:620px){
  /* ---- side gutter -------------------------------------------------
     92vw left 13px of air on a 320px screen, and vw units count the
     scrollbar, so the right edge slid under it. A percentage of the
     element's own width is scrollbar-proof and gives a real margin. */
  :root{--shell:min(1180px,100% - 40px)}

  /* ---- the header --------------------------------------------------
     The mark, its two lines of subtitle and the burger together were
     wider than the bar, which is what pushed the page sideways. */
  header .bar{padding:12px 0;gap:12px}
  .brand{gap:10px;min-width:0}
  .brand img{width:38px;height:38px}
  .brand b{font-size:16px}
  .brand > span{min-width:0}
  .brand span span{font-size:9px;letter-spacing:.08em;display:block;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
  .burger{flex:none}

  /* ---- the slide-in menu -------------------------------------------
     Full height, its own scroll if the list is long, and the call to
     action sitting under the links rather than across them. */
  nav{width:min(320px,86vw);padding:96px 26px 32px;gap:20px;
    justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
  nav a{font-size:18px;width:100%}
  nav .btn-solid{width:100%;text-align:center;margin-top:8px;padding:13px 22px!important}
  nav .nav-signin{order:9}
  body.nav-open{overflow:hidden}

  /* ---- headings and type -------------------------------------------- */
  h1.big,.phero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .phero{padding:132px 0 76px}
  .lede,.lede2{font-size:.98rem}
  section{padding:64px 0}

  /* ---- the developer block ------------------------------------------ */
  .dev-photo{max-width:100%;justify-self:stretch}
  .dev-grid{gap:32px}

  /* ---- collaborator logos -------------------------------------------- */
  .collab-card{width:168px;height:100px;border-radius:15px}
  .collab-card img,.collab-card svg{left:14px;top:12px;width:calc(100% - 28px);height:calc(100% - 27px)}
  .collab-nav{width:38px;height:38px}
  .collab-fade{width:56px}

  /* ---- the registration marquee -------------------------------------- */
  .rbar-item{padding:8px 22px 8px 0;font-size:11.5px}

  /* ---- reviews, highlights, windows ---------------------------------- */
  .rv{padding:24px 22px}
  .reg-windows{gap:10px}
}

/* ---- nothing may be wider than the screen ---------------------------
   A single overflowing child makes the page scrollable sideways, and
   then every section's background stops at the viewport edge while the
   body's colour shows beyond it — which reads as a broken colour band
   on section after section. These are the guards. */
@media(max-width:820px){
  html,body{max-width:100%;overflow-x:hidden}
  #viewport,#scroll{max-width:100%;overflow-x:clip}
  section,footer,header,.shell,.hero,.phero{max-width:100%}
  .nl-stage,.collab,.show,.hlp-hero{max-width:100%;overflow-x:hidden}
  pre,code,table{max-width:100%;overflow-x:auto}
  .refbox{max-width:100%;word-break:break-all}
}

/* ---- the developer portrait ------------------------------------------
   Rounded on the home page and on /developer alike.

   The home page is assembled in Elementor, whose stylesheets load after
   the theme's and whose global kit can set a border radius for images
   site-wide — which is how the same block came out square on the home
   page and rounded on /developer. Stated outright here so the corners
   hold wherever the block is placed. */
.dev-photo img,
.dev .dev-photo img,
.elementor .dev-photo img{border-radius:28px!important;overflow:hidden}
.dev-photo::before{border-radius:28px}

/* =====================================================================
   PHONE POLISH
   The header mark, the menu button and the page heroes, tuned for a
   small screen rather than scaled down from a wide one.
   ================================================================== */

@media(max-width:720px){

  /* ---- the menu button ----------------------------------------------
     Its bars are forest green, which is invisible on a forest green
     hero — the button only appeared once the header turned solid on
     scroll. Over the hero it now sits in a soft glass tile with white
     bars; on the solid header the tile disappears and the bars go dark;
     and while the panel is open it is a dark cross on the cream. */
  .burger{width:44px;height:44px;padding:0;border-radius:13px;
    align-items:center;justify-content:center;gap:5px;
    border:1px solid transparent;background:transparent;
    transition:background .35s var(--ease),border-color .35s var(--ease)}
  .burger i{width:20px;transition:transform .4s var(--ease),opacity .3s,background .35s}

  header:not(.solid) .burger{background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.26);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
  header:not(.solid) .burger i{background:#fff}

  header.solid .burger i{background:var(--forest)}

  /* open: the button is over the cream panel, so it must read dark */
  .burger.on{background:transparent!important;border-color:transparent!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .burger.on i{background:var(--forest)!important}

  /* ---- the mark ------------------------------------------------------
     A truncated subtitle ending in "·…" looks like a mistake. Below the
     width where it fits, the mark is the initials alone. */
  .brand span span{display:none}
  .brand b{font-size:17px;letter-spacing:-.01em}
  header .bar{gap:14px}
}

@media(min-width:521px) and (max-width:720px){
  /* enough room for the subtitle on a larger phone */
  .brand span span{display:block;font-size:9.5px;letter-spacing:.1em;
    white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:40vw}
}

@media(max-width:620px){
  /* ---- page heroes ---------------------------------------------------
     Less dead air above the heading, and an eyebrow that wraps as a
     block of small caps rather than trailing off the first line. */
  .phero{padding:112px 0 68px}
  .hero{padding:120px 0 72px;min-height:0}
  .pcrumb{font-size:11px;letter-spacing:.05em;margin-bottom:12px}
  .eyebrow{font-size:10.5px;letter-spacing:.16em;gap:8px;
    align-items:flex-start;line-height:1.5;margin-bottom:12px}
  .eyebrow::before{width:18px;margin-top:7px;flex:none}
  .phero h1{margin:14px 0 16px}
  .phero .lede{font-size:1rem;line-height:1.7}
}

/* =====================================================================
   404 — the page for an address that does not exist
   ================================================================== */
.e404 .phero-in{max-width:760px}
.e404-code{font-family:var(--serif);font-size:clamp(4rem,14vw,8rem);line-height:.9;font-weight:700;
  color:rgba(255,255,255,.14);letter-spacing:-.04em;margin:6px 0 -6px}
.e404 h1{font-size:clamp(2rem,5.4vw,3.4rem)}
.e404-search{display:flex;gap:10px;margin-top:30px;max-width:520px;flex-wrap:wrap}
.e404-search input{flex:1 1 220px;min-width:0;height:50px;padding:0 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
  font-family:var(--sans);font-size:15px}
.e404-search input::placeholder{color:rgba(255,255,255,.5)}
.e404-search input:focus{outline:none;border-color:var(--sand);background:rgba(255,255,255,.13)}
.e404-search .btn{height:50px;flex:none}
.e404-wrap{background:var(--cream);padding:70px 0 90px}
.e404-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.e404-card{position:relative;display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:18px;padding:24px 52px 24px 24px;text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.e404-card b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--forest);margin-bottom:5px}
.e404-card span{display:block;font-size:14px;color:var(--ink-2);line-height:1.6}
.e404-card .arw{position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--clay);
  font-style:normal;transition:transform .4s var(--ease)}
.e404-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,60,34,.1);border-color:rgba(18,60,34,.28)}
.e404-card:hover .arw{transform:translateY(-50%) translateX(5px)}
@media(max-width:620px){
  .e404-wrap{padding:48px 0 64px}
  .e404-grid{grid-template-columns:1fr;gap:12px}
  .e404-search .btn{width:100%}
}

/* =====================================================================
   Show the password
   The eye sits inside the box's right edge; the input keeps room for it
   so a long password never slides underneath.
   ================================================================== */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:46px!important}
.pw-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;
  background:none;border:none;border-radius:9px;cursor:pointer;
  color:var(--ink-3);transition:color .22s,background .22s}
.pw-eye:hover{color:var(--forest);background:rgba(18,60,34,.07)}
.pw-eye:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.pw-eye svg{display:block}