/* tablet range: 768–1023.98px — loaded via <link media> so nothing here can reach desktop (>=1024px). Owner: subagent C. */
/* Structure: the desktop layout, made touch-first.
   - Gutter 32px (Material small-tablet margin); the container grows by the extra gutter so content still caps at
     928px and 1023 → 1024 does not shift.
   - Hero keeps two columns: a fluid 260–300px portrait plus a text column capped at 33rem, so the intro stays
     ≤75 characters per line. Yoda is shown as on desktop, top-right of the CTA row and out of flow.
   - Headings sit between the phone and desktop sizes; body stays 16px.
   - Touch: brand, nav, checkbox row and suggestion button ≥44px tall; the header keeps its height.
     Footer and status contact links get a 44px hit area without changing the line layout.
   - Booking: card centred at 608px as on desktop; the intro is capped at 33rem. Timeline stays one column,
     so the chronological line reads top to bottom. */

:root { --gutter: 32px; --max-width: 992px; }

h1 { font-size: clamp(2.5rem, 4.5vw, 2.875rem); }
h2 { font-size: clamp(1.6rem, 2.75vw, 1.75rem); }

/* Header: 36.4px items become 44px tap rows; padding shrinks so the band stays 66.2px tall */
.site-header .container { padding-block: calc(.9rem - 3.8px); }
.brand { min-height: 44px; justify-content: center; }
.brand-tagline { font-size: .75rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; }

.site-footer a, .status a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }

/* Intro page */
.hero { grid-template-columns: clamp(260px, 30vw, 300px) minmax(0, 33rem); gap: 2.5rem; }
.yoda {
  display: block; position: absolute; top: 0; right: 0; width: auto; height: 110px;
  mask-image: radial-gradient(closest-side, var(--color-night) 62%, transparent);
}

/* Booking page */
.booking { max-width: 672px; }
.page-head p { max-width: 33rem; }
.checkbox { min-height: 44px; align-items: flex-start; }
.checkbox input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; }
.field-suggestion { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; }
.link-button { min-height: 44px; }