/* ============================================================
   IEEE GRSS x AESS Sup'Com: visual system
   No framework, no build step. See DESIGN.md for the reasoning.
   Every page loads this one stylesheet.

   Same component set as the IAS-IES and MTT-S chapter sites, so the
   three read as siblings: full-bleed hero, a quiet about, a figures
   band over a photograph, full-bleed portrait cards, an event grid,
   a coloured contact band.
   ============================================================ */

:root {
  /* the hero's two-colour blend (headline accent words, both buttons):
     azure leads to about 40% and turns late into a softened ember,
     so the blue stays dominant */
  --blend: linear-gradient(100deg, var(--azure) 0%, #9FCAFC 42%, #C9D8F1 76%, #F2C392 100%);
  color-scheme: dark;

  --void:      #060D1A;
  --surface:   #101A2E;
  --surface-2: #1A2740;

  /* The societies' own blue, sampled from grss-mark.png (#18489C, oklch
     h=261) and aess-mark.png (#18609C, h=249). Twelve degrees apart:
     they are the same blue, so nothing here splits them by hue.
     2.26:1 on the void - a FILL, never text. */
  --brand:      #18489C;
  --brand-deep: #10306A;

  /* The same hue lifted until it can carry text. THE accent. */
  --azure:      #86BFFF;   /* 10.10:1 */
  --azure-soft: #B3D6FF;   /* 12.94:1 */

  /* The warm counterpoint, already in the chapter's own photographs:
     the sodium light at Kairouan, the lecture hall. Dates and figures.
     Never an interaction colour. */
  --ember:     #FFB969;    /* 11.47:1 */

  --ink:       #EAF0FA;    /* 16.98:1 */
  --ink-soft:  #A8B4C8;    /*  9.28:1 */
  --ink-faint: #78869B;    /*  5.26:1 */

  --line:      rgba(134, 191, 255, 0.14);
  --line-firm: rgba(134, 191, 255, 0.30);
  --glow:      rgba(134, 191, 255, 0.26);

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --shell: min(1220px, 92vw);
  --r-sm: 10px;
  --r:    16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters: with max-width alone, any rule that pins a height
   lets the width shrink to the container independently and the aspect
   ratio is destroyed. Rules that genuinely want both axes set
   (object-fit wells) are more specific and still win. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.07;
  margin: 0; letter-spacing: -0.022em;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--azure); color: var(--void); }

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

.shell { width: var(--shell); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--azure); color: var(--void); padding: 12px 20px; font-weight: 500;
}
.skip:focus { left: 0; }

/* ---------- navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  padding: 15px 0;
  transition: padding 0.4s var(--ease), background 0.4s, box-shadow 0.4s;
}
.nav .shell { display: flex; align-items: center; gap: 22px; }
.nav.stuck {
  padding: 8px 0;
  background: rgba(6, 13, 26, 0.9);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--line), 0 18px 44px -34px rgba(0, 0, 0, 0.9);
}
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
/* the chapter's own joint mark, cut from images/brand/joint-lockup.png
   (README: re-cutting the brand marks): the two societies only, since the
   JOINT CHAPTER lines would be noise at nav height */
.brand img { height: 42px; width: auto; transition: height 0.4s var(--ease); }
.nav.stuck .brand img { height: 34px; }

.menu { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.menu a {
  position: relative; padding: 9px 13px; border-radius: 99px;
  font-size: 0.88rem; font-weight: 500; color: var(--ink-soft);
  transition: color 0.3s, background 0.3s;
}
.menu a:hover { color: var(--azure); background: rgba(134, 191, 255, 0.08); }
.menu a.on { color: var(--azure); }
.menu a.on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--azure);
}
.burger { display: none; flex: none; padding: 8px; border-radius: 10px; }
.burger i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); margin: 4px 0; transition: 0.3s var(--ease); }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- shared furniture ---------- */
.sec { padding: 112px 0; }

.eyebrow {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--azure); font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--azure), var(--ember));
}

.sec-head { max-width: 680px; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
/* :not(.eyebrow) is load-bearing: this rule is (0,1,1) and .eyebrow is
   (0,1,0), so without it every eyebrow inside a .sec-head would lose
   its colour and its size to this one. */
.sec-head p:not(.eyebrow) { margin-top: 18px; color: var(--ink-soft); font-size: 1.04rem; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 99px;
  font-weight: 500; font-size: 0.93rem;
  border: 1px solid var(--azure); color: var(--azure);
  transition: background 0.35s var(--ease), color 0.35s, transform 0.35s var(--ease), box-shadow 0.35s;
}
.btn:hover { background: var(--azure); color: var(--void); transform: translateY(-2px); }
/* ink on azure is the VOID, never white: white on azure is 1.92:1 */
/* Both hero buttons run the headline's blend, as on MTT-S: the solid one
   filled with it, the outline one with it in the border AND the label.
   The border is two backgrounds (void on the padding box, the blend on
   the border box), because border-image ignores border-radius. The label
   needs its own span, since the button's background is busy drawing the
   border. Ink on the fill is the void, never white. */
.btn.solid {
  color: var(--void); border-color: transparent; box-shadow: 0 14px 34px -16px var(--glow);
  background:
    var(--blend) padding-box,
    var(--blend) border-box;
}
.btn.solid:hover {
  background:
    linear-gradient(100deg, var(--azure-soft) 0%, #BCDAFC 42%, #DCE6F6 76%, #F7D2AA 100%) padding-box,
    linear-gradient(100deg, var(--azure-soft) 0%, #BCDAFC 42%, #DCE6F6 76%, #F7D2AA 100%) border-box;
  box-shadow: 0 16px 36px -14px rgba(134, 191, 255, 0.5);
}
.hero .btn:not(.solid) {
  border-color: transparent;
  background:
    linear-gradient(var(--void), var(--void)) padding-box,
    var(--blend) border-box;
}
.hero .btn:not(.solid):hover {
  color: var(--void);
  background:
    var(--blend) padding-box,
    var(--blend) border-box;
}
.btn .grad {
  background-image: var(--blend);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn:hover .grad { -webkit-text-fill-color: var(--void); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 36%;
  /* Darkening the IMAGE and lightening the scrim, rather than piling the
     scrim on. Solved against the real pixels: this photograph is a
     bright lecture hall and the headline starts at 32% of the hero, so
     a flat scrim heavy enough for the heading reached only 3.16:1 while
     flattening the picture. brightness(0.55) with the gradient below
     gets the heading to 5.46 AND leaves the widest tonal range of
     anything tried - 0.152 against 0.099 - which is what makes it still
     look like a photograph. Re-measure after any change here. */
  filter: brightness(0.55);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(6,13,26,0.80) 0%,
      rgba(6,13,26,0.16) 22%,
      rgba(6,13,26,0.30) 40%,
      rgba(6,13,26,0.72) 58%,
      rgba(6,13,26,0.92) 80%,
      rgba(6,13,26,0.98) 100%);
}
/* light, as in the sections below: warm ember from the upper right over
   the photo and azure low on the left under the text. Ember sits high
   so it never meets About's own ember glow on the same side. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 52% at 96% 14%, rgba(255, 185, 105, 0.24), transparent 70%),
    radial-gradient(42% 38% at 4% 60%, rgba(134, 191, 255, 0.16), transparent 70%);   /* 60 + 0.7 x 38 = 87%: gone before the edge */
}
.hero-inner { padding: 156px 0 92px; width: 100%; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink);
  background: rgba(6, 13, 26, 0.5); border: 1px solid var(--line-firm);
  padding: 7px 16px; border-radius: 99px; backdrop-filter: blur(8px);
  margin-bottom: 26px;
}
/* Both society names in the SAME azure. Colouring one of them ember
   would make ember a society marker, and the palette rule is that it is
   the warm counterpoint for dates and figures - the two marks really
   are one blue, twelve degrees apart. */
.hero-kicker .g, .hero-kicker .a { color: var(--azure); font-weight: 500; }
/* Two lines at every width, phone included.

   The lever here is the TEXT, not the measure and not the size. At the
   original 49 characters nothing worked: widening max-width from 16ch
   to 24ch, 32ch or 100% still gave three lines, because the headline
   needed more than the 1220px shell to break in two, and reaching two
   lines on a 390px phone would have meant dropping the heading to
   27px - body-copy size. Shortened to 34 characters it breaks in two
   everywhere and the size can stay full.

   Note that character count alone does not decide it: "aerospace" is
   nine letters and cannot break, so some 33-character wordings still
   took three lines while a 34-character one took two. */
.hero h1 {
  font-weight: 700; font-size: clamp(2.6rem, 7vw, 6.2rem);
  letter-spacing: -0.032em; max-width: 16ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}
/* The accent words, one on each line, each run azure into ember, as the
   MTT-S headline runs sky into violet. A light midpoint keeps the blend
   from passing through grey. The fallback is solid azure; only inside
   @supports does the fill go transparent. */
.hero h1 em { font-style: normal; color: var(--azure); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em {
    background-image: var(--blend);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.hero-sub {
  margin-top: 26px; max-width: 56ch; font-size: 1.08rem; color: var(--ink-soft);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.75);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint); z-index: 2;
}
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--azure), var(--ember) 60%, transparent); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: scaleY(0.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
.about-grid h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 13ch; }
.about-body p { color: var(--ink-soft); font-size: 1.07rem; }
.about-body p + p { margin-top: 18px; }
.about-body strong { color: var(--ink); font-weight: 500; }
.about-body a { color: var(--azure); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ============================================================
   FIGURES: four numbers reversed over a photograph
   ============================================================ */
/* ---------- theme band ("What we cover") ----------
   One photograph and a few lines, the second half of About, as on the
   MTT-S site. Darkened from the left where the text sits, the spacecraft
   and the coastline clear on the right, and faded into the navy above and
   below so it flows out of About and into the Board. Static. */
.theme {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(86vh, 780px); display: flex; align-items: center;
}
/* the photo fills the right 72% only, so the spacecraft lands clear of
   the text; its left edge is masked into the navy */
.theme-bg { position: absolute; inset: 0 0 0 28%; z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
          mask-image: linear-gradient(90deg, transparent, #000 32%); }
.theme-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.theme::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(6,13,26,0) 22%, rgba(6,13,26,0) 76%, var(--void) 100%),
    linear-gradient(90deg, rgba(6,13,26,0.94) 0%, rgba(6,13,26,0.78) 34%, rgba(6,13,26,0.24) 62%, rgba(6,13,26,0.04) 100%);
}
.theme-copy { max-width: 540px; padding: 110px 0; }
.theme-copy h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); text-shadow: 0 2px 30px rgba(0,0,0,0.5); }
.theme-copy > p:not(.eyebrow) { margin-top: 18px; color: rgba(237, 240, 249, 0.86); font-size: 1.06rem; text-shadow: 0 1px 16px rgba(0,0,0,0.6); }
.theme-fields { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.theme-fields li { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 2px solid var(--azure); }
.theme-fields li:nth-child(2) { border-color: var(--ember); }
.theme-fields b { font-weight: 500; color: #fff; font-size: 0.95rem; }
.theme-fields span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: rgba(237, 240, 249, 0.72); }
/* phone: the photo becomes a strip above the text instead of behind it */
@media (max-width: 760px) {
  .theme { display: block; min-height: 0; }
  .theme-bg { position: relative; inset: auto; height: 300px; z-index: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); }
  .theme::before { display: none; }
  .theme-copy { padding: 8px 0 90px; }
  .theme-fields { grid-template-columns: 1fr; }
}

.figures { position: relative; padding: 112px 0; overflow: hidden; isolation: isolate; }
.figures-bg { position: absolute; inset: 0; z-index: -2; }
.figures-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  /* darkening the photograph rather than thickening the scrim keeps its
     texture while the figures stay legible */
  filter: brightness(0.5);
}
.figures { padding: 150px 0; }
.figures::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(6,13,26,0) 26%, rgba(6,13,26,0) 74%, var(--void) 100%),
    linear-gradient(104deg,
    rgba(6,13,26,0.93) 0%,
    rgba(16,48,106,0.80) 46%,
    rgba(6,13,26,0.90) 100%);
}
.figures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.figure b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.95;
  letter-spacing: -0.04em; color: var(--ember);
  /* reserve the final width so the count-up cannot reflow the row */
  font-variant-numeric: tabular-nums;
}
.figure span {
  display: block; margin-top: 12px; font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(234, 240, 250, 0.84);
}

/* ---------- board ---------- */
.board-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.member {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  flex: 0 1 calc((100% - 2 * 20px) / 3);
  border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), border-color 0.45s, box-shadow 0.45s;
}
.member:hover { transform: translateY(-6px); border-color: var(--line-firm); box-shadow: 0 28px 56px -30px var(--glow); }
.member > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  transition: transform 0.8s var(--ease);
}
.member:hover > img { transform: scale(1.05); }
.member-body {
  position: absolute; inset: auto 0 0 0; padding: 60px 20px 20px;
  background: linear-gradient(to top,
    rgba(6,13,26,0.97) 32%, rgba(6,13,26,0.78) 60%, transparent);
}
.member h3 { font-size: 1.04rem; }
/* Facebook then LinkedIn, the footer's order. Pinned to the card, not inside
   the caption, so on phones it can move to the top corner and leave the
   caption short enough not to cover the face. The anchors are display:grid,
   so the row needs its own flex context or the second one stacks. */
.member .member-body { padding-right: 98px; }
.member-social { position: absolute; right: 20px; bottom: 22px; z-index: 1; display: flex; gap: 8px; }
.member-social a {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-firm); color: var(--ink); background: rgba(6,13,26,0.55);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.member-social a:hover { background: var(--azure); color: var(--void); transform: translateY(-3px); }
.member-social svg { width: 14px; height: 14px; fill: currentColor; }
.member-body p {
  margin-top: 5px; font-family: var(--mono); font-size: 0.63rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember);
}

/* ---------- events ---------- */
.year { margin-bottom: 56px; }
.year > h3 {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em;
  color: var(--azure); margin-bottom: 24px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); font-weight: 500;
  display: flex; align-items: baseline; gap: 12px;
}
.year > h3 span { color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.1em; }
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ev {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease), border-color 0.45s, box-shadow 0.45s;
}
.ev:hover { transform: translateY(-6px); border-color: var(--line-firm); box-shadow: 0 28px 56px -32px var(--glow); }
.ev-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.ev-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ev:hover .ev-img img { transform: scale(1.05); }
.ev-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ev-body h4 { font-size: 1.02rem; line-height: 1.3; font-weight: 600; font-family: var(--display); }
.ev-body h4 a { transition: color 0.3s; }
.ev:hover .ev-body h4 a { color: var(--azure); }
.ev p.note { color: var(--ink-soft); font-size: 0.93rem; }
.meta { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); margin-top: auto; }
/* A card with no photograph of its own, because none honestly exists:
   the training series left Slack screenshots, not maps. It used to be a
   flat box with an ember stripe down its side; now it carries a plate of
   satellite imagery like every other card carries a photo. The plate is
   decoration (alt="", aria-hidden), Earth seen from orbit, never passed
   off as a picture of the event. Unsplash License, from
   unsplash.com/photos/: _SFJhRPzJHs (earth-night-city), 35Z2ylLRCO8
   (earth-river-fields), eGGENWtikd0 (earth-delta), opZ--yE1-hg
   (earth-coast). One image per kind of card, none repeated on a page. */
.ev-plate img { filter: saturate(0.82) brightness(0.86); }
.ev:hover .ev-plate img { filter: saturate(1) brightness(0.95); }
.ev-plate img { transition: transform 0.8s var(--ease), filter 0.6s; }
.gis-list { display: grid; gap: 7px; margin-top: 2px; }
.gis-list li { display: flex; gap: 11px; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.gis-list b { flex: none; font-family: var(--mono); font-size: 0.68rem; color: var(--ember); font-weight: 500; padding-top: 2px; }
/* What kind of event, above the title: the same mono-ember voice as a
   board member's role. */
.ev .tag {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ember);
}
/* The newest event: two columns wide, photograph beside the text. */
.ev--lead { grid-column: span 2; flex-direction: row; }
.ev--lead .ev-img { flex: 0 0 60%; aspect-ratio: auto; min-height: 100%; }
.ev--lead .ev-body { padding: 28px 30px 30px; gap: 12px; }
.ev--lead .ev-body h4 { font-size: 1.4rem; }
.ev-more { margin-top: -8px; display: flex; justify-content: center; }
#evGrid + .ev-more { margin-top: 48px; }   /* the year groups used to give this gap */

/* Year tabs on the home page's What we run, built by grss.js from each
   card's data-year, as on the IAS-IES site. Hidden until the script runs,
   so without JavaScript every card simply shows. */
.ev-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: -18px 0 36px; }
.ev-tabs[hidden] { display: none; }
.ev-tab {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line-firm); color: var(--ink-soft); background: none;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.ev-tab:hover { color: var(--azure); border-color: var(--azure); }
/* ink on azure is the void, never white (DESIGN.md) */
.ev-tab.is-on { color: var(--void); background: var(--azure); border-color: var(--azure); box-shadow: 0 10px 26px -12px var(--glow); }
.ev-tab-n { font-size: 0.64rem; color: var(--ink-faint); }
.ev-tab:hover .ev-tab-n { color: var(--azure-soft); }
.ev-tab.is-on .ev-tab-n { color: var(--brand-deep); }
.ev-tab:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; }
#evGrid .ev[hidden] { display: none; }

/* ---------- one sky, top to bottom ----------
   The sections each had their own background (flat navy, one lit board,
   hard-edged photo bands, a bright blue block) and read as separate
   pages. Now they share ONE texture, the faint 44px grid the contact band
   uses, and ONE vocabulary of light: azure and ember glows that alternate
   side and colour down the page. Every texture fades out before its
   section's edge, and the photo bands fade in and out of the navy the
   same way, so there are no seams. Static: nothing moves. */
#about, #board, #events { position: relative; isolation: isolate; overflow: hidden; }
#about::before, #board::before, #events::before,
#about::after,  #board::after,  #events::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
#about::after, #board::after, #events::after {
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 10%, transparent 80%);
          mask-image: radial-gradient(75% 70% at 50% 50%, #000 10%, transparent 80%);
}
/* one glow per section, alternating side AND colour: About ember right,
   Board azure left, What we run ember right, then Contact opens azure on
   the left. Two glows of one colour on the same side of a boundary read
   as one lumpy blot. Each fades out (70% of its radius) inside its own
   section, or it is cut off at the edge and shows as a step. */
#about::before  { background: radial-gradient(44% 62% at 97% 50%, rgba(255, 185, 105, 0.11), transparent 70%); }
#board::before  { background: radial-gradient(44% 52% at 2% 46%, rgba(134, 191, 255, 0.16), transparent 70%); }
#events::before { background: radial-gradient(46% 48% at 98% 52%, rgba(255, 185, 105, 0.10), transparent 70%); }
#board::before {
  background:
    radial-gradient(44% 52% at 2% 42%, rgba(134, 191, 255, 0.16), transparent 70%),
    radial-gradient(40% 46% at 98% 62%, rgba(255, 185, 105, 0.10), transparent 70%);
}
#board::after {
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 10%, transparent 80%);
          mask-image: radial-gradient(75% 70% at 50% 50%, #000 10%, transparent 80%);
}

/* ---------- contact ---------- */
.contact { background: var(--brand-deep); }
/* The contact sections (home and contact page; the inner pages' closing
   band also uses .contact and keeps the plain blue): two glows, azure from
   the top left and ember faint at the bottom right, a fine grid fading to
   the edges, the details as icon cards and the form on frosted glass.
   Same arrangement as the IAS-IES and MTT-S sites, in this site's colours. */
.sec.contact {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(134, 191, 255, 0.20), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(255, 185, 105, 0.14), transparent 70%),
    linear-gradient(150deg, #16408A 0%, var(--brand-deep) 55%, #0B2350 100%);
}
/* the band rises out of the navy above it rather than starting on a line */
.sec.contact::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 200px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--void), rgba(6,13,26,0));
}
.sec.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 40%, #000, transparent 85%);
          mask-image: radial-gradient(80% 90% at 50% 40%, #000, transparent 85%);
}
.contact-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }
.contact h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); color: #fff; }
.contact .eyebrow { color: #CFE4FF; }
.contact .eyebrow::before { background: linear-gradient(90deg, #CFE4FF, var(--ember)); }
.contact-lede { margin-top: 16px; max-width: 42ch; color: rgba(255,255,255,0.84); font-size: 1.04rem; }

.contact-cards { margin-top: 30px; display: grid; gap: 12px; }
.contact-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: var(--r);
  background: rgba(6, 13, 26, 0.26); border: 1px solid rgba(255,255,255,0.13);
  transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.contact-card:hover { background: rgba(6, 13, 26, 0.36); border-color: rgba(207, 228, 255, 0.38); transform: translateX(4px); }
.contact-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(207, 228, 255, 0.14); border: 1px solid rgba(207, 228, 255, 0.3); color: #CFE4FF;
}
.contact-ico svg { width: 19px; height: 19px; fill: currentColor; }
.contact-txt { min-width: 0; }
.contact-txt b {
  display: block; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.64); font-weight: 500; margin-bottom: 3px;
}
.contact-txt > span { display: block; color: #fff; font-size: 0.98rem; line-height: 1.45; }
.contact-txt a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 3px; transition: text-decoration-color 0.3s; }
.contact-txt a:hover { text-decoration-color: #fff; }
.contact-txt a.mail { overflow-wrap: anywhere; }
.contact-intro .socials { margin-top: 22px; }

.contact-form {
  padding: 32px; border-radius: 24px;
  background: rgba(6, 13, 26, 0.36); border: 1px solid rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
.form-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 24px; }
.form-head h3 { font-family: var(--display); font-size: 1.3rem; color: #fff; }
.form-tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #CFE4FF; padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(207, 228, 255, 0.38);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%; font: inherit; color: #fff;
  background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(255,255,255,0.17);
  border-radius: var(--r-sm); padding: 13px 15px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: rgba(255,255,255,0.3); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--azure); background: rgba(0, 0, 0, 0.34);
  box-shadow: 0 0 0 4px rgba(134, 191, 255, 0.2);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.4); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.form-note { font-size: 0.82rem; color: rgba(255,255,255,0.72); flex: 1 1 200px; }
.form-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.btn.onband { background: #fff; color: var(--brand-deep); border-color: #fff; }
.btn.onband:hover { background: var(--ember); color: var(--void); border-color: var(--ember); }
.btn.onband svg { width: 15px; height: 15px; fill: currentColor; transition: transform 0.35s var(--ease); }
.btn.onband:hover svg { transform: translateX(3px); }

/* ---------- footer ---------- */
.foot { background: var(--void); padding: 72px 0 30px; border-top: 1px solid var(--line); }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.foot-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
/* the full lockup, driven by width so the JOINT CHAPTER lines stay legible */
.foot-brand img { width: min(300px, 100%); height: auto; }
.foot p.about { color: var(--ink-soft); font-size: 0.94rem; max-width: 38ch; }
.foot h4 { font-size: 0.72rem; font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; font-weight: 500; }
.foot li + li { margin-top: 9px; }
.foot li a { font-size: 0.94rem; color: var(--ink-soft); transition: color 0.3s; }
.foot li a:hover { color: var(--azure); }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-firm); color: var(--ink);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.socials a:hover { background: var(--azure); color: var(--void); transform: translateY(-3px); }
.socials svg { width: 15px; height: 15px; fill: currentColor; }
.foot-base {
  margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 0.84rem; color: var(--ink-faint);
}

/* ============================================================
   INNER PAGES: about, activities, blog, contact, the write-ups
   and the 404. Same tokens and components as the home page; what
   follows is only what those pages need that the home does not.
   ============================================================ */

/* A shorter hero: a photograph under the heading, darkened the same
   way as the home hero (the image, not a heavier scrim). */
.page-hero {
  position: relative; min-height: min(64svh, 620px);
  display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
}
.page-hero-bg { position: absolute; inset: 0; z-index: -2; }
.page-hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  filter: brightness(0.5);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    rgba(6,13,26,0.82) 0%, rgba(6,13,26,0.28) 30%,
    rgba(6,13,26,0.70) 64%, rgba(6,13,26,1) 100%);
}
/* No photograph: the brand blue as light, for pages that have none. */
.page-hero.plain::before {
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(24,72,156,0.55), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(255,185,105,0.10), transparent 70%),
    var(--void);
}
.page-hero-inner { width: 100%; padding: 150px 0 64px; }
.page-hero h1 {
  font-weight: 700; font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}
.page-hero h1 em { font-style: normal; color: var(--azure); }
.page-hero .lede {
  margin-top: 20px; max-width: 60ch; font-size: 1.08rem; color: var(--ink-soft);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.7);
}
.page-hero .hero-cta { margin-top: 30px; }
.page-hero.tall { min-height: 100svh; }
.crumbs {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s;
}
.crumbs:hover { color: var(--azure); }

.sec.tight { padding-top: 72px; }
.sec.ruled { border-top: 1px solid var(--line); }

/* ---------- long-form text ---------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); font-size: 1.06rem; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose em { font-style: italic; color: var(--ink); }
.prose a { color: var(--azure); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul { display: grid; gap: 10px; }
.prose li {
  position: relative; padding-left: 26px; color: var(--ink-soft); font-size: 1.02rem;
}
.prose li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 12px; height: 2px; border-radius: 2px; background: var(--ember);
}
.prose ol { counter-reset: n; display: grid; gap: 10px; }
.prose ol li { counter-increment: n; padding-left: 38px; }
.prose ol li::before {
  content: counter(n, decimal-leading-zero); width: auto; height: auto; background: none;
  top: 0.2em; font-family: var(--mono); font-size: 0.72rem; color: var(--ember);
}

/* ---------- article: text beside an "at a glance" card ---------- */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: start; }
.facts {
  position: sticky; top: 104px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 26px 28px;
}
.facts h3 {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--azure); font-weight: 500; margin-bottom: 18px;
}
.facts dl { margin: 0; display: grid; gap: 14px; }
.facts dt {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.facts dd { margin: 3px 0 0; font-size: 0.96rem; color: var(--ink); }
.facts dd a { color: var(--azure); }
.facts .btn { margin-top: 22px; width: 100%; justify-content: center; }

.shot { margin: 0; }
.shot img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.shot figcaption, .caption {
  margin-top: 12px; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.06em; color: var(--ink-faint);
}

/* Photographs that open larger. The lightbox is a native <dialog>. */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm);
  border: 1px solid var(--line); cursor: zoom-in;
  transition: transform 0.45s var(--ease), border-color 0.45s;
}
.gallery img:hover { transform: translateY(-3px); border-color: var(--line-firm); }
.lightbox {
  padding: 0; border: 0; background: none; max-width: min(1200px, 94vw); max-height: 92vh;
}
.lightbox::backdrop { background: rgba(6, 13, 26, 0.92); backdrop-filter: blur(6px); }
.lightbox img { max-height: 86vh; width: auto; margin-inline: auto; border-radius: var(--r-sm); }
.lightbox p { margin-top: 10px; text-align: center; font-size: 0.88rem; color: var(--ink-soft); }
.lightbox-close {
  position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem; line-height: 1;
  border: 1px solid var(--line-firm); color: var(--ink); background: rgba(6, 13, 26, 0.6);
}
.lightbox-close:hover { background: var(--azure); color: var(--void); }

/* ---------- about: the two societies ---------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.society {
  position: relative; overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--line); padding: 34px 32px 34px;
  background: linear-gradient(160deg, rgba(24,72,156,0.42), var(--surface) 62%);
}
.society.aess { background: linear-gradient(160deg, rgba(24,96,156,0.30), var(--surface) 62%); }
.society img { height: 58px; width: auto; margin-bottom: 26px; }
.society h3 { font-size: 1.45rem; }
.society .what {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember);
}
.society p { margin-top: 18px; color: var(--ink-soft); }

/* ---------- about: milestones ---------- */
.timeline { position: relative; display: grid; gap: 0; max-width: 900px; }
.timeline li {
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline time {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ember); padding-top: 5px;
}
.timeline h3 { font-size: 1.22rem; }
.timeline p { margin-top: 8px; color: var(--ink-soft); }
.timeline a { color: var(--azure); }

/* ---------- activities: filter by kind ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line-firm);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.chip b { font-weight: 500; color: var(--ink-faint); transition: color 0.3s; }
.chip:hover { color: var(--azure); border-color: var(--azure); }
.chip[aria-pressed="true"] { background: var(--azure); border-color: var(--azure); color: var(--void); }
.chip[aria-pressed="true"] b { color: var(--brand-deep); }
.year[hidden], .ev[hidden] { display: none; }
/* With a filter on, the lead card is one card among others. */
.filtered .ev--lead { grid-column: auto; flex-direction: column; }
.filtered .ev--lead .ev-img { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
.filtered .ev--lead .ev-body { padding: 20px 22px 22px; }
.filtered .ev--lead .ev-body h4 { font-size: 1.02rem; }

/* ---------- closing band, the home contact band in short ---------- */
.cta-band { padding: 88px 0; }
.cta-band .shell { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cta-band h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); color: #fff; max-width: 18ch; }
.cta-band p:not(.eyebrow) { margin-top: 14px; color: rgba(255,255,255,0.8); max-width: 52ch; }

/* ---------- contact page ---------- */
.contact .socials a { border-color: rgba(255,255,255,0.4); color: #fff; }
.contact .socials a:hover { background: #fff; color: var(--brand-deep); }

/* ---------- motion ---------- */
.rise { opacity: 0; transform: translateY(14px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .ev-grid { grid-template-columns: repeat(2, 1fr); }
  .figures-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .member { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 900px) {
  .sec, .figures { padding: 76px 0; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .article-grid { grid-template-columns: 1fr; gap: 40px; }
  .facts { position: static; }
  .pair { grid-template-columns: 1fr; }
  .page-hero-inner { padding: 128px 0 52px; }
  .cta-band { padding: 68px 0; }
  .about-grid h2 { max-width: none; }
  .hero-inner { padding: 132px 0 78px; }
  /* the cue sits on top of the second button once the CTA row wraps */
  .scroll-cue { display: none; }

  .burger { display: block; }
  .menu {
    position: absolute; top: calc(100% + 8px); left: 4vw; right: 4vw;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
    background: rgba(6, 13, 26, 0.97); backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.95);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0.3s;
  }
  .menu.open { opacity: 1; visibility: visible; transform: none; }
  .menu a { padding: 13px 16px; font-size: 1rem; }
  .menu a.on::after { display: none; }
  .nav .shell { position: relative; }
}

@media (max-width: 640px) {
  .ev-grid, .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 24px 20px; }
  .contact-card { padding: 12px 14px; gap: 13px; }
  .contact-ico { width: 38px; height: 38px; }
  .ev--lead { grid-column: auto; flex-direction: column; }
  .ev--lead .ev-img { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .ev--lead .ev-body { padding: 20px 22px 22px; }
  .ev--lead .ev-body h4 { font-size: 1.15rem; }
  .figures-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { max-width: 100%; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; }
  .society { padding: 28px 24px; }
  /* Cards are ~160px wide here: name and icons can't share a line, so the
     icons go to the top corner, over background rather than face. */
  .member .member-body { padding: 48px 14px 14px; }
  .member-social { top: 10px; right: 10px; bottom: auto; gap: 6px; }
  .member-social a { width: 28px; height: 28px; backdrop-filter: blur(4px); }
  .member-social svg { width: 12px; height: 12px; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; }
}