/* Responsive sizing for the public header and the home/inner-page heroes.
   The editor's image, text and height settings remain the source of the
   desktop appearance. Text determines the minimum safe height. */
html body .header{
  min-width:0;
  padding-inline:clamp(16px,2.2vw,34px);
}
html body .header .brand{flex:0 1 auto;min-width:0}
html body .header .brand-mark.brand-mark--wide{
  width:auto;
  max-width:min(var(--brand-mark-max,280px),100%);
}
html body .header .brand-mark-img{max-width:100%;object-fit:contain}
html body .header nav{min-width:0;scroll-padding-inline:12px}
html body .header .nav{min-height:52px}

/* The artwork fills the section. Editor --hero-height / --page-hero-height
   set a fixed band; when unset, the section can still grow with the copy. */
html body :is(#home-landing,.hero-preview) .home-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  height:var(--hero-height, auto);
  min-height:var(--hero-height, 380px);
  max-height:var(--hero-height, none);
}
html body :is(#home-landing,.hero-preview) .home-hero-copy{
  position:relative;
  inset:auto;
  width:clamp(min(360px,100%),var(--hero-copy-width,42%),720px);
  min-width:0;
  min-height:var(--hero-height, 380px);
  margin:0;
  padding-block:clamp(28px,3vw,50px);
  padding-inline:clamp(22px,3.6vw,56px);
}
html body :is(#home-landing,.hero-preview) .home-hero h1{
  font-size:calc(clamp(30px,3vw,50px) * var(--hero-title-size,1));
  overflow-wrap:break-word;
}
html body :is(#home-landing,.hero-preview) .home-hero-actions{max-width:100%}
html body #page-hero.page-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  height:var(--page-hero-height, auto);
  min-height:var(--page-hero-height, clamp(220px,26vw,340px));
  max-height:var(--page-hero-height, none);
}
html body #page-hero .page-hero-copy{
  position:relative;
  inset:auto;
  min-width:0;
  min-height:var(--page-hero-height, clamp(220px,26vw,340px));
  padding-block:26px;
}
html body #page-hero .page-hero-title,
html body #page-hero .page-hero-text{overflow-wrap:break-word}

/* Place navigation on its own line before the brand, note and tabs collide.
   Site-chrome uses its own grid; leave that header alone so wrap rules cannot
   invent a second empty band under the logo. */
@media(max-width:1200px){
  html body .header:not(.site-chrome){display:flex;flex-wrap:wrap;row-gap:0;padding-top:8px}
  html body .header:not(.site-chrome) .brand{max-width:min(320px,70vw)}
  html body .header:not(.site-chrome) .header-note{margin-inline-start:auto}
  html body .header:not(.site-chrome) nav{
    order:3;
    flex:1 0 100%;
    width:100%;
    max-width:100%;
    justify-content:flex-start;
  }
  html body .header:not(.site-chrome) .nav{min-height:58px}
  html body :is(#home-landing,.hero-preview) .home-hero-copy{
    width:clamp(min(380px,100%),var(--hero-copy-width,42%),650px);
  }
  html body #page-hero .page-hero-copy{width:min(55%,640px)}
}
/* A media row above a natural-height text panel preserves the entire photo
   and avoids cropping long text on tablets and narrow windows. */
@media(max-width:900px){
  html body :is(#home-landing,.hero-preview) .home-hero,
  html body #page-hero.page-hero{
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:0;
    max-height:none;
  }
  html body :is(#home-landing,.hero-preview) .home-hero-media{
    position:relative;
    inset:auto;
    aspect-ratio:auto;
    height:var(--hero-height, min(56vw, 520px));
    min-height:var(--hero-height, 220px);
    max-height:var(--hero-height, 520px);
  }
  html body :is(#home-landing,.hero-preview) .home-hero-copy{
    position:relative;
    inset:auto;
    width:100%;
    min-height:0;
    padding:clamp(22px,3vw,34px);
  }
  html body #page-hero .page-hero-media{
    position:relative;
    inset:auto;
    aspect-ratio:auto;
    height:var(--page-hero-height, min(56vw, 340px));
    min-height:var(--page-hero-height, 180px);
    max-height:var(--page-hero-height, 340px);
  }
  html body #page-hero .page-hero-copy{
    position:relative;
    inset:auto;
    width:100%;
    min-height:0;
    padding:clamp(18px,3vw,28px);
  }
}
@media(max-width:760px){
  html body .header:not(.site-chrome){
    position:relative;
    padding-inline:clamp(12px,4vw,20px);
    padding-top:8px;
    row-gap:0;
  }
  html body .header:not(.site-chrome) .brand,
  html body .header:not(.site-chrome) .brand.brand--layout-stack{
    max-width:100%;
    width:auto;
  }
  html body .header .brand-mark.brand-mark--wide{
    max-width:min(var(--brand-mark-max,280px),68vw);
    height:min(var(--brand-mark-size,44px),48px)!important;
  }
  html body .header .header-note{display:none}
  html body .header:not(.site-chrome) nav{
    order:3;
    flex:1 0 100%;
    width:100%;
    max-width:100%;
    gap:var(--nav-gap,0px);
    overflow-x:auto;
    touch-action:pan-x;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  html body .header:not(.site-chrome) .nav{
    min-width:max-content;
    min-inline-size:58px;
    min-height:52px;
    padding:7px 10px 9px;
    font-size:clamp(12px,var(--nav-label,13px),16px);
  }
  html body .header:not(.site-chrome) .nav-icon{
    width:clamp(18px,var(--nav-icon,22px),24px);
    height:clamp(18px,var(--nav-icon,22px),24px);
  }
  html body :is(#home-landing,.hero-preview) .home-hero h1{
    font-size:calc(clamp(27px,7vw,38px) * var(--hero-title-size,1));
  }
  html body :is(#home-landing,.hero-preview) .home-hero-actions a{
    flex:1 1 140px;
  }
  html body #page-hero .page-hero-title{font-size:clamp(22px,5.5vw,28px)}
}
@media(max-width:420px){
  html body :is(#home-landing,.hero-preview) .home-hero-copy{padding:20px 18px 26px}
  html body :is(#home-landing,.hero-preview) .home-hero-actions{gap:8px}
  html body :is(#home-landing,.hero-preview) .home-hero-actions a{
    min-width:0;
    padding-inline:12px;
  }
  html body #page-hero .page-hero-copy{padding:18px}
}