/* Shared compact layout. Loaded after page styles so every page follows
   the available window height, while body text and browser zoom stay intact. */
@media screen and (max-height:820px), screen and (max-width:1100px){
  :root{
    --kp-sec:clamp(40px,6vw,76px);
    --kp-sec-s:clamp(28px,4vw,48px);
    --kp-h1:clamp(2rem,min(4.6vw,7svh),3.5rem);
    --kp-h1-s:clamp(1.8rem,min(4vw,6svh),2.5rem);
  }
  .kn-utility .kn-utility-inner{min-height:34px}
  .kn-utility a{min-height:34px}
  .kn-header-inner{min-height:70px}
  .kn-brand img{height:40px}
  body[data-page] main .kp-hero{padding-block:24px 32px}
  body[data-page] main .kp-hero__grid{gap:clamp(24px,3vw,44px)}
  body[data-page] main .kp-hero__crumbs{margin-bottom:18px}
  body[data-page] main .kp-hero .kp-eyebrow{margin-bottom:12px}
  body[data-page] main .kp-hero h1{font-size:var(--kp-h1);line-height:1.08;max-width:22ch}
  body[data-page] main .kp-hero--compact h1{font-size:var(--kp-h1-s)}
  body[data-page] main .kp-hero__lead{margin-top:16px;font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.5}
  body[data-page] main .kp-hero .kp-actions{margin-top:20px}
  body[data-page] main .kp-hero .kp-chips{margin-top:18px}
  body[data-page] main .kp-hero__meta{margin-top:14px}
  body[data-page] main .kp-hero__media img{
    height:clamp(260px,48svh,380px);aspect-ratio:auto;object-fit:cover;
  }
  /* Keep people and their measuring equipment complete in portrait photos,
     without putting a narrow image inside a wide, empty frame. */
  body[data-page] main .kp-hero__media:has(img[height="2000"]){
    width:min(100%,300px,45svh);justify-self:center;
  }
  body[data-page] main .kp-hero__media img[height="2000"]{
    height:auto;aspect-ratio:3/4;object-fit:contain;
  }
  body[data-page] main .kp-hero--photo{padding:0;min-height:0}
  body[data-page] main .kp-hero--photo .kp-hero__grid{padding-block:28px 36px}
  body[data-page] main .kp-hero--photo .kp-hero__media img{height:100%;object-fit:cover}
  body[data-page] main .kp-hero__art{padding:20px}
  body[data-page] main .kp-hero__art svg{max-height:310px}
  body[data-page="esti"] main .esti-stage{min-height:300px;padding:24px}
  body[data-page="blog"] .blog-topics-layout>.kp-head{top:var(--kp-sticky)}
  body[data-page="gratis-chips"] main .chips-intro{padding-block:28px 32px}
  body[data-page="gratis-chips"] main .chips-intro h1,
  body[data-page="404"] main .kea-404 h1{font-size:var(--kp-h1)}
  body[data-page="gratis-chips"] main .chips-intro .kp-hero__crumbs{margin-bottom:18px}
  body[data-page="404"] main .kea-404{padding-block:32px}
}

@media screen and (min-width:961px) and (max-height:820px){
  body[data-page] main .kp-hero__art{aspect-ratio:auto;min-height:280px}
}

@media screen and (min-width:901px) and (max-height:820px){
  body[data-page="home"] main .kd-hero{min-height:0;--kd-hero-photo-w:min(48%,620px)}
  body[data-page="home"] main .kd-hero .kd-wrap{padding-block:28px 30px}
  body[data-page="home"] main .kd-hero h1{font-size:clamp(36px,min(4.6vw,7svh),58px);line-height:1.03}
  body[data-page="home"] main .kd-hero-lead{font-size:18px;line-height:1.4;margin-top:18px;max-width:50ch}
  body[data-page="home"] main .kd-hero .kd-actions{margin-top:18px}
  body[data-page="home"] main .kd-hero .kd-button{min-height:48px;padding:12px 22px}
  body[data-page="home"] main .kd-hero-facts{margin-top:22px;gap:22px}
  body[data-page="home"] main .kd-hero .kh-hero-slide--studio{
    right:var(--pad);width:46%;max-width:560px;padding:48px 0 4px;object-position:center;
  }
  body[data-page="home"] main .kd-hero:has(.kh-hero-slide--studio.is-active)::before{
    background:linear-gradient(90deg,var(--bg) 42%,transparent 58%);
  }
  body[data-page="home"] main .kd-hero:has(.kh-hero-slide--studio.is-active) .kh-hero-controls{right:var(--pad)}
}

@media screen and (max-width:960px){
  body[data-page] main .kp-hero__grid{gap:24px}
  body[data-page] main .kp-hero__media img{height:clamp(220px,38svh,310px)}
  body[data-page] main .kp-hero__media img[height="2000"]{height:auto}
  body[data-page] main .kp-hero--photo .kp-hero__media{height:clamp(180px,30svh,260px)}
  body[data-page] main .kp-hero--photo .kp-hero__grid{padding-block:0 32px}
  body[data-page] main .kp-hero--photo .kp-hero__copy{margin-top:0}
  body[data-page] main .kp-hero__art{padding:16px}
}

@media screen and (max-width:900px){
  body[data-page="home"] main .kd-hero{
    --mobile-photo-height:clamp(200px,30svh,270px);
    --mobile-photo-space:var(--mobile-photo-height);
  }
  body[data-page="home"] main .kd-hero .kd-wrap{padding-top:var(--mobile-photo-space);padding-bottom:24px}
  body[data-page="home"] main .kd-hero h1{font-size:clamp(32px,7vw,44px)}
  body[data-page="home"] main .kd-hero .kd-hero-lead{max-width:38ch}
  body[data-page="home"] main .kd-hero:not(:has(.kh-hero-slide--studio.is-active)) .kh-hero-controls{
    left:auto;right:12px;
  }
}

@media screen and (max-width:520px){
  .kn-header-inner{min-height:64px}
  .kn-brand img{height:38px}
  body[data-page] main .kp-hero{padding-block:20px 28px}
  body[data-page] main .kp-hero h1{font-size:clamp(1.8rem,8vw,2.35rem)}
  body[data-page] main .kp-hero--compact h1{font-size:clamp(1.7rem,7.5vw,2.15rem)}
  body[data-page] main .kp-hero__lead{font-size:1rem}
  body[data-page] main .kp-hero--photo{padding:0}
  body[data-page] main .kp-hero__crumbs{margin-bottom:14px}
}