/*
 * Wheeler Opera House — visual world.
 *
 * Every colour here is sampled as a FIELD from the Wheeler's own 1889 facade
 * (02-research/evidence/wheeler-building.webp), not picked off a colour wheel:
 * peachblow sandstone from the Frying Pan Valley, its shadow, and the raking
 * alpine sun that turns the sunlit courses gold at the end of the day.
 *
 * The one non-obvious decision: this site runs on TINTED SANDSTONE PAPER, not
 * white, which is the build's deliberate design risk (DESIGN-DNA.md → "The
 * agency-specific risk"). Every token below is therefore contrast-verified
 * against --paper rather than against #fff, and the palette is split into two
 * tiers that must not be confused: TEXT-SAFE tokens (--ink, --ink-soft,
 * --ember, --blue) clear WCAG AA on --paper, while FIELD tokens (--accent,
 * --stone, --stone-deep) are for fills, rules and large display only. Amber
 * #C8892E is 2.7:1 on paper — it is the signature accent precisely because it
 * is a *surface*, and text on amber uses --ink (5.2:1), never the reverse.
 *
 * Aspen Show Tix inherits these faces and the accent but sits on cool paper;
 * see themes/aspenshowtix/assets/theme.css. Chrome shares bones, never skin.
 */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  font-family: "Abril Fatface";
  src: url("fonts/abrilfatface-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bree Serif";
  src: url("fonts/bree-serif-regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bree Serif";
  src: url("fonts/bree-serif-regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  /* Sandstone ramp, OKLCH. The building's own stone, lightened to paper at the
     top and driven into shadow at the bottom. Hex fallbacks are the sampled
     field values; OKLCH is authoritative for anything interpolated. */
  --stone-50: oklch(97.2% 0.012 45);   /* #FBF2EC  paper                     */
  --stone-100: oklch(94.4% 0.024 44);  /* #F6E8DE  raised paper              */
  --stone-200: oklch(90.6% 0.041 43);  /* #F0DACB  band                      */
  --stone-300: oklch(84.1% 0.062 40);  /* #E7C6B0  rule                      */
  --stone-400: oklch(74.8% 0.093 38);  /* #DE9079  sunlit course             */
  --stone-500: oklch(70.1% 0.106 36);  /* #DB856A  the stone itself          */
  --stone-600: oklch(61.4% 0.108 32);  /* #B76655  cornice shadow            */
  --stone-700: oklch(47.9% 0.101 30);  /* #8B3630  deep shadow               */
  --stone-800: oklch(33.6% 0.062 32);  /* #59332B                            */
  --stone-900: oklch(24.1% 0.038 34);  /* #33201C  ink                       */
  --stone-950: oklch(17.8% 0.030 33);  /* #24140F  the house lights down     */

  /* Surfaces */
  --paper: #FBF2EC;
  --paper-raised: #F6E8DE;
  --band: #F0DACB;
  --night: #24140F;

  /* TEXT-SAFE — all verified AA or better on --paper */
  --ink: #33201C;        /* 15.1:1  body                                     */
  --ink-soft: #6B5049;   /*  6.2:1  secondary, captions, meta                */
  --ember: #8A5A12;      /*  5.2:1  amber at text weight, links              */
  --blue: #3B6B85;       /*  5.0:1  the sky in the arched glass              */

  /* FIELD ONLY — fills, rules, display type 24px+ bold. Never small text. */
  --accent: #B44F62;     /* signature: theatre rose from the facade's shadow */
  --stone: #DB856A;
  --stone-deep: #B76655; /*  3.7:1 — large display only                      */

  /* Type */
  --display: "Abril Fatface", Georgia, "Times New Roman", serif;
  --body: "Bree Serif", Georgia, "Times New Roman", serif;

  /* A modular scale with a wide top: a fat face wants room to be enormous. */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.16rem + 0.44vw, 1.55rem);
  --step-2: clamp(1.56rem, 1.40rem + 0.79vw, 2.09rem);
  --step-3: clamp(1.95rem, 1.69rem + 1.31vw, 2.82rem);
  --step-4: clamp(2.44rem, 2.02rem + 2.10vw, 3.80rem);
  --step-5: clamp(3.05rem, 2.39rem + 3.30vw, 5.13rem);
  --step-6: clamp(3.81rem, 2.78rem + 5.14vw, 6.93rem);

  /* Rhythm */
  --measure: 66ch;
  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --bay: clamp(3rem, 2rem + 5vw, 6.5rem);   /* between arcade bays           */
  --shell: 78rem;

  /* The arch. One radius drives every arched surface in the build so the
     facade's proportion stays consistent from a thumbnail to a hero. */
  --arch-top: 50% 50% 3px 3px / 38% 38% 3px 3px;
  --arch-tight: 50% 50% 2px 2px / 26% 26% 2px 2px;
}

/* ----------------------------------------------------------------- base -- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

/* h4-h6 step down into the body face — a fat face at small sizes turns to mud. */
h4, h5, h6 {
  font-family: var(--body);
  font-weight: 650;
  letter-spacing: 0.008em;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }

h6 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

p, li { max-width: var(--measure); }
p { margin: 0 0 1.1em; }

a {
  color: var(--ember);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--stone-700); }

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

/* Focus has to survive a warm ground: a dark ring plus an amber halo reads on
   both paper and night bands without relying on the accent alone. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px rgb(200 137 46 / 0.45);
}

.night :focus-visible,
.hero :focus-visible {
  outline-color: var(--paper);
  box-shadow: 0 0 0 6px rgb(200 137 46 / 0.6);
}

::selection { background: var(--accent); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: var(--gutter); top: 0;
  transform: translateY(-120%);
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
}

.skip-link:focus-visible { transform: translateY(0.5rem); }

/* ---------------------------------------------------------------- motifs -- */

/*
 * The arcade. A repeated half-round drawn with one radial-gradient — the
 * facade's window rhythm reduced to a rule. It separates bays the way the
 * building separates windows: by repetition, not by a line.
 */
.arcade {
  height: 15px;
  border: 0;
  margin: 0;
  background-image: radial-gradient(
    circle at 50% 100%,
    var(--stone-deep) 0 6.5px,
    transparent 6.9px
  );
  background-size: 17px 15px;
  background-repeat: repeat-x;
  background-position: bottom left;
}

.arcade--light {
  background-image: radial-gradient(
    circle at 50% 100%,
    var(--stone-300) 0 6.5px,
    transparent 6.9px
  );
}

.arcade--paper {
  background-image: radial-gradient(
    circle at 50% 100%,
    var(--paper) 0 6.5px,
    transparent 6.9px
  );
}

/*
 * The dentil course. The cornice's toothed band, at the scale of a hairline —
 * the arcade's fine-grained counterpart, used under section headers.
 */
.dentil {
  height: 5px;
  border: 0;
  margin: 0;
  background-image: linear-gradient(90deg, var(--stone-600) 0 4px, transparent 4px 9px);
  background-size: 9px 5px;
  background-repeat: repeat-x;
}

/*
 * The arch mask. Every production photograph arrives framed like a window in
 * the facade. Applied to a wrapper, not the img, so object-fit still governs
 * the crop.
 */
.arch {
  border-radius: var(--arch-top);
  overflow: hidden;
  background: var(--stone-200);
  position: relative;
}

.arch > img { width: 100%; height: 100%; object-fit: cover; }

.arch--tight { border-radius: var(--arch-tight); }

/* The same arch language recurs outside photography: a quiet empty-state
 * frame, a list marker, a hover reveal, and the hairline divider between
 * acts. These are structural uses, not decorative copies of the hero mask. */
.arch--empty-state { border-top: 3px solid var(--accent); padding-top: 1rem; }
.arch--list-marker { list-style: none; }
.arch--list-marker li::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.45rem;
  margin: 0 0.55rem 0.1rem 0;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
.arch--hover:hover { box-shadow: 0 0 0 3px var(--accent); }
.arch--divider { border-top: 3px solid var(--accent); }

/*
 * The credit line. One component for every documentary photograph in the
 * build rather than a bespoke treatment per route: the two CC BY-SA files
 * are REQUIRED to name their author and licence in the surface that displays
 * them, and a historic archive plate with no provenance reads as decoration,
 * so all of them are captioned the same way. It is a figcaption, never a
 * title attribute or a tooltip — a credit a sighted reader cannot see is not
 * a credit.
 *
 * Contrast, measured rather than assumed: --ink-soft is 6.63:1 on --paper,
 * 6.11:1 on --paper-raised and 5.44:1 on --band, all AA at this size. On the
 * house-lights-down ground the line has to flip, because --ink-soft is
 * 2.43:1 on --night; --stone-300 is 11.09:1 there.
 */
.credit {
  margin-top: 0.7rem;
  max-width: 68ch;
  padding: 0.45rem 0.1rem 0.2rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.5;
  text-wrap: pretty;
}

.bay--night .credit { color: var(--stone-300); }

/*
 * Author and licence are one unbreakable unit. Two screenshots were needed to
 * get this right: at 52ch the /visit/ line split as "… Photo: Zereshk / CC" +
 * "BY-SA 3.0", and holding only the licence together moved the break one word
 * earlier and orphaned the slash instead. Neither was visible in the markup.
 */
.credit__attribution { white-space: nowrap; }

/*
 * The fanlight — the logo's own geometry, an arch with radiating mullions,
 * reused as the date marker in calendar and listing views. Conic gradient for
 * the mullions, so it is a primitive, not drawn artwork.
 */
/*
 * A repeating-conic sweep of the top half draws the mullions in one
 * declaration and, unlike a hand-listed stop list, keeps the spokes evenly
 * divided at any --fan size. The sweep starts at 180deg (nine o'clock) and the
 * 30deg period puts six bars across the arch, matching the client's own logo.
 */
.fanlight {
  --fan: 3.25rem;
  width: var(--fan);
  height: calc(var(--fan) / 2);
  border-radius: var(--fan) var(--fan) 0 0 / var(--fan) var(--fan) 0 0;
  background: repeating-conic-gradient(
    from 180deg at 50% 100%,
    var(--stone-700) 0deg 2deg,
    var(--stone-200) 2deg 30deg
  );
  border: 1.5px solid var(--stone-700);
  border-bottom-width: 2.5px;
  flex: none;
}

/* --------------------------------------------------------------- layout -- */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.shell--narrow { width: min(100% - (var(--gutter) * 2), 46rem); }

.bay { padding-block: var(--bay); }

.bay--band { background: var(--band); }
.bay--raised { background: var(--paper-raised); }

.bay--night {
  background: var(--night);
  color: var(--paper);
}

.bay--night h1,
.bay--night h2,
.bay--night h3 { color: var(--paper); }

/*
 * The :not() list is load-bearing. `.bay--night a` outranks `.btn--primary` on
 * specificity, so without .btn every primary button inside a night bay got
 * amber text on its amber fill and vanished; .perf is here for the same reason,
 * since a performance chip is a pale tile with its own dark text. Anything that
 * paints its own background belongs in this list rather than winning a
 * specificity race further down the file.
 */
.bay--night a:not(.btn):not(.perf) { color: var(--stone-300); }

.bay--night .lede,
.bay--night .meta { color: var(--stone-300); }

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46ch;
}

.meta {
  font-size: var(--step--1);
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--stone-700);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 5px;
  background-image: linear-gradient(90deg, var(--stone-300) 0 4px, transparent 4px 9px);
  background-size: 9px 5px;
}

.eyebrow--plain {
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.eyebrow--plain::after {
  display: none;
}

/* --------------------------------------------------------------- chrome -- */

/*
 * The prototype banner. Deliberately loud and deliberately calm in wording —
 * a buyer may forward this URL to a colleague, so it has to read as a concept
 * site rather than as an internal draft.
 */
.proto-banner {
  margin: 0;
  padding: 0.6rem var(--gutter);
  background: var(--stone-900);
  color: var(--paper);
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: none;
}

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--stone-300);
  position: relative;
  z-index: 20;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-block: 0.9rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

.brand__mark {
  --fan: 2.5rem;
  width: var(--fan);
  height: calc(var(--fan) / 2);
}

.brand__text { display: flex; flex-direction: column; }

.brand__name {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.brand__sub {
  display: block;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}

/*
 * The nav lives in a <details open>. On desktop the disclosure is invisible:
 * the summary is hidden and the content sits inline. nav.js only collapses it
 * on narrow viewports, so a no-JS phone still gets the whole nav rather than a
 * dead Menu button.
 */
.nav-disclosure {
  flex-basis: 100%;
  order: 5;
}

.nav-disclosure > summary { display: none; }

/*
 * Desktop only, and the media query is the whole point. A closed <details>
 * hides its content through content-visibility on ::details-content, which no
 * child display rule can override, so desktop needs this escape hatch to show
 * the nav regardless of the element's open state. Applying it unconditionally
 * force-shows the nav on mobile too and silently defeats the Menu button — the
 * exact defect this build shipped for one commit before a phone screenshot
 * caught it.
 */
@media (min-width: 60.0625rem) {
  .nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
}

.primary-nav ul,
.utility-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.utility-nav {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--stone-200);
}

.utility-nav a {
  display: inline-block;
  padding: 0.5rem 0.15rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 550;
  font-size: var(--step--1);
  letter-spacing: 0.03em;
}

.utility-nav a:hover { color: var(--ember); text-decoration: underline; }

.primary-nav a {
  display: inline-block;
  padding: 0.55rem 0.15rem;   /* keeps the 24px target height */
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}

.primary-nav a:hover { border-bottom-color: var(--stone); }

.primary-nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--stone-700);
}

.menu-btn {
  display: none;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ------------------------------------------------------------- omnibox -- */

.omnibox {
  flex: 1 1 16rem;
  display: flex;
  min-width: 0;
  position: relative;
}

.omnibox__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--stone-400);
  border-right: 0;
}

.omnibox__input::placeholder { color: var(--ink-soft); opacity: 1; }

.omnibox__btn {
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  background: var(--stone-700);
  color: var(--paper);
  border: 1px solid var(--stone-600);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.omnibox__btn:hover { background: var(--stone-400); }

.omnibox__results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  background: var(--paper);
  border: 1px solid var(--stone-400);
  box-shadow: 0 12px 30px rgb(51 32 28 / 0.16);
  max-height: min(60vh, 28rem);
  overflow-y: auto;
  z-index: 40;
}

.omnibox__results:empty,
.omnibox__results[hidden] { display: none; }

.omnibox__group {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.7rem 0.85rem 0.3rem;
  border-top: 1px solid var(--stone-200);
}

.omnibox__group:first-child { border-top: 0; }

.omnibox__hit {
  display: block;
  padding: 0.6rem 0.85rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.omnibox__hit:hover,
.omnibox__hit[aria-selected="true"] {
  background: var(--paper-raised);
  border-left-color: var(--accent);
  color: var(--ink);
}

.omnibox__hit small { display: block; color: var(--ink-soft); font-size: var(--step--1); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.5rem;
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 650;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 2px solid var(--ink);
  cursor: pointer;
}

.btn--primary { background: var(--stone-700); color: var(--paper); }
.btn--primary:hover { background: var(--stone-400); color: var(--ink); }

.btn--quiet { background: transparent; color: var(--ink); }
.btn--quiet:hover { background: var(--stone-200); color: var(--ink); }

.btn--night { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------------------------------------------------------- production -- */

/*
 * The production card. Arched photograph, fanlight date, then the facts a
 * patron actually decides on: discipline, date, time, price floor, and whether
 * it is close to selling out. No "read more".
 */
.bill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bill > li { max-width: none; }
.bill > li, .production { min-width: 0; }

.production {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
}

.production__frame {
  aspect-ratio: 3 / 4;
  margin-bottom: 1rem;
  border-radius: var(--arch-top);
  overflow: hidden;
  background: var(--stone-200);
}

.production__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.production:hover .production__frame img { transform: scale(1.035); }

.production__discipline {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-700);
}

.production__title {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.15;
  overflow-wrap: anywhere;
  margin: 0.35rem 0 0.5rem;
}

.production__title a { color: var(--ink); text-decoration: none; }
.production__title a:hover { color: var(--stone-700); text-decoration: underline; }

.production__when {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.production__when .fanlight { --fan: 2.6rem; }

.production__date {
  font-weight: 650;
  font-size: var(--step--1);
  line-height: 1.3;
}

.production__venue { color: var(--ink-soft); font-size: var(--step--1); }

.production__foot {
  margin-top: auto;
  padding-top: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--stone-300);
}

.production__price { font-weight: 650; font-size: var(--step--1); }

.tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--stone-600);
  color: var(--stone-700);
}

.tag--few { background: var(--accent); border-color: var(--stone-700); color: var(--ink); }
.tag--out { background: var(--stone-200); color: var(--ink-soft); }

/* ------------------------------------------------------------- home bays -- */

/*
 * The marquee. Text left, arched building photograph right, on the house-lights
 * -down ground. The photograph is masked to the same arch as every production
 * image, so the building and the work on its stage are framed identically —
 * which is the whole argument of the design in one composition.
 */
.marquee__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

/*
 * `.bay--night h2` would otherwise repaint an eyebrow that happens to be a
 * heading, so two eyebrows in one bay came out two different colours for no
 * reason a reader could see. The eyebrow's colour belongs to the eyebrow.
 */
.eyebrow--night,
.bay--night .eyebrow--night { color: var(--stone-300); }
.eyebrow--night::after {
  background-image: linear-gradient(90deg, rgb(200 137 46 / 0.55) 0 4px, transparent 4px 9px);
}

/*
 * The marquee title is sized to the LONGEST real production name in the
 * calendar, not to the shortest. A fat face wants to be enormous, but
 * "Edlis Neeson Opera Encounters" set at --step-6 breaks one word per line and
 * turns into a staircase (docs/display-type-contract.md). This clamp tops out
 * where the longest single word in the corpus still fits the text column.
 */
.marquee__title {
  font-size: clamp(2.55rem, 1.5rem + 3.5vw, 4.6rem);
  line-height: 1.12;
  margin-bottom: 0.6rem;
  hyphens: none;
}

/*
 * Specificity has to clear `.bay--night a:not(.btn)`. Amber is reserved for
 * the performance TIME, which is the actionable fact in this bay; a gold title
 * above a gold time flattens that hierarchy into decoration.
 */
.bay--night .marquee__title a { color: var(--paper); text-decoration: none; }
.bay--night .marquee__title a:hover { color: var(--stone-300); }

.marquee__when {
  font-size: var(--step-2);
  font-weight: 300;
  color: var(--paper);
  margin-bottom: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.marquee__time { color: var(--accent); font-weight: 600; }

.marquee__venue {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-300);
  margin-bottom: 1.1rem;
}

.marquee__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
  max-width: none;
}

/*
 * The arch moved off the <figure> and onto an inner span so the credit line
 * can sit BELOW the mask instead of being clipped by its overflow:hidden.
 * Moroder's photograph is CC BY-SA; an attribution the arch eats is not an
 * attribution.
 */
.marquee__frame { margin: 0; }

.marquee__arch {
  display: block;
  aspect-ratio: 4 / 5;
}

.marquee__frame img { width: 100%; height: 100%; object-fit: cover; }

/*
 * The auditorium detail bay beside the marquee: prose left, room photograph
 * right on wide screens. The figure needs an explicit ratio so the arch mask
 * has a box to clip against; without it the image height resolves from the
 * file alone and the bay reads as a stacked block on desktop too.
 */
.marquee-detail__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

.marquee-detail__frame {
  margin: 0;
  aspect-ratio: 3 / 2;
}

.bay__more { margin-top: 2rem; max-width: none; }

.production__runs { display: block; color: var(--ink-soft); font-weight: 450; }

/*
 * A card with no photograph does NOT hold a photograph's worth of empty arch.
 *
 * The Wheeler's performance photography is credited to named photographers and
 * to the Aspen Historical Society and is not licensed to us, so most cards have
 * no image and the 3:4 frame was reserving roughly 550px of blank stone each —
 * eight of them read as a broken page rather than as an unfinished one. The
 * frame collapses to a transom instead: the arcade rhythm survives at the scale
 * of a fanlight over a door, and the card becomes type-led, which is what a
 * playbill without a portrait has always looked like.
 *
 * When rights are cleared and images land, the img branch restores the full
 * window with no other change.
 */
.production__frame:has(.production__placeholder) {
  aspect-ratio: auto;
  height: 3.25rem;
  border-radius: var(--arch-tight);
}

.production__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-conic-gradient(
      from 180deg at 50% 100%,
      var(--stone-400) 0deg 1.5deg,
      var(--stone-200) 1.5deg 15deg
    );
}

.production__go {
  font-size: var(--step--1);
  font-weight: 650;
  white-space: nowrap;
}

/* The house bay: prose beside a small fact table, not a card row. */
.house__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

.house__facts { margin: 0; }

.house__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--stone-300);
}

.house__facts dt {
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stone-700);
}

.house__facts dd { margin: 0; font-weight: 550; text-align: right; }

/* The venue strip: the marketplace, named. Each row is a small arcade bay. */
.venue-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.25rem 1.5rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.venue-strip li { max-width: none; border-top: 1px solid var(--stone-300); }

.venue-strip a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
}

.venue-strip a:hover { color: var(--ember); }
.venue-strip a:hover span:last-child { text-decoration: underline; }

.venue-strip__mark { --fan: 1.65rem; }

.visit__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--gutter);
}

@media (max-width: 64rem) {
  .marquee__inner { grid-template-columns: minmax(0, 1fr); }
  .marquee__frame { order: -1; }
  .marquee__arch { aspect-ratio: 3 / 2; }
}

@media (max-width: 56rem) {
  .marquee__inner,
  .house__inner,
  .marquee-detail__inner { grid-template-columns: minmax(0, 1fr); }

  .marquee__frame { order: -1; }

  .marquee__arch { aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------------- forms -- */

label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: 0.3rem; }

input[type="text"],
input[type="email"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--stone-400);
}

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

.colophon {
  background: var(--night);
  color: var(--stone-300);
  padding-block: var(--bay) 2.5rem;
}

.colophon a { color: var(--paper); }
.colophon a:hover { color: var(--accent); }

.colophon h2, .colophon h3 { color: var(--paper); }

.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--gutter);
}

.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: 0.5rem; max-width: none; }

.colophon__head {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.colophon address { font-style: normal; margin-bottom: 0.9rem; }

.colophon__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(251 242 236 / 0.18);
  font-size: var(--step--1);
}

/* ------------------------------------------------------------ box office -- */

.boxoffice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
}

.boxoffice__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--ink-soft);
  flex: none;
}

/* State is never colour-only — the label carries it. */
.boxoffice[data-open="yes"] .boxoffice__dot { background: #2F7A4F; }
.boxoffice[data-open="no"] .boxoffice__dot { background: var(--stone-600); }

/* -------------------------------------------------------------- calendar -- */

/*
 * What's On. The home page is the arcade of arched photographs; this is the
 * playbill pasted beside the door — dated, dense, and readable at a glance in
 * the cold. Nothing here repeats the card grid.
 */

.bay--tight { padding-block: calc(var(--bay) * 0.55); }

.calendar__head-inner {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: end;
  gap: 0.5rem var(--gutter);
}

.calendar__head h1 { margin-block: 0; }

.calendar__head .lede { margin: 0 0 0.4rem; max-width: 44ch; }

/*
 * Discovery rides with the reader. The shared bones own position:sticky and
 * the viewport budget (assets/index-navigation.css); everything below is skin.
 */
.calendar__controls {
  --stoa-index-sticky-top: 0px;
  background: var(--paper-raised);
  border-block: 1px solid var(--stone-300);
}

.calendar__controls-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem var(--gutter);
  padding-block: 0.75rem;
}

.calendar__find {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 17rem;
}

.calendar__q {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0.5rem 0.85rem;
  background: var(--paper);
  border: 2px solid var(--stone-600);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
}

.calendar__q::placeholder { color: var(--ink-soft); opacity: 1; }

.calendar__submit { flex: none; padding-inline: 1.1rem; }

.calendar__summary {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  order: 5;
}

.calendar__empty {
  font-size: var(--step-1);
  color: var(--ink-soft);
  padding-block: var(--bay);
}

/*
 * The season, drawn as arched bars. Height is the month's share of the busiest
 * month; the count is printed beside it, so the picture is a second reading of
 * a number that is already in text. Each bar is a link to a real month URL.
 */
.season {
  flex: 1 1 22rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.season ul {
  display: flex;
  align-items: flex-end;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.season li { max-width: none; }

.season__all,
.season__month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  min-width: 2.9rem;
  min-height: 44px;
  padding: 0.3rem 0.35rem 0.35rem;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.1;
  border-bottom: 3px solid transparent;
}

.season__all {
  justify-content: center;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-right: 1px solid var(--stone-300);
  margin-right: 0.35rem;
}

.season__all:hover,
.season__month:hover { background: var(--band); color: var(--ink); }

.season__all[aria-current="page"],
.season__month[aria-current="page"] {
  border-bottom-color: var(--stone-700);
  background: var(--band);
  color: var(--ink);
}

/*
 * The bar is arch-topped, so a column of them reads as the facade's arcade
 * rather than as a bar chart borrowed from a dashboard.
 */
/* The month's arch. An SVG rather than a rounded box: a rectangle with a
   rounded top is not an arch, and this is the calendar's real graphic, not an
   ornament beside it. Geometry and fill live in the markup; see
   archive-production.php. */
.season__bar {
  width: 1.35rem;
  height: 2.4rem;
  align-self: center;
  overflow: visible;
}

.season__label { font-weight: 600; }

.season__count { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.season__bar-well {
  fill: none;
  stroke: var(--stone-600);
  stroke-width: 1.5;
}

.season__bar-fill { fill: var(--stone-600); }

.season__month[aria-current="page"] .season__bar-fill { fill: var(--stone-800); }
.season__month[aria-current="page"] .season__bar-well { stroke: var(--stone-800); }

/* The defs carrier is markup, not a graphic: it must occupy no space. */
.season-defs { position: absolute; width: 0; height: 0; }

/* The All chip has no bar, so it stretches to the rail's height rather than
   sitting short against a row of taller neighbours. */
.season__all { align-self: stretch; }

/* ----------------------------------------------------- the playbill rows -- */

.playbill {
  list-style: none;
  margin: 0;
  padding: 0;
}

.playbill > li {
  max-width: none;
  border-top: 1px solid var(--stone-300);
}

.playbill > li:last-child { border-bottom: 1px solid var(--stone-300); }

.call {
  display: grid;
  grid-template-columns: 4.25rem 1fr auto;
  align-items: center;
  gap: var(--gutter);
  padding-block: 1.1rem;
}

/* The date block: a small arched window, repeated down the page. */
.call__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.45rem 0.2rem 0.35rem;
  background: var(--band);
  border: 1px solid var(--stone-600);
  border-radius: var(--arch-tight);
  line-height: 1;
}

.call__dow {
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone-700);
}

.call__day {
  font-family: var(--display);
  font-size: var(--step-3);
  color: var(--ink);
  line-height: 0.95;
  margin-block: 0.15rem;
}

.call__mon {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.call__body { min-width: 0; }

.call__discipline {
  margin: 0 0 0.2rem;
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stone-700);
}

.call__title {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.1;
  margin: 0 0 0.35rem;
}

.call__title a { color: var(--ink); text-decoration: none; }
.call__title a:hover { color: var(--ember); text-decoration: underline; }

.call__when,
.call__where {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: none;
}

.call__time::before,
.call__more::before,
.call__presenter::before {
  content: "·";
  margin-inline: 0.45rem;
  color: var(--stone-400);
}

/*
 * A text action, not a button. Sixteen outlined buttons down one edge turned
 * the calendar into a column of boxes and drowned the titles they belong to;
 * the row's own heading is already a link to the same place, so this only has
 * to be an unmistakable second target.
 */
.call__go { margin: 0; }

.call__go a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.35rem 0.15rem;
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ember);
  text-decoration: none;
  white-space: nowrap;
}

.call__go a::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.call__go a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ pagination -- */

[data-stoa-index-pagination] {
  margin-top: 2rem;
  border-top: 1px solid var(--stone-300);
  padding-top: 1rem;
}

[data-stoa-index-pagination] ul { margin: 0; }

[data-stoa-index-pagination] li { max-width: none; }

[data-stoa-index-pagination] a,
[data-stoa-index-pagination] [aria-current="page"] {
  padding-inline: 0.9rem;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--stone-300);
  color: var(--ember);
}

[data-stoa-index-pagination] a:hover { background: var(--band); border-color: var(--stone-600); }

[data-stoa-index-pagination] [aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ------------------------------------------------------ production page -- */

/*
 * Playbill proportions: the marquee half and the dates half on one sheet. The
 * run column is fixed-width so a one-night engagement and an eight-night run
 * hold the same shape, and the title always gets the rest.
 */
.production-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  gap: var(--bay) var(--gutter);
  align-items: start;
}

.production-hero__crumb {
  margin: 0 0 1.25rem;
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.production-hero__title {
  font-size: var(--step-5);
  line-height: 1.12;
  margin: 0 0 0.75rem;
  max-width: 18ch;
}

.production-hero__where {
  margin: 0 0 0.5rem;
  font-size: var(--step-1);
  color: var(--stone-300);
}

.production-hero__presenter::before,
.production-hero__time::before {
  content: "·";
  margin-inline: 0.5rem;
  color: var(--stone-600);
}

.production-hero__next {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* The run: every date a control, laid out as a row of arched chips. */
.run__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}


.run__list > li { max-width: none; }

.perf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 6.5rem;
  min-height: 44px;
  padding: 0.6rem 0.9rem 0.7rem;
  background: var(--paper-raised);
  border: 2px solid var(--stone-600);
  border-radius: var(--arch-tight);
  text-decoration: none;
  color: var(--ink);
  line-height: 1.15;
}

a.perf:hover { background: var(--accent); border-color: var(--ink); }

.perf--past {
  margin: 0;
  background: transparent;
  border-style: dashed;
  border-color: var(--stone-300);
  color: var(--ink-soft);
}

.perf__dow {
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone-700);
}

.perf--past .perf__dow { color: var(--ink-soft); }

.perf__date {
  font-family: var(--display);
  font-size: var(--step-1);
}

.perf__time { font-size: var(--step--1); color: var(--ink-soft); }

.perf__state {
  margin-top: 0.25rem;
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.perf__state--go { color: var(--ember); }

a.perf:hover .perf__state--go,
a.perf:hover .perf__time { color: var(--ink); }

.run__note {
  margin-top: 1.5rem;
  font-size: var(--step--1);
  color: var(--stone-300);
  max-width: 42ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1rem; }

.practical {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--gutter);
}

.practical address { font-style: normal; margin-bottom: 0.75rem; }

.also {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}

.also li { max-width: none; }

.also a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1rem;
  background: var(--paper-raised);
  border: 1px solid var(--stone-300);
  text-decoration: none;
  color: var(--ink);
}

.also a:hover { background: var(--band); border-color: var(--stone-600); }

.also__mark { --fan: 2rem; }

.also__title { font-family: var(--display); font-size: var(--step-1); line-height: 1.15; }

.also__date { font-size: var(--step--1); color: var(--ink-soft); }

/* The record inspector — closed by default, written for an evaluator. */
.record {
  border: 1px solid var(--stone-300);
  background: var(--paper-raised);
  padding: 0.35rem 1.1rem;
}

.record > summary {
  padding: 0.75rem 0;
  font-weight: 650;
  color: var(--ember);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.record[open] > summary { border-bottom: 1px solid var(--stone-300); margin-bottom: 0.9rem; }

.record__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem var(--gutter);
  margin: 0 0 0.9rem;
}

.record__grid dt {
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone-700);
  margin-bottom: 0.2rem;
}

.record__grid dd { margin: 0; font-size: var(--step--1); color: var(--ink); }

.record__grid code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--band);
  padding: 0.1rem 0.35rem;
}

.record__more { margin: 0; font-size: var(--step--1); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 46rem) {
  .call {
    grid-template-columns: 3.5rem 1fr;
    gap: 0.9rem;
    padding-block: 1rem;
  }

  .call__go { grid-column: 2; }

  .call__day { font-size: var(--step-2); }

  /* The season rail keeps its own scroll so the controls stay one row tall. */
  .season { flex-basis: 100%; }

  .calendar__summary { order: 0; flex-basis: 100%; }

  .calendar__head-inner { grid-template-columns: minmax(0, 1fr); }

  .production-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

  .production-hero__title { font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1.12; max-width: none; }

  .perf { min-width: 5.75rem; padding-inline: 0.7rem; }
}

@media (max-width: 48rem) {
  .production-hero__title { font-size: clamp(1.8rem, 5vw, 2.3rem); line-height: 1.12; }
}

@media (max-width: 60rem) {
  .nav-disclosure > summary {
    display: inline-block;
    list-style: none;
  }

  .nav-disclosure > summary::-webkit-details-marker { display: none; }

  .nav-disclosure[open] > summary { margin-bottom: 0.5rem; }

  .primary-nav ul,
  .utility-nav ul {
    flex-direction: column;
    gap: 0;
    padding-block: 0.25rem;
  }

  .primary-nav li,
  .utility-nav li { border-top: 1px solid var(--stone-200); }

  .primary-nav a,
  .utility-nav a { display: block; padding: 0.85rem 0.15rem; }

  .omnibox { order: 4; flex-basis: 100%; }

  .boxoffice { order: 6; flex-basis: 100%; }
}

@media (max-width: 40rem) {
  .production__frame { aspect-ratio: 4 / 3; }
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .production:hover .production__frame img { transform: none; }
}

/* ----------------------------------------------------------------- print -- */

@media print {
  .masthead, .colophon, .omnibox, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .bay { padding-block: 1rem; }
}