@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Caprasimo-Regular.ttf') format('truetype');
}
.hero-story { position: relative; height: 100svh; background: var(--yellow); }
.hero-story[data-enhanced] { height: 300svh; }
.hero-viewport { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--yellow); }
.hero-morph-copy { position: absolute; z-index: 2; top: 47%; left: 5.8%; width: 44%; max-width: 640px; transform: translateY(-50%); }
.hero-morph-copy h1 { font-family: 'Caprasimo', Georgia, serif; font-size: 80px; font-weight: 400; line-height: 1.05; letter-spacing: 0; margin: 0; }
.hero-detail { margin-top: 28px; min-height: 52px; font-size: 16px; line-height: 1.65; }
.hero-morph-copy .button { margin-top: 30px; }
.hero-product { position: absolute; top: 7%; bottom: 11%; left: 51%; right: 3%; display: grid; place-items: center; pointer-events: none; }
.hero-cup-stack { position: relative; height: 112%; aspect-ratio: 1 / 2; max-width: 100%; transform: rotate(-3deg); }
.hero-cup-layer { position: absolute; inset: 0; overflow: hidden; }
.hero-cup-layer img { position: absolute; width: 300%; height: 100%; max-width: none; }
.hero-cup-layer[data-hero-cup='0'] img { left: -2.8%; }
.hero-cup-layer[data-hero-cup='1'] img { left: -100%; }
.hero-cup-layer[data-hero-cup='2'] img { left: -197.2%; }
.hero-moods { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 5.8%; background: var(--green); color: var(--yellow); }
.hero-story[data-enhanced] .hero-moods { display: grid; }
.hero-moods a { display: flex; justify-content: center; align-items: center; min-height: 66px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; text-decoration: none; font-size: 15px; font-weight: 600; }
.hero-moods a[aria-current] { border-top-color: var(--yellow); background: #ffffff08; }
.hero-moods a:hover { background: #ffffff0e; }
.hero-moods a:focus-visible { outline-offset: -6px; }
.hero-anchor { display: none; position: absolute; width: 1px; height: 1px; pointer-events: none; scroll-margin-top: -24px; }
.hero-story[data-enhanced] .hero-anchor { display: block; }
#hero-coffee { top: 0; }
#hero-matcha { top: 100svh; }
#hero-fruit { top: 200svh; }
@media (max-width: 1250px) and (min-width: 761px) {
  .hero-morph-copy h1 { font-size: 62px; }
  .hero-morph-copy { width: 46%; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .hero-morph-copy h1 { font-size: 52px; }
  .hero-detail { font-size: 14px; }
}
@media (min-width: 1700px) {
  .hero-morph-copy h1 { font-size: 90px; }
}
@media (max-width: 760px) {
  .hero-morph-copy { top: 100px; left: 7%; width: 86%; max-width: none; transform: none; }
  .hero-morph-copy h1 { font-size: 44px; line-height: 1.02; }
  .hero-detail { font-size: 13px; line-height: 1.5; min-height: 39px; margin-top: 17px; }
  .hero-morph-copy .button { margin-top: 17px; min-height: 35px; padding: 0; border: 0; background: transparent; color: var(--green); font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
  .hero-product { top: 327px; bottom: 91px; left: 8%; right: 8%; }
  .hero-cup-stack { height: 140%; }
  .hero-moods { padding-inline: 5%; }
  .hero-moods a { min-height: 60px; font-size: 13px; }
}
@media (max-width: 380px) {
  .hero-morph-copy { top: 90px; }
  .hero-morph-copy h1 { font-size: 38px; }
  .hero-detail { font-size: 12px; margin-top: 14px; }
  .hero-morph-copy .button { margin-top: 10px; }
  .hero-product { top: 290px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero-morph-copy { top: 84px; }
  .hero-morph-copy h1 { font-size: 36px; }
  .hero-detail { margin-top: 12px; font-size: 12px; }
  .hero-morph-copy .button { margin-top: 8px; }
  .hero-product { top: 272px; bottom: 75px; }
  .hero-moods a { min-height: 52px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .hero-morph-copy { top: 49%; left: 6%; width: 44%; transform: translateY(-50%); }
  .hero-morph-copy h1 { font-size: 42px; }
  .hero-detail { font-size: 11px; min-height: 33px; margin-top: 14px; }
  .hero-morph-copy .button { font-size: 11px; min-height: 28px; margin-top: 12px; padding: 5px 10px; }
  .hero-product { top: 12%; bottom: 15%; left: 53%; right: 5%; }
  .hero-cup-stack { height: 128%; }
  .hero-moods a { min-height: 42px; font-size: 12px; }
}