/* Desktop hero: balance the copy between the header and ingredient strip. */
@media (min-width:56.25rem) {
  .hero {
    --hero-header:6.5625rem;
    --hero-strip:8rem;
    min-height:50rem;
    height:100svh;
    max-height:68.75rem;
  }
  .hero-copy {
    top:calc((100% + var(--hero-header) - var(--hero-strip)) / 2);
    transform:translateY(-50%);
    width:42%;
  }
  .hero-brand-name { font-size:8rem; line-height:1.08; margin-top:1rem; }
  .hero-brand-english { margin-top:.625rem; }
  .hero-oil-lockup { margin-top:1.5rem; padding-bottom:.75rem; }
  .hero-copy .hero-description { margin-top:1rem; }
  .hero-copy .pill-link { margin-top:1.125rem; }
  .hero-food {
    top:auto;
    bottom:var(--hero-strip);
    right:-4%;
    width:min(66%,calc((clamp(50rem,100svh,68.75rem) - 16rem) * 1.5),72rem);
  }
  .hero-bottom, .ingredient-tile>img { height:var(--hero-strip); }
  .oil-seal { top:8.25rem; }
  .hero-side-note { display:none; }
}
@media (min-width:56.25rem) and (max-width:68.75rem) {
  .hero-brand-name { font-size:6rem; }
  .hero-light { left:47%; }
  .hero-food { width:74%; right:-13%; }
  .oil-seal { right:4%; width:7rem; height:7rem; }
}
@media (min-width:68.8125rem) and (max-width:87.5rem) {
  .hero-brand-name { font-size:7rem; }
}
@media (min-width:106.25rem) {
  .hero-brand-name { font-size:9rem; }
  .hero-food { right:0; }
}
@media (min-width:120rem) {
  .site-header { padding-inline:calc((100% - 120rem) / 2 + 5.16rem); }
  .hero-copy, .scroll-cue { left:calc((100% - 120rem) / 2 + 5.16rem); }
  .hero-food { right:calc((100% - 120rem) / 2); }
  .hero-light { left:calc(50% - 8.4rem); }
  .oil-seal { right:calc((100% - 120rem) / 2 + 6rem); }
  .hero-bottom { width:calc(50% + 43.2rem); }
}