@property --cx{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@property --cy{syntax:'<length-percentage>';inherits:true;initial-value:45%}
body{margin:0;background:#F3ECDC}
a{color:#211C17}a:hover{color:#000}
.oe *{box-sizing:border-box}
.oe ::selection{background:#FBB424;color:#211C17}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain{position:absolute;inset:0;background-image:url(/assets/grain.png);background-size:320px 320px;mix-blend-mode:multiply;opacity:.6;pointer-events:none;z-index:60}
.wrap{max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px}
.mono{font-family:'Space Mono',ui-monospace,Menlo,monospace;font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;line-height:1.35}
.hand{font-family:'Patrick Hand','Comic Sans MS',cursive;font-weight:400;letter-spacing:0;text-transform:none}
.eyebrow-s{margin:0 0 18px;display:inline-flex;align-items:center;gap:10px}
.eyebrow-s::before{content:"";width:14px;height:17px;border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;background:#FBB424;border:2px solid currentColor}
.h2{margin:0;font-weight:800;font-size:clamp(40px,6.2vw,92px);line-height:.92;letter-spacing:-.045em;text-wrap:balance}
.body{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#2F2922;max-width:46ch;text-wrap:pretty}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(243,236,220,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1.5px solid #211C17}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#211C17;min-height:44px}
.brand svg{flex:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.brand:hover svg{transform:rotate(-14deg)}
.wordmark{font-weight:800;font-size:25px;letter-spacing:-.03em;line-height:1}
.brand .mono{font-size:10.5px;padding-top:3px}
.nav-right{display:flex;align-items:center;gap:10px}
.links{display:flex;gap:2px}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;text-decoration:none;color:#211C17;transition:background .2s}
.links a:hover{background:#FBB424}
.seg{display:inline-flex;border:1.5px solid #211C17;border-radius:999px;padding:3px;gap:2px}
.seg button{font-family:'Space Mono',ui-monospace,monospace;font-weight:700;font-size:12px;letter-spacing:.06em;border:0;background:transparent;color:#211C17;min-height:42px;min-width:44px;padding:0 13px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.seg button:hover{background:rgba(251,180,36,.45)}
.seg button.on{background:#211C17;color:#F3ECDC}
.seg button:focus-visible,.links a:focus-visible,.brand:focus-visible,.cta:focus-visible{outline:3px solid #FBB424;outline-offset:2px}

/* hero */
.hero{position:relative;padding-top:92px;padding-bottom:64px}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.headline{margin:0;font-weight:800;font-size:clamp(48px,10.6vw,152px);line-height:.88;letter-spacing:-.05em;text-shadow:.035em .03em 0 #FBB424;font-variation-settings:'opsz' 96;cursor:default}
.headline .ln{display:block}
.wd{display:inline-block;white-space:nowrap;margin-right:.2em}
.wd:last-child{margin-right:0}
.ch{display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .2s;animation:chIn .8s cubic-bezier(.3,1.5,.5,1) backwards}
.ch:hover{transform:translateY(-.14em) rotate(-7deg) scale(1.08);color:#FBB424;text-shadow:.035em .03em 0 #211C17}
.yolk{position:relative;z-index:0}
.yolk .ch{text-shadow:none}
.yolk .ch:hover{color:#FAF8F1;text-shadow:.035em .03em 0 #211C17}
.yolk::before{content:"";position:absolute;left:-.1em;right:-.12em;top:.1em;bottom:-.02em;background:#FBB424;border-radius:46% 54% 42% 58% / 58% 50% 50% 42%;transform:rotate(-3deg);z-index:-1;animation:yolkIn .7s .75s cubic-bezier(.34,1.56,.64,1) both}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:34px}
.sub{margin:0;font-size:clamp(20px,2.2vw,30px);font-weight:500;letter-spacing:-.015em;line-height:1.2;max-width:26ch;animation:rise .95s .6s cubic-bezier(.2,.85,.2,1) both}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border:2.5px solid #211C17;border-radius:999px;background:#211C17;color:#F3ECDC;text-decoration:none;font-weight:700;font-size:17px;box-shadow:5px 5px 0 #FBB424;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;animation:rise .95s .75s cubic-bezier(.2,.85,.2,1) both}
.cta:hover{color:#F3ECDC;transform:translate(-2px,-2px);box-shadow:8px 8px 0 #FBB424}
.cta svg{transition:transform .3s}
.cta:hover svg{transform:translateY(3px)}
.stamp-wrap{padding-bottom:6px}
.stamp{display:block;width:224px;height:224px;overflow:visible}
.spin{transform-origin:112px 112px;animation:spin 32s linear infinite}
.shard{position:absolute;z-index:1;overflow:visible;pointer-events:none;transition:transform .25s ease-out}
.sh1{top:40px;right:30%;transform:translate(calc(var(--mx,0) * -26px),calc(var(--my,0) * -20px)) rotate(-18deg)}
.sh2{bottom:18px;right:4%;transform:translate(calc(var(--mx,0) * 34px),calc(var(--my,0) * 26px)) rotate(152deg)}
.sh3{top:150px;left:-6px;transform:translate(calc(var(--mx,0) * 18px),calc(var(--my,0) * 14px)) rotate(24deg)}
.sh4{bottom:120px;right:24%;transform:translate(calc(var(--mx,0) * -40px),calc(var(--my,0) * -30px))}

/* tapes */
.tapes{position:relative;padding:22px 0 30px;overflow:hidden}
.tape{position:relative;width:112%;margin-left:-6%;border-block:2.5px solid #211C17;overflow:hidden}
.tape-a{background:#FBB424;transform:rotate(-2deg);z-index:2}
.tape-b{background:#211C17;color:#F3ECDC;transform:rotate(1.6deg);margin-top:-14px}
.track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.track.rev{animation-direction:reverse;animation-duration:58s}
.tape:hover .track{animation-play-state:paused}
.tape-a .track span{padding:14px 0;font-weight:800;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;white-space:pre;line-height:1}
.tape-b .track span{padding:12px 0;white-space:pre}

/* boil */
.boil{animation:boil .42s steps(1,end) infinite}
.boil.slow{animation-duration:.6s}

/* carton */
.carton-sec{position:relative;padding-top:80px;padding-bottom:130px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;margin-bottom:44px}
.note{display:flex;align-items:flex-start;gap:4px;font-size:25px;line-height:1;color:#211C17;transform:rotate(-4deg);padding-right:8%}
.note svg{overflow:visible;margin-top:12px}
.carton{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 34px;padding:24px 40px 42px;background-color:#CDC2AA;background-image:radial-gradient(rgba(33,28,23,.14) 1px,transparent 1.6px);background-size:7px 7px;border:3px solid #211C17;border-radius:32px;box-shadow:calc(12px - var(--mx,0) * 8px) calc(12px - var(--my,0) * 8px) 0 #211C17;transform:perspective(1800px) rotateX(calc(var(--my,0) * -3deg)) rotateY(calc(var(--mx,0) * 4deg));transition:transform .35s ease-out,box-shadow .35s ease-out}
.flap{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:10px 16px;background:#FBB424;border:2px solid #211C17;border-radius:12px;transform:rotate(-.35deg)}
.flap b{font-weight:800;font-size:20px;letter-spacing:-.02em}
.slot{position:relative;display:flex;flex-direction:column;gap:16px;text-decoration:none;color:#211C17;background:none;border:0;padding:0;margin:0;font:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
a.slot,button.slot{cursor:pointer}
.slot:focus-visible{outline:3px solid #211C17;outline-offset:8px;border-radius:18px}
.cup{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:50%;background:radial-gradient(circle at 50% 44%,#B3A68B 0 34%,#C2B69D 56%,#D3C9B3 69%,#DFD6C3 73%,#C7BBA4 80%);box-shadow:inset 0 16px 24px rgba(52,38,18,.40),inset 0 -6px 10px rgba(255,250,235,.45),0 3px 0 rgba(255,250,235,.55)}
.egg-drop{position:absolute;inset:1%;animation:drop .85s cubic-bezier(.34,1.56,.64,1) both}
.egg-drop svg{display:block;width:100%;height:100%;overflow:visible}
.s1 .egg-drop{animation-delay:.35s}.s2 .egg-drop{animation-delay:.45s}.s3 .egg-drop{animation-delay:.55s}.s4 .egg-drop{animation-delay:.65s}
.s5 .egg-drop{animation-delay:.75s}.s6 .egg-drop{animation-delay:.85s}.s7 .egg-drop{animation-delay:.95s}.s8 .egg-drop{animation-delay:1.05s}
.critter{transform-box:fill-box;transform-origin:50% 85%;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.bob{transform-box:fill-box;transform-origin:50% 100%;animation:bob 2.8s ease-in-out infinite}
.s2 .bob{animation-delay:-.9s}.s3 .bob{animation-delay:-1.7s}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.8s infinite}
.s2 .eyes{animation-delay:1.3s}.s3 .eyes{animation-delay:2.6s}
.look{transform:translate(calc(var(--mx,0) * 3px),calc(var(--my,0) * 2.6px));transition:transform .12s linear}
.lid{transform-box:fill-box;transform-origin:center;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
a.slot:hover .critter,a.slot:focus-visible .critter{transform:translateY(-8px) scale(1.07)}
a.slot:hover .lid,a.slot:focus-visible .lid{transform:translate(9px,-9px) rotate(18deg)}
.wob{transform-box:fill-box;transform-origin:50% 62%;animation:wobble 3.6s ease-in-out infinite}
.s5 .wob{animation-delay:-1.6s;animation-duration:4.1s}
.poked-a .wob{animation:shakeA .75s ease-in-out}
.poked-b .wob{animation:shakeB .75s ease-in-out}
.bubble{position:absolute;z-index:8;top:4%;left:50%;transform:translateX(-50%) rotate(-4deg);background:#211C17;color:#F3ECDC;padding:9px 12px;border-radius:10px;white-space:nowrap;animation:pop .35s cubic-bezier(.34,1.56,.64,1) both}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#211C17;transform:translateX(-50%) rotate(45deg);border-radius:2px;z-index:-1}
.tag{display:flex;flex-direction:column;gap:7px;padding:0 4px}
.tag-top{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.no{font-size:11px;color:#3D352C}
.st{font-size:10.5px;padding:4px 7px 3px;border:1.5px solid #211C17;border-radius:4px;transform:rotate(-2.5deg);white-space:nowrap;line-height:1.2}
.st-h{background:#FBB424}
.st-s{background:#FAF8F1}
.st-s i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#E0662B;margin-right:6px;vertical-align:1px;animation:pulse 1.4s ease-in-out infinite}
.st-e{border-style:dashed}
.name{font-weight:800;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em;line-height:1}
.line{font-size:15px;line-height:1.38;color:#2F2922;text-wrap:pretty}
.go{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:3px;padding:3px 0;border-bottom:1.5px solid #211C17;font-size:11px;transition:background .2s,padding .2s}
a.slot:hover .go,a.slot:focus-visible .go{background:#FBB424;padding-left:6px;padding-right:6px}
.empty .line{color:#4A4137}

/* story */
.story-sec{padding-top:20px;padding-bottom:140px}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px 80px;align-items:start}
.story-text{display:flex;flex-direction:column;gap:22px}
.story-text .h2{margin-bottom:8px}
.punch{margin:8px 0 0;font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-.02em;max-width:24ch;padding-left:20px;border-left:0;position:relative}
.punch::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:7px;border-radius:4px;background:#FBB424;border:1.5px solid #211C17}
.saga{position:relative;display:flex;flex-direction:column;gap:14px;padding-top:30px}
.saga-label{position:absolute;top:-14px;right:4%;font-size:26px;transform:rotate(5deg);color:#211C17}
.ticket{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:center;padding:16px 22px 16px 18px;background:#FAF8F1;border:2px solid #211C17;border-radius:12px;box-shadow:5px 5px 0 rgba(33,28,23,.9)}
.ticket::after{content:"";position:absolute;top:10px;bottom:10px;left:58px;border-left:1.5px dashed #211C17;opacity:.5}
.ticket:nth-child(2){transform:rotate(-1.2deg)}.ticket:nth-child(3){transform:rotate(.8deg) translateX(14px)}.ticket:nth-child(4){transform:rotate(-.6deg) translateX(-6px)}.ticket:nth-child(5){transform:rotate(1.2deg) translateX(18px)}.ticket:nth-child(6){transform:rotate(-1deg) translateX(4px)}
.ticket .v{grid-row:1 / span 2;font-size:11px;width:28px;text-align:center}
.tname{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:800;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;line-height:1.05}
.tnote{grid-column:2;font-size:20px;color:#4A4137;line-height:1.1}
.kept{background:#FFF4D4}
.strike-wrap{position:relative;display:inline-block;color:#6E6458}
.strike{position:absolute;left:-4%;top:6%;width:108%;height:88%;overflow:visible;pointer-events:none}
.strike path{fill:none;stroke:#D9432B;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:0}

/* process */
.proc-sec{position:relative;background-color:#CDC2AA;background-image:radial-gradient(rgba(33,28,23,.13) 1px,transparent 1.6px);background-size:7px 7px;border-block:3px solid #211C17;padding:110px 0 120px}
.proc-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:70px}
.proc-head .mono{grid-column:1 / -1;margin:0}
.proc-grid{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.proc-grid::before{content:"";position:absolute;left:8%;right:8%;top:84px;border-top:2.5px dashed #211C17}
.stage{position:relative;display:flex;flex-direction:column;gap:12px}
.stage-art{position:relative;height:170px;display:flex;align-items:center;justify-content:center}
.stage-art::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:#F3ECDC;border:2.5px solid #211C17;top:8px}
.stage-art svg{position:relative;width:126px;height:144px;overflow:visible}
.stage-no{display:flex;align-items:center;gap:10px;margin-top:10px}
.stage-no b{font-weight:800;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;letter-spacing:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#211C17;color:#FBB424}
.stage-name{font-weight:800;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;line-height:1}
.owner{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 4px;border:1.5px solid #211C17;border-radius:999px;background:#FBB424;font-size:10.5px}
.stage p{margin:0;font-size:15.5px;line-height:1.45;color:#2A241D;text-wrap:pretty}
.pulse-glow{animation:glowPulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* candling */
.candle-sec{position:relative;background:#211C17;color:#F3ECDC;margin-top:40px;margin-bottom:40px}
.crack{position:absolute;left:0;width:100%;height:40px;display:block}
.crack.top{top:-39px}
.crack.bot{bottom:-39px;transform:scaleY(-1)}
.candle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 72px;align-items:center;padding-top:110px;padding-bottom:120px}
.candle-grid .body{color:#E3D9C4}
.candle-hint{display:inline-flex;align-items:center;gap:10px;margin-top:26px;color:#FBB424}
.candle{position:relative;width:100%;max-width:440px;aspect-ratio:400 / 500;justify-self:center;touch-action:pan-y;--r:150px}
.candle .base,.candle .reveal{position:absolute;inset:0}
.candle svg{display:block;width:100%;height:100%;overflow:visible}
.reveal{-webkit-mask-image:radial-gradient(circle var(--r) at var(--cx,50%) var(--cy,45%),#000 0,#000 38%,rgba(0,0,0,.5) 62%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--cx,50%) var(--cy,45%),#000 0,#000 38%,rgba(0,0,0,.5) 62%,transparent 100%)}
.beam{position:absolute;left:var(--cx,50%);top:var(--cy,45%);width:400px;height:400px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,226,150,.28) 0,rgba(255,226,150,.08) 38%,transparent 66%);pointer-events:none;mix-blend-mode:screen;z-index:3}
.candle.auto{animation:sweep 11s ease-in-out infinite}
.pnote{position:absolute;margin:0;width:44%;font-size:clamp(17px,1.9vw,25px);line-height:1.02;color:#3B1A08}
.pn1{top:22%;left:22%;transform:rotate(-6deg)}
.pn2{top:37%;left:52%;transform:rotate(5deg)}
.pn3{top:52%;left:13%;transform:rotate(-3deg)}
.pn4{top:66%;left:48%;transform:rotate(4deg)}
.pn5{top:80%;left:22%;width:56%;transform:rotate(-2deg)}
@media (hover:hover){.candle{cursor:none}}

/* crew */
.crew-sec{padding-top:130px;padding-bottom:140px}
.crew-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px 64px;align-items:end;margin-bottom:64px}
.crew-head .mono{grid-column:1 / -1;margin:0}
.crew-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px;align-items:start}
.crew{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px}
.crew-egg{position:relative;width:100%;max-width:250px;aspect-ratio:300 / 380;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.crew-egg .plate,.crew-egg img,.crew-egg .outline{position:absolute;inset:0;width:100%;height:100%;display:block}
.crew-egg .plate{transform:translate(calc(10px + var(--mx,0) * -6px),calc(9px + var(--my,0) * -6px));transition:transform .2s ease-out}
.crew-egg img{mix-blend-mode:multiply}
.crew-egg .outline{overflow:visible}
.c1 .crew-egg{transform:rotate(-4deg)}
.c2{margin-top:34px}.c2 .crew-egg{transform:rotate(3deg)}
.c3 .crew-egg{transform:rotate(-2deg)}
.c4{margin-top:22px}.c4 .crew-egg{transform:rotate(5deg)}
.crew:hover .crew-egg{transform:rotate(0deg) translateY(-8px) scale(1.03)}
.crew figcaption{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.crew-name{font-weight:800;font-size:clamp(28px,2.8vw,40px);letter-spacing:-.03em;line-height:1}
.crew-title{font-size:clamp(21px,1.9vw,25px);line-height:1;padding:4px 10px 2px;background:#FBB424;border:1.5px solid #211C17;border-radius:6px;transform:rotate(-2deg)}
.aka{font-size:10.5px;color:#4A4137}
.crew-line{font-size:15.5px;line-height:1.4;color:#2F2922;max-width:24ch;text-wrap:balance}

/* contact */
.hi-sec{padding-bottom:130px}
.hi-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;background:#FAF8F1;border:3px solid #211C17;border-radius:56% 44% 52% 48% / 48% 58% 42% 52%;padding:clamp(64px,8vw,116px) clamp(22px,7vw,120px);box-shadow:12px 12px 0 #FBB424}
.hi-yolk{position:absolute;top:-30px;right:11%;width:118px;height:118px;border-radius:50%;background:#FBB424;border:3px solid #211C17;display:grid;place-items:center;text-align:center;font-size:13px;padding:10px;animation:yolkBob 3.2s ease-in-out infinite}
.hi-card .h2{font-size:clamp(30px,3.8vw,56px);max-width:17ch}
.email{font-weight:800;font-size:clamp(27px,6.6vw,98px);letter-spacing:-.045em;line-height:1.02;text-decoration:none;color:#211C17;overflow-wrap:anywhere;background-image:linear-gradient(#FBB424,#FBB424);background-repeat:no-repeat;background-size:100% .2em;background-position:0 90%;transition:background-size .35s cubic-bezier(.2,.85,.2,1);padding:0 .06em}
.email:hover,.email:focus-visible{background-size:100% .95em;outline:none}
.hi-card .small{color:#4A4137;margin:0}

/* footer */
.foot{position:relative;background:#211C17;color:#F3ECDC;margin-top:40px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 64px;align-items:end;padding-top:84px;padding-bottom:40px}
.stall{display:block;width:100%;max-width:580px;height:auto;overflow:visible}
.foot-col{display:flex;flex-direction:column;gap:26px;padding-bottom:18px}
.define{margin:0;font-size:18px;line-height:1.55;color:#E9E0CC;max-width:40ch;text-wrap:pretty}
.define b{font-weight:800;color:#FBB424;font-size:22px;letter-spacing:-.02em}
.foot .seg{border-color:#F3ECDC}
.foot .seg button{color:#F3ECDC;font-size:13px;padding:0 16px}
.foot .seg button:hover{background:rgba(251,180,36,.25)}
.foot .seg button.on{background:#FBB424;color:#211C17}
.foot-mail{font-weight:800;font-size:22px;letter-spacing:-.02em;color:#F3ECDC;text-decoration:none;border-bottom:2px solid #FBB424;align-self:flex-start;padding-bottom:2px}
.foot-mail:hover{color:#FBB424}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;border-top:1.5px solid rgba(243,236,220,.22);padding-top:20px;padding-bottom:30px;color:#CFC5B0}
.foot-bottom a{color:#CFC5B0;text-decoration:none}
.foot-bottom a:hover{color:#FBB424}
.glow{animation:flicker 5s steps(1,end) infinite}
.steam path{animation:steam 2.6s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:.8s}.steam path:nth-child(3){animation-delay:1.6s}
.orbit{transform-origin:270px 62px;animation:spin 7s linear infinite}

/* display face: Vina Vịt Lộn (unicase, single weight) */
@font-face{font-family:'Vina Vit Lon';src:url(/assets/vina-vit-lon.otf) format('opentype');font-display:swap}
.headline,.h2,.name,.stage-name,.crew-name,.wordmark,.tape-a .track span,.flap b,.tname,.cta,.stage-no b{font-family:'Vina Vit Lon','Bricolage Grotesque',sans-serif;font-weight:400;font-synthesis:none}
.headline{font-size:clamp(42px,9.4vw,138px);line-height:1.02;letter-spacing:-.01em}
.h2{line-height:1.04;letter-spacing:-.01em}
.name,.stage-name,.crew-name,.tname{letter-spacing:0}
.wordmark{font-size:23px;letter-spacing:.01em}
.cta{font-size:18px;letter-spacing:.02em}
.tape-a .track span{letter-spacing:.01em}

/* scroll-driven (progressive) */
@supports (animation-timeline: view()){
.crew,.stage,.ticket-in{animation:riseIn linear both;animation-timeline:view();animation-range:entry 5% entry 80%}
.hi-card{animation:riseIn linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
.strike path{animation:draw linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
.tape-a .track,.tape-b .track{animation-timeline:auto}
}

@keyframes boil{0%{filter:url(#boilA)}33.33%{filter:url(#boilB)}66.66%{filter:url(#boilC)}}
@keyframes chIn{0%{opacity:0;transform:translateY(-.7em) rotate(-10deg)}60%{opacity:1;transform:translateY(.05em) scale(1.04,.9)}100%{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes yolkIn{from{transform:rotate(-3deg) scale(0)}to{transform:rotate(-3deg) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes drop{0%{opacity:0;transform:translateY(-46px) scale(1.12)}55%{opacity:1;transform:translateY(0) scale(.94,1.04)}75%{transform:scale(1.03,.97)}100%{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes yolkBob{0%,100%{transform:rotate(12deg) translateY(0)}50%{transform:rotate(8deg) translateY(-6px)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes wobble{0%,58%,100%{transform:rotate(0)}62%{transform:rotate(-8deg) translateX(-2px)}67%{transform:rotate(7deg) translateX(2px)}72%{transform:rotate(-5deg)}77%{transform:rotate(3deg)}82%{transform:rotate(-1deg)}86%{transform:rotate(0)}}
@keyframes shakeA{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg) translateX(-5px)}30%{transform:rotate(14deg) translateX(5px)}45%{transform:rotate(-10deg)}60%{transform:rotate(7deg)}75%{transform:rotate(-3deg)}}
@keyframes shakeB{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg) translateX(-5px)}30%{transform:rotate(14deg) translateX(5px)}45%{transform:rotate(-10deg)}60%{transform:rotate(7deg)}75%{transform:rotate(-3deg)}}
@keyframes pop{from{opacity:0;transform:translateX(-50%) rotate(-4deg) scale(.6) translateY(10px)}to{opacity:1;transform:translateX(-50%) rotate(-4deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes glowPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes sweep{0%{--cx:32%;--cy:26%}20%{--cx:68%;--cy:40%}40%{--cx:30%;--cy:56%}60%{--cx:64%;--cy:70%}80%{--cx:40%;--cy:85%}100%{--cx:32%;--cy:26%}}
@keyframes flicker{0%{opacity:1}47%{opacity:.82}49%{opacity:1}83%{opacity:.9}85%{opacity:1}}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-14px)}}
@keyframes lookAround{0%,100%{transform:translate(0,0)}20%{transform:translate(-2.5px,1px)}45%{transform:translate(2.5px,-1px)}70%{transform:translate(1px,2px)}}

@media (hover:none){.look{animation:lookAround 7s ease-in-out infinite}}
@media (max-width:1000px){
.carton{gap:26px 24px;padding:20px 26px 32px}
.line{font-size:14px}
.proc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.proc-grid::before{display:none}
}
@media (max-width:860px){
.hero-grid{grid-template-columns:minmax(0,1fr)}
.stamp-wrap{justify-self:end;margin-top:-10px;padding-bottom:0}
.stamp{width:136px;height:136px}
.sh1{right:8%;top:20px}.sh4{display:none}
.carton{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;padding:18px 20px 30px;border-radius:24px;box-shadow:8px 8px 0 #211C17;transform:none}
.story-grid,.candle-grid,.crew-head,.proc-head{grid-template-columns:minmax(0,1fr)}
.crew-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px}
.c2{margin-top:30px}.c4{margin-top:30px}
.foot-in{grid-template-columns:minmax(0,1fr);padding-top:64px}
.note{font-size:21px;padding-right:0}
.saga{padding-top:20px}
}
@media (max-width:640px){
.wrap{padding-left:16px;padding-right:16px}
.links{display:none}
.brand .mono{display:none}
.nav-in{min-height:64px}
.hero{padding-top:56px;padding-bottom:40px}
.sh3{display:none}
.carton-sec{padding-top:56px}
.sec-head{margin-bottom:28px}
.note{display:none}
.carton{padding:14px 14px 24px;gap:26px 14px;border-width:2.5px}
.flap{padding:8px 10px}
.flap b{font-size:16px}
.flap .mono{font-size:10px}
.st{font-size:9px;padding:3px 5px 2px}
.no{font-size:10px}
.line{font-size:13.5px}
.go{font-size:10px}
.proc-sec{padding:72px 0 80px}
.proc-head{margin-bottom:44px}
.proc-grid{grid-template-columns:minmax(0,1fr);gap:34px}
.stage{display:grid;grid-template-columns:116px minmax(0,1fr);gap:4px 18px;align-items:start}
.stage-art{grid-row:1 / span 4;height:120px}
.stage-art::before{width:110px;height:110px;top:4px}
.stage-art svg{width:92px;height:106px}
.stage-no{margin-top:0}
.ticket{padding:14px 16px 14px 12px;gap:4px 14px}
.ticket::after{left:48px}
.ticket:nth-child(n){transform:none}
.tnote{font-size:18px}
.candle-grid{padding-top:80px;padding-bottom:90px}
.candle{max-width:320px;--r:110px}
.pnote{font-size:15.5px}
.crew-sec{padding-top:100px}
.hi-yolk{width:92px;height:92px;font-size:11px;top:-26px;right:6%}
.hi-card{border-radius:44% 56% 46% 54% / 22% 26% 24% 28%}
.define{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
.oe *,.oe *::before,.oe *::after{animation:none !important;transition:none !important}
.carton{transform:none !important}
}

/* page shell */
html{scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.bubble[hidden]{display:none}