/* VEXAutoSort - light editorial theme
   Palette is WCAG AA verified. --red-bright is display/fill only, never text-sized.
   --red is unusable on the dark hero (2.6:1), so hero type is white. */

:root{
  /* surfaces */
  --paper:#FCFBFA;        /* page */
  --paper-2:#F5F3F0;      /* alternating band */
  --surface:#FFFFFF;      /* cards */
  --surface-ph:#F1EEEB;   /* image placeholders */
  --charcoal:#17171B;     /* hero / video poster */

  /* text */
  --ink:#16161A;          /* headings, body            17.5:1 */
  --ink-2:#4E4E57;        /* secondary                  8.0:1 */
  --ink-3:#6B6B75;        /* small labels               5.1:1 */

  /* accent */
  --red:#B3122B;          /* links, buttons, accents    6.7:1 */
  --red-strong:#8C0E21;   /* hover                      9.2:1 */
  --red-bright:#E01E37;   /* large display / fills only       */
  --red-wash:#FBF1F3;     /* faint red tint fill              */

  /* lines */
  --border:#E5E2DF;
  --border-strong:#D6D2CE;

  /* honest, light-surface shadows: no bloom */
  --sh-1:0 1px 2px rgba(22,22,26,0.05);
  --sh-2:0 1px 2px rgba(22,22,26,0.05),0 6px 16px -6px rgba(22,22,26,0.10);
  --sh-3:0 2px 4px rgba(22,22,26,0.05),0 14px 30px -12px rgba(22,22,26,0.16);

  /* type */
  --font-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  /* spacing scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --maxw:1180px;
  --radius:12px;
  --radius-sm:8px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
::selection{background:var(--red);color:#fff;}

/* typography ---------------------------------------------------------- */
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-0.012em;color:var(--ink);}
h1{font-weight:700;letter-spacing:-0.022em;line-height:1.05;}

/* the one accent: a short phrase per heading, never on a dark surface */
.accent{color:var(--red);}

/* understated section label. no mono, no wide tracking, no uppercase. */
.eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.005em;
  color:var(--ink-3);
  margin-bottom:var(--s3);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5);}
section{padding:var(--s9) 0;}
.band{background:var(--paper-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.section-head{margin-bottom:var(--s7);max-width:640px;}
.section-head h2{font-size:clamp(1.9rem,4.4vw,2.9rem);margin-bottom:var(--s4);}
.section-head p{color:var(--ink-2);font-size:1.08rem;}
/* Inner pages (team/timeline/sponsors/mentors/contact). The nav is sticky and in
   flow, so it already contributes its own height; 132px on top of that started the
   content far too low. Home does not use this class. */
.page-top{padding-top:var(--s7);}

/* restrained reveal: short fade + small lift */
.reveal{opacity:0;transform:translateY(12px);transition:opacity 0.5s ease-out,transform 0.5s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* card. class name kept as .glass for stability; it is now a solid surface. */
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--sh-1);
}

/* nav ----------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);
  padding:var(--s3) var(--s5);
  background:var(--paper);
  border-bottom:1px solid var(--border);
  transition:box-shadow 0.25s ease;
}
.nav.scrolled{box-shadow:var(--sh-1);}
.nav-brand{
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;
  letter-spacing:-0.015em;color:var(--ink);
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.nav-links{display:flex;gap:var(--s1);align-items:center;}
.nav-links a{
  font-size:0.92rem;font-weight:500;color:var(--ink-2);
  padding:8px 13px;border-radius:var(--radius-sm);
  transition:color 0.2s,background 0.2s;position:relative;
}
.nav-links a:hover{color:var(--ink);background:var(--paper-2);}
.nav-links a.active{color:var(--ink);font-weight:600;}
.nav-links a.active::after{
  content:'';position:absolute;left:13px;right:13px;bottom:2px;
  height:2px;border-radius:2px;background:var(--red);
}
.nav-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:6px;}
.logo-mark{flex-shrink:0;height:30px;width:auto;display:block;}

/* buttons ------------------------------------------------------------- */
.btn{
  font-family:var(--font-body);font-size:0.95rem;font-weight:600;
  padding:13px 24px;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:var(--surface);color:var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  box-shadow:var(--sh-1);
  transition:background 0.2s,border-color 0.2s,box-shadow 0.2s,transform 0.2s var(--ease);
}
.btn:hover{background:var(--paper-2);border-color:var(--ink-3);box-shadow:var(--sh-2);}
.btn .arrow{transition:transform 0.25s var(--ease);}
.btn:hover .arrow{transform:translateY(3px);}
.btn:hover .arrow-x{transform:translateX(4px);}
.btn-red{background:var(--red);border-color:var(--red);color:#fff;}
.btn-red:hover{background:var(--red-strong);border-color:var(--red-strong);color:#fff;}
/* ghost button, dark hero only */
.hero .btn:not(.btn-red){
  background:transparent;color:#fff;
  border-color:rgba(255,255,255,0.45);box-shadow:none;
}
.hero .btn:not(.btn-red):hover{background:#fff;color:var(--ink);border-color:#fff;}

/* hero ---------------------------------------------------------------- */
/* Full-bleed media block. Type sits on a scrim INSIDE the video, so it stays
   legible over whatever footage lands here later. */
.hero{padding:0;}
.hero-video{
  position:relative;width:100%;height:88vh;min-height:540px;
  overflow:hidden;
  background:var(--charcoal);   /* shows through until the first frame paints */
}
.hero-video video,.hero-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* The footage is bright (white table), so the text band needs a real scrim, not a
   whisper. Measured: 0.55 black over pure white already clears AA for body text.
   Weighted to the bottom so the top of the frame stays clear and the arm reads. */
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,8,10,0.90) 0%,
    rgba(8,8,10,0.80) 16%,
    rgba(8,8,10,0.62) 32%,
    rgba(8,8,10,0.22) 52%,
    rgba(8,8,10,0.04) 72%,
    rgba(8,8,10,0.00) 100%);
}
/* Sits inside the video and still overlaps it, but kept deliberately compact so it
   covers as little of the frame as possible. */
/* the shadow is belt-and-braces for bright frames the scrim alone can't tame */
.hero-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:var(--s6);
  text-shadow:0 1px 20px rgba(0,0,0,0.35);
}
/* hug the left corner instead of sitting on the centred content column */
.hero-overlay .wrap{max-width:none;margin:0;padding-left:var(--s7);padding-right:var(--s5);}
.hero-overlay h1{font-size:clamp(2.1rem,5vw,3.4rem);color:#fff;margin-bottom:2px;}
.hero .sub{
  font-size:clamp(0.98rem,1.6vw,1.12rem);
  color:rgba(255,255,255,0.86);
  margin:0 0 var(--s4);max-width:400px;font-weight:400;
}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;}
.hero .btn{padding:11px 20px;font-size:0.9rem;}
.hero-stats{display:flex;gap:var(--s6);margin-top:var(--s5);flex-wrap:wrap;}
.hero-stats .stat .n{
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:#fff;
  line-height:1.2;
}
.hero-stats .stat .l{
  font-size:0.76rem;color:rgba(255,255,255,0.7);margin-top:1px;
}

/* about + offer ------------------------------------------------------- */
.offer-grid{display:grid;grid-template-columns:1fr 0.85fr;gap:var(--s7);align-items:start;}
.offer-grid p{color:var(--ink-2);}
/* The about copy continues straight on from the section-head paragraph, so the
   gap between them must match the gap between the paragraphs themselves.
   A section-sized break there read as an accidental hole. */
/* About: image column runs alongside the FULL text column (heading + copy), so it
   starts at the top of the section rather than dropping below the heading. */
.about-grid{display:grid;grid-template-columns:1fr 0.58fr;gap:var(--s8);align-items:start;}
#about .section-head{margin-bottom:var(--s5);}
.about-copy p + p{margin-top:var(--s5);}
.about-media{
  height:340px;border-radius:var(--radius);overflow:hidden;position:relative;
  background:var(--surface-ph);
}
.about-media img{width:100%;height:100%;object-fit:cover;display:block;}
.offer-list{display:flex;flex-direction:column;gap:var(--s3);}
.offer-item{
  padding:var(--s5);display:flex;gap:var(--s4);align-items:flex-start;
  transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s var(--ease);
}
.offer-item:hover{border-color:var(--border-strong);box-shadow:var(--sh-2);transform:translateY(-2px);}
.offer-item .ic{
  flex-shrink:0;width:38px;height:38px;border-radius:var(--radius-sm);
  background:var(--red-wash);border:1px solid #F0DCE0;
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;font-weight:600;color:var(--red);
  font-variant-numeric:tabular-nums;
}
.offer-item h3{font-size:1.12rem;margin-bottom:var(--s1);}
.offer-item p{color:var(--ink-2);font-size:0.98rem;}
.offer-media{
  height:440px;border-radius:var(--radius);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-ph);
}
.offer-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* image placeholders: flat surface, dashed frame, no stripes ----------- */
.placeholder{text-align:center;color:var(--ink-2);font-size:0.9rem;line-height:1.7;}
.placeholder .frame{
  width:56px;height:56px;margin:0 auto var(--s3);
  border:1px dashed var(--border-strong);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--ink-3);
}
.img-ph{
  height:200px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-ph);border:1px solid var(--border);
  color:var(--ink-2);font-size:0.9rem;text-align:center;line-height:1.7;
}
/* same slot, but holding a real photo */
.img-ph.has-img{height:300px;padding:0;overflow:hidden;}
.img-ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* map ----------------------------------------------------------------- */
.map-section{text-align:center;}
.map-wrap{position:relative;max-width:920px;margin:var(--s7) auto 0;padding:var(--s5);}
.world{width:100%;height:auto;display:block;}
.land{fill:#E7E3DF;stroke:#D3CEC9;stroke-width:0.4;}
.pin{cursor:pointer;}
.pin .ping{fill:var(--red);transition:r 0.2s var(--ease);}
.pin .dot{fill:#fff;}
.pin:hover .ping{r:8;}
.map-tip{
  position:absolute;pointer-events:none;z-index:5;
  padding:10px 13px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--sh-3);
  font-size:0.85rem;
  opacity:0;transform:translate(-50%,-120%) scale(0.96);
  transition:opacity 0.18s ease,transform 0.18s var(--ease);
  white-space:nowrap;
}
.map-tip.show{opacity:1;transform:translate(-50%,-132%) scale(1);}
.map-tip .name{font-family:var(--font-display);font-weight:600;color:var(--ink);}
.map-tip .coord{font-size:0.76rem;color:var(--ink-3);}

/* team / sponsors / mentors cards -------------------------------------- */
/* Explicit column counts, not auto-fit: every row must stay full at every
   width. 3-card pages go 3 -> 1. The 4-card team page goes 4 -> 2 -> 1, and
   never 3, which would strand a lone card on its own row. */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.team-grid.four{grid-template-columns:repeat(4,1fr);}
.member{
  padding:0;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s var(--ease);
}
.member:hover{border-color:var(--border-strong);box-shadow:var(--sh-2);transform:translateY(-3px);}
/* max-height keeps a full-width card from growing a 900px-tall portrait */
.member .photo{
  aspect-ratio:4/5;max-height:340px;position:relative;
  background:var(--surface-ph);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--border);
}
.member .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Sponsor logos need to be contained and padded, not cover-cropped like a face.
   Explicit width/height here on purpose: inheriting the portrait aspect-ratio and
   clamping it with max-height made the box derive its WIDTH from the ratio, so it
   shrank to 338px instead of filling the card. */
.member > a{display:block;width:100%;}
.member .photo.logo{
  aspect-ratio:auto;
  width:100%;height:190px;max-height:none;
  background:var(--surface);padding:var(--s3) var(--s5);
}
/* tight padding so a square logo (Almond) actually fills the box height */
.member .photo.logo img{position:static;width:100%;height:100%;object-fit:contain;}
.team-grid.two{grid-template-columns:repeat(2,1fr);}
.member .photo .ph{text-align:center;color:var(--ink-2);font-size:0.85rem;}
.member .photo .ph .ring{
  width:76px;height:76px;border-radius:50%;margin:0 auto var(--s3);
  border:1px dashed var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--ink-3);
}
.member .info{padding:var(--s5);display:flex;flex-direction:column;flex:1;}
.member .info h3{font-size:1.3rem;}
/* metadata, not an accent: red here would repeat on every card */
.member .role{
  font-size:0.84rem;font-weight:600;color:var(--ink-3);
  margin:var(--s1) 0 var(--s3);
}
.member .info p{color:var(--ink-2);font-size:0.95rem;}
.member .tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto;padding-top:var(--s4);}
.tag{
  font-size:0.76rem;font-weight:500;padding:4px 10px;border-radius:6px;
  background:var(--paper-2);border:1px solid var(--border);color:var(--ink-2);
}

/* timeline ------------------------------------------------------------- */
.tl-layout{display:grid;grid-template-columns:1fr 400px;gap:var(--s7);align-items:start;max-width:1080px;margin:0 auto;}
.tl{position:relative;max-width:860px;margin:0 auto;padding-left:var(--s2);}
.tl-layout .tl{margin:0;max-width:none;}
.tl::before{content:'';position:absolute;left:21px;top:8px;bottom:8px;width:1px;background:var(--border);}
.phase{margin-bottom:var(--s7);}
.phase-label{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-left:52px;margin-bottom:var(--s5);
  font-size:0.86rem;font-weight:500;color:var(--ink-3);
}
.phase-label .ptag{
  padding:4px 10px;border-radius:6px;
  background:var(--red-wash);border:1px solid #F0DCE0;
  color:var(--red);font-weight:600;font-size:0.8rem;
}
.event{position:relative;padding:0 0 var(--s5) 52px;}
.event .enode{
  position:absolute;left:15px;top:8px;width:13px;height:13px;border-radius:50%;
  background:var(--surface);border:2px solid var(--border-strong);
  box-sizing:border-box;
}
.event.done .enode{background:var(--red);border-color:var(--red);}
.event .card{padding:var(--s4) var(--s5);transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s var(--ease);}
.event .card:hover{border-color:var(--border-strong);box-shadow:var(--sh-2);transform:translateY(-2px);}
.event .date{font-size:0.82rem;color:var(--ink-3);font-weight:500;}
.event h3{font-size:1.12rem;margin:var(--s1) 0 var(--s2);}
.event p{color:var(--ink-2);font-size:0.96rem;}
.event.future .enode{border-color:var(--border-strong);background:var(--paper-2);}

.tl-sticky{position:sticky;top:100px;height:max-content;}
/* 4/3 matches the source photos, so they sit in the frame without a heavy crop */
.tl-img-stack{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;}
.tl-img{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.5s ease;
  background:var(--surface-ph);
}
.tl-img.active{opacity:1;}
.tl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tl-img-ph{text-align:center;color:var(--ink-2);font-size:0.9rem;line-height:1.7;}
.tl-img-num{
  display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:700;
  margin-bottom:var(--s2);color:var(--red);
}

.target{
  margin:var(--s8) auto 0;max-width:860px;text-align:center;padding:var(--s7);
  transition:border-color 0.2s,box-shadow 0.2s;
}
.target:hover{border-color:var(--border-strong);box-shadow:var(--sh-2);}
.target h3{font-size:1.9rem;}
.target p{color:var(--ink-2);}

.feature-box{
  margin-top:var(--s7);padding:var(--s7);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.feature-box:hover{border-color:var(--border-strong);box-shadow:var(--sh-2);}
.feature-box p{color:var(--ink-2);}

/* contact -------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 0.85fr;gap:var(--s6);align-items:start;}
.form{padding:var(--s7);}
.field{margin-bottom:var(--s5);}
.field label{
  display:block;font-size:0.85rem;font-weight:600;color:var(--ink);
  margin-bottom:var(--s2);
}
.field input,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--paper);border:1px solid var(--border-strong);
  color:var(--ink);font-family:var(--font-body);font-size:0.98rem;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(179,18,43,0.12);
}
.field textarea{resize:vertical;min-height:130px;}
.form-note{font-size:0.86rem;color:var(--ink-3);margin-top:var(--s2);min-height:20px;}
.form-note.ok{color:var(--red);font-weight:500;}

.links-card{padding:var(--s6);}
.links-card h3{font-size:1.25rem;margin-bottom:var(--s1);}
.links-card>p{color:var(--ink-2);font-size:0.96rem;margin-bottom:var(--s5);}
.social{display:flex;flex-direction:column;gap:var(--s3);}
.social a{
  display:flex;align-items:center;gap:var(--s3);
  padding:13px 15px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  transition:border-color 0.2s,background 0.2s,transform 0.2s var(--ease);
}
.social a:hover{border-color:var(--red);background:var(--red-wash);transform:translateX(3px);}
.social .ic{
  width:34px;height:34px;border-radius:var(--radius-sm);flex-shrink:0;
  background:var(--red-wash);border:1px solid #F0DCE0;
  display:flex;align-items:center;justify-content:center;color:var(--red);
}
.social .meta b{display:block;font-size:0.96rem;font-weight:600;color:var(--ink);}
.social .meta span{font-size:0.86rem;color:var(--ink-3);}

/* footer --------------------------------------------------------------- */
.footer{border-top:1px solid var(--border);padding:var(--s8) 0 var(--s7);margin-top:var(--s8);background:var(--paper-2);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s5);}
.footer .nav-brand{font-size:1.25rem;}
.footer .small{color:var(--ink-3);font-size:0.92rem;}
.footer-social{display:flex;gap:var(--s2);}
.footer-social a{
  width:42px;height:42px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--border);
  transition:color 0.2s,border-color 0.2s,background 0.2s,transform 0.2s var(--ease);
}
.footer-social a svg{width:19px;height:19px;}
.footer-social a:hover{color:var(--red);border-color:var(--red);background:var(--red-wash);transform:translateY(-2px);}

/* responsive ----------------------------------------------------------- */
@media (max-width:1040px){
  .team-grid.four{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .team-grid.two{grid-template-columns:1fr;}
}
@media (max-width:880px){
  .about-grid{grid-template-columns:1fr;gap:var(--s6);}
  .about-media{height:260px;}
}
@media (max-width:980px){
  .tl-layout{grid-template-columns:1fr;}
  .tl-sticky{display:none;}
}
@media (max-width:900px){
  .team-grid{grid-template-columns:1fr;}
}
@media (max-width:880px){
  .offer-grid,.contact-grid,.feature-box{grid-template-columns:1fr;}
  .hero-video{height:80vh;min-height:460px;}
  .offer-media{height:300px;}
  .form{padding:var(--s5);}
  .hero-stats{gap:var(--s5);}
}
/* .four stays 2-up longer than the 3-card grids: 2x2 beats a 4-card stack */
@media (max-width:520px){
  .team-grid.four{grid-template-columns:1fr;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .nav{padding:var(--s3) var(--s4);}
  .nav-links{
    position:absolute;top:calc(100% + 1px);right:var(--s4);
    flex-direction:column;align-items:stretch;width:212px;
    padding:var(--s2);gap:2px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--sh-3);
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a.active::after{display:none;}
  .nav-toggle{display:block;}
  section{padding:var(--s8) 0;}
  .page-top{padding-top:var(--s6);}
  .target,.feature-box{padding:var(--s5);}
  .footer-inner{flex-direction:column;align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}