/* landscape range: short landscape (max-height 500px, width < 1024px) — loaded via <link media> so nothing here can reach desktop (>=1024px). Owner: subagent D. */
/* Structure: phones held sideways (Material compact height, < 480dp), layered over phablet.css or tablet.css.
   - The 320–430px fold goes to the hero: header items keep their 44px tap rows but the band padding drops to 4px
     (66 → 53px), head bands shrink to 1.25–1.5rem and h1 scales with the viewport height.
   - Hero: the 3:4 portrait beside the name is sized by the fold (100svh minus header and padding, so browser
     toolbars cannot push it under), and narrowed at the smallest widths so the text column keeps 23rem for the chips.
     Name, chips and CTA sit centred beside it; the 40+ badge joins them from 768px wide and 380px tall,
     otherwise it leads the intro, which runs full width below, capped at 34em.
   - Yoda hidden: the wink answers the intro's closing sentence, which here follows the CTA; phones never show it.
   - Booking and privacy pages keep the width file's single-column flow with nothing fixed or sticky, so the
     on-screen keyboard (about half the height) never covers a field. No safe-area padding: without
     viewport-fit=cover the browser letterboxes the notch. */

h1 { font-size: clamp(1.75rem, 10svh, 2.5rem); }

/* Header: 44px tap rows, 4px band padding */
.site-header .container { padding-block: 4px; }
.brand { min-height: 44px; justify-content: center; padding-block: 0; margin-block: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-top: .25rem; margin-top: 0; }

/* Hero: portrait | name, chips, CTA; badge and intro full width below */
.hero {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr auto auto;
  grid-template-areas: "portrait ." "portrait name" "portrait roles" "portrait cta" "portrait ." "badge badge" "intro intro";
  gap: 0 1.5rem;
  padding-block: .75rem 2rem;
}
.hero > div { display: contents; }
.portrait {
  grid-area: portrait; align-self: center; width: auto; max-width: none;
  height: max(160px, min(100svh - 5rem, (100vw - 2 * var(--gutter) - 24.5rem) * 4 / 3));
}
.hero h1 { grid-area: name; }
.hero .roles { grid-area: roles; margin: 0 0 1rem; }
.hero-actions { grid-area: cta; }
.yoda { display: none; }
.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 0; }

@media (min-width: 768px) and (min-height: 380px) {
  .hero {
    grid-template-rows: 1fr auto auto auto auto 1fr auto;
    grid-template-areas: "portrait ." "portrait name" "portrait roles" "portrait badge" "portrait cta" "portrait ." "intro intro";
  }
  .hero .experience-badge { margin: 0 0 1rem; }
  .hero .experience-badge + p { margin-top: 1.5rem; }
}

/* Content and head bands */
.page { padding-block: 2rem 2.5rem; }
.page > section + section { margin-top: 2.25rem; }
.page-head { padding-block: 1.25rem 1.5rem; }

/* Consent row: the long label wraps to 4–5 lines, so the 20px box stays full size on its first line */
.checkbox { align-items: flex-start; }
.checkbox input { flex: none; margin-top: .2rem; }