@font-face {
  font-family: "Lexend";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Lexend-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Lexend";
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Lexend-SemiBold.ttf") format("truetype");
}

:root {
  /* One surface: the navy behind the light streams */
  --night: oklch(0.196 0.05 256);
  --ink: oklch(0.25 0.06 261);
  --text: oklch(0.97 0.01 258);
  --soft: oklch(0.8 0.035 258);
  --faint: oklch(0.64 0.04 258);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Outlines and dividers */
  --ring: 0 0 0 1px oklch(1 0 0 / 0.08) inset;
  --hairline: oklch(1 0 0 / 0.1);
  --font: "Lexend", ui-sans-serif, system-ui, sans-serif;

  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow-x: clip;
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

/* Controls, not content: no long-press selection or callout. Contact details stay selectable. */
.quiet,
.event {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Native-feeling press: dim on touch-down, on every input type */
.quiet:active {
  opacity: 0.6;
  transition-duration: 100ms;
}

a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.quiet:focus-visible {
  border-radius: 4px;
}

img {
  display: block;
}

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

.skip {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--text);
  color: var(--night);
  font-size: 14px;
  font-weight: 600;
  translate: 0 -200%;
}

.skip:focus-visible {
  translate: 0 0;
}

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
}

@media (width >= 48rem) {
  .wrap {
    padding-inline: 48px;
  }
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: max(24px, env(safe-area-inset-top, 0px)) 24px;
}

.top img {
  height: 24px;
  width: auto;
}

.top-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block: -12px;
}

/* Wide screens put the streams behind the nav. A navy halo keeps it legible over them and vanishes on the plain navy. */
@media (width >= 64rem) {
  .top-links {
    filter: drop-shadow(0 0 2px var(--night)) drop-shadow(0 0 10px var(--night));
  }
}

@media (width >= 48rem) {
  .top {
    padding-block: max(32px, env(safe-area-inset-top, 0px)) 32px;
  }
  .top img {
    height: 28px;
  }
}

.quiet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--soft);
  transition: color 300ms var(--ease);
}

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 300ms var(--ease);
}

/* Streams art: top of the page on phones, the right side of the screen on wide ones */
.art {
  position: relative;
  container-type: size;
  overflow: hidden;
  aspect-ratio: 1;
  margin-top: -16px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 72%, transparent);
  animation: fade 1200ms var(--ease) both;
}

/*
 * Cover by sizing, not object-fit: iOS Safari ignores object-fit on a video inside a
 * masked element and stretches it. The box keeps the video's 1280×864 shape and grows
 * until it covers the art area, centred.
 */
.art-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 148.15cqh);
  height: max(100cqh, 67.5cqw);
  max-width: none;
  translate: -50% -50%;
}

@media (width >= 64rem) {
  .art {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 60vw;
    aspect-ratio: auto;
    margin-top: 0;
    mask-image:
      linear-gradient(90deg, transparent, #000 40%),
      linear-gradient(180deg, #000 75%, transparent);
    mask-composite: intersect;
  }
}

/* Wide screens: the first screen is the statement beside the art. Phones just flow. */
.hero {
  position: relative;
}

.main {
  padding-block: 0 32px;
}

@media (width >= 64rem) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }
  .main {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding-block: 32px 96px;
  }
  .main > * {
    max-width: 36rem;
  }
}

.kicker {
  text-wrap: balance;
  font-size: 14px;
  line-height: 20px;
  color: var(--faint);
}

.display {
  margin-top: 16px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
  /* Room for descenders: the gradient only paints inside the box */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  background: linear-gradient(90deg, var(--text), var(--soft));
  background-clip: text;
  color: transparent;
}

@media (width >= 48rem) {
  .display {
    font-size: 60px;
  }
}

@media (width >= 80rem) {
  .display {
    font-size: 72px;
  }
}

.lede {
  margin-top: 24px;
  max-width: 26rem;
  font-size: 18px;
  line-height: 28px;
  color: var(--soft);
  text-wrap: pretty;
}

/* The event: outlined rather than filled, so it separates from the lede without outshouting it */
.onward {
  margin-top: 40px;
}

@media (width >= 48rem) {
  .onward {
    margin-top: 56px;
  }
}

/* The whole row is the link. The CTA wraps under the text until the row is wide enough to hold both. */
.event {
  container-type: inline-size;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  box-shadow: var(--ring);
  transition:
    background-color 300ms var(--ease),
    box-shadow 300ms var(--ease);
}

@media (width >= 48rem) {
  .event {
    max-width: 30rem;
  }
}

/* A calendar-style date column, set off by a hairline. It tops out with the title. */
.event-date {
  display: grid;
  flex-shrink: 0;
  align-content: start;
  padding-inline-end: 16px;
  border-inline-end: 1px solid var(--hairline);
}

.event-month {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.event-days {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.event-body {
  display: grid;
  flex: 1;
  justify-items: start;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

@container (width >= 24rem) {
  .event-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
}

.event-text {
  display: grid;
  gap: 2px;
}

.event-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.event-meta {
  font-size: 14px;
  line-height: 20px;
  color: var(--soft);
}

/* Secondary button: a quiet fill, trailing icon side 2px tighter */
.event-cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding-inline: 12px 10px;
  border-radius: 8px;
  background: oklch(1 0 0 / 0.08);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  transition: background-color 300ms var(--ease);
}

.event:active {
  background: oklch(1 0 0 / 0.04);
  transition-duration: 100ms;
}

.event:active .event-cta {
  background: oklch(1 0 0 / 0.14);
  transition-duration: 100ms;
}

@media (hover: hover) and (pointer: fine) {
  .event:hover {
    box-shadow: 0 0 0 1px oklch(1 0 0 / 0.14) inset;
  }
  .event:hover .event-cta {
    background: oklch(1 0 0 / 0.12);
  }
  .event:hover .event-cta .icon {
    translate: 2px 0;
  }
}

.nowrap {
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .quiet:hover {
    color: var(--text);
  }
  .top .quiet:hover .icon {
    translate: 2px -2px;
  }
}

/* Sections below the fold: intro on the left, actions on the right. Contact first, then the group. */
.section {
  display: grid;
  gap: 32px;
  padding-block: 64px;
}

@media (width >= 64rem) {
  .section {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
    padding-block: 96px;
  }
}

.section-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (width >= 48rem) {
  .section-title {
    font-size: 30px;
    line-height: 36px;
  }
}

.section-copy {
  margin-top: 8px;
  max-width: 24rem;
  line-height: 24px;
  color: var(--soft);
  text-wrap: pretty;
}

/* Consecutive sections share one gap instead of doubling it */
.section + .section {
  padding-top: 0;
}

/*
 * Contact and links: a plain list between hairlines, flush with the text edge.
 * Label over value in a narrow column (like a phone's contact card), side by side once there's room.
 */
.list {
  container-type: inline-size;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--hairline);
}

.list > li {
  border-top: 1px solid var(--hairline);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding-block: 12px;
  transition: opacity 300ms var(--ease);
}

.row-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--faint);
}

.row-value {
  grid-row: 2;
  line-height: 24px;
}

.row .icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--faint);
}

@container (width >= 28rem) {
  .row {
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: baseline;
    padding-block: 16px;
  }
  .row-value {
    grid-row: auto;
  }
  .row .icon {
    grid-column: auto;
    grid-row: auto;
    align-self: center;
  }
}

.row:focus-visible {
  border-radius: 4px;
}

.nums {
  font-variant-numeric: tabular-nums;
}

.row:active,
.legal a:active {
  opacity: 0.6;
  transition-duration: 100ms;
}

@media (hover: hover) and (pointer: fine) {
  .row:hover .icon {
    color: var(--text);
    translate: 2px 0;
  }
  .row[href^="http"]:hover .icon {
    translate: 2px -2px;
  }
  .legal a:hover {
    color: var(--text);
  }
}

/* Legal line: the last thing on the page, quiet and on its own */
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: auto;
  padding-block: 24px max(32px, env(safe-area-inset-bottom, 0px));
  font-size: 12px;
  line-height: 16px;
  color: var(--faint);
}

.legal a {
  color: var(--soft);
  transition: color 300ms var(--ease);
}

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


/* Staggered entrance, ordered by importance. Reduced motion keeps a fade. */
@keyframes enter {
  from {
    opacity: 0;
    translate: 0 16px;
    filter: blur(8px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.enter {
  animation: enter 900ms var(--ease) both;
}

.enter-2 {
  animation-delay: 80ms;
}
.enter-3 {
  animation-delay: 160ms;
}
.enter-4 {
  animation-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .enter,
  .art {
    animation: fade 300ms ease-out both;
  }
  .event,
  .event-cta,
  .icon,
  .quiet,
  .row,
  .legal a {
    transition: none;
  }
}