/* ============================================================
   Subham Kundu — design tokens
   Direction A ("The Red Side") exactly as approved.
   The ONLY change from the approved comp: the near-black ink
   (#141414 / #0E0E0E) is replaced with navy. Every warm neutral,
   the rubber red, the rules and the tints are unchanged.
   ============================================================ */
:root{
  /* grounds — warm, unchanged */
  --paper:#FCFCFA;
  --surface:#FFFFFF;
  --alt:#F6F4F0;
  --hover:#F6F1EC;

  /* ink — the one change: navy replaces black */
  --ink:#15305A;
  --ink-deep:#12274A;
  --ink-line:rgba(21,48,90,.26);

  /* accent — unchanged */
  --red:#CE1126;
  --red-hover:#A80D1E;
  --red-soft:#FCEBED;
  --red-bright:#FF6B75;      /* the accent that sits on navy */

  /* neutrals — warm, unchanged */
  --neutral:#6E6864;
  --body:#33302E;
  --rule:#E2DED8;
  --tint:#E8E4DE;

  /* medals — unchanged */
  --gold:#C9A227;   --gold-ink:#8A6A12;   --gold-bg:#FBF4DE;
  --silver:#9AA3AD; --silver-ink:#4A5058; --silver-bg:#F0F2F4;
  --bronze:#B87333; --bronze-ink:#7A4318; --bronze-bg:#F8EDE2;

  /* type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Chivo","Helvetica Neue",Arial,sans-serif;

  /* metrics */
  --head-h:74px;
  --wrap:1300px;
  --gutter:clamp(18px,4vw,52px);
}



/* ============================ base ============================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,p,figure,dl,dd,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
/* The lightbox and menu live in the DOM permanently and are toggled with the
   `hidden` attribute. Their own `display` would otherwise beat the UA rule and
   leave an invisible overlay swallowing every click. */
[hidden]{display:none !important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.serif{font-family:var(--serif)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* eyebrow */
.lbl{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--neutral);
}
.lbl::before{content:"";width:22px;height:2px;background:var(--red);flex:none}
.lbl.onDark{color:rgba(252,252,250,.62)}

/* ============================ header ============================ */
.hdr{position:sticky;top:0;z-index:120;background:var(--paper);border-bottom:2px solid var(--ink)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:var(--head-h)}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo .mark{
  width:34px;height:34px;flex:none;border-radius:50%;background:var(--red);
  display:grid;place-items:center;
}
.logo .mark::after{
  content:"";width:11px;height:11px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 1.5px var(--ink-line);
}
.logo b{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.018em;line-height:1;display:block}
.logo small{display:block;font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--neutral);margin-top:4px}
.hdr nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.hdr nav a{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--neutral);transition:color .2s;position:relative;padding:6px 0;
}
.hdr nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.hdr nav a:hover{color:var(--ink)}
.hdr nav a:hover::after,.hdr nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr nav a[aria-current="page"]{color:var(--ink)}
@media (max-width:1020px){.hdr nav a{display:none}}

.burger{
  display:flex;align-items:center;gap:11px;padding:10px 0;flex:none;margin-left:26px;
  font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
}
.burger .bars{display:grid;gap:5px;width:26px}
.burger .bars i{height:2px;background:currentColor;display:block;transition:width .28s,transform .28s}
.burger .bars i:nth-child(2){width:17px;margin-left:auto}
.burger:hover .bars i:nth-child(1){width:17px}
.burger:hover .bars i:nth-child(2){width:26px}
/* Under ~420px the logo (252px) plus the labelled burger (75px) plus the
   gutters exceed the viewport and push the page sideways. The bars alone are
   an understood control, so the word goes and the gap tightens. */
@media (max-width:430px){
  .burger .mlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .burger{margin-left:14px;gap:0}
  .logo small{font-size:8px;letter-spacing:.13em}
}

/* ============================ buttons ============================ */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:15px 26px;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .24s,border-color .24s,color .24s,transform .24s;
}
.btn:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.btn .arw{transition:transform .24s}
.btn:hover .arw{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.light{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.light:hover{background:var(--red);border-color:var(--red);color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ============================ sections ============================ */
.sec{padding-block:clamp(58px,7.5vw,116px);border-bottom:1px solid var(--rule)}
.sec.alt{background:var(--alt)}
.sec.tight{padding-block:clamp(38px,4.6vw,68px)}
.sechead{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(18px,3.5vw,52px);align-items:end;margin-bottom:clamp(32px,4vw,56px);
}
@media (max-width:860px){.sechead{grid-template-columns:1fr;gap:16px;align-items:start}}
.sechead>div{min-width:0}
.sechead .h2{max-width:24ch}
.sechead p{max-width:42ch;font-size:14.5px;line-height:1.66;color:var(--neutral);padding-bottom:8px}
@media (max-width:860px){.sechead p{padding-bottom:0}}
.h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(30px,3.9vw,52px);line-height:1.02;letter-spacing:-.03em;
  margin-top:14px;text-wrap:balance;
}
.h2 em{font-style:italic;color:var(--red);font-weight:400}
.h3{font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.3vw,29px);letter-spacing:-.022em;line-height:1.14}

/* ============================ hero ============================ */
.hero{position:relative;padding-block:clamp(38px,5vw,74px) clamp(34px,4vw,58px);overflow:hidden}
.hero .wrap{display:grid;gap:clamp(26px,4vw,56px);grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center}
@media (max-width:1000px){.hero .wrap{grid-template-columns:1fr}}
.h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(42px,7vw,100px);line-height:.93;letter-spacing:-.038em;
  margin-top:22px;text-wrap:balance;
}
.h1 em{font-style:italic;color:var(--red);font-weight:400}
.heroLede{margin-top:26px;max-width:54ch;font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:var(--body)}
.heroLede b{font-weight:700;color:var(--ink)}
.heroArt{position:relative}
.heroArt .rally{position:absolute;left:-16%;right:-16%;bottom:-7%;pointer-events:none;z-index:2}

/* rally svg */
.rally svg{width:100%;height:auto;overflow:visible}
.rally .traj{stroke:var(--red);stroke-width:2;fill:none;stroke-dasharray:1 3.6;stroke-linecap:round}
.rally .surface{stroke:var(--ink);stroke-width:2.5}
.rally .net{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3}
.rally .halo{fill:var(--red);opacity:.12}

/* ============================ framed photo ============================ */
.frame{position:relative;background:var(--tint);overflow:hidden;border:1px solid var(--rule)}
.frame>img{width:100%;height:100%;object-fit:cover}
.frame figcaption{
  position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;padding:8px 13px;
  font-weight:700;max-width:88%;z-index:2;
}
.frame .badge{
  position:absolute;top:12px;right:12px;background:var(--red);color:#fff;z-index:2;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:6px 11px;
}
.r45{aspect-ratio:4/5}.r34{aspect-ratio:3/4}.r11{aspect-ratio:1}
.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}.r169{aspect-ratio:16/9}.r217{aspect-ratio:2.17}

/* ============================ stat bar ============================ */
.stats{background:var(--ink);color:var(--paper);border-block:2px solid var(--ink)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:840px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}
.stat{padding:34px 10px 32px;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(252,252,250,.24)}
@media (max-width:840px){.stat:nth-child(3)::before{display:none}}
.stat b{display:block;font-family:var(--serif);font-size:clamp(40px,5vw,60px);line-height:1;font-weight:500;letter-spacing:-.03em}
.stat b i{font-style:normal;color:var(--red-bright)}
.stat span{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(252,252,250,.64);line-height:1.55;max-width:22ch}

/* ============================ logo strip ============================ */
.strip{border-bottom:1px solid var(--rule);padding-block:24px;background:var(--paper)}
.strip .wrap{display:flex;align-items:center;gap:clamp(18px,4vw,50px);flex-wrap:wrap}
.strip .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--neutral);font-weight:700;flex:none}
.strip a{font-family:var(--serif);font-size:clamp(15px,1.7vw,21px);color:var(--ink);opacity:.44;transition:opacity .22s,color .22s}
.strip a:hover{opacity:1;color:var(--red)}

/* ============================ prose ============================ */
.two{display:grid;gap:clamp(28px,4vw,62px);grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);align-items:start}
.two.rev{grid-template-columns:minmax(0,1.16fr) minmax(0,1fr)}
@media (max-width:900px){.two,.two.rev{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:16px}
.prose p{font-size:16px;line-height:1.8;color:var(--body)}
.prose p+p{margin-top:19px}
.prose p.drop::first-letter{
  font-family:var(--serif);float:left;font-size:78px;line-height:.7;
  padding:9px 13px 0 0;color:var(--red);font-weight:500;
}
.prose h4{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.02em;margin-top:32px}
.prose h4+p,.prose h4+ul{margin-top:10px}
.prose ul li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.7;color:var(--body)}
.prose ul li+li{margin-top:9px}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--red)}
.prose b{color:var(--ink)}

.quote{margin-top:38px;border-block:2px solid var(--ink);padding-block:28px}
.quote q{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);
  line-height:1.3;letter-spacing:-.02em;display:block;quotes:none;
}
.quote q::before{content:"\201C";color:var(--red)}
.quote q::after{content:"\201D";color:var(--red)}
.quote cite{display:block;margin-top:15px;font-style:normal;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--neutral);font-weight:700}

/* ============================ pathway ============================ */
.pw{position:relative}
.pwRail{position:absolute;left:15px;top:14px;bottom:34px;width:2px;background:var(--rule);z-index:0}
.pwRail i{position:absolute;left:0;top:0;width:2px;height:var(--p,0px);background:linear-gradient(180deg,var(--red),var(--gold));transition:height .14s linear}
@media (max-width:820px){.pwRail{left:11px}}
.pwStage{
  position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1.24fr);
  gap:clamp(16px,3vw,44px);padding-block:clamp(24px,3vw,40px);
  border-top:1px solid var(--rule);align-items:start;transition:background .4s;
}
.pwStage:first-of-type{border-top:0}
.pwStage:hover{background:rgba(206,17,38,.03)}
@media (max-width:820px){.pwStage{grid-template-columns:56px minmax(0,1fr);row-gap:12px}}
.pwStage .no{
  position:relative;z-index:1;font-family:var(--serif);font-size:19px;font-weight:600;
  color:var(--neutral);padding-top:2px;display:flex;align-items:flex-start;gap:14px;transition:color .4s;
}
.pwStage .no::before{
  content:"";width:14px;height:14px;border-radius:50%;flex:none;margin-top:6px;
  background:var(--paper);box-shadow:inset 0 0 0 2px var(--rule);transition:box-shadow .4s,background .4s;
}
.sec.alt .pwStage .no::before{background:var(--alt)}
.pwStage.lit .no{color:var(--red)}
.pwStage.lit .no::before{background:var(--red);box-shadow:inset 0 0 0 2px var(--red),0 0 0 4px var(--red-soft)}
.pwStage h3{font-family:var(--serif);font-size:clamp(21px,2.3vw,29px);font-weight:600;letter-spacing:-.026em;line-height:1.12}
.pwStage .when{margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink)}
.pwStage p{font-size:14.5px;line-height:1.76;color:var(--neutral)}
@media (max-width:820px){.pwStage p{grid-column:2}}

/* ============================ method grid ============================ */
.method{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.method[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.method[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.method[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.method[data-cols="1"]{grid-template-columns:minmax(0,1fr)}
@media (max-width:1080px){.method[data-cols="4"],.method[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.method[data-cols="4"],.method[data-cols="3"],.method[data-cols="2"]{grid-template-columns:minmax(0,1fr)}}
.method article{background:var(--paper);padding:28px 24px 30px;transition:background .26s,transform .26s}
.sec.alt .method article{background:var(--alt)}
.method article:hover{background:var(--surface);transform:translateY(-3px)}
.method .no{font-family:var(--serif);font-size:15px;color:var(--red);display:block;margin-bottom:14px;letter-spacing:.04em}
.method h4{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.018em;margin-bottom:9px}
.method p{font-size:13.5px;line-height:1.68;color:var(--neutral)}

/* ============================ tables ============================ */
.tblwrap{overflow-x:auto;border:2px solid var(--ink);background:var(--surface)}
table.rec{width:100%;border-collapse:collapse;font-size:14.5px;min-width:700px}
table.rec thead th{
  background:var(--ink);color:var(--paper);text-align:left;padding:13px 18px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
table.rec td{padding:15px 18px;border-top:1px solid var(--rule);vertical-align:top;line-height:1.5}
table.rec tbody tr{transition:background .18s}
table.rec tbody tr:hover{background:var(--hover)}
table.rec .yr{font-variant-numeric:tabular-nums;color:var(--neutral);white-space:nowrap;font-weight:700;font-size:13.5px}
table.rec td.ev{display:table-cell;font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.012em}
table.rec td.ev small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--neutral);letter-spacing:0;margin-top:4px;line-height:1.5}
table.rec td.ct{width:52px;text-align:center}
.medal{display:inline-block;padding:4px 10px;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;border:1.5px solid}
.medal.g{color:var(--gold-ink);border-color:var(--gold);background:var(--gold-bg)}
.medal.s{color:var(--silver-ink);border-color:var(--silver);background:var(--silver-bg)}
.medal.b{color:var(--bronze-ink);border-color:var(--bronze);background:var(--bronze-bg)}
.medal.r{color:var(--red);border-color:var(--red);background:var(--red-soft)}
.medal.n{color:var(--ink);border-color:var(--ink);background:var(--tint)}
.certlink{
  display:inline-grid;place-items:center;width:26px;height:26px;
  border:1.5px solid var(--rule);color:var(--neutral);transition:.2s;flex:none;
}
.certlink:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}

/* ============================ cards ============================ */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{border:1px solid var(--rule);background:var(--surface);display:flex;flex-direction:column;transition:border-color .26s,transform .26s}
.card:hover{border-color:var(--ink);transform:translateY(-4px)}
.card .frame{border:0;border-bottom:1px solid var(--rule)}
.card .meta{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h4{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.022em}
.card .role{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700}
.card p{font-size:13.5px;line-height:1.62;color:var(--neutral)}
.card ul{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
.card ul li{font-size:12.5px;color:var(--neutral);padding-left:16px;position:relative;line-height:1.5}
.card ul li+li{margin-top:6px}
.card ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--red)}

/* ============================ press ============================ */
.arts{border-top:2px solid var(--ink)}
.art{
  display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:24px;align-items:baseline;
  padding:25px 4px;border-bottom:1px solid var(--rule);transition:background .22s,padding-left .22s;
}
.art:hover{background:var(--hover);padding-left:16px}
@media (max-width:780px){.art{grid-template-columns:1fr;gap:8px}}
.art .src{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--red)}
.art h4{font-family:var(--serif);font-size:clamp(18px,2vw,25px);font-weight:500;line-height:1.26;letter-spacing:-.02em}
.art p{font-size:13.5px;color:var(--neutral);margin-top:7px;line-height:1.6;max-width:70ch}
.art .go{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--neutral);font-weight:700;white-space:nowrap}
.art:hover .go{color:var(--red)}

/* ============================ events ============================ */
.evs{border-block:2px solid var(--ink);display:grid;gap:1px;background:var(--rule)}
.evs .ev{background:var(--paper);display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:22px;padding:24px 4px;align-items:center;transition:background .22s}
.sec.alt .evs .ev{background:var(--alt)}
.evs .ev:hover{background:var(--surface)}
@media (max-width:780px){.evs .ev{grid-template-columns:86px minmax(0,1fr);row-gap:10px}}
.evs .ev .d{text-align:center;border-right:1px solid var(--rule);padding-right:14px}
.evs .ev .d b{display:block;font-family:var(--serif);font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.evs .ev .d span{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-weight:700}
.evs .ev .d em{display:block;font-style:normal;font-size:10px;color:var(--neutral);margin-top:3px;letter-spacing:.06em}
.evs .ev h4{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.018em}
.evs .ev p{font-size:13px;color:var(--neutral);margin-top:5px}
.evs .ev .pill{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border:1.5px solid var(--ink);padding:6px 12px;white-space:nowrap}
.evs .ev .pill.red{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.evs .ev .pill.done{border-color:var(--rule);color:var(--neutral)}
@media (max-width:780px){.evs .ev .pill{display:none}}

/* ============================ certificates ============================ */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{border:1.5px solid var(--rule);padding:8px 15px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--neutral);transition:.2s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .n{opacity:.55;margin-left:6px;font-variant-numeric:tabular-nums}
.certgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
.cert{border:1px solid var(--rule);background:var(--surface);cursor:zoom-in;display:flex;flex-direction:column;text-align:left;width:100%;padding:0;transition:border-color .24s,transform .24s}
.cert:hover{border-color:var(--red);transform:translateY(-3px)}
.cert .shot{background:var(--tint);aspect-ratio:1.34;overflow:hidden;position:relative;border-bottom:1px solid var(--rule);padding:10px}
/* `contain`, not `cover`: a certificate cropped to its corner tells you
   nothing. The whole document sits on the warm ground like paper on a shelf. */
.cert .shot img{width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cert:hover .shot img{transform:scale(1.04)}
.cert .cap{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.cert .cap .y{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--red);font-variant-numeric:tabular-nums}
.cert .cap .t{font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.25;letter-spacing:-.015em}
.cert .cap .s{font-size:11.5px;color:var(--neutral);line-height:1.45;margin-top:auto}

/* ============================ credential ============================ */
.credential{border:2px solid var(--ink);background:var(--surface);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:900px){.credential{grid-template-columns:1fr}}
.credential .shot{padding:clamp(18px,3vw,34px);background:var(--alt);display:grid;place-items:center;border-right:1px solid var(--rule)}
@media (max-width:900px){.credential .shot{border-right:0;border-bottom:1px solid var(--rule)}}
.credential .shot button{
  padding:0;border:2px solid var(--ink);background:var(--surface);cursor:zoom-in;
  transition:transform .3s;display:block;width:100%;max-width:560px;line-height:0;
}
.credential .shot button:hover{transform:scale(1.015)}
.credential .shot button img{width:100%;height:auto;display:block}
.credential .body{padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;gap:16px}
.credential dl{display:grid;grid-template-columns:auto 1fr;gap:11px 20px;margin-top:6px;font-size:14px}
.credential dt{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--neutral);padding-top:4px;white-space:nowrap}
.credential dd{font-weight:600}

/* ============================ gallery ============================ */
/* Masonry columns: every photograph keeps its own proportions, so nothing
   is cropped. break-inside stops a tile splitting across a column. */
.gal{columns:3;column-gap:16px}
@media (max-width:1080px){.gal{columns:2}}
@media (max-width:640px){.gal{columns:1}}
.gal>button{
  display:block;width:100%;padding:0;cursor:zoom-in;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:16px;
}
.galframe{
  position:relative;margin:0;overflow:hidden;background:var(--tint);
  border:1px solid var(--rule);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.galframe img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.gal>button:hover .galframe{transform:translateY(-4px);border-color:var(--ink)}
.gal>button:hover .galframe img{transform:scale(1.04)}
.galframe figcaption{
  position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;padding:8px 13px;
  font-weight:700;max-width:88%;
}

/* ============================ page banner ============================ */
.phero{border-bottom:2px solid var(--ink);padding-block:clamp(38px,5vw,72px) clamp(32px,4vw,56px);background:var(--paper)}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end}
/* No fact panel — let the headline and lede have the full measure rather
   than sitting in a narrow column beside empty space. */
.phero.solo .wrap{grid-template-columns:minmax(0,1fr)}
.phero.solo h1{max-width:20ch}
.phero.solo .lede{max-width:66ch}
@media (max-width:900px){.phero .wrap{grid-template-columns:1fr}}
.phero h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5.6vw,76px);line-height:.96;letter-spacing:-.036em;margin-top:18px;text-wrap:balance}
.phero h1 em{font-style:italic;color:var(--red);font-weight:400}
.phero .lede{margin-top:22px;max-width:58ch;font-size:clamp(15px,1.35vw,17px);line-height:1.72;color:var(--body)}
.phero .lede b{font-weight:700;color:var(--ink)}
.facts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.facts>div{background:var(--surface);padding:15px 18px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.facts dt{font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--neutral);flex:none}
.facts dd{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-.015em;text-align:right}
.crumb{font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--neutral)}
.crumb a:hover{color:var(--red)}
.tallies{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tallies>div{background:var(--surface);padding:20px 18px 22px}
.tallies b{display:block;font-family:var(--serif);font-size:38px;line-height:1;font-weight:500;letter-spacing:-.03em}
.tallies b.g{color:var(--gold-ink)}.tallies b.r{color:var(--red)}
.tallies span{display:block;margin-top:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--neutral);line-height:1.5}
.grp{margin-top:clamp(34px,4vw,56px)}
.grp:first-of-type{margin-top:0}
.grp>h3{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.grp>p.note{font-size:13.5px;color:var(--neutral);margin-bottom:20px;max-width:64ch;line-height:1.6}

/* ============================ closing band ============================ */
.close{background:var(--ink);color:var(--paper);padding-block:clamp(58px,7.5vw,110px);position:relative;overflow:hidden;border-bottom:0}
.close .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.close h2{font-family:var(--serif);font-size:clamp(33px,5.6vw,80px);font-weight:500;line-height:.98;letter-spacing:-.038em;max-width:16ch;text-wrap:balance}
.close h2 em{font-style:italic;color:var(--red-bright)}
.close p{max-width:52ch;color:rgba(252,252,250,.7);font-size:16px;line-height:1.72}
.close .orb{
  position:absolute;width:min(58vw,620px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(252,252,250,.12);right:-13%;top:-34%;animation:orb 30s linear infinite;
}
.close .orb::after{content:"";position:absolute;inset:17%;border-radius:50%;border:1px solid rgba(206,17,38,.4)}
@keyframes orb{to{transform:rotate(360deg)}}

/* ============================ contact ============================ */
.cform{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.cform .full{grid-column:1/-1}
@media (max-width:700px){.cform{grid-template-columns:1fr}}
.field label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--neutral);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-size:15px;padding:13px 15px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--rule);transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field textarea{min-height:130px;resize:vertical}
.field .err{margin-top:6px;font-size:12px;color:var(--red);font-weight:600}
.info{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.info>div{background:var(--surface);padding:20px 22px}
.info dt{font-size:9.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--neutral)}
.info dd{margin-top:8px;font-size:15px;line-height:1.6}
.info dd a:hover{color:var(--red)}
.bigcontact,
.info dd a.bigcontact{
  font-family:var(--serif);font-size:clamp(22px,2.4vw,29px);font-weight:600;
  letter-spacing:-.02em;line-height:1.15;display:inline-block;
  border-bottom:2px solid var(--rule);padding-bottom:3px;transition:border-color .2s,color .2s;
}
.bigcontact:hover,
.info dd a.bigcontact:hover{color:var(--red);border-color:var(--red)}
.notice{border:1.5px solid var(--red);background:var(--red-soft);padding:16px 18px;font-size:14px;line-height:1.6;color:var(--ink)}
.notice.ok{border-color:var(--gold);background:var(--gold-bg)}

/* ============================ footer ============================ */
.ftr{background:var(--paper);padding-block:50px 36px;border-top:1px solid var(--rule)}
.ftr .grid{display:grid;gap:32px;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
@media (max-width:880px){.ftr .grid{grid-template-columns:1fr 1fr}}
.ftr h5{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--neutral);font-weight:700;margin-bottom:15px}
.ftr li+li{margin-top:9px}
.ftr a{font-size:14px;color:var(--body);transition:color .2s}
.ftr a:hover{color:var(--red)}
.ftr .bar{margin-top:42px;border-top:1px solid var(--rule);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--neutral)}

/* ============================ full screen menu ============================ */
.fs{position:fixed;inset:0;z-index:400}
.fs .sheet{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper);animation:sheet .52s cubic-bezier(.16,1,.3,1) both}
@keyframes sheet{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.fs .top{display:flex;align-items:center;gap:20px;height:var(--head-h);flex:none;border-bottom:2px solid var(--ink);padding-inline:var(--gutter)}
.fs .body{flex:1;overflow-y:auto;padding:clamp(24px,4vw,46px) var(--gutter) clamp(28px,4vw,48px)}
.fs .cols{display:grid;gap:clamp(24px,3vw,46px);grid-template-columns:repeat(auto-fit,minmax(206px,1fr));max-width:var(--wrap);margin:0 auto}
.fs h6{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin:0 0 17px;color:var(--red)}
.fs li{overflow:hidden}
.fs li+li{margin-top:2px}
.fs .cols a{
  display:block;padding:5px 0;font-family:var(--serif);font-weight:500;
  font-size:clamp(23px,3vw,39px);letter-spacing:-.03em;line-height:1.16;
  transform:translateY(106%);animation:up .64s cubic-bezier(.16,1,.3,1) both;
  transition:color .2s,translate .26s cubic-bezier(.16,1,.3,1);
}
@keyframes up{to{transform:translateY(0)}}
.fs .cols a:hover,.fs .cols a[aria-current="page"]{color:var(--red)}
.fs .cols a:hover{translate:9px 0}
.fs .net{position:absolute;left:0;right:0;bottom:86px;height:1px;background:repeating-linear-gradient(to right,var(--rule) 0 6px,transparent 6px 12px);pointer-events:none}
.fs .foot{flex:none;padding:20px var(--gutter);border-top:1px solid var(--rule);display:flex;gap:clamp(16px,4vw,52px);flex-wrap:wrap;font-size:12.5px;color:var(--neutral)}
.fs .foot b{color:var(--ink);font-weight:700;letter-spacing:.03em}

/* ============================ lightbox ============================ */
.lb{position:fixed;inset:0;z-index:600;background:rgba(18,39,74,.94);display:grid;grid-template-rows:auto 1fr auto;animation:fade .3s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb .bar{display:flex;align-items:center;gap:16px;padding:16px clamp(14px,3vw,28px);color:var(--paper)}
.lb .bar .t{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.015em}
.lb .bar .s{font-size:11.5px;color:rgba(252,252,250,.62);margin-top:2px}
.lb .bar .ct{margin-left:auto;font-size:11.5px;letter-spacing:.1em;color:rgba(252,252,250,.62);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb .x{width:38px;height:38px;display:grid;place-items:center;border:1.5px solid rgba(252,252,250,.3);color:var(--paper);transition:.2s;flex:none}
.lb .x:hover{background:var(--red);border-color:var(--red)}
.lb .stage{min-height:0;padding:0 clamp(10px,3vw,28px) clamp(4px,1vw,12px)}
/* A relatively-positioned box fills the flexible row; the image is absolutely
   sized to it, so `contain` always letterboxes inside the viewport. */
.lb .box{position:relative;width:100%;height:100%;min-height:0;margin:auto}
/* With a known aspect-ratio the box collapses to exactly the painted image,
   so the dark surround stays clickable and closes the viewer. */
.lb .box[style*="aspect-ratio"]{width:auto;height:auto;max-width:100%;max-height:100%}
.lb .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb .nav{display:flex;justify-content:center;gap:10px;padding:16px}
.lb .nav button{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid rgba(252,252,250,.3);color:var(--paper);transition:.2s}
.lb .nav button:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ============================ reveals ============================ */
/* Reveals are progressive enhancement: the content is visible by default and
   only starts hidden once the inline script confirms JavaScript is running.
   If hydration ever fails, the page still reads. */
.rv{transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
html.js .rv{opacity:0;transform:translateY(24px)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,html.js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── additions for the PHP build ─────────────────────────────────────────
   The React components applied a few of these inline; as server-rendered
   markup they are ordinary classes. */

/* drop cap is opt-in per rich_text section */
.prose.hasDrop > p:first-of-type::first-letter{
  font-family:var(--serif);float:left;font-size:78px;line-height:.7;
  padding:9px 13px 0 0;color:var(--red);font-weight:500;
}
.cta.center{justify-content:center}
.cta.mtAuto{margin-top:auto}

/* athlete with no photograph yet */
.frame.pending{background:var(--tint);display:grid;place-items:center}
.frame.pending .pendingMark{
  width:56px;height:56px;border-radius:50%;border:2px solid var(--rule);position:relative;
}
.frame.pending .pendingMark::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--rule);transform:translate(-50%,-50%);
}
.frame.pending figcaption{background:var(--rule);color:var(--neutral)}

/* card is a link in the PHP build */
a.card{color:inherit;text-decoration:none}

/* the certificate lightbox trigger inside a table cell */
.certlink{background:none}