/* ==========================================================================
   The Denver Victorian Playhouse — historical record
   Theme: "Basement Playbill" — oxblood letterpress + brass rules + parchment
   ========================================================================== */

:root {
  /* Oxblood — from the original site's #330000 frame and #990000 accent */
  --ox-900: #1c0708;
  --ox-800: #2b0d0e;
  --ox-700: #3d1214;
  --ox-600: #55191c;
  --ox-500: #7a2225;
  --ox-400: #9b2f2c;

  /* Brass — evolution of the original's #663300 link brown */
  --brass-600: #8a6a1f;
  --brass-500: #b08d33;
  --brass-400: #c9a74a;
  --brass-300: #e0c67f;

  /* Parchment */
  --paper-50: #fbf7ee;
  --paper-100: #f4ecdb;
  --paper-200: #e9dec7;
  --paper-300: #d8c9ab;

  --ink-900: #17110e;
  --ink-700: #33261f;
  --ink-600: #4a3a30;
  --ink-400: #6d5a4d;

  --rule: rgba(23, 17, 14, .18);
  --rule-light: rgba(224, 198, 127, .32);

  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-caps: "Playfair Display", Georgia, serif;

  --measure: 42rem; /* absolute, not ch: ch is font-size-relative and breaks on headings */
  --radius: 2px; /* letterpress: almost square */
}

/* -------------------------------------------------- base */
html { scroll-behavior: smooth; }

body {
  background-color: var(--paper-100);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(176, 141, 51, .07), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(85, 25, 28, .06), transparent 52%);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--ox-500); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--ox-400); }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--ox-800);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.18;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-top: 2.4rem; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-top: 1.8rem; color: var(--ox-600); }

.eyebrow {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--brass-600);
  margin-bottom: .6rem;
}

/* -------------------------------------------------- masthead */
.masthead {
  background: linear-gradient(180deg, var(--ox-900) 0%, var(--ox-700) 100%);
  border-bottom: 3px double var(--brass-500);
  color: var(--paper-100);
  padding: 1.5rem 1rem .9rem;
  text-align: center;
}

.masthead__title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--paper-50);
  font-size: clamp(1.35rem, 3.6vw, 2.35rem);
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.masthead__title a { color: inherit; text-decoration: none; }
.masthead__title a:hover { color: var(--brass-300); }

.masthead__rule {
  width: min(420px, 70%);
  margin: .7rem auto .55rem;
  border: 0;
  border-top: 1px solid var(--brass-500);
  border-bottom: 1px solid rgba(201, 167, 74, .35);
  height: 3px;
  opacity: .9;
}

.masthead__sub {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .68rem;
  color: var(--brass-300);
  margin: 0;
}

/* -------------------------------------------------- nav (overflow-safe) */
.vicnav {
  background: var(--ox-800);
  border-bottom: 1px solid rgba(201, 167, 74, .28);
}

.vicnav__list {
  display: flex;
  flex-wrap: wrap;          /* never clip: the nav grows downward, not off-screen */
  justify-content: center;
  align-items: center;
  gap: .1rem 0;
  min-width: 0;
  list-style: none;
  margin: 0 auto;
  padding: .35rem .5rem;
  max-width: 1140px;
}

.vicnav__list > li { min-width: 0; flex-shrink: 1; }

.vicnav__link {
  display: block;
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: .7rem;
  font-weight: 600;
  color: var(--paper-200);
  text-decoration: none;
  padding: .55rem .85rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.vicnav__link:hover,
.vicnav__link:focus,
.vicnav__link[aria-current="page"] {
  color: var(--brass-300);
  border-bottom-color: var(--brass-500);
}

/* -------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--ox-900);
  overflow: hidden;
}

.hero__img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 460px);
  object-fit: cover;
  opacity: .58;
  filter: saturate(.85);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 7, 8, .55) 0%, rgba(28, 7, 8, .2) 45%, rgba(28, 7, 8, .88) 100%);
}

.hero__inner {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.25rem 1.9rem;
  text-align: center;
}

.hero__title {
  color: var(--paper-50);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  margin: 0 0 .4rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}

.hero__lede {
  color: var(--paper-200);
  max-width: 62ch;
  margin: 0 auto;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

/* -------------------------------------------------- sheet (parchment panel) */
.sheet {
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px -22px rgba(28, 7, 8, .55);
  padding: clamp(1.4rem, 4vw, 3.2rem);
  margin: clamp(1.4rem, 3vw, 2.6rem) auto;
  max-width: 960px;
  border-radius: var(--radius);
}

/* Prose spans the sheet, but reading-width elements are capped and centred so
   that wide blocks (playbill grids, season tables) can still use the full sheet. */
.prose { max-width: 100%; }

.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3,
.prose > .press,
.prose > .credits,
.prose > .notice,
.prose > .figure,
.prose > .eyebrow,
.prose > hr {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.prose p, .prose ul, .prose ol { margin-bottom: 1.15rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { color: var(--ox-700); font-weight: 600; }

.prose--lead > p:first-child:not(.eyebrow)::first-letter,
.prose--lead > .eyebrow + p::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: .82;
  padding: .06em .09em 0 0;
  color: var(--ox-500);
  font-weight: 700;
}

/* -------------------------------------------------- ornaments */
.fleuron {
  display: block;
  text-align: center;
  color: var(--brass-500);
  font-size: 1.1rem;
  letter-spacing: .5em;
  margin: 2.2rem auto;
  border: 0;
}

.fleuron::before { content: "\2766"; }

.doublerule {
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 4px;
  margin: 2rem auto;
}

/* -------------------------------------------------- playbill card */
.playbill {
  border: 1px solid var(--paper-300);
  border-top: 3px double var(--ox-600);
  background: linear-gradient(180deg, #fffdf7 0%, var(--paper-50) 100%);
  padding: 1.15rem 1.15rem 1.05rem;
  height: 100%;
  border-radius: var(--radius);
  transition: transform .18s ease, box-shadow .18s ease;
}

.playbill:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -20px rgba(28, 7, 8, .7); }

.playbill__season {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .64rem;
  color: var(--brass-600);
}

.playbill__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: .3rem 0 .25rem;
  line-height: 1.25;
}

.playbill__title a { text-decoration: none; color: var(--ox-700); }
.playbill__title a:hover { color: var(--ox-400); text-decoration: underline; }

.playbill__by { font-size: .9rem; color: var(--ink-400); font-style: italic; margin: 0 0 .35rem; }
.playbill__run { font-size: .82rem; color: var(--ink-600); margin: 0; }

/* -------------------------------------------------- credit block */
.credits {
  background: var(--paper-100);
  border-left: 3px solid var(--brass-500);
  padding: 1rem 1.15rem;
  margin: 1.6rem 0;
  font-size: .95rem;
}

.credits dt {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .64rem;
  color: var(--brass-600);
  margin-top: .55rem;
}

.credits dt:first-child { margin-top: 0; }
.credits dd { margin: .1rem 0 0; color: var(--ink-700); }

/* -------------------------------------------------- pull quote / press */
.press {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0 .9rem;
  margin: 1.6rem 0;
}

.press blockquote {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--ox-700);
  margin: 0 0 .45rem;
  line-height: 1.5;
}

.press figcaption {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  color: var(--brass-600);
}

/* -------------------------------------------------- figures */
.figure { margin: 1.9rem 0; }

.figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
}

.figure figcaption {
  font-size: .82rem;
  color: var(--ink-400);
  font-style: italic;
  margin-top: .5rem;
  padding-left: .1rem;
}

/* -------------------------------------------------- notice */
.notice {
  background: rgba(122, 34, 37, .05);
  border: 1px solid rgba(122, 34, 37, .2);
  border-left: 3px solid var(--ox-500);
  padding: .95rem 1.1rem;
  font-size: .92rem;
  color: var(--ink-700);
  border-radius: var(--radius);
  margin: 1.6rem 0;
}

.notice strong { color: var(--ox-600); }

/* -------------------------------------------------- season table */
.seasons { width: 100%; border-collapse: collapse; font-size: .94rem; }
.seasons caption { text-align: left; font-family: var(--font-caps); text-transform: uppercase; letter-spacing: .2em; font-size: .66rem; color: var(--brass-600); padding-bottom: .5rem; }
.seasons th, .seasons td { text-align: left; padding: .5rem .7rem .5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.seasons th { font-family: var(--font-caps); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--brass-600); font-weight: 600; }

/* -------------------------------------------------- footer */
.vicfoot {
  background: linear-gradient(180deg, var(--ox-700) 0%, var(--ox-900) 100%);
  border-top: 3px double var(--brass-500);
  color: var(--paper-200);
  padding: 2.4rem 1rem 1.6rem;
  margin-top: 3rem;
  font-size: .9rem;
}

.vicfoot h2 {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  color: var(--brass-400);
  margin: 0 0 .7rem;
}

.vicfoot a { color: var(--paper-200); text-decoration: none; }
.vicfoot a:hover { color: var(--brass-300); text-decoration: underline; }
.vicfoot ul { list-style: none; padding: 0; margin: 0; }
.vicfoot li { margin-bottom: .3rem; }

.vicfoot__base {
  border-top: 1px solid rgba(201, 167, 74, .25);
  margin-top: 1.8rem;
  padding-top: 1.1rem;
  text-align: center;
  font-size: .78rem;
  color: rgba(233, 222, 199, .72);
}

/* -------------------------------------------------- 404 */
.lost { text-align: center; padding: clamp(2.5rem, 8vw, 5rem) 1rem; }
.lost h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }

/* -------------------------------------------------- entrance animation
   CSS-only, ends in the visible state. Content is NEVER hidden waiting on JS. */
@keyframes viclift {
  from { opacity: .001; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.lift { animation: viclift .5s ease both; }

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

/* Safeguard: any scroll-reveal markup must never leave content invisible. */
[data-aos] { opacity: 1 !important; transform: none !important; }

/* -------------------------------------------------- small screens */
@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .masthead { padding: 1.1rem .6rem .75rem; }
  .masthead__title { font-size: clamp(1.15rem, 5.6vw, 1.5rem); }
  .masthead__sub { letter-spacing: .16em; }
  .vicnav__link { padding: .5rem .6rem; letter-spacing: .12em; }
  .prose--lead > p:first-child::first-letter,
.prose--lead > .eyebrow + p::first-letter { font-size: 2.8em; }
}

/* -------------------------------------------------- page headline block */
.sheet__head {
  max-width: var(--measure);
  margin: 0 auto;
}

.sheet__head h1 { margin: 0 0 .5rem; }

.sheet__head .lead {
  font-size: 1.12rem;
  color: var(--ink-600);
  margin: 0;
}

/* Bootstrap's reboot moves captions to the bottom; these read as section labels. */
.seasons caption { caption-side: top; }