/* ==========================================================================
   TeamWorkOn3 — base, components, sections
   Depends on tokens.css. No framework: no Bootstrap, no UIkit, no jQuery.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Space for the mobile action bar so the footer is never covered. */
@media (max-width: 860px) {
  body { padding-bottom: var(--bottombar-h); }
}

img,
picture,
video,
svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: var(--lh-snug); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. Utilities
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--max-w-wide); }
.wrap--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); }
.section--dark { background: var(--night); color: var(--on-night); }
.section--warm { background: var(--paper-warm); }
.section--flush { padding-block: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--s-4);
  z-index: 999;
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--night);
  font-weight: 700;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Display type
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.section--dark .eyebrow { color: var(--accent); }

/* The signature look: oversized, wide-tracked, uppercase. */
.display {
  font-size: var(--t-3xl);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}
.display--hero { font-size: var(--t-4xl); }
.display--sm { font-size: var(--t-2xl); }

.subhead {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--s-3);
}
.section--dark .subhead { color: var(--on-night-soft); }

.lede {
  font-size: var(--t-lg);
  color: var(--ink-soft);
  margin-top: var(--s-5);
}
.section--dark .lede { color: var(--on-night-soft); }

/* Short teal rule under a display heading.
   margin-inline:0 is required — the UA stylesheet gives <hr> `margin: auto`,
   which silently centered every rule sitting under a left-aligned heading. */
.rule {
  width: 76px; height: 4px;
  margin: var(--s-5) 0 0;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-pill);
}
.center .rule, .rule--center { margin-inline: auto; }

.section-head { margin-bottom: var(--s-8); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--night);
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;                       /* comfortable touch target */
  padding: var(--s-3) var(--s-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--accent-strong); --btn-bd: var(--accent-strong); }
.btn:active { transform: translateY(1px); }

/* Secondary: outline. Used *beside* a filled primary, never instead of one —
   the reference site made its highest-value action the faintest thing on the
   page, which is the mistake this pairing exists to avoid. */
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--night); --btn-bd: var(--ink); }

.btn--on-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: #fff; }
.btn--on-dark:hover { --btn-bg: #fff; --btn-fg: var(--night); --btn-bd: #fff; }

.btn--lg { min-height: 56px; padding-inline: var(--s-7); font-size: var(--t-base); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.center .btn-row, .btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Announcement bar
   -------------------------------------------------------------------------- */

.announce {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: var(--night-soft);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: 44px;
  padding: var(--s-2) calc(var(--gutter) + 28px) var(--s-2) var(--gutter);
  text-align: center;
}
.announce__text { margin: 0; }
.announce__link {
  flex: none;
  padding: var(--s-2) var(--s-5);
  background: var(--accent);
  color: var(--night);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.announce__link:hover { background: var(--accent-bright); }
.announce__close {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  color: inherit;
  cursor: pointer;
  opacity: 0.85;
}
.announce__close:hover { opacity: 1; background: rgb(255 255 255 / 0.10); }
.announce[hidden] { display: none; }

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bar);
  border-bottom: 0;
}

/* The reference runs a hairline along the foot of the bar that starts to the
   right of the logo rather than spanning the full width — the badge breaks it.
   Worth copying: it's what stops the bar reading as a plain rectangle. */
.header::after {
  content: '';
  position: absolute;
  left: var(--header-rule-start);
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent-line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: var(--header-h);
}

/* Lockup: the reference's circular badge, plus the wordmark beside it.
   The badge alone is the more faithful copy, but this brand's name sits as a
   small horizontal block inside a large disc — at 76px it is unreadable,
   where the reference's name curves around the full circumference. A header
   whose restaurant name can't be read is a usability fault, so the wordmark
   carries the name and the badge carries the shape. */
.brand { display: flex; align-items: center; gap: var(--s-4); flex: 0 0 auto; }
.brand__badge { width: auto; height: 76px; border-radius: 50%; flex: none; }
.brand__logo { width: auto; height: 34px; }
@media (max-width: 1080px) {
  .brand__badge { height: 52px; }
  .brand__logo { height: 26px; }
}
@media (max-width: 560px) {
  .brand__logo { display: none; }   /* badge only once space is tight */
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-6); }
.nav__link {
  position: relative;
  display: inline-block;
  padding: var(--s-2) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  transition: color var(--dur) var(--ease);
}

/* The active/hover underline is a pseudo-element, not a transparent border.
   Chrome paints a 0-alpha border as a faint grey hairline at some subpixel
   positions, which put a visible smudge under every nav item at rest. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-pill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.nav__link { color: var(--accent); }
.nav__link:hover,
.nav__link[aria-current='page'] { color: var(--accent-bright); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--s-4); }

/* The Reserve button inside the nav list belongs to the mobile panel only;
   above the breakpoint .header__actions carries its own. */
.nav__mobile-cta { display: none; }

.social { display: flex; align-items: center; gap: var(--s-3); }
.social__link {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.social__link:hover { color: var(--accent); background: var(--accent-tint); }
.social__link svg { width: 18px; height: 18px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; }
.nav-toggle__bars::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Dropdown (Order → pickup / delivery) */
.nav__item--has-menu { position: relative; }
.nav__submenu {
  position: absolute;
  top: 100%; left: 50%;
  translate: -50% 0;
  min-width: 220px;
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  display: none;
}
.nav__item--has-menu:hover .nav__submenu,
.nav__submenu:has(a:focus-visible),
.nav__item--has-menu .nav__toggle[aria-expanded='true'] + .nav__submenu { display: block; }
.nav__submenu a {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav__submenu a:hover { background: var(--accent-tint); color: var(--accent-strong); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .header::after { left: var(--header-rule-start-sm); }
  .header__actions { display: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    padding: var(--s-6) var(--gutter) var(--s-9);
    background: var(--header-bar);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
  }
  .nav[data-open='true'] { transform: translateX(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: var(--s-4) 0;
    font-size: var(--t-lg);
    border-bottom: 1px solid var(--rule);
    color: var(--accent);
  }
  .nav__link::after { display: none; }
  .nav__submenu {
    position: static;
    translate: none;
    display: block;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--s-3) var(--s-4);
  }
  .nav__mobile-cta { display: block; margin-top: var(--s-6); }
}

/* --------------------------------------------------------------------------
   7. Hero — one still image, permanent scrim, one message, two actions.
   (Deliberately not a carousel: rotating headlines are read by nobody, and
   two of the five slides on the reference site carried no message at all.)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(96vh, 860px);
  padding-block: var(--s-9) var(--s-8);
  background: var(--night);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-scrim);
}
.hero__content { max-width: 720px; }
.hero .display--hero { text-shadow: 0 2px 24px rgb(0 0 0 / 0.4); }
.hero__lede {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: var(--t-lg);
  color: #f0f1f2;
}
.hero .btn--primary-on-hero { --btn-bg: var(--accent); --btn-fg: var(--night); --btn-bd: var(--accent); }

@media (max-width: 768px) {
  .hero { min-height: 78vh; align-items: center; text-align: center; }
  .hero__content { margin-inline: auto; }
  .hero .btn-row { justify-content: center; }
}

/* Fact strip directly under the hero: address, hours, phone. */
.factbar { background: var(--night-soft); color: #fff; border-block: 1px solid var(--rule); }
.factbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4) var(--s-7);
  padding-block: var(--s-4);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.factbar__item { display: flex; align-items: center; gap: var(--s-2); }
.factbar__item svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.factbar a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   8. Split section — text beside a blob-framed image
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--s-8);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .split--reverse .split__media { order: -1; }
}

/* The signature oversized-radius image frame. Corners alternate so repeated
   use down the page doesn't read as a row of identical rounded rectangles. */
.blob {
  overflow: hidden;
  border-radius: var(--r-blob) var(--r-sm) var(--r-blob) var(--r-sm);
  box-shadow: var(--shadow-md);
}
.blob--alt { border-radius: var(--r-sm) var(--r-blob) var(--r-sm) var(--r-blob); }
.blob img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.blob--tall img { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   9. Game day board — the sports-bar section the reference design has no
   equivalent for. Today's fixtures, kickoff times, which screen.
   -------------------------------------------------------------------------- */

.gameday { background: var(--night); color: var(--on-night); }

.fixtures {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .fixtures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .fixtures { grid-template-columns: repeat(3, 1fr); } }

.fixture {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--night-soft);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fixture:hover { border-color: var(--accent-line); background: var(--night-soft); }
.fixture__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--on-night-soft);
}
.fixture__league { color: var(--accent); }
.fixture__teams {
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: var(--lh-snug);
}
.fixture__time {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--on-night-soft);
}
.fixture__time svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge--quiet { background: transparent; border: 1px solid var(--rule-dark); color: var(--on-night-soft); }

/* --------------------------------------------------------------------------
   10. Menu teaser cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* No lift, no glow. A gold rule wipes across the top edge — the way a foil
   line behaves on a printed card, and it stays where you put it. */
.card::before {
  content: '';
  position: absolute;
  inset: -1px auto auto -1px;
  width: calc(100% + 2px);
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover { background: var(--night-soft); border-color: var(--rule-strong); }
.card:hover::before { transform: scaleX(1); }
.card__media { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
/* Flex column, not grid: `.card__link { margin-top: auto }` only pushes the
   CTA to the bottom in a flex context, and without it the links sat at three
   different heights across a row of cards. */
.card__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.card__title {
  font-size: var(--t-xl);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.card__text { color: var(--ink-soft); font-size: var(--t-sm); }
.card__link {
  margin-top: auto;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--accent);
}
.card__link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   11. Gallery — dark grid, native-dialog lightbox
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1080px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

/* display:block + width:100% matter here. As an inline-block the button is
   shrink-to-fit, so before the lazy images load it measures zero and the whole
   grid collapses — the section jumped 447px -> 1065px on load. Filling the grid
   cell lets aspect-ratio reserve the height up front, so nothing shifts. */
.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--night-soft);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 1;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); filter: brightness(1.08) saturate(1.05); }

.lightbox {
  width: min(94vw, 1100px);
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
}
.lightbox::backdrop { background: rgb(0 0 0 / 0.88); }
.lightbox img { width: 100%; height: auto; border-radius: var(--r-md); }
.lightbox__caption {
  margin-top: var(--s-3);
  color: #fff;
  font-size: var(--t-sm);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.lightbox__close:hover { background: rgb(0 0 0 / 0.85); }

/* --------------------------------------------------------------------------
   12. Reviews — three cards, all visible at once (no carousel)
   -------------------------------------------------------------------------- */

.reviews { background: var(--paper-warm); }
.review {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.review__stars { display: flex; gap: 2px; color: var(--accent); }
.review__stars svg { width: 18px; height: 18px; }
.review__text { color: var(--ink-soft); font-size: var(--t-sm); }
.review__author { font-weight: 700; font-size: var(--t-sm); letter-spacing: 0.04em; }
.review__source { color: var(--ink-faint); font-weight: 500; }

/* --------------------------------------------------------------------------
   13. Newsletter + map
   -------------------------------------------------------------------------- */

.contact-split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact-split { grid-template-columns: 1fr 1fr; } }

.newsletter {
  display: grid;
  align-content: center;
  gap: var(--s-4);
  padding: var(--section-y) var(--gutter);
  background: var(--night);
  color: var(--on-night);
}
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.field { flex: 1 1 240px; display: grid; gap: var(--s-2); }
.field__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--on-night-soft); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--night-soft);
  color: #fff;
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-md);
}
.field__input::placeholder { color: #7d8085; }
.field__input:focus { border-color: var(--accent); }
.form__note { font-size: var(--t-xs); color: var(--on-night-soft); }
.form__status { font-size: var(--t-sm); font-weight: 600; min-height: 1.5em; }
.form__status[data-state='ok'] { color: #4ec9b0; }
.form__status[data-state='error'] { color: #ff8f8f; }

/* Static map image, not an embedded tile server: keeps the palette intact and
   drops three third-party hosts. Swap the <img> for a styled static-map URL. */
.map { min-height: 340px; background: var(--paper-warm); }
.map img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--paper); border-top: 1px solid var(--rule); }
.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  padding-block: var(--section-y);
}
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }

.footer__title {
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.footer__list { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-soft); }
.footer__list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.hours { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.hours__row { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--ink-soft); }
.hours__day { font-weight: 600; color: var(--ink); }

.footer__bar {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-5);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   15. Mobile sticky action bar — three actions, not five.
   -------------------------------------------------------------------------- */

.bottombar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-bottombar);
  display: none;
  background: var(--night-soft);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 860px) { .bottombar { display: grid; grid-template-columns: repeat(3, 1fr); } }

.bottombar__link {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: var(--bottombar-h);
  padding: var(--s-2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bottombar__link + .bottombar__link { border-left: 1px solid var(--rule-dark); }
.bottombar__link svg { width: 18px; height: 18px; color: var(--accent); }
.bottombar__link:active { background: var(--night-soft); }

/* --------------------------------------------------------------------------
   16. Offer dialog — ONE popup, delayed, once per session, never on /menu.
   -------------------------------------------------------------------------- */

.offer {
  width: min(92vw, 440px);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.offer::backdrop { background: rgb(0 0 0 / 0.6); }
.offer__media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.offer__body { display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--surface); }
.offer__title { font-size: var(--t-2xl); letter-spacing: var(--track-display); text-transform: uppercase; }
.offer__text { color: var(--ink-soft); font-size: var(--t-sm); }
.offer__close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.offer__close:hover { background: rgb(0 0 0 / 0.8); }

/* --------------------------------------------------------------------------
   17. Menu page — single column, sticky category nav, prices in a column.
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  padding-block: var(--s-8);
  background: var(--night);
  color: #fff;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.page-head__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-head::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hero-scrim); }

/* Sticky category rail — the reference menu ran 7,500px with no way to jump. */
.menu-nav {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.menu-nav__scroll {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s-3);
}
.menu-nav__scroll::-webkit-scrollbar { display: none; }
.menu-nav__link {
  flex: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: all var(--dur) var(--ease);
}
.menu-nav__link:hover { border-color: var(--accent); color: var(--accent); }
.menu-nav__link[aria-current='true'] { background: var(--accent); border-color: var(--accent); color: var(--night); }

.menu-section { padding-block: var(--s-8); border-bottom: 1px solid var(--rule); }
.menu-section:last-of-type { border-bottom: 0; }
.menu-section__head { margin-bottom: var(--s-6); }
.menu-section__note { color: var(--ink-faint); font-size: var(--t-sm); margin-top: var(--s-2); }

.menu-list { display: grid; gap: var(--s-5); max-width: 760px; }

/* Name and price on one baseline joined by a dotted leader; description below.
   Prices are the thing people scan for, so they get their own column. */
.menu-item__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-3);
}
.menu-item__name {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.menu-item__leader {
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-4px);
}
.menu-item__price {
  font-size: var(--t-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
}
.menu-item__desc { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--t-sm); max-width: 60ch; }

.tag {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px var(--s-2);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: middle;
}

/* Menu photography is opt-in per item, at a scale that supports the text
   instead of burying it. */
.menu-item__photo {
  margin-top: var(--s-4);
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   18. Cocktail cards
   The gallery grid, but each tile carries a name and a price — these are menu
   items, not decoration, so they're labelled like menu items.
   -------------------------------------------------------------------------- */

.gallery--drinks {
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 640px) { .gallery--drinks { grid-template-columns: repeat(3, 1fr); } }

.gallery--drinks .gallery__item { aspect-ratio: 4 / 5; }

.drink__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.drink__name {
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.drink__price {
  font-size: var(--t-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.drink__desc {
  margin-top: var(--s-1);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   19. House quote
   The restaurant's own line, set as a statement. Deliberately not styled as a
   review card — it isn't one, and there are no real reviews on the site yet.
   -------------------------------------------------------------------------- */

.housequote { margin: 0; display: grid; gap: var(--s-5); }
.housequote__text {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  text-wrap: balance;
  color: var(--ink);
}
.housequote__cite {
  display: block;
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.housequote::before {
  content: '';
  display: block;
  width: 40px; height: 3px;
  margin: 0 auto;
  background: var(--accent);
  border-radius: var(--r-pill);
}

/* Gold hairline under the sticky header lifts it off a black page body. */
/* (header hairline is drawn by .header::after, above) */

/* --------------------------------------------------------------------------
   20. Menu page additions
   -------------------------------------------------------------------------- */

/* Sub-heading inside a menu section (Happy Hour splits into drinks / food /
   Tuesday / Thursday, which are one section but four lists). */
.menu-sub {
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.menu-sub:first-of-type { margin-top: 0; }
.menu-sub + .menu-section__note { margin-top: calc(var(--s-4) * -1); margin-bottom: var(--s-4); }

/* A secondary price sitting beside the main one ("$8 / $11 to go"). */
.menu-item__alt {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-faint);
}

/* Brunch drink packages — the one place on the menu where a price is the
   headline rather than a figure at the end of a row. */
.deal-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-top: var(--s-7);
  max-width: 760px;
}
@media (min-width: 640px) { .deal-grid { grid-template-columns: repeat(2, 1fr); } }

.deal {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  text-align: center;
}
.deal__price {
  font-size: var(--t-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.deal__price span {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.deal__title { margin-top: var(--s-4); font-weight: 700; }
.deal__detail { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-soft); }

/* ==========================================================================
   21. Texture and atmosphere
   A perfectly flat black ground is the thing that reads as screen-only. Grain
   plus a warm vignette gives the page a surface, the way a printed menu or a
   photograph has one.
   ========================================================================== */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.055;
  mix-blend-mode: overlay;
}
/* <dialog> renders in the top layer, so modals still sit above the grain. */

/* Warm falloff at the edges of full-bleed dark sections — light pools in the
   middle of a room, it doesn't fill it evenly. */
.hero::before,
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 35%,
    rgb(208 164 57 / 0.07) 0%,
    rgb(10 10 10 / 0) 55%),
    radial-gradient(100% 100% at 50% 100%,
    rgb(0 0 0 / 0.55) 0%,
    rgb(0 0 0 / 0) 60%);
}

/* ==========================================================================
   22. Script kicker
   Set from the client's own flyers, where the accent lines are handwritten.
   Large enough to read as a gesture; never used for anything functional.
   ========================================================================== */

.kicker {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

/* A section head that sits left, with the rule running out to the left margin.
   Alternating this with centred heads breaks the every-section-identical
   rhythm that makes a page feel stamped out. */
.section-head--left { text-align: left; margin-bottom: var(--s-8); }
.section-head--left .rule { margin-inline: 0; }
.section-head--left .lede { max-width: var(--measure); }

/* ==========================================================================
   23. Schedule board
   The weekly lineup, set as a board rather than a row of cards: hairline
   rules, the day in gold, the night's name large. This is how a bar actually
   prints its week — and it removes six boxes from the page.
   ========================================================================== */

.schedule { border-top: 1px solid var(--rule); }

.schedule__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease);
}
@media (min-width: 760px) {
  .schedule__row {
    grid-template-columns: 190px 1fr auto;
    align-items: baseline;
    padding-inline: var(--s-5);
  }
}

/* The gold rule grows from the left edge on hover — a pointer moving along a
   printed list, not a card taking off. */
.schedule__row::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}
.schedule__row:hover { background: rgb(255 255 255 / 0.02); }
.schedule__row:hover::before { transform: scaleX(1); }

.schedule__day {
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.schedule__time {
  display: block;
  margin-top: var(--s-1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.schedule__name {
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: var(--lh-snug);
}
.schedule__detail {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  max-width: 54ch;
}
.schedule__link {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.schedule__row:hover .schedule__link { color: var(--accent); }

/* ==========================================================================
   24. Index columns
   Three menus presented as columns of type divided by hairlines, instead of
   three more bordered boxes.
   ========================================================================== */

.index-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 820px) {
  .index-cols { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .index-cols > * + * { border-left: 1px solid var(--rule); }
  .index-cols > * { padding-inline: var(--s-6); }
  .index-cols > *:first-child { padding-left: 0; }
  .index-cols > *:last-child { padding-right: 0; }
}

.index-item__name {
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.index-item__when {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.index-item__text { margin-top: var(--s-4); color: var(--ink-soft); font-size: var(--t-sm); }
.index-item__link {
  display: inline-block;
  margin-top: var(--s-4);
  padding-bottom: 2px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  border-bottom: 1px solid var(--accent-line);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.index-item__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ==========================================================================
   25. Light sections
   Bird in Hand alternates white and black; going dark-everywhere lost half of
   that rhythm. A light section re-points the token set locally, so every
   component inside it flips without a single component rule changing.

   The one thing that cannot carry over is gold *text*: the brand gold reads
   2.19:1 on this ground. --accent-ink is the brand gold darkened to 4.81:1
   for type; full-strength gold stays for rules, fills and frames.
   ========================================================================== */

.section--light {
  --paper: #faf8f4;
  --paper-warm: #f2eee6;
  --surface: #ffffff;
  --night-soft: #f2eee6;
  --ink: #14110c;
  --ink-soft: #4a453c;
  --ink-faint: #7a7469;
  --rule: #e2ddd2;
  --rule-strong: #cfc8b9;
  --accent-ink: #8f6714;

  background: var(--paper);
  color: var(--ink);
}
.section--light .kicker,
.section--light .eyebrow,
.section--light .index-item__when,
.section--light .schedule__day,
.section--light .menu-sub { color: var(--accent-ink); }
.section--light .lede { color: var(--ink-soft); }

/* On light, the button reads as Bird in Hand's does: a black hairline pill. */
.section--light .btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.section--light .btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }

/* ==========================================================================
   26. Underlined display heading
   The reference sets its accent rule hard under the word, spanning the text —
   not as a detached stub floating below it. inline-block + border-bottom makes
   the rule measure itself against the heading, which is exactly that.
   ========================================================================== */

.display--underlined {
  display: inline-block;
  padding-bottom: 0.1em;
  border-bottom: 5px solid var(--accent);
  text-wrap: balance;
}
.display--underlined.display--sm { border-bottom-width: 4px; }

/* The formal, centred section head the reference uses for its full-width
   blocks: word, rule, uppercase subhead, one outline button. */
.formal { text-align: center; }
.formal__sub {
  margin-top: var(--s-5);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.formal .btn-row { justify-content: center; }

/* ==========================================================================
   27. Circle media
   The reference's about-us plate: a circular crop with the brand marks
   breaking over its edge. Here the mark is the client's own round badge.
   ========================================================================== */

.circle-media {
  position: relative;
  width: min(100%, 460px);
  margin-inline: auto;
  isolation: isolate;
}
.circle-media__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.circle-media__mark {
  position: absolute;
  z-index: 2;
  width: 33%;
  top: -7%;
  left: -6%;
  filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.35));
}
/* Gold beads riding the circle's edge, the way the reference scatters its
   dots — placed on an arc, not sprinkled at random. */
.circle-media__bead {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: var(--accent);
}
/* Positions solved against the circle itself: for a circle inscribed in this
   square, a bead at vertical offset y sits at x = 0.5 + 0.5*sqrt(1-(1-2y)^2).
   Placed off the arc they just look like stray dots on the page. */
.circle-media__bead--a { width: 16px; height: 16px; right: 17%;  top: 11%; }
.circle-media__bead--b { width: 10px; height: 10px; right: 3%;   top: 32%; }
.circle-media__bead--c { width: 22px; height: 22px; right: 29%;  bottom: 3%; }
.circle-media__bead--d { width: 8px;  height: 8px;  left: 22%;   bottom: 8%; }

/* ==========================================================================
   28. Bleed section
   Text centred in one half, photography filling the other and running off the
   edge of the page behind one oversized corner. The section is the grid, so
   the media column reaches the viewport edge without any negative-margin
   arithmetic.
   ========================================================================== */

.bleedsec {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  overflow: hidden;
}
@media (min-width: 920px) {
  .bleedsec { grid-template-columns: 1fr 1fr; align-items: center; }
  .bleedsec--flip .bleedsec__media { order: -1; }
}

.bleedsec__text {
  padding: var(--section-y) var(--gutter);
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.bleedsec__text > * { max-width: 46ch; }

.bleedsec__media {
  position: relative;
  background: var(--night);
  padding: 12px 0 12px 12px;
  border-radius: var(--r-blob) 0 0 var(--r-blob);
  min-height: 320px;
}
.bleedsec--flip .bleedsec__media {
  padding: 12px 12px 12px 0;
  border-radius: 0 var(--r-blob) var(--r-blob) 0;
}
.bleedsec__media img {
  width: 100%;
  height: 100%;
  min-height: 296px;
  object-fit: cover;
  border-radius: calc(var(--r-blob) - 12px) 0 0 calc(var(--r-blob) - 12px);
}
.bleedsec--flip .bleedsec__media img {
  border-radius: 0 calc(var(--r-blob) - 12px) calc(var(--r-blob) - 12px) 0;
}
@media (max-width: 919px) {
  .bleedsec__media,
  .bleedsec--flip .bleedsec__media { border-radius: var(--r-blob) var(--r-blob) 0 0; padding: 12px 12px 0; }
  .bleedsec__media img,
  .bleedsec--flip .bleedsec__media img {
    border-radius: calc(var(--r-blob) - 12px) calc(var(--r-blob) - 12px) 0 0;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* Light-section corrections: a 2%-white hover is invisible on cream, and the
   quote's gold cite needs the darker gold to hold its weight against paper. */
.section--light .schedule__row:hover { background: rgb(20 17 12 / 0.035); }
.section--light .schedule__link { color: var(--ink-faint); }
.section--light .schedule__row:hover .schedule__link { color: var(--accent-ink); }
.section--light .housequote__cite { color: var(--accent-ink); }
.section--light .gallery__item { background: var(--paper-warm); }

/* ==========================================================================
   29. Hero media — photo or video
   The Vale reference runs a silent, looping video full-bleed behind the top of
   the page with a pause/mute pair in the bottom-left corner. Same element and
   the same controls here; the poster carries it until footage exists.
   ========================================================================== */

.hero__media { display: block; }
video.hero__media { background: var(--night); }

.hero__controls {
  position: absolute;
  left: var(--gutter);
  bottom: var(--s-5);
  z-index: 3;
  display: flex;
  gap: var(--s-3);
}
.hero__ctrl {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: rgb(10 10 10 / 0.45);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--r-pill);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__ctrl:hover { background: rgb(10 10 10 / 0.75); border-color: var(--accent); }
.hero__ctrl svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .hero__controls { bottom: var(--s-4); left: var(--s-4); }
  .hero__ctrl { width: 36px; height: 36px; }
}