/* First chapter only: measured against the approved 432 × 915 reference. */
:root { --hero-reference-orange: #ef652a; }
.hero {
  --paper: #faedd7;
  --ink: #130f0c;
  --orange: #ee5018;
  --hero-line: var(--hero-reference-orange);
  --hero-button: #171409;
  --hero-edge: #eadcc480;
  --hero-warm-glow: #fff9e750;
  --hero-shadow: #25170b24;
  container-type: inline-size;
  height: 100dvh;
  min-height: 640px;
  background: radial-gradient(ellipse at 45% 40%,var(--hero-warm-glow),var(--clear) 75%),var(--paper);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h128v128H0z' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}
.hero::after { content: ''; position: absolute; inset: 4px 8px; border: 1px solid var(--hero-edge); pointer-events: none; z-index: 9; }
.hero .hero-title { display: contents; }
.hero .hero-word { position: absolute; right: auto; bottom: auto; left: 0; width: 100%; margin: 0; transform: none; pointer-events: none; }
.hero .hero-word--top { top: 7.650273%; height: 19.672131%; z-index: 1; color: var(--ink); }
.hero .hero-word--bottom { top: 72.131148%; height: 16.393443%; z-index: 4; color: var(--orange); }
.hero .reference-word { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.hero .hero-pouch { left: 17.361111%; top: 24.7%; width: 81.018519%; height: 44%; rotate: 10deg; z-index: 3; filter: drop-shadow(0 4px 4px var(--hero-shadow)); }
.hero .hero-pouch img { object-fit: contain; transform: none; }
.hero.is-active .hero-pouch { animation: none; translate: none; }
.hero .hero-food-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.hero .hero-food-overlay img { width: 100%; height: 100%; object-fit: fill; }
.hero .hero-definition { position: absolute; top: 35.300546%; left: 6.25%; width: 23.148148%; max-width: none; font-size: 5.092593cqw; font-weight: 600; line-height: 1.05; letter-spacing: -.035em; z-index: 6; }
.hero .hero-definition::after { display: none; }
.hero .hero-product-copy::after { content: ''; display: block; width: 70%; height: 8px; border-top: 3px solid var(--hero-line); border-radius: 50%; margin-top: 12px; rotate: -7deg; }
.hero .hero-promise { margin-top: 12px; font-size: 4.62963cqw; line-height: 1.05; }
.hero .hero-origin { margin-top: 8px; font-size: clamp(12px, 3.5cqw, 15px); line-height: 1.15; }
.hero .hero-definition br { display: initial; }
.hero .hero-thread { inset: 0; width: 100%; height: 100%; opacity: 1; color: var(--hero-line); z-index: 2; }
.hero .hero-thread path { stroke-width: 3; }
.hero .hero-weight { top: 66.5%; right: 4.5%; width: 80px; text-align: center; font-size: 5.555556cqw; line-height: 1; font-weight: 600; z-index: 6; }
.hero .hero-weight span { display: block; max-width: none; margin-top: 4px; font-size: 3.240741cqw; line-height: 1.1; white-space: nowrap; }
.hero .hero-weight::after { width: 100%; height: 3px; background: var(--hero-line); margin-top: 10px; border-radius: 50%; rotate: -8deg; }
.hero .hero-action { left: 8.796296%; right: 5.092593%; bottom: 4.153005%; z-index: 8; }
.hero .hero-action .button { width: 100%; min-width: 0; min-height: 48px; height: 7.431694svh; padding: 0 24px 6px; font-size: 7.407407cqw; gap: 12px; font-weight: 600; background: var(--hero-button); }
.hero .hero-action .button .icon { width: 6.25cqw; height: 6.25cqw; flex-basis: 6.25cqw; }
.hero .hero-action > p, .hero .scene-number { display: none; }
.hero .next-scene { left: calc(51.5% - 22px); right: auto; bottom: 0; height: 4.8svh; min-height: 40px; }
.hero .next-scene .icon { width: 5.2cqw; height: 2.9svh; }
@keyframes hero-scroll-cue { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero.is-active .next-scene .icon { animation: hero-scroll-cue 1.6s ease-in-out infinite; }
  .page-hidden .hero .next-scene .icon { animation-play-state: paused; }
}
@media (max-width: 899px) {
  body[data-scene="antojo"] .site-header { height: calc(80px + env(safe-area-inset-top)); padding: calc(24px + env(safe-area-inset-top)) 20px 24px 9.1%; }
  body[data-scene="antojo"] .brand { width: 100px; }
  body[data-scene="antojo"] .menu-toggle { gap: 9px; }
  body[data-scene="antojo"] .menu-toggle span { width: 30px; height: 3px; border-radius: 2px; }
  body[data-scene="antojo"] .scene-nav { top: 14.3%; }
  body[data-scene="antojo"] .scene-nav a { height: 16px; }
  body[data-scene="antojo"] .scene-nav span { width: 10px; height: 10px; }
  body[data-scene="antojo"] .scene-nav [aria-current] span { background: var(--hero-reference-orange); }
  .hero .hero-weight { width: 18.518519cqw; }
}
@media (max-height: 740px) and (max-width: 899px) {
  body[data-scene="antojo"] .site-header { height: calc(56px + env(safe-area-inset-top)); padding: calc(16px + env(safe-area-inset-top)) 16px 16px 9.1%; }
  body[data-scene="antojo"] .brand { width: 84px; }
  .hero .hero-action .button { min-height: 48px; font-size: 6.6cqw; }
  .hero .hero-product-copy::after { margin-top: 8px; height: 5px; }
  .hero .hero-promise { margin-top: 12px; }
}
@media (min-width: 600px) {
  .hero { min-height: 720px; }
  .hero .hero-word--top { top: 12%; left: 1%; width: 64%; height: 35%; }
  .hero .hero-word--bottom { top: 55%; left: auto; right: 1%; width: 76%; height: 32%; }
  .hero .hero-pouch { left: 34%; top: 20%; width: 40%; height: 65%; }
  .hero .hero-food-overlay { left: 27%; top: -24%; width: 57%; height: 137%; }
  .hero .hero-definition { top: 46%; left: 8%; width: 176px; font-size: 22px; }
  .hero .hero-definition br { display: none; }
  .hero .hero-promise { margin-top: 24px; font-size: 18px; max-width: 144px; }
  .hero .hero-thread { left: 20%; top: 0; width: 65%; }
  .hero .hero-weight { top: 52%; right: 12%; font-size: 24px; }
  .hero .hero-weight span { font-size: 14px; }
  .hero .hero-action { left: 8%; right: auto; bottom: 12%; }
  .hero .hero-action .button { width: auto; min-width: 232px; height: 56px; font-size: 22px; gap: 16px; }
  .hero .hero-action .button .icon { width: 24px; height: 24px; flex-basis: 24px; }
  .hero .next-scene { left: auto; right: 56px; bottom: 24px; height: 44px; }
  .hero .next-scene .icon { width: 26px; height: 26px; }
}
@media (min-width: 900px), (min-width: 600px) and (hover: hover) and (pointer: fine) {
  .hero { --hero-content-left: 5%; }
  .hero::after { display: none; }
  .hero .hero-word--top { top: 15.8%; left: .8%; width: 49%; height: 27.5%; }
  .hero .hero-word--bottom { top: 36.7%; left: .8%; right: auto; width: 49%; height: 29.5%; }
  .hero .hero-definition {
    top: 69.5%;
    left: var(--hero-content-left);
    width: 43%;
    font-size: clamp(16px, 2cqw, 30px);
    line-height: 1.2;
  }
  .hero .hero-definition::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    width: clamp(96px, 13cqw, 184px);
    height: 8px;
    border-top: 3px solid var(--hero-line);
    border-radius: 50%;
    rotate: -5deg;
  }
  .hero .hero-product-copy::after { display: none; }
  .hero .hero-promise, .hero .hero-origin { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
  .hero .hero-origin { margin-inline-start: .25em; }
  .hero .hero-pouch { left: 53%; top: 11%; width: 35%; height: 72%; rotate: 7deg; }
  .hero .hero-food-overlay { left: 42%; top: -24%; width: 50%; height: 155%; }
  .hero .hero-thread { left: 36%; top: -26%; width: 59%; height: 170%; }
  .hero .hero-weight {
    top: 75.5%;
    right: 6.5%;
    width: auto;
    text-align: left;
    font-size: clamp(26px, 3.1cqw, 46px);
    font-weight: 700;
  }
  .hero .hero-weight span { font-size: clamp(14px, 1.75cqw, 26px); }
  .hero .hero-weight::after { margin-top: 14px; }
  .hero .hero-action { left: var(--hero-content-left); bottom: 10%; }
  .hero .hero-action .button {
    min-width: clamp(220px, 24.5cqw, 352px);
    height: clamp(56px, 9dvh, 82px);
    padding: 0 24px 4px;
    font-size: clamp(20px, 2.2cqw, 34px);
    font-weight: 700;
  }
}