:root {
  --espresso: #160C07;
  --espresso-2: #221610;
  --bone: #EFE3CD;
  --bone-2: #E0D2B6;
  /* Whiskey lightened from #B86026 (4.35:1) to #C9763C for AA on 11–14px text on espresso (5.4:1). */
  --whiskey: #C9763C;
  --oxblood: #6E2418;
  --smoke: #8C7B6B; /* Wave 4 hotfix: was #5A4D40 (2.36:1, fail AA); now 4.74:1 on espresso */
  /* AA-safe smoke for 11px caption text on espresso (4.55:1) */
  --smoke-light: #8C7B6B;

  --rule: rgba(239, 227, 205, 0.10);
  --rule-strong: rgba(239, 227, 205, 0.22);

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --pour-fast: 300ms;
  --pour-mid: 600ms;
  --pour-slow: 1200ms;
  --ease-stir: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; }
body {
  background: var(--espresso);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01";
  min-height: 100vh;
  overflow-x: hidden;
}

/* Aged-paper grain overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Layout */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}
@media (max-width: 720px) {
  .wrap { padding: 0 24px; }
}

/* Typography */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
h1 { font-size: clamp(56px, 10vw, 156px); line-height: 0.88; letter-spacing: -0.04em; }
h2 { font-size: clamp(40px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.025em; }
h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }

a { color: inherit; text-decoration: none; transition: color var(--pour-fast) var(--ease-stir); }
a:hover { color: var(--whiskey); }

p { max-width: 36em; }

.eyebrow, .label, .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--smoke);
}
.eyebrow.accent { color: var(--whiskey); }

/* Header — sticky, dark, wordmark-only brand */
.site-header {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--espresso);
}
.site-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  padding: 5px 0;
  text-decoration: none;
}
.brand-wordmark {
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1.4vw, 0.9rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--pour-fast) var(--ease-stir);
}
.brand-mark:hover .brand-wordmark,
.brand-mark:focus-visible .brand-wordmark { color: var(--whiskey); }

.site-nav {
  display: flex;
  gap: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--bone);
  opacity: 0.72;
}
.site-nav a:hover, .site-nav a.active {
  opacity: 1;
  color: var(--whiskey);
}

/* Hamburger button hidden on desktop */
.menu-toggle { display: none; }

@media (max-width: 800px) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  color: var(--bone);
  cursor: pointer;
  transition: all var(--pour-mid) var(--ease-stir);
  background: transparent;
}
.btn:hover {
  border-color: var(--whiskey);
  color: var(--whiskey);
}
.btn.primary {
  border-color: var(--whiskey);
  color: var(--whiskey);
}
.btn.primary:hover {
  box-shadow: inset 0 0 0 1px var(--whiskey);
  letter-spacing: 0.26em;
}
.btn:focus-visible {
  outline: 2px solid var(--whiskey);
  outline-offset: 3px;
}

/* ============================================================
   HERO — Two-layout system.
   DESKTOP (landscape): video bed + asymmetric layout — mark anchors
   the left, an editorial type stack rights itself in the right column.
   Big italic Fraunces display H1, full sub paragraph, all the brand
   weight a desktop fold can carry.
   MOBILE (portrait): no video, centered stack, mark above shorter type.
   ============================================================ */
.hero {
  padding: 10vh 0 8vh;
  min-height: 86vh;
  display: flex;
  align-items: center;
  background: var(--espresso);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  pointer-events: none;
  background: var(--espresso) url("assets/img/hero-poster.jpg") center/cover no-repeat;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Vignette favors the right column where the type lives — heavier on the
     right, lighter on the left where the mark sits over the video footage. */
  background:
    linear-gradient(90deg, rgba(22, 12, 7, 0.45) 0%, rgba(22, 12, 7, 0.30) 35%, rgba(22, 12, 7, 0.78) 100%);
}
.hero-line, .tonight, .hero-meta, .hero-mark, .hero-sub {
  text-shadow: 0 1px 12px rgba(22, 12, 7, 0.65), 0 1px 3px rgba(22, 12, 7, 0.85);
}
.hero .wrap {
  position: relative;
  z-index: 1;
}
/* Desktop layout: 2-column grid, mark left, type right */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.3fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.hero-mark {
  display: flex;
  justify-content: center;
  color: var(--bone);
}
.hero-mark svg {
  display: block;
  width: 100%;
  max-width: clamp(220px, 26vw, 360px);
  height: auto;
}
.hero-text {
  text-align: left;
  max-width: 36em;
}
.hero-line {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
  font-size: clamp(2.75rem, 6vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--bone);
  margin: 0 0 1.5rem;
}
.hero-line em { font-style: italic; }
.hero-h1-l2 {
  display: block;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 300;
}
.hero-line .num {
  color: var(--whiskey);
  font-feature-settings: "lnum";
  font-style: normal;
}
.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 60, "SOFT" 70;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--bone);
  opacity: 0.92;
  margin: 0 0 1.75rem;
  max-width: 28em;
}
.hero-sub em { font-style: italic; color: var(--bone); }
.hero-meta {
  font-family: var(--mono);
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-light);
  margin: 0 0 1.5rem;
  max-width: 36em;
}
.hero-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-action {
  display: inline-block;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-size: clamp(1.125rem, 1.4vw, 1.35rem);
  line-height: 1;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 4px;
  min-height: 44px;
  transition: color var(--pour-fast) var(--ease-stir),
              border-color var(--pour-fast) var(--ease-stir);
}
.hero-action:hover,
.hero-action:focus-visible {
  color: var(--whiskey);
  border-color: var(--whiskey);
  outline: none;
}
.hero-action-sep {
  font-family: var(--mono);
  color: var(--smoke-light);
  font-size: 1rem;
  user-select: none;
}

/* ============================================================
   TONIGHT'S POUR — typeset-menu treatment under the editorial line.
   Mono "TONIGHT —" stamp + italic Fraunces cocktail string. */
.tonight {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--bone);
  margin: 0 0 1.75rem;
  font-variation-settings: "opsz" 36, "SOFT" 70, "wght" 400;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  min-height: 22px;
}
.tonight::before {
  content: "Tonight \2014";
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-light);
  font-weight: 500;
  flex: none;
  white-space: nowrap;
  position: relative;
  top: -0.5px;
}

/* ============================================================
   PORTRAIT (mobile): no video, single-column centered, mark above.
   Drops the long H1 phrases, drops the sub paragraph entirely,
   centers the action links. Mark gets the focal anchor it deserves
   when there's less horizontal real estate to compete with. */
@media (orientation: portrait) {
  .hero {
    padding: 6vh 0 5vh;
    min-height: 0;
  }
  .hero-video,
  .hero-overlay { display: none; }
  .hero-line, .tonight, .hero-meta, .hero-mark, .hero-sub {
    text-shadow: none;
  }
  .hero-inner {
    display: block;
    text-align: center;
  }
  .hero-mark {
    margin: 0 auto 2.5rem;
  }
  .hero-mark svg {
    width: clamp(220px, 65vw, 340px);
    max-width: 65vw;
  }
  .hero-text {
    text-align: center;
    max-width: none;
    margin: 0 auto;
  }
  .hero-h1-long { display: none; }
  .hero-line {
    font-size: clamp(2rem, 9vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
  }
  .hero-sub { display: none; }
  .tonight {
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 1.5rem;
  }
  .hero-meta {
    letter-spacing: 0.2em;
    line-height: 1.6;
    margin: 0 auto 1.5rem;
  }
  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .hero-action-sep { display: none; }
}

/* Generic section */
section {
  padding: clamp(72px, 10vw, 120px) 0;
  border-top: 1px solid var(--rule);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  margin-bottom: clamp(40px, 7vw, 72px);
  align-items: end;
}
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; }
}
.section-head h2 em { font-style: italic; color: var(--whiskey); }

/* === EDITORIAL PILLARS ===
   The #three block, art-directed.
   Pattern lifted from the brand book itself: numbered ledger entry,
   hairline rule, mark, set heading, copy, then a flat metadata row
   in mono (the §07 middle-dot specimen). A single ledger coda below
   binds the three together. Pure type, one motion per element.
*/
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
@media (max-width: 800px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  background: var(--espresso);
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background var(--pour-mid) var(--ease-stir);
  position: relative;
}
.pillar:hover { background: var(--espresso-2); }

/* Numbered ledger caption — sits at the top like a folio number on a printed page. */
.pillar .pillar-no {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--smoke-light);
  /* The hairline rule that runs under the № — magazine header bar. */
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

/* Mark — the canonical §08 line, calmed and given air. */
.pillar svg {
  width: 30px;
  height: 30px;
  color: var(--whiskey);
  flex: none;
  margin-bottom: 22px;
}

/* Set heading — Tier 2 italic, holds the line. */
.pillar h3 {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 80;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}

/* Body copy — Tier 4 territory. */
.pillar p {
  color: var(--bone);
  opacity: 0.82;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Pillar metadata — the museum-card line. Mono, middle-dotted, AA-safe smoke.
   This is the §07 metadata law in practice: middle dot, mono, all-caps,
   generously tracked. Pinned to the bottom with margin-top:auto so cards of
   varying paragraph length still align their meta line. */
.pillar .pillar-meta {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--smoke-light);
  line-height: 1.45;
  opacity: 1;
  max-width: none;
}

.pillar:focus-visible {
  outline: 2px solid var(--whiskey);
  outline-offset: 3px;
}

/* Editorial coda — a single ledger line tying the three together.
   Reads like the bottom edge of a coaster or member card from §10. */
.pillars-coda {
  margin: 32px 0 0;
  padding: 18px 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--smoke-light);
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 14px;
  text-align: center;
  max-width: none;
}
.pillars-coda .coda-sep {
  color: var(--smoke-light);
  opacity: 0.55;
}

/* Mobile composition: single column — pillars stack with the same internal ledger;
   the coda becomes a centered run-on line. */
@media (max-width: 800px) {
  .pillar { padding: 36px 28px 32px; }
  .pillar .pillar-no { margin-bottom: 22px; }
  .pillar .pillar-meta { padding-top: 22px; }
  .pillars-coda {
    margin-top: 24px;
    padding: 16px 4px 0;
    gap: 6px 12px;
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  /* At the smallest screens the coda's six segments bunch.
     Drop the separators and let line-wrap handle the tally as a soft inline list. */
  .pillars-coda .coda-sep { display: none; }
  .pillars-coda { gap: 4px 12px; }
}
/* === /EDITORIAL PILLARS === */

/* === VISIT TICKET ===
   The Visit block is treated as a printed object — a hairline-bordered
   ticket with "+" printer's marks at the four corners and an asterism
   stamp centered on the top edge. References §10's matchbook /
   business-card / coaster construction (flat type-only, no
   skeuomorphic textures). The interior 3-col content keeps its
   address/hours/phone DNA — only the wrapper and the hours treatment
   are new. Whiskey stays in :hover only — §05's one-accent budget. */
.visit-ticket {
  position: relative;
  border: 1px solid var(--rule-strong);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px) clamp(40px, 6vw, 56px);
  background: var(--espresso);
  margin: 0 auto;
}
.visit-ticket::before {
  /* Inner hairline — gives the impression of a die-cut edge. */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.visit-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: var(--smoke-light);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}
.visit-corner.tl { top: -9px;    left: -9px; }
.visit-corner.tr { top: -9px;    right: -9px; }
.visit-corner.bl { bottom: -9px; left: -9px; }
.visit-corner.br { bottom: -9px; right: -9px; }
.visit-stamp {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--espresso);
  padding: 0 14px;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  color: var(--smoke-light);
  font-variation-settings: "opsz" 36, "SOFT" 60;
  letter-spacing: 0.4em;
  user-select: none;
}
.visit-coords {
  /* Museum-card metadata: dry, specific, the §04 voice as texture.
     Sits above the address as a quiet line of mono coordinates. */
  margin: 0 0 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  text-align: center;
  user-select: none;
}

.visit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 5vw, 64px);
}
@media (max-width: 800px) {
  .visit-ticket { padding: 36px 24px 32px; }
  .visit { grid-template-columns: 1fr; gap: 28px; }
  .visit .col + .col { padding-top: 24px; border-top: 1px solid var(--rule); }
  .visit-stamp { font-size: 16px; padding: 0 10px; }
}
.visit .col .label { display: block; margin-bottom: 14px; }
.visit .col .v {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.4;
  font-variation-settings: "opsz" 60, "SOFT" 60;
}
address.v { font-style: italic; }
.visit .col .v small {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-light);
}
.visit .col .v small .walkin-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--smoke-light);
  margin-right: 4px;
  vertical-align: 1px;
}
.visit-link {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  transition: color var(--pour-fast) var(--ease-stir), border-color var(--pour-fast) var(--ease-stir);
}
.visit-link:hover { color: var(--whiskey); border-color: var(--whiskey); }
.visit-link:focus-visible {
  outline: 2px solid var(--whiskey);
  outline-offset: 4px;
}

/* Hours column — the Mon-Thu / Fri-Sat / Sun lines as a printed
   timetable. Days in mono, time in italic Fraunces, hairline rules
   between rows. Same DNA as §06's specimen-mono. */
.visit-hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visit-hours li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.visit-hours li:first-child { border-top: 0; padding-top: 0; }
.visit-hours li:last-child  { padding-bottom: 0; }
.visit-hours .day {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-light);
  font-weight: 500;
}
.visit-hours .time {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.2;
  font-variation-settings: "opsz" 60, "SOFT" 60;
  color: var(--bone);
  text-align: right;
}
/* Stack day above time on the narrowest screens — keeps the printed
   timetable readable when the column is shared with two others. */
@media (max-width: 480px) {
  .visit-hours li { grid-template-columns: 1fr; gap: 4px; }
  .visit-hours .time { text-align: left; }
}
/* === /VISIT TICKET === */

/* Info page intro — opens with a "filed" stamp (mono · year · tag),
   the same museum-card / portrait-file pattern from §03 portraits. */
.info-intro {
  padding: 96px 0 80px;
}
.info-intro .info-filed {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--smoke-light);
  margin: 0 0 8px;
  max-width: none;
}
.info-intro .info-filed .filed-no { color: var(--smoke-light); }
.info-intro .info-filed .filed-tag { color: var(--bone); }
.info-intro .info-filed .filed-sep {
  display: inline-block;
  color: var(--smoke-light);
  letter-spacing: 0;
}
.info-intro h1 {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
  margin-top: 24px;
  font-size: clamp(56px, 9vw, 132px);
}
.info-intro h1 em {
  font-style: normal;
  color: var(--whiskey);
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 300;
}
.info-intro .info-lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--bone);
  opacity: 0.85;
  max-width: 32em;
  margin-top: 28px;
}

/* Skip link — visually hidden until focused */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  padding: 8px 12px;
  background: var(--espresso);
  color: var(--bone);
  border: 1px solid var(--whiskey);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 999;
  transition: top var(--pour-fast) var(--ease-stir);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--whiskey);
  outline-offset: 2px;
}

/* Info section heads — narrower than main. Each head reads as a
   small printer's mark: the № numeral above a hairline, the title in
   italic Fraunces, the count tucked at the right. Same DNA as §02-§09
   numerals, scaled small for an interior page. */
.info-section { padding: 80px 0; }
.info-section .head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 6px;
  align-items: baseline;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-strong);
}
.info-section .head .head-no {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--smoke-light);
  display: inline-block;
}
.info-section .head h2 {
  grid-column: 1;
  grid-row: 2;
  font-style: italic;
  font-size: clamp(32px, 4vw, 48px);
  font-variation-settings: "opsz" 96, "SOFT" 80;
  margin: 0;
}
.info-section .head .count {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-light);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .info-section .head { grid-template-columns: 1fr; row-gap: 8px; }
  .info-section .head .count {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    margin-top: 4px;
  }
}

/* Featured event */
.featured-event {
  padding: 56px 56px 64px;
  background: var(--espresso-2);
  border: 1px solid var(--rule-strong);
  position: relative;
  overflow: hidden;
  margin-bottom: 48px;
}
.featured-event::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 80%; height: 160%;
  background: radial-gradient(closest-side, rgba(184, 96, 38, 0.20), transparent 70%);
  pointer-events: none;
}
.featured-event-inner { position: relative; z-index: 1; }
.featured-event .date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-2);
  margin-bottom: 18px;
  white-space: nowrap;
}
.featured-event .date .date-day,
.featured-event .date .date-time { white-space: nowrap; }
@media (max-width: 420px) {
  .featured-event .date { white-space: normal; }
  .featured-event .date .date-sep { display: none; }
  .featured-event .date .date-day,
  .featured-event .date .date-time { display: block; }
  .featured-event .date .date-time { margin-top: 6px; opacity: 0.85; }
}
.featured-event h3 {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 300;
  margin-bottom: 24px;
  font-size: clamp(36px, 5vw, 60px);
}
.featured-event h3 em { color: var(--whiskey); font-style: italic; }
.featured-event p {
  color: var(--bone);
  opacity: 0.85;
  font-size: 17px;
  line-height: 1.6;
  max-width: 34em;
}
@media (max-width: 720px) { .featured-event { padding: 36px 28px 40px; } }

/* Past events */
.event-archive {
  border-top: 1px solid var(--rule-strong);
}
.event-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: padding-left var(--pour-mid) var(--ease-stir), background var(--pour-fast) var(--ease-stir);
}
.event-row:hover { padding-left: 16px; }
.event-row:focus-visible {
  outline: 2px solid var(--whiskey);
  outline-offset: 3px;
}
.event-row .date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(239, 227, 205, 0.55);
  text-transform: uppercase;
}
.event-row .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  font-variation-settings: "opsz" 60, "SOFT" 60;
}
.event-row .arrow {
  font-family: var(--serif);
  font-style: italic;
  color: var(--smoke);
  transition: color var(--pour-fast) var(--ease-stir);
}
.event-row:hover .arrow { color: var(--bone-2); }
@media (max-width: 600px) {
  .event-row, .news-row { grid-template-columns: 1fr; gap: 6px; }
  .event-row .arrow { display: none; }
}
@media (max-width: 360px) {
  .event-row, .news-row { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
}

/* News */
.news-list { border-top: 1px solid var(--rule-strong); }
.news-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.news-row .date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(239, 227, 205, 0.55);
  text-transform: uppercase;
}
.news-row .headline {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}

/* FAQ */
.faq-list { border-top: 1px solid var(--rule-strong); }
.faq-row { border-bottom: 1px solid var(--rule); }
.faq-row summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 4vw, 22px);
  font-variation-settings: "opsz" 60, "SOFT" 60;
  /* Hover & open both press the type into focus — opsz climbs to display
     and SOFT drops out so the serifs sharpen. One beat, color + axes
     settle together. Reads as ink pressing harder, not a state change. */
  transition: color var(--pour-fast) var(--ease-stir),
              font-variation-settings var(--pour-fast) var(--ease-stir);
}
.faq-row summary:hover,
.faq-row[open] summary {
  font-variation-settings: "opsz" 144, "SOFT" 0;
}
.faq-row summary:focus-visible {
  outline: 2px solid var(--whiskey);
  outline-offset: 3px;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after {
  content: "+";
  font-family: var(--serif);
  font-style: normal;
  font-size: 24px;
  color: var(--smoke);
  transition: color var(--pour-fast) var(--ease-stir), transform var(--pour-mid) var(--ease-stir);
  flex: none;
}
.faq-row[open] summary { color: var(--whiskey); }
.faq-row[open] summary::after {
  content: "−";
  color: var(--whiskey);
}
.faq-answer {
  padding: 0 0 32px;
  max-width: 36em;
  color: var(--bone);
  opacity: 0.85;
  font-size: 16px;
  line-height: 1.65;
}
.faq-answer em { color: var(--whiskey); font-style: italic; }

/* === FOOTER === */
.site-footer {
  padding: 64px 0 56px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke-light);
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 48px;
}
.site-footer .brand-mark { color: var(--bone); align-self: center; }
.site-footer .brand-mark .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--bone);
}
.site-footer a {
  color: var(--bone);
  text-decoration: none;
  transition: color var(--pour-fast) var(--ease-stir), border-color var(--pour-fast) var(--ease-stir);
}
.site-footer a:hover { color: var(--whiskey); }
.site-footer a:focus-visible {
  outline: 2px solid var(--whiskey);
  outline-offset: 3px;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.footer-contact address {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-light);
}
.footer-contact address a {
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
}
.footer-contact .hours {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-light);
  margin: 0;
}
.footer-contact .hours .hours-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--smoke-light);
  margin-right: 6px;
  vertical-align: 1px;
  text-transform: none;
}
.footer-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke-light);
  border-bottom: 1px solid var(--rule-strong);
}
.footer-tel:hover { color: var(--whiskey); border-color: var(--whiskey); }
.footer-contact .social {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-light);
  margin: 0;
}
.footer-contact .social a {
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
}
/* === COLOPHON ===
   The footer's closing voice. Two stacked lines — Est. stamp + a true
   colophon, the kind you find on the last page of a book naming the
   typefaces. Italic Fraunces Tier 5, smoke-light, generously spaced.
   Tiny but rewarding to find. The asterism (✻) appears here as the
   brand's quiet closing mark — used once, never crowded. */
.footer-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  align-self: center;
  text-align: right;
}
.site-footer .end {
  font-size: 11px;
  letter-spacing: 0.18em;
  margin: 0;
  color: var(--smoke-light);
}
/* Star demoted from whiskey to smoke-light — the H1 .num is the page's
   sole whiskey accent. Closing mark stays italic Fraunces, just calmer. */
.site-footer .end .star {
  color: var(--smoke-light);
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0;
  font-size: 14px;
  margin-left: 10px;
}
.site-footer .colophon {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--smoke-light);
  text-transform: none;
  font-variation-settings: "opsz" 14, "SOFT" 50, "wght" 400;
  margin: 0;
  max-width: 36em;
}
.site-footer .colophon em {
  font-style: italic;
  color: var(--bone-2);
}
@media (max-width: 720px) {
  .site-footer { padding: 48px 0 40px; }
  .site-footer .wrap {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 24px;
  }
  .footer-end {
    align-items: flex-start;
    text-align: left;
  }
  .site-footer .end { text-align: left; }
}
/* === /COLOPHON === */

/* Page entrance — single "lights coming up" pour. §07 rule of one: one motion, one direction.
   Animates the hero-inner parent once; children inherit the reveal without stagger. */
@keyframes pour {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-inner,
.info-intro {
  animation: pour var(--pour-slow) var(--ease-stir) backwards;
}

/* Scroll-triggered reveal — one motion per element, no stagger */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--pour-slow) var(--ease-stir), transform var(--pour-slow) var(--ease-stir);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slow-pour reveal: section h2s rise into view from a clipped baseline,
   like dark liquid filling a glass. One beat per heading, paced to
   --pour-slow + --ease-stir. */
.section-head h2,
.info-section .head h2 {
  clip-path: inset(105% 0 0 0);
  transition: clip-path var(--pour-slow) var(--ease-stir);
}
.section-head.fade-in.visible h2,
.info-section .head.fade-in.visible h2 {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .fade-in { opacity: 1; transform: none; }
  /* Reset the slow-pour clip mask so headings are visible without motion. */
  .section-head h2,
  .info-section .head h2 { clip-path: none; }
}

/* === MOBILE NAV === */
/* Hamburger button — 44x44 tap area, mono triple-bar glyph, right-aligned. */
.menu-toggle {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px 0; /* offset so 44px button doesn't grow header height */
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--bone);
  cursor: pointer;
  flex: none;
  z-index: 210;
  transition: color var(--pour-fast) var(--ease-stir),
              border-color var(--pour-fast) var(--ease-stir);
}
.menu-toggle:hover,
.menu-toggle:focus-visible,
.menu-toggle[aria-expanded="true"] {
  color: var(--whiskey);
  border-color: var(--whiskey);
  outline: none;
}
.menu-toggle-glyph {
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  display: block;
}

/* Mobile menu — full-screen overlay above grain layer (grain is z:100). */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--espresso);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pour-mid) var(--ease-stir);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu[data-open] {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-panel {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 96px 24px 40px;
  max-width: 560px;
  margin: 0 auto;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-strong);
}
.mobile-menu-nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 6vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 60, "SOFT" 60;
  color: var(--bone);
  transition: color var(--pour-fast) var(--ease-stir),
              padding-left var(--pour-mid) var(--ease-stir);
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible,
.mobile-menu-nav a.active {
  color: var(--whiskey);
  padding-left: 8px;
  outline: none;
}

.mobile-menu-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-strong);
}
.menu-tel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color var(--pour-fast) var(--ease-stir);
}
.menu-tel:hover,
.menu-tel:focus-visible {
  color: var(--whiskey);
  outline: none;
}
.menu-addr {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
}

@media (min-width: 721px) {
  .mobile-menu { display: none !important; }
}