/* Red Red Wine Bar + Bistro — site styles. Built by Plaine Studios. */

/* ------------------------------------------------------------------ fonts */

/* The display faces look nothing like a fallback, so text in them waits for the font (they're preloaded). */
@font-face { font-family: 'Skin & Bones'; src: url(../fonts/skinbones.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Turnpike'; src: url(../fonts/turnpike.woff2) format('woff2'); font-display: block; }

@font-face { font-family: 'Spectral'; font-weight: 500; src: url(../fonts/spectral-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: 'Spectral'; font-weight: 500; src: url(../fonts/spectral-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: 'Spectral'; font-weight: 500; font-style: italic; src: url(../fonts/spectral-500i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: 'Spectral'; font-weight: 500; font-style: italic; src: url(../fonts/spectral-500i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: 'Spectral'; font-weight: 600; src: url(../fonts/spectral-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: 'Spectral'; font-weight: 600; src: url(../fonts/spectral-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: 'Spectral'; font-weight: 700; src: url(../fonts/spectral-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: 'Spectral'; font-weight: 700; src: url(../fonts/spectral-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; src: url(../fonts/nunito-sans-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; src: url(../fonts/nunito-sans-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }

/* ------------------------------------------------------------------ tokens */

:root {
  --wine: #8e0c3a;
  --wine-dark: #6e092d;
  --ink: #333;
  --muted: #666;
  --label: #838487;
  --label-light: #a7a9ac;
  --footer: #222;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', Helvetica, Arial, sans-serif;
  --display: 'Turnpike', Helvetica, Arial, sans-serif;
  --wordmark: 'Skin & Bones', Helvetica, Arial, sans-serif;

  --wrap: min(80%, 1080px);
  --card: min(80%, 1152px);
  --gutter: 60px;
  --paper: image-set(url(/assets/img/photos/tea_shop_42-1200.avif) type("image/avif"), url(/uploads/2023/05/tea_shop_42.jpg) type("image/jpeg"));

  /* job application form (common.css) */
  --form-accent: var(--ink);
  --form-strong: var(--wine);
  --form-line: #ddd;
  --form-soft: #f6f1f3;
  --form-text: #000;
  --form-muted: var(--muted);
  --form-sans: var(--serif);
  --form-serif: var(--serif);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  /* The footer stays at the bottom of the window on short pages. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  font: 500 14px/1.7 var(--serif);
  color: var(--muted);
  background: #fff;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; }
a { color: var(--wine); }
h1, h2, h3 { margin: 0; padding-bottom: 10px; font-weight: 500; line-height: 1.3; color: var(--ink); }
/* Body text avoids a lone word on its last line; headings and the short centered
   paragraphs break into even lines. */
p, li, dt, dd, label, legend { text-wrap: pretty; }
h1, h2, h3,
.hero__intro p, .intro-card p, .photo-band p, .menu-section__head p { text-wrap: balance; }
p { margin: 0; }

.wrap { width: var(--wrap); margin-inline: auto; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }

.button {
  display: inline-block;
  padding: 16px 26px;
  background: var(--wine);
  font: 700 14px/24px var(--sans);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: background-color .2s;
}
.button:hover { background: var(--wine-dark); }

.paper { background: #fff var(--paper) 100% 50% / cover; }

/* Photo backgrounds that scroll at 70% speed. The photo is 30vh taller than its
   section; site.js sets --shift so it lines up with the section's top edge when
   that edge reaches the top of the window. */
.parallax { position: relative; isolation: isolate; overflow: hidden; }
.parallax::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + 30vh);
  z-index: -2;
  background: var(--bg) center top / cover no-repeat;
  transform: translateY(var(--shift, 0));
  will-change: transform;
}
.parallax::after { content: ''; position: absolute; inset: 0; z-index: -1; }

/* Scroll-in animations: an element with data-reveal starts offset and/or
   transparent and settles into place once site.js sees it on screen.
   Distances are a share of the element's own size. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: var(--reveal-opacity, 1); translate: var(--reveal-x, 0) var(--reveal-y, 0); }
  [data-reveal].is-revealed { animation: reveal 1s ease-in-out both; }
}
@keyframes reveal { to { opacity: 1; translate: none; } }
[data-reveal] { --reveal-x: 0; --reveal-y: 0; --reveal-opacity: 1; } /* don't inherit a parent's */
[data-reveal="drop"] { --reveal-y: -6%; }
[data-reveal="drop-in"] { --reveal-y: -10%; --reveal-opacity: 0; }
[data-reveal="fade-in"] { --reveal-opacity: 0; }
[data-reveal="from-left"] { --reveal-x: -20%; --reveal-opacity: 0; }
[data-reveal="from-right"] { --reveal-x: 20%; --reveal-opacity: 0; }
[data-reveal="drift"] { --reveal-x: -4%; }

/* ------------------------------------------------------------------ header */

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; transform: translateY(-100%); transition: transform .4s ease; }
.is-scrolled .site-header { transform: none; }

.phone-bar { background: var(--wine); }
.phone-bar .wrap { padding: 8px 0; }
.phone-bar a { display: inline-flex; align-items: center; gap: 4px; font: 700 14px/21px var(--serif); color: #fff; text-decoration: none; }
.phone-bar svg { fill: currentColor; }

.main-bar { background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .1); }
.main-bar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 54px; }
.logo img { display: block; width: 292px; }

.site-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.site-nav li + li { margin-left: 22px; }
.site-nav a { display: block; padding: 16px 0; font: 600 16px/1 var(--serif); color: var(--wine); text-decoration: none; }
.site-nav a:hover { opacity: .7; }

.nav-toggle { display: none; }

/* ------------------------------------------------------------------ heroes */

.hero { padding: 142px 0; text-align: center; color: #fff; background-color: #1c1416; } /* dark until the photo loads */
.hero::after { background: rgb(0 0 0 / .5); }
.hero__inner { width: min(80%, 800px); margin-inline: auto; }
.hero h1 { font-size: 80px; line-height: 112px; letter-spacing: 6px; text-transform: uppercase; color: #fff; }
.hero--narrow-title .hero__inner { width: min(80%, 870px); }
.hero--narrow-title h1 { letter-spacing: 2px; }
.hero__intro p { font-size: 22px; line-height: 44px; color: #fff; }
.hero__intro a { color: #fff; text-decoration: none; }
.hero__intro p:not(:last-child) { padding-bottom: 22px; }
.hero .button { margin-top: 54px; }
.hero--tall { padding: 257px 0 315px; }
.page-events .hero { padding-top: 157px; }

.hero--home { padding: 255px 0 315px; }
.hero--home .hero__inner { width: min(80%, 872px); }
.hero__kicker,
.hero__sub {
  font-family: var(--display);
  text-transform: uppercase;
  color: #fff;
}
.hero__kicker {
  padding-bottom: 20px;
  border-top: 1px solid rgb(255 255 255 / .4);
  padding-top: 20px;
  font-weight: 900;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 12px;
  text-shadow: 7px -2px 17px #000;
}
.hero .hero__wordmark {
  font: 500 180px/144px var(--wordmark);
  letter-spacing: 0;
  text-shadow: 0 54px 180px #000;
}
.hero__sub {
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / .4);
  font-weight: 700;
  font-size: 34px;
  line-height: 54px;
  letter-spacing: 10px;
  text-shadow: 12px -3px 29px #000;
}

/* ------------------------------------------------------------------ home */

.intro-card {
  position: relative;
  width: var(--card);
  margin: -88px auto 0;
  padding: 92px 10% 147px;
  text-align: center;
}
.intro-card h2 { font-size: 36px; line-height: 43px; }
.intro-card p { max-width: 700px; margin: 10px auto 0; font-size: 21px; line-height: 46px; }
.intro-card .button { margin-top: 54px; }

.photo-band {
  padding: 147px 0 207px;
  text-align: center;
  color: #fff;
  background: linear-gradient(rgb(99 99 99 / .6), rgb(99 99 99 / .6)), var(--bg) center / cover no-repeat;
}
.photo-band__inner { width: var(--wrap); margin-inline: auto; }
.photo-band h2 { font-size: 60px; line-height: 78px; color: #fff; text-shadow: 0 0 30px rgb(0 0 0 / .4); }
.photo-band p { max-width: 700px; margin: 10px auto 54px; font-size: 21px; line-height: 46px; color: #fff; text-shadow: 11px 2px 16px rgb(0 0 0 / .8); }
.photo-band p a { color: #fff; }
.photo-band__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 36px; }
.photo-band__buttons .button { justify-self: center; }

/* ------------------------------------------------------------------ inner pages */

.page-body { padding: 55px 0 288px; color: #000; }
.page-body p { font-size: 18px; line-height: 40px; padding-bottom: 18px; }
.page-body a { text-decoration: none; }
.fade-photo { position: relative; isolation: isolate; background: var(--bg) center / cover no-repeat; }
.fade-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, #fff 30%, rgb(255 255 255 / 0)); }

.label { font: 500 30px/30px var(--display); color: var(--label); text-transform: uppercase; }
.hours p { padding-bottom: 18px; }
.hours strong { font-weight: 700; color: #000; }
/* Each day sits with its hours; the space goes between days. */
.hours__heading { font-weight: 700; color: #000; }
.hours__days { display: grid; gap: 16px; margin: 0 0 32px; font-size: 18px; line-height: 28px; }
.hours__days dt { font-weight: 700; color: #000; }
.hours__days dd { margin: 0; }
.hours__special { font-weight: 700; color: var(--wine); }

.map { display: block; width: 100%; max-width: 500px; aspect-ratio: 1; border: 0; }

.parking { margin-top: 18px; }
.parking .map { margin-top: 20px; }
.parking p { line-height: 28px; }
.button-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 29px; padding-top: 57px; }

.backstory h2 { font-size: 60px; line-height: 78px; }
.backstory img { width: 100%; margin-top: 10px; }
.page-about .page-body { padding-top: 147px; }

.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; margin-top: 90px; }
.photo-grid a { display: block; border: 5px solid var(--label-light); }
.photo-grid img { display: block; width: 100%; aspect-ratio: 215 / 127; object-fit: cover; }

.events.page-body { padding: 90px 0 90px; }
/* There are only ever a few events, so each gets room: one event spans the column,
   more go two across. Posters are never taller than most of the screen. */
.event-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 80px 60px; text-align: center; color: var(--muted); }
.event-day img { display: block; width: auto; max-width: 100%; max-height: 70vh; margin: 0 auto 32px; }
/* Date as a small display-face label, the title like a dish name, then the lineup. */
.event-day .event-day__date { padding-bottom: 10px; font: 500 16px/24px var(--display); letter-spacing: .05em; text-transform: uppercase; text-wrap: balance; color: var(--wine); }
.event-day .event-day__title { padding-bottom: 14px; font-size: 40px; line-height: 48px; color: var(--ink); }
.event-day .event-day__lineup { padding-bottom: 0; font-size: 20px; line-height: 34px; color: var(--muted); }
.events__empty { font-size: 20px; line-height: 34px; text-align: center; text-wrap: balance; color: var(--muted); }
/* With no events, the note sits centered in the space between the photo and the footer. */
.page-events main { display: flex; flex-direction: column; }
.events:has(.events__empty) { flex: 1; display: grid; align-content: center; padding: 80px 0; }

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

.menu-section { padding: 54px 0; text-align: center; }
.menu-section--paper { background: #fff var(--paper) 100% 100% / cover; }
.menu-section--photo::after { background: linear-gradient(#fff 15%, rgb(255 255 255 / .55)); }
.menu-section--photo:has(.menu-grid) { padding: 120px 0; }
.menu-section--lead {
  position: relative;
  width: var(--card);
  margin: -88px auto 0;
  padding: 19px 0 147px;
  background-position: 100% 50%;
}
.menu-section--lead .menu-section__head p { font-size: 22px; line-height: 48px; }

.menu-section__head { width: var(--wrap); margin: 0 auto 54px; padding-top: 27px; }
.menu-section__head h2 { font-size: 60px; line-height: 78px; }
.menu-section__head .line { display: block; text-wrap: balance; } /* each written line balances on its own */
.menu-section__head p { max-width: 760px; margin: 10px auto 0; font-size: 21px; line-height: 46px; color: var(--muted); }

.menu-card { display: grid; text-align: left; color: #555; } /* descriptions, lists, notes; dish names stay --ink */
.menu-section--photo .menu-card { width: var(--card); margin: 20px auto 0; padding: 27px 25px; background: rgb(255 255 255 / .8); }
.menu-section--paper .menu-card { width: var(--wrap); margin: 0 auto; }
.menu-section--lead .menu-card { width: 80%; }

.menu-grid { grid-template-columns: repeat(var(--columns), 1fr); gap: 54px 51px; }
.menu-section--photo .menu-grid { column-gap: 60px; }
.menu-columns { grid-template-columns: repeat(var(--columns), 1fr); gap: 0 51px; }
.menu-section--photo .menu-columns { width: var(--wrap); padding: 27px 25px; }
.menu-section--photo .menu-card--narrow { width: min(80%, 856px); }

.dish h3 { font-size: 26px; line-height: 26px; }
.dish h3 em { font-size: 16px; }
.dish p { font-size: 16px; line-height: 24px; }
.dish ul { margin: 6px 0 0; padding-left: 20px; font-size: 16px; line-height: 24px; }
.dish i, .dish em, .dish__extras { font-style: italic; }
.dish ul + .dish__extras { margin-top: 28px; } /* a footnote to the list, like the Champagne Bar's flight */
.menu-columns .dish { margin-bottom: 28px; }
.menu-grid[style*="--columns: 6"] { gap: 54px 60px; }
.menu-grid[style*="--columns: 6"] .dish h3 { font-size: 23px; line-height: 23px; }

/* A heading sits closer to its own dishes than to the group above it. */
.menu-subheading { margin: 0 0 20px; padding-bottom: 0; font: 500 30px/30px var(--display); text-transform: uppercase; color: var(--label-light); }
.menu-column > * + .menu-subheading { margin-top: 52px; } /* collapses with the dish's 28px margin */
.menu-note, .menu-list { margin: 0 0 28px; font-size: 16px; line-height: 24px; }

/* ------------------------------------------------------------------ jobs */

.page-jobs .hero__inner { width: min(80%, 800px); }
.page-jobs .page-body { padding: 120px 0 50px; }
.wrap--wide { width: min(80%, 1152px); }
.form-title { font-size: 26px; line-height: 26px; margin-bottom: 40px; }
.form-section > legend { font-weight: 500; }
#application { scroll-margin-top: 120px; }
.application .button { margin-top: 10px; border: 0; cursor: pointer; }

/* ------------------------------------------------------------------ footer */

.footer-links { background: var(--wine); }
.footer-links ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin-block: 0; padding: 14px 0; list-style: none; }
.footer-links a { font: 600 14px/24px var(--serif); color: #fff; text-decoration: none; }
.footer-links a:hover { opacity: .7; }
.footer-bottom { background: var(--footer); }
.footer-bottom .wrap { display: flex; justify-content: flex-end; gap: 20px; padding: 15px 0; }
.footer-bottom a { color: #ddd; }
.footer-bottom svg { display: block; height: 24px; width: auto; fill: currentColor; }

/* ------------------------------------------------------------------ responsive */

/* Tablets and phones: columns stack, the header sits at the top of the page. */
@media (max-width: 980px) {
  :root { --gutter: 30px; }

  .site-header { position: relative; transform: none; }
  .phone-bar .wrap { text-align: center; }
  .main-bar .wrap { position: relative; min-height: 80px; }
  .logo img { width: 152px; }

  .nav-toggle {
    display: block;
    /* A 32×24 icon with a 44×44 tap area (the padding), laid out as 32×24. */
    width: 44px;
    height: 44px;
    margin: -10px -6px;
    padding: 10px 6px;
    border: 0;
    background-origin: content-box;
    background: linear-gradient(var(--wine) 0 0) 0 2px / 100% 2px no-repeat,
                linear-gradient(var(--wine) 0 0) 0 11px / 100% 2px no-repeat,
                linear-gradient(var(--wine) 0 0) 0 20px / 100% 2px no-repeat;
    cursor: pointer;
  }
  .nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    display: none;
    padding: 5% 20px;
    border-top: 3px solid var(--wine);
    background: #fff;
    box-shadow: 0 2px 5px rgb(0 0 0 / .1);
  }
  .nav-toggle[aria-expanded="true"] + .site-nav { display: block; }
  .site-nav ul { display: block; }
  .site-nav li + li { margin: 0; }
  .site-nav a { padding: 10px 5%; border-bottom: 1px solid rgb(0 0 0 / .03); }

  .columns,
  .photo-band__buttons,
  .event-days { grid-template-columns: 1fr; }
  .menu-grid,
  .menu-columns { grid-template-columns: 1fr; gap: 30px; }
  .photo-grid { gap: 30px; }

  .hero { padding: 88px 0; }
  .page-events .hero, .page-jobs .hero { padding-top: 96px; }
  .hero--tall, .hero--home { padding: 149px 0 180px; }
  .hero h1 { font-size: 40px; line-height: 56px; }
  .hero .hero__wordmark { font-size: 100px; line-height: 80px; }
  .hero__sub { font-size: 23px; line-height: 37px; }

  .photo-band h2, .menu-section__head h2, .backstory h2 { font-size: 40px; line-height: 52px; }
  .menu-section--paper { padding: 50px 0; }
  .page-body { padding: 43px 0 153px; }

  .footer-links ul { justify-content: center; text-align: center; }
  .footer-bottom .wrap { justify-content: center; }
}

@media (max-width: 767px) {
  .hero { padding: 57px 0; }
  .page-events .hero, .page-jobs .hero { padding-top: 60px; }
  .hero--tall, .hero--home { padding: 87px 0 102px; }
  .hero .hero__wordmark { font-size: 69px; line-height: 55px; }
  .hero__kicker { font-size: 14px; line-height: 21px; padding-block: 12px; }
  .hero__sub { font-size: 12px; line-height: 19px; padding-top: 8px; }
  .hero__intro p { font-size: 18px; line-height: 34px; }

  .hero--home .button { display: none; }
  .menu-subheading { font-size: 24px; line-height: 26px; }
  .event-day .event-day__title { font-size: 30px; line-height: 38px; }
  .event-day .event-day__lineup { font-size: 18px; line-height: 30px; }
  /* Phones get the smaller photo copies (photoVars() sets --bg-small). */
  .parallax::before, .fade-photo { background-image: var(--bg-small, var(--bg)); }
  .photo-band { background-image: linear-gradient(rgb(99 99 99 / .6), rgb(99 99 99 / .6)), var(--bg-small, var(--bg)); }
  .intro-card h2 { font-size: 28px; line-height: 36px; }
  /* Balancing only works up to six lines; longer centered blocks on phones fall back to
     avoiding a lone last word instead. */
  .intro-card h2, .intro-card p, .photo-band p, .hero__intro p { text-wrap: pretty; }
  .menu-section__head p { font-size: 18px; line-height: 32px; }
  .intro-card, .menu-section--lead { width: 90%; }
  .intro-card { padding-inline: 7%; }
  .menu-section--photo .menu-card { width: 90%; padding: 27px 6%; }
  .menu-section--lead .menu-card { width: 84%; }
  .photo-grid { grid-template-columns: 1fr; }
  .page-body { padding-bottom: 75px; }
  .page-about .page-body { padding-top: 47px; }
  .events.page-body { padding: 50px 0 60px; }
}

/* The smallest phones: long button labels and one-word page titles still fit on one line. */
@media (max-width: 420px) {
  .button { padding-inline: 18px; letter-spacing: 2px; }
  .hero h1 { font-size: min(32px, 9vw); letter-spacing: 3px; }
}