/* phone range: 0–479.98px — loaded via <link media> so nothing here can reach desktop (>=1024px). Owner: subagent A. */
/* Phone structure (palette, fonts, band and cards as on desktop; only the arrangement changes):
   - Header: brand left, nav as two equal 48px tabs, amber underline on the header edge. They share a row when they fit,
     otherwise the tabs wrap to a full-width bar. Both links stay visible, no hamburger.
   - Hero: centred 3:4 portrait 176–240px wide, then centred name, chips and stacked "40+" badge. The intro stays
     left-aligned. Full-width CTA. Yoda stays hidden (style.css).
   - Content: tighter spacing, px card padding so large text keeps its width; the award stacks the medal above its text.
   - Contact line (footer, error box): label | link grid with 44px tap rows. Its bare ": " / " · " text nodes are hidden
     with font-size 0 and visibility hidden on the <p>, since they cannot be selected.
   - Booking: compact head, stacked date/time, 20px checkbox in a 44px row, full-width submit.
   - Reflow (WCAG 1.4.10): long strings wrap, and form grids use minmax(0, 1fr) so date/time inputs cannot widen the card. */

body { overflow-wrap: anywhere; }
h1 { font-size: min(2rem, 13vw); }

/* Header */
.site-header .container { gap: 0 .75rem; padding-block: .375rem 0; }
.brand { min-height: 44px; justify-content: center; }
.brand-tagline { font-size: .75rem; }
.site-nav { flex: 1 1 auto; flex-wrap: wrap; gap: 0; }
.site-nav a { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .25rem .5rem; text-align: center; }

/* Hero */
.hero { gap: 1.5rem; padding-block: 2rem 2.5rem; }
.portrait { justify-self: center; width: clamp(176px, 56vw, 240px); }
.hero h1 { text-align: center; }
.roles { justify-content: center; }
.experience-badge { flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.hero .button { display: block; text-align: center; }

/* Content */
.page { padding-block: 2rem 2.5rem; }
.page > section + section { margin-top: 2.25rem; }
.card { padding: 16px; }
.timeline li { padding: .2rem 0 1.1rem 24px; }
.award {
  flex-direction: column; gap: .6rem; text-align: center;
  background: radial-gradient(circle at 50% 2.6rem, color-mix(in srgb, var(--color-glow) 18%, transparent), transparent 55%), var(--color-surface);
}

/* Contact line (footer, booking error box) */
:is(.site-footer, .status-error) p:last-child {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: .75rem;
  font-size: 0; visibility: hidden;
}
:is(.site-footer, .status-error) p:last-child > * { grid-area: 1 / 1; font-size: .95rem; visibility: visible; }
:is(.site-footer, .status-error) p:last-child > :nth-child(n+3) { grid-row: 2; }
:is(.site-footer, .status-error) p:last-child > a { grid-column: 2; display: flex; align-items: center; min-height: 44px; }
.site-footer p:first-child a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }

/* Booking page */
.page-head { padding-block: 1.75rem 2rem; }
.form { gap: 1rem; }
.form, .field, .field-row { grid-template-columns: minmax(0, 1fr); }
.field-error { line-height: 1.45; }
.hint { display: inline-block; }
.field-suggestion { display: flex; flex-wrap: wrap; align-items: center; column-gap: .4rem; }
.link-button { min-height: 44px; }
.checkbox { min-height: 44px; }
.checkbox input { flex: none; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; }
.form .button { width: 100%; padding-inline: 1rem; }
.status { padding: 16px; }