/* ========================================================================
   EOES Österreich — site.css

   A dark field with one instrument in it: a WebGL stage fixed behind the
   page (see assets/js). One typeface, Mona Sans, with a width axis that is
   used: headlines heavy and wide, everything else at normal width and in
   normal case. No second face, no small capitals labels, no ornaments.
   Colour comes from the EOES mark and lives in the stage, not in the type.
   ===================================================================== */

@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/mona-sans-latin-wdth.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
/* Holds the line lengths while the web font is on its way. */
@font-face {
  font-family: 'Mona Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('Arimo');
  size-adjust: 102%;
}

:root {
  color-scheme: dark;
  --ground: #07080a;
  --ink: #ecece6;
  --ink-2: #a7a8a2;
  --line: rgb(236 236 230 / .14);
  --line-2: rgb(236 236 230 / .3);
  --chem: #9999ff;
  --sans: 'Mona Sans', 'Mona Sans Fallback', Arial, 'Helvetica Neue', sans-serif;
  --m: clamp(1.25rem, 4.4vw, 4.5rem);
  /* Content lives on one centred frame; past it the stage has the screen
     to itself. Substituted where it is used, so the percentage is always
     the width of the element being padded — the viewport, for every band
     that uses it. */
  --frame: 96rem;
  --gut: max(var(--m), calc((100% - var(--frame)) / 2));
}

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

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
address { font-style: normal; }
b { font-weight: 650; }
sub { font-size: .7em; line-height: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--chem); outline-offset: 3px; }

.skip {
  position: absolute;
  left: var(--m);
  top: .75rem;
  z-index: 20;
  padding: .55rem .9rem;
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Display type: heavy and a little wide. */
.hero__title, h2, .record__year, .arc-head h1, .medals tbody th {
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -.02em;
}

/* Secondary text: the same face, smaller and dimmer, in normal case. */
.hud, .facts dt, .record__place, .record__docs span, .index__m,
.photo figcaption, .foot, .medals__docs span, .medals thead th, .group__label {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* --- the stage --------------------------------------------------------- */

.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}
.stage-live .stage { opacity: 1; }
.no-stage .stage, html:not(.js) .stage { display: none; }

/* Keeps the text column clear of the bright end of the stage. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(7 8 10 / .88) 0%, rgb(7 8 10 / .62) 34%, rgb(7 8 10 / 0) 58%);
  opacity: var(--veil, 1);
  transition: opacity .8s ease;
}
@media (max-aspect-ratio: 1/1) {
  .veil { background: linear-gradient(180deg, rgb(7 8 10 / 0) 0%, rgb(7 8 10 / 0) 42%, rgb(7 8 10 / .9) 72%); }
}

/* What the stage is showing: the science on one line, the structure on
   the next. */
.hud {
  position: fixed;
  right: var(--gut);
  bottom: clamp(1.25rem, 3.5vh, 2.5rem);
  z-index: 2;
  pointer-events: none;
  text-align: right;
  /* The caption can sit over the shape; a halo of ground keeps it legible. */
  text-shadow: 0 0 .4rem var(--ground), 0 0 1rem var(--ground);
}
.hud p {
  position: absolute;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .6s ease, transform .6s ease;
}
.hud p.is-on { opacity: 1; transform: none; }
.hud b { display: block; color: var(--ink); }
.no-stage .hud, html:not(.js) .hud { display: none; }
/* On a tall screen the shape sits in the upper half, so its caption goes
   to the top, clear of the text coming up from below. */
@media (max-aspect-ratio: 1/1) {
  .hud { top: 1.1rem; bottom: auto; left: var(--m); right: auto; text-align: left; }
  .hud p { left: 0; right: auto; top: 0; bottom: auto; }
}

/* --- header ------------------------------------------------------------ */

.top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1rem, 2.6vh, 1.75rem) var(--gut);
}

.brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-decoration: none;
}
.brand img { width: auto; height: clamp(2rem, 1.6rem + 1.1vw, 2.6rem); }
.brand__country {
  font-weight: 650;
  font-stretch: 110%;
  line-height: 2;
}

.nav { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); font-size: .9375rem; font-weight: 500; }
.nav a { color: var(--ink-2); text-decoration: none; padding-block: .5rem; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }

.menu-toggle { display: none; }

@media (max-width: 52rem) {
  .js .menu-toggle {
    display: block;
    position: relative;
    z-index: 6;
    min-height: 2.75rem;
    padding: 0 .1rem;
    border: 0;
    background: none;
    color: var(--ink);
    font: 600 1rem var(--sans);
    cursor: pointer;
  }
  .js .nav {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
    padding: 6rem var(--m) 3rem;
    background: var(--ground);
  }
  .js.menu-open .nav { display: flex; }
  .js.menu-open body { overflow: hidden; }
  .js .nav a {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    font-weight: 800;
    font-stretch: 110%;
    letter-spacing: -.02em;
    color: var(--ink);
    padding-block: .15rem;
  }
  html:not(.js) .top { flex-wrap: wrap; }
  html:not(.js) .nav { flex-wrap: wrap; gap: .25rem 1.25rem; }
}

/* --- shared structure -------------------------------------------------- */

main { position: relative; z-index: 1; }

h2 {
  font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4.6rem);
  line-height: .98;
  margin: 0 0 .5em;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.15rem, 1.02rem + .45vw, 1.45rem);
  line-height: 1.45;
  text-wrap: pretty;
}

/* --- hero -------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: end;
  gap: clamp(1.5rem, 3.5vh, 2.75rem);
  padding: 7rem var(--gut) clamp(1.75rem, 5vh, 3.5rem);
}
/* On a tall screen the Earth's routes sit above the title; on a short
   phone the text would reach up over them, so the hero keeps a window of
   at least 30% of the screen above the title, even if it then runs a
   little past the first screen. */
@media (max-aspect-ratio: 1/1) {
  .hero { padding-top: max(7rem, 30svh); }
}

.hero__title {
  font-size: clamp(2.5rem, .4rem + 6vw, 7.2rem);
  line-height: .93;
  max-width: 12ch;
}
.hero__title span { display: block; }

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 56rem) {
  .hero__foot {
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr) minmax(0, 1.8fr);
    align-items: start;
    gap: 2rem;
  }
}
.hero__country { font-weight: 650; font-stretch: 110%; }
.hero__lede { max-width: 32rem; }
/* The Earth runs behind the hero's lower edge, the Sahara at its
   brightest there; the ground rises behind the text. */
.hero { isolation: isolate; }
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  z-index: -1;
  background: linear-gradient(180deg, rgb(7 8 10 / 0), rgb(7 8 10 / .78) 55%, rgb(7 8 10 / .9));
  pointer-events: none;
}
@media (max-aspect-ratio: 1/1) {
  /* On a tall screen the ground rises from just above the title, wherever
     the title stands, and stays inside the hero. */
  .hero { overflow: clip; }
  .hero::after { display: none; }
  .hero__title { position: relative; }
  .hero__title::before {
    content: '';
    position: absolute;
    top: -2.5rem;
    left: calc(var(--gut) * -1);
    width: 100vw;
    height: 200svh;
    z-index: -1;
    background: linear-gradient(180deg, rgb(7 8 10 / 0), rgb(7 8 10 / .86) 2.5rem, rgb(7 8 10 / .92) 12rem);
    pointer-events: none;
  }
}
.hero__news { display: grid; gap: .9rem; justify-self: start; font-weight: 650; }
.hero__news a { text-wrap: balance; }
.hero__news span { display: block; margin-top: .15rem; font-weight: 400; color: var(--ink-2); }
@media (min-width: 56rem) { .hero__news { justify-self: end; justify-items: end; text-align: right; } }

/* Without the stage the hero would be a dark rectangle; it gets the same
   Earth as a still, rendered by the stage itself. */
.hero__poster { display: none; }
.no-stage .hero__poster, html:not(.js) .hero__poster {
  display: block;
  position: absolute;
  inset: 0 0 0 auto;
  width: min(80%, 80rem);
  z-index: -1;
  background: url('../img/earth-poster.webp') right 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}
@media (max-aspect-ratio: 1/1) {
  .no-stage .hero__poster, html:not(.js) .hero__poster {
    inset: 3.5rem 0 auto;
    width: 100%;
    height: 50%;
    background-position: 62% top;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
  }
}

/* --- scenes: text left, the stage right -------------------------------- */

/* Without the stage each scene shows its shape as a still, drawn by the
   stage itself; the images are fetched only when they are shown. */
.scene { position: relative; isolation: isolate; }
.no-stage .scene::before, html:not(.js) .scene::before {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--gut);
  width: min(56%, 58rem);
  aspect-ratio: var(--ar);
  max-height: 100%;
  transform: translateY(-50%);
  z-index: -1;
  background: var(--still) center / contain no-repeat;
  /* Faded on every side, so neither the picture's edge nor its ground
     shows against the page. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-composite: intersect;
}
.no-stage #olympiade, html:not(.js) #olympiade { --still: url('../img/still-dna.webp'); --ar: 920 / 1000; }
.no-stage #wettbewerb, html:not(.js) #wettbewerb { --still: url('../img/still-c60.webp'); --ar: 960 / 940; }
.no-stage #teilnahme, html:not(.js) #teilnahme { --still: url('../img/still-flow.webp'); --ar: 1180 / 660; }
@media (max-aspect-ratio: 1/1) {
  .no-stage .scene::before, html:not(.js) .scene::before {
    top: 4rem;
    right: auto;
    left: 50%;
    width: auto;
    height: calc(62svh - 5rem);
    max-width: 100%;
    max-height: none;
    transform: translateX(-50%);
  }
}

.scene {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem var(--gut);
}
/* On a mid-size screen the column gives up some measure (never below
   about 60 characters) so the shape beside it keeps its size. */
.scene__text { width: min(34rem, max(46vw, 26rem), 100%); }

.facts { margin-top: 2.2rem; display: grid; gap: 1.4rem; }
.facts dt { color: var(--ink); font-weight: 650; margin-bottom: .3rem; font-size: 1em; }

.conds { display: grid; gap: 1.6rem; }
.conds li {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* On a tall screen the shape sits above the text: each scene opens on a
   clear window, and the text comes up over the lower half on its own
   ground. */
@media (max-aspect-ratio: 1/1) {
  .scene { display: block; min-height: 0; padding: 62svh 0 0; }
  .scene__text {
    width: auto;
    padding: 4.5rem var(--gut) 5rem;
    background: linear-gradient(180deg, rgb(7 8 10 / 0) 0, var(--ground) 4.5rem);
  }
}

/* --- blocks: results, links, contact ----------------------------------- */

.block {
  position: relative;
  padding: clamp(5rem, 13vh, 9rem) var(--gut);
}
.block__head h2 { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
/* A heading with a line under it: the line follows closely, the content
   keeps its distance. */
.block__head:has(.lead) h2 { margin-bottom: 1rem; }
.block__head:has(.lead) { margin-bottom: clamp(2.5rem, 7vh, 4.5rem); }
@media (max-aspect-ratio: 1/1) {
  .block { padding-block: clamp(3.5rem, 8svh, 5rem); }
}
/* Straight after the last scene, which already ends in its own space. */
.scene + .results { padding-top: clamp(2rem, 5vh, 4rem); }

.record { display: grid; gap: clamp(3rem, 8vh, 5rem); }
.record__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
@media (min-width: 60rem) {
  .record__row {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
    align-items: start;
  }
}
.record__year {
  font-size: clamp(4rem, 2rem + 6.5vw, 9rem);
  line-height: .82;
  font-variant-numeric: tabular-nums;
}
.record__body h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.4rem);
  font-weight: 750;
  font-stretch: 105%;
  line-height: 1.05;
  letter-spacing: -.012em;
}
.record__place { margin-top: .55rem; }

.record__docs { display: grid; gap: .9rem; }
.record__docs a {
  display: block;
  line-height: 1.3;
  font-weight: 550;
  padding-block: .15rem;
  text-decoration-color: var(--line-2);
}
.record__docs span { display: block; margin-top: .2rem; font-weight: 400; }
.record__docs a:hover { text-decoration-color: currentColor; }

/* The application: the form and what to know about it, beside the
   selection drawn as one line from the application to the olympiad. A
   step that forks shows its outcomes as branches off that line. The line
   and its nodes are drawn here, so a screen reader meets a plain list. */
.apply__grid { display: grid; gap: clamp(3rem, 8vh, 4.5rem); }
@media (min-width: 64rem) {
  .apply__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  .apply__aside { grid-column: 2; grid-row: 1; position: sticky; top: clamp(1.5rem, 8vh, 5rem); }
  .flow { grid-column: 1; grid-row: 1; }
}

.apply__form {
  display: block;
  margin-bottom: 1.1rem;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem);
  font-weight: 750;
  font-stretch: 105%;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.apply__form span { display: block; margin-top: .45rem; font-size: .9375rem; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--ink-2); }
.apply__form:hover { text-decoration-color: currentColor; }
.apply__aside p { line-height: 1.5; }
.apply__aside p + p { margin-top: .9rem; }
.apply__aside p a { text-decoration-color: var(--line-2); }
.apply__aside p a:hover { text-decoration-color: currentColor; }
.apply__aside time { font-weight: 650; }

.flow {
  --date: 0rem;           /* width of the date column, where there is one */
  --rail: 2.4rem;
  --x: calc(var(--date) + var(--rail) / 2);   /* where the line runs */
  --node: .8rem;
  hyphens: auto;
}
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-content: start;
  padding-bottom: 1.75rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.flow__step > * { grid-column: 2; }
.flow__step h3 {
  grid-row: 1;
  color: var(--ink);
  font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
}
.flow__step p, .flow__branches { margin-top: .25rem; }
/* The line through all the steps, from the first node to the last. */
.flow__step::before {
  content: '';
  position: absolute;
  left: var(--x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-2);
}
.flow__step:first-child::before { top: .85em; }
.flow__step:last-child::before { bottom: auto; height: .85em; }
.flow__step::after {
  content: '';
  position: absolute;
  left: calc(var(--x) - var(--node) / 2 + .5px);
  top: calc(.85em - var(--node) / 2);
  width: var(--node);
  height: var(--node);
  box-sizing: border-box;
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
  background: var(--ground);
}
.flow__step:last-child::after { border-color: var(--ink); background: var(--ink); }
/* Outcomes branch off below their step; the ones that lead on are bright. */
.flow__branches { display: grid; gap: .3rem; padding-top: .15rem; }
.flow__branches li { position: relative; padding-left: 1.2rem; }
/* Each branch leaves the line and bends toward its outcome. */
.flow__branches li::before {
  content: '';
  position: absolute;
  left: calc(var(--rail) / -2);
  top: -1.1rem;
  width: calc(var(--rail) / 2 + .85rem);
  height: 1.85rem;
  border-left: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  border-bottom-left-radius: .7rem;
}
.flow__branches .is-main { color: var(--ink); }
.flow__branches b { color: var(--ink); font-weight: 650; margin-right: .35rem; }
/* With room for it, the dates stand in their own column left of the
   line, level with their step. */
@media (min-width: 40rem) {
  .flow { --date: 13.5rem; }
  .flow__step { grid-template-columns: var(--date) var(--rail) minmax(0, 1fr); }
  .flow__step > * { grid-column: 3; }
  .flow__step .flow__when {
    grid-column: 1;
    grid-row: 1;
    margin-top: .15em;
    padding-right: 1rem;
    text-align: right;
    color: var(--ink);
    hyphens: manual;
  }
}
.flow__when { white-space: nowrap; }
.flow__when span { display: block; color: var(--ink-2); }

/* The photograph and the record are one statement — the delegation with
   the medals the record counts — so they stand side by side, and the
   picture holds its place while the two years go past it. */
.results__grid { display: grid; gap: clamp(2rem, 5vh, 3rem); }
/* Below the frame width the gutter is the plain margin, so the picture
   can run to the screen's edges by stepping out of it. */
@media (max-width: 63.99rem) {
  .results__grid .photo { margin-inline: calc(var(--m) * -1); }
  .results__grid .photo figcaption { padding-inline: var(--m); }
}
@media (min-width: 64rem) {
  /* The delegation is the one picture of people on the site: it takes
     the whole frame, cropped wide, and the result runs beneath it as one
     line of the record. */
  .results__grid .photo img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 18%; }
  .results__grid .record__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
    align-items: end;
    gap: clamp(1.5rem, 3vw, 3.5rem);
  }
  .results__grid .record__year { font-size: clamp(4.5rem, 1.4rem + 5.6vw, 8.5rem); }
  .results__grid .record__docs { align-self: end; }
}

.photo__link { display: block; position: relative; }
.photo img { width: 100%; }
.photo__link:focus-visible { outline-offset: -6px; }
.photo figcaption { padding-top: .9rem; }
.photo figcaption b { color: var(--ink); margin-right: .6rem; }

/* On a wide screen the links take a whole screen, so the wave field can
   settle beneath them before the contact brings the discs back. */
@media (min-aspect-ratio: 1/1) {
  .links { min-height: 100svh; }
}

/* The six links fall into the three groups their own names already
   imply: the olympiad, the earlier competitions, the people in Austria. */
.groups { display: grid; gap: clamp(2.5rem, 6vh, 3.5rem); }
/* A light shade of ground behind the links and their heading keeps them
   legible over the crests of the wave field, or over the Earth while it
   is still leaving; the stage stays visible around them. */
.groups, .links .block__head { position: relative; isolation: isolate; }
.groups::before, .links .block__head::before {
  content: '';
  position: absolute;
  inset: -2rem calc(var(--gut) * -1);
  z-index: -1;
  background: rgb(7 8 10 / .66);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  pointer-events: none;
}
@media (min-width: 56rem) {
  .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); }
}
.group { display: flex; flex-direction: column; }
.group__label { font-weight: 650; color: var(--ink); margin-bottom: .6rem; }
.index { display: grid; gap: .3rem; }
.index a {
  display: grid;
  gap: .2rem;
  padding: .7rem 0;
  text-decoration: none;
}
.index__t {
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.9rem);
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.index a:hover .index__t { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; }
.index a:hover .index__m { color: var(--ink); }

.contact__grid { display: grid; gap: 1.75rem; width: min(36rem, 100%); }
.contact address, .contact__lines {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.01em;
}
.contact__name { display: block; font-weight: 750; }
/* The Earth comes back for the contact; on a tall screen it takes the
   top of the screen, so the address waits below it on its own ground, as
   the scenes do. */
@media (max-aspect-ratio: 1/1) {
  .contact {
    padding-top: 60svh;
    background: linear-gradient(180deg, rgb(7 8 10 / 0) 0, rgb(7 8 10 / 0) calc(60svh - 4.5rem), var(--ground) 60svh);
  }
}
.contact__lines { display: grid; gap: .45rem; justify-items: start; }
.contact__lines a { text-decoration-color: var(--line-2); padding-block: .1rem; }

/* --- archive ----------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.arc-head {
  min-height: 86vh;
  min-height: 86svh;
  display: grid;
  align-content: end;
  padding: 8rem var(--gut) clamp(3rem, 8vh, 5rem);
}
.arc-head h1 {
  font-size: clamp(3.4rem, 1.2rem + 8.5vw, 10rem);
  line-height: .9;
  margin: 0 0 .3em;
}
.arc-head .lead { max-width: 30rem; }
/* Without the stage the archive opens on its Earth as a still, drawn by
   the stage itself, as the front page opens on the discs. */
.arc-head { position: relative; isolation: isolate; }
/* On a tall screen the Earth fills the top; the ground rises behind the
   title, as in the hero. */
@media (max-aspect-ratio: 1/1) {
  .arc-head::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 50%;
    z-index: -1;
    background: linear-gradient(180deg, rgb(7 8 10 / 0), rgb(7 8 10 / .86) 30%, rgb(7 8 10 / .92));
    pointer-events: none;
  }
}
.arc-head__poster { display: none; }
.no-stage .arc-head__poster, html:not(.js) .arc-head__poster {
  display: block;
  position: absolute;
  inset: 0 0 0 auto;
  width: min(68%, 64rem);
  z-index: -1;
  background: url('../img/earth-poster.webp') right bottom / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%), linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 28%), linear-gradient(180deg, #000 70%, transparent);
  mask-composite: intersect;
}
@media (max-aspect-ratio: 1/1) {
  .no-stage .arc-head__poster, html:not(.js) .arc-head__poster {
    inset: 3.5rem 0 auto;
    width: 100%;
    height: 55%;
    background-position: 62% top;
    background-size: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-composite: add;
  }
}

.page-archive .arc { padding-top: 0; }

/* The medal table: every year on one row, every field in its own column,
   so the years, the places, the two teams' medals and the reports each
   line up down the page. On a wide screen it keeps to the left and the
   Earth with the host cities takes the right. */
.medals { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.medals th, .medals td { text-align: left; vertical-align: baseline; font-weight: inherit; }
.medals tbody th {
  font-size: clamp(2.1rem, 1.5rem + 1.6vw, 3rem);
  line-height: 1;
  white-space: nowrap;
}
.medals .medals__place {
  font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem);
  font-weight: 650;
  line-height: 1.25;
}
/* Each medal with a disc in its metal, as in a medal table. */
.medal { font-weight: 650; color: var(--ink); white-space: nowrap; }
.medal::before {
  content: '';
  display: inline-block;
  width: .72em;
  height: .72em;
  margin-right: .45em;
  border-radius: 50%;
  vertical-align: -.04em;
  background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 52%), var(--metal);
}
.medal--gold { --metal: #d9a93a; }
.medal--silber { --metal: #b9bdc6; }
.medal--bronze { --metal: #b8743f; }
.medals__docs { display: grid; gap: .6rem; }
.medals__docs a {
  display: block;
  font-weight: 550;
  line-height: 1.3;
  text-decoration-color: var(--line-2);
}
.medals__docs a:hover { text-decoration-color: currentColor; }
.medals__docs span { display: block; margin-top: .15rem; font-weight: 400; }
.medals .is-none th, .medals .is-none td { color: var(--ink-2); }
@media (min-width: 52rem) {
  .medals { table-layout: fixed; width: min(60rem, 66vw); }
  .medals th, .medals td { padding: 1.1rem 1.4rem 1.1rem 0; }
  .medals thead th { padding-block: 0 .4rem; }
  .medals thead th:nth-child(1) { width: 8.25rem; }
  .medals thead th:nth-child(2) { width: 23%; }
  .medals thead th:nth-child(3), .medals thead th:nth-child(4) { width: 12%; }
}
/* On a narrow screen each year is a block: the year, the place, the two
   medals in two fixed columns, then the reports. The ARIA roles in the
   markup keep it a table for screen readers. */
@media (max-width: 51.99rem) {
  .medals, .medals tbody { display: block; }
  .medals thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .medals tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .45rem 1rem;
    padding-block: 1.4rem;
  }
  .medals th, .medals .medals__place, .medals td:last-child { grid-column: 1 / -1; }
  .medals td:last-child { margin-top: .35rem; }
  .medals td[data-label]::before { content: attr(data-label); margin-right: .55rem; color: var(--ink-2); }
}
/* The table runs over the Earth; a soft shade of ground behind it, and
   a halo around each line, keep it legible while the Earth stays bright
   around it. */
.arc, .links { overflow-x: clip; }   /* the shades below must never widen the page */
.medals-wrap { position: relative; isolation: isolate; }
.medals-wrap::before {
  content: '';
  position: absolute;
  /* Across the whole width on a narrow screen; on a wide one past the
     table and fading out over the Earth. */
  inset: -8rem calc(var(--gut) * -1) -2.5rem;
  z-index: -1;
  background: rgb(7 8 10 / .8);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8rem, #000 calc(100% - 2.5rem), transparent);
  pointer-events: none;
}
/* On a tall screen the front page's archive opens, like the scenes, on a
   clear view of the Earth, and the table comes up over it. */
@media (max-aspect-ratio: 1/1) {
  /* The result above stays on plain ground while the Earth comes up. */
  .results { background: var(--ground); }
  #archiv { padding-top: calc(56svh - 4.5rem); }
  #archiv .block__head {
    margin-inline: calc(var(--gut) * -1);
    padding: 4.5rem var(--gut) 0;
    background: linear-gradient(180deg, rgb(7 8 10 / 0) 0, rgb(7 8 10 / .9) 3.5rem);
  }
}
@media (min-width: 52rem) {
  .medals-wrap::before {
    right: -12rem;
    background: linear-gradient(90deg, rgb(7 8 10 / .86) 0, rgb(7 8 10 / .8) calc(100% - 13rem), rgb(7 8 10 / .45) calc(100% - 7rem), rgb(7 8 10 / .12) calc(100% - 3rem), rgb(7 8 10 / 0));
  }
  .medals-wrap { width: min(60rem, 100%); }
  .medals-wrap .medals { width: 100%; }
}
.medals, .record, .arc .block__head, .arc-head, .contact, .links .block__head, .links .groups { text-shadow: 0 0 .3rem var(--ground), 0 0 .8rem var(--ground), 0 0 1.4rem var(--ground); }

/* --- footer ------------------------------------------------------------ */

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding: 2.5rem var(--gut) 2.5rem;
  background: var(--ground);
}
.foot p:last-child { display: flex; gap: 1.75rem; }
.foot a { text-decoration: none; padding-block: .4rem; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

/* --- motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage, .veil, .hud p { transition: none; }
}

/* --- print ------------------------------------------------------------- */

@media print {
  :root { --ink: #000; --ink-2: #444; --line: #bbb; --line-2: #888; --ground: #fff; }
  html, body { background: #fff; }
  .stage, .veil, .hud, .nav, .menu-toggle, .skip, .hero__poster, .scene::before, .hero::after, .hero__title::before, .arc-head::after { display: none !important; }
  /* The page uses the reversed lockup; inverting it for paper would turn
     the three discs magenta, olive and teal. The original positive
     lockup is swapped in instead — as a background inside this query it
     is fetched only when the page is actually printed. */
  .brand img { display: none; }
  .brand::before {
    content: "";
    display: block;
    width: 11rem;
    aspect-ratio: 600 / 143;
    background: url('../img/eoes-logo-600.webp') left center / contain no-repeat;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hero, .scene, .arc-head { min-height: 0; padding-top: 2rem; padding-bottom: 2rem; }
  .medal::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scene__text { background: none !important; padding: 0 !important; }
  .top { position: static; }
  .arc-head__poster { display: none !important; }
  .apply__aside { position: static; }
  .flow { break-inside: avoid; }
  .medals-wrap::before, .groups::before { display: none; }
  #archiv { padding-top: 2rem; }
  #archiv .block__head { margin-inline: 0; padding: 0; background: none; }
  .medals tr { break-inside: avoid; }
}