/* ============================================================
   AUES — Ashoka University Economics Society
   Core design system
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — blue & red on near-black ink */
  --ink:        #05060F;
  --ink-2:      #0A0D1E;
  --ink-3:      #141936;
  --ink-line:   #232848;

  --blue:       #2F4FA8;
  --blue-lt:    #8FA3DD;
  --blue-dk:    #16295C;
  --blue-glow:  rgba(47, 79, 168, .38);

  /* Red ramp. Two stops, one hue:
     --red        bright — text and accents ON dark ink (5.2:1 on --ink)
     --red-solid  deeper — solid fills UNDER white text (5.1:1 with #fff)
     Using the bright red as a fill behind white gives only 3.87:1, which fails
     AA for body-sized text, so fills must use --red-solid. */
  --red:        #E4525C;
  --red-solid:  #B3222C;
  --red-lt:     #EE8188;
  --red-dk:     #8A1A22;
  --red-glow:   rgba(179, 34, 44, .38);

  --paper:      #F4F2EC;
  --paper-2:    #E7E4DA;
  --white:      #FFFFFF;

  /* Text on ink — 7.8:1 */
  --body:       #9AA0B8;
  --body-hi:    #D7DAE8;

  /* Always dark, in either theme: fills that sit under white text, and the
     placeholder tiles, which stand in for photographs. */
  --night:      #05060F;
  --tile-a:     #141936;
  --tile-b:     #0A0D1E;

  /* Surfaces and effects that change with the theme */
  --nav-glass:  rgba(5, 6, 15, .82);
  --grid-line:  rgba(255, 255, 255, .028);
  --glow-blue:  rgba(43, 76, 255, .30);
  --glow-red:   rgba(245, 51, 63, .26);
  --glow-red-2: rgba(245, 51, 63, .10);
  --pglow-blue: rgba(43, 76, 255, .26);
  --pglow-red:  rgba(245, 51, 63, .20);
  --card-glow:  rgba(43, 76, 255, .16);
  --sel-bg:     #E4525C;
  --sel-fg:     #FFFFFF;
  --mark-bars:  #8FA3DD;
  --mark-arrow: #E4525C;

  /* Type */
  --f-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;
  --f-label:   "Inter", system-ui, -apple-system, sans-serif;

  /* Fluid scale */
  --t-mega: clamp(2.1rem, 4.9vw, 4.4rem);
  --t-h1:   clamp(1.9rem, 3.7vw, 3.3rem);
  --t-h2:   clamp(1.5rem, 2.7vw, 2.35rem);
  --t-h3:   clamp(1.15rem, 1.6vw, 1.4rem);
  --t-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;

  /* Space */
  --gut:  clamp(1.25rem, 4vw, 4.5rem);
  --sec:  clamp(4rem, 8vw, 7.5rem);
  --max:  1560px;
  --read: 68ch;

  /* Motion */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-in:   cubic-bezier(.7, 0, .84, 0);
  --e-soft: cubic-bezier(.33, 1, .68, 1);
  --d-fast: 180ms;
  --d-mid:  420ms;
  --d-slow: 900ms;

  --nav-h: 76px;
}

/* ---------- 1b. White background ----------
   Switched on by the toggle in the nav, which sets data-theme="light" on
   <html>. Only tokens change here; the components read them. `--white` keeps
   its job as "the strongest text colour", so in this theme it is near-black.
   The Gazette keeps its newsprint either way, hence :not(.gz). */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body:not(.gz) {
  --ink:        #FFFFFF;
  --ink-2:      #F4F5F9;
  --ink-3:      #E9ECF4;
  --ink-line:   #D6DAE6;

  --white:      #05060F;
  --body:       #4B5068;   /* 7.9:1 on white */
  --body-hi:    #262A3D;   /* 14:1 on white */

  --blue-lt:    #2F4FA8;   /* 7.5:1 on white */
  --red:        #B3222C;   /* 6.6:1 on white */
  --red-lt:     #8A1A22;
  --blue-glow:  rgba(47, 79, 168, .28);
  --red-glow:   rgba(179, 34, 44, .28);

  --nav-glass:  rgba(255, 255, 255, .86);
  --grid-line:  rgba(5, 6, 15, .05);
  --glow-blue:  rgba(47, 79, 168, .16);
  --glow-red:   rgba(228, 82, 92, .20);
  --glow-red-2: rgba(228, 82, 92, .08);
  --pglow-blue: rgba(47, 79, 168, .14);
  --pglow-red:  rgba(228, 82, 92, .14);
  --card-glow:  rgba(47, 79, 168, .07);
  --sel-bg:     #2F4FA8;
  --mark-bars:  #1A4266;
  --mark-arrow: #C1121F;
}
/* The solid blue bands look the same in both themes, so the dark-ground
   values come back inside them. */
html[data-theme="light"] body:not(.gz) .band {
  --ink:        #05060F;
  --ink-2:      #0A0D1E;
  --ink-3:      #141936;
  --ink-line:   #232848;
  --white:      #FFFFFF;
  --body:       #9AA0B8;
  --body-hi:    #D7DAE8;
  --blue-lt:    #8FA3DD;
  --red:        #E4525C;
  --red-lt:     #EE8188;
  --card-glow:  rgba(43, 76, 255, .16);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}
html.is-locked, body.is-locked { overflow: hidden; }

body {
  background: var(--ink);
  color: var(--body);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` where supported: unlike `hidden` it does not create a scroll
     container, so position:sticky inside the page keeps working. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.011em;
  color: var(--white);
  text-wrap: balance;
}

::selection { background: var(--sel-bg); color: var(--sel-fg); }

:focus-visible {
  outline: 3px solid var(--blue-lt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: var(--sec); position: relative; }
.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }

.skip {
  position: absolute; left: 8px; top: -100px;
  background: var(--red-solid); color: #fff;
  padding: .8rem 1.2rem; z-index: 200;
  font-family: var(--f-label); font-size: var(--t-sm);
  transition: top var(--d-fast) var(--e-out);
}
.skip:focus { top: 8px; }

/* ---------- 4. Utility type ---------- */

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--body-hi);
  max-width: var(--read);
  text-wrap: pretty;
}
.muted { color: var(--body); }
/* Read out by screen readers, not shown */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tabnum { font-variant-numeric: tabular-nums; }

/* ---------- 5. Buttons ---------- */
.btn {
  --bg: var(--red-solid);
  --fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 1.05rem 2rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-label);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-mid) var(--e-out);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--night);
  transform: translateY(101%);
  transition: transform var(--d-mid) var(--e-out);
  z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -12px var(--red-glow);
}
.btn:active { transform: translateY(-1px); }
.btn .btn__arrow { transition: transform var(--d-mid) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--blue { --bg: var(--blue); }
.btn--blue:hover, .btn--blue:focus-visible { box-shadow: 0 14px 40px -10px var(--blue-glow); }

.btn--ghost {
  --bg: transparent; --fg: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink-line);
}
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover, .btn--ghost:focus-visible {
  --fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--white);
}

.btn--paper { --bg: var(--night); --fg: #fff; }
.btn--paper::before { background: var(--red-solid); }

/* Outline button on a solid blue band, in either theme */
.btn--onband {
  --bg: transparent; --fg: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.btn--onband::before { background: #fff; }
.btn--onband:hover, .btn--onband:focus-visible {
  --fg: var(--night);
  box-shadow: inset 0 0 0 1.5px #fff;
}

/* Text link with sweep underline */
.tlink {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-label); font-size: var(--t-sm);
  letter-spacing: .01em; color: var(--white); padding-bottom: 4px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-mid) var(--e-out);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.tlink svg { transition: transform var(--d-mid) var(--e-out); }
.tlink:hover svg { transform: translateX(4px); }

/* ---------- 6. Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex; align-items: center;
  transition: background var(--d-mid) var(--e-out),
              box-shadow var(--d-mid) var(--e-out),
              transform var(--d-mid) var(--e-out);
}
.nav.is-stuck {
  background: var(--nav-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--ink-line);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}

.brand { display: flex; align-items: center; gap: .8rem; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__mark g      { fill: var(--mark-bars); }
.brand__mark > path { fill: var(--mark-arrow); }
/* The society's full name over two lines, set as one name */
.brand__txt {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1rem; letter-spacing: -0.01em; color: var(--white);
  line-height: 1.12;
}
.brand__txt span { display: block; }

.nav__links { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.7rem); margin-left: auto; }

/* Right-hand cluster: theme toggle, and the burger on small screens */
.nav__end { display: flex; align-items: center; gap: .5rem; }
.theme {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  position: relative; z-index: 130;           /* stays usable over the open menu */
  color: var(--body-hi);
  box-shadow: inset 0 0 0 1px var(--ink-line);
  touch-action: manipulation;
  transition: color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.theme:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.theme svg { width: 18px; height: 18px; }
.theme__moon { display: none; }
html[data-theme="light"] .theme__sun  { display: none; }
html[data-theme="light"] .theme__moon { display: block; }
@media (pointer: coarse) { .theme { width: 44px; height: 44px; } }
.nav__link {
  position: relative;
  font-family: var(--f-label);
  font-size: var(--t-xs);
  letter-spacing: .01em;
  color: var(--body-hi);
  padding: .55rem .2rem;
  transition: color var(--d-fast) var(--e-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-mid) var(--e-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--white); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* Current page: white text + red rule (never low-contrast red text) */
.nav__link[aria-current="page"] { color: var(--white); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { display: none; }
@media (min-width: 1100px) { .nav__cta { display: inline-flex; padding: .8rem 1.4rem; } }

/* Burger */
/* Flex column with an explicit gap — a grid would give each bar its own row and
   space them by row height, which breaks the ±8px cross transform below. */
.burger {
  width: 46px; height: 46px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  position: relative; z-index: 130;
  touch-action: manipulation;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span {
  display: block; width: 24px; height: 2px; background: var(--white);
  transition: transform var(--d-mid) var(--e-out), opacity var(--d-fast) linear;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Drop-downs: Initiatives and Events. The trigger is a button that opens a
   plain list of links; hovering opens it too where there is a mouse. */
.nav__group { position: relative; }
.nav__drop { display: inline-flex; align-items: center; gap: .35rem; }
.nav__chev { width: 10px; height: 10px; flex: none; transition: transform var(--d-fast) var(--e-out); }
.nav__drop[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__drop.is-current, .nav__drop[aria-expanded="true"] { color: var(--white); }
.nav__drop.is-current::after, .nav__drop[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__sub a { display: block; color: var(--body-hi); transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out); }
.nav__sub a:hover, .nav__sub a:focus-visible, .nav__sub a[aria-current="page"] { color: var(--white); }

@media (min-width: 1000px) {
  .nav__sub {
    position: absolute; top: calc(100% + .55rem); left: -.9rem; z-index: 5;
    min-width: 13.5rem; padding: .45rem;
    display: grid;
    background: var(--ink-2);
    box-shadow: 0 0 0 1px var(--ink-line), 0 22px 44px -22px rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out),
                visibility 0s linear var(--d-fast);
  }
  .nav__group::after {               /* keeps hover alive across the gap */
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .8rem;
  }
  .nav__drop[aria-expanded="true"] + .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__sub a { padding: .62rem .8rem; font-size: var(--t-sm); }
  .nav__sub a:hover, .nav__sub a:focus-visible { background: var(--ink-3); }
}
@media (min-width: 1000px) and (hover: hover) {
  .nav__group:hover .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__group:hover .nav__chev { transform: rotate(180deg); }
}

@media (max-width: 999px) {
  .nav__links {
    position: fixed; inset: 0;
    background: var(--ink);
    flex-direction: column; justify-content: flex-start;
    gap: .15rem;
    padding: calc(var(--nav-h) + 1.2rem) var(--gut) 2.5rem;
    overflow-y: auto; overscroll-behavior: contain;
    clip-path: circle(0% at calc(100% - 46px) 38px);
    transition: clip-path 620ms var(--e-out);
    pointer-events: none;
  }
  .nav__links.is-open { clip-path: circle(150% at calc(100% - 46px) 38px); pointer-events: auto; }
  .nav__links > * {
    opacity: 0; transform: translateY(24px);
    transition: opacity 400ms var(--e-out), transform 500ms var(--e-out);
  }
  .nav__links.is-open > * { opacity: 1; transform: none; }
  .nav__links.is-open > :nth-child(1) { transition-delay: 120ms; }
  .nav__links.is-open > :nth-child(2) { transition-delay: 160ms; }
  .nav__links.is-open > :nth-child(3) { transition-delay: 200ms; }
  .nav__links.is-open > :nth-child(4) { transition-delay: 240ms; }
  .nav__links.is-open > :nth-child(5) { transition-delay: 280ms; }
  .nav__links.is-open > :nth-child(6) { transition-delay: 320ms; }
  .nav__links.is-open > :nth-child(7) { transition-delay: 360ms; }
  .nav__link {
    font-family: var(--f-display); font-size: clamp(1.7rem, 7.4vw, 2.5rem);
    font-weight: 600; letter-spacing: -0.02em; text-transform: none;
    color: var(--white); padding: .3rem var(--gut);
  }
  .nav__link::after { height: 3px; }
  .nav__group { display: grid; justify-items: center; }
  .nav__chev { width: 14px; height: 14px; }
  .nav__sub { display: none; text-align: center; padding: .1rem 0 .7rem; }
  .nav__drop[aria-expanded="true"] + .nav__sub { display: grid; gap: .1rem; }
  .nav__sub a { font-size: 1.1rem; padding: .5rem 1rem; }
}

/* ---------- 7. Scroll reveal primitives ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms var(--e-out), transform 620ms var(--e-out);
  transition-delay: var(--rd, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-16px); }
[data-reveal="right"] { transform: translateX(16px); }
[data-reveal="scale"] { transform: scale(.985); }
[data-reveal="clip"]  {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--e-out);
  transition-delay: var(--rd, 0ms);
}
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }


/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  /* Fills the first screen, so the glow reaches the bottom edge on arrival. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
/* The glows sit on transparent, over the page's own ink, and fade out at the
   bottom, so nothing marks where the hero ends and the next section starts.
   Sizes are in viewport units so the shape holds whatever the hero's height. */
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120vw 80vh at 78% 4vh, var(--glow-blue), transparent 58%),
    radial-gradient(110vw 80vh at 6% 96vh, var(--glow-red), transparent 66%),
    radial-gradient(70vw 50vh at 62% 100vh, var(--glow-red-2), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
/* Where `overflow: clip` exists, the glow carries on past the fold at full
   strength and fades out behind the start of the next section instead. */
@supports (overflow: clip) {
  .hero { overflow: visible; overflow-x: clip; }
  .hero__bg {
    bottom: -45vh;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 45vh), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 45vh), transparent);
  }
}
.hero__grid {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: clamp(56px, 7vw, 104px) clamp(56px, 7vw, 104px);
  /* Gone before the bottom edge, like the glow. */
  mask-image: radial-gradient(85% 70% at 50% 38%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(85% 70% at 50% 38%, #000 20%, transparent 78%);
}
.hero__plot { position: absolute; inset: 0; z-index: -1; opacity: .85; pointer-events: none; }
.hero__plot path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* The big logo on the right of the homepage hero. On wide screens main.js
   lifts it into a fixed copy that shrinks into the nav's logo as the page
   scrolls; without the script it simply sits here. */
.hero__mark { display: none; }
@media (min-width: 1000px) {
  .hero__mark {
    display: block;
    position: absolute; z-index: -1;
    right: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
    top: calc(50% + var(--nav-h) / 2);
    width: clamp(200px, 24vw, 420px); aspect-ratio: 1;
    transform: translateY(-50%);
  }
  .hero .lead { max-width: 60ch; }
}
.hero__mark svg, .hero-mark svg { width: 100%; height: 100%; }
.hero__mark g, .hero-mark g { fill: var(--mark-bars); }
.hero__mark svg > path, .hero-mark svg > path { fill: var(--mark-arrow); }
.hero__mark.is-flying { visibility: hidden; }
.hero-mark {
  position: fixed; left: 0; top: 0; z-index: 101;   /* above the nav bar */
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  animation: mark-in 900ms var(--e-out) both;
}
@keyframes mark-in { from { opacity: 0; } }
.hero-mark.is-docked { visibility: hidden; }
/* On the homepage the hero's own title names the society, so the nav's logo
   and name wait until the flying logo lands, then appear together. */
.nav .brand__mark, .nav .brand__txt { transition: opacity 160ms linear; }
.nav.mark-away .brand__mark, .nav.mark-away .brand__txt { opacity: 0; }
.nav.mark-away .brand:focus-visible .brand__mark,
.nav.mark-away .brand:focus-visible .brand__txt { opacity: 1; }

.hero__inner { width: 100%; }
.hero__title {
  font-size: var(--t-mega);
  letter-spacing: -0.05em;
  line-height: .84;
    margin-block: clamp(1.2rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.4rem);
}
.hero__foot {
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: flex-end; justify-content: space-between;
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- 10. Section headers ---------- */
.shead {
  display: grid; gap: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .shead { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: end; }
}
.shead__t { font-size: var(--t-h2); }
.shead__t .hl { color: var(--red); }

/* ---------- 11. Stats ---------- */
.stats {
  display: grid; gap: 1px;
  background: var(--ink-line);
  border-block: 1px solid var(--ink-line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--ink); padding: clamp(1.6rem,3.5vw,2.8rem) clamp(1.2rem,2.5vw,2rem); }
.stat__n {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: .9; letter-spacing: -0.04em; color: var(--white);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .1em;
}
.stat__n sub { font-size: .42em; color: var(--red); vertical-align: baseline; bottom: 0; }
.stat__l {
  margin-top: .8rem;
  font-family: var(--f-label); font-size: var(--t-xs);
  letter-spacing: .01em; color: var(--body);
}

/* ---------- 12. Cards ---------- */
.card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--d-mid) var(--e-out),
              transform var(--d-mid) var(--e-out);
  display: flex; flex-direction: column;
}
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, var(--card-glow), transparent 55%);
  opacity: 0; transition: opacity var(--d-mid) var(--e-out);
}
.card:hover { border-color: var(--blue-lt); transform: translateY(-2px); }
.card:hover::after { opacity: 1; }
.card:focus-within { border-color: var(--blue); }

.card__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--tile-a);
}
.card__media img, .card__media .ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--e-out);
}
.card:hover .card__media img, .card:hover .card__media .ph { transform: scale(1.06); }
.card__body { padding: clamp(1.3rem, 2.4vw, 1.9rem); display: grid; gap: .75rem; flex: 1; }
.card__meta {
  font-family: var(--f-label); font-size: var(--t-xs);
  letter-spacing: .01em; color: var(--blue-lt);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
}
.card__t {
  font-size: var(--t-h3); line-height: 1.05;
  letter-spacing: -0.03em;
}
.card__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__x { color: var(--body); font-size: var(--t-sm); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: .5rem; }

.tag {
  display: inline-block;
  font-family: var(--f-label); font-size: 10px;
  letter-spacing: .01em; padding: .35rem .6rem; background: var(--red-solid); color: #fff;
}
.tag--blue { background: var(--blue); }
.tag--ghost { background: transparent; color: var(--body); box-shadow: inset 0 0 0 1px var(--ink-line); }

/* Placeholder art (no photography needed) */
.ph {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px),
    linear-gradient(140deg, var(--tile-a), var(--tile-b));
  position: relative;
}
.ph__mono {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.28);
  }
.ph--blue { background: linear-gradient(140deg, var(--blue-dk), var(--tile-b)); }
.ph--red  { background: linear-gradient(140deg, var(--red-dk), var(--tile-b)); }

/* ---------- 14. Split feature ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split--wide { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); }
  .split--flip > :first-child { order: 2; }
}
.split__body { display: grid; gap: 1.5rem; align-content: start; }

.feature-list { display: grid; gap: 0; border-top: 1px solid var(--ink-line); }
.feature-list li {
  display: grid; gap: .3rem;
  padding-block: 1.15rem; border-bottom: 1px solid var(--ink-line);
}
.feature-list .t { color: var(--body-hi); }

/* ---------- 15. Countdown ---------- */
.countdown { display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.6vw, 1.2rem); }
.cd {
  min-width: clamp(74px, 9vw, 118px);
  padding: clamp(.8rem,1.6vw,1.2rem) clamp(.6rem,1.4vw,1rem);
  background: var(--ink-2); border: 1px solid var(--ink-line);
  text-align: center;
}
.cd__n {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1;
  color: var(--white); font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.cd__l {
  margin-top: .5rem;
  font-family: var(--f-label); font-size: 10px;
  letter-spacing: .01em; color: var(--body);
}

/* Once the date passes, a row of zeroes reads as broken. Swap in a message. */
.cd-done { display: none; }
[data-countdown][data-done="true"] .countdown { display: none; }
[data-countdown][data-done="true"] .cd-done {
  display: block;
  padding: clamp(1rem,2vw,1.4rem) clamp(1.1rem,2vw,1.6rem);
  background: var(--ink-2); border: 1px solid var(--ink-line);
  border-left: 3px solid var(--red);
  color: var(--body-hi);
}
.cd-done b { color: var(--white); }

/* ---------- 16. Accordion ---------- */
.acc { border-top: 1px solid var(--ink-line); }
.acc__item { border-bottom: 1px solid var(--ink-line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: clamp(1.2rem,2.4vw,1.8rem) 0; text-align: left;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -.02em;
  color: var(--white);
  transition: color var(--d-fast) var(--e-out);
}
.acc__btn:hover { color: var(--red-lt); }
.acc__ico { flex: none; width: 22px; height: 22px; position: relative; }
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px;
  background: var(--red); transition: transform var(--d-mid) var(--e-out);
}
.acc__ico::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__ico::after { transform: rotate(0); }
.acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-mid) var(--e-out);
}
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel p { padding-bottom: 1.6rem; max-width: var(--read); }

/* ---------- 17. Forms ---------- */
.field { display: grid; gap: .5rem; }
.field label {
  font-family: var(--f-label); font-size: var(--t-xs);
  letter-spacing: .01em; color: var(--body-hi);
}
.field input, .field textarea {
  width: 100%; padding: .95rem 1.1rem;
  background: var(--ink-2); color: var(--white);
  border: 1px solid var(--ink-line);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.field input::placeholder, .field textarea::placeholder { color: #626880; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: var(--ink-3);
}
.field textarea { resize: vertical; min-height: 140px; }

/* ---------- 18. Footer ---------- */
.foot { border-top: 1px solid var(--ink-line); background: var(--ink); }
.foot__top {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
@media (min-width: 960px) { .foot__top { grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,.6fr)); } }
.foot__h {
  font-family: var(--f-label); font-size: var(--t-xs);
  letter-spacing: .01em; color: var(--body);
  margin-bottom: 1.2rem;
}
.foot__list { display: grid; gap: .7rem; }
.foot__list a { color: var(--body-hi); transition: color var(--d-fast) var(--e-out); }
.foot__list a:hover { color: var(--red-lt); }

.foot__cta { font-size: var(--t-h2); letter-spacing: -.012em; }
.foot__mail {
  display: inline-block; margin-top: 1.2rem;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  color: var(--red-lt); letter-spacing: -.02em;
  border-bottom: 2px solid transparent;
  transition: border-color var(--d-mid) var(--e-out);
}
.foot__mail:hover { border-color: var(--red-lt); }

.social { display: flex; gap: .6rem; margin-top: 1.6rem; }
.social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--ink-line); color: var(--body-hi);
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
.social a:hover { background: var(--red-solid); color: #fff; border-color: var(--red-solid); }

.foot__bot {
  border-top: 1px solid var(--ink-line);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between;
  font-family: var(--f-label); font-size: var(--t-xs);
  letter-spacing: .01em; color: var(--body); /* 7.8:1 on ink */
}

/* ---------- 19. Page intro (inner pages) ---------- */
.phero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(4rem, 10vw, 8rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  isolation: isolate;
}
.phero__bg {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(100% 80% at 85% 0%, var(--pglow-blue), transparent 60%),
    radial-gradient(80% 80% at 5% 78%, var(--pglow-red), transparent 62%);
  /* Fades into the page's ink, as on the homepage, so there is no edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.phero__t { font-size: var(--t-h1); letter-spacing: -.012em; }
.phero__t .hl { color: var(--red); }

.crumb {
  font-family: var(--f-label); font-size: var(--t-xs);
  letter-spacing: .01em; color: var(--body);
  display: flex; gap: .6rem; align-items: center; margin-bottom: 1.4rem;
}
.crumb a:hover { color: var(--red-lt); }

/* ---------- 19b. Internships and placements ----------
   Two rows of logos that loop sideways. Without the script each row is a
   plain strip you can scroll; main.js fills and doubles the row, then turns
   the animation on, so the loop never shows a seam. */
.logos { display: grid; gap: clamp(.9rem, 1.6vw, 1.2rem); }
.logos__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; }
.logos .marquee + .logos__bar { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.logos__h { font-size: var(--t-h3); }

.logos__pause {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  color: var(--body-hi);
  box-shadow: inset 0 0 0 1px var(--ink-line);
  touch-action: manipulation;
  transition: color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.logos__pause:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.logos__pause svg { width: 16px; height: 16px; }
.logos__i-play { display: none; }
.logos.is-paused .logos__i-pause { display: none; }
.logos.is-paused .logos__i-play  { display: block; }
@media (pointer: coarse) { .logos__pause { width: 44px; height: 44px; } }

.marquee {
  --gap: clamp(.7rem, 1.4vw, 1.1rem);
  display: flex;
  overflow-x: auto;
  padding-inline: var(--gut);
}
.marquee[data-ready] {
  overflow: hidden;
  padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track { display: flex; gap: var(--gap); padding-right: var(--gap); flex: none; }
.marquee[data-ready] .marquee__track { animation: marquee var(--dur, 40s) linear infinite; }
.marquee--rev[data-ready] .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.logos.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Logos keep their own colours on a white tile, or the tile matches the
   logo's own ground where the file is a dark band (EY, Kearney). */
.logo {
  position: relative; overflow: hidden;
  flex: none;
  width: clamp(96px, 9vw, 132px); aspect-ratio: 1;
  background: var(--tile, #fff);
  outline: 1px solid var(--ink-line); outline-offset: -1px;
}
.logo img { width: 100%; height: 100%; object-fit: contain; }
/* The organisation's name, shown over the logo on hover (or a tap on touch) */
.logo__name {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: .6rem;
  background: rgba(5, 6, 15, .86); color: #fff;
  font-family: var(--f-label); font-size: var(--t-sm); font-weight: 600;
  line-height: 1.3; text-align: center;
  opacity: 0; transition: opacity var(--d-fast) var(--e-out);
}
.logo:hover .logo__name, .logo.is-named .logo__name { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .marquee[data-ready] .marquee__track { animation: none; }
  .logos__pause { display: none; }
}

/* ---------- 19c. Past speakers ---------- */
.speakers {
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
@media (min-width: 560px)  { .speakers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .speakers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.speaker {
  background: var(--ink);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: grid; align-content: start; gap: .45rem;
}
.speaker__when { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: .01em; color: var(--blue-lt); }
.speaker__name { font-size: var(--t-h3); line-height: 1.15; }
.speaker__role { font-size: var(--t-sm); line-height: 1.55; color: var(--body); }

/* ---------- 19d. Event, seminar and episode lists ---------- */
.eyear { display: flex; align-items: baseline; gap: 1rem; margin: clamp(2.6rem, 5vw, 3.8rem) 0 .9rem; }
.eyear:first-child { margin-top: 0; }
.eyear h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.elist { border-top: 1px solid var(--ink-line); }
.elist__i {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: .3rem 1.5rem; align-items: baseline;
  padding-block: 1.05rem; border-bottom: 1px solid var(--ink-line);
}
.elist__d { font-family: var(--f-label); font-size: var(--t-sm); color: var(--blue-lt); font-variant-numeric: tabular-nums; }
.elist__t { font-size: 1.12rem; line-height: 1.3; letter-spacing: -.005em; }
.elist__t a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--d-mid) var(--e-out);
}
.elist__t a:hover, .elist__t a:focus-visible { background-size: 100% 1.5px; }
.elist__x { margin-top: .2rem; font-size: var(--t-sm); line-height: 1.55; color: var(--body); }
.elist__tag { justify-self: end; }
@media (max-width: 640px) {
  .elist__i { grid-template-columns: minmax(0, 1fr) auto; }
  .elist__d { grid-column: 1 / -1; }
}

/* Key facts, as small labelled boxes */
.facts { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.facts > div { padding: .95rem 1.1rem; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-line); }
.facts dt { font-family: var(--f-label); font-size: var(--t-xs); color: var(--body); }
.facts dd { margin: .3rem 0 0; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.25; color: var(--white); }

/* Olympiad winners */
.winners { display: grid; gap: 1rem; }
.winners li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .8rem; align-items: baseline; }
.winners__place { font-family: var(--f-label); font-size: var(--t-xs); color: var(--red); }
.winners b { color: var(--white); font-weight: 600; }
.winners__school { display: block; margin-top: .1rem; font-size: var(--t-sm); color: var(--body); }

/* ---------- 19e. What's next (homepage) ----------
   A small card in the corner that cycles through what is coming up. On a
   phone it waits until the reader has scrolled past the hero, so it never
   covers the social links there. */
.next {
  position: fixed; z-index: 95;
  right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem);
  width: min(20rem, calc(100vw - 1.5rem));
  padding: .95rem 1.1rem 1rem 1.3rem;
  background: var(--ink-2);
  box-shadow: inset 3px 0 0 var(--red), 0 0 0 1px var(--ink-line), 0 24px 48px -24px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.next.is-on { opacity: 1; transform: none; }
.next__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.next__label { font-family: var(--f-label); font-size: var(--t-xs); color: var(--body); }
.next__close { width: 32px; height: 32px; margin: -8px -8px -8px 0; display: grid; place-items: center; color: var(--body); }
.next__close:hover { color: var(--white); }
.next__close svg { width: 14px; height: 14px; }
.next__item { transition: opacity 260ms var(--e-out); }
.next__item.is-fading { opacity: 0; }
.next__item a { display: block; }
.next__t { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--white); }
.next__d { display: block; margin-top: .15rem; font-size: var(--t-sm); color: var(--body-hi); }
.next__item a:hover .next__t, .next__item a:focus-visible .next__t { text-decoration: underline; text-underline-offset: 3px; }
.next__dots { display: flex; margin: .4rem 0 -.3rem -8px; }
.next__dots button { width: 24px; height: 24px; display: grid; place-items: center; }
.next__dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--body);
  transition: background var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.next__dots button[aria-pressed="true"]::before { background: var(--red); box-shadow: none; }
@media (pointer: coarse) {
  .next__close { width: 44px; height: 44px; margin: -14px -14px -14px 0; }
  .next__dots button { width: 32px; height: 32px; }
}

/* ---------- 20. Grain overlay ---------- */
.noise {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .03; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 21b. Touch comfort ----------
   Small text links are fine to click with a mouse but cramped under a thumb.
   Grow the hit area on coarse pointers only, so desktop spacing is untouched. */
@media (pointer: coarse) {
  .tlink { padding-block: .55rem; }
  .brand { min-height: 44px; }
  .foot__list a,
  .crumb a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .foot__list { gap: .2rem; }
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}