/* ───────────── Brand tokens (Brand Identity Guidelines, p.06) ───────────── */
/* Coco Gothic is the guideline's supporting font. It is not on Google Fonts: install it, or put licensed
   webfont files in assets/fonts and add url() sources here. Until then Fredoka stands in. */
@font-face{font-family:'Coco Gothic';font-weight:400;src:local('Coco Gothic'),local('CocoGothic-Regular')}
@font-face{font-family:'Coco Gothic';font-weight:700;src:local('Coco Gothic Bold'),local('CocoGothic-Bold')}
:root{
  --green-dark:#1F4A2C;   /* Vine Green */
  --green:#86AD5E;        /* Fresh Green */
  --red:#9B1B22;          /* Deep Red */
  --yellow:#F4C430;       /* Lemon */
  --cream:#F4F1E8;        /* Cream */
  --white:#FFFFFF;
  /* gingham (Primary Pattern / wrap paper) */
  --gingham:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23F7EED5'/%3E%3Crect width='1' height='2' fill='%23B6BE93'/%3E%3Crect width='2' height='1' fill='%23B6BE93'/%3E%3Crect width='1' height='1' fill='%2375885B'/%3E%3C/svg%3E");

  --line:3px solid var(--green-dark);
  --pop:6px 6px 0 var(--green-dark);
  --radius:22px;

  --f-display:'Coco Gothic','Fredoka','Jua',system-ui,sans-serif;
  --f-ko-display:'Jua','Fredoka',system-ui,sans-serif;
  --f-body:'Gothic A1',system-ui,-apple-system,sans-serif;
}
html:lang(ko){ --f-display:'Jua','Coco Gothic','Fredoka',system-ui,sans-serif; }
/* Fredoka has no ş ğ İ: Turkish uses Baloo 2 (same rounded feel, full Turkish set) until Coco Gothic is licensed */
html:lang(tr){ --f-display:'Coco Gothic','Baloo 2','Fredoka',system-ui,sans-serif; }

*,*::before,*::after{box-sizing:border-box}
/* The site has one light look. Tell browsers so, or their automatic dark modes (Chrome "auto dark",
   Samsung Internet dark mode) recolour it: Samsung only leaves a page alone when it declares a dark scheme
   AND has a prefers-color-scheme:dark rule, so we declare both and keep the very same colours there. */
:root{color-scheme:light dark}
@media (prefers-color-scheme:dark){ :root{ --cream:#F4F1E8; } }
html,body{margin:0}
/* the tilted marquee pokes ~10px past the edge; clip it without making a scroll container (iOS Safari) */
html{overflow-x:clip}
body{
  background:var(--cream);
  color:var(--green-dark);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.5;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.02;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(40px,6vw,96px)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

/* ───────────── LOADER ───────────── */
html.is-loading,html.is-loading body{overflow:hidden}
.loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--cream);clip-path:circle(150% at 50% 45%);
  animation:loaderFailsafe .01s 8s forwards}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden}}
.loader.is-done{pointer-events:none}
.loader__inner{display:grid;justify-items:center;gap:14px}
/* the spin is a CSS transform animation: it runs on the compositor, so it keeps turning even while the
   main thread is busy setting the page up (a GSAP/JS spin froze exactly then) */
.loader__spin{will-change:transform}
.loader__roll{display:block;width:min(34vw,150px);height:auto;overflow:visible;animation:loaderSpin 2.4s linear infinite;will-change:transform}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
.loader__spin{filter:drop-shadow(5px 6px 0 rgba(31,74,44,.22))}
.loader__track,.loader__prog{fill:none;stroke-width:20;stroke-linecap:round}
.loader__track{stroke:rgba(134,173,94,.35)}
.loader__prog{stroke:var(--green-dark)}
.loader__word{margin:0;font-family:'Jua',var(--f-display);font-size:30px;color:var(--red);letter-spacing:.06em}
.loader__bar{width:120px;height:6px;border-radius:6px;background:rgba(31,74,44,.15);overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--green-dark);transform-origin:left;transform:scaleX(0)}

/* ───────────── NAV ───────────── */
.nav{
  position:fixed;inset:16px 16px auto;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:8px 10px 8px 8px;
  /* no backdrop-filter: re-blurring the page under a fixed bar every scroll frame was a big jank source */
  background:rgba(255,255,255,.95);
  border:var(--line);border-radius:999px;box-shadow:4px 4px 0 var(--green-dark);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.nav.is-hidden{transform:translateY(-130%)}
.nav__logo img{width:52px;height:52px}
.nav__links{display:flex;gap:6px;margin-right:auto}
.nav__links a{
  font-family:var(--f-display);font-size:16px;text-decoration:none;
  padding:8px 14px;border-radius:999px;transition:background .2s,color .2s;
}
.nav__links a:hover{background:var(--green-dark);color:var(--cream)}
.lang{display:flex;border:var(--line);border-radius:999px;overflow:hidden}
.lang button{font-family:var(--f-display);font-size:13px;padding:6px 11px}
.lang button.is-on{background:var(--red);color:var(--white)}

/* ───────────── HERO ───────────── */
/* flow layout: the mascot gets whatever height is left above the copy, so on any screen size
   (tall, wide, short laptop) the two can never overlap. Title and mascot also scale with the height. */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:clamp(96px,13svh,140px) 20px clamp(28px,6svh,72px)}
.hero__bg-word{
  position:absolute;left:50%;top:50%;translate:-50% -58%;
  font-family:var(--f-ko-display);font-size:min(36vw,560px);line-height:1;
  color:transparent;-webkit-text-stroke:3px rgba(31,74,44,.12);
  white-space:nowrap;pointer-events:none;user-select:none;
  will-change:transform; /* own layer: the huge stroked text is painted once, then only moved */
}
.hero__float{position:absolute;inset:0;pointer-events:none}
.fl{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:auto;
  rotate:var(--r);will-change:transform;
  filter:drop-shadow(3px 4px 0 rgba(31,74,44,.18));
}
.hero__stage{position:relative;z-index:2;flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:end center;translate:-4% 0;padding-bottom:4svh} /* sits on the copy; the chopsticks get the room above */
.mascot{position:relative;width:min(34vw,39svh,600px);aspect-ratio:626/400;will-change:transform}
.mascot__body{position:absolute;inset:0;will-change:transform}
.mascot__body svg{width:100%;height:100%;overflow:visible}
/* no CSS transform-origin on .eye: GSAP bakes the svg origin into the matrix, a CSS origin on top doubled it and the eyes dropped while blinking */
.mascot{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mascot:focus-visible{outline:3px dashed var(--red);outline-offset:8px;border-radius:24px}
/* chopsticks live inside the mascot svg: #stickBack behind the body, #stickFront on top */
.mascot__shadow{
  position:absolute;left:14%;right:10%;bottom:-8%;height:12%;
  background:radial-gradient(closest-side,rgba(31,74,44,.22),transparent);
  z-index:-1;
}
.fl--line{filter:none;opacity:.75}
.hero__copy{position:relative;z-index:3;flex:none;text-align:center;padding:0 20px}
.hero__tag{display:inline-block;margin:0 0 14px;padding:5px 16px;font-family:var(--f-display);font-weight:600;font-size:clamp(14px,1.1vw,18px);color:var(--cream);background:var(--green-dark);border-radius:999px;letter-spacing:.02em;rotate:-2deg}
.hero__title{font-size:clamp(36px,min(5.4vw,8svh),88px);line-height:1.05}
.hero__title .accent{color:var(--red)}
.hero__sub{max-width:520px;margin:16px auto 0;font-size:clamp(16px,1.3vw,20px);opacity:.85}
.scroll-hint{
  position:absolute;right:28px;bottom:28px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--f-display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
.scroll-hint i{width:2px;height:48px;background:var(--green-dark);transform-origin:top;animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ───────────── MARQUEE ───────────── */
.marquee{background:var(--red);color:var(--cream);border-block:var(--line);overflow:hidden;padding:18px 0;rotate:-1.5deg;margin:20px -10px;position:relative;z-index:5}
.marquee__track{display:flex;gap:28px;white-space:nowrap;width:max-content;font-family:var(--f-display);font-size:clamp(28px,4vw,56px);line-height:1}
.marquee__track b{color:var(--yellow);display:grid;place-items:center}
.marquee__track b svg{width:.62em;height:.62em;display:block}

/* ───────────── UNROLL ───────────── */
.unroll{position:relative}
.unroll__pin{position:relative;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:120px 5vw 6vh}
.unroll__head{max-width:900px}
.unroll__stage{position:relative;flex:1;margin-top:3vh}
.leaf{
  /* taller "carpet" so every ingredient ends up sitting on the leaf */
  position:absolute;left:4%;right:2%;top:5%;height:90%;
  clip-path:inset(0 100% 0 0 round 40px);
}
.leaf svg{width:100%;height:100%;display:block}
.leaf .leaf__v{display:none}
.leaf__rice{
  position:absolute;left:6%;right:6%;top:32%;bottom:32%;border-radius:999px;
  background:
    radial-gradient(circle at 20% 40%,#fff 0 6px,transparent 7px) 0 0/34px 26px,
    radial-gradient(circle at 70% 70%,#FFFDF4 0 5px,transparent 6px) 0 0/28px 22px,
    #EFE9C8;
  border:3px solid var(--green-dark);opacity:.95;
}
/* top/height are copied from the leaf in main.js; the roll's length then follows the leaf outline via scaleY */
/* size + position are set in px every frame by main.js (drawRoll) so it meets the leaf outline exactly */
.roll{position:absolute;left:0;top:0;--roll-w:120px;width:120px;height:0;z-index:3;will-change:transform}
.roll svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(6px 6px 0 rgba(31,74,44,.25))}

.ing{
  position:absolute;left:var(--x);top:var(--y);z-index:2; /* under the roll: revealed only once it has rolled past */
  width:clamp(64px,7vw,108px);aspect-ratio:1;translate:-50% -50%;
  padding:0;border-radius:50%;
  opacity:0;will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.ing img{width:100%;height:100%;object-fit:contain;transition:transform .35s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(3px 4px 0 rgba(31,74,44,.2))}
.ing span{
  position:absolute;left:50%;top:100%;translate:-50% 6px;white-space:nowrap;
  font-family:var(--f-display);font-size:15px;padding:3px 10px;border-radius:999px;
  background:var(--white);border:2px solid var(--green-dark);opacity:0;transition:opacity .25s;
}
.unroll.is-open .ing span{opacity:1}
.ing:hover img,.ing:focus-visible img,.ing.is-active img{transform:scale(1.18) rotate(-6deg)}
.ing:focus-visible{outline:3px dashed var(--red);outline-offset:6px}
/* tap moves (main.js FX): GSAP drives the img, so the hover transition must not smooth its frames */
.ing.is-fx img{transition:none}
.ing-fx{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
.ing-p{position:absolute;translate:-50% -50%;will-change:transform}
.ing-p svg{display:block;width:100%;height:auto;overflow:visible}

.card{
  position:absolute;z-index:20;width:300px;padding:18px 18px 14px;
  background:var(--white);border:var(--line);border-radius:var(--radius);box-shadow:var(--pop);
  pointer-events:none;
}
.card[hidden]{display:block;visibility:hidden}
.card__head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.card__img{width:54px;height:54px;object-fit:contain;background:var(--cream);border-radius:14px;padding:6px;border:2px solid var(--green-dark)}
.card__name{font-size:26px}
.card__alt{margin:2px 0 0;font-size:13px;opacity:.6}
.card__desc{margin:0 0 12px;font-size:15px}
.card__facts{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.card__facts dt{display:none}
.card__facts dd{margin:0;font-family:var(--f-display);font-size:13px;padding:3px 10px;border-radius:999px;background:var(--cream);border:2px solid var(--green-dark)}
.card__facts dd.kcal{background:var(--yellow)}
.card__note{margin:12px 0 0;font-size:11px;opacity:.5}

/* ───────────── 360 SPIN ───────────── */
.spin{background:var(--green-dark);color:var(--cream)}
.spin__pin{height:100svh;display:grid;grid-template-columns:minmax(260px,1fr) 2fr;align-items:center;gap:4vw;padding:100px 5vw 60px;position:relative;overflow:hidden}
.spin__stage{position:relative;height:min(70vh,620px)}
#spinCanvas{width:100%;height:100%;display:block}
.claims{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.claims li{
  position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--f-display);font-size:clamp(16px,1.5vw,22px);
  padding:10px 18px 10px 10px;border-radius:999px;background:var(--cream);color:var(--green-dark);
  border:3px solid var(--cream);box-shadow:5px 5px 0 var(--red);
  opacity:0;
}
/* right-side chips grow leftward so long translations (TR) never leave the stage */
.claims li[data-side="r"]{left:auto;right:var(--rx,0%)}
.claims li b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red)}
.claims li b img{width:66%;height:66%}
/* tap a claim → detail card */
.claims li{pointer-events:auto;cursor:pointer;transition:box-shadow .2s;-webkit-tap-highlight-color:transparent}
.claims li:hover,.claims li.is-open{box-shadow:7px 7px 0 var(--yellow)}
.claims li:focus-visible{outline:3px dashed var(--yellow);outline-offset:4px}
.claims__more{font-style:normal;display:grid;place-items:center;width:24px;height:24px;margin-left:2px;border-radius:50%;background:var(--green-dark);color:var(--cream);font-size:17px;line-height:1;transition:rotate .3s}
.claims li.is-open .claims__more{rotate:45deg;background:var(--red)}
.claim-pop{position:absolute;left:0;top:0;z-index:12;width:min(320px,86vw);padding:16px 18px 14px 18px;background:var(--cream);color:var(--green-dark);
  border:3px solid var(--green-dark);border-radius:20px;box-shadow:6px 6px 0 var(--red)}
.claim-pop[hidden]{display:block;visibility:hidden}
.claim-pop__ing{position:absolute;right:-18px;top:-26px;width:64px;height:64px;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.25))}
.claim-pop__title{display:block;font-family:var(--f-display);font-size:22px;color:var(--red);margin:0 40px 6px 0}
.claim-pop__txt{margin:0 0 8px;font-size:15px;line-height:1.5}
.claim-pop__note{font-size:11px;opacity:.55}
.spin__bar{position:absolute;left:5vw;right:5vw;bottom:32px;height:4px;background:rgba(244,241,232,.15);border-radius:4px;overflow:hidden}
.spin__bar i{display:block;height:100%;width:100%;background:var(--yellow);transform-origin:left;transform:scaleX(0)}

/* ───────────── MENU ───────────── */
/* the guideline's wrap paper as a tablecloth */
.menu{position:relative;min-height:100svh;padding:140px 5vw;background:var(--gingham) 0 0/44px 44px}
/* cup scene: the cup + bits fly above the grid (positions set in px by main.js) */
.cup-stage{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.cup-hero{position:absolute;left:0;top:0;max-width:none;filter:drop-shadow(0 14px 18px rgba(31,74,44,.3));will-change:transform}
.cup-bit{position:absolute;left:0;top:0;width:clamp(40px,4vw,64px);opacity:0;will-change:transform;filter:drop-shadow(3px 4px 0 rgba(31,74,44,.2))}
.section-head--pill{display:inline-block;padding:14px 30px 18px;background:var(--cream);border:var(--line);border-radius:999px;box-shadow:var(--pop)}
.section-head--pill h2{font-size:clamp(34px,4.6vw,72px)}
.section-head{max-width:900px;margin-bottom:56px}
.menu__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.dish{
  background:var(--white);border:var(--line);border-radius:var(--radius);box-shadow:var(--pop);
  padding:18px 18px 22px;display:flex;flex-direction:column;gap:8px;
  transition:translate .3s cubic-bezier(.3,1.5,.5,1),rotate .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s;
}
/* hover uses the individual translate/rotate properties: GSAP owns .dish's transform (cup scene) */
.dish:hover{translate:-4px -6px;rotate:-1deg;box-shadow:10px 12px 0 var(--green-dark)}
.dish__img{aspect-ratio:4/3;border-radius:14px;background:color-mix(in srgb,var(--c) 22%,var(--cream));border:2px solid var(--green-dark);display:grid;place-items:center;margin-bottom:8px;overflow:hidden}
.dish__img img{width:62%;max-height:80%;object-fit:contain;transition:transform .4s}
.dish--icon .dish__img{background:var(--c)}
.dish--icon .dish__img img{width:44%}
.dish--photo .dish__img{background:color-mix(in srgb,var(--green) 18%,var(--cream))}
.dish--photo .dish__img{position:relative}
/* absolutely sized so the % height resolves (the cup scene lands the flying cup exactly on this box) */
.dish--photo .dish__img img{position:absolute;left:0;right:0;top:6%;margin:0 auto;width:auto;max-width:none;height:88%;max-height:none;filter:drop-shadow(0 8px 10px rgba(31,74,44,.25))}
.dish:hover .dish__img img{transform:scale(1.08) rotate(-4deg)}
.dish h3{font-size:24px}
.dish p{margin:0;font-size:15px;opacity:.8;flex:1}
.price{font-family:var(--f-display);font-size:18px;color:var(--red)}
/* short laptop screens: tighter menu so heading + cards fit one window and the cup scene pins at the top */
@media (min-width:821px) and (max-height:800px){
  .menu{padding-top:100px}
  .menu .section-head{margin-bottom:32px}
  .menu .dish__img{max-height:max(100px,calc(100svh - 520px))}
}

/* ───────────── STORY ───────────── */
.story{background:#F3E7C2 radial-gradient(circle,#E6D7A8 1.3px,transparent 1.6px) 0 0/22px 22px;color:var(--green-dark)}
/* pinned viewport onto a wide illustrated map; main.js sizes .story__world to the pin height and pans it */
.story__pin{position:relative;height:100svh;overflow:hidden}
.story__world{position:absolute;left:0;top:0;will-change:transform}
.story__world > svg:not(.traveller){position:absolute;inset:0;width:100%;height:100%;display:block}
.story__fx .lm{cursor:pointer}
/* the animated layer (route line, roll-out, landmarks) gets its OWN compositor layer: in one shared layer every
   route-line change repainted the whole 650-node static map underneath each frame (story ran at ~50fps) */
.story__fx{pointer-events:none;will-change:transform}
.story__route{pointer-events:none;will-change:transform}
.story__map{will-change:transform}
.story__fx .lm{pointer-events:auto}
.map-sea{paint-order:stroke;stroke:#BFDDCB;stroke-width:8px;stroke-linejoin:round;font-family:var(--f-display);font-size:30px;fill:#5E8F78;letter-spacing:.08em;font-style:italic}
.map-n{font-family:var(--f-display);font-size:26px;fill:var(--green-dark)}
.map-region{font-family:var(--f-display);font-size:26px;fill:rgba(31,74,44,.6);letter-spacing:.32em;paint-order:stroke;stroke:#F6EED2;stroke-width:9px;stroke-linejoin:round}
html:lang(ko) .map-region{letter-spacing:.18em}
.ribbon__txt{font-family:var(--f-display);font-size:24px;fill:var(--cream);letter-spacing:.04em}
.story__fx .ribbon{pointer-events:none}
.cloud{position:absolute;width:calc(140px * var(--s) * var(--k, 1));translate:0 0;will-change:transform;pointer-events:none}
.cloud svg{display:block;width:100%;height:auto}
.traveller{position:absolute;left:0;top:0;width:clamp(127px,11.7vw,187px);height:auto;overflow:visible;z-index:3;will-change:transform;filter:drop-shadow(4px 6px 0 rgba(31,74,44,.22))}
.story__head{position:absolute;right:5vw;top:96px;z-index:4;padding:14px 22px;background:var(--cream);border:var(--line);border-radius:22px;box-shadow:6px 6px 0 var(--green-dark);rotate:-1.5deg}
.story__head h2{font-size:clamp(24px,2.6vw,40px)}
.story__cards{position:absolute;left:5vw;bottom:56px;z-index:4;width:min(440px,90vw);height:150px}
.story__card{position:absolute;inset:auto 0 0 0;background:var(--white);border:var(--line);border-radius:var(--radius);box-shadow:var(--pop);padding:16px 20px 18px;opacity:0;visibility:hidden}
.story__card h3{font-size:26px;color:var(--red);margin:2px 0 6px}
.story__card p{margin:0;font-size:16px;line-height:1.45}
.story__no{font-family:var(--f-display);font-size:13px;letter-spacing:.12em;opacity:.6}
.story__bar{position:absolute;left:5vw;right:5vw;bottom:24px;height:6px;border-radius:6px;background:rgba(31,74,44,.18);z-index:4;overflow:hidden}
.story__bar i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}

/* ───────────── VISIT ───────────── */
/* logo on the guideline's Graphic Pattern (p.05), details on a cream card */
.visit{display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;align-items:center;padding:140px 8vw;background:var(--green-dark) url("../assets/brand/pattern.svg") 0 0/330px auto}
.visit__info{background:var(--cream);border:var(--line);border-radius:28px;box-shadow:8px 8px 0 var(--red);padding:clamp(24px,3.4vw,48px)}
.visit__info h2{font-size:clamp(38px,4.8vw,80px)}
.visit__tag{margin:0 0 10px;font-family:var(--f-display);font-weight:600;color:var(--green)}
.visit__badge{perspective:900px}
/* the logo is a sticker: hover tilts it, tap peels it up and slaps it back, mouse-drag pulls it (main.js) */
.visit__badge img{width:100%;max-width:460px;margin:auto;animation:sway 6s ease-in-out infinite;cursor:grab;
  -webkit-user-drag:none;user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform;
  filter:drop-shadow(6px 8px 0 rgba(0,0,0,.22))}
.visit__badge img.is-held{cursor:grabbing;animation-play-state:paused}
/* while pulled, the sticker goes over the info card */
.visit__badge{position:relative;z-index:1}
.visit__badge:has(img.is-held){z-index:10}
.visit__badge img:focus-visible{outline:3px dashed var(--yellow);outline-offset:10px;border-radius:50%}
/* gentle sway, not a full spin: the guideline logo should stay readable */
@keyframes sway{0%,100%{rotate:-5deg}50%{rotate:5deg}}
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin:28px 0 32px;font-size:18px}
.visit dt{font-family:var(--f-display);color:var(--red)}
.visit dd{margin:0}
.visit__btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{font-family:var(--f-display);font-size:18px;text-decoration:none;padding:12px 24px;border-radius:999px;border:var(--line);box-shadow:4px 4px 0 var(--green-dark);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--green-dark)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--green-dark)}
.btn--green{background:var(--green)}
.btn--red{background:var(--red);color:var(--white)}
.btn--yellow{background:var(--yellow)}

.gingham-band{height:44px;background:var(--gingham) 0 0/44px 44px;border-block:var(--line)}
.foot{padding:40px 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px}
.foot img{width:172px}
.foot p{margin:0;font-size:14px;opacity:.7}

/* ───────────── SECTION CHARACTERS (brand icon set, coloured; built by main.js) ───────────── */
.char{position:absolute;z-index:6;width:var(--cw,128px);cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(4px 6px 0 rgba(31,74,44,.2))}
.char svg{display:block;width:100%;height:auto;overflow:visible}
.char--unroll{--cw:clamp(96px,9vw,140px);right:7vw;top:92px}
.spin__copy{position:relative}
.char--spin{--cw:clamp(130px,13vw,200px);position:relative;margin-top:36px}
/* on Vine Green the dark outline disappears: give these a cream sticker edge (like the packaging sticker) */
.char--spin,.char--visit{filter:drop-shadow(3px 0 0 var(--cream)) drop-shadow(-3px 0 0 var(--cream)) drop-shadow(0 3px 0 var(--cream)) drop-shadow(0 -3px 0 var(--cream)) drop-shadow(5px 7px 0 rgba(0,0,0,.28))}
.section-head--pill{position:relative}
.char--menu{--cw:clamp(96px,8vw,124px);left:100%;bottom:-18px;margin-left:12px}
.visit__info{position:relative}
.char--visit{--cw:clamp(104px,9vw,136px);right:34px;bottom:calc(100% - 7px);will-change:translate}
/* while it roams (main.js wander) it may stand on the logo: lift the card above the badge column */
/* layers in .visit: card (no z) < logo badge (1, held 10) < the roaming character (12, so a fall never hides behind the logo).
   The card must not form its own stacking context, or the character would be stuck under the logo with it. */
.char--visit{z-index:12}
/* its sleepy "z"s and the startled "!" (spawned by main.js inside the card) */
.char-z{position:absolute;z-index:7;pointer-events:none;font-family:var(--f-display);font-size:28px;line-height:1;color:var(--cream);
  -webkit-text-stroke:1.5px var(--green-dark);paint-order:stroke fill}
.char-z--bang{font-size:38px;color:var(--yellow)}
.char-dust{position:absolute;z-index:7;pointer-events:none;border-radius:50%;background:var(--cream);border:2px solid var(--green-dark)}

/* ───────────── STICKER COLLECTION ───────────── */
.sticker{position:absolute;left:var(--sx);top:var(--sy);translate:-50% -50%;rotate:var(--sr,0deg);z-index:8;width:var(--st,clamp(54px,4.6vw,70px));aspect-ratio:1;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(3px 4px 0 rgba(31,74,44,.28))}
.sticker svg{display:block;width:100%;height:100%;animation:stickerHint 5s ease-in-out infinite;animation-delay:var(--sd,0s);transition:scale .25s cubic-bezier(.3,1.6,.5,1)}
.sticker:hover svg,.sticker:focus-visible svg{scale:1.14}
.sticker:focus-visible{outline:3px dashed var(--red);outline-offset:4px;border-radius:50%}
.sticker.is-got{display:none}
.sticker--corner{left:auto;top:-22px;right:-18px;translate:none}
.dish{position:relative}
/* still most of the time, a quick wiggle now and then so it reads as "touch me" */
@keyframes stickerHint{0%,78%,100%{transform:rotate(0)}82%{transform:rotate(-12deg) scale(1.06)}86%{transform:rotate(10deg) scale(1.06)}90%{transform:rotate(-6deg)}94%{transform:rotate(3deg)}}
.album-btn{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border:var(--line);border-radius:999px;background:var(--yellow);font-family:var(--f-display);font-size:15px;line-height:1}
.album-btn__icon{width:28px;height:28px;display:block}
.album-btn__icon svg{width:100%;height:100%;display:block}
.album{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(31,74,44,.55)}
.album[hidden]{display:none}
.album__card{position:relative;width:min(520px,100%);max-height:calc(100svh - 40px);overflow:auto;background:var(--cream);border:var(--line);border-radius:28px;box-shadow:8px 8px 0 var(--red);padding:28px 26px 22px;text-align:center}
.album__card h3{font-size:clamp(26px,3vw,36px);margin:0 0 8px}
.album__hint{margin:0 0 18px;font-size:15px;opacity:.8}
.album__close{position:absolute;right:14px;top:10px;width:40px;height:40px;font-size:30px;line-height:1;border-radius:50%}
.album__close:hover{background:rgba(31,74,44,.1)}
.album__slots{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.album__slots li{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:3px dashed rgba(31,74,44,.3);font-family:var(--f-display);font-size:22px;color:rgba(31,74,44,.35)}
.album__slots li.is-got{border:0}
.album__slots li svg{width:100%;height:100%;display:block;filter:drop-shadow(2px 3px 0 rgba(31,74,44,.25))}
.album__reward{margin:4px 0 14px;padding:16px 18px;border:3px dashed var(--red);border-radius:18px;background:var(--white)}
.album__reward b{display:block;font-family:var(--f-display);font-size:24px;color:var(--red);margin-bottom:6px}
.album__reward p{margin:0 0 6px}
.album__reward small{opacity:.6}
.album__reset{font-size:13px;opacity:.55;text-decoration:underline}
.toast{position:fixed;left:50%;bottom:28px;z-index:90;translate:-50% 0;padding:10px 20px;background:var(--green-dark);color:var(--cream);font-family:var(--f-display);font-size:17px;border-radius:999px;box-shadow:4px 4px 0 var(--red);opacity:0;pointer-events:none}
.confetti{position:fixed;z-index:110;width:22px;height:22px;pointer-events:none}

/* ───────────── SPIRAL PROGRESS (brand icon: sarma_cross_section) ───────────── */
.spiral{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;padding:0;border-radius:50%;
  opacity:0;visibility:hidden;scale:.6;transition:opacity .35s,visibility .35s,scale .45s cubic-bezier(.3,1.6,.5,1);
  filter:drop-shadow(3px 4px 0 rgba(31,74,44,.3));-webkit-tap-highlight-color:transparent}
.spiral.is-on{opacity:1;visibility:visible;scale:1}
.spiral:hover{scale:1.1}
.spiral:focus-visible{outline:3px dashed var(--red);outline-offset:4px}
.spiral svg{display:block;width:100%;height:100%;overflow:visible}
.spiral__disc{fill:var(--cream);stroke:var(--green-dark);stroke-width:18}
.spiral__track,.spiral__prog{fill:none;stroke-width:20;stroke-linecap:round}
.spiral__track{stroke:rgba(134,173,94,.35)}
.spiral__prog{stroke:var(--green-dark)}
/* keep the pinned progress bars clear of the spiral */
.spin__bar,.story__bar{right:calc(5vw + 64px)}
.foot{padding-right:calc(5vw + 64px)}

/* ───────────── MOBILE ───────────── */
@media (max-width:820px){
  .nav{gap:10px}
  .nav__links{display:none}
  .nav__logo img{width:44px;height:44px}
  .lang{margin-left:auto}
  .mascot{width:64vw}
  .hero__stage{translate:-6% 0}
  .fl{width:calc(var(--s) * .62)}
  .hero{padding-bottom:9svh}
  .scroll-hint{display:none}

  .unroll__pin{padding:100px 6vw 4vh}
  /* phones: vertical leaf, rolled from the top down (main.js geo.vert) */
  .leaf{left:4%;right:4%;top:2%;height:96%;clip-path:inset(0 0 100% 0 round 40px)}
  .leaf .leaf__h{display:none}
  .leaf .leaf__v{display:block}
  .leaf__rice{left:30%;right:30%;top:7%;bottom:7%}
  .roll{--roll-w:72px}
  .ing{width:56px}
  .leaf{transition:none}
  .fl:nth-child(4){--x:4% !important;--y:62% !important}
  /* phones: the title block covers the lower half of the hero, so the icons that would sit on it stay hidden */
  .hero__float .fl:nth-child(2),.hero__float .fl:nth-child(4),.hero__float .fl:nth-child(7),.hero__float .fl:nth-child(8),.hero__float .fl:nth-child(14){display:none}
  .ing span{font-size:12px}
  .card{width:min(86vw,320px)}

  .spin__pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:96px 6vw 60px}
  .spin__stage{height:66svh}
  #spinCanvas{height:46%}
  .claims li{font-size:14px;padding:6px 12px 6px 6px;--x:16% !important}
  .claims li[data-side="r"]{left:var(--x);right:auto}
  .claims li:nth-child(1){--y:45% !important}
  .claims li:nth-child(2){--y:54% !important}
  .claims li:nth-child(3){--y:63% !important}
  .claims li:nth-child(4){--y:72% !important}
  .claims li:nth-child(5){--y:81% !important}
  .claims li b{width:26px;height:26px;font-size:11px}

  .menu{padding:100px 6vw}
  .menu__grid{grid-template-columns:1fr 1fr;gap:14px}
  .dish{padding:12px 12px 16px}
  .dish h3{font-size:18px}
  .dish p{font-size:13px}
  .price{font-size:15px;line-height:1.3}

  .story__head{top:84px;right:auto;left:6vw;padding:10px 16px}
  .story__cards{left:4vw;right:4vw;width:auto;bottom:44px}
  .story__card p{font-size:15px}
  .traveller{width:102px}
  .sticker{--st:48px}
  .spiral{right:12px;bottom:12px;width:46px;height:46px}
  .foot{padding:40px 5vw 76px}
  .spin__bar,.story__bar{right:calc(4vw + 54px)}
  .story__cards{bottom:66px}
  /* inline --sx/--sy can only be overridden with !important */
  .sticker[data-sticker="1"]{--sx:88% !important;--sy:42% !important}
  .sticker[data-sticker="2"]{--sx:9% !important;--sy:96% !important}
  .album-btn{padding:4px 10px 4px 4px;font-size:14px}
  .album-btn__icon{width:26px;height:26px}
  .album__slots{gap:6px}
  .char--unroll{--cw:74px;right:5vw;top:78px}
  .char--spin{--cw:76px;position:absolute;right:0;top:calc(100% + 4px);margin:0}
  .char--menu{--cw:70px;margin-left:6px;bottom:-12px}
  .char--visit{--cw:92px;right:18px}
  .menu{background-size:32px 32px}
  .section-head--pill{padding:10px 22px 14px}

  .visit{grid-template-columns:1fr;padding:100px 6vw;text-align:left}
  .visit__badge img{max-width:260px}
  .foot{flex-direction:column;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .visit__badge img,.scroll-hint i{animation:none}
}



/* ───────────── little delights (main.js "LITTLE DELIGHTS" + the visit friend) ───────────── */
.say{position:absolute;z-index:120;translate:-50% -100%;pointer-events:none;white-space:nowrap;padding:7px 14px;
  font-family:var(--f-display);font-size:17px;line-height:1.1;color:var(--green-dark);background:var(--cream);
  border:var(--line);border-radius:16px;box-shadow:3px 3px 0 var(--green-dark)}
.say::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;margin-left:-7px;background:var(--cream);
  border-right:var(--line);border-bottom:var(--line);rotate:45deg}
/* beside the character: no centring translate, wraps on narrow screens, the tail points at the character */
.say--side{translate:none;white-space:normal;text-align:center}
.say--side::after{top:50%;bottom:auto;margin:-7px 0 0}
.say--r::after{left:-9px;rotate:135deg}
.say--l::after{left:auto;right:-9px;rotate:-45deg}
.char-z--fixed{position:fixed}
.hero-night{position:absolute;top:-14%;right:-6%;width:16%;pointer-events:none;z-index:3}
.hero-night svg{display:block;width:100%;height:auto;filter:drop-shadow(3px 3px 0 rgba(31,74,44,.25))}
.hero-night i{position:absolute;left:-30%;top:40%;font:700 clamp(16px,1.6vw,26px)/1 var(--f-display);font-style:normal;color:var(--green-dark);
  opacity:0;animation:nightZ 3.6s ease-out infinite}
.hero-night i:nth-of-type(2){animation-delay:1.2s}
.hero-night i:nth-of-type(3){animation-delay:2.4s}
@keyframes nightZ{0%{opacity:0;translate:0 0;scale:.6}20%{opacity:1}100%{opacity:0;translate:-40px -60px;scale:1.3}}
.juice{position:fixed;z-index:110;width:12px;height:15px;margin:-7px 0 0 -6px;pointer-events:none;background:var(--yellow);
  border:2px solid var(--green-dark);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.conga{position:fixed;left:0;bottom:12px;z-index:105;display:flex;gap:8px;pointer-events:none}
.conga__one{width:84px}
.conga__one svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(3px 4px 0 rgba(31,74,44,.25))}
.roll-up{position:fixed;z-index:105;pointer-events:none;padding:6px;background:var(--cream);border:var(--line);border-radius:50%;box-sizing:border-box}
.visit__btns .btn{position:relative}
.btn-pop{position:absolute;left:50%;bottom:100%;width:34px;margin:0 0 4px -17px;pointer-events:none;z-index:2}
.btn-pop svg{display:block;width:100%;height:auto;overflow:visible}
.card-stickers{position:absolute;right:22px;bottom:-18px;width:170px;height:64px;pointer-events:none;z-index:3}
.card-stickers__one{position:absolute;left:0;top:0;width:54px}
.card-stickers__one svg{display:block;width:100%;height:auto;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.2))}
.char--friend{--cw:clamp(104px,9vw,136px);left:30px;bottom:calc(100% - 4px);width:calc(var(--cw) * .812);z-index:12;
  filter:drop-shadow(3px 0 0 var(--cream)) drop-shadow(-3px 0 0 var(--cream)) drop-shadow(0 3px 0 var(--cream)) drop-shadow(0 -3px 0 var(--cream)) drop-shadow(5px 7px 0 rgba(0,0,0,.28))}
@media (max-width:820px){
  .char--friend{--cw:92px;left:18px}
  .card-stickers{right:12px;width:120px}
  .card-stickers__one{width:36px}
  .say{font-size:15px}
}