/* ---------- section scaffolding ---------- */
.section {
  padding-block: clamp(64px, 9vw, 120px);
}
.section + .section {
  border-top: var(--line) solid var(--edge);
}
[data-mode="night"] .section + .section {
  border-top: 1px solid var(--hair);
}
.sec-head {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.sec-head--row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 18px 32px;
}
.sec-head--row > div {
  display: grid;
  gap: 14px;
  max-width: 720px;
}
h2 {
  font: 500 var(--t-h2)/1.02 var(--font-display);
  letter-spacing: -0.02em;
}
/* big bold titles (FAQ, Visit us): the hero letters' font, very heavy and tight. Each title sets its own --big, as
   clamp(min(SMALLEST, SMALLEST / 3.2 vw), ..., ...): the smallest size holds down to a 320px-wide screen, where every
   title still fits, and below that shrinks with the screen. Screens that narrow are phones zoomed in (Android's page
   zoom at 150% lays a 390px phone out 260px wide); a fixed smallest size made the longest words wider than the
   screen there, and the whole page scrolled sideways. */
.big-title {
  font: 900 var(--big, 120px) / 0.92 var(--font-letters); /* 0.8 left two-line titles almost touching */
  margin-bottom: 0.08em; /* the tight line height lets the Q's tail hang below; this keeps it off the next line */
}
.lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  max-width: 62ch;
}
.muted {
  color: var(--muted);
}
.kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
h3 {
  font: 700 var(--t-xl)/1.1 var(--font-display);
}
.split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.ph {
  color: var(--muted);
  font-style: italic;
}
.tile .ph {
  color: inherit;
  opacity: 1;
}
/* dots under a phone swipe row (Perfect for, Food): js/swipe-rows.js adds them */
.swipe-dots {
  display: none;
}
@media (max-width: 640px) {
  .swipe-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
  }
  .swipe-dots button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 24px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .swipe-dots button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
    transition:
      width 0.2s ease,
      background-color 0.2s ease;
  }
  .swipe-dots button[aria-current="true"]::before {
    width: 20px;
    background: var(--ink);
  }
}
/* less motion: the current dot is long straight away, without stretching */
@media (prefers-reduced-motion: reduce) {
  .swipe-dots button::before {
    transition: none;
  }
}