.tkcan,.tkcan *{box-sizing:border-box}
.tkcan{--ink:#45190f;--red:#a22012;--paper:#fff0d9;--peach:#f0cdb8;--line:#5d291d50;--pad:clamp(18px,5vw,82px);--stage:calc(100svh - 64px)}
.tkcan{scroll-behavior:smooth}.tkcan{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 system-ui,sans-serif}.tkcan a{color:inherit;text-decoration:none}.tkcan button{font:inherit;cursor:pointer}.tkcan [hidden]{display:none!important}.tkcan figure,.tkcan p,.tkcan h1,.tkcan h2{margin:0}.tkcan a:focus-visible,.tkcan button:focus-visible{outline:3px solid #167087;outline-offset:5px}
.tkcan .topbar,.tkcan footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-inline:var(--pad)}.tkcan .topbar{height:64px;border-bottom:1px solid var(--line);background:var(--paper)}.tkcan .brand{font-weight:950;letter-spacing:.12em}.tkcan .brand span,.tkcan .chapter span{color:#a22012;margin-inline:.35em}.tkcan .top-order{padding:7px 0;border-bottom:1px solid currentColor;font-size:.83rem;font-weight:850;white-space:nowrap}
.tkcan .scroll-scene{background:var(--peach)}.tkcan .scroll-scene.is-ready{height:calc(var(--stage) + 720px)}.tkcan .sticky-scene{height:var(--stage);min-height:515px;position:sticky;top:0;isolation:isolate;overflow:hidden}.tkcan .scroll-scene:not(.is-ready) .sticky-scene{position:relative}
.tkcan .hero-type{position:absolute;z-index:2;top:clamp(24px,6vh,80px);left:var(--pad);pointer-events:none}.tkcan .chapter{font-size:.74rem;font-weight:900;letter-spacing:.12em}.tkcan .hero-type h1{font-size:clamp(34px,4.45vw,70px);line-height:1.12;letter-spacing:-.08em;margin-top:13px;font-weight:950}
.tkcan .wordmark{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding-inline:3vw;pointer-events:none;color:#a22012;font-weight:1000;letter-spacing:-.11em;font-size:clamp(105px,22vw,380px);line-height:.8}
.tkcan .screen{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:min(calc(var(--stage) * .94),64vw);aspect-ratio:1;mask-image:linear-gradient(90deg,transparent,#000 15% 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15% 85%,transparent)}.tkcan .screen img,.tkcan .screen video{display:block;width:100%;height:100%;object-fit:contain}
.tkcan .seal{position:absolute;z-index:2;right:var(--pad);top:9%;display:grid;place-content:center;text-align:center;width:clamp(68px,8vw,116px);aspect-ratio:1;background:#a22012;color:#fff0d9;border-radius:50%;font-size:.7rem;font-weight:900;line-height:1.05;letter-spacing:.08em;transform:rotate(9deg)}.tkcan .seal>span{font-size:clamp(22px,3vw,44px);letter-spacing:-.06em}.tkcan .grams{font-size:.55em}
.tkcan .hero-controls{position:absolute;z-index:3;bottom:0;inset-inline:0;min-height:60px;display:flex;align-items:center;gap:12px;padding:8px var(--pad);background:var(--paper);border-top:1px solid var(--line);font-weight:850;font-size:.78rem}.tkcan .hero-controls button{border:1px solid var(--line);color:var(--ink);background:transparent;border-radius:99px;padding:5px 11px;font-size:inherit;font-weight:inherit}.tkcan .skip{margin-left:auto;white-space:nowrap}.tkcan .progress{position:absolute;z-index:4;bottom:0;inset-inline:0;height:3px}.tkcan .progress span{display:block;height:100%;background:var(--red);transform:scaleX(var(--opening-progress,0));transform-origin:left}
.tkcan .reveal{background:var(--paper);padding:clamp(45px,8vw,110px) var(--pad) 0}.tkcan .reveal-copy{margin:0 0 clamp(20px,4vw,48px)}.tkcan .reveal h2,.tkcan .quote h2{font-size:clamp(35px,7.3vw,108px);font-weight:950;line-height:1.02;letter-spacing:-.085em;margin-top:12px}.tkcan .reveal h2{color:var(--red)}.tkcan .product-visual{height:clamp(260px,43vw,620px);position:relative;overflow:hidden;background:var(--peach)}.tkcan .product-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 5%}.tkcan .product-visual figcaption{position:absolute;right:12px;bottom:12px;padding:3px 9px;background:var(--paper);font-size:.72rem}
.tkcan .spec-strip{display:grid;grid-template-columns:.7fr .65fr 1.65fr}.tkcan .spec-strip div{display:grid;align-content:center;gap:4px;padding:clamp(14px,3vw,40px) 8px;text-align:center}.tkcan .spec-strip div+div{border-left:1px solid var(--line)}.tkcan .spec-strip div>span{font-size:.72rem;font-weight:750}.tkcan .spec-strip strong{font-size:clamp(.9rem,2.5vw,2rem);line-height:1.16}.tkcan .unit{font-size:.62em}
.tkcan .quote{background:var(--red);color:var(--paper);padding:clamp(45px,8vw,105px) var(--pad);display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:clamp(20px,5vw,75px)}.tkcan .quote .chapter span{color:#ffd398}.tkcan .quote h2{font-size:clamp(33px,5.6vw,81px)}.tkcan .order-copy>p:not(.chapter){margin:20px 0;max-width:32em}.tkcan .cta{display:inline-flex;align-items:center;gap:20px;justify-content:space-between;min-height:55px;background:var(--paper);color:var(--red);padding:8px 20px;font-weight:950}.tkcan .cta:hover{background:#ffda9d}.tkcan .quantity{border-block:1px solid #fff0d980;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0}.tkcan .quantity strong{font-size:clamp(78px,13vw,215px);letter-spacing:-.11em;line-height:1;padding-right:.1em}.tkcan .quantity span{font-weight:900;line-height:1.35;white-space:nowrap}.tkcan footer{min-height:60px;font-size:.8rem}.tkcan footer strong{letter-spacing:.12em}
@media(max-width:760px){.tkcan{--stage:max(550px,calc(100svh - 54px))}.tkcan .topbar{height:54px}.tkcan .brand{font-size:.83rem}.tkcan .top-order{font-size:.72rem}.tkcan .hero-type{top:20px}.tkcan .hero-type h1{font-size:clamp(34px,8.8vw,60px);margin-top:7px}.tkcan .wordmark{justify-content:center;font-size:26vw;top:4%;opacity:.65}.tkcan .screen{width:min(100vw,440px);top:55%;mask-image:none;-webkit-mask-image:none}.tkcan .seal{top:28%;right:var(--pad)}.tkcan .hero-controls{font-size:.7rem;gap:6px}.tkcan .hero-controls button{padding-inline:6px}.tkcan .scroll-scene.is-ready{height:calc(var(--stage) + 530px)}.tkcan .product-visual{height:clamp(240px,66vw,420px)}.tkcan .quote{display:flex;flex-direction:column;align-items:stretch}.tkcan .quantity{order:-1;justify-content:flex-start}.tkcan .spec-strip strong{font-size:clamp(.78rem,3.7vw,1.18rem)}}
@media(max-width:350px){.tkcan .skip{display:none}}
@media(prefers-reduced-motion:reduce){.tkcan{scroll-behavior:auto}.tkcan .scroll-scene.is-ready{height:auto}.tkcan .sticky-scene{position:relative}}
.tkcan #primary{margin:0;padding:0;max-width:none}
.tkcan #open-scene,.tkcan #details,.tkcan #quote{margin-inline:0;max-width:none}