/* ============================================================
   Chamber Music in Napa Valley — prototype stylesheet (B: authentic print identity)
   Reproduces the print identity (Hoefler typography, burgundy/cream,
   small-caps headers, old-style figures) on a responsive web layout.
   ============================================================ */

/* ---- Type: free hybrid ----
   Apple devices render the REAL Hoefler Text (bundled system font) via local();
   everyone else falls back to EB Garamond (OFL, self-hosted woff2 — web-licensed,
   includes true small caps). The desktop-licensed Hoefler TTFs are deliberately
   NOT served — local() only — so nothing unlicensed ships. The small-caps look
   (wordmark, headers, names) comes from `font-variant: small-caps` on the
   "Hoefler SC" selectors below, which drives the smcp feature in both fonts. */
@font-face {
  font-family: "Hoefler Text";
  src: local("Hoefler Text"), url("../fonts/eb-garamond/ebgaramond-regular.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hoefler Text";
  src: local("Hoefler Text Italic"), local("Hoefler Text"), url("../fonts/eb-garamond/ebgaramond-italic.woff2") format("woff2");
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hoefler Text";
  src: local("Hoefler Text Black"), local("Hoefler Text"), url("../fonts/eb-garamond/ebgaramond-bold.woff2") format("woff2");
  font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hoefler Text";
  src: local("Hoefler Text Black Italic"), local("Hoefler Text Italic"), url("../fonts/eb-garamond/ebgaramond-bolditalic.woff2") format("woff2");
  font-weight: bold; font-style: italic; font-display: swap;
}
/* Small-caps slot — same families; the SC rendering is applied via
   `font-variant: small-caps` on the selectors that use this family. */
@font-face {
  font-family: "Hoefler SC";
  src: local("Hoefler Text"), url("../fonts/eb-garamond/ebgaramond-regular.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ---- Palette (preserved from cmnv.css) ---- */
:root {
  --burgundy:      #660000;   /* primary — headings, names, links */
  --accent:        #5b5635;   /* olive, pulled from the fresco laurel leaves — series labels / badges */
  --cream:         #F5EDD5;  /* warm ivory (print-stock feel). TENTATIVE — may revisit. Original site used #FFFFCC bright lemon. */
  --terracotta:    #9c5a37;   /* dates + prices — warm brick pulled from the fresco (replaces hot #990000) */
  --rule:          #d8c9a0;
  /* Shared size for primary page headings: "Tickets", "Past Seasons",
     "The 46th Season" (home + This Season). Change here to move all of them. */
  --title-size:    clamp(26px, 4vw, 34px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--burgundy);       /* body/running text in burgundy — terracotta (dates) & olive (series) are the only accents */
  font-family: "Hoefler Text", "Times New Roman", Times, serif;
  font-size: 16px;          /* base body/prose size (headings & listing have their own sizes) */
  line-height: 1.55;
}

.wrap {
  max-width: 760px;          /* narrowed from 820 for a more centered, inset feel */
  margin: 0 auto;
  padding: 36px 28px 56px;
}

/* ---- Masthead ---- */
.masthead { text-align: center; padding-top: 18px; }

.wordmark {
  font-family: "Hoefler SC", "Hoefler Text", serif; font-variant: small-caps;
  color: var(--burgundy);
  font-size: clamp(26px, 5.4vw, 44px);   /* capped so it stays on one line in the narrower column */
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0;
  font-weight: normal;
}
.wordmark a { color: inherit; text-decoration: none; }

nav.mainnav {
  margin: 22px 0 6px;
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  font-size: 16px;
  letter-spacing: 0.08em;
}
nav.mainnav a {
  color: var(--burgundy);
  text-decoration: none;
  margin: 0 0.7em;
  white-space: nowrap;
}
nav.mainnav a:hover { color: var(--burgundy); text-decoration: underline; }

hr.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 18px 0 4px;
}

/* ---- Links ---- */
a {
  color: var(--burgundy);
  text-decoration: underline;
  text-decoration-color: rgba(102, 0, 0, 0.35);
  text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--burgundy); }

/* ---- Hero / season intro ---- */
.hero {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;   /* center the fresco + text as one group under the nav */
  margin: 30px 0 8px;
}
.hero img {
  width: 288px; max-width: 42%;
  height: auto;
  border: 1px solid var(--rule);
}
.hero .intro { flex: 0 1 auto; }   /* size to content so the group can center, rather than filling to the right edge */

.season-label {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  color: var(--burgundy);
  font-size: var(--title-size);   /* matches inner-page headings (e.g. "Tickets") */
  line-height: 1.1;
  margin: 0 0 10px;
}
.season-tag { font-style: italic; font-size: 19px; margin: 0 0 14px; color: var(--burgundy); }

.cta {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  font-size: 15px;
  letter-spacing: 0.06em;
}

/* ---- Season overview table ---- */
h2.section {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  color: var(--burgundy);
  font-weight: normal;
  font-size: 24px;
  letter-spacing: 0.03em;
  margin: 40px 0 14px;
}

table.season {
  width: auto;            /* shrink to content so the whole block can center, like the hero */
  max-width: 100%;
  border-collapse: collapse;
  margin: 24px auto 0;    /* center the listing block in the column */
}
table.season td {
  padding: 8px 12px;
  vertical-align: baseline;
}
td.artist {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;    /* column sizes to the longest billing; names never wrap */
  border-right: 1px solid var(--burgundy);   /* the vertical rule, as on the original site */
}
td.artist a { color: var(--burgundy); text-decoration: none; }
td.artist a:hover { text-decoration: underline; }
td.artist .inst { font-family: "Hoefler Text", serif; font-variant: normal; font-style: italic; font-size: 12px; }
td.date {
  font-style: italic;
  text-align: left;
  color: var(--terracotta);
  font-size: 12px;
  white-space: nowrap;   /* dates never wrap */
}
td.series {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  text-transform: uppercase;
  color: var(--terracotta);   /* series joins the date as logistics — matches the date color */
  letter-spacing: 0.05em;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
}

/* ---- Footer ---- */
footer {
  margin-top: 46px;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: var(--burgundy);
}

/* ---- Inner-page title + lead ---- */
.page-title {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  color: var(--burgundy);
  font-weight: normal;
  font-size: var(--title-size);
  letter-spacing: 0.03em;
  margin: 30px 0 6px;
}
.page-sub {
  font-style: italic;
  font-size: 18px;
  margin: 0 0 24px;
  color: var(--burgundy);
}
.lead { margin: 0 0 22px; }

/* ---- This Season: concert cards ---- */
.concert {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.concert:first-of-type { border-top: 1px solid var(--rule); }
.concert-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 12px;
}
.concert-artist {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  font-size: 22px;
  color: var(--burgundy);
  line-height: 1.2;
  margin: 0;
}
.concert-artist .inst { font-family: "Hoefler Text", serif; font-variant: normal; font-style: italic; font-size: 17px; }   /* inherits burgundy from the name — instruments match the name color (see style guide) */
.concert-artist a { color: var(--burgundy); text-decoration: none; }
.concert-artist a:hover { color: var(--burgundy); text-decoration: underline; }
.concert-when {
  font-style: italic;
  text-align: right;
  white-space: nowrap;
  color: var(--terracotta);
  font-size: 16px;
}
.concert-when .series {
  display: block;
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  font-style: normal;
  text-transform: uppercase;
  color: var(--terracotta);
  letter-spacing: 0.05em;
  font-size: 12px;
}
ul.program { list-style: none; margin: 0; padding: 0; }
ul.program li { margin: 3px 0; }
ul.program .composer { font-variant: normal; }
.badge {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.04em;
  font-size: 12px;
  margin-left: 6px;
  white-space: nowrap;
}
.concert-note { font-style: italic; font-size: 15px; margin: 10px 0 0; }
.concert-blurb { font-size: 16px; line-height: 1.62; margin: 0 0 14px; max-width: 62ch; }   /* JK's per-concert prose — sits between billing and program */

/* ---- Tickets: pricing + levels ---- */
.prose p { margin: 0 0 16px; max-width: 60ch; line-height: 1.62; }
h2.section.tight { margin-top: 30px; }
table.pricing { border-collapse: collapse; margin: 6px 0 8px; }
table.pricing td { padding: 10px 26px 10px 0; border-bottom: 1px solid var(--rule); }
table.pricing td.price { font-style: italic; color: var(--terracotta); white-space: nowrap; }
.levels { margin: 4px 0 0; line-height: 1.8; }   /* dense tier run — extra leading so it breathes when it wraps */
.levels .lvl { font-family: "Hoefler SC", serif; font-variant: small-caps; letter-spacing: 0.02em; }
.levels .amt { color: var(--terracotta); font-style: italic; }   /* contribution amounts are prices → terracotta */

/* ---- Past seasons ---- */
.past-season { margin: 0 0 26px; max-width: 60ch; break-inside: avoid; -webkit-column-break-inside: avoid; }
.past-season .yr {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  color: var(--terracotta);   /* season years are dates → terracotta, matching the main-page concert dates */
  font-size: 21px;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 5px;
}
.past-season .lineup {
  color: var(--burgundy);   /* lists differ from the year by size (16 vs 21) + roman-vs-small-caps, not color */
  font-size: 16px;
  line-height: 1.62;
}
/* Lineup entries link to archived programs — keep the underline whisper-faint
   so the listing still reads as a printed list, full strength on hover. */
.past-season .lineup a { text-decoration-color: rgba(102, 0, 0, 0.16); }
.past-season .lineup a:hover { text-decoration-color: var(--burgundy); }
/* Anderson Cave Concerts — a quiet second line under the season's lineup. */
.past-season .cave { font-size: 13px; margin-top: 3px; }
.past-season .cave .cave-label { font-style: italic; color: var(--terracotta); }
.past-cols { columns: 2; column-gap: 48px; }
@media (max-width: 640px) { .past-cols { columns: 1; } }

/* ---- Archive: rendered historic programs ---- */
.archive-back { margin: 24px 0 0; font-size: 15px; }
.archive-head { margin: 24px 0 4px; }
.archive-season { font-style: italic; color: var(--terracotta); font-size: 16px; margin: 0 0 8px; }   /* season + date are logistics → terracotta */
.archive-billing {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  font-weight: normal;
  font-size: clamp(22px, 3.6vw, 30px);
  color: var(--burgundy);
  line-height: 1.25;
  margin: 0;
}
.archive-billing .inst { font-family: "Hoefler Text", serif; font-variant: normal; font-style: italic; font-size: 0.72em; }
/* Names, composers, works, and instruments on archive pages link into the
   archive search's entity views — quiet links, underline on hover only. */
.archive-billing a, ul.archive-members a, .archive-composer a, .archive-worktitle a {
  color: inherit; text-decoration: none;
}
.archive-billing a:hover, ul.archive-members a:hover,
.archive-composer a:hover, .archive-worktitle a:hover { text-decoration: underline; }
ul.archive-members { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15px; }
ul.archive-members li { display: inline; white-space: nowrap; }
ul.archive-members li:not(:last-child)::after { content: "\00a0\00b7\0020"; white-space: normal; }   /* nbsp glues the dot to the name; break only after it */
ul.archive-members .inst { font-style: italic; }
h2.archive-sec {
  font-family: "Hoefler SC", serif; font-variant: small-caps;
  font-weight: normal;
  color: var(--burgundy);
  font-size: 20px;
  letter-spacing: 0.03em;
  margin: 36px 0 14px;
}
/* The program list opens the page right under the billing (no "Program"
   heading) — a modest gap keeps it grouped with the billing yet distinct. */
ol.archive-works { list-style: none; margin: 16px 0 0; padding: 0; }
ol.archive-works > li.work { margin: 0 0 18px; }
.archive-composer { font-family: "Hoefler SC", serif; font-variant: small-caps; font-size: 17px; }
.archive-composer .yrs { font-family: "Hoefler Text", serif; font-variant: normal; font-style: italic; color: var(--terracotta); font-size: 13px; margin-left: 6px; }
.archive-worktitle { margin: 2px 0 0; }
ol.archive-movements { list-style: none; margin: 4px 0 0 22px; padding: 0; font-size: 14px; }
li.archive-intermission { text-align: center; font-style: italic; color: var(--terracotta); letter-spacing: 0.08em; margin: 18px 0; }
.archive-prose p { margin: 0 0 14px; max-width: 62ch; font-size: 16px; line-height: 1.62; }
.archive-prose h3 { font-family: "Hoefler SC", serif; font-variant: small-caps; font-weight: normal; font-size: 17px; margin: 22px 0 8px; }

/* ---- Contact block ---- */
.contact { font-style: normal; line-height: 1.7; margin-top: 8px; }
.contact .label { font-family: "Hoefler SC", serif; font-variant: small-caps; letter-spacing: 0.02em; }

/* ============================================================
   Responsive — the "more functional" part. Below 640px the
   layout reflows to a single fluid column (the current site
   simply overflows here).
   ============================================================ */
@media (max-width: 640px) {
  .wrap { padding: 22px 18px 40px; }
  body { font-size: 17px; }

  .hero { flex-direction: column; text-align: center; }
  .hero img { width: 240px; max-width: 80%; }

  nav.mainnav a { display: inline-block; margin: 4px 0.5em; }

  table.season, table.season tbody, table.season tr, table.season td {
    display: block; width: 100%;
  }
  table.season tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  table.season td { border: none; padding: 1px 0; text-align: left; white-space: normal; }
  td.date, td.series { text-align: left; }

  .concert-head { flex-direction: column; gap: 4px; }
  .concert-when { text-align: left; }
  .concert-when .series { display: inline; margin-left: 8px; }
}