/* taproom register. Kraft paper, dark brown, amber. Space Grotesk set bold and
   uppercase for the display, like a tap handle. A brewery's site has one job: what is
   on tap right now and when can I come drink it. So the tap board is in the hero and
   the full list follows it. One page. */
@layer theme {
  :root {
    --paper: oklch(93% 0.030 80); --paper-alt: oklch(89% 0.035 80); --card: oklch(97% 0.015 80);
    --deep: oklch(26% 0.040 60); --ink: oklch(22% 0.040 60);
    --type: oklch(30% 0.030 60); --type-soft: oklch(42% 0.030 60); --type-mute: oklch(50% 0.025 60);
    --on-deep: oklch(95% 0.020 80); --on-deep-soft: oklch(82% 0.040 80);
    --line: oklch(84% 0.030 80); --line-mid: oklch(76% 0.035 80); --line-deep: oklch(36% 0.04 60);
    --accent: oklch(78% 0.160 70); --accent-2: oklch(50% 0.140 55); --accent-ink: oklch(22% 0.040 60);
    --header-bg: oklch(93% 0.030 80 / .94); --header-line: var(--line-mid);
    --mark-bg: var(--deep); --mark-ink: var(--accent);

    --display: 'Space Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
    --body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --display-weight: 700; --display-track: .01em; --em-style: normal;
    --btn-font: var(--display); --btn-track: .10em; --btn-case: uppercase;

    --t-3xs: .625rem; --t-2xs: .6875rem; --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem;
    --t-md: 1.125rem; --t-lg: 1.35rem; --t-xl: 1.7rem; --t-2xl: 2.2rem;
    --t-3xl: clamp(2.1rem, 3.6vw, 3.1rem); --t-4xl: clamp(2.6rem, 5.4vw, 4.4rem);
    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6rem;
    --r-sm: 3px; --r-md: 4px; --r-btn: 3px; --r-mark: 4px;
    --ease: cubic-bezier(.22,1,.36,1); --tap-min: 46px;
  }
  html { color-scheme: light; }
  h1, h2, h3 { text-transform: uppercase; line-height: 1.05; }
  .section__title em { color: var(--accent-2); }
  .eyebrow { color: var(--accent-2); letter-spacing: .22em; }
}

@layer hero {
  .hero { position: relative; overflow: hidden; background: var(--deep); }
  .hero__bg { position: absolute; inset: 0; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
  .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, oklch(22% 0.04 60 / .95) 0%, oklch(22% 0.04 60 / .80) 50%, oklch(22% 0.04 60 / .40) 100%); }
  .hero__inner { position: relative; padding: var(--s-8) 0; display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 980px) { .hero__inner { grid-template-columns: 1.1fr .9fr; padding: var(--s-9) 0; } }
  .hero__copy { display: grid; gap: var(--s-5); max-width: 56ch; }
  .hero__title { font-size: var(--t-4xl); color: var(--on-deep); }
  .hero__title em { color: var(--accent); }
  .hero__sub { font-size: var(--t-md); color: var(--on-deep-soft); }
  .rating { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline; font-size: var(--t-sm); color: var(--on-deep-soft); }
  .rating b { font-family: var(--display); font-size: var(--t-xl); color: var(--on-deep); }
  .rating .star { color: var(--accent); }
  .hero .btn--quiet { color: var(--on-deep); border-color: oklch(100% 0 0 / .4); }
  .hero .btn--quiet:hover { border-color: var(--accent); color: var(--accent); }

  /* the tap board */
  .board { background: var(--ink); color: var(--on-deep); border: 2px solid var(--line-deep); border-radius: var(--r-md); padding: var(--s-5); display: grid; gap: var(--s-3); box-shadow: 0 30px 60px -30px oklch(0% 0 0 / .8); }
  .board__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border-bottom: 1px dashed var(--line-deep); padding-bottom: var(--s-3); }
  .board__k { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-md); color: var(--accent); }
  .board__u { font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--on-deep-soft); }
  .board__row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: var(--s-3); align-items: baseline; font-size: var(--t-sm); padding: var(--s-1) 0; }
  .board__n { font-family: var(--display); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
  .board__name { font-weight: 650; color: var(--on-deep); }
  .board__name small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--on-deep-soft); }
  .board__abv, .board__p { font-variant-numeric: tabular-nums; color: var(--on-deep-soft); font-size: var(--t-xs); }
  .board__p { color: var(--on-deep); font-weight: 650; font-size: var(--t-sm); }
  .board__more { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); justify-self: start; border-top: 1px dashed var(--line-deep); padding-top: var(--s-3); width: 100%; }
  .board__more:hover { text-decoration: underline; text-underline-offset: 3px; }
}

@layer sections {
  .taps { display: grid; gap: var(--s-3); }
  @media (min-width: 900px) { .taps { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
  .tap { background: var(--card); border: 1px solid var(--line-mid); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s-1) var(--s-4); align-items: center; }
  .tap__n { font-family: var(--display); font-weight: 700; font-size: var(--t-xl); color: var(--accent-2); grid-row: 1 / span 2; font-variant-numeric: tabular-nums; }
  .tap__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
  .tap__style { font-size: var(--t-xs); color: var(--type-mute); display: flex; gap: var(--s-3); flex-wrap: wrap; }
  .tap__style b { color: var(--type-soft); font-weight: 600; }
  .tap__p { grid-column: 3; grid-row: 1 / span 2; font-family: var(--display); font-weight: 700; font-size: var(--t-lg); color: var(--ink); text-align: right; }
  .tap__p small { display: block; font-family: var(--body); font-weight: 400; font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--type-mute); }
  .tap--new .tap__name::after { content: "New"; margin-left: var(--s-2); font-size: var(--t-3xs); letter-spacing: .14em; color: var(--card); background: var(--accent-2); padding: 2px 6px; border-radius: 2px; vertical-align: middle; }
  .terms { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-left: 3px solid var(--accent-2); background: var(--paper-alt); font-size: var(--t-sm); color: var(--type-soft); max-width: 78ch; }
  .terms b { color: var(--ink); }

  .room { display: grid; gap: var(--s-6); align-items: start; }
  @media (min-width: 960px) { .room { grid-template-columns: .9fr 1.1fr; } }
  .room__copy { display: grid; gap: var(--s-4); }
  .room__copy p { color: var(--type-soft); }
  .room__list { display: grid; gap: var(--s-2); }
  .room__list li { display: grid; grid-template-columns: 14px 1fr; gap: var(--s-2); align-items: start; font-size: var(--t-sm); color: var(--type-soft); }
  .room__list svg { width: 12px; height: 12px; margin-top: 6px; color: var(--accent-2); }
  .room__list b { color: var(--ink); }
  .room__pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .room__pics figure { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--deep); }
  .room__pics figure:first-child { grid-column: span 2; }
  .room__pics img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .room__pics figure:first-child img { aspect-ratio: 16/9; }
  .room__pics figcaption { position: absolute; inset: auto 0 0 0; padding: var(--s-3) var(--s-4); background: linear-gradient(0deg, oklch(0% 0 0 / .75), transparent); color: var(--on-deep); font-family: var(--display); font-weight: 700; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }

  .rev-wrap { display: grid; gap: var(--s-6); align-items: start; }
  @media (min-width: 960px) { .rev-wrap { grid-template-columns: .8fr 1.2fr; } }
  .score { display: grid; gap: var(--s-3); padding: var(--s-6); background: var(--card); border: 1px solid var(--line-mid); border-radius: var(--r-md); }
  .score__n { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); color: var(--ink); line-height: 1; }
  .score__stars { color: var(--accent-2); letter-spacing: .12em; font-size: var(--t-md); }
  .score__of { font-size: var(--t-sm); color: var(--type-soft); }
  .bars { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
  .bar { display: grid; grid-template-columns: 36px 1fr 40px; gap: var(--s-3); align-items: center; font-size: var(--t-xs); color: var(--type-mute); }
  .bar__track { height: 6px; background: var(--line); border-radius: 3px; }
  .bar__fill { display: block; height: 100%; background: var(--accent-2); border-radius: 3px; }
  .quotes { display: grid; gap: var(--s-4); }
  .quote { background: var(--card); border: 1px solid var(--line-mid); border-radius: var(--r-md); padding: var(--s-5); display: grid; gap: var(--s-2); }
  .quote__stars { color: var(--accent-2); letter-spacing: .1em; font-size: var(--t-sm); }
  .quote__q { font-size: var(--t-md); color: var(--ink); line-height: 1.5; }
  .quote__by { font-size: var(--t-xs); color: var(--type-mute); }

  .visit-grid { display: grid; gap: var(--s-6); }
  @media (min-width: 900px) { .visit-grid { grid-template-columns: 1.1fr .9fr; } }
  .hours { background: var(--card); border: 1px solid var(--line-mid); border-radius: var(--r-md); overflow: hidden; }
  .hours-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
  .hours-row:last-child { border-bottom: 0; }
  .hours-row--today { background: oklch(92% 0.06 80); box-shadow: inset 3px 0 0 var(--accent-2); }
  .hours-row__day { font-weight: 650; color: var(--ink); }
  .hours-row__time { color: var(--type-soft); font-variant-numeric: tabular-nums; }
  .hours-row__live { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
  .info { display: grid; gap: var(--s-4); align-content: start; }
  .info__item { display: grid; gap: var(--s-1); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
  .info__item:last-child { border-bottom: 0; }
  .info__key { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--type-mute); }
  .info__val { font-size: var(--t-sm); }
  .info__val--big { font-family: var(--display); font-weight: 700; font-size: var(--t-2xl); color: var(--ink); }
  .info__act { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); justify-self: start; }
  .info__act:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* AA fixes from the preview audit (brewery). Unlayered so they beat the base. */
.hero .eyebrow { color: var(--accent); }
.site-footer strong { color: var(--accent); }
.site-footer__base, .site-footer__socials-label { color: var(--on-deep-soft); }