/*
 * theme.css — Brew Lane. Retro-print × bold-geometric: off-white paper,
 * pressed-ink flat colour blocks (forest green / terracotta / mustard),
 * chunky poster type, 4px corners, no soft shadows.
 */

:root {
  --canvas: #f2e8d8;
  --surface: #f9f5ed;
  --surface-2: #ece0c8;
  --border: #ddcfaf;
  --border-strong: #b3a17b;
  --ink: #2a211a;
  --muted: #676056;

  --accent: #1f5e4e;
  --accent-hover: #184b3e;
  --accent-ink: #f7f2e4;
  --accent-text: #9a4427;
  --accent-strong: #1f5e4e;
  --accent-soft: #dbe7de;
  --accent-border: #a9c4b6;

  --success: #2f6b3f;
  --success-ink: #f7f2e4;
  --success-soft: #dfe9dc;
  --success-strong: #295c34;
  --warning: #b8791f;
  --warning-ink: #2a211a;
  --warning-soft: #f2e2c3;
  --warning-strong: #87580e;
  --danger: #a13c2a;
  --danger-ink: #f7f2e4;
  --danger-soft: #f0dcd2;
  --danger-strong: #8a3120;

  --chart-1: #1f5e4e;
  --chart-2: #9a4427;
  --chart-3: #c88a2e;
  --chart-4: #6e4a34;
  --chart-5: #2e6e7c;
  --chart-6: #7c5a99;

  /* section-divider ink blocks — this app's own tokens */
  --x-terracotta: #9a4427;
  --x-terracotta-ink: #f7ede2;
  --x-forest: #1f5e4e;
  --x-forest-ink: #f2ecd9;
  --x-mustard: #c88a2e;
  --x-mustard-ink: #2a211a;
  --x-paper-line: #cbb98e;
  /* the top bar rides over the hero photo in both modes, so it keeps its
     own dark-ribbon / cream-text pair rather than following --ink */
  --x-bar-bg: color-mix(in srgb, #241a10 82%, transparent);
  --x-bar-ink: #f4ede0;

  --font-display: "Archivo Black", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Fraunces", ui-serif, Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 400;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 4px;
  --radius-card: 4px;
  --radius-input: 4px;
  --border-w: 2px;
  --border-strong-w: 2px;
  --shadow-card: none;
  --shadow-raised: 0 6px 0 0 color-mix(in srgb, var(--ink) 90%, transparent);
  --shadow-btn: none;
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.03em;
  --btn-weight: 700;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #201811;
  --surface: #2a2016;
  --surface-2: #33281a;
  --border: #4a3c28;
  --border-strong: #5f4d34;
  --ink: #f1e6d2;
  --muted: #b8a988;

  --accent: #2f7d64;
  --accent-hover: #388f73;
  --accent-ink: #f7f2e2;
  --accent-text: #e08355;
  --accent-strong: #8fd4b8;
  --accent-soft: #1f3b31;
  --accent-border: #3d5b4d;

  --success: #4c9a6b;
  --success-ink: #12211b;
  --success-soft: #1d3527;
  --success-strong: #8fd4ac;
  --warning: #d19a3d;
  --warning-ink: #241a08;
  --warning-soft: #3a2c14;
  --warning-strong: #e8b86a;
  --danger: #c56a4d;
  --danger-ink: #241109;
  --danger-soft: #3a241c;
  --danger-strong: #e2977c;

  --chart-1: #4c9a6b;
  --chart-2: #e08355;
  --chart-3: #d9a544;
  --chart-4: #a88465;
  --chart-5: #52a3b3;
  --chart-6: #a487c4;

  --x-terracotta: #c9714b;
  --x-terracotta-ink: #201811;
  --x-forest: #16463a;
  --x-forest-ink: #f1e6d2;
  --x-mustard: #d9a544;
  --x-mustard-ink: #201811;
  --x-paper-line: #4a3c28;
  --x-bar-bg: color-mix(in srgb, #14100b 84%, transparent);
  --x-bar-ink: #f4ede0;

  --shadow-raised: 0 6px 0 0 color-mix(in srgb, #000000 65%, transparent);
}

/*
 * app.css — Brew Lane's own ground, bands and one-off devices. Nothing
 * here re-declares a primitive; each class is named for what it is.
 * Compiled last (input.css imports it after theme.css), @apply/@utility
 * work here exactly as in tailwind/components.css.
 */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Page ground: a faint pressed-paper dot grain, never a gradient. -- */
.paper-ground {
  background-color: var(--canvas);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---- Bar: flat ink ribbon over the hero photo, scrolls away normally. - */
.site-bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  background: var(--x-bar-bg);
}
.site-wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--x-bar-ink);
}
.site-wordmark .icon { color: var(--x-bar-ink); }
.site-nav { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.site-nav-links { display: none; align-items: center; gap: 1.5rem; }
@media (width >= 48rem) { .site-nav-links { display: flex; } }
.site-nav-links a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--x-bar-ink);
  opacity: 0.9;
}
.site-nav-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-toggle { color: var(--x-bar-ink); }
.site-toggle:hover { background: color-mix(in srgb, var(--x-bar-ink) 18%, transparent); color: var(--x-bar-ink); }

/* ---- Hero: full-bleed photo, headline stamped on a flat ink block. ---- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 32rem;
  height: 88vh;
  max-height: 54rem;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { display: block; height: 100%; width: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 55%, transparent), transparent 42%);
}
.hero-panel {
  position: relative;
  z-index: 5;
  margin: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(1.75rem, 6vw, 3.5rem);
  max-width: 40rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--x-terracotta);
  color: var(--x-terracotta-ink);
}
.hero-panel.is-visible { animation: hero-rise 700ms var(--ease-out, ease) both; }
html.reduced-motion .hero-panel.is-visible { animation: none; }
.hero-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.75rem;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.hero-sub {
  margin-top: 1rem;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 1.05rem;
  opacity: 0.95;
}

/* ---- Section numerals: Archivo Black, used only here and in the hero. - */
.section-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  margin-bottom: 0.5rem;
}
.section-num-inverse { color: color-mix(in srgb, var(--x-forest-ink) 70%, transparent); }
.section-head {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.section-head-inverse { color: var(--x-forest-ink); }

/* ---- Story: narrow reading column beside a photo. --------------------- */
.story-wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
}
@media (width >= 56rem) { .story-wrap { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.prose-body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: 58ch;
}
.prose-body + .prose-body { margin-top: 1.1rem; }

/* ---- Menu: two flat priced columns, never cards. ----------------------- */
.menu-wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3.5rem, 8vw, 6rem);
}
.menu-cols { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 2rem; }
@media (width >= 48rem) { .menu-cols { grid-template-columns: 1fr 1fr; } }
.menu-col-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
}
.menu-rows > .menu-row { border-bottom: 1px solid var(--x-paper-line); }
.menu-rows > .menu-row:last-child { border-bottom: 0; }
.menu-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; }
.menu-name { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; }
.menu-desc { margin-top: 0.2rem; font-size: 0.9rem; color: var(--muted); }
.menu-price { flex: none; font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; padding-top: 0.15rem; }

/* ---- Hours band: dark forest statement block, full width. ------------- */
.hours-band { background: var(--x-forest); color: var(--x-forest-ink); }
.hours-inner { max-width: 72rem; margin-inline: auto; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem); }
.hours-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 2rem; }
@media (width >= 40rem) { .hours-grid { grid-template-columns: auto 1fr; align-items: start; } }
.hours-table { font-family: var(--font-mono); font-size: 1rem; border-collapse: collapse; }
.hours-table td { padding: 0.5rem 1.5rem 0.5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--x-forest-ink) 25%, transparent); }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-address { font-family: var(--font-body); font-size: 1.05rem; }
.hours-address p { max-width: 32ch; }
.link-inverse {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--x-forest-ink);
  border-bottom: 2px solid color-mix(in srgb, var(--x-forest-ink) 50%, transparent);
  padding-bottom: 0.15rem;
}
.link-inverse:hover { border-bottom-color: var(--x-forest-ink); }

/* ---- Reviews: one running column, hairline rules, no stars. ----------- */
.reviews-wrap { max-width: 44rem; margin-inline: auto; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem); }
.reviews-col { margin-top: 2rem; }
.review { padding: 1.75rem 0; border-top: 1px solid var(--x-paper-line); }
.review:first-child { border-top: 0; padding-top: 0.5rem; }
.review-quote { font-family: var(--font-body); font-style: italic; font-size: 1.2rem; line-height: 1.55; color: var(--ink); }
.review-meta { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }

/* ---- Booking ticket: a paper stub with a punched perforation. --------- */
.ticket-wrap { max-width: 40rem; margin-inline: auto; padding: clamp(2rem, 6vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) clamp(4rem, 9vw, 6.5rem); }
.ticket {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--ink);
}
.ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem 1.25rem; }
.ticket-kicker { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ticket-title { font-family: var(--font-display); font-size: 1.5rem; margin-top: 0.4rem; letter-spacing: -0.01em; }
.ticket-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--x-mustard);
  color: var(--x-mustard-ink);
  font-family: var(--font-mono);
  font-weight: 700;
}
.ticket-num-ok { background: var(--x-forest); color: var(--x-forest-ink); }
.ticket-perf { position: relative; height: 0; border-top: 2px dashed var(--border-strong); margin: 0 1.75rem; }
.ticket-perf::before, .ticket-perf::after {
  content: "";
  position: absolute;
  top: -0.65rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: var(--canvas);
}
.ticket-perf::before { left: -1.9rem; }
.ticket-perf::after { right: -1.9rem; }
.ticket-body { padding: 1.5rem 1.75rem 1.75rem; }
.ticket-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.ticket-details > div { border-bottom: 1px solid var(--x-paper-line); padding-bottom: 0.5rem; }
.ticket-details dt { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.ticket-details dd { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin-top: 0.2rem; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  max-width: 72rem;
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) 3rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}