@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/poppins-300-latin.v24.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400-latin.v24.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500-latin.v24.woff2) format("woff2"); }
/* JetBrains Mono (variable) for all text except the two large headings, which stay Poppins 700.
   Poppins 300/400/500 are kept in /fonts for switching back. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrainsmono-latin.v24.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700-latin.v24.woff2) format("woff2"); }

:root {
  --red: #cd161a;  /* matches the red in the hero artwork */
  --cream: #fffbef;
  --yellow: #ffec02;
  --text-red: #cb1217;
  --grey: #767676;
  --hamlet-bg: #010302;  /* matches the black in the Hamlet images */
  --white: #ffffff;
  --blue: #1384dc;
  --border: 22px;
  --radius: 10px;
  --edge: 1px solid #707070;

  /* Headings scale between the 430px and 1920px mockups. */
  --h-intro: clamp(3.1875rem, 2.72rem + 1.745vw, 4.8125rem);  /* 51px -> 77px */
  --h-dates: clamp(3.1875rem, 2.485rem + 2.617vw, 5.625rem);  /* 51px -> 90px */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--red);
  color: var(--white);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 400;
  line-height: 1.25;
}

p, h1, h2, h3, ul { margin: 0; padding: 0; }

a { color: inherit; text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

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

/* ---------- Single column (default, < 1200px) ---------- */

.col { padding: 0 24px; }
.col--red { padding-top: 16px; }
.col--cream { padding-bottom: 56px; }

.intro, .hamlet, .dates, .footer { margin-inline: auto; text-align: center; }

/* Hero, one column: the two posters on a red screen exactly one window tall, with the
   leftover red spread evenly round them. Stacked when upright, side by side when
   sideways. Both posters are shown at the same width. The two-column hero is further down.
   Breakpoint and orientation must match renderHero() in render.js. */
.posters {
  --gap: 16px;  /* the least red between and round the posters */
  /* Widest the posters can be and still fit: stacked, 1600 wide x (1400 + 1229) tall. */
  --w: min(100vw, (100vh - 3 * var(--gap)) * 1600 / 2629);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 100vh;
  /* Edge to edge: cancel the red column's padding. */
  margin: -16px -24px 0;
}
@supports (height: 100svh) {
  .posters {
    --w: min(100vw, (100svh - 3 * var(--gap)) * 1600 / 2629);
    height: 100svh;
  }
}
@media (orientation: landscape) {
  .posters {
    flex-direction: row;
    /* Side by side: the taller Remix poster (1600 x 1400) sets the height. */
    --w: min((100vw - 3 * var(--gap)) / 2, (100vh - 2 * var(--gap)) * 1600 / 1400);
  }
  @supports (height: 100svh) {
    .posters { --w: min((100vw - 3 * var(--gap)) / 2, (100svh - 2 * var(--gap)) * 1600 / 1400); }
  }
}
.posters__link { display: block; }
.posters__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 0; }
.posters__img {
  display: block;
  width: var(--w);
  height: auto;
}

.hero { display: none; }

.intro__heading {
  margin-top: 0.4em;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--yellow);
  font-weight: 700;
  font-size: var(--h-intro);
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}

.intro__text {
  max-width: 1000px;
  margin: 24px auto 0;
  font-size: 1.125rem;
}
.intro__text p + p { margin-top: 1.25em; }

/* Intro h1 scales with the screen so "Hispanohablantes" never clips; padding keeps it off the edges. */
.intro__heading {
  font-size: clamp(1.375rem, 6vw, 3.5rem);
  padding-inline: 12px;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Two-column layout: the red column is only half the window, so scale from that. */
@media (min-width: 1200px) {
  .intro__heading { font-size: clamp(2rem, 3.3vw, 3.5rem); }
}

/* Bilingual copy: Spanish leads, English sits beneath in a quieter style. */
.intro__subheading {
  margin-top: 1.1em;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--yellow);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}
.intro__heading .intro__en,
.intro__subheading .intro__en,
.intro__tickets .intro__en { display: block; font-size: 0.5em; font-weight: 500; margin-top: 0.4em; }
/* English headings match the Spanish size. */
.intro__heading .intro__en,
.intro__subheading .intro__en { font-size: 1em; font-weight: 700; font-style: normal; line-height: inherit; margin-top: 0; }
.intro__text p.intro__en { margin-top: 0.6em; font-style: italic; opacity: 0.9; }
.intro__text p + p:not(.intro__en) { margin-top: 1.75em; }
.intro__tickets { font-weight: 700; text-transform: uppercase; }
.intro__tickets .intro__en { font-size: 0.9em; font-style: italic; text-transform: none; font-weight: 400; }
.intro__quote { margin: 2.25em 0 0; }
.intro__quote p + p { margin-top: 1em; }
.intro__quote .intro__en { margin-top: 1.5em; font-style: italic; opacity: 0.9; }
.intro__quote .intro__en p + p { margin-top: 1em; }
.intro__quote footer { margin-top: 1.25em; color: var(--yellow); font-weight: 700; }
.intro__quote footer::before { content: "\2014\00a0"; }

/* Hamlet feature: black panel in the red column; also the divider between intro and dates. */
.hamlet {
  position: relative;
  max-width: 1000px;
  margin-top: 88px;
  padding: 40px 20px;
  background: var(--hamlet-bg);
  border-radius: 12px;
  scroll-margin-top: 64px;
}
/* Dashed yellow divider between the intro and the Hamlet box, the width of the box. */
.hamlet::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 1px;
  /* Drawn rather than border: dashed, for longer dashes and gaps (8px / 6px). */
  background: repeating-linear-gradient(to right, var(--yellow) 0 8px, transparent 8px 14px);
}

.hamlet__heading {
  font-family: Poppins, system-ui, sans-serif;
  color: var(--yellow);
  font-weight: 700;
  font-size: var(--h-intro);
  line-height: 1.15;
  text-transform: uppercase;
}

.hamlet__text {
  max-width: 800px;
  margin: 32px auto 0;
  font-size: 1.125rem;
}
.hamlet__text > * + * { margin-top: 1.25em; }

.hamlet__where {
  margin-top: 12px;
  color: var(--yellow);
  font-size: 1.125rem;
  text-wrap: balance;
}
.hamlet__where .part, .hamlet__credits .part { display: inline-block; }

/* Pull quote: big yellow quote mark, white text, yellow attribution. */
.hamlet__quote {
  max-width: 640px;
  margin: 36px auto 0;
}
.hamlet__quote blockquote { margin: 0; }
.hamlet__quote blockquote::before {
  content: "\201C";
  display: block;
  height: 0.5em;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--yellow);
}
.hamlet__quote blockquote p {
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.35;
  text-wrap: balance;
}
.hamlet__quote figcaption {
  margin-top: 12px;
  color: var(--yellow);
  font-weight: 700;
  font-size: 1rem;
}
.hamlet__quote figcaption::before { content: "\2014\00a0"; }

.hamlet__img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}
.hamlet__text picture { display: block; }

.hamlet__credits {
  color: var(--yellow);
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dates {
  max-width: 580px;
  margin-top: 48px;
  scroll-margin-top: 24px;
}
.show { scroll-margin-top: 24px; }

.dates__heading {
  font-family: Poppins, system-ui, sans-serif;
  color: var(--yellow);
  font-weight: 700;
  font-size: var(--h-dates);
  line-height: 1.1;
  text-transform: uppercase;
}

.dates__month {
  margin: 24px 0 8px;
  color: var(--yellow);
  font-weight: 300;
  font-size: 2.25rem;
}

.dates__list { list-style: none; }

.show { margin-top: 24px; font-size: 0.9375rem; line-height: 1.3; }
.show:first-child { margin-top: 0; }
.show__day { font-weight: 700; font-size: 1.375rem; }
.show__name { color: var(--yellow); font-weight: 500; }
/* Long location lines break evenly between parts, never inside one. */
.show__where { text-wrap: balance; }
.show__where .part { display: inline-block; max-width: 100%; }
.show__note { color: var(--yellow); }
.show__tickets, .show__status { font-weight: 700; font-size: 1.375rem; }  /* same size as .show__day */
.show__tickets a:hover, .show__tickets a:focus-visible { color: var(--yellow); }

.show--hamlet {
  margin-top: 40px;
  padding: 32px 12px;
  background: var(--hamlet-bg);
  border: 1px solid var(--hamlet-bg);
  border-radius: 12px;
}
/* All Hamlet text is yellow, at both widths; the ticket link turns white on hover. */
.show--hamlet,
.show--hamlet .show__day,
.show--hamlet .show__name,
.show--hamlet .show__where,
.show--hamlet .show__tickets,
.show--hamlet .show__status { color: var(--yellow); }
.show--hamlet .show__tickets a:hover, .show--hamlet .show__tickets a:focus-visible { color: var(--white); }

.dates__empty { margin-top: 24px; font-size: 1.25rem; }

.footer {
  margin-top: 56px;
  color: var(--yellow);
  font-weight: 700;
  font-size: 1rem;
}

/* ---------- Two columns (>= 1200px) ---------- */

@media (min-width: 1200px) {
  body { background: var(--white); }

  .page {
    display: grid;
    /* 50/50 up to a 1600px window; beyond that the red column stays 778px wide
       and the dates column takes the extra width. */
    grid-template-columns: min(50%, 778px) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--border);
  }

  .col { padding: 18px 40px 40px; }
  /* Outline runs round the outside of both columns, not down the middle. */
  .col--red {
    background: var(--red);
    border: var(--edge);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
  }
  .col--cream {
    display: flex;
    flex-direction: column;
    padding-top: 96px;
    background: var(--cream);
    color: var(--grey);
    border: var(--edge);
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .posters { display: none; }

  /* Tall image, each half linking down the page: red = Remix dates, black = Hamlet box.
     Up to the white border; top-left corner follows the column's rounded corner. */
  .hero {
    display: block;
    position: relative;
    margin: -18px -40px 0;
    overflow: hidden;
    border-top-left-radius: calc(var(--radius) - 1px);
  }
  .hero__img {
    display: block;
    width: 100%;
    height: auto;
  }
  .hero__link {
    position: absolute;
    left: 0;
    right: 0;
  }
  .hero__link--remix { top: 0; bottom: 50.93%; }
  .hero__link--hamlet { top: 49.07%; bottom: 0; }
  .hero__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; border-radius: 0; }

  .intro__heading { margin-top: 0.25em; }

  .intro__text {
    max-width: 800px;
    margin-top: 32px;
    font-size: 1.25rem;
  }

  .hamlet {
    max-width: 800px;
    padding: 48px 40px;
  }
  .hamlet__text { font-size: 1.25rem; }
  .hamlet__where { font-size: 1.25rem; }
  .hamlet__quote blockquote p { font-size: 1.625rem; }

  .dates {
    width: 100%;
    max-width: 640px;
    margin-top: 0;
  }

  .dates__heading { color: var(--grey); white-space: nowrap; }

  .dates__month {
    margin: 64px 0 28px;
    color: var(--text-red);
  }
  .dates__heading + .dates__month { margin-top: 72px; }

  .show { margin-top: 28px; }
  .show__day { color: var(--text-red); }
  .show__name { color: var(--blue); }
  .show__tickets a:hover, .show__tickets a:focus-visible { color: var(--blue); }
  .show__where, .show__note { color: var(--grey); }
  .show__tickets, .show__status { color: var(--text-red); }

  .show--hamlet {
    max-width: 556px;
    margin: 48px auto 0;
    padding: 40px 24px;
  }

  .dates__empty { color: var(--text-red); margin-top: 48px; }

  /* Pushed to the bottom of the cream column on tall windows; follows the content on short ones. */
  .footer {
    margin-top: auto;
    padding-top: 80px;
    color: var(--grey);
    font-weight: 400;
    font-size: 0.875rem;
  }
}

/* Two columns: breathing room above the intro h1 (after the 900px rule so it wins). */
@media (min-width: 1200px) {
  .intro__heading { margin-top: 1em; }
}

/* Intro colours: Spanish yellow, English white. */
.intro__text { color: var(--yellow); }
.intro__en, .intro__text .intro__en { color: var(--white); opacity: 1; }

/* "/ with English subtitles" after the Spanish note: white on the red page; stays grey on the cream column at 1200px+. */
.show__subs { color: var(--white); }
@media (min-width: 1200px) {
  .show__subs { color: var(--grey); }
}

/* Intro links down to the dates: "Entradas limitadas" and the "Comprar entradas / Get tickets" calls to action. */
.intro__tickets a, .intro__cta a { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; }
.intro__cta { margin-top: 1.25em; color: var(--yellow); font-weight: 700; text-transform: uppercase; }
.intro__text .intro__cta { margin-top: 2em; }
.intro__cta .intro__en { display: block; margin-top: 0.2em; font-size: 0.9em; font-style: italic; font-weight: 400; text-transform: none; }
.intro__tickets a:hover, .intro__tickets a:focus-visible,
.intro__cta a:hover, .intro__cta a:focus-visible { color: var(--white); }
.intro__tickets a:focus-visible, .intro__cta a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

/* Top "Comprar entradas" is a button: yellow with red text. */
.intro__cta--button a {
  display: inline-block;
  padding: 0.75em 1.75em;
  background: var(--yellow);
  color: var(--red);
  border-radius: 12px;
  text-decoration: none;
}
.intro__cta--button .intro__en { color: var(--red); font-weight: 500; }
.intro__cta--button a:hover, .intro__cta--button a:focus-visible { background: var(--white); color: var(--red); }

/* Two columns (1200px+): the dates are already beside the intro, so no jump links. */
@media (min-width: 1200px) {
  .intro__cta { display: none; }
  .intro__tickets a { text-decoration: none; pointer-events: none; cursor: default; }
}