/* ============================================================================
   the-pub — site.css
   Load order: kit/tokens.css → kit/kit.css → this file.
   The CELLAR mood: a named token set earned from the Chrysalis barrel room
   (BUILD-BRIEF.md — chosen identity, not documentary record). Honest source
   names are defined first; the shared kit slots are ALIASED onto them
   (CONVENTIONS §1 alias mechanism — first use). Measured contrast ratios are
   recorded in CLAUDE.md; ember is a mark, never text.
   ========================================================================== */

:root {
  /* ── honest source names (the cellar's own vocabulary) ─────────────────── */
  --cellar:    #131009;   /* barrel-room darkness                     */
  --cellar-2:  #1C1510;   /* lifted panel                             */
  --cream:     #EDE4D0;   /* string-light warm white — 15.0:1 on cellar */
  --ember:     #B34A22;   /* barrel char / red ale — 3.5:1, marks only */
  --leather:   #7A4A2E;   /* the cellar chairs — decorative only      */
  --barrel:    #B98A3D;   /* oak-honey barrel heads — 6.1:1 on cellar */
  --straw:     #D9B96A;   /* pilsner gold — 10.0:1, the label voice   */
  --hop:       #8CB944;   /* logo green, tamed — 8.3:1, measured OK   */
  --bine:      #5C6E3D;   /* dark hop vine — decorative only          */
  --lamborn:   #5E7A8C;   /* the mountain's winter slate — 4.2:1      */
  --lamborn-2: #8CA7B8;   /* lightened for link/focus text — 7.5:1    */
}

[data-mood="cellar"] {
  /* grounds ↔ ink */
  --paper:     var(--cellar);
  --paper-2:   var(--cellar-2);
  --ink:       var(--cream);
  --ink-soft:  rgba(237, 228, 208, 0.72);
  --ink-faint: rgba(237, 228, 208, 0.55);
  --rule:      rgba(237, 228, 208, 0.14);

  /* shared slots filled from the cellar sources (§1 alias mechanism) */
  --rust:      var(--ember);
  --terra:     var(--leather);
  --ochre:     var(--barrel);
  --wheat:     var(--straw);
  --olive:     var(--hop);
  --sage:      var(--bine);
  --slate:     var(--lamborn);
  --cool:      var(--lamborn);

  /* semantic roles */
  --accent:    var(--ember);
  --link:      var(--lamborn-2);
  --focus:     var(--lamborn-2);

  /* type — Fraunces holds the short display headings; Newsreader carries body
     + the longer italic reading (pull quotes) where Fraunces italic got mushy.
     (BUILD-BRIEF §2: display face candidate 1; reading face added on Ben's note.) */
  --serif:   "Newsreader", "Iowan Old Style", Georgia, serif;
  --display: "Fraunces", "Newsreader", Georgia, serif;
  --label:   "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  /* glass on dark ground */
  --glass-bg:     rgba(19, 16, 9, 0.74);
  --glass-border: rgba(237, 228, 208, 0.18);

  /* shadows go deeper in the cellar, still warm */
  --shadow-lg: 0 18px 36px rgba(4, 2, 0, 0.5), 0 2px 6px rgba(4, 2, 0, 0.35);
}

/* ── base ──────────────────────────────────────────────────────────────── */
body {
  font-size: 17px;
  line-height: 1.65;
  font-optical-sizing: auto;
}

/* label voice: Barlow Condensed wants a touch more size than Cagliostro */
.eyebrow, .label {
  font-size: 16px;
  font-weight: 500;
  color: var(--straw);            /* 10.0:1 — clears the §8 label budget    */
}

/* section openers (kit menu, CONVENTIONS §2): bare straw eyebrow where the
   heading doesn't say what the section is; .title-rule where it does. The
   eyebrow + geo-line combo was retired 2026-07-02 (Ben: no underline) — under
   the opener menu that's now a recorded choice, not a deviation. */

h1, h2, h3 { font-family: var(--display); font-weight: 550; line-height: 1.08; margin: 0; }

/* ghost button on dark ground: cream text (15:1), ember border as the mark */
.btn {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ember) 55%, transparent);
}
.btn:hover, .btn:focus-visible {
  color: var(--straw);
  border-color: var(--ember);
}

a.text-link {
  color: var(--link);
  border-bottom: 1px solid color-mix(in srgb, var(--link) 40%, transparent);
  transition: border-color var(--dur) var(--ease);
}
a.text-link:hover { border-bottom-color: var(--link); }

/* ── skip link — the first focusable thing on the page (WCAG 2.4.1) ──────
   Off-canvas until focused, then lands top-left as a solid chip clear of the
   floating nav pill. Its target (#main) carries tabindex="-1" so focus really
   moves; the target's focus ring is deliberately NOT suppressed (a11y cardinal
   rule 3 — replace an indicator, never delete one), and it usefully confirms
   where focus landed. No sibling site ships a skip link yet — candidate
   PROMOTE to kit/kit.css. */
.skip-link {
  position: fixed;
  left: var(--sp-4);
  top: -6rem;
  z-index: 200;
  padding: 12px 20px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--focus);
  border-radius: var(--radius-md);
  font-family: var(--label);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ── nav — floating pill, top-right (proven cinematic pattern, §4.1) ────── */
.pub-nav {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
}
.pub-nav .nav-brand {
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 19px;
  color: var(--straw);
  padding-right: var(--sp-3);
  border-right: 1px solid var(--rule);
}
.nav-links { display: flex; gap: var(--sp-4); align-items: center; }
.nav-links a {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 18px;
  color: var(--ink-soft);
  padding: var(--sp-1) var(--sp-1);
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] {
  color: var(--straw);
  border-bottom: 2px solid var(--ember);
}
.nav-toggle {
  display: none;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 18px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
}

@media (max-width: 820px) {
  .pub-nav { flex-wrap: wrap; max-width: calc(100vw - 2 * var(--sp-4)); }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-1) var(--sp-2);
  }
  .pub-nav.is-open { border-radius: var(--radius-lg); }
  .pub-nav.is-open .nav-links { display: flex; }
}

/* ── hero — the barrel room, feathered into the ground (the design) ─────── */
.hero {
  position: relative;
  min-height: 94vh;
  max-width: min(1520px, 100%);  /* the photo row breaks the measure — the room needs it */
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 12fr);
  align-items: center;
  gap: var(--sp-6);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-7);
}
.hero-title .eyebrow { display: block; margin-bottom: var(--sp-3); }
.hero-title h1 {
  font-size: clamp(52px, 8.5vw, 108px);
  letter-spacing: -0.02em;
  font-weight: 600;
}
.hero-title .hero-sub {
  margin: var(--sp-4) 0 0;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--ink-soft);
  font-style: italic;
  max-width: 26em;
}
.hero-photo { position: relative; }
.hero-photo img { width: 100%; height: auto; border-radius: var(--radius-md); }
/* the feather: the photo's own near-black edges dissolve into --cellar so
   the room seems to continue past the frame (BUILD-BRIEF — this IS the design) */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(115% 115% at 50% 42%, transparent 52%, var(--cellar) 97%),
    linear-gradient(to top, var(--cellar) 0%, transparent 16%),
    linear-gradient(to right, var(--cellar) 0%, transparent 10%);
  pointer-events: none;
}
.hero-scroll-hint {
  position: absolute;
  bottom: var(--sp-5);
  left: 0;
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--sp-5);
    padding-top: calc(var(--sp-8) + var(--sp-6));
  }
  .hero-photo { order: 2; }
}

/* ── sections ──────────────────────────────────────────────────────────── */
.band { padding: clamp(44px, 8vh, 100px) 0; }
.band--lifted { background: var(--paper-2); }

.section-open { margin-bottom: var(--sp-6); }
.section-open .eyebrow { display: block; margin-bottom: var(--sp-3); }
.section-open h2 { font-size: clamp(32px, 4.5vw, 54px); letter-spacing: -0.01em; }
.section-open .section-note { color: var(--ink-soft); max-width: 38em; margin: var(--sp-4) 0 0; }

/* rail + prose asymmetry (§3 — no uniform card grids) */
.rail-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 820px) { .rail-split { grid-template-columns: 1fr; } }

/* mission — photo | quote, so the slogan's "community" has real faces beside it */
.mission-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-7);
  align-items: center;
}
.mission-photo { margin: 0; position: relative; }
.mission-photo img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  object-position: center 28%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.mission-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(to top, rgba(19, 16, 9, 0.5) 0%, transparent 42%);
  pointer-events: none;
}
.mission-split .eyebrow { display: block; margin-bottom: var(--sp-4); }
@media (max-width: 820px) {
  .mission-split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .mission-photo img { max-height: 320px; }
  .mission-photo { order: 2; }
}

/* mission pull-quote — reading serif italic (Fraunces italic got mushy at length) */
.mission {
  font-family: var(--serif);
  font-size: clamp(23px, 3vw, 34px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  max-width: 24em;
  margin: 0;
  quotes: "\201C" "\201D";
}
.mission::before {
  content: open-quote;
  color: var(--ember);
  margin-right: 0.08em;
}
/* makers row (the two labels) */
.makers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.makers figure { margin: 0; }
.makers img { height: 92px; width: auto; margin-bottom: var(--sp-4); }
.makers figcaption { color: var(--ink-soft); font-size: 16px; max-width: 24em; }
.makers figcaption strong { color: var(--ink); font-weight: 550; display: block; margin-bottom: var(--sp-1); }
@media (max-width: 820px) { .makers { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ── beer list ─────────────────────────────────────────────────────────── */
.tap-brand + .tap-brand { margin-top: var(--sp-7); }
.tap-brand-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.tap-brand-head :is(h2, h3) { font-size: clamp(24px, 3vw, 34px); }
.tap-brand-head .label { color: var(--ink-soft); }   /* 8.12:1 — was --ink-faint at 5.17:1, under the §8 6:1 label budget */
ul.tap-list { list-style: none; margin: 0; padding: 0; }
.tap-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
.tap-list .beer-name {
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 520;
  flex: 0 1 auto;
}
.tap-list .beer-dots {
  flex: 1 1 0;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-5px);
  min-width: var(--sp-6);
}
.tap-list .beer-style {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 15px;
  color: var(--straw);
  text-align: right;
  white-space: nowrap;
}

/* The one-line entry (name · dots · style/abv/price) is the desktop design, but
   nowrap made the longest labels overflow the viewport on a phone — 33px of
   horizontal scroll at 375px, which fails the §12 ≤820px test. Below the narrow
   breakpoint the row stacks instead: name on top, label beneath, leader dropped. */
@media (max-width: 560px) {
  .tap-list li { flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
  .tap-list .beer-dots { display: none; }
  .tap-list .beer-style {
    white-space: normal;
    text-align: left;
    flex: 1 1 100%;
  }
}

/* ── vendors ───────────────────────────────────────────────────────────── */
.vendor-list { margin: 0; padding: 0; list-style: none; }
.vendor-list li {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
.vendor-list .vendor-name {
  font-family: var(--display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 520;
}
.vendor-list .vendor-cuisine { color: var(--ink-soft); margin-top: var(--sp-1); font-size: 16px; }
.vendor-list .vendor-side { text-align: right; }
.vendor-list .vendor-schedule {
  display: block;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 15px;
  color: var(--straw);
}
.vendor-list .vendor-menu-link { font-size: 15px; }
@media (max-width: 820px) {
  .vendor-list li { grid-template-columns: 1fr; }
  .vendor-list .vendor-side { text-align: left; }
}

/* ── events ────────────────────────────────────────────────────────────── */
.event-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-6);
  align-items: center;
}
.event-feature .event-poster { position: relative; }
.event-feature .event-poster img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.event-feature h3 { font-size: clamp(28px, 4vw, 46px); }
.event-when {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 16px;
  color: var(--straw);
  display: block;
  margin: var(--sp-3) 0;
}
.event-vendor { color: var(--ink-soft); font-style: italic; }
@media (max-width: 820px) { .event-feature { grid-template-columns: 1fr; } }

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-grid img { border-radius: var(--radius-md); }
.event-grid .event-title { font-family: var(--display); font-size: 19px; font-weight: 520; margin-top: var(--sp-3); }
.event-grid .event-date {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  color: var(--ink-soft);      /* 8.12:1 — see the note on .tap-brand-head .label */
  display: block;
  margin-top: var(--sp-1);
}
.events-empty { color: var(--ink-soft); font-style: italic; }

/* ── visit ─────────────────────────────────────────────────────────────── */
.hours-table { border-collapse: collapse; }
.hours-table td {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--rule);
}
.hours-table td:first-child {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 15px;
  color: var(--straw);
  padding-right: var(--sp-6);
}
/* contact routes render as icon links — number/address live in aria-label/title */
.contact-icons { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-link:hover, .icon-link:focus-visible {
  color: var(--straw);
  border-color: color-mix(in srgb, var(--ember) 70%, transparent);
}
.icon-link svg { display: block; }

.visit-photo { position: relative; }
.visit-photo img { border-radius: var(--radius-md); }
.visit-photo::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(120% 120% at 50% 45%, transparent 58%, var(--cellar) 99%);
  pointer-events: none;
}

/* ── footer ────────────────────────────────────────────────────────────── */
.pub-footer {
  border-top: 1px solid var(--rule);
  padding: var(--sp-7) 0 var(--sp-6);
  margin-top: var(--sp-8);
}
.pub-footer .footer-slogan {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 16px;
  color: var(--barrel);
  margin-bottom: var(--sp-5);
}
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: var(--sp-6);
  color: var(--ink-soft);
  font-size: 16px;
}
.footer-cols a { overflow-wrap: anywhere; }
.footer-cols .label { display: block; margin-bottom: var(--sp-2); }
.pub-footer a { color: var(--link); }
.pub-footer .footer-fine {
  margin-top: var(--sp-6);
  color: var(--ink-soft);      /* 8.12:1 — see the note on .tap-brand-head .label */
  font-size: 14px;
}


/* ── prose column — the accessibility statement, and any future text page ──
   Body copy runs --ink-soft (measured 8.12:1 on cellar, 7.83:1 on cellar-2),
   which clears the §8 body budget of 7:1. */
.prose { max-width: 42em; }
.prose p { color: var(--ink-soft); margin: var(--sp-4) 0 0; }
.prose p:first-of-type { margin-top: 0; }
.a11y-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.a11y-list li {
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
  padding: 0 0 0 var(--sp-5);
  border-left: 1px solid var(--rule);
}
.a11y-list strong { color: var(--ink); font-weight: 600; }
.a11y-reviewed {
  font-family: var(--label);
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: var(--sp-6) !important;
}

/* footer nav — full nav + the accessibility statement (launch mechanics §8) */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-family: var(--label);
  font-size: 17px;
}
.footer-nav a { color: var(--link); }

@media (max-width: 820px) { .footer-cols { grid-template-columns: 1fr; } }

/* ── page heads (subpages) ─────────────────────────────────────────────── */
.page-head { padding-top: calc(var(--sp-8) + var(--sp-7)); }