/* Sia Eu Jin — Stage. Component styles.
   Every colour, space and family comes from tokens.css. Class prefix: ej-.
   Nothing here is italic, rounded or shadowed. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { margin: 0; background: var(--void); color: var(--white); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; letter-spacing: -.005em; }
::selection { background: var(--heat); color: var(--white); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }

/* ---------- Type ---------- */
.ej-mega { font-weight: 800; font-size: clamp(64px, 14.4vw, 240px); line-height: .84; letter-spacing: -.055em; text-transform: uppercase; font-stretch: 100%; }
.ej-display { font-weight: 800; font-size: clamp(52px, 9.4vw, 160px); line-height: .86; letter-spacing: -.05em; text-transform: uppercase; }
.ej-headline { font-weight: 800; font-size: clamp(36px, 5vw, 88px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.ej-title { font-weight: 700; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -.02em; }
.ej-lead { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; letter-spacing: -.01em; color: var(--white-soft); max-width: var(--measure); }
.ej-lead + .ej-lead { margin-top: var(--space-4); }
.ej-lead strong { font-weight: 600; color: var(--white); }
.ej-body { font-size: 16px; line-height: 1.55; color: var(--white-soft); max-width: var(--measure); }
.ej-label { font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: -.005em; }
.ej-caption { font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white-faint); }
.ej-soft { color: var(--white-soft); }
.ej-faint { color: var(--white-faint); }

/* Light-filled type: the rotating light, poured into letters. */
.ej-lit { background-image: linear-gradient(90deg, var(--heat), var(--magenta), var(--violet), var(--ion), var(--violet), var(--magenta), var(--heat), var(--flare), var(--heat));
  background-size: 200% 100%; background-repeat: repeat; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ej-sweep var(--spin-period) linear infinite; }
@keyframes ej-sweep { to { background-position: 200% 0; } }

/* ---------- Links (no buttons, no pills) ---------- */
.ej-link { display: inline-flex; align-items: center; gap: .4em; color: var(--white); text-decoration: none; padding-bottom: 3px; background: linear-gradient(var(--white), var(--white)) left bottom / 100% 1px no-repeat; transition: background-size .3s ease-out; }
.ej-link:hover { background-size: 0 1px; background-position: right bottom; }
.ej-link svg { width: .7em; height: .7em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; transition: transform .3s ease-out; }
.ej-link:hover svg { transform: translate(2px, -2px); }
.ej-link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* ---------- Screen + frame ---------- */
.ej-screen { position: relative; isolation: isolate; overflow: hidden; min-height: var(--screen-height); background: var(--void); display: flex; flex-direction: column; }
.ej-screen__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: var(--space-16) var(--frame-inset); }
.ej-hero .ej-screen__body { padding-top: calc(var(--frame-inset) + var(--space-16)); padding-bottom: calc(var(--frame-inset) + var(--space-16)); }
.ej-frame { position: absolute; inset: var(--frame-inset); z-index: 4; pointer-events: none; font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: -.005em; color: var(--white); }
.ej-frame > span { position: absolute; max-width: 45%; }
.ej-frame > :nth-child(1) { top: 0; left: 0; }
.ej-frame > :nth-child(2) { top: 0; right: 0; text-align: right; }
.ej-frame > :nth-child(3) { bottom: 0; left: 0; }
.ej-frame > :nth-child(4) { bottom: 0; right: 0; text-align: right; }

/* ---------- The light ----------
   A row of vertical blocks. Heights follow a bell curve (one or two peaks) with a little
   jitter, so the skyline is rough but reads as a gradient. Every block carries the same
   colour bands at the same absolute height; each one runs a little behind its neighbour,
   so the colour ripples outward from the peak. scripts/site.js builds the blocks; without
   it the container keeps a soft glow. */
.ej-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: flex; align-items: flex-end;
  background: radial-gradient(55% 45% at 50% 100%, color-mix(in srgb, var(--heat) 55%, transparent), color-mix(in srgb, var(--violet) 25%, transparent) 55%, transparent 80%); }
.ej-light.is-built { background: none; }
.ej-strip { position: relative; flex: 0 0 var(--w); height: calc(var(--h) * 100%); overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / .82) 28%, rgb(0 0 0 / .35) 70%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / .82) 28%, rgb(0 0 0 / .35) 70%, transparent 100%); }
.ej-strip > b { position: absolute; left: 0; right: 0; bottom: 0; height: calc(200% / var(--h)); will-change: transform;
  background: var(--wave) 0 0 / 100% 50% repeat-y; animation: ej-wave var(--wave-period) linear infinite; animation-delay: var(--d); }
/* Per-block shade, as an overlay rather than a filter so the animation stays on the compositor. */
.ej-strip::after { content: ""; position: absolute; inset: 0; background: rgb(5 5 5 / var(--k, 0)); }
@keyframes ej-wave { from { transform: translateY(0); } to { transform: translateY(50%); } }
.ej-light { --wave: linear-gradient(to top, var(--flare), var(--heat) 12%, var(--magenta) 28%, var(--violet) 44%, var(--ion) 52%, var(--violet) 60%, var(--magenta) 74%, var(--heat) 88%, var(--flare)); }
.ej-light--cool { --wave: linear-gradient(to top, var(--magenta), var(--violet) 16%, var(--ion) 34%, var(--violet) 50%, var(--magenta) 64%, var(--heat) 76%, var(--violet) 90%, var(--magenta));
  background: radial-gradient(55% 45% at 65% 100%, color-mix(in srgb, var(--violet) 55%, transparent), transparent 75%); }
.ej-light.is-idle .ej-strip > b { animation-play-state: paused; }

.ej-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; opacity: .3; mix-blend-mode: overlay; }

/* ---------- Image slots ---------- */
.ej-slot { position: relative; overflow: hidden; margin: 0; background: var(--void-raised); min-height: 320px; }
.ej-slot > img, .ej-slot > video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ej-slot__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-10); text-align: center; border: 1px solid var(--void-line);
  background:
    radial-gradient(70% 45% at 50% 112%, color-mix(in srgb, var(--heat) 45%, transparent), transparent 70%),
    radial-gradient(110% 70% at 50% 120%, color-mix(in srgb, var(--violet) 40%, transparent), transparent 72%),
    var(--void-raised); }
.ej-slot__ph::before { content: ""; width: 56px; height: 56px; margin-bottom: var(--space-4);
  background: linear-gradient(var(--white-faint), var(--white-faint)) center / 1px 100% no-repeat, linear-gradient(var(--white-faint), var(--white-faint)) center / 100% 1px no-repeat; }
.ej-slot__k { font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white-faint); }
.ej-slot__v { font-weight: 800; font-size: clamp(22px, 2.2vw, 32px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--white); }
.ej-slot__n { font-size: 14px; line-height: 1.45; color: var(--white-soft); max-width: 32ch; }
.ej-slot--mid .ej-slot__ph { justify-content: flex-start; padding-top: calc(var(--screen-height) * .36); }
.ej-slot--corner .ej-slot__ph { align-items: flex-end; justify-content: flex-start; text-align: right; padding: calc(var(--frame-inset) + var(--space-16)) var(--frame-inset); }
.ej-slot--mid .ej-slot__ph::before, .ej-slot--corner .ej-slot__ph::before { display: none; }

/* ---------- Hero ---------- */
.ej-hero .ej-screen__body { justify-content: flex-end; }
.ej-hero__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-12); margin-bottom: var(--space-8); }
.ej-hero__intro .ej-lead { color: var(--white); max-width: 30ch; font-size: clamp(18px, 1.7vw, 26px); }
.ej-hero__fields { text-align: right; }
.ej-hero__name { margin-left: -.04em; text-align: left; white-space: nowrap; font-size: clamp(56px, 17.6vw, 300px); }

/* ---------- Split (half picture, half words) ---------- */
.ej-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: var(--screen-height); background: var(--void); }
.ej-split__media { position: relative; min-height: var(--screen-height); }
.ej-split__media > .ej-slot { position: absolute; inset: 0; }
.ej-split--flip .ej-split__media { order: 2; }
.ej-split__text { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: var(--space-16); }
.ej-split__text > .ej-light, .ej-split__text > .ej-grain { z-index: -1; }
.ej-split__text .ej-display { font-size: clamp(48px, 7.2vw, 124px); }
.ej-split__text .ej-lead { font-size: clamp(16px, 1.25vw, 19px); }
.ej-split__text .ej-display + *, .ej-split__text .ej-headline + * { margin-top: var(--space-8); }
.ej-split__foot { margin-top: var(--space-12); }

/* Facts: caption over value, laid in a grid. Never pills. */
.ej-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
.ej-facts--wide { grid-template-columns: 1fr; }
.ej-facts > div { padding-top: var(--space-3); border-top: 1px solid var(--void-line); }
.ej-facts dt { font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white-faint); }
.ej-facts dd { margin-top: var(--space-2); font-size: 16px; line-height: 1.45; color: var(--white); }

.ej-proj__meta { display: flex; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.ej-proj__ctx { margin-top: var(--space-4); color: var(--white-soft); }

/* ---------- Record ---------- */
.ej-record .ej-screen__body { justify-content: space-between; }
.ej-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-4); }
.ej-grades__g { font-weight: 800; font-size: clamp(80px, 12.5vw, 210px); line-height: .82; letter-spacing: -.06em; }
.ej-grades__s { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--white); font-size: 13px; font-weight: 500; }
.ej-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-10); }
.ej-stats__v { font-weight: 800; font-size: clamp(32px, 4vw, 64px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.ej-stats__k { margin-top: var(--space-3); font-size: 14px; line-height: 1.4; max-width: 30ch; }

/* ---------- Results board ---------- */
.ej-board .ej-screen__body { justify-content: space-between; }
.ej-board__rows { margin-top: var(--space-8); border-top: 1px solid var(--void-line); }
.ej-board__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--space-8); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--void-line); }
.ej-board__res { font-weight: 800; font-size: clamp(40px, 4.6vw, 80px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; }
.ej-board__name { font-weight: 700; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.15; letter-spacing: -.015em; }
.ej-board__note { margin-top: var(--space-1); font-size: 14px; line-height: 1.4; color: var(--white-soft); }
.ej-board__when { text-align: right; font-size: 13px; font-weight: 500; color: var(--white-faint); }
.ej-board__when span { display: block; margin-bottom: var(--space-1); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white-soft); }
.ej-board__sub { padding: var(--space-10) 0 var(--space-3); border-bottom: 1px solid var(--void-line); }
/* Entries rather than results: drawn in outline, one size down, no light poured in. */
.ej-board__row--minor { padding: var(--space-2) 0; }
.ej-board__row--minor .ej-board__res { font-size: clamp(26px, 2.6vw, 44px); color: transparent; -webkit-text-stroke: 1px var(--minor); }
.ej-board__row--minor .ej-board__name { font-weight: 600; color: var(--white-soft); }
.ej-board__row--minor .ej-board__when span { color: var(--white-faint); }

/* ---------- Full-bleed photo with words over it ---------- */
.ej-bleed { position: relative; isolation: isolate; min-height: var(--screen-height); display: flex; flex-direction: column; overflow: hidden; }
.ej-bleed > .ej-slot { position: absolute; inset: 0; z-index: 0; }
.ej-bleed__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--scrim) 0%, var(--scrim) 26%, transparent 72%), linear-gradient(to bottom, color-mix(in srgb, var(--void) 70%, transparent), transparent 30%); }
.ej-bleed .ej-screen__body { justify-content: space-between; }
/* A real photo behind the words needs a deeper scrim than the placeholder did. */
.ej-bleed > .ej-slot:has(> img) ~ .ej-bleed__veil { background: linear-gradient(to top, var(--scrim) 0%, var(--scrim) 40%, transparent 85%), linear-gradient(to bottom, color-mix(in srgb, var(--void) 70%, transparent), transparent 30%); }
.ej-bleed__foot { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); align-items: end; }
.ej-bleed__role { margin-top: var(--space-4); }

/* ---------- Leadership: lit title, photo cards, words beneath ----------
   The photos are phone shots, so they are shown small, in a fixed 4:3 frame. */
.ej-roles .ej-screen__body { justify-content: center; gap: var(--space-10); }
.ej-roles__title { margin-left: -.04em; font-weight: 800; font-size: clamp(40px, 12.2vw, 216px); line-height: .84; letter-spacing: -.055em; text-transform: uppercase; }
.ej-roles__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.ej-snap { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 var(--space-6); aspect-ratio: 4 / 3; background: var(--void-raised); }
.ej-snap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.ej-roles__item:hover .ej-snap img { transform: scale(1.05); }
.ej-roles .ej-headline { margin-top: var(--space-3); font-size: clamp(30px, 3.4vw, 60px); }
.ej-roles .ej-title { margin-top: var(--space-2); font-size: clamp(18px, 1.6vw, 24px); }
.ej-roles .ej-body { margin-top: var(--space-4); }

/* ---------- Honours ---------- */
.ej-honours .ej-screen__body { justify-content: space-between; }
.ej-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--void-line); border: 1px solid var(--void-line); margin-top: var(--space-12); }
.ej-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-16); min-height: max(52vh, 400px); padding: var(--space-6); background: var(--void); }
.ej-tile::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 55% at 50% 110%, color-mix(in srgb, var(--heat) 70%, transparent), transparent 70%), radial-gradient(130% 80% at 50% 125%, color-mix(in srgb, var(--violet) 60%, transparent), transparent 75%); }
.ej-tile:nth-child(2)::before { filter: hue-rotate(-25deg); }
.ej-tile:nth-child(3)::before { filter: hue-rotate(20deg); }
.ej-tile:nth-child(4)::before { filter: hue-rotate(-50deg); }
.ej-tile__name { font-weight: 800; font-size: clamp(26px, 2.6vw, 40px); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.ej-tile__note { margin-top: var(--space-3); font-size: 15px; line-height: 1.4; }

/* ---------- Programme rows (music) ---------- */
.ej-rows { border-top: 1px solid var(--void-line); }
.ej-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-6); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--void-line); }
.ej-rows__name { font-weight: 800; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase; }
.ej-rows__res { font-weight: 800; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase; text-align: right; }
.ej-rows__note { grid-column: 1 / -1; font-size: 14px; line-height: 1.4; color: var(--white-faint); }

/* ---------- Contact ---------- */
.ej-contact .ej-screen__body { justify-content: flex-end; }
.ej-contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--white); }
.ej-contact__grid dt { font-size: 13px; font-weight: 500; }
.ej-contact__grid dd { margin-top: var(--space-2); font-weight: 700; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.15; letter-spacing: -.02em; }

/* ---------- Hidden SVG filters (theme colour maps for photos) ---------- */
.ej-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Reveal on scroll (only once the script has said it is running) ---------- */
.js .ej-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease-out, transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .ej-reveal.is-in { opacity: 1; transform: none; }

/* ---------- About: the robot drawing ---------- */
.ej-fig { position: absolute; inset: 0; margin: 0; overflow: hidden; isolation: isolate; background-color: var(--void-raised);
  background-image: linear-gradient(color-mix(in srgb, var(--void-line) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--void-line) 55%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center center; }
.ej-fig > .ej-light { z-index: -1; opacity: .5; }
.ej-robot { position: absolute; left: 6%; top: calc(var(--frame-inset) + var(--space-8)); width: 88%; height: calc(100% - 2 * var(--frame-inset) - var(--space-8) - var(--space-12)); }
.ej-fig__cap { position: absolute; right: var(--frame-inset); bottom: var(--frame-inset); max-width: 32ch; text-align: right; font-size: 13px; font-weight: 500; color: var(--white-soft); }
.ej-robot { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ej-robot .r-fill { fill: var(--void-raised); }
.ej-robot .r-soft { stroke: var(--white-soft); stroke-width: 1.2; }
.ej-robot .r-hidden { stroke: var(--white-faint); stroke-width: 1.2; stroke-dasharray: 6 5; }
.ej-robot .r-tread { stroke: var(--white-soft); stroke-width: 9; stroke-dasharray: 5 6.52; stroke-linecap: butt; }
.ej-robot .r-acc { stroke: var(--flare); }
.ej-robot .r-dot { fill: var(--flare); stroke: none; }
.ej-robot .r-lead { stroke: var(--white-faint); stroke-width: 1; }
.ej-robot .r-ground { fill: url(#r-hatch); stroke: none; }
.ej-robot text { stroke: none; fill: var(--white-faint); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ej-robot text.r-t2 { fill: var(--white-soft); font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ej-robot .r-sway, .ej-robot .r-wheel { transform-box: view-box; transform-origin: 220px 420px; animation: r-sway 5.6s ease-in-out infinite; }
.ej-robot .r-wheel { animation-name: r-roll; }
.ej-robot .r-arm { transform-box: view-box; transform-origin: 282px 247px; animation: r-arm 5.6s ease-in-out infinite; }
@keyframes r-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes r-roll { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes r-arm { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-5deg); } }

/* ---------- Record: the scholarship comes first ---------- */
.ej-record__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); align-items: end; }
.ej-record__top .ej-display { font-size: clamp(48px, 8.2vw, 150px); }
.ej-record__scholar { padding-top: var(--space-4); border-top: 1px solid var(--white); }
.ej-record__scholar .ej-headline { margin: var(--space-3) 0 var(--space-4); font-size: clamp(48px, 6.4vw, 112px); }
.ej-record__scholar .ej-lead { font-size: clamp(16px, 1.25vw, 19px); }
.ej-record .ej-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }

/* ---------- IJCO: Team Malaysia and the route ---------- */
.ej-ijco .ej-screen__body { justify-content: center; }
.ej-ijco__title { margin-top: var(--space-4); font-size: clamp(40px, 7vw, 128px); }
.ej-ijco__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); align-items: start; margin-top: var(--space-10); }
.ej-ijco__medal { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-6); }
.ej-ijco__medal .ej-headline { font-size: clamp(44px, 5vw, 88px); }
.ej-areas { margin-top: var(--space-8); }
.ej-areas__list { display: flex; flex-wrap: wrap; row-gap: var(--space-2); margin-top: var(--space-3); font-weight: 600; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.3; }
.ej-areas__list li:not(:last-child)::after { content: "/"; margin: 0 .6em; font-weight: 400; color: var(--white-faint); }

/* The group photo, cropped at the heads, then the route underneath */
.ej-route { margin: 0; border: 1px solid var(--void-line); background: var(--void-raised); }
.ej-route__photo { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 2.6 / 1; }
.ej-route__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; filter: saturate(.9) contrast(1.05) brightness(.9); }
.ej-route__photo::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--void-raised), transparent 20%); }
.ej-route__photo::after { content: ""; position: absolute; inset: 0; mix-blend-mode: color; opacity: .35;
  background: linear-gradient(to top, var(--flare), var(--heat) 25%, var(--magenta) 50%, var(--violet) 78%, var(--ion)); }
.ej-route__path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-6) var(--space-6) var(--space-8); }
.ej-route__path::before { content: ""; position: absolute; left: var(--space-6); right: 18%; top: calc(var(--space-6) + 7px); height: 2px; transform-origin: left center;
  background: linear-gradient(90deg, var(--white-faint), var(--white) 45%, var(--heat) 75%, var(--flare)); transition: transform 1.6s cubic-bezier(.6, 0, .2, 1) .2s; }
.js .ej-route:not(.is-in) .ej-route__path::before { transform: scaleX(0); }
.ej-route__path > li { position: relative; padding: var(--space-6) var(--space-4) 0 0; }
.ej-route__path > li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; background: var(--void); border: 2px solid var(--white); }
.ej-route__path > li.is-final::before { border-color: var(--flare); background: linear-gradient(135deg, var(--heat), var(--flare)); }
.ej-route__when { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white-faint); }
.ej-route__name { margin-top: var(--space-2); font-weight: 700; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.2; letter-spacing: -.01em; }
.ej-route__res { margin-top: var(--space-2); font-weight: 800; font-size: clamp(20px, 2vw, 36px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.js .ej-route__path > li { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .ej-route.is-in .ej-route__path > li { opacity: 1; transform: none; }
.js .ej-route.is-in .ej-route__path > li:nth-child(2) { transition-delay: .5s; }
.js .ej-route.is-in .ej-route__path > li:nth-child(3) { transition-delay: 1s; }

/* ---------- Other awards: art behind each tile ---------- */
.ej-tile__art { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgb(0 0 0 / .5) 60%, transparent 88%); mask-image: linear-gradient(to bottom, #000 30%, rgb(0 0 0 / .5) 60%, transparent 88%); }
.ej-tile__art svg { position: absolute; left: 50%; top: 11%; width: auto; height: 32%; max-width: 80%; transform: translateX(-50%); fill: none; stroke: var(--white-faint); stroke-width: 1.4; stroke-linecap: square; transition: stroke .5s; }
.ej-tile__art svg .a { stroke: var(--flare); }
.ej-tile__art svg .f { fill: var(--flare); stroke: none; }
.ej-tile:hover .ej-tile__art svg { stroke: var(--white-soft); }

/* ---------- Music: the photo as the backdrop, the programme on the right ---------- */
.ej-music__photo { position: absolute; top: 0; bottom: 0; left: 0; width: 62%; z-index: 0; margin: 0;
  -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 96%), linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 40%, transparent 96%), linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.ej-music__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; filter: url(#ej-tone) contrast(1.06) brightness(.88) blur(.4px); opacity: .9; }
.ej-music__photo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgb(5 5 5 / .18) 22px 24px); }
.ej-music .ej-light { z-index: 0; }
.ej-music__glow { background: radial-gradient(60% 34% at 72% 100%, color-mix(in srgb, var(--heat) 38%, transparent), color-mix(in srgb, var(--violet) 16%, transparent) 55%, transparent 80%); }
.ej-music .ej-screen__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.ej-music__col { grid-column: 2; justify-self: end; width: 100%; max-width: 540px; }
.ej-music__col .ej-display { font-size: clamp(48px, 7.2vw, 124px); margin: var(--space-3) 0 var(--space-10); }
.ej-music .ej-rows { border-top: 1px solid color-mix(in srgb, var(--white) 35%, transparent); }
.ej-music .ej-rows > li { padding: var(--space-4) 0; gap: var(--space-1) var(--space-6); }
.ej-music .ej-rows__name { font-weight: 600; font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -.01em; text-transform: none; }
.ej-music .ej-rows__res { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--white-faint); }
.ej-music .ej-rows__res.is-award { color: var(--flare); }
.ej-music .ej-rows__note { font-size: 13px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .ej-frame { inset: var(--space-6); }
  .ej-screen__body { padding: var(--space-16) var(--space-6); }
  .ej-hero .ej-screen__body { padding-top: calc(var(--space-6) + var(--space-16)); padding-bottom: calc(var(--space-6) + var(--space-16)); }
  .ej-hero__intro { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .ej-hero__fields { text-align: left; }
  .ej-hero__name { white-space: normal; }
  .ej-split, .ej-split--flip { grid-template-columns: 1fr; }
  .ej-split__media { order: 0 !important; min-height: 70svh; }
  .ej-split__text { padding: var(--space-16) var(--space-6) calc(var(--space-16) + var(--space-8)); }
  .ej-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
  .ej-stats, .ej-contact__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .ej-board__row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-6) 0; }
  .ej-board__when { text-align: left; }
  .ej-bleed__foot { grid-template-columns: 1fr; gap: var(--space-6); }
  .ej-roles__cols { grid-template-columns: 1fr; gap: var(--space-12); }
  .ej-tiles { grid-template-columns: 1fr 1fr; }
  .ej-tile { min-height: 34svh; }
  .ej-facts { grid-template-columns: 1fr; }
  .ej-slot--mid .ej-slot__ph > *, .ej-slot--corner .ej-slot__ph > * { display: none; }
  .ej-robot { left: 4%; right: 4%; width: 92%; top: var(--space-12); bottom: var(--space-16); }
  .ej-record__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .ej-record .ej-stats { grid-template-columns: 1fr; }
  .ej-ijco__title { font-size: 9vw; }
  .ej-ijco__cols { grid-template-columns: 1fr; gap: var(--space-10); }
  .ej-route__path { grid-template-columns: 1fr; padding-left: calc(var(--space-6) + var(--space-8)); }
  .ej-route__path::before { left: calc(var(--space-6) + 7px); right: auto; top: var(--space-6); bottom: var(--space-8); width: 2px; height: auto; transform-origin: center top;
    background: linear-gradient(180deg, var(--white-faint), var(--white) 45%, var(--heat) 75%, var(--flare)); }
  .js .ej-route:not(.is-in) .ej-route__path::before { transform: scaleY(0); }
  .ej-route__path > li { padding: 0 0 var(--space-6); }
  .ej-route__path > li::before { left: calc(-1 * var(--space-8)); }
  .ej-music__photo { width: 100%; height: 62svh; bottom: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); }
  .ej-music .ej-screen__body { grid-template-columns: 1fr; padding-top: 48svh; }
  .ej-music__col { grid-column: 1; }
}
@media (max-width: 520px) {
  .ej-tiles { grid-template-columns: 1fr; }
  .ej-frame > span { max-width: 48%; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ej-light__spin, .ej-light__beam, .ej-lit { animation: none; }
  .ej-link, .ej-link svg { transition: none; }
  .ej-strip > b, .ej-robot .r-sway, .ej-robot .r-wheel, .ej-robot .r-arm { animation: none; }
  .js .ej-reveal, .js .ej-route__path > li { opacity: 1; transform: none; transition: none; }
  .js .ej-route:not(.is-in) .ej-route__path::before { transform: none; }
}