/* Latvian Startup Awards 2026. The original rendered lettering, native CSS background light,
   the banner's navy/cyan/magenta, and mist/ink for reading. Square corners and hairline rules. */

/* @font-face is in the page head, so its URL carries the same content hash as the preload. */

:root {
  /* Palette from the event banner: deep navy and indigo, electric cyan, neon magenta, with a cool
     mist for reading. --night is the rendered stage edge, so the video melts into the page. */
  --night: #14182f;
  --night-deep: #090d24;
  --indigo: #17164a;
  --cyan: #19e6ea;
  --magenta: #f241b5;
  --pink: #f98dbe;           /* small text on dark */
  --magenta-ink: #a8106a;    /* magenta for text on mist */
  --white: #f3f4f8;
  --white-dim: rgba(243, 244, 248, 0.78);
  --mist: #eef0f7;
  --ink: #0d1330;
  --ink-soft: #4a5170;
  --rule: rgba(13, 19, 48, 0.14);
  --rule-light: rgba(243, 244, 248, 0.2);
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1480px;
  --bar-h: 64px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--night);
}

@media (prefers-reduced-motion: no-preference) {
  html.smooth-scroll {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: var(--magenta);
  color: var(--night-deep);
}

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

.bar :focus-visible,
.hero :focus-visible,
.categories :focus-visible,
.jury :focus-visible,
.qr :focus-visible,
.foot :focus-visible {
  outline-color: var(--cyan);
}

.ceremony :focus-visible {
  outline-color: var(--night);
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -120px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* Header */

.bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  color: var(--white);
}

.bar__inner {
  max-width: var(--max);
  height: var(--bar-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.bar__mark {
  font-size: 1.0625rem;
  font-weight: 780;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.bar__mark span {
  font-weight: 340;
}

.bar__panel {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

.bar__nav {
  display: flex;
  gap: clamp(18px, 2.2vw, 32px);
}

.bar__nav a,
.bar__lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 520;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease;
}

.bar__nav a:hover {
  border-bottom-color: currentColor;
}

.bar__lang {
  display: flex;
  gap: 2px;
}

.bar__lang a {
  padding: 0 8px;
  font-stretch: 75%;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--white-dim);
}

.bar__lang a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--white);
}

.bar__lang a:hover {
  color: var(--white);
}

.bar__menu {
  display: none;
}

@media (max-width: 359px) {
  .bar__inner { gap: 12px; }
  .bar__mark { font-size: 0.875rem; }
}

@media (max-width: 759px) {
  .bar__menu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }

  .bar__menu::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.2s var(--ease-out);
  }

  .bar__menu[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .bar__panel {
    display: none;
    position: absolute;
    top: var(--bar-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 4px var(--gutter) 24px;
    background: var(--night-deep);
    box-shadow: 0 24px 40px rgba(4, 6, 20, 0.45);
  }

  .bar__panel.is-open {
    display: flex;
  }

  .bar__nav {
    flex-direction: column;
    gap: 0;
  }

  .bar__nav a {
    min-height: 52px;
    font-size: 1.375rem;
    font-weight: 650;
    border-bottom: 1px solid var(--rule-light);
  }

  .bar__lang {
    padding-top: 8px;
  }

  .bar__lang a {
    font-size: 1rem;
    padding: 0 12px 0 0;
  }

  .no-js .bar__menu {
    display: none;
  }

  .no-js .bar__inner {
    height: auto;
    min-height: var(--bar-h);
    flex-wrap: wrap;
  }

  .no-js .bar__panel {
    display: flex;
    position: static;
    width: 100%;
    background: none;
    box-shadow: none;
    padding: 0 0 16px;
  }
}

/* The filmed title and transparent final render share the exact same frame and cover geometry. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(100svh, 560px);
  background: var(--night);
  color: var(--white);
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Native-resolution light fields sit behind the original rendered letters. Only transforms move. */
.stage__atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(120deg, #14182f 10%, #122033 55%, #1b1834);
  opacity: 1;
  transition: opacity 1.2s ease;
}

.stage__atmosphere::before,
.stage__atmosphere::after {
  content: "";
  position: absolute;
  inset: -12%;
  animation: atmosphere-cyan 28s ease-in-out infinite alternate paused;
}

.stage__atmosphere::before {
  background: radial-gradient(ellipse at 22% 28%, rgba(25, 230, 234, 0.14), transparent 58%);
}

.stage__atmosphere::after {
  background: radial-gradient(ellipse at 78% 75%, rgba(242, 65, 181, 0.13), transparent 60%);
  animation-name: atmosphere-magenta;
  animation-duration: 34s;
}

.intro-pending .stage__atmosphere,
.intro-playing .stage__atmosphere {
  opacity: 0;
}

.js.intro-done:not(.page-hidden) .hero.motion-visible .stage__atmosphere::before,
.js.intro-done:not(.page-hidden) .hero.motion-visible .stage__atmosphere::after {
  animation-play-state: running;
  will-change: transform;
}

@keyframes atmosphere-cyan {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

@keyframes atmosphere-magenta {
  from { transform: translate3d(3%, 2%, 0) scale(1.06); }
  to { transform: translate3d(-4%, -3%, 0) scale(1); }
}

.js .hero__cue span { animation-play-state: paused; }
.js:not(.page-hidden) .hero__cue.motion-visible span { animation-play-state: running; }

.field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Static textures need no dedicated compositor surface. */
}

.stage__still,
.stage__still img,
.stage__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: max(100svh, 560px);
  object-fit: cover;
  object-position: 0% 50%;
}

.stage__still {
  opacity: 1;
}

/* No footage reached the screen (blocked, failed or stalled): fade the lockup in. */
.intro-cold .stage__still {
  transition: opacity 0.8s ease;
}

.intro-pending .stage__still { opacity: 0; animation: failsafe-show 0.01s 9s forwards; }

.stage__video {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.intro-pending .stage__video,
.intro-playing .stage__video {
  opacity: 1;
}

.stage--text .stage__still {
  display: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: max(100svh, 560px);
  padding: calc(var(--bar-h) + 24px) var(--gutter) 64px;
  font-family: Arial, Helvetica, sans-serif;
}

/* The facts start right of the lockup: it ends at 40.5% of the cover-scaled 16:9 render. */
.hero__facts {
  max-width: 36rem;
  margin-left: calc(max(0.405 * max(100vw, 1.7778 * max(100svh, 560px)) + 3vw, 50vw) - var(--gutter));
}

@media (max-aspect-ratio: 6 / 5) {
  .stage__still img,
  .stage__video {
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }

  .hero__inner {
    display: block;
    /* The portrait lockup ends at 47% of the cover-scaled 9:16 render. */
    padding-top: calc(0.5 * max(100svh, 560px, 177.78vw));
    padding-bottom: 56px;
  }

  .hero__facts {
    margin-left: 0;
  }
}

/* Semantic text stays hidden while the original artwork is available. */
.stage__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Only a complete media failure uses the text fallback. Normal playback never swaps fonts. */
.stage--text .stage__title {
  top: 50%;
  left: var(--gutter);
  width: 44%;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  margin: 0;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: clamp(3.5rem, 8.8vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.stage--text .stage__title span { display: block; }

@media (max-aspect-ratio: 6 / 5) {
  .stage--text .stage__title {
    top: calc(var(--bar-h) + 5vh);
    width: calc(100% - 2 * var(--gutter));
    transform: none;
    font-size: clamp(3.5rem, 20vw, 8rem);
  }
}

.stage__control {
  position: absolute;
  left: var(--gutter);
  bottom: 24px;
  z-index: 3;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(243, 244, 248, 0.45);
  border-radius: 2px;
  background: rgba(9, 13, 36, 0.5);
  color: var(--white);
  font: inherit;
  font-size: 0.8125rem;
  font-stretch: 75%;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.stage__control:hover {
  background: rgba(9, 13, 36, 0.85);
  border-color: var(--white);
}

/* Portrait screens: during the opening the control sits at the bottom of the first screen, where
   the facts have not appeared yet; afterwards it follows the facts instead of covering the title. */
@media (max-aspect-ratio: 6 / 5) {
  .hero__inner {
    padding-bottom: 112px;  /* room for the control below the facts, so nothing shifts */
  }

  .stage__control {
    bottom: 40px;
  }

  .intro-pending .stage__control,
  .intro-playing .stage__control {
    top: calc(max(100svh, 560px) - 72px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* A small moving cue once the intro is over: there is more below. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  width: 2px;
  height: 46px;
  background: rgba(243, 244, 248, 0.18);
  opacity: 0;
  transition: opacity 0.8s ease 0.6s;
}

.hero__cue span {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 14px;
  background: var(--cyan);
  animation: cue 2.4s var(--ease-out) infinite;
}

.facts-in .hero__cue {
  opacity: 1;
}

@keyframes cue {
  0% { transform: translateY(-14px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

@media (max-aspect-ratio: 6 / 5) {
  .hero__cue {
    display: none;
  }
}

.hero__facts > * {
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}

.intro-pending .hero__facts > * {
  opacity: 0;
  transform: translateY(18px);
  animation: failsafe-show 0.01s 9s forwards;
}

.facts-in .hero__facts > * {
  opacity: 1;
  transform: none;
}

.facts-in .hero__facts > :nth-child(2) { transition-delay: 0.08s; }
.facts-in .hero__facts > :nth-child(3) { transition-delay: 0.18s; }
.facts-in .hero__facts > :nth-child(4) { transition-delay: 0.26s; }
.facts-in .hero__facts > :nth-child(5) { transition-delay: 0.34s; }
.facts-in .hero__facts > :nth-child(6) { transition-delay: 0.44s; }

@keyframes failsafe-show {
  to {
    opacity: 1;
    transform: none;
  }
}

/* The finished hero stays alive: the title is a glass plate that leans toward the pointer and
   catches light, a sweep of cyan and magenta crosses the lettering every few seconds, and the
   storm's leftover shards fly back in at the hand-over and keep drifting in three depths. Every
   layer moves by transform or opacity only and sleeps offscreen, in hidden tabs and with reduced
   motion. The layers sit under the opaque intro video, so the opening itself is unchanged. */
.stage__plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: max(100svh, 560px);
  transform-origin: 22% 50%;
  transition: transform 1.1s var(--ease-out);
}

.stage__shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 50%;
  mask-position: 0% 50%;
  transition: opacity 0.9s ease;
}

.stage__shine.is-ready {
  opacity: 1;
}

.intro-pending .stage__shine,
.intro-playing .stage__shine,
.stage--text .stage__shine {
  opacity: 0;
}

@media (max-aspect-ratio: 6 / 5) {
  .stage__plate {
    transform-origin: 50% 25%;
  }

  .stage__shine {
    -webkit-mask-position: 50% 0%;
    mask-position: 50% 0%;
  }
}

/* A diagonal reflection in the banner's light, cyan into magenta, with a thin second streak. Its
   travel covers the lettering only, so the sweep reads slowly across the title. */
.shine__band {
  position: absolute;
  top: -20%;
  left: 0;
  width: 34%;
  height: 140%;
  background: linear-gradient(100deg, transparent 4%, rgba(25, 230, 234, 0.5) 26%, rgba(205, 253, 254, 0.86) 37%,
    rgba(242, 65, 181, 0.5) 50%, transparent 66%, transparent 73%, rgba(25, 230, 234, 0.42) 78%, transparent 84%);
  transform: translate3d(-110%, 0, 0) skewX(-14deg);
  animation: shine-sweep 7.6s cubic-bezier(0.45, 0.05, 0.25, 1) 1.2s infinite paused;
}

.js.intro-done:not(.page-hidden) .hero.motion-visible .shine__band {
  animation-play-state: running;
}

@keyframes shine-sweep {
  0% { transform: translate3d(-110%, 0, 0) skewX(-14deg); }
  30%, 100% { transform: translate3d(150%, 0, 0) skewX(-14deg); }
}

@keyframes shine-sweep-tall {
  0% { transform: translate3d(-110%, 0, 0) skewX(-10deg); }
  30%, 100% { transform: translate3d(330%, 0, 0) skewX(-10deg); }
}

@media (max-aspect-ratio: 6 / 5) {
  .shine__band {
    animation-name: shine-sweep-tall;
  }
}

/* The pointer's own light, tinting only the letters under it. */
.shine__spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 46vmax;
  height: 46vmax;
  margin: -23vmax 0 0 -23vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 230, 234, 0.7) 0%, rgba(25, 230, 234, 0.42) 22%,
    rgba(242, 65, 181, 0.3) 44%, transparent 68%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.js.intro-done:not(.page-hidden) .hero.motion-visible.is-lit .shine__spot {
  will-change: transform;
}

.hero.is-lit .shine__spot {
  opacity: 1;
}

.glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glass__layer {
  position: absolute;
  inset: -6%;
  transition: translate 1.2s var(--ease-out);
}

.glass__shard {
  position: absolute;
  display: block;
  transition: translate 1.1s var(--ease-out), rotate 1.4s var(--ease-out);
}

.glass__shard u,
.glass__shard i {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.glass__shard s {
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  opacity: 0.8;
}

.intro-pending .glass,
.intro-playing .glass,
.stage--text .glass {
  visibility: hidden;
}

/* A compact live countdown under the venue line. */
.hero__count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 16px 0 0;
  font-size: 0.9375rem;
}

/* Its line is reserved before the script fills it, so nothing below moves. */
.hero__count:not(.is-live) {
  visibility: hidden;
}

.no-js .hero__count,
.hero__count[hidden] {
  display: none;
}

/* The ceremony clock's space is reserved too, so a late script cannot push the page down. */
.countdown:not(.is-live) {
  visibility: hidden;
}

.no-js .countdown,
.after-ceremony .countdown,
.after-ceremony .hero__count {
  display: none;
}

.hero__count-label {
  color: var(--white-dim);
  font-stretch: 75%;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

.hero__count-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 2px 10px;
  color: var(--cyan);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-size: 1.1875rem;
  letter-spacing: 0.01em;
}

.hero__count-clock > span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.hero__count-clock .countdown__num {
  display: inline-block;
  min-width: 2ch;
  font-size: inherit;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: right;
}

.hero__count-clock small {
  color: var(--white-dim);
  font-size: 0.75rem;
  font-weight: 560;
}

.facts-in .hero__facts > :nth-child(7) { transition-delay: 0.52s; }

/* The primary invitation keeps a slow sheen. */
.hero .button--solid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero .button--solid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, 0.7) 48%, transparent 86%);
  transform: translate3d(-120%, 0, 0) skewX(-18deg);
  animation: button-sheen 6.4s ease-in-out 2.6s infinite paused;
}

.js.intro-done:not(.page-hidden) .hero.motion-visible .button--solid::before {
  animation-play-state: running;
}

@keyframes button-sheen {
  0% { transform: translate3d(-120%, 0, 0) skewX(-18deg); }
  22%, 100% { transform: translate3d(240%, 0, 0) skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .shine__band,
  .hero .button--solid::before {
    animation: none;
    opacity: 0;
  }

  .stage__plate,
  .glass__layer,
  .glass__shard {
    transition: none;
  }
}

.kicker {
  margin: 0 0 clamp(14px, 2vw, 28px);
  color: var(--cyan);
  font-size: 0.875rem;
  font-stretch: 75%;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.when {
  margin: 0;
}

.when time {
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 1.6vw, 24px);
}

/* A familiar, lighter numeral balances the event details beside the title. */
.when__day {
  font-size: clamp(6.5rem, 11vw, 10rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.74;
  font-variant-numeric: lining-nums;
}

.when__rest {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.04em;
  font-size: clamp(1.75rem, 2.8vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.96;
}

.when__rest span:last-child {
  font-weight: 340;
}

.when__label {
  max-width: 24ch;
  margin: clamp(20px, 2.4vw, 36px) 0 0;
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.when__meta {
  margin: 10px 0 0;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  font-weight: 520;
}

.hero__tagline {
  max-width: 44ch;
  margin: 14px 0 0;
  color: var(--white-dim);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(26px, 3vw, 44px) 0 0;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 22px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 640;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button::after {
  content: "\2193";
  font-weight: 400;
  transition: transform 0.25s var(--ease-out);
}

.button:hover::after {
  transform: translateY(3px);
}

.button:hover {
  background: rgba(243, 244, 248, 0.12);
}

.button--solid {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--night-deep);
}

.button--solid:hover {
  border-color: #8ff4f6;
  background: #8ff4f6;
}

.button--out::after {
  content: "\2197";
}

.button--out:hover::after {
  transform: translate(2px, -2px);
}

/* Sections */

.section {
  padding: clamp(80px, 11vw, 168px) 0;
}

.section__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--magenta-ink);
  font-size: 0.8125rem;
  font-stretch: 75%;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

h2 {
  margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  font-weight: 780;
  letter-spacing: -0.025em;
  /* Room for Latvian commas below (ņ, ļ, ķ, ģ) above the next line's ascenders. */
  line-height: 1;
  text-wrap: balance;
}

.lead {
  max-width: 44ch;
  margin: clamp(20px, 2.2vw, 32px) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.125rem, 1.45vw, 1.375rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.section__head--wide {
  max-width: 62rem;
}

/* Process */

.process__grid {
  display: grid;
  gap: clamp(40px, 6vw, 64px);
}

@media (min-width: 960px) {
  .process__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(48px, 7vw, 128px);
  }

  .process .section__head {
    position: sticky;
    top: 48px;
    align-self: start;
  }
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--ink);
}

.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: clamp(12px, 2vw, 28px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
}

.step__num {
  grid-row: span 2;
  padding-top: 0.15em;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-stretch: 75%;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.step__when {
  margin: 0;
  color: var(--magenta-ink);
  font-size: 0.875rem;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.step__text {
  max-width: 34ch;
  margin: 8px 0 0;
  font-size: clamp(1.25rem, 1.85vw, 1.625rem);
  font-weight: 460;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-wrap: pretty;
}

.step--final .step__text {
  font-weight: 720;
}

.step--final .step__num {
  color: var(--magenta-ink);
}

.step__text a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

.step__text a[rel~="external"]::after {
  content: "\00a0\2197";  /* non-breaking: the arrow never wraps alone */
}

/* Nominations closed on 16 October: boot.js marks the page after-nominations before first paint,
   so the hero button and the step's link are never shown and then removed. Without scripts the
   page keeps the open invitation, whose dates already say when it ended. */
.nominations-closed {
  display: none;
}

.after-nominations .nominations-open {
  display: none;
}

.after-nominations .step__text .nominations-closed {
  display: inline;
}

.after-nominations .step__closed.nominations-closed {
  display: block;
}

/* The Community Choice vote closes after 27 October the same way: boot.js marks the page
   after-voting before first paint, so the form link is never shown and then removed. */
.voting-closed {
  display: none;
}

.after-voting .voting-open {
  display: none;
}

.after-voting .step__text .voting-closed {
  display: inline;
}

.after-voting .step__closed.voting-closed,
.after-voting .award__vote.voting-closed {
  display: block;
}

.step__closed {
  grid-column: 2;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 560;
}

/* Categories */

.categories {
  background: var(--indigo);
  color: var(--white);
}

.categories .eyebrow {
  color: var(--pink);
}

.categories .lead {
  color: var(--white-dim);
}

.awards {
  margin: clamp(44px, 5.5vw, 80px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--white);
}

.award {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(12px, 2vw, 28px);
  padding: clamp(14px, 1.7vw, 24px) 0;
  border-bottom: 1px solid var(--rule-light);
}

.award__num {
  color: var(--white-dim);
  font-size: 0.9375rem;
  font-stretch: 75%;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.award__name {
  margin: 0;
  font-size: clamp(2.1rem, 6.2vw, 5.5rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.award__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--pink);
  font-size: 0.8125rem;
  font-stretch: 75%;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.award__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
}

.award__vote {
  grid-column: 2 / -1;
  margin: 12px 0 0;
  color: var(--white-dim);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 650;
}

.award__vote a {
  color: var(--pink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

.award__vote a::after {
  content: "\00a0\2197";  /* non-breaking: the arrow never wraps alone */
}

.award__desc {
  grid-column: 2 / -1;
  max-width: 62ch;
  margin: clamp(10px, 1.1vw, 16px) 0 0;
  color: var(--white-dim);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.5;
  text-wrap: pretty;
}

@media (max-width: 759px) {
  .award {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .award__tag,
  .award__desc {
    grid-column: 2;
  }

  .award__tag {
    margin-top: 10px;
    white-space: normal;
  }
}

/* Ceremony: the banner's neon magenta as one bold band, navy type at full strength (5.4:1). */

.ceremony {
  background: var(--magenta);
  color: var(--night);
}

.ceremony .eyebrow {
  color: var(--night);
}

.ceremony__grid {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 960px) {
  .ceremony__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(48px, 7vw, 128px);
  }

  .ceremony__aside {
    position: sticky;
    top: 48px;
  }
}

/* Countdown: full-width numerals like the hero date, each unit rolling in when it changes. */
.countdown {
  margin-top: clamp(36px, 4.5vw, 64px);
  padding-top: 18px;
  border-top: 1.5px solid var(--night);
}

.countdown__label {
  margin: 0;
  font-size: 0.8125rem;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.countdown__clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: clamp(14px, 2.4vw, 36px);
  margin: 14px 0 0;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.countdown__num {
  display: block;
  overflow: hidden;
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* A changed number turns like an odometer (site.js, the ceremony clock and the process stage
   counter): the old digits slide up out of the box as the new ones slide in. Transform only, so a
   digit is drawn at every moment. */
.countdown .countdown__num,
.stage-count__now {
  position: relative;
}

.odometer__in {
  display: block;
}

.odometer__out {
  position: absolute;
  left: 0;
  top: 0;
}

.countdown__name {
  font-size: 0.75rem;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ceremony__date {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: end;
  column-gap: clamp(14px, 2vw, 28px);
}

.ceremony__day {
  grid-row: span 2;
  font-size: clamp(9rem, 27vw, 24rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.74;
}

.ceremony__month {
  font-size: clamp(2.2rem, 5.4vw, 4.75rem);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.ceremony__year {
  font-size: clamp(2.2rem, 5.4vw, 4.75rem);
  font-weight: 340;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.ceremony h2 {
  max-width: 22ch;
  font-size: clamp(1.75rem, 2.9vw, 2.75rem);
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.facts {
  margin: clamp(28px, 3vw, 44px) 0 0;
  border-top: 1.5px solid var(--night);
}

.facts__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 2fr) 3fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(18, 26, 64, 0.28);
}

@media (max-width: 759px) {
  .facts__row {
    grid-template-columns: 6.25rem minmax(0, 1fr);
  }
}

.facts dt {
  padding-top: 0.25em;
  font-size: 0.8125rem;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facts dd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
}

.facts dd::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  transform: translateY(-1px);
}

.facts__row--confirmed dd::before {
  background: var(--night);
}

.facts__row--pending dd {
  font-weight: 460;
}

.facts__row--pending dd::before {
  border: 1.5px solid currentColor;
}

.facts dd a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.facts dd a::after {
  content: "\00a0\2197";  /* non-breaking: the arrow never wraps alone */
}

.agenda__title {
  margin: clamp(36px, 4vw, 56px) 0 0;
  font-size: 0.8125rem;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.agenda {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--night);
}

.agenda__item {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(18, 26, 64, 0.28);
  font-size: 1.125rem;
  line-height: 1.35;
}

.agenda__time {
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.ceremony__source {
  margin: 20px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Archive */

.archive__grid {
  display: grid;
  gap: 48px;
  margin-top: clamp(40px, 5vw, 72px);
}

@media (min-width: 760px) {
  .archive__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 112px);
  }
}

.archive h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1.5px solid transparent;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 720;
  letter-spacing: -0.02em;
}

/* The year's rule, drawn in the border's place so it can grow when the year arrives. */
.archive h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 1.5px;
  background: var(--ink);
  transform-origin: left;
}

.archive__note {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.mark {
  flex: none;
  width: 14px;
  height: 14px;
}

.mark--done {
  background: var(--magenta-ink);
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding: 15px 0 15px 28px;
  border-bottom: 1px solid var(--rule);
  font-size: 1.125rem;
  line-height: 1.4;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(15px + 0.45em);
  width: 9px;
  height: 9px;
}

.checklist--done li::before {
  background: var(--magenta-ink);
}

.archive__source {
  margin: clamp(36px, 4vw, 56px) 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* One award per row: the category above, the winner on the marked line, nominees beneath. */
.archive__list li::before {
  top: calc(15px + 1.9rem);
}

.archive__category {
  display: block;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.archive__winner {
  display: block;
  margin-top: 4px;
  font-weight: 720;
}

.archive__finalists {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

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

/* Footer */

.foot {
  background: var(--night-deep);
  color: var(--white);
  overflow: hidden;
}

.foot__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 112px) var(--gutter) clamp(24px, 3vw, 40px);
}

.foot__mark {
  margin: 0;
  font-size: clamp(3.2rem, 9vw, 9.2rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.84;
  white-space: nowrap;
}

.foot__mark span {
  display: block;
}

.foot__mark span:last-child {
  font-weight: 340;
}

@media (max-width: 759px) {
  .foot__mark {
    font-size: 15vw;
    white-space: normal;
  }
}

.partners {
  display: grid;
  gap: 28px;
  margin-top: clamp(40px, 5vw, 64px);
}

@media (min-width: 760px) {
  .partners {
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(32px, 5vw, 96px);
  }
}

.partners__title {
  margin: 0 0 10px;
  color: var(--pink);
  font-size: 0.8125rem;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.partners ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.partners li {
  padding: 6px 0;
  font-size: 1.0625rem;
  font-weight: 520;
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--rule-light);
  font-size: 0.9375rem;
}

.foot__edition {
  margin: 0;
  color: var(--white-dim);
}

.foot__lang {
  display: flex;
  gap: 4px;
}

.foot__lang a,
.foot__top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  text-decoration: none;
  font-weight: 600;
}

.foot__lang a {
  font-stretch: 75%;
  letter-spacing: 0.08em;
  color: var(--white-dim);
}

.foot__lang a[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.foot__top::after {
  content: "\2191";
  margin-left: 10px;
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
}

.foot__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--white-dim);
  text-decoration: none;
  font-weight: 520;
}

.foot__legal a:hover,
.foot__legal a[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.partners a {
  text-decoration: none;
}

.partners a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Jury: names and roles as the organisers sent them. */

.jury {
  background: var(--night);
  color: var(--white);
}

.jury .eyebrow {
  color: var(--pink);
}

.jurors {
  display: grid;
  gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px);
  margin: clamp(44px, 5.5vw, 80px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .jurors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .jurors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .jurors {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.juror {
  position: relative;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1.5px solid var(--rule-light);
}

.juror::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 42%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  transform-origin: left;
}

/* Pointing at a juror or tabbing to their link runs the coloured rule across the whole edge. */
@media (prefers-reduced-motion: no-preference) {
  .juror::before {
    transition: transform 0.6s var(--ease-out);
  }

  .juror:has(:focus-visible)::before {
    transform: scaleX(2.381); /* 42% of the edge to all of it */
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .juror:hover::before {
    transform: scaleX(2.381);
  }
}

.juror__name {
  margin: 0;
  font-size: clamp(1.6rem, 2.2vw, 2.15rem);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.juror__role {
  margin: 12px 0 0;
  color: var(--white-dim);
  font-size: 1rem;
  line-height: 1.45;
}

.juror__role span {
  display: block;
}

.juror__role span + span {
  margin-top: 6px;
}

.juror__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  color: var(--cyan);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.juror__link:hover {
  color: var(--pink);
}

/* QR code: a voxel tree on a floating garden island that settles into the code while the section
   is pinned. qr.js draws it; without scripts the same final code is an inline SVG. */

.qr {
  position: relative;
  overflow: clip;
  background: var(--night);
  color: var(--white);
}

.qr .eyebrow {
  color: var(--pink);
}

.qr--motion .qr__track {
  height: 280vh;
  height: 280svh;
}

/* Reserve the scene's scroll length before qr.js runs, so a restored position below it lands
   at once instead of first painting the top of the page. */
@media (prefers-reduced-motion: no-preference) {
  .js .qr:not(.qr--ready):not(.qr--static) .qr__track {
    height: 280vh;
    height: 280svh;
  }

  /* Pinned like the scene, so a script that never runs leaves the code in view, not a gap. */
  .js .qr:not(.qr--ready):not(.qr--static) .qr__stage {
    position: sticky;
    top: 0;
  }
}

.qr__stage {
  --garden-x: 76%;
  --garden-y: 54%;
  position: relative;
  isolation: isolate;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(80px, 11vw, 140px) var(--gutter);
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* A still light field and one composited spiral disc sit behind the island. */
.qr__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.qr__stage::before {
  background:
    radial-gradient(ellipse at var(--garden-x) var(--garden-y), rgba(102, 83, 190, 0.32), transparent 58%),
    radial-gradient(ellipse at 96% 24%, rgba(242, 65, 181, 0.2), transparent 43%),
    radial-gradient(ellipse at 48% 90%, rgba(25, 230, 234, 0.13), transparent 46%);
}

.qr__galaxy {
  position: absolute;
  z-index: -1;
  left: var(--garden-x);
  top: var(--garden-y);
  width: clamp(560px, 88vw, 1320px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) rotateX(48deg) rotate(-18deg);
}

.qr__galaxy img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  animation: galaxy-orbit 80s linear infinite paused;
}

.qr--active .qr__galaxy img {
  animation-play-state: running;
  will-change: transform;
}

@keyframes galaxy-orbit {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .qr__galaxy img { animation: none; }
}

.qr--motion .qr__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: clamp(20px, 4vh, 56px);
  padding-bottom: clamp(20px, 4vh, 56px);
  grid-template-rows: auto minmax(0, 1fr);
}

@media (min-width: 960px) {
  .qr__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .qr--motion .qr__stage {
    grid-template-rows: minmax(0, 1fr);
  }
}

.qr h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
}

.qr__register {
  margin-top: clamp(20px, 3vw, 40px);
}

@media (max-width: 959px) {
  .qr__stage {
    --garden-x: 50%;
    --garden-y: 76%;
  }

  .qr__galaxy {
    width: 160vw;
    max-width: 900px;
  }

  .qr--motion .qr__stage {
    gap: 12px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .qr h2 {
    font-size: clamp(1.8rem, 8vw, 3rem);
  }

  .qr__register {
    margin-top: 20px;
  }

}

/* A sideways phone needs the same two-column composition as a wide screen. */
@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .qr--motion .qr__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .qr h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
  .qr .eyebrow { margin-bottom: 12px; }
  .qr__register { margin-top: 14px; }
  .qr__text .qr__toggle { margin-top: 12px; }
  .qr__stage { --garden-x: 76%; --garden-y: 54%; }
  .qr__galaxy { width: 85vw; }
}

.qr__text .qr__toggle {
  display: flex;
  width: fit-content;
}

.qr__scene {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.qr--motion .qr__scene {
  max-width: none;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

@media (max-width: 959px) {
  .qr--motion .qr__scene {
    width: min(100%, calc(100svh - 270px));
    height: auto;
    aspect-ratio: 1;
    align-self: center;
  }
}

@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .qr--motion .qr__scene { width: min(100%, calc(100svh - 40px)); }
}

.qr__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.qr__ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.qr--ready .qr__canvas {
  cursor: pointer;
}

/* The switch plays the change by itself: off is the tree, on is the code. */
.qr__toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 18px 0 8px;
  border: 1.5px solid var(--rule-light);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 620;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.qr__toggle:hover {
  border-color: var(--white-dim);
}

.qr__knob {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(243, 244, 248, 0.18);
  transition: background-color 0.25s ease;
}

.qr__knob::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.3s var(--ease-out);
}

.qr__toggle[aria-pressed="true"] .qr__knob {
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
}

.qr__toggle[aria-pressed="true"] .qr__knob::after {
  transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
  .qr__knob,
  .qr__knob::after {
    transition: none;
  }
}

.qr__svg {
  display: block;
  width: 90%;
  height: auto;
  margin: 5%;
}

.qr__hint {
  position: absolute;
  left: 50%;
  bottom: 2%;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--rule-light);
  border-radius: 999px;
  background: rgba(20, 24, 47, 0.72);
  color: var(--white-dim);
  font-size: 0.875rem;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.qr:not(.qr--ready) .qr__canvas,
.qr:not(.qr--ready) .qr__toggle,
.qr:not(.qr--motion) .qr__hint,
.qr--ready .qr__fallback {
  display: none;
}

/* Keep the observed canvas box stable while the independent SVG covers a lost context. */
.qr--lost .qr__canvas,
.qr--lost .qr__ambient,
.qr--lost .qr__toggle,
.qr--lost .qr__hint {
  visibility: hidden;
}

.qr--lost .qr__fallback {
  display: block;
  position: absolute;
  inset: 0;
}

/* Supporters: the logos on white, as on the organisers' previous site. */

.supporters {
  background: #fff;
  color: var(--ink);
  padding: clamp(56px, 7vw, 104px) 0;
}

.supporters__group + .supporters__group {
  margin-top: clamp(48px, 6vw, 88px);
}

.supporters__title {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  letter-spacing: -0.03em;
  text-align: center;
}

.supporters__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 96px);
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.supporters__logo {
  width: auto;
  height: 128px;
}

.supporters__logo--wide {
  height: 66px;
}

/* A long one-line wordmark at the wide height would outweigh every other mark in the band. */
.supporters__logo--wordmark {
  height: 48px;
}

@media (max-width: 599px) {
  .supporters__logo {
    height: 96px;
  }

  .supporters__logo--wide {
    height: 50px;
  }

  .supporters__logo--wordmark {
    height: 36px;
  }
}

/* Legal pages: the organisers' texts in English, set for reading. */

.legal-page {
  background: var(--mist);
}

.legal__bar {
  background: var(--night);
  color: var(--white);
}

.legal__bar .bar__lang {
  display: flex;
  gap: 16px;
}

.legal {
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 8vw, 120px);
}

.legal__body {
  max-width: 46rem;
  margin: 0 auto;
  line-height: 1.6;
}

.legal__body h1 {
  margin: 0 0 24px;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.legal__body h2 {
  margin: 2.2em 0 0.6em;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal__body h3 {
  margin: 1.6em 0 0.4em;
  font-size: 1.0625rem;
  font-weight: 700;
}

.legal__body p,
.legal__body ul,
.legal__body table {
  margin: 0 0 1em;
}

.legal__body ul {
  padding-left: 1.25em;
}

.legal__body li {
  margin: 0.3em 0;
}

.legal__body a {
  color: var(--magenta-ink);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.legal__updated {
  color: var(--ink-soft);
}

.legal__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.legal__body th,
.legal__body td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.foot--legal .foot__row {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Movement below the hero: the same glass shards drift behind the dark sections, the magenta band
   carries a few navy pieces, and the process draws its own progress line. Decoration only:
   everything stays readable and in place without it. */

.categories,
.foot,
.ceremony,
.process,
.archive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.categories .section__inner,
.foot__inner,
.ceremony .section__inner,
.process .section__inner,
.archive .section__inner {
  position: relative;
  z-index: 1;
}

.floaters {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.floaters i {
  position: absolute;
  display: block;
  background: var(--night);
  opacity: 0.88;
  /* Resting decoration below the opening; only the hero keeps a drifting field. */
}

.floaters i:nth-child(1) {
  left: 4%;
  top: 14%;
  width: 34px;
  height: 26px;
  clip-path: polygon(0 18%, 82% 0, 100% 74%, 22% 100%);
}

.floaters i:nth-child(2) {
  left: 41%;
  top: 8%;
  width: 18px;
  height: 22px;
  clip-path: polygon(30% 0, 100% 40%, 60% 100%, 0 70%);
}

.floaters i:nth-child(3) {
  left: 47%;
  bottom: 12%;
  width: 46px;
  height: 30px;
  clip-path: polygon(0 40%, 70% 0, 100% 60%, 35% 100%);
  opacity: 0.7;
}

.floaters i:nth-child(4) {
  right: 6%;
  top: 8%;
  width: 22px;
  height: 18px;
  clip-path: polygon(0 0, 100% 30%, 70% 100%);
}

.floaters i:nth-child(5) {
  left: 22%;
  bottom: 16%;
  width: 28px;
  height: 34px;
  clip-path: polygon(20% 0, 100% 25%, 80% 100%, 0 80%);
  opacity: 0.6;
}

/* On the light sections the pieces are the banner's cyan and pink, faint, and kept in the margins
   so they never sit behind a line of text. */
.floaters--light i {
  background: var(--cyan);
  opacity: 0.32;
}

.floaters--light i:nth-child(even) {
  background: var(--magenta);
  opacity: 0.22;
}

.floaters--light i:nth-child(1) { left: 1.2%; top: 16%; }
.floaters--light i:nth-child(2) { left: auto; right: 1.4%; top: 9%; }
.floaters--light i:nth-child(3) { left: 1.4%; top: 66%; bottom: auto; width: 30px; height: 22px; }
.floaters--light i:nth-child(4) { right: 1.2%; top: 54%; }
.floaters--light i:nth-child(5) { left: auto; right: 2%; bottom: 7%; }

@media (max-width: 1100px) {
  .floaters--light {
    display: none;
  }
}

@media (max-width: 900px) {
  .ceremony .floaters i:nth-child(n + 3) {
    display: none;
  }

  .ceremony .floaters i:nth-child(1) { left: auto; right: 4%; top: 3%; }
  .ceremony .floaters i:nth-child(2) { left: 3%; top: 1.5%; }
}

/* The five stages run along a rail. A cyan to magenta beam with a bright spark at its head follows
   the reader; each stage it reaches lights up (number, rule and text), and the sticky heading counts
   the current stage in large light numerals. */
.steps-wrap {
  position: relative;
}

.rail {
  display: none;
}

@media (min-width: 960px) {
  .rail {
    display: block;
    position: absolute;
    left: -34px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--rule);
  }

  .rail__beam {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--cyan), var(--magenta));
    box-shadow: 0 0 14px rgba(242, 65, 181, 0.45);
    transform-origin: top;
    transform: scaleY(0);
  }

  .rail__spark {
    position: absolute;
    left: -4px;
    top: -5px;
    width: 10px;
    height: 10px;
    background: var(--white);
    box-shadow: 0 0 8px 1px var(--magenta), 0 0 22px 4px rgba(25, 230, 234, 0.7);
    transform: rotate(45deg);
    opacity: 0;
  }
}

.step {
  position: relative;
}

.step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}

.step__num,
.step__when,
.step__text {
  transition: color 0.6s ease;
}

.is-live .step:not(.is-lit) .step__text {
  color: var(--ink-soft);
}

.is-live .step.is-lit::after {
  transform: scaleX(1);
}

.is-live .step.is-lit .step__num {
  color: var(--magenta-ink);
}

.stage-count {
  display: none;
}

@media (min-width: 960px) {
  .stage-count {
    display: flex;
    align-items: baseline;
    margin: clamp(32px, 4vw, 64px) 0 0;
    color: var(--ink);
    font-weight: 340;
    line-height: 0.8;
    letter-spacing: -0.04em;
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* A fixed clip with room around the glyphs: the turning digits leave and enter through it. */
  .stage-count__now {
    display: inline-block;
    font-size: clamp(7rem, 12vw, 12rem);
    color: var(--magenta-ink);
    clip-path: inset(-20% -10%);
  }

  .stage-count__all {
    margin-left: 0.12em;
    font-size: clamp(2.2rem, 3.4vw, 3.4rem);
    color: var(--ink-soft);
  }
}

/* Category rows slide in and draw a cyan rule under themselves. */
.award {
  position: relative;
}

.award::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--cyan);
  opacity: 0.75;
  transform-origin: left;
}

.reveal-ready .award:not(.is-in)::after {
  transform: scaleX(0);
}

.reveal-ready .award.is-in::after {
  transition: transform 1.3s var(--ease-out) 0.25s;
}

/* Eyebrow rules grow when their heading arrives. */
.reveal-ready .section__head .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left;
}

.reveal-ready .section__head.is-in .eyebrow::before {
  transform: scaleX(1);
  transition: transform 0.9s var(--ease-out) 0.2s;
}

/* The ceremony day is built from large shards (see site.js); month and year follow it in. */
.reveal-ready .reveal--date .ceremony__month,
.reveal-ready .reveal--date .ceremony__year {
  opacity: 1;
  transform: translateX(-18px);
}

.reveal-ready .reveal--date.is-in .ceremony__month,
.reveal-ready .reveal--date.is-in .ceremony__year {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease 0.45s, transform 0.9s var(--ease-out) 0.45s;
}

.reveal-ready .reveal--date.is-in .ceremony__month {
  transition-delay: 0.9s;
}

.reveal-ready .reveal--date.is-in .ceremony__year {
  transition-delay: 1.05s;
}

/* Lists inside a revealed block arrive one after another. */
.reveal-ready .reveal .checklist li,
.reveal-ready .ceremony__body .agenda__item {
  opacity: 1;
  transform: translateY(10px);
}

.reveal-ready .reveal.is-in .checklist li,
.reveal-ready .ceremony__body.is-in .agenda__item {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 0.15s);
}

/* An archive year draws its rule as it arrives, and each winner's marker pops in just after its
   row. Drawn at rest without scripts, with reduced motion, and for years already on screen. */
.reveal-ready .archive__year:not(.is-in) h3::after {
  transform: scaleX(0);
}

.reveal-ready .archive__year.is-in h3::after {
  transition: transform 1.1s var(--ease-out) 0.2s;
}

.reveal-ready .archive__year:not(.is-in) .archive__list li::before {
  transform: scale(0.4);
}

.reveal-ready .archive__year.is-in .archive__list li::before {
  transition: transform 0.45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 0.4s);
}

/* Essential content stays painted even when a busy main thread delays observers. */

.reveal-ready .reveal {
  opacity: 1;
  transform: translateY(26px);
}

.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* The footer's own rise would move its real text away from the glass sibling. */
.reveal-ready .award.reveal,
.reveal-ready .foot__mark.reveal {
  transform: none;
}

/* Whole-word glass faces (site.js) fade into the real, unsplit heading. */
.section__head,
.ceremony__date {
  position: relative;
}

.is-assembling {
  opacity: 0;
}

.shatter {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  contain: layout paint;
  overflow: clip;
}

.shatter__glyph {
  position: absolute;
  display: block;
  white-space: pre;
  font-optical-sizing: auto;
  text-transform: none;
}

.shatter__piece {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-text-fill-color: currentcolor;
  backface-visibility: hidden;
}

/* Once fused, a glint crosses the word, as it crosses the title at the end of the opening. It is
   painted on the aligned copies above the real heading (site.js), whose own fill never changes. */
.shatter__sheen {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, transparent 38%, var(--glint, #c8fdfe) 50%, transparent 62%);
  -webkit-background-clip: text;
  background-clip: text;
}

.process,
.archive {
  --glint: var(--magenta);
}

.ceremony {
  --glint: #ffffff;
}

@keyframes glint {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* Hovering a category lights its row: the number turns cyan and light runs across the name. */
@media (hover: hover) and (pointer: fine) {
  .award__num {
    transition: color 0.3s ease;
  }

  .award:hover .award__num {
    color: var(--cyan);
  }
}

/* The move and the light only with motion allowed. The light crosses an aligned copy drawn over
   the name (data-name, like the headings' .shatter__sheen); the real name's fill never changes,
   which would dim it and can blank a frame in WebKit. The copy is clear at rest. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .award__name {
    position: relative;
    transition: transform 0.5s var(--ease-out);
  }

  .award__name::after {
    content: attr(data-name);
    content: attr(data-name) / "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, transparent 0%, transparent 38%, var(--cyan) 50%, var(--pink) 56%, transparent 68%, transparent 100%);
    background-size: 280% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .award:hover .award__name {
    transform: translateX(14px);
  }

  .award:hover .award__name::after {
    animation: glint 1.1s ease-in-out forwards;
  }
}

/* Ribbons of the confirmed category names, crossing the seam into the ceremony band. */
.ribbons {
  position: relative;
  z-index: 5;
  height: 210px;
  margin: -105px 0;
  overflow: hidden;
  pointer-events: none;
}

.ribbon {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 66px;
  margin-top: -33px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ribbon--back {
  background: var(--cyan);
  color: var(--night-deep);
  transform: rotate(2.4deg);
}

.ribbon--front {
  background: var(--night-deep);
  color: var(--white);
  transform: rotate(-2.8deg);
}

.ribbon__track {
  display: flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
  will-change: auto;
}

.ribbon__track.motion-visible {
  will-change: transform;
}

.ribbon__track span {
  padding: 0 0.7em;
  font-size: clamp(1.25rem, 2.3vw, 2.1rem);
  font-stretch: 75%;
  font-weight: 780;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ribbon__track i {
  flex: none;
  width: 0.7rem;
  height: 0.9rem;
  clip-path: polygon(30% 0, 100% 38%, 64% 100%, 0 70%);
}

.ribbon--back .ribbon__track i {
  background: var(--magenta);
}

.ribbon--front .ribbon__track i {
  background: var(--cyan);
}

@media (max-width: 759px) {
  .ribbons {
    height: 120px;
    margin: -60px 0;
  }

  .ribbon {
    height: 46px;
    margin-top: -23px;
  }
}

/* Pointer light on the dark sections: one soft circle moved by transform, never repainted. */
[data-spot] > .pointer-light {
  position: absolute;
  left: -450px;
  top: -450px;
  z-index: 0;
  width: 900px;
  height: 900px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(25, 230, 234, 0.16), rgba(242, 65, 181, 0.07) 55%, rgba(242, 65, 181, 0));
  opacity: 0;
  transform: translate3d(50vw, 50%, 0);
  transition: opacity 0.6s ease;
}

[data-spot].is-spot > .pointer-light {
  opacity: 1;
}

/* Each section's top edge fires a seam of light as it arrives. */
.reveal-ready .process::after,
.reveal-ready .categories::after,
.reveal-ready .archive::after,
.reveal-ready .foot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, rgba(25, 230, 234, 0), var(--cyan) 25%, #ffffff 50%, var(--magenta) 75%, rgba(242, 65, 181, 0));
  box-shadow: 0 0 18px rgba(25, 230, 234, 0.8);
  opacity: 0;
  transform: scaleX(0);
  pointer-events: none;
}

.reveal-ready .is-seamed::after {
  animation: seam 1.8s var(--ease-out) forwards;
}

@keyframes seam {
  0% { opacity: 1; transform: scaleX(0); }
  55% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stage__atmosphere::before,
  .stage__atmosphere::after,
  .hero__cue span {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

@media print {
  .bar,
  .stage__video,
  .stage__control,
  .hero__actions {
    display: none !important;
  }

  .hero,
  .ceremony,
  .categories,
  .foot {
    background: none;
    color: #000;
  }

  .intro-pending .stage__title,
  .intro-pending .hero__facts > * {
    opacity: 1;
    transform: none;
  }

  /* A heading prepared below the fold prints finished, without its glass. */
  .is-assembling {
    opacity: 1 !important;
  }

  .shatter {
    display: none !important;
  }
}