/* Split Mask Theatre Company: site styles.
   Every colour is a custom property. build.mjs sets them on each page from the show
   the page belongs to (the "theme.*" lines in shows/*.md), so the whole site takes
   on the look of the next production. */

:root {
  --bg: #FBF8F1;        /* page background */
  --ink: #1E2A24;       /* body text, header, footer */
  --accent: #AC1E23;    /* big colour blocks, headings, buttons */
  --accent2: #31493C;   /* decoration only (never small text) */
  --highlight: #FDCD79; /* pop colour: nav underline, buttons on accent, sticker */
  --onaccent: #FFFFFF;  /* text on the accent colour */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --header-h: 5rem;     /* height of the fixed menu; pages without a poster start below it */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* Always keep room for the scroll bar, so pages too short to scroll don't shift sideways. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* Scroll bar in the show's colours: accent-coloured handle on the page colour. */
html { scrollbar-color: var(--accent) var(--bg); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--text); }
.page { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); color: var(--ink); }
.page > main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
p { margin: 0 0 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h1, h2, h3 {
  margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 850;
  line-height: 1; letter-spacing: -0.015em; text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }

.wrap {
  width: 100%; max-width: 1120px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow { margin: 0 0 0.9rem; font: 700 0.8rem/1.2 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }

/* Faded halftone dots, echoing the lettering on the Next to Normal poster. */
.dots { position: relative; isolation: isolate; overflow: hidden; }
.dots::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--dots-h, 170px); z-index: -1;
  background-image: radial-gradient(circle, var(--onaccent) 0 1.9px, transparent 2.4px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  opacity: 0.32;
}

/* Header and footer */
/* The menu is fixed to the top of the window, over the top of the page, so hero images start
   at the very top. Its background is the page colour: solid at the top, fading to transparent
   at the bottom, so the page shows through underneath. The logo sits straight on it.
   --header-solid is how far down it stays solid; raise it for a stronger bar. */
.site-header {
  --header-solid: 45%;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg) var(--header-solid), transparent 100%);
  color: var(--ink);
  pointer-events: none; /* the faded part never blocks clicks on the page beneath it */
}
/* The links stretch from the very top of the window down to just below the text, so their
   hover glow can rise all the way to the top. The logo stays centred on its own. */
.site-header .bar { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 0 0.4rem; }
.brand { display: block; align-self: center; margin-top: 0.4rem; line-height: 0; pointer-events: auto; }
.brand img { height: 64px; width: auto; }
.site-header nav { display: flex; min-width: 0; pointer-events: auto; }
/* Menu links: the show's accent colour (purple for Next to Normal), all the same width.
   Hover and the current page show an accent-coloured glow, solid at the bottom of the text and
   fading upwards to transparent at the top of the page. --nav-item-w sets the width of every link. */
.site-header nav ul { --nav-item-w: 7.6rem; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; gap: 0 0.3rem; margin: 0; padding: 0; list-style: none; }
.site-header nav li { display: flex; }
.site-header nav a {
  display: flex; align-items: flex-end; justify-content: center;
  width: var(--nav-item-w); padding: 0.5rem 0 0.4rem; text-align: center;
  color: var(--accent); text-decoration: none;
  font: 700 0.9rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
  /* A strong halo in the page colour keeps the links readable over busy artwork. Several layers
     stacked together give a solid core close to the letters that softens outwards. */
  text-shadow:
    0 0 1px var(--bg), 0 0 2px var(--bg), 0 0 3px var(--bg), 0 0 4px var(--bg),
    0 0 7px var(--bg), 0 0 12px var(--bg), 0 0 18px var(--bg), 0 0 26px var(--bg);
  /* The hover glow works like a Photoshop gradient with opacity stops. Each line is
     "how much purple" at "how far up the button" (0% = bottom, 100% = top of the page).
     It falls away steadily above the text, then tails off gently into transparent at the top. */
  --glow: linear-gradient(to top,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 88%, transparent) 12%,
    color-mix(in srgb, var(--accent) 68%, transparent) 26%,
    color-mix(in srgb, var(--accent) 48%, transparent) 40%,
    color-mix(in srgb, var(--accent) 30%, transparent) 55%,
    color-mix(in srgb, var(--accent) 16%, transparent) 70%,
    color-mix(in srgb, var(--accent) 6%, transparent) 85%,
    transparent 100%);
  /* Two layers: the yellow line (first) sits on top of the glow (second). Both start hidden. */
  background:
    linear-gradient(var(--highlight), var(--highlight)) no-repeat center bottom / 100% 0,
    var(--glow) no-repeat center bottom / 100% 0;
}
/* Hover: the glow rises behind the word with the yellow line along its base. The text turns
   white with an accent halo to stay readable on the glow. */
.site-header nav a:not([aria-current]):hover {
  background-size: 100% 4px, 100% 100%;
  color: var(--onaccent);
  text-shadow: 0 0 6px var(--accent), 0 0 2px var(--accent);
}
/* The page you're on: just the yellow line, no glow. */
.site-header nav a[aria-current] { background-size: 100% 4px, 100% 0; }
.site-footer a:focus-visible { outline-color: var(--highlight); }
.site-footer { background: var(--ink); color: var(--bg); padding-block: 2.2rem; font-size: 1rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2.5rem; }
.site-footer a { color: var(--highlight); }
.site-footer p { margin: 0; }

/* Hero: the show's poster or artwork, always the full width of the window at its natural
   proportions. It is never cropped, so licensed logos and credit lines stay in.
   Parallax: site.js moves .hero-inner down as you scroll, so the hero moves more slowly than the
   page and the sections below slide up over it. */
.hero-poster, .hero-art { position: relative; overflow: hidden; isolation: isolate; }
.hero-poster { background: var(--bg); }
.hero-inner { position: relative; will-change: transform; }
.hero-inner img { position: relative; width: 100%; height: auto; }
/* Everything after the hero sits above it, so it slides over the slower-moving hero. */
main > :not(.hero-poster, .hero-art) { position: relative; z-index: 1; }
.hero-type { background: var(--accent); color: var(--onaccent); padding-block: calc(var(--header-h) + clamp(1.5rem, 5vw, 4rem)) clamp(2.5rem, 7vw, 5rem); }
.hero-type h1 { font-size: clamp(3.4rem, 14vw, 10rem); color: var(--onaccent); }
.hero-art { background: var(--ink); }
.card-art.fit { object-fit: contain; background: var(--ink); }
.band-title { margin: 0 0 0.4rem; font: 850 clamp(3.2rem, 11vw, 7.5rem)/0.95 var(--display); font-stretch: 112%; letter-spacing: -0.02em; color: var(--onaccent); }

/* Ticket band */
.ticket-band { background: var(--accent); color: var(--onaccent); padding-block: clamp(2.2rem, 5vw, 3.8rem); }
.ticket-band .eyebrow { color: var(--onaccent); }
.ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 2.5rem; }
.big-dates { margin: 0 0 0.7rem; font: 850 clamp(2.1rem, 6vw, 4.4rem)/1 var(--display); font-stretch: 112%; letter-spacing: -0.015em; color: var(--onaccent); text-wrap: balance; }
.venue-line { margin: 0 0 1.4rem; font-weight: 600; font-size: 1.15rem; }
.sticker {
  display: grid; place-content: center; width: 8.6rem; aspect-ratio: 1; border-radius: 50%; text-align: center;
  background: var(--highlight); color: var(--ink); border: 3px solid var(--ink);
  transform: rotate(-9deg); box-shadow: 0 12px 24px -14px rgb(0 0 0 / 0.7);
}
.sticker .amt { font: 850 2.5rem/1 var(--display); font-stretch: 112%; }
.sticker .fees { font: 700 0.8rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }

.dates { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 2rem; }
.date-card {
  display: grid; gap: 0.15rem; padding: 1rem 1.2rem; text-decoration: none;
  border: 2px solid var(--onaccent); background: transparent; color: var(--onaccent);
}
.date-card .day { font: 850 2rem/1 var(--display); font-stretch: 112%; }
.date-card .time { font-weight: 700; }
.date-card .go { margin-top: 0.6rem; font: 700 0.78rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.date-card:hover { background: var(--highlight); border-color: var(--highlight); color: var(--ink); }
.ticket-band a:focus-visible { outline-color: var(--highlight); }
.price { margin: 1rem 0 0; font-weight: 600; }

/* Buttons and links */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin: 0; }
.btn {
  display: inline-block; padding: 0.9em 1.6em; text-decoration: none;
  background: var(--accent); color: var(--onaccent); border: 2px solid var(--accent); border-radius: 2px;
  font: 800 0.95rem/1.1 var(--display); font-stretch: 108%; letter-spacing: 0.06em; text-transform: uppercase;
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn.on-accent { background: var(--highlight); color: var(--ink); border-color: var(--highlight); }
.btn.on-accent:hover { background: var(--onaccent); border-color: var(--onaccent); }
.btn.is-off { background: transparent; color: var(--ink); border: 2px dashed var(--ink); }
.ticket-band .btn.is-off { color: var(--onaccent); border-color: var(--onaccent); }
.more { font: 700 0.9rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }

/* Content bands */
.band { padding-block: clamp(2.2rem, 5vw, 3.8rem); }
.band.gold { background: var(--highlight); color: var(--ink); }
.band.gold a.more { color: var(--ink); }
.lede { font-size: 1.35rem; line-height: 1.5; }
.prose { max-width: 62ch; }
.prose h2 { margin: 2rem 0 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.note { max-width: 62ch; margin: 1.8rem 0; padding: 1rem 1.2rem; border: 2px solid var(--ink); font-size: 1rem; }
.note p { margin: 0.3rem 0 0; }
.note strong { font: 700 0.78rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.6rem; }

/* Show cards */
.cards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.card { background: var(--bg); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--accent2); }
.card-art { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.card-art.type { display: grid; place-items: center; padding: 1rem; background: var(--accent); color: var(--onaccent); }
.card-art.type span { font: 850 clamp(2.6rem, 9vw, 4.2rem)/1 var(--display); font-stretch: 112%; letter-spacing: -0.015em; text-align: center; text-wrap: balance; }
.card-body { display: grid; gap: 0.4rem; padding: 1.3rem 1.4rem 1.5rem; }
.card h3 { font-size: 1.9rem; color: var(--accent); }
.card p { margin: 0; }
.card .when { font: 700 1.15rem/1.3 var(--display); }
.card .actions { margin-top: 0.8rem; }

/* Inner page headers */
.page-head { background: var(--accent); color: var(--onaccent); padding-block: calc(var(--header-h) + 1.2rem) clamp(2.6rem, 7vw, 5rem); }
.page-head .eyebrow { color: var(--onaccent); }
.page-head h1 { font-size: clamp(2.8rem, 10vw, 6.4rem); color: var(--onaccent); }

/* Past productions */
.year { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: 1.2rem; border-top: 2px solid var(--ink); }
.year h2 { color: var(--accent); font-variant-numeric: tabular-nums; }
.year ul { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.year li { font: 700 1.3rem/1.3 var(--display); }
.year li a { color: var(--ink); }
.tag { margin-left: 0.7rem; font: 700 0.72rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); opacity: 0.7; }

@media (max-width: 760px) {
  .ticket-grid { grid-template-columns: minmax(0, 1fr); }
  .sticker { width: 6.8rem; justify-self: start; }
  .sticker .amt { font-size: 2rem; }
  .year { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  /* Keep the fixed menu compact on phones: small logo, links wrapping beside it. */
  :root { --header-h: 4.4rem; }
  .site-header { --header-solid: 50%; }
  .site-header .bar { flex-wrap: nowrap; gap: 0.75rem; padding-block: 0 0.4rem; }
  .brand img { height: 46px; }
  .site-header nav ul { --nav-item-w: 5.7rem; gap: 0 0.2rem; }
  .site-header nav a { padding-block: 0.35rem 0.3rem; font-size: 0.72rem; letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .date-card { transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
  .site-header nav a { transition: background-size 0.2s, color 0.2s; }
}