/* The initial view belongs to the opening. Its minimum includes the space left
   after the preview label and full header; longer content remains in normal flow.
   Keep these header tokens aligned with the shared responsive header sizes. */
:root {
  --opening-header-size: 108px;
  --opening-preview-size: 28.6px;
  --opening-chrome-size: calc(var(--opening-header-size) + var(--opening-preview-size) + 1px);
  --opening-screen-size: 100vh;
  --opening-stable-size: 100vh;
  --opening-pad-top: clamp(16px, 3vh, 32px);
  --opening-pad-bottom: clamp(28px, 5vh, 60px);
}

@supports (height: 100svh) {
  :root {
    --opening-screen-size: 100svh;
    --opening-stable-size: 100svh;
    --opening-pad-top: clamp(16px, 3svh, 32px);
    --opening-pad-bottom: clamp(28px, 5svh, 60px);
  }
}

@supports (height: 100dvh) {
  :root { --opening-screen-size: 100dvh; }
}

.page-main > :is(.hero, .contact-composition, .not-found):first-child {
  /* One pixel protects the following surface from fractional layout rounding. */
  min-height: calc(var(--opening-screen-size) - var(--opening-chrome-size) + 1px);
}

.hero,
.page-one-to-one .one-to-one-hero,
.page-speaking .speaking-hero {
  padding-block: var(--opening-pad-top) var(--opening-pad-bottom);
}

.home-hero .hero-image img,
.page-about .personal-portrait img,
.one-to-one-hero .close-portrait img,
.page-speaking .speaking-image-frame img {
  height: clamp(340px, calc(var(--opening-stable-size) - var(--opening-chrome-size) - var(--opening-pad-top) - var(--opening-pad-bottom)), 570px);
}

.page-about .personal-portrait img {
  height: clamp(340px, calc(var(--opening-stable-size) - var(--opening-chrome-size) - var(--opening-pad-top) - var(--opening-pad-bottom)), 600px);
}

/* Let the error-page opening use the same full first view without stretching
   its controls. Contact deliberately keeps the form's intrinsic height. */
.page-not-found .not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

@media (min-width: 761px) and (max-width: 1060px) {
  :root { --opening-header-size: 96px; }
}

/* Short wide screens have useful horizontal space. Give the copy a little more
   of it and contract spacing before reducing type; all content stays visible. */
@media (min-width: 961px) and (max-height: 820px) {
  .hero,
  .page-one-to-one .one-to-one-hero,
  .page-speaking .speaking-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    column-gap: 56px;
    row-gap: 20px;
  }
  .hero-heading { padding-top: 0; }
  .hero .eyebrow { margin-bottom: 18px; }
  .hero-copy { padding-bottom: 0; }
  .hero-copy .lead { font-size: 22px; }
  .hero-copy .about-contents,
  .hero-copy .service-page-links { margin-top: 20px; padding-top: 16px; }
  .page-one-to-one .hero-copy .button,
  .page-speaking .hero-copy .button { margin-top: 20px; }
  .page-one-to-one .offer-note { margin-top: 20px !important; }
}

@media (min-width:761px) and (max-width:960px) {
  .hero,.page-one-to-one .one-to-one-hero,.page-speaking .speaking-hero { row-gap: 20px; }
  .hero-copy { padding-bottom: 0; }
  .hero-copy .lead { font-size: 21px; }
  .hero-copy .about-contents,.hero-copy .service-page-links { margin-top: 20px; padding-top: 14px; }
}

@media (max-width: 760px) {
  :root {
    --opening-header-size: 82px;
    --opening-preview-size: 23.5px;
    --opening-pad-top: 16px;
    --opening-pad-bottom: 24px;
  }
  .hero,
  .page-one-to-one .one-to-one-hero,
  .page-speaking .speaking-hero { justify-content: center; gap: 18px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero h1 { font-size: 38px; }
  .home-hero h1 { font-size: 46px; }
  .hero-copy .lead { font-size: 20px; line-height: 1.42; }
  .hero-copy > p + p { margin-top: 20px; }
  .home-hero .hero-copy > .button,
  .page-one-to-one .hero-copy .button,
  .page-speaking .hero-copy .button { margin-top: 18px; }
  .home-hero .hero-copy > .button + p,
  .speaking-hero .hero-copy > .button + p { margin-top: 20px; }
  .hero-copy .about-contents,.hero-copy .service-page-links { margin-top: 20px; padding-top: 14px; }
  .page-one-to-one .offer-note { margin-top: 18px !important; }

  /* A readable stacked opening can be taller than a phone. Cap the portrait's
     contribution on short screens without hiding the copy or imposing a fixed
     hero height. The next section still starts beyond the initial viewport. */
  .home-hero .hero-image img,
  .page-about .personal-portrait img,
  .one-to-one-hero .close-portrait img,
  .page-speaking .speaking-image-frame img {
    height: auto;
    max-height: clamp(220px, 28vh, 300px);
  }

  @supports (height: 100svh) {
    .home-hero .hero-image img,
    .page-about .personal-portrait img,
    .one-to-one-hero .close-portrait img,
    .page-speaking .speaking-image-frame img { max-height: clamp(220px, 28svh, 300px); }
  }
}

/* The measured value accounts for stacked headings and actual line wrapping.
   Natural section height can still grow when readable copy needs more room. */
.home-hero .hero-image img,
.page-about .personal-portrait img,
.one-to-one-hero .close-portrait img,
.page-speaking .speaking-image-frame img {
  height: var(--portrait-fit-height, clamp(240px, calc(var(--opening-stable-size) - var(--opening-chrome-size) - var(--opening-pad-top) - var(--opening-pad-bottom)), 570px));
}
@media (max-width:760px) {
  .home-hero .hero-image img,.page-about .personal-portrait img,
  .one-to-one-hero .close-portrait img,.page-speaking .speaking-image-frame img {
    height: var(--portrait-fit-height, clamp(220px, 28svh, 300px));
    max-height: none;
    aspect-ratio: auto;
  }
}

/* Preserve a comfortable complete opening on short laptops and tablets. */
@media (min-width:961px) {
  .contact-composition { padding-block: 24px 32px; }
  .contact-composition .contact-form { padding-block: 32px; }
  .contact-composition .field,
  .contact-composition .field:first-of-type { margin-top: 20px; }
  .contact-composition .preview-status { margin-top: 22px; }
}
@media (min-width:761px) and (max-height:850px) {
  .page-one-to-one .hero-copy { font-size: 19px; line-height: 1.45; }
  .page-one-to-one .hero-copy .lead { font-size: 21px; line-height: 1.4; }
  .page-one-to-one .hero-copy .service-page-links { margin-top: 16px; padding-top: 12px; }
  .page-one-to-one .hero-copy .button { margin-top: 18px; }
}

/* The public build has no preview label; fill the space it used to occupy. */
html[data-release="true"] { --opening-preview-size: 0px; }