/* ==========================================================================
   Most of Design — Oleg Zybailov
   World: START LIST. A black protocol sheet — ruled columns, tabular figures,
   one entrant down for five categories. One family, Archivo, worked across its
   whole width axis: 62 for bib letters, 100 for data, 112 for headings.
   ========================================================================== */

:root {
  --black: #000000;

  --ink: #FFFFFF;
  --ink-2: #A9AFB8;   /* 8.2:1 on black */
  --ink-3: #7E858F;   /* 5.1:1 on black — floor for text */

  --red: #B90000;     /* terminal field; white on it 5.6:1 */
  --red-live: #FF2E2E;/* live marker on black 5.2:1 */

  --line: rgba(255, 255, 255, 0.22);
  --hair: rgba(255, 255, 255, 0.10);
  --rule: rgba(255, 255, 255, 0.05);

  --f: "Archivo", "Helvetica Neue", sans-serif;

  --pad: clamp(14px, 2.2vw, 34px);
  --cols: 12;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-color: #2A2A2C var(--black); }

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--red); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #2A2A2C; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }
:focus-visible { outline: 2px solid var(--red-live); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; }

/* ── the sheet's own ruling ───────────────────────────────── */

.rules {
  position: fixed;
  inset: 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  pointer-events: none;
  z-index: 0;
}
.rules i { border-right: 1px solid var(--rule); }
.rules i:last-child { border-right: 0; }

.masthead, .hero, .section, .colophon { position: relative; z-index: 1; }

/* every field label on the sheet */
i, .lbl {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}

/* every field value */
b {
  display: block;
  font-weight: 500;
  font-stretch: 100%;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}

/* ── masthead: tag clipped to the top edge + entry strip ──── */

.masthead {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  align-items: stretch;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
}

.tab {
  grid-column: 1 / span 2;
  border: 1px solid var(--line);
  border-top: 0;
  padding: 13px 15px 15px;
  background: var(--black);
  align-self: start;
}
.tab img { height: 44px; width: auto; display: block; }

.entry {
  grid-column: 3 / span 10;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
}

.entry-cell {
  padding: 0 14px 14px;
  border-left: 1px solid var(--hair);
  align-self: end;
  text-decoration: none;
}
.entry-cell b { font-size: 13px; }
.entry-link b { transition: color 0.2s var(--ease); }
.entry-link:hover b { color: var(--red-live); }

/* ── hero ─────────────────────────────────────────────────── */

.hero { padding: 0 var(--pad); }

.stage {
  position: relative;
  min-height: clamp(420px, 64vh, 760px);
  display: grid;
  place-items: end center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* the running band: bib-condensed, edge to edge */
.ticker {
  position: absolute;
  left: calc(var(--pad) * -1);
  right: calc(var(--pad) * -1);
  bottom: 15%;
  overflow: hidden;
  z-index: 1;
  /* letters leave the sheet rather than being chopped at the margin */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker-run {
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  width: max-content;
  white-space: nowrap;
  animation: run 30s linear infinite;
  will-change: transform;
  opacity: 1;
  transition: opacity 0.45s var(--ease);
}
.ticker.is-swap .ticker-run { opacity: 0; transition-duration: 0.2s; }

.ticker-run .tk,
.ticker-run b {
  display: inline;
  font-family: var(--f);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(5rem, 21vh, 17rem);
  line-height: 0.76;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ink);
}
.ticker-run b { color: var(--red); font-weight: 300; font-stretch: 100%; }

@keyframes run { to { transform: translateX(-50%); } }

.figure {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  height: 100%;
  width: min(100%, 640px);
  margin-right: clamp(0px, 9vw, 170px);
}

/* Portrait plate: stands where the man will stand and occludes the band
   exactly as a cut-out photo will. Registration marks keep it in the world. */
.plate {
  position: relative;
  height: clamp(320px, 55vh, 620px);
  aspect-ratio: 3 / 4;
  margin-bottom: 14px;
  background: #08080A;
  border: 1px solid rgba(255, 255, 255, 0.30);
  display: grid;
  place-items: center;
  align-self: end;
}

.crop {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--red);
}
.crop.tl { top: -9px; left: -9px; border-top-width: 2px; border-left-width: 2px; }
.crop.tr { top: -9px; right: -9px; border-top-width: 2px; border-right-width: 2px; }
.crop.bl { bottom: -9px; left: -9px; border-bottom-width: 2px; border-left-width: 2px; }
.crop.br { bottom: -9px; right: -9px; border-bottom-width: 2px; border-right-width: 2px; }

.plate-body { display: block; text-align: center; padding: 0 18px; }
.plate-body i { margin-bottom: 12px; }
.plate-state {
  display: block;
  font-weight: 900;
  font-stretch: 88%;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.plate-body em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.6;
}

.stage-note {
  position: absolute; left: 0; bottom: 13px; z-index: 3;
  max-width: 25ch;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.7;
}

.stage-count {
  position: absolute; right: 0; bottom: 13px; z-index: 3;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.stage-count .live-n { color: var(--red-live); font-weight: 800; }

/* ── the protocol row: the signature composition ──────────── */

.protocol {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  border-bottom: 1px solid var(--line);
}

.p-cell {
  padding: clamp(16px, 2vw, 26px) 16px clamp(20px, 2.4vw, 30px);
  border-left: 1px solid var(--hair);
  text-decoration: none;
}
.p-cell:first-child { border-left: 0; padding-left: 0; }

.p-name { grid-column: 1 / span 4; }

.p-name h1 {
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.protocol > .p-cell:nth-child(2) { grid-column: 5 / span 2; }
.protocol > .p-cell:nth-child(3) { grid-column: 7 / span 3; }
.p-num { grid-column: 10 / span 1; }

.p-num .fig-big {
  font-weight: 900;
  font-stretch: 78%;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
}

.p-go {
  grid-column: 11 / span 2;
  background: var(--red);
  border-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.25s var(--ease);
}
.p-go i { color: rgba(255, 255, 255, 0.72); }
.p-go b {
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.p-go:hover { background: #D60000; }

/* ── categories entered ───────────────────────────────────── */

.cats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}
.cats li { border-left: 1px solid var(--hair); }
.cats li:first-child { border-left: 0; }

.cat {
  width: 100%;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  padding: 13px 14px 14px;
  text-align: left;
  cursor: pointer;
  font-family: var(--f);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cats li:first-child .cat { padding-left: 0; }
.cat i { margin-bottom: 9px; transition: color 0.25s var(--ease); }
.cat span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.25s var(--ease);
}
.cat:hover span { color: var(--ink-2); }
.cat.is-live { border-top-color: var(--red); }
.cat.is-live span { color: var(--ink); }
.cat.is-live i { color: var(--red-live); }

.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 26px;
  padding: 14px 0 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── sections ─────────────────────────────────────────────── */

.section { padding: clamp(80px, 11vw, 180px) var(--pad) 0; }

.s-head {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(24px, 3vw, 40px);
}

.s-head h2 {
  grid-column: 1 / span 7;
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(2.2rem, 6.4vw, 5.6rem);
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.s-head p {
  grid-column: 9 / span 4;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.tlink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s var(--ease);
}
.tlink:hover { text-decoration-color: var(--red-live); }

/* ── results ──────────────────────────────────────────────── */

.results { list-style: none; }
.results li { border-bottom: 1px solid var(--hair); }

.res {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  align-items: baseline;
  padding: clamp(14px, 1.9vw, 24px) 0;
  text-decoration: none;
  color: var(--ink);
}

.res-name {
  grid-column: 1 / span 6;
  font-weight: 900;
  font-stretch: 88%;
  font-size: clamp(1.6rem, 4.8vw, 3.4rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.94;
  transition: transform 0.4s var(--ease), color 0.25s var(--ease);
}

.res-cat { grid-column: 7 / span 3; color: var(--ink-2); font-size: 12.5px; letter-spacing: 0.04em; }
.res-year { grid-column: 10 / span 1; color: var(--ink-3); font-size: 12.5px; }

.res-go {
  grid-column: 11 / span 2;
  justify-self: end;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color 0.25s var(--ease);
}
.res-go::after {
  content: "";
  width: 10px; height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

a.res:hover .res-name { transform: translateX(18px); color: var(--red-live); }
a.res:hover .res-go { color: var(--red-live); }
a.res:hover .res-go::after { transform: rotate(45deg) translate(3px, -3px); }

.results li.is-open .res { opacity: 0.3; }
.results li.is-open .res-go::after { display: none; }

/* ── categories, long form ────────────────────────────────── */

.cat-row {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  padding: clamp(18px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--hair);
}
.cat-row:first-child { border-top: 1px solid var(--hair); }

.cat-row dt {
  grid-column: 1 / span 4;
  font-weight: 900;
  font-stretch: 92%;
  font-size: clamp(1.2rem, 2.6vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 1;
}
.cat-row dd { grid-column: 6 / span 6; color: var(--ink-2); font-size: 14.5px; }

/* ── entrant ──────────────────────────────────────────────── */

.entrant {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  border-top: 1px solid var(--line);
  padding-top: clamp(26px, 3.2vw, 44px);
}

.entrant-copy { grid-column: 1 / span 7; padding-right: clamp(20px, 4vw, 70px); }

.entrant-copy h2 {
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin-bottom: 22px;
  max-width: 19ch;
}
.entrant-copy p { color: var(--ink-2); max-width: 60ch; margin-bottom: 15px; font-size: 14.5px; }
.entrant-copy strong { color: var(--ink); font-weight: 600; }

.entrant-facts { grid-column: 9 / span 4; align-content: start; }

.f {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}
.f:first-child { border-top: 1px solid var(--hair); }
.f i { margin-bottom: 0; }
.f b { font-size: 13px; text-align: right; }

/* ── stations ─────────────────────────────────────────────── */

.stations {
  list-style: none;
  counter-reset: st;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

.stations li {
  counter-increment: st;
  padding: clamp(18px, 2.2vw, 28px) clamp(14px, 1.6vw, 24px) clamp(26px, 3.2vw, 42px) 0;
  border-left: 1px solid var(--hair);
}
.stations li:first-child { border-left: 0; }
.stations li + li { padding-left: clamp(14px, 1.6vw, 24px); }

.stations li::before {
  content: counter(st, decimal-leading-zero);
  display: block;
  font-weight: 900;
  font-stretch: 100%;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--red-live);
  margin-bottom: clamp(24px, 3.6vw, 50px);
}

.stations h3 {
  font-weight: 900;
  font-stretch: 96%;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.stations p { color: var(--ink-2); font-size: 13.5px; }

/* ── contact ──────────────────────────────────────────────── */

.contact {
  padding-bottom: clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--line);
  margin-top: clamp(80px, 11vw, 180px);
  padding-top: clamp(36px, 4.6vw, 64px);
}

.contact h2 {
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  max-width: 22ch;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

/* Two lines, so the address runs at word scale instead of shrinking to fit.
   10.8vw keeps the longest line (16 characters, measured at 0.528em each) inside the
   sheet's margins at every width; the cap stops it exploding on wide screens. */
.mailto {
  display: block;
  font-weight: 900;
  font-stretch: 74%;
  font-size: min(10.8vw, 230px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.mailto span { display: block; }
.mailto span:first-child { color: var(--ink-3); }
.mailto:hover span:first-child { color: var(--red-live); }
.mailto:hover { color: var(--red-live); }

.contact-meta { margin-top: clamp(18px, 2.4vw, 30px); color: var(--ink-2); max-width: 52ch; font-size: 14.5px; }

/* ── colophon ─────────────────────────────────────────────── */

.colophon {
  padding: 20px var(--pad) 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--hair);
}
.colophon img { height: 34px; width: auto; opacity: 0.5; }
.colophon p { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

/* ── responsive ───────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --cols: 8; }
  .rules i:nth-child(n+8) { display: none; }

  .tab { grid-column: 1 / span 3; }
  .entry { grid-column: 4 / span 5; grid-template-columns: repeat(3, 1fr); }
  .entry-cell:nth-child(n+4) { border-top: 1px solid var(--hair); padding-top: 12px; }

  .p-name { grid-column: 1 / span 8; }
  .protocol > .p-cell:nth-child(2) { grid-column: 1 / span 4; border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .protocol > .p-cell:nth-child(3) { grid-column: 5 / span 4; border-top: 1px solid var(--hair); }
  .p-num { grid-column: 1 / span 3; border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .p-go { grid-column: 4 / span 5; border-top: 1px solid var(--hair); }

  .s-head h2 { grid-column: 1 / span 8; }
  .s-head p { grid-column: 1 / span 6; padding-top: 14px; }

  .res-name { grid-column: 1 / span 8; }
  .res-cat { grid-column: 1 / span 4; }
  .res-year { grid-column: 5 / span 1; }
  .res-go { grid-column: 7 / span 2; }

  .cat-row dt { grid-column: 1 / span 8; margin-bottom: 7px; }
  .cat-row dd { grid-column: 1 / span 8; }

  .entrant-copy { grid-column: 1 / span 8; padding-right: 0; }
  .entrant-facts { grid-column: 1 / span 8; margin-top: 28px; }

  .stations { grid-template-columns: repeat(2, 1fr); }
  .stations li:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 660px) {
  :root { --cols: 4; }
  .rules i:nth-child(n+4) { display: none; }

  .tab { grid-column: 1 / span 2; padding: 10px 12px 12px; }
  .tab img { height: 36px; }
  .entry { grid-column: 3 / span 2; grid-template-columns: 1fr; }
  .entry-cell { border-left: 0; padding: 0 0 8px; }
  .entry-cell:nth-child(-n+3) { display: none; }
  .entry-cell:nth-child(n+4) { border-top: 0; padding-top: 0; }
  .entry-cell i { display: none; }
  .entry-cell b { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-align: right; }

  .stage { min-height: 54vh; }
  .ticker { bottom: 13%; }
  .ticker-run .tk, .ticker-run b { font-size: clamp(3.4rem, 17vh, 7rem); }
  .plate { height: clamp(240px, 40vh, 380px); }
  .figure { margin-right: 0; }
  .stage-note { max-width: 19ch; font-size: 8.5px; }
  .stage-count { font-size: 8.5px; }

  .p-name, .protocol > .p-cell:nth-child(2), .protocol > .p-cell:nth-child(3), .p-num, .p-go { grid-column: 1 / span 4; }
  .p-cell { border-left: 0; padding-left: 0; padding-right: 0; }
  .p-go { padding: 16px; gap: 14px; }

  .cats { grid-template-columns: repeat(2, 1fr); }
  .cats li { border-left: 0; border-top: 1px solid var(--hair); }
  .cats li:nth-child(2n) { border-left: 1px solid var(--hair); }
  .cat, .cats li:first-child .cat { padding-left: 0; }
  .cats li:nth-child(2n) .cat { padding-left: 14px; }

  .s-head h2, .s-head p { grid-column: 1 / span 4; }
  .res-name, .res-cat, .res-year, .res-go { grid-column: 1 / span 4; }
  .res-go { justify-self: start; margin-top: 6px; }
  .res { row-gap: 4px; }
  .cat-row dt, .cat-row dd { grid-column: 1 / span 4; }
  .entrant-copy, .entrant-facts { grid-column: 1 / span 4; }

  .stations { grid-template-columns: 1fr; }
  .stations li { border-left: 0; padding-left: 0 !important; padding-right: 0; border-bottom: 1px solid var(--hair); }
  .stations li:last-child { border-bottom: 0; }
  .stations li::before { margin-bottom: 14px; }

  .colophon { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-run { animation: none; }
  a.res:hover .res-name { transform: none; }
}