@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; }

/* 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%; }
  .hero__link--hamlet { top: 50%; 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;
  }
}