/* ONE NIGHT STAND – MEN EDITION landing
   Tokens, roles and the reasoning: DESIGN.md */

:root {
  --night: #05081f;
  --navy: #0a1447;
  --brick: #12227a;
  --neon: #57a6ff;
  --neon-core: #eaf3ff;
  --red: #e0102b;
  --red-deep: #b30d22;
  --ink: #f4f5fa;
  --muted: #a9b3d6;

  --font-display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: clamp(20px, 5vw, 40px);
  --container: 1120px;
  --section: clamp(48px, 6vw, 80px);
  --bar-h: 76px;
  --rail-h: 44px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: var(--night);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* no background here: html paints the night ground, the fixed wall layer sits above it (z-index -1) */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* The wall: brick relief cut from the poster, laid with overlay over three pools of blue stage light.
   One fixed layer – the browser composes it once. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("assets/brick-tile.webp") 50% 0 / 720px 36px repeat,
    radial-gradient(
      70% 45% at 50% 0%,
      rgba(18, 34, 122, 0.8),
      rgba(18, 34, 122, 0) 100%
    ),
    radial-gradient(
      60% 30% at 50% 55%,
      rgba(18, 34, 122, 0.32),
      rgba(18, 34, 122, 0) 100%
    ),
    radial-gradient(
      80% 40% at 50% 100%,
      rgba(18, 34, 122, 0.6),
      rgba(18, 34, 122, 0) 100%
    ),
    var(--night);
  background-blend-mode: overlay, normal, normal, normal, normal;
}

@media (min-width: 900px) {
  body::before {
    background-size:
      1440px 72px,
      auto,
      auto,
      auto,
      auto;
  }
}

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

a {
  color: var(--neon);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--neon);
  outline-offset: 3px;
}

p {
  margin: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* ---------- shared type ---------- */

.title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

/* The creatives' own date strip: condensed caps, thin bars between the three facts */
.strip {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.strip span {
  white-space: nowrap;
}

.strip span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin: 0 0.75em;
  vertical-align: -0.08em;
  background: rgba(244, 245, 250, 0.55);
}

/* the three-part strip in the rail breaks its venue onto a second line on the narrowest phones;
   the two-part strip under the stub's date stays on one line */
@media (max-width: 374px) {
  .rail__strip span:last-child {
    flex-basis: 100%;
    text-align: center;
  }

  .rail__strip span:last-child::before {
    display: none;
  }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 40px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 120ms ease;
}

.btn:hover {
  background: var(--red-deep);
}

.btn:active {
  transform: translateY(1px);
}

.btn--small {
  min-height: 44px;
  padding: 0 22px;
  font-size: 17px;
}

.btn--bar {
  min-height: 50px;
  padding: 0 26px;
  font-size: 18px;
  white-space: nowrap;
}

.btn--stub {
  width: 100%;
}

/* ---------- rail: the creatives' date strip above the poster; on desktop also the lockup and the button ---------- */

/* Two shows, one hall, one evening: the page opens on the choice between them. Equal halves, so the
   pair is symmetric before any content starts. Same component as on the women's page, in this
   page's own colours. */
.editions {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(5, 8, 31, 0.88);
  border-bottom: 1px solid rgba(87, 166, 255, 0.22);
}

.editions__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  padding: 9px 12px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(12px, 3vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.editions__item + .editions__item {
  border-left: 1px solid rgba(87, 166, 255, 0.22);
}

.editions__item:hover {
  color: var(--ink);
}

/* A red rule, not a red fill: the poster and the buy button already carry this page's red. */
.editions__item--on {
  color: var(--ink);
  border-bottom-color: var(--red);
}

.editions__item--on:hover {
  color: var(--ink);
}

.editions__time {
  font-weight: 700;
}

.rail {
  position: relative;
  z-index: 20;
  background: rgba(5, 8, 31, 0.88);
  border-bottom: 1px solid rgba(87, 166, 255, 0.22);
}

.rail__inner {
  max-width: var(--container);
  min-height: var(--rail-h);
  margin: 0 auto;
  padding: 6px var(--pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* phones: the poster carries the lockup and the bottom bar carries the button */
.rail__title,
.rail__buy {
  display: none;
}

.rail .strip {
  font-size: 15px;
  letter-spacing: 0.05em;
}

@media (max-width: 359px) {
  .rail .strip {
    font-size: 14px;
  }
}

@media (min-width: 900px) {
  .rail {
    position: sticky;
    top: 0;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .rail__inner {
    min-height: 60px;
    padding: 8px var(--pad);
    justify-content: space-between;
    gap: 32px;
  }

  .rail__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .rail__title span {
    color: var(--neon);
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  .rail .strip {
    font-size: 17px;
  }

  /* the button joins the rail once the poster's own button has left the screen; its space is reserved */
  .rail__buy {
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 220ms ease,
      visibility 220ms;
  }

  .rail--buy .rail__buy {
    visibility: visible;
    opacity: 1;
  }
}

/* ---------- hero: the poster in full, one button under its lockup ---------- */

.hero__media {
  position: relative;
}

/* the poster's top dissolves into the rail's shadow, its bottom into the wall */
.hero__media::before,
.hero__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.hero__media::before {
  top: 0;
  height: 9%;
  background: linear-gradient(
    to bottom,
    rgba(5, 8, 31, 0.9),
    rgba(5, 8, 31, 0)
  );
}

.hero__media::after {
  bottom: 0;
  height: 44px;
  background: linear-gradient(
    to bottom,
    rgba(5, 8, 31, 0),
    rgba(5, 8, 31, 0.8)
  );
}

.hero__img {
  width: 100%;
  object-fit: cover;
  /* Crop budget, measured on the tall crop: 11.5% of wall above the highest head, 2.5% under the neon.
     Only short phones crop at all: at most 10.4% (the floor below), split 82/18 top/bottom. */
  object-position: 50% 82%;
  background: var(--night);
  /* Explicit height = the box exists before the image arrives, so the button never jumps.
     149.5vw is the crop's natural height (1615 / 1080); 140px = rail + the button panel under the poster. */
  height: clamp(134vw, calc(100vh - 140px), 149.5vw);
  height: clamp(134vw, calc(100svh - 140px), 149.5vw);
}

.hero__panel {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--pad) 22px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.btn--hero {
  width: min(100%, 340px);
}

/* Portrait tablets: the 4:5 poster (1195 / 1080 = 110.6vw). Its heads touch the top edge, so any crop comes
   from the bottom and stops at 2.5% (the wall under the neon). */
@media (min-width: 600px) {
  .hero__img {
    object-position: 50% 0;
    height: clamp(107.8vw, calc(100vh - 140px), 110.6vw);
    height: clamp(107.8vw, calc(100svh - 140px), 110.6vw);
  }
}

/* Desktop and landscape tablets: the wide key visual (1920 x 858), always in full. On short laptops the
   panel falls under the fold and the rail carries the button instead. */
@media (min-width: 900px), (min-width: 600px) and (orientation: landscape) {
  .hero__img {
    object-position: 50% 0;
    height: auto;
    aspect-ratio: 1920 / 858;
  }
}

@media (min-width: 900px) {
  .hero__panel {
    padding: 20px var(--pad) 26px;
  }

  .btn--hero {
    width: auto;
    min-width: 320px;
    min-height: 64px;
    padding: 0 56px;
    font-size: 23px;
  }
}

/* ---------- story ---------- */

.story {
  padding-block: var(--section) 0;
}

.story__grid {
  display: grid;
  gap: 28px;
}

.statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.story__text {
  max-width: 60ch;
  display: grid;
  gap: 1em;
  font-size: 17px;
}

@media (min-width: 900px) {
  .story__grid {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: start;
  }

  .statement {
    position: sticky;
    top: 84px;
  }

  .story__text {
    font-size: 18px;
    padding-top: 8px;
  }
}

/* ---------- lineup: seven 4:5 portraits, one line each ---------- */

.lineup {
  padding-block: var(--section) 0;
}

.lineup__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.speaker {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: 18px;
  align-items: center;
  padding: 8px 0;
}

.speaker img {
  width: 88px;
  height: 110px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  grid-row: span 2;
  background: var(--navy);
}

.speaker__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: end;
}

.speaker__role {
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
  align-self: start;
}

@media (min-width: 600px) and (max-width: 899px) {
  .lineup__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
}

@media (min-width: 900px) {
  .lineup__list {
    grid-template-columns: repeat(7, 1fr);
    gap: 0 18px;
  }

  .speaker {
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: 4px;
    padding: 0;
  }

  .speaker img {
    width: 100%;
    height: auto;
    grid-row: auto;
    margin-bottom: 10px;
  }

  .speaker__name {
    font-size: 17px;
    letter-spacing: 0.02em;
    min-height: 2.3em; /* two lines reserved, so every role starts on the same baseline */
    align-self: start;
  }

  .speaker__role {
    font-size: 13.5px;
    line-height: 1.4;
  }
}

/* ---------- reels: three clips from the teaser, one speaker each ---------- */

.reels {
  padding-block: var(--section) 0;
}

/* phones: a swipe strip, one clip and a bit of the next in view */
.reels__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--pad);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 360px);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}

.reels__list::-webkit-scrollbar {
  display: none;
}

.reel {
  scroll-snap-align: start;
  display: grid;
  gap: 12px;
}

.clip {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(87, 166, 255, 0.35);
}

.clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel__caption {
  display: grid;
  gap: 2px;
}

.reel__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reel__role {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

/* desktop: the three in one row across the screen, each no wider than fits one viewport height */
@media (min-width: 900px) {
  .reels__list {
    grid-auto-columns: min((100vw - 32px - 32px) / 3, 42vh);
    justify-content: center;
    gap: 16px;
    padding: 0 16px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .reel {
    gap: 14px;
  }

  .reel__name {
    font-size: 21px;
  }
}

/* ---------- FAQ: native details/summary, one hairline per question ---------- */

.faq {
  padding-block: var(--section) 0;
}

.faq__inner {
  display: grid;
}

.faq__list {
  max-width: none;
}

.faq__item {
  border-top: 1px solid rgba(87, 166, 255, 0.22);
}

.faq__item:last-child {
  border-bottom: 1px solid rgba(87, 166, 255, 0.22);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

/* the marker: a plus that becomes a dash while the answer is open */
.faq__item summary::after {
  content: "+";
  flex: none;
  width: 1em;
  text-align: center;
  color: var(--neon);
}

.faq__item[open] summary::after {
  content: "–";
}

.faq__answer {
  padding: 0 2.5em 18px 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 68ch;
}

@media (min-width: 900px) {
  .faq__item summary {
    font-size: 21px;
    padding: 18px 0;
  }
}

/* ---------- ticket stub ---------- */

.tickets {
  padding-block: var(--section);
}

.stub {
  position: relative;
  background: var(--navy);
  border-radius: 12px;
  display: grid;
}

.stub__when,
.stub__buy {
  padding: 30px 26px;
}

.stub__buy {
  position: relative;
  border-top: 2px dashed rgba(87, 166, 255, 0.45);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
}

/* the perforation's notches: two half-circles of the page's own ground */
.stub__buy::before,
.stub__buy::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--night);
  top: -14px;
}

.stub__buy::before {
  left: -13px;
}

.stub__buy::after {
  right: -13px;
}

.date {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

/* The one lit element on the page after the poster: the date as a neon tube */
.date__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(76px, 10vw, 118px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-left: -0.03em;
  color: var(--neon-core);
  text-shadow:
    0 0 6px rgba(87, 166, 255, 0.9),
    0 0 18px rgba(87, 166, 255, 0.55),
    0 0 44px rgba(47, 91, 255, 0.45);
}

/* the weekday and the hour as the creatives' strip (uppercase, thin bar between), left-aligned under the numerals */
.date__rest {
  justify-content: flex-start;
  font-size: 20px;
}

.venue {
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}

.venue strong {
  color: var(--ink);
  font-weight: 500;
}

.map {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}

.stub__pay {
  font-size: 14px;
  color: var(--muted);
}

@media (min-width: 900px) {
  .stub {
    grid-template-columns: 1fr 1fr; /* date and venue left, the button centred in the right half */
  }

  .stub__buy {
    justify-items: center;
    text-align: center;
  }

  .stub__when,
  .stub__buy {
    padding: 44px 48px;
  }

  .stub__buy {
    border-top: 0;
    border-left: 2px dashed rgba(87, 166, 255, 0.45);
  }

  .stub__buy::before,
  .stub__buy::after {
    left: -14px;
    right: auto;
  }

  .stub__buy::before {
    top: -13px;
  }

  .stub__buy::after {
    top: auto;
    bottom: -13px;
  }

  .btn--stub {
    width: auto;
    min-width: 280px;
  }
}

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

.footer {
  padding-block: 32px calc(32px + var(--bar-h));
  font-size: 15px;
  color: var(--muted);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
}

.footer a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}

/* The link to the other edition sits on its own line, not in the footer's row. */
.footer__sister {
  flex-basis: 100%;
  margin-top: 10px;
}

@media (min-width: 900px) {
  .footer {
    padding-block: 32px 40px;
  }
}

/* ---------- fixed buy bar (phones and tablets) ---------- */

.buybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 8, 31, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(87, 166, 255, 0.28);
  transition:
    transform 260ms ease,
    visibility 260ms;
}

.buybar--away {
  transform: translateY(110%);
  visibility: hidden;
}

.buybar__meta {
  display: grid;
  gap: 1px;
  line-height: 1.2;
}

.buybar__meta span:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.buybar__meta span:last-child {
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 359px) {
  .btn--bar {
    padding-inline: 18px;
    letter-spacing: 0.04em;
  }
}

@media (min-width: 900px) {
  .buybar {
    display: none;
  }
}

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

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

  .btn,
  .buybar,
  .rail__buy {
    transition: none;
  }

  .btn:active {
    transform: none;
  }
}