/* / (home) only. Sizes and spacing follow the live BeTheme sections (archive, 7 Oct 2026). */

/* ---------- Hero: silo photo with the logo (live Slider Revolution "homeslider1") ----------
   Live: 800px tall at 1240px and wider, scaling with the width below that (grid 1240 x 800).
   The logo layer is 303 x 212 at 269px from the top of the 800px slide. */
.page-home .home-hero {
  --band-bg: #797979;
  position: relative;
  height: min(800px, 64.5vw);
  padding: 0;
  overflow: hidden;
}
.page-home .home-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.page-home .home-hero__logo {
  position: absolute;
  top: 33.6%;
  left: 50%;
  z-index: 3;
  width: min(303px, 24.4vw);
  height: auto;
  transform: translateX(-50%);
}

/* Rolling photos (assets/home-intro.js adds photos 2 and 3 and the pause button after the
   page loads; the list of photos is at the top of that file). The first photo stays the
   one in the HTML, so the hero shows at once and keeps its text alternative. */
.page-home .home-hero { isolation: isolate; }
.page-home .home-hero__slide { opacity: 0; }
/* On wide screens the see-through menu bar covers the top of the hero. A photo whose
   subject is at its very top (the tap wall) starts below the bar, on black. */
@media (min-width: 768px) {
  .page-home .home-hero__slide--clear { padding-top: var(--header-h); background: #000; }
}

/* Pause or resume (WCAG 2.2.2: the photos move for longer than 5 seconds) */
.page-home .home-hero__pause {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  margin: 0;
  padding: .5em 1.05em .5em .9em;
  border: 2px solid var(--c-yellow);
  border-radius: 999px;
  background: #000;
  color: var(--c-yellow);
  font-family: var(--f-menu);
  font-size: max(14px, calc(var(--fs-body) * .75));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  cursor: pointer;
}
.page-home .home-hero__pause[hidden] { display: none; }
.page-home .home-hero__pause:hover { background: var(--c-yellow); color: #000; }
.page-home .home-hero__pause:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px #000;
}
/* Running: two pause bars. Paused: a circular arrow, the same one the Live Music page
   uses for "Resume motion". Never a play triangle: the photos have no sound and the
   button must not look like a media player. */
.page-home .home-hero__pause-icon { display: block; flex: none; width: 1.05em; height: 1.05em; fill: currentColor; }
.page-home .home-hero__pause-icon--resume { display: none; }
.page-home .home-hero__pause.is-paused .home-hero__pause-icon--pause { display: none; }
.page-home .home-hero__pause.is-paused .home-hero__pause-icon--resume { display: block; }
@media (max-width: 767px) {
  .page-home .home-hero__pause { left: 10px; bottom: 10px; padding: .4em .9em .4em .75em; }
}
html.a11y-contrast .page-home .home-hero__pause { display: none; }

/* ---------- Yellow intro band (live: 40px top, wraps padded 20px 10px 10px) ---------- */
.page-home .home-intro { padding-top: 40px; padding-bottom: 0; }
.page-home .home-intro__col { padding: 20px 10px 10px; }
.page-home .home-intro__col > :last-child { margin-bottom: 15px; }
.page-home .home-intro h1 { margin-bottom: 15px; }
/* with a reader's own wider letter and word spacing on a narrow phone, a long word
   ("Independent") breaks rather than running off the screen */
.page-home .home-intro h1 { overflow-wrap: break-word; }
.page-home .home-intro__hours { margin-left: 5%; }
/* "contact Diane here" sits inside a sentence: an invisible area round it taps as at least
   44px tall (America's floor), as the footer links do. The link is one box (its three words
   stay on one line), so the area and the focus ring hug the words. No other link is within
   22px above or below it, so the area never meets another. */
.page-home .home-intro p > a[href^="mailto:"] { position: relative; display: inline-block; }
.page-home .home-intro p > a[href^="mailto:"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* live: the map sits in a five-sixth column, centred in it */
.page-home .home-intro__map { width: 83.333%; }
.page-home .home-intro__map img { display: block; margin: 0 auto; }
/* Draft addition: the map and the words "Get directions" under it are one link to directions
   (data-directions; site.js picks Apple Maps or Google Maps). The link is exactly as wide as
   the map and runs down to the bottom of the words, so its one focus ring goes round both,
   and the whole of it, map, gap and words, is the tap area (far over 44px tall). */
.page-home .home-intro__map-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  font-weight: 700;
  text-align: center;
}
.page-home .home-intro__map-link:hover img { opacity: .85; }
.page-home .home-intro__directions { display: block; margin-top: 10px; }
/* High contrast mode paints every box black; the map's lines are black on a see-through
   picture, so it gets a white card to stay readable */
html.a11y-contrast .page-home .home-intro__map img { background: #fff; }

/* ---------- Dark band: tap list, pizza, eats (live: 30px band, 20px wrap) ---------- */
.page-home .home-menus { padding-top: 30px; padding-bottom: 30px; }
.page-home .home-menus__grid { padding: 20px; }
.page-home .home-menu { text-align: center; }
.page-home .home-menu p { margin: 0 0 15px; }

/* Column titles. Live they are small pictures of words (ON TAP Today, PIZZA, EATS:
   white slab letters over a red rule); real text here so it reads and scales. */
.page-home .home-menu__title {
  width: fit-content;
  /* live: all three pictures carry the same 213px red rule, 3px thick, under the words */
  min-width: min(9.2em, 100%);
  max-width: 100%;
  margin: 0 auto 26px;
  padding: 0 .7em .3em;
  border-bottom: 3px solid #ca4654;
  color: var(--c-on-dark);
  font-family: var(--f-head);
  /* live pictures are a fixed 300px wide, so the lettering is the same size at every
     width (about 23px); these em values keep it there and still grow in large text mode */
  font-size: 1.16em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #8d8e8c;
}
.page-home .home-menu__script {
  margin-left: .1em;
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

@media (max-width: 959px) { .page-home .home-menu__title { font-size: 1.365em; } }
@media (max-width: 767px) { .page-home .home-menu__title { font-size: 1.45em; } }

/* live: line-height 98% on these two-and-three-line entries */
.page-home .home-menu__item { line-height: 1.15; }
.page-home .home-menu__cat { font-size: .8em; line-height: 1.05; }
.page-home .home-menu__note { color: var(--c-price); font-size: .86em; }
.page-home .home-menu__size { text-decoration: underline; text-underline-offset: .12em; }
/* "READ ABOUT Chains Required" and "READ MORE about Cerveza El Dorado" stand on lines of
   their own: an invisible area round each taps as at least 44 by 44, as the footer links
   do. Nothing moves and the focus ring still hugs the words; no other link is near them. */
.page-home .home-menu__more,
.page-home .home-blog__more { position: relative; display: inline-block; }
.page-home .home-menu__more::before,
.page-home .home-blog__more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* ---------- Photo band: live music (live: 600px, 400px under 960, 200px under 768) ---------- */
.page-home .home-photo {
  height: 600px;
  padding: 0;
  background-position: left top;
}
@media (max-width: 959px) { .page-home .home-photo { height: 400px; } }
@media (max-width: 767px) { .page-home .home-photo { height: 200px; } }

/* ---------- Latest blog post (live: 60px top; picture one-half, text one-third) ---------- */
.page-home .home-blog { padding-top: 60px; padding-bottom: 40px; }
.page-home .home-blog .fancy-heading { margin-bottom: 40px; }
.page-home .home-blog__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.page-home .home-blog__img img,
.page-home .home-taproom__img img { display: block; width: 100%; }
.page-home .home-blog__text h3 { margin-bottom: 15px; }
@media (min-width: 768px) {
  .page-home .home-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .home-blog__text { max-width: 65.3%; }
}

/* ---------- The Taproom (live: 50px top, 30px bottom plus the 40px column margin) ---------- */
.page-home .home-taproom { padding-top: 50px; padding-bottom: 70px; }
.page-home .home-taproom__text > :last-child { margin-bottom: 0; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 959px) {
  .page-home .home-blog__text { max-width: none; }
}
@media (max-width: 767px) {
  .page-home .home-intro { padding-top: 30px; }
  .page-home .home-intro__col { padding: 10px 0 0; }
  /* The accessibility toolbar (44px wide plus its 1px white ring, fixed at the right edge)
     opens beside the title at every phone height, never over the photo: its top edge is
     level with the title's first line (the header, the photo at 64.5% of the width, the
     band's 30px and the column's 10px below the top). A window too short for that (a phone
     on its side) keeps it whole, 8px above the bottom. The title's lines stop 9px short of
     the toolbar's ring, so no letter is ever under it; the rest of the page scrolls past. */
  .page-home .home-intro h1 { padding-right: 21px; }
  body.page-home .a11y-toolbar { top: min(calc(var(--header-h) + 64.5vw + 40px + 45px), calc(100% - 52px)); }
  .page-home .home-intro__map { width: 100%; }
  .page-home .home-menus__grid { padding: 20px 0; gap: 30px; }
  .page-home .home-blog { padding-top: 50px; }
  .page-home .home-taproom { padding-top: 44px; padding-bottom: 50px; }
}

/* The live line breaks inside the Veggie and Combination notes balance the lines in a
   wide column; in the narrow tablet columns they leave one word alone, so they give way. */
@media (min-width: 768px) and (max-width: 1100px) {
  .page-home .home-menu__soft { display: none; }
}

/* ---------- Fly-in intro: once per browser session, home page only ----------
   assets/home-intro.js builds it. A night road with the yellow centre line rushing at
   you; the Hwy 50 shield grows out of the distance like a sign you drive up to, then
   rushes at you, fills the screen and flies off over the top, and the page opens. About
   2.8 seconds. Never with reduced motion or high contrast. Only transform and opacity
   move.
   Timeline: 0 to 1.56s the sign comes up the road; 1.56 to 1.92s it settles; 1.92 to
   2.36s it flies past at full strength; 2.36 to 2.72s the empty scene fades and the page
   shows. The scene only fades once the sign has left the screen, so the sign is never
   see-through over the page. Skip intro fades out from 1.75 to 2.05s: the growing sign
   first reaches its corner at 2.12s at the soonest (measured from 320px phones to wide
   screens, large text too), and the menu shows through from 2.36s, so the pill never
   sits over the sign or over the "Contact Us" link. */

/* The accessibility toolbar is fixed inside the header, and the header (z-index 60) is
   its own layer, so the scene (75) would cover the toolbar. While the scene is up the
   header gives up its layer: the toolbar (80) then sits over the scene, and the rest of
   the header stays under it. home-intro.js puts the header back as the scene fades. */
html.hwy-intro-pending .site-header,
html.hwy-intro-on .site-header { z-index: auto; }
/* Ended early by a click or a key: during the short fade the menu bar sits over the
   scene, so a click on the toolbar reaches it */
html.hwy-intro-lift .site-header { z-index: 76; }

/* Until the overlay is in place (a moment), a plain black cover. If anything goes
   wrong, it lifts by itself after two seconds. */
html.hwy-intro-pending body.page-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 75;
  background: #000;
  animation: hwy-intro-failsafe 0s linear 2s forwards;
}
@keyframes hwy-intro-failsafe { to { visibility: hidden; } }

/* z-index 75: over the header (60), under the accessibility toolbar (80, see above) and
   the skip link (1000) */
.page-home .hwy-intro {
  --h: 1vh;
  --horizon: 46%;
  --road: calc(var(--h) * 60);   /* half the road's width where it meets the bottom of the screen */
  --lap: calc(var(--h) * 50);    /* one dash and one gap */
  position: fixed;
  inset: 0;
  z-index: 75;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  container-type: size;
  -webkit-tap-highlight-color: transparent;
  animation: hwy-intro-open .36s ease-out 2.36s both;
}
@supports (height: 1cqh) {
  .page-home .hwy-intro { --h: 1cqh; }
}
@keyframes hwy-intro-open { to { opacity: 0; } }

.page-home .hwy-intro__art {
  position: absolute;
  inset: 0;
  transform-origin: 50% var(--horizon);
  animation: hwy-intro-push .84s cubic-bezier(.5, 0, .9, .5) 1.92s both;
}
@keyframes hwy-intro-push { to { transform: scale(2.1); } }   /* the road keeps rushing at you as it fades */

/* Night sky with a yellow glow on the horizon */
.page-home .hwy-intro__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 24% at 50% var(--horizon), rgba(250, 216, 25, .5), rgba(250, 216, 25, .14) 45%, rgba(250, 216, 25, 0) 72%),
    linear-gradient(to bottom, #000 0, #06060a 22%, #17140a calc(var(--horizon) - 4%), #2b2408 var(--horizon), #000 var(--horizon));
}
.page-home .hwy-intro__hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - var(--horizon));
  width: 100%;
  height: calc(var(--h) * 9);
}
.page-home .hwy-intro__hills-far { fill: #15130c; }
.page-home .hwy-intro__hills-near { fill: #070706; }

/* The ground: a 3D floor seen from just above, vanishing at the horizon */
.page-home .hwy-intro__ground {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon);
  bottom: 0;
  overflow: hidden;
  perspective: calc(var(--h) * 54);   /* about the ground's own height: a wide, low view */
  perspective-origin: 50% 0;
  background: linear-gradient(to bottom, #0d0b05, #000 35%);
}
/* Asphalt (flat, drawn once) with white edge lines, lined up with the 3D lanes */
.page-home .hwy-intro__road {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 60% at 50% 100%, rgba(255, 236, 170, .16), rgba(255, 236, 170, 0) 70%),
    linear-gradient(to bottom, #090909, #1c1c1c 55%, #2a2a2a);
  clip-path: polygon(50% 0, calc(50% + var(--road)) 100%, calc(50% - var(--road)) 100%);
}
.page-home .hwy-intro__road::before,
.page-home .hwy-intro__road::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .78);
}
.page-home .hwy-intro__road::before {
  clip-path: polygon(50% 0, calc(50% - var(--road) + var(--h) * 2) 100%, calc(50% - var(--road) + var(--h) * 4) 100%);
}
.page-home .hwy-intro__road::after {
  clip-path: polygon(50% 0, calc(50% + var(--road) - var(--h) * 2) 100%, calc(50% + var(--road) - var(--h) * 4) 100%);
}
/* The lanes lie flat on the road (rotateX 90deg) and slide toward you, one lap at a time */
.page-home .hwy-intro__lane {
  position: absolute;
  bottom: 0;
  height: 1200%;
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
  animation: hwy-intro-drive .2s linear infinite;
}
.page-home .hwy-intro__lane--centre {
  left: calc(50% - var(--h) * 1.5);
  width: calc(var(--h) * 3);
  background: repeating-linear-gradient(to bottom, var(--c-yellow) 0, var(--c-yellow) calc(var(--h) * 21), transparent calc(var(--h) * 21), transparent var(--lap));
}
.page-home .hwy-intro__lane--left,
.page-home .hwy-intro__lane--right {
  width: calc(var(--h) * 1.6);
  background: repeating-linear-gradient(to bottom, #ffe9a0 0, #ffe9a0 calc(var(--h) * 2.5), transparent calc(var(--h) * 2.5), transparent calc(var(--lap) / 2));
  opacity: .8;
}
.page-home .hwy-intro__lane--left { left: calc(50% - var(--road) + var(--h) * 7); }
.page-home .hwy-intro__lane--right { left: calc(50% + var(--road) - var(--h) * 8.6); }
@keyframes hwy-intro-drive {
  from { transform: rotateX(90deg) translateY(0); }
  to { transform: rotateX(90deg) translateY(var(--lap)); }
}
/* Glow where the road meets the horizon (also hides the far end of the lanes) */
.page-home .hwy-intro__haze {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--horizon) - var(--h) * 2);
  height: calc(var(--h) * 14);
  background:
    radial-gradient(ellipse 30% 60% at 50% 20%, rgba(255, 214, 64, .55), rgba(255, 214, 64, 0) 70%),
    linear-gradient(to bottom, rgba(43, 36, 8, 1) 0, rgba(43, 36, 8, .9) 22%, rgba(13, 11, 5, 0) 100%);
}

/* The sign: starts far down the road, grows toward you, settles, then flies past.
   Flying past, it rushes to the camera (z 575 of a 600px perspective, about 24 times
   its size) while rising, so it sweeps out over the top of the screen at full strength
   instead of fading. It drops out only at the very end, when it is already off screen. */
.page-home .hwy-intro__signs {
  position: absolute;
  inset: 0;
  perspective: 600px;
  perspective-origin: 50% var(--horizon);
}
.page-home .hwy-intro__logo {
  position: absolute;
  left: 50%;
  top: var(--horizon);
  width: min(62vw, 560px, 72vh);
  max-width: none;
  height: auto;
  transform: translate3d(-50%, -72%, -9000px);
  opacity: 0;
  animation: hwy-intro-sign 2.36s linear both;
}
@keyframes hwy-intro-sign {
  0% { transform: translate3d(-50%, -72%, -9000px); opacity: 0; animation-timing-function: cubic-bezier(.12, .62, .3, 1); }
  8.8% { opacity: 1; }
  66.1% { transform: translate3d(-50%, -72%, 0); animation-timing-function: ease-out; }
  72.7% { transform: translate3d(-50%, -72%, 34px); animation-timing-function: ease-in-out; }
  81.5% { transform: translate3d(-50%, -72%, 0); animation-timing-function: cubic-bezier(.45, 0, .8, .55); }
  99.6% { opacity: 1; }
  100% { transform: translate3d(-50%, -115%, 575px); opacity: 0; }
}

/* Skip intro: a real button, top right, from the first frame */
.page-home .hwy-intro__skip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  margin: 0;
  padding: .55em 1.15em .55em 1.25em;
  border: 2px solid #000;
  border-radius: 999px;
  background: var(--c-yellow);
  color: #000;
  font-family: var(--f-menu);
  font-size: max(15px, calc(var(--fs-body) * .8));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  /* gone (and out of the tab order) by 2.05s; home-intro.js ends the intro at 1.75s if
     the button has keyboard focus, so focus is never left on it while it fades */
  animation: hwy-intro-skip-out .3s ease-in 1.75s both;
}
@keyframes hwy-intro-skip-out { to { opacity: 0; visibility: hidden; } }
.page-home .hwy-intro__skip:hover { background: #fff; }
.page-home .hwy-intro__skip:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* a small chevron, drawn so nothing extra is read out */
.page-home .hwy-intro__skip-arrow {
  width: .5em;
  height: .5em;
  margin-right: .15em;
  border-top: .15em solid currentColor;
  border-right: .15em solid currentColor;
  transform: rotate(45deg);
}
@media (max-width: 767px) {
  .page-home .hwy-intro__logo { width: min(80vw, 72vh); }
  .page-home .hwy-intro__skip { top: 12px; right: 12px; }
}
@media print {
  .page-home .hwy-intro, .page-home .home-hero__pause { display: none !important; }
}