/* Casa Lumbre. Night and fire: the grill is the light source for the whole page. */

:root {
  --charcoal: #1C1512;
  --coal: #120D0B;
  --chile: #C7332A;
  --chile-hot: #D63B31;
  --agave: #7FA383;
  --masa: #F1E4CB;
  --ash: #BCA98F;
  --bark: #5B4636;
  --line: rgba(241, 228, 203, 0.22);
  --line-strong: rgba(241, 228, 203, 0.42);
  --gutter: clamp(20px, 4vw, 64px);
  --display: 'Gloock', 'Georgia', serif;
  --text: 'Rethink Sans', 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* The sign painter's block shade: eight one-step layers of chile red, then a charcoal keyline. */
  --shade:
    .007em .009em 0 var(--chile), .015em .018em 0 var(--chile), .022em .028em 0 var(--chile),
    .030em .037em 0 #BF3028, .037em .047em 0 #B02C24, .045em .056em 0 #A1271F,
    .052em .066em 0 #93231C, .060em .075em 0 #85201A, .069em .086em 0 var(--coal);
  --shade-sm:
    .012em .012em 0 var(--chile), .024em .024em 0 var(--chile), .036em .036em 0 var(--chile),
    .048em .048em 0 var(--chile), .058em .058em 0 var(--coal);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .34 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--masa);
  font: 400 19px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Film grain over the whole night. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background-image: var(--grain);
  opacity: .06;
  mix-blend-mode: overlay;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
figure { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
section[id], form[id] { scroll-margin-top: 84px; }

:focus-visible { outline: 3px solid var(--masa); outline-offset: 3px; }
.menu-card :focus-visible { outline-color: var(--charcoal); }

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--masa); color: var(--charcoal);
  padding: 12px 18px; font-weight: 700; text-decoration: none; border-radius: 4px;
}
.skip:focus { top: 16px; }

/* Lettering ---------------------------------------------------------------- */

.painted, .painted-sm {
  font-family: var(--display);
  font-weight: 500;
  font-synthesis: none;
  letter-spacing: -.005em;
}
.painted { color: var(--masa); text-shadow: var(--shade); filter: url(#brush); }
.painted-sm { color: var(--masa); text-shadow: var(--shade-sm); }
.ink { font-family: var(--display); font-weight: 500; font-synthesis: none; color: var(--charcoal); text-shadow: var(--shade-sm); }

.section-title { font-size: clamp(48px, 6.2vw, 92px); line-height: .96; }

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 6px;
  font: 700 19px/1 var(--text);
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-red { background: var(--chile); color: #fff; box-shadow: inset 0 0 0 3px var(--chile), inset 0 0 0 4px rgba(241, 228, 203, .5); }
.btn-red:hover { background: var(--chile-hot); box-shadow: inset 0 0 0 3px var(--chile-hot), inset 0 0 0 4px rgba(241, 228, 203, .7); }
.btn-ghost { background: transparent; color: var(--masa); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--masa); }

/* Header ------------------------------------------------------------------- */

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 26px;
  padding: 14px var(--gutter);
  transition: background-color .25s ease;
}
.top.scrolled { background: rgba(18, 13, 11, .94); box-shadow: 0 1px 0 var(--line); }
.nav { margin-left: auto; display: flex; gap: 6px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  font-weight: 600; font-size: 17px; text-decoration: none; color: var(--masa);
  border-radius: 4px; transition: color .18s ease;
}
.nav a:hover, .nav a[aria-current="true"] { color: #fff; text-decoration: underline; text-decoration-color: var(--chile); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.top-phone {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-left: 10px;
  font-weight: 700; font-size: 17px; text-decoration: none; color: var(--masa);
  font-variant-numeric: tabular-nums;
}
.top-phone svg { width: 17px; height: 17px; fill: var(--masa); }
.top-book { margin-left: -6px; }
.top-phone:hover { text-decoration: underline; text-underline-offset: 6px; }
.top-book { min-height: 50px; }

.burger {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 6px;
  position: relative;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--masa);
  transition: transform .25s var(--ease), opacity .2s ease, top .25s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 23px; }
.burger span:nth-child(3) { top: 30px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

/* Phone menu --------------------------------------------------------------- */

.phone-menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; gap: 24px;
  padding: 100px var(--gutter) 22px;
  background: linear-gradient(to bottom, var(--charcoal) 0%, var(--charcoal) 58%, #2A1712 100%);
  overflow-y: auto;
}

.phone-menu[hidden] { display: none; }
.pm-links { display: flex; flex-direction: column; }
.pm-links a {
  display: flex; align-items: center; min-height: 64px; padding: 4px 0 8px;
  font-family: var(--display); font-weight: 500; font-synthesis: none;
  font-size: 40px; line-height: 1.05; text-decoration: none; color: var(--masa);
  border-bottom: 1px solid var(--line);
}
.pm-foot { display: grid; gap: 10px; }
.pm-foot .menu-cta { width: 100%; min-height: 54px; }
.pm-phone {
  display: flex; align-items: center; justify-content: center; min-height: 50px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  font-weight: 700; font-size: 18px; text-decoration: none;
}
.pm-where { font-size: 17px; color: var(--ash); line-height: 1.5; padding-top: 4px; }
body.menu-open { overflow: hidden; }

/* Hero --------------------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  min-height: max(780px, 100svh);
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  background: var(--charcoal);
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--coal); }
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 40% 26%;
  filter: saturate(1.08) contrast(1.06) brightness(.94);
}
/* Shade for the words: deep at the bottom and the left, open at the fire. */
.hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(18, 13, 11, .78) 0%, rgba(18, 13, 11, 0) 20%),
    linear-gradient(to top, rgba(28, 21, 18, .98) 0%, rgba(28, 21, 18, .86) 22%, rgba(28, 21, 18, .2) 52%, rgba(28, 21, 18, 0) 66%),
    linear-gradient(to right, rgba(28, 21, 18, .9) 0%, rgba(28, 21, 18, .55) 30%, rgba(28, 21, 18, 0) 58%);
}
.embers { position: absolute; inset: 0; display: none; pointer-events: none; }
.embers i {
  position: absolute; left: var(--x); top: 38%;
  width: calc(var(--s) - 2px); height: calc(var(--s) - 2px); border-radius: 50%;
  background: #FFC27A;
  mix-blend-mode: screen; opacity: 0;
}

.hero-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 40px;
  padding: 150px var(--gutter) 36px;
}
.hero h1 { font-size: clamp(56px, 9vw, 140px); line-height: .9; }
.hero h1 span { display: block; }
.hero h1 .l1 { padding-left: .02em; }
.lede { margin-top: 30px; max-width: 36ch; font-size: 20px; line-height: 1.5; color: var(--masa); }

.placard {
  text-align: right;
  padding-bottom: 2px;
  text-shadow: 0 2px 14px rgba(18, 13, 11, .85);
}
.placard-status { justify-content: flex-end; }
.placard-status { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--masa); }
.flame { width: 18px; height: 23px; flex: none; margin-top: -3px; }
.flame path { fill: var(--chile-hot); }
.flame .flame-core { fill: #F2A541; }
.placard.closed .placard-status { color: var(--ash); }
.placard.closed .flame path, .placard.closed .flame .flame-core { fill: var(--ash); }
.placard-hours { font-family: var(--display); font-weight: 500; font-synthesis: none; font-size: 52px; line-height: 1.02; margin: 4px 0 8px; color: var(--masa); text-shadow: var(--shade-sm), 0 2px 18px rgba(18, 13, 11, .8); }
.placard-addr { font-size: 19px; line-height: 1.4; }
.placard-link { min-height: 46px; margin-top: 12px; padding: 0 18px; font-size: 17px; background: rgba(18, 13, 11, .55); text-shadow: none; }

/* The dock: Find a Table ---------------------------------------------------- */

.dock {
  position: relative;
  background: var(--coal);
  border-top: 1px solid var(--line);
  padding: 18px var(--gutter) 14px;
}
.dock::before {
  /* Heat along the top edge of the pass. */
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, rgba(199, 51, 42, 0) 0%, var(--chile) 30%, #E2873A 52%, var(--chile) 74%, rgba(199, 51, 42, 0) 100%);
  opacity: .85;
}
.dock-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 26px; margin-bottom: 12px; }
.dock-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.dock-title { font-family: var(--display); font-weight: 500; font-synthesis: none; font-size: 40px; line-height: 1; white-space: nowrap; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.flabel { display: block; padding: 0; margin: 0 0 8px; font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--ash); }
/* A floated legend lays out like a normal label, so every field lines up. */
legend.flabel { float: left; width: 100%; }
legend.flabel + * { clear: both; }

.stepper {
  display: flex; align-items: center; height: 54px; padding: 4px;
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.step {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 5px;
}
.step svg { width: 18px; height: 18px; fill: none; stroke: var(--masa); stroke-width: 2.2; stroke-linecap: round; }
.step:hover { background: rgba(241, 228, 203, .08); }
.step:disabled svg { stroke: var(--ash); opacity: .6; }
.party-out { min-width: 96px; text-align: center; font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }

.select { position: relative; }
.select select {
  appearance: none; -webkit-appearance: none;
  height: 52px; width: 210px; padding: 0 46px 0 16px;
  background: transparent; color: var(--masa);
  border: 1px solid var(--line-strong); border-radius: 6px;
  font-weight: 600; font-size: 18px; cursor: pointer;
}
.select select option { background: var(--coal); color: var(--masa); }
.select svg { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--masa); stroke-width: 2; pointer-events: none; }
.select select:hover { border-color: var(--masa); }

.slots { display: flex; gap: 8px; }
.slot {
  position: relative;
  height: 52px; min-width: 96px; padding: 0 14px;
  background: transparent; color: var(--masa);
  border: 1px solid var(--line-strong); border-radius: 6px;
  font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.slot:hover:not(:disabled) { border-color: var(--masa); }
.slot[aria-pressed="true"] { background: var(--masa); color: var(--charcoal); border-color: var(--masa); }
.slot:disabled {
  color: var(--ash); border-style: dashed; border-color: rgba(241, 228, 203, .2);
  text-decoration: line-through; text-decoration-color: var(--chile); text-decoration-thickness: 2px;
}

.seg { display: flex; min-height: 54px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px; gap: 4px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label {
  display: grid; place-items: center; min-width: 88px; min-height: 44px; padding: 0 14px;
  border-radius: 4px; font-weight: 600; font-size: 18px; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.seg input:checked + label { background: var(--masa); color: var(--charcoal); }
.seg input:focus-visible + label { outline: 3px solid var(--masa); outline-offset: 2px; }
.find { margin-left: auto; min-height: 56px; padding: 0 30px; }

.dock-note { font-size: 17px; color: var(--ash); }
.dock-note.warn { color: var(--masa); }

/* The hold card: shown after Find a Table. */
.hold {
  position: absolute; right: var(--gutter); bottom: calc(100% + 14px); z-index: 5;
  width: min(430px, calc(100vw - 2 * var(--gutter)));
  padding: 24px 24px 22px;
  background: var(--coal);
  border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.hold-label { font-weight: 700; font-size: 17px; color: var(--agave); }
.hold-when { margin-top: 6px; font-family: var(--display); font-weight: 500; font-synthesis: none; font-size: 44px; line-height: 1.02; color: var(--masa); }
.hold-what { margin: 8px 0 16px; font-size: 19px; line-height: 1.45; }
.hold-fields { display: grid; gap: 12px; }
.tf label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 16px; color: var(--ash); }
.tf input {
  width: 100%; height: 52px; padding: 0 14px;
  background: rgba(241, 228, 203, .06); color: var(--masa);
  border: 1px solid var(--line-strong); border-radius: 6px;
  font-size: 18px;
}
.tf input:hover { border-color: var(--masa); }
.tf input[aria-invalid="true"] { border-color: var(--chile-hot); }
.tf input::-webkit-calendar-picker-indicator { filter: invert(.9) sepia(.3); cursor: pointer; }
.hold-err { min-height: 0; font-size: 17px; font-weight: 600; color: #FFB4A8; }
.hold-err:not(:empty) { margin-top: 10px; }
.hold-actions { display: flex; gap: 10px; margin-top: 16px; }
.hold-actions .btn-red { flex: 1; }
.hold-small { margin-top: 8px; font-size: 17px; color: var(--ash); line-height: 1.45; }
.hold-demo { color: var(--agave); }
.hold-done .btn { margin-top: 16px; }

/* Tonight's Menu ------------------------------------------------------------ */

.menu {
  position: relative;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: linear-gradient(to bottom, var(--charcoal) 0%, #221914 55%, var(--charcoal) 100%);
}
.menu-wrap {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.menu-photos { position: sticky; top: 104px; padding-bottom: 120px; }
.mp img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.mp-a { aspect-ratio: 4 / 5; }
.mp-a img { filter: saturate(1.05) contrast(1.04); }
.mp-b {
  position: absolute; right: -28px; bottom: 0; width: 46%; aspect-ratio: 3 / 4;
  border: 8px solid var(--charcoal); border-radius: 6px;
}
.mp-b img { filter: sepia(.38) saturate(1.15) hue-rotate(-8deg) contrast(1.08) brightness(.92); }

.menu-card {
  position: relative;
  color: var(--charcoal);
  background-color: var(--masa);
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 249, 235, .9), rgba(255, 249, 235, 0) 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(196, 160, 110, .32), rgba(196, 160, 110, 0) 70%),
    var(--fiber);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 2px 0 rgba(255, 255, 255, .4) inset;
}
.menu-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.menu-date { font-size: 18px; color: var(--bark); max-width: 30ch; }

.special {
  margin: 28px 0 8px;
  padding: 20px 22px 18px;
  border: 2px solid var(--charcoal); border-radius: 6px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 20px;
}
.special-tag {
  grid-column: 1 / -1; justify-self: start;
  padding: 5px 10px; border-radius: 4px;
  background: var(--chile); color: #fff; font-weight: 700; font-size: 17px; line-height: 1.2;
}
.special-name { grid-column: 1 / -1; margin-top: 8px; font-family: var(--display); font-weight: 500; font-synthesis: none; font-size: 40px; line-height: 1.05; }
.special-desc { grid-column: 1 / -1; font-size: 18px; color: var(--bark); max-width: 52ch; }
.special-left { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 700; font-size: 18px; }
.special-left::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--chile); }
.special-price { margin-left: auto; font-size: 20px; font-variant-numeric: tabular-nums; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 26px 0 0; }
.tab {
  min-height: 48px; padding: 0 14px;
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  font-weight: 700; font-size: 18px; color: var(--bark);
  transition: color .18s ease, border-color .18s ease;
}
.tab:hover { color: var(--charcoal); }
.tab[aria-selected="true"] { color: var(--charcoal); border-bottom-color: var(--chile); }
.panel { padding-top: 18px; border-top: 2px solid rgba(28, 21, 18, .16); }
.panel-sub { font-weight: 700; font-size: 17px; color: var(--bark); margin-bottom: 6px; }
.dishes { list-style: none; margin: 0; padding: 0; }
.dishes li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px;
  padding: 14px 0 16px; border-bottom: 1px solid rgba(28, 21, 18, .14);
  font-size: 18px;
}
.dishes li:last-child { border-bottom: 0; }
.dish { font-weight: 700; font-size: 21px; line-height: 1.3; }
.price { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.desc { grid-column: 1 / -1; color: var(--bark); line-height: 1.5; max-width: 54ch; }
.dishes li.out .dish { text-decoration: line-through; text-decoration-color: var(--chile); text-decoration-thickness: 2px; color: var(--bark); }
.dishes li.out .price { color: var(--chile); }

/* The Fire ----------------------------------------------------------------- */

.fire {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: stretch;
  background: var(--coal);
}
.fire-photo { position: relative; min-height: 720px; overflow: hidden; }
.fire-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; filter: saturate(1.1) contrast(1.06); }
.fire-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, var(--coal) 0%, rgba(18, 13, 11, 0) 22%); }
.fire-copy { padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(64px, 8vw, 120px) clamp(24px, 4vw, 56px); max-width: 640px; }
.fire-lede { margin-top: 24px; font-size: 20px; line-height: 1.6; }
.day { list-style: none; margin: 40px 0 0; padding: 0 0 0 26px; position: relative; }
.day::before {
  content: ''; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(to bottom, var(--ash), var(--chile) 45%, #E2873A 70%, rgba(188, 169, 143, .4));
}
.day li { position: relative; display: grid; grid-template-columns: 178px 1fr; gap: 20px; padding: 12px 0; align-items: baseline; font-size: 18px; }
.day li::before { content: ''; position: absolute; left: -26px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: var(--coal); border: 2px solid var(--chile); }
.day time { font-family: var(--display); font-weight: 500; font-synthesis: none; font-size: 40px; line-height: 1; color: var(--masa); white-space: nowrap; }
.day span { color: var(--masa); }

/* Private Dining: the table photo runs full width, the request panel lies on it. */

.private { position: relative; display: grid; background: var(--charcoal); }
.private-photo { grid-area: 1 / 1; position: relative; min-height: 880px; overflow: hidden; }
.private-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 50%;
  filter: saturate(1.06) contrast(1.06) brightness(.94);
}
.private-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--charcoal) 0%, rgba(28, 21, 18, 0) 16%),
    linear-gradient(to top, var(--charcoal) 0%, rgba(28, 21, 18, 0) 18%),
    linear-gradient(to left, rgba(28, 21, 18, .82) 0%, rgba(28, 21, 18, .25) 42%, rgba(28, 21, 18, 0) 64%);
}
.private-copy {
  grid-area: 1 / 1; position: relative; z-index: 1;
  justify-self: end; align-self: center;
  width: min(600px, calc(100% - 2 * var(--gutter)));
  margin: 96px var(--gutter);
  padding: 40px 40px 36px;
  background: rgba(18, 13, 11, .93);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
}
.private-copy > p { margin-top: 20px; font-size: 19px; }
.private-copy .private-small { color: var(--ash); font-size: 18px; margin-top: 12px; }
.ask { margin-top: 26px; }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ask .btn { margin-top: 18px; width: 100%; }
.ask-done { margin-top: 26px; padding: 22px; background: rgba(241, 228, 203, .05); border: 1px solid var(--line-strong); border-radius: 10px; }
.ask-done-text { margin-top: 8px; font-size: 19px; }

/* Hours -------------------------------------------------------------------- */

.hours {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(80px, 10vw, 130px) var(--gutter);
  background: var(--charcoal);
  align-items: start;
}
.week { margin: 30px 0 0; display: grid; }
.week > div { display: grid; grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 19px; }
.week dt { font-weight: 600; }
.week dd { margin: 0; font-variant-numeric: tabular-nums; }
.week > div.today { color: #fff; }
.week > div.today dt::after { content: ' (Today)'; color: var(--agave); font-weight: 700; }
.where { margin-top: 34px; display: grid; gap: 12px; max-width: 44ch; }
.where p { font-size: 18px; color: var(--ash); }
.where .where-addr { font-size: 21px; color: var(--masa); font-weight: 600; line-height: 1.45; }
.where-phone {
  justify-self: start; display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--display); font-weight: 500; font-synthesis: none; font-size: 40px; text-decoration: none;
}
.where-phone:hover { text-decoration: underline; text-decoration-color: var(--chile); text-underline-offset: 8px; }
.hours-photo { margin-top: 24px; }
.hours-photo img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; border-radius: 4px; filter: saturate(1.05) contrast(1.04); }
.hours-photo figcaption { margin-top: 12px; font-size: 17px; color: var(--ash); }
.hours-drink { margin-top: 160px; }
.hours-drink img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: 4px; filter: saturate(1.08) contrast(1.05); }
.hours-drink figcaption { margin-top: 12px; font-size: 17px; color: var(--ash); }

/* Footer ------------------------------------------------------------------- */

.foot { background: var(--coal); padding: 72px var(--gutter) 40px; border-top: 1px solid var(--line); }
.foot-inner { max-width: 1320px; margin: 0 auto; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.foot-cols p { font-size: 18px; line-height: 1.7; color: var(--ash); }
.foot-cols a { display: inline-flex; align-items: center; min-height: 44px; color: var(--masa); font-weight: 600; text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; text-underline-offset: 6px; }
.foot-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ash); }


/* At wide screens the controls join into one continuous rail. */
@media (min-width: 1280px) {
  .dock-row {
    flex-wrap: nowrap; gap: 0; align-items: stretch;
    border: 1px solid var(--line-strong); border-radius: 12px;
    background: rgba(241, 228, 203, .035);
  }
  .dock-row > .field { padding: 12px 22px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
  .dock-row > .field:first-child { padding-left: 24px; }
  .flabel { margin-bottom: 4px; }
  .stepper { border: 0; height: 46px; padding: 0; margin-left: -12px; }
  .step { height: 46px; }
  .select select { border: 0; height: 46px; width: 200px; padding-left: 0; }
  .select svg { right: 4px; }
  .slots { gap: 6px; }
  .slot { border-color: transparent; height: 46px; min-width: 88px; padding: 0 10px; }
  .slot:hover:not(:disabled) { border-color: var(--line-strong); }
  .slot:disabled { border-color: transparent; }
  .seg { border: 0; padding: 0; min-height: 0; height: 46px; gap: 4px; }
  .seg label { min-height: 46px; border-radius: 6px; }
  .find { align-self: center; margin: 0 10px 0 auto; min-height: 58px; border-radius: 8px; }
}

/* Load moment: the fire catches ------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .motion .hero-img { animation: ignite 1.8s var(--ease) both; }
  .motion .hero h1 { animation: paint 1s var(--ease) .7s both; }
  .motion .slot:not(:disabled) { animation: light .5s ease-out both; animation-delay: calc(1.3s + var(--i) * .14s); }
  .motion .embers { display: block; }
  .motion .embers i { animation: rise var(--d) linear var(--w) infinite; }
  .motion:not(.ready) .hero-img,
  .motion:not(.ready) .hero h1,
  .motion:not(.ready) .slot,
  .motion:not(.ready) .embers i { animation-play-state: paused; }
}
@keyframes ignite {
  0% { filter: saturate(.5) contrast(1.15) brightness(.16); }
  45% { filter: saturate(.85) contrast(1.1) brightness(.62); }
  100% { filter: saturate(1.08) contrast(1.06) brightness(.94); }
}
@keyframes paint {
  from {
    text-shadow: 0 0 0 var(--chile), 0 0 0 var(--chile), 0 0 0 var(--chile), 0 0 0 var(--chile), 0 0 0 var(--chile),
      0 0 0 var(--chile), 0 0 0 var(--chile), 0 0 0 var(--chile), 0 0 0 var(--coal);
  }
}
@keyframes light {
  from { border-color: rgba(241, 228, 203, .1); color: var(--ash); }
}
@keyframes rise {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  12% { opacity: 1; }
  60% { transform: translate3d(calc(var(--dx) * .55), -26vh, 0) scale(.8); opacity: .85; }
  100% { transform: translate3d(var(--dx), -44vh, 0) scale(.35); opacity: 0; }
}

/* Widths ------------------------------------------------------------------- */

@media (max-width: 1099px) {
  .nav, .top-phone { display: none; }
  .burger { display: block; }
  .top-book { margin-left: auto; }
  .top-book + .burger { margin-left: 0; }
  .menu-wrap { grid-template-columns: 1fr; }
  .menu-photos { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; padding-bottom: 0; }
  .mp-a { aspect-ratio: auto; height: 100%; }
  .mp-b { position: static; width: auto; border: 0; }
  .fire { grid-template-columns: 1fr; }
  .fire-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .fire-photo::after { background: linear-gradient(to top, var(--coal) 0%, rgba(18, 13, 11, 0) 30%); }
  .fire-copy { max-width: 760px; padding: 48px var(--gutter) 80px; }
  .private-photo { grid-area: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .private-photo::after { background: linear-gradient(to top, var(--charcoal) 0%, rgba(28, 21, 18, 0) 34%); }
  .private-copy { grid-area: auto; justify-self: center; align-self: start; width: min(720px, calc(100% - 2 * var(--gutter))); margin: -120px auto 80px; }
  .hours { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hours-copy { grid-column: 1 / -1; }
  .hours-drink { margin-top: 24px; }
}

@media (max-width: 767px) {
  body { font-size: 18px; }
  .top { padding-top: 10px; padding-bottom: 10px; gap: 12px; }
  .top-book { display: none; }
  .burger, .top-book + .burger { margin-left: auto; }
  .hero { min-height: 0; }
  .hero-img { object-position: 38% 0%; height: 66%; }
  .hero-media::after {
    background:
      linear-gradient(to bottom, rgba(18, 13, 11, .75) 0%, rgba(18, 13, 11, 0) 16%),
      linear-gradient(to top, var(--charcoal) 40%, rgba(28, 21, 18, .9) 52%, rgba(28, 21, 18, .35) 64%, rgba(28, 21, 18, 0) 74%);
  }
  .embers i { top: 26%; }
  .hero-stage { grid-template-columns: 1fr; gap: 26px; padding: 206px var(--gutter) 30px; }
  .hero h1 { font-size: clamp(44px, 12.4vw, 58px); line-height: 1.05; }
  .lede { margin-top: 16px; font-size: 18px; }
  .placard { text-align: left; }
  .placard-status { justify-content: flex-start; }
  .placard-hours { font-size: 40px; margin: 2px 0 4px; }
  .placard-addr { font-size: 18px; }
  .placard-link { margin-top: 6px; }
  .dock { padding: 32px var(--gutter) 22px; }
  .dock-head { display: block; margin-bottom: 16px; }
  .dock-note { margin-top: 8px; }
  .dock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; align-items: end; }
  .dock-title { grid-column: 1 / -1; }
  .f-party, .f-date { min-width: 0; }
  .stepper { justify-content: space-between; }
  .party-out { min-width: 0; font-size: 17px; }
  .select select { width: 100%; font-size: 17px; padding-right: 40px; }
  .f-time, .f-seat { grid-column: 1 / -1; }
  .slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .slot { min-width: 0; padding: 0 4px; font-size: 17px; }
  .seg label { flex: 1; }
  .find { grid-column: 1 / -1; width: 100%; }
  .hold { position: static; width: auto; margin-top: 14px; box-shadow: none; }
  .menu-card { padding: 26px 18px; }
  .special { padding: 16px; }
  .special-name { font-size: 40px; }
  .tabs { gap: 0; }
  .tab { padding: 0 10px; font-size: 17px; }
  .dish { font-size: 20px; }
  .day li { grid-template-columns: 1fr; gap: 4px; }
  .day li::before { top: 26px; }
  .private-copy { margin-top: -64px; padding: 26px 18px 22px; }
  .ask-grid { grid-template-columns: 1fr; }
  .hours { grid-template-columns: 1fr; }
  .hours-photo, .hours-drink { margin-top: 8px; }
  .hours-drink { display: none; }
  .foot-cols { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 400px) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg label { min-width: 0; }
}

@media (max-width: 359px) {
  .dock-row { grid-template-columns: 1fr; }
}

/* Logo: lockups and favicon. Inline SVG sized in em, 100 viewBox units to 1em of the wordmark. */
/* Header: the comal icon beside the wordmark. The wordmark's em is 40px, the floor for Gloock. */
.brand { display: inline-flex; align-items: flex-end; gap: 0.2em; min-height: 52px; padding: 2px 0; font-size: 40px; line-height: 1; color: var(--masa); text-decoration: none; }
.brand svg { display: block; flex: none; width: auto; }
.brand .lk-icon { height: 1.2em; }
.brand .lk-word { height: 0.911em; }
.brand .lk-two { height: 1.881em; display: none; }
/* Footer: the stacked lockup, the comal above the wordmark. */
.foot-mark { width: min(100%, 640px); }
.foot-mark svg { display: block; width: 100%; height: auto; }
/* Narrow phones: the wordmark alone, then on two lines, so it never drops under 40px. */
@media (max-width: 389px) {
  .brand { align-items: center; }
  .brand .lk-icon { display: none; }
}
@media (max-width: 359px) {
  .brand .lk-word { display: none; }
  .brand .lk-two { display: block; }
}
/* End Logo */