/* phablet range: 480–767.98px — loaded via <link media> so nothing here can reach desktop (>=1024px). Owner: subagent B. */
/* Structure: one layout for the whole range, one inner step at 600px (Material compact → medium width class).
   - Gutter 24px. Header keeps brand left / nav right on one row; brand and nav links reach ≥44px tall through
     padding offset by negative margins, so the approved header looks unchanged. Tagline 12px (11.52px is below the floor).
   - Hero: fluid 160–240px portrait beside the name and role chips; intro and CTA run full width beneath, the intro
     capped near 70 characters. This replaces the base 320px two-column hero that is cramped at 720–767px and
     brings the CTA above the fold on large phones. From 600px the experience badge joins the name column.
   - Booking: date and time stacked below 600px (the time hint wraps and pushes its input out of line), paired from
     600px. Full-width submit, 24–32px card padding, checkbox row and footer links ≥44px tall.
   - Timeline and award cards keep the stacked form shared with phone, tablet and desktop. */

:root { --gutter: 24px; }

/* Header: invisible hit-area growth, same visual position of text and underline */
.brand { padding-block: .25rem; margin-block: -.25rem; }
.brand-tagline { font-size: .75rem; }
.site-nav a { padding-top: .75rem; margin-top: -.5rem; }

/* Hero: portrait + name block side by side, the rest full width */
.hero {
  grid-template-columns: clamp(160px, 32vw, 240px) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr auto auto auto;
  grid-template-areas: "portrait ." "portrait name" "portrait roles" "portrait ." "badge badge" "intro intro" "cta cta";
  gap: 0 clamp(1.25rem, 4vw, 2rem);
  padding-block: 2.5rem 3rem;
}
.hero > div { display: contents; }
.portrait { grid-area: portrait; max-width: none; align-self: center; }
.hero h1 { grid-area: name; }
.hero .roles { grid-area: roles; margin: 0; }
.hero .experience-badge { grid-area: badge; margin: 1.5rem 0 0; }
.hero .experience-badge + p { grid-area: intro; max-inline-size: 34em; margin: 1rem 0 1.5rem; }
.hero-actions { grid-area: cta; }

/* Booking */
.form.card { padding: clamp(1.5rem, 4vw, 2rem); }
.field-row { grid-template-columns: minmax(0, 1fr); }
.form .button { width: 100%; }
.checkbox { padding-block: .6rem; }
.checkbox input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; }
.link-button { min-height: 44px; }

/* Footer: phone and e-mail get 44px-tall hit areas; negative margins keep the approved line layout */
.site-footer a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }

@media (min-width: 600px) {
  .hero {
    grid-template-rows: 1fr auto auto auto 1fr auto auto;
    grid-template-areas: "portrait ." "portrait name" "portrait roles" "portrait badge" "portrait ." "intro intro" "cta cta";
  }
  .hero .roles { margin-bottom: 1.25rem; }
  .hero .experience-badge { margin: 0; }
  .hero .experience-badge + p { margin-top: 1.5rem; }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}