/* Old Towne Pub
   Vanilla CSS, no build step. Mobile first.
   Motion rule: nothing is hidden waiting on script. Load animations are
   time based and additive; the page is complete and readable with CSS
   animation and JavaScript both switched off. */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ---------- fonts ---------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("/fonts/Bebas_Neue-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/fonts/Libre_Baskerville-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/fonts/Libre_Baskerville-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- base ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.72;
  min-height: 100dvh;
  /* room for the fixed call bar and the concept bar on small screens */
  padding-bottom: 0;
}
@media (max-width: 767px) {
  body { padding-bottom: 5.5rem; }
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { text-wrap: pretty; }
p + p { margin-top: var(--sp-3); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-7); }
.section-tight { padding-block: var(--sp-6); }
.lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink-muted); max-width: 60ch; }
.measure { max-width: 62ch; }

.kicker {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: var(--sp-2);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-ui); font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7em 1.5em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
              transform 120ms var(--ease), color 180ms var(--ease);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--field-border); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brass); background: rgba(201, 162, 94, 0.1); }
.btn:active { transform: translateY(1px); }

.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-ui); font-weight: 600;
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); text-decoration: none;
  border-bottom: 2px solid var(--hairline-strong);
  padding-bottom: 2px;
  transition: border-color 180ms var(--ease);
}
.textlink:hover { border-bottom-color: var(--accent-ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-height: 64px;
  padding-block: 0.5rem;
}
@media (min-width: 768px) { .header-inner { min-height: 72px; } }

/* The badge leads, the words follow. The brass rules that used to box the
   wordmark are gone: with the seal present they were a third ornament doing
   the same job, and the lockup was busier for it. */
.wordmark {
  display: inline-flex; align-items: center;
  gap: clamp(0.5rem, 1.4vw, 0.8rem);
  text-decoration: none; line-height: 1;
}
.wordmark-seal {
  width: clamp(38px, 4.6vw, 50px);
  height: auto; flex: none;
  transition: transform 260ms var(--ease);
}
.wordmark:hover .wordmark-seal { transform: rotate(-6deg); }
.wordmark-text { display: inline-flex; flex-direction: column; min-width: 0; }
.wordmark-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  letter-spacing: 0.05em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark-place {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-ink);
  margin-top: 0.32em;
  white-space: nowrap;
}
@media (max-width: 400px) {
  /* the smallest phones need the room for the phone and menu buttons */
  .wordmark-place { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wordmark:hover .wordmark-seal { transform: none; } }

.nav-list {
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem);
  margin: 0; padding: 0; list-style: none;
}
.nav-list a {
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  padding-block: 0.35em;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.nav-list a:hover { border-bottom-color: var(--accent); }
.nav-list a[aria-current="page"] { border-bottom-color: var(--brass); color: var(--brass-ink); }

.header-phone {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display);
  font-size: 1.2rem; letter-spacing: 0.05em;
  text-decoration: none; color: var(--ink);
  min-height: 44px;
  border-bottom: 2px solid var(--accent);
  transition: color 160ms var(--ease);
}
.header-phone:hover { color: var(--accent-ink); }
.header-phone .icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-0);
  color: var(--ink);
}
.nav-toggle .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 900px) {
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) var(--gutter) var(--sp-4); }
  .nav-list a { display: block; padding-block: 0.85em; font-size: 1.4rem; border-bottom: 1px solid var(--hairline); }
  .header-phone .phone-text { display: none; }
  .header-phone { border-bottom: 0; width: 46px; height: 46px; justify-content: center; border: 1px solid var(--field-border); }
  .header-phone .icon { width: 20px; height: 20px; }
}
@media (min-width: 901px) { .nav-toggle { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--bg-sunken); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
/* The OTP seal on the wall sits in the upper-left third of this photo
   (measured: x 4.8%-36.1%, y 7.4%-35.5% of the source frame). object-position
   is tuned per breakpoint so the seal stays whole and out of the darkest
   scrim instead of being cropped or buried. See _build/_crop-preview.mjs. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 18%; }
@media (max-width: 919px) {
  /* Below ~920px the hero container's aspect ratio is taller than the photo's
     1.5:1, so cover scales to fill the HEIGHT and crops left/right instead of
     top/bottom (phones AND portrait tablets both land in this regime, not
     just phones). The seal sits left-of-center, so it needs a low X here or
     it gets cut off; the desktop rule's 22% only clears once the container
     is wide enough to crop top/bottom instead. */
  .hero-media img { object-position: 6% 22%; }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(8, 5, 4, 0.62) 0%, rgba(8, 5, 4, 0.5) 46%, rgba(8, 5, 4, 0.34) 100%),
    linear-gradient(to top, var(--scrim-bottom) 0%, rgba(10, 7, 5, 0.72) 34%, rgba(10, 7, 5, 0.36) 64%, var(--scrim-top) 100%);
}
.hero-inner {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(86dvh, 720px);
  padding-block: var(--sp-6) var(--sp-6);
}
@media (max-width: 767px) {
  /* keep the hero buttons clear of the fixed call bar */
  .hero-inner { padding-bottom: calc(var(--sp-6) + 4.75rem); }
}
@media (min-width: 768px) {
  .hero-inner { min-height: min(80dvh, 760px); padding-block: var(--sp-7) var(--sp-6); }
}
/* The hero sits on a photographic plate, so its type is always the cream
   scale regardless of theme. Contrast is measured against the real image. */
.hero-inner, .hero-inner .kicker { color: #f4ecdc; }
.hero-inner .kicker { color: #e8c88c; }
.hero-title {
  /* sized so the pub's own slogan lands on two lines at desktop and still
     leaves the buttons above the fold on a 390x844 phone */
  max-width: 30ch;
  font-size: clamp(2.35rem, 1.2rem + 4.1vw, 5.2rem);
  color: #fff;
}
.hero-copy { margin-top: var(--sp-3); max-width: 46ch; color: #efe6d5; font-size: var(--step-1); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero .btn-ghost { border-color: rgba(244, 236, 220, 0.66); color: #f4ecdc; }
.hero .btn-ghost:hover { border-color: #f4ecdc; background: rgba(244, 236, 220, 0.14); }

/* ---------- identity strip, as a ticker ----------
   One marquee on the page and no more. The scrolling track is aria-hidden and
   purely decorative; the same information sits statically in the accessibility
   tree just above it, so nothing that a screen reader reads is in motion. It
   pauses on hover and on keyboard focus, and it does not run at all under
   prefers-reduced-motion. */
.strip {
  position: relative;
  background: var(--accent);
  color: var(--on-accent);
  overflow: clip;              /* crops the track without making a scroll container */
  border-block: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -8px 18px rgba(0, 0, 0, 0.16);
}

.ticker {
  /* text emerges and dissolves at the edges instead of hard cutting */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ticker-set {
  display: flex; align-items: center;
  flex: none;
  padding-block: var(--sp-3);
}
.ticker-set > span {
  display: inline-flex; align-items: center; gap: 0.9em;
  padding-inline: 0.9em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-seal {
  width: 1.55em; height: auto; flex: none;
  opacity: 0.92;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ticker-run {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }   /* two identical sets, so 50% is seamless */
  }
  .ticker-track { animation: ticker-run 64s linear infinite; }
  .strip:hover .ticker-track,
  .strip:focus-within .ticker-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  /* nothing is moving, so a fade on the leading edge just looks like a bug.
     Keep the trailing fade, which correctly signals there is more off screen. */
  .ticker {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
  }
  .ticker-set > span:first-child { padding-inline-start: 0; }
}
@media (max-width: 700px) {
  /* shorter viewport travel, so run it proportionally faster or it crawls */
  @media (prefers-reduced-motion: no-preference) {
    .ticker-track { animation-duration: 42s; }
  }
  .ticker-set > span { font-size: var(--step-0); }
  .ticker-seal { width: 1.4em; }
}

/* ---------- section heads ---------- */
.section-head { margin-bottom: var(--sp-5); }
.section-head h2 { color: var(--ink); }
.section-head .lede { margin-top: var(--sp-3); }

.rule-brass { border: 0; border-top: 2px solid var(--brass); width: 64px; margin: 0 0 var(--sp-3); }

/* ---------- bill of fare (menu lists) ---------- */
.fare { list-style: none; margin: 0; padding: 0; }
.fare > li { padding-block: var(--sp-3); border-bottom: 1px solid var(--hairline); }
.fare > li:first-child { border-top: 1px solid var(--hairline); }
.fare-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
}
.fare-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.fare-price {
  font-family: var(--font-ui); font-weight: 600;
  font-size: var(--step-0);
  color: var(--brass-ink);
  white-space: nowrap;
}
.fare-desc { margin-top: 0.35em; color: var(--ink-muted); font-size: var(--step--1); line-height: 1.6; }

/* ---------- favorites: asymmetric split with one angled seam ---------- */
.favorites-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .favorites-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); }
}
.seam-pair { display: grid; gap: 0; }
.seam-pair img { width: 100%; height: 100%; object-fit: cover; }
.seam-a { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.seam-b { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); margin-top: -3%; }
.seam-pair figure { margin: 0; }
.seam-pair .seam-a img { aspect-ratio: 4 / 3; }
.seam-pair .seam-b img { aspect-ratio: 3 / 2; }

/* ---------- board (what is on this week) ---------- */
.board { background: var(--bg-sunken); border-block: 1px solid var(--hairline); }
.board-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .board-grid { grid-template-columns: 1fr 0.72fr; gap: var(--sp-6); } }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list > li {
  display: grid; gap: 0.1rem var(--sp-4);
  grid-template-columns: 1fr;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
}
.board-list > li:first-child { border-top: 1px solid var(--hairline); }
@media (min-width: 560px) {
  .board-list > li { grid-template-columns: 8.5rem 1fr; align-items: baseline; }
}
.board-day {
  font-family: var(--font-display); font-size: var(--step-2);
  letter-spacing: 0.06em; color: var(--accent-ink);
}
.board-what { font-family: var(--font-display); font-size: var(--step-2); letter-spacing: 0.03em; color: var(--ink); }
.board-detail { grid-column: 1 / -1; color: var(--ink-muted); font-size: var(--step--1); }
@media (min-width: 560px) { .board-detail { grid-column: 2; } }
.board-photo { margin: 0; }
.board-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.board-photo figcaption { margin-top: var(--sp-2); font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }

/* ---------- heritage band ---------- */
.heritage { position: relative; isolation: isolate; background: var(--bg-sunken); }
.heritage-media { position: absolute; inset: 0; z-index: -2; }
.heritage-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.heritage::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(10, 7, 5, 0.95) 0%, rgba(10, 7, 5, 0.88) 46%, rgba(10, 7, 5, 0.6) 100%);
}
.heritage-inner { padding-block: var(--sp-7); max-width: 56ch; color: #f4ecdc; }
.heritage-inner h2 { color: #fff; }
.heritage-inner p { color: #e6dccb; }
.heritage-inner .kicker { color: #e8c88c; }
.heritage-inner .textlink { color: #f7a382; }

/* ---------- gallery mosaic ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 760px) { .mosaic { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } }
.mosaic figure { margin: 0; position: relative; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
@media (min-width: 760px) {
  .mosaic .tall { grid-row: span 2; }
  .mosaic .tall img { aspect-ratio: 1 / 2.06; }
  .mosaic .wide { grid-column: span 2; }
  .mosaic .wide img { aspect-ratio: 2.06 / 1; }
}

/* ---------- reviews ---------- */
.reviews { background: var(--bg-raised); border-block: 1px solid var(--hairline); }

.quote-lead { margin: 0 0 var(--sp-5); max-width: 30ch; }
.quote-lead blockquote { margin: 0; }
.quote-lead blockquote p {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 900px) { .quote-lead { max-width: 34ch; } }

.quote-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 820px) { .quote-row { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
.quote-row figure { margin: 0; padding-top: var(--sp-3); border-top: 2px solid var(--brass); }
.quote-row blockquote { margin: 0; }
.quote-row blockquote p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
}

.reviews figcaption {
  margin-top: var(--sp-2);
  font-family: var(--font-ui); font-weight: 600;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
}
.reviews figcaption span {
  display: block; margin-top: 0.2rem;
  font-weight: 400; letter-spacing: 0.14em; color: var(--ink-faint);
}

.rating-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-block: var(--sp-5) var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--hairline);
}
.rating {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  text-decoration: none; flex-wrap: wrap;
}
.rating-figure {
  font-family: var(--font-display); font-size: var(--step-1);
  letter-spacing: 0.04em; color: var(--ink);
}
.rating-src {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.rating:hover .rating-src { border-bottom-color: currentColor; }
.disclaimer { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }

/* ---------- visit ---------- */
.visit-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .visit-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.panel { background: var(--bg-raised); border: 1px solid var(--hairline); padding: var(--sp-4); }
.panel h2, .panel h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); color: var(--ink); }
.address { font-style: normal; font-size: var(--step-1); line-height: 1.7; }
.address a { text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }

.hours { width: 100%; border-collapse: collapse; font-family: var(--font-ui); }
.hours caption { text-align: left; margin-bottom: var(--sp-2); font-size: var(--step--1); color: var(--ink-faint); }
.hours th, .hours td { text-align: left; padding: 0.62rem 0; border-bottom: 1px solid var(--hairline); font-weight: 400; }
.hours th { font-weight: 600; color: var(--ink); width: 11rem; }
.hours td { color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr[data-today] th, .hours tr[data-today] td { color: var(--brass-ink); }
.hours tr[data-today] th::after {
  content: " (today)";
  font-weight: 400; font-size: 0.82em; color: var(--brass-ink);
}
.hours .short { color: var(--accent-ink); }
.hours .closed {
  color: var(--accent-ink);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-3);
  min-height: 48px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display); font-size: 1.5em; line-height: 1;
  color: var(--accent-ink); flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding-bottom: var(--sp-3); color: var(--ink-muted); max-width: 62ch; }

/* ---------- forms ---------- */
.field { display: grid; gap: 0.4rem; margin-bottom: var(--sp-3); }
.field label { font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; }
.field input, .field textarea {
  width: 100%;
  background: var(--field-bg);
  color: var(--ink);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-0);
  padding: 0.75rem 0.85rem;
  font-family: var(--font-ui);
  min-height: 48px;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.field-help { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }
.form-note { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); margin-top: var(--sp-3); }
.form-status {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--field-border);
  background: var(--bg-raised);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.form-status:empty { display: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-sunken); border-top: 2px solid var(--accent); padding-block: var(--sp-6) var(--sp-5); }
.footer-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: auto 1fr auto; gap: var(--sp-6); align-items: start; } }
.footer-seal { width: 104px; height: auto; }
.footer-head { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.1em; color: var(--brass-ink); margin-bottom: var(--sp-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-family: var(--font-ui); font-size: var(--step--1); }
.footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.footer-links a:hover { border-bottom-color: var(--brass); }
.footer-legal { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }
.footer-legal a { color: var(--ink-muted); }
.footer-legal p + p { margin-top: var(--sp-2); }

/* ---------- sticky call bar (mobile) ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none;
  background: var(--accent);
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 56px;
  color: var(--on-accent);
  font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.08em;
  text-decoration: none;
}
.callbar .icon { width: 1.05em; height: 1.05em; fill: currentColor; }
@media (max-width: 767px) { .callbar { display: block; } }

/* ---------- the seal ----------
   One badge, three finishes. Red is the primary mark and stays in the footer.
   Brass is the premium finish and is spent on exactly one moment per page.
   Cream only ever sits on top of a photograph or as a faint watermark.
   Nothing here redraws the artwork; every asset is derived from their own file. */

/* Blind deboss. Oversized, cropped by the section edge, so it reads as an
   impression in the paper rather than a logo placed on the page. */
.sealmark {
  position: relative; isolation: isolate;
  /* the badge is meant to run off the edge of the section, so crop it there.
     clip rather than hidden: it makes no scroll container and leaves any
     sticky positioning alone. */
  overflow: clip;
}
.sealmark::before {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  right: -9%; top: 50%; transform: translateY(-50%);
  width: min(340px, 46vw); aspect-ratio: 600 / 636;
  background: url("/images/optimized/seal-cream-420.webp") center / contain no-repeat;
  opacity: 0.1;
}
@media (max-width: 700px) {
  /* on a phone there is no margin to bleed into, so it sits behind the copy
     and drops further back rather than competing with it */
  .sealmark::before { right: -22%; width: 62vw; opacity: 0.06; }
}
@media (prefers-color-scheme: light) {
  /* cream on cream paper is invisible, so the light theme takes the red
     impression instead, which is what a real watermark looks like on stock */
  .sealmark::before {
    background-image: url("/images/optimized/seal-red-420.webp");
    opacity: 0.085;
  }
  @media (max-width: 700px) { .sealmark::before { opacity: 0.055; } }
}

/* The badge on a rule, the way a seal closes a document. Used once per page. */
.rule-seal {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; margin: 0 0 var(--sp-4);
}
.rule-seal::before, .rule-seal::after {
  content: ""; height: 2px; flex: 1; background: var(--brass); opacity: 0.5;
}
.rule-seal img { width: 74px; height: auto; flex: none; }

/* The one brass moment. Lands slightly oversized and settles, like a stamp
   being pressed. Time based and one shot, so nothing is ever hidden by it. */
.seal-press { display: block; margin-inline: auto; width: clamp(150px, 26vw, 220px); height: auto; }
@media (prefers-reduced-motion: no-preference) {
  /* transform only, never opacity: if the script never runs, or the animation
     stalls, the badge is still fully visible at its natural size */
  @keyframes seal-press {
    0%   { transform: scale(1.12) rotate(-3.5deg); }
    60%  { transform: scale(0.99) rotate(0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  html.is-loaded .seal-press { animation: seal-press 900ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }
}

.seal-band { background: var(--bg-sunken); border-block: 1px solid var(--hairline); text-align: center; }
.seal-band .est {
  font-family: var(--font-ui); font-weight: 600;
  font-size: var(--step--1); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass-ink); margin-top: var(--sp-4);
}
.seal-band p.line { font-family: var(--font-body); color: var(--ink-muted); max-width: 46ch; margin: var(--sp-3) auto 0; }

/* Corner stamp. Rotated and bleeding off the corner the way a stamp lands on
   a real document. Decorative only, so it is hidden from assistive tech. */
.stamped { position: relative; }
.stamped .stamp {
  position: absolute; right: -14px; bottom: -20px;
  width: clamp(84px, 12vw, 124px); height: auto;
  transform: rotate(-11deg);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
@media (max-width: 640px) { .stamped .stamp { right: -10px; bottom: -14px; width: 84px; } }

/* ---------- utility ---------- */
.icon { width: 1em; height: 1em; flex: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.stack-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---------- page hero (subpages) ---------- */
.page-hero { background: var(--bg-sunken); border-bottom: 1px solid var(--hairline); padding-block: var(--sp-6); }
.page-hero .lede { margin-top: var(--sp-3); }

/* ---------- menu page ---------- */
.menu-section + .menu-section { margin-top: var(--sp-6); }
.menu-section h2 {
  background: var(--bg-plate);
  color: #f4ecdc;
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
}
@media (prefers-color-scheme: light) { .menu-section h2 { background: #16110e; } }
.menu-note { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); margin-top: var(--sp-2); }
.menu-columns { columns: 1; }
@media (min-width: 900px) { .menu-columns { columns: 2; column-gap: var(--sp-6); } }
.menu-columns > li { break-inside: avoid; }
.flavor-list {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
}
.flavor-list li {
  font-family: var(--font-ui); font-size: var(--step--1);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  padding: 0.35em 0.9em;
}
.beer-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .beer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .beer-grid { grid-template-columns: repeat(3, 1fr); } }
.beer-grid h3 { font-size: var(--step-1); color: var(--brass-ink); margin-bottom: var(--sp-2); }
.beer-grid ul { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-size: var(--step--1); }
.beer-grid li { padding-block: 0.3rem; border-bottom: 1px solid var(--hairline); }
.beer-grid li span { display: block; color: var(--ink-faint); font-size: 0.9em; }

/* ---------- about page ---------- */
.story-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.story-grid.flip > figure { order: -1; }
@media (min-width: 900px) { .story-grid.flip > figure { order: 0; } }
.story-grid figure { margin: 0; }
.story-grid img { width: 100%; object-fit: cover; }
figcaption { margin-top: var(--sp-2); font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }

.walls-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .walls-grid { grid-template-columns: repeat(3, 1fr); } }
.walls-grid figure { margin: 0; }
.walls-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.walls-grid h3 { margin-top: var(--sp-3); font-size: var(--step-1); }
.walls-grid p { margin-top: var(--sp-2); color: var(--ink-muted); font-size: var(--step--1); }

.merch-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); align-items: end; }
@media (min-width: 700px) { .merch-row { grid-template-columns: repeat(3, 1fr); } }
.merch-row figure { margin: 0; }
.merch-row img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg-raised); }

/* ---------- legal pages ---------- */
.legal-body h2 { font-size: var(--step-2); margin-top: var(--sp-5); margin-bottom: var(--sp-2); color: var(--ink); }
.legal-body p { max-width: 68ch; }
.legal-body ul.fare { margin-block: var(--sp-3); }
.legal-body ul.fare > li { border: 0; border-bottom: 1px solid var(--hairline); padding-block: var(--sp-2); max-width: 68ch; }
.legal-body ul.fare > li:first-child { border-top: 1px solid var(--hairline); }
.legal-body a { color: var(--accent-ink); }

/* ---------- 404 ---------- */
.error-page { display: grid; place-items: center; min-height: 68dvh; text-align: center; }

/* ---------- load animation (additive only) ----------
   Base state is fully visible. The transform is a small rise that settles
   on load; if the class never arrives, nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  .rise { transform: translateY(14px); transition: transform var(--dur) var(--ease); }
  html.is-loaded .rise { transform: none; }
  .rise-2 { transition-delay: 90ms; }
  .rise-3 { transition-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- print ---------- */
@media print {
  .site-header, .callbar, .hero-media, #dgb-concept-bar { display: none !important; }
  body { background: #fff; color: #000; }
}