:root { --red:#ef3d2f; --yellow:#f7db29; --blue:#1957e7; --cream:#fff4df; --green:#2fae5c; --peach:#ff8a3d; --ink:#171813; --line:3px solid var(--ink); --round:"Arial Rounded MT Bold","Yu Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--cream); color:var(--ink); font-family:var(--round); line-height:1.5; }
a { color:inherit; }
a:focus-visible,button:focus-visible { outline:4px solid #fff; box-shadow:0 0 0 7px var(--blue); outline-offset:2px; }
.pico-header { position:sticky; z-index:40; top:0; display:flex; justify-content:space-between; align-items:center; min-height:76px; padding:8px clamp(16px,3vw,44px); border-bottom:var(--line); background:var(--yellow); }
.pico-logo { display:flex; flex-direction:column; font:900 1.15rem/.7 Arial,sans-serif; letter-spacing:-.06em; text-decoration:none; transform:rotate(-4deg); }
.pico-logo span:last-child { margin-left:8px; color:var(--red); }
.menu-toggle { display:none; padding:9px 13px; border:2px solid var(--ink); border-radius:100px; background:var(--cream); color:inherit; font:900 .68rem var(--round); text-transform:uppercase; cursor:pointer; }
.pico-nav { display:flex; gap:clamp(14px,2.7vw,38px); align-items:center; }
.pico-nav a { font-size:.68rem; font-weight:900; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }
.pico-nav a:hover { text-decoration:underline 3px; text-underline-offset:5px; }
.hero { display:grid; grid-template-columns:1.08fr .92fr; min-height:calc(100svh - 76px); border-bottom:var(--line); }
.hero-art { position:relative; overflow:hidden; min-height:650px; border-right:var(--line); background:linear-gradient(135deg,var(--red) 0 50%,var(--blue) 50%); }
.hero-art img { width:100%; height:100%; object-fit:cover; }
.image-fallback.is-missing img,img.is-missing { visibility:hidden; }
.burst { position:absolute; display:grid; place-items:center; width:112px; aspect-ratio:1; background:var(--yellow); font:900 1.1rem/1 Arial,sans-serif; text-align:center; clip-path:polygon(50% 0,61% 23%,82% 8%,80% 34%,100% 37%,78% 53%,94% 72%,68% 70%,64% 100%,49% 76%,31% 96%,33% 70%,5% 78%,25% 54%,0 42%,29% 36%,19% 13%,42% 26%); animation:spinBurst 14s linear infinite; }
.burst--one { top:6%; right:5%; }
.burst--two { bottom:5%; left:5%; width:92px; background:var(--cream); color:var(--blue); animation-direction:reverse; }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(42px,6vw,92px); background:var(--cream); }
.concept-label,.eyebrow,.section-head>p,.about-title>p,.picnic-copy>p:first-child,.final-pop>p:first-child { font-size:.64rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.concept-label { margin:0 0 auto; padding:7px 12px; border:2px solid; border-radius:30px; background:#fff; }
.eyebrow { margin:7vh 0 18px; color:var(--blue); }
.hero h1 { margin:0; font:900 clamp(4.2rem,8.5vw,9.3rem)/.76 Arial,sans-serif; letter-spacing:-.09em; }
.hero h1 span,.hero h1 strong { display:block; }
.hero h1 span:nth-child(2) { color:var(--red); }
.hero h1 strong { color:var(--blue); font-size:.63em; letter-spacing:-.04em; transform:rotate(-2deg); }
.hero-copy>p:not(.concept-label,.eyebrow) { max-width:500px; margin:36px 0; font-size:.88rem; font-weight:700; }
.bubble-button { display:inline-flex; gap:20px; align-items:center; justify-content:center; min-height:56px; padding:12px 28px; border:var(--line); border-radius:100px; background:var(--yellow); box-shadow:6px 6px 0 var(--ink); font-size:.78rem; font-weight:900; text-decoration:none; transition:transform 160ms ease,box-shadow 160ms ease; }
.bubble-button:hover { transform:translate(4px,4px) rotate(-1deg); box-shadow:2px 2px 0 var(--ink); }
.ticker { overflow:hidden; border-bottom:var(--line); background:var(--blue); color:#fff; }
.ticker div { display:flex; gap:34px; width:max-content; padding:14px 0; font:900 1rem Arial,sans-serif; letter-spacing:.04em; animation:ticker 18s linear infinite; }
.ticker i { color:var(--yellow); font-style:normal; }
.flavors,.shops,.craft,.team,.news,.faq,.studio { padding:clamp(78px,9vw,135px) clamp(16px,4vw,62px); }
.section-head { display:flex; justify-content:space-between; gap:40px; align-items:flex-start; margin-bottom:55px; }
.section-head p { margin:0; padding:7px 12px; border:2px solid; border-radius:30px; }
.section-head h2 { margin:0; font:900 clamp(2.8rem,6.3vw,6.6rem)/.9 Arial,sans-serif; letter-spacing:-.07em; text-align:right; }
.section-lead { max-width:640px; margin:-25px 0 45px; font-size:.82rem; font-weight:700; line-height:1.7; }
.flavor-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--line); border-left:var(--line); }
.flavor { position:relative; overflow:hidden; min-height:600px; padding:18px 18px 54px; border-right:var(--line); border-bottom:var(--line); }
.flavor>p { margin:0; font-size:.68rem; font-weight:900; }
.flavor h3 { position:relative; z-index:3; margin:24px 0 5px; font:900 clamp(1.35rem,2.3vw,2.4rem)/.87 Arial,sans-serif; letter-spacing:-.06em; }
.flavor h3+P { font-size:.72rem; }
.flavor--red { background:var(--red); color:#fff; }
.flavor--yellow { background:var(--yellow); }
.flavor--blue { background:var(--blue); color:#fff; }
.flavor--cream { background:#f4b9da; }
.flavor--green { background:var(--green); color:#fff; }
.flavor--peach { background:var(--peach); color:var(--ink); }
.flavor-index { position:absolute; top:18px; left:18px; }
.can { position:relative; display:flex; flex-direction:column; justify-content:space-between; width:46%; min-width:104px; aspect-ratio:.54; margin:20px auto 12px; padding:24px 10px; border:3px solid var(--ink); border-radius:22px 22px 30px 30px; background:var(--cream); color:var(--ink); box-shadow:8px 9px 0 rgba(23,24,19,.35); text-align:center; transform:rotate(-7deg); transition:transform 300ms cubic-bezier(.2,.8,.2,1); }
.flavor:nth-child(even) .can { transform:rotate(6deg); }
.flavor:hover .can { transform:translateY(-10px) rotate(3deg); }
.can::before { position:absolute; top:8px; left:12%; width:76%; height:5px; border-radius:50%; background:var(--ink); content:""; }
.can span { font:900 clamp(1.1rem,2.3vw,2.2rem) Arial,sans-serif; letter-spacing:-.1em; }
.can i { color:var(--red); font:normal 2.8rem Arial,sans-serif; }
.flavor-note { margin-bottom:10px !important; }
.flavor-desc { max-width:34ch; margin:0 0 16px !important; font-size:.7rem !important; font-weight:700; line-height:1.5; }
.flavor-spec { margin:0 !important; font-size:.72rem !important; font-weight:900; }
.flavor-spec span { font-weight:700; opacity:.8; }
.flavor-spec--sub { margin-bottom:0 !important; opacity:.9; }
.flavor-tag { position:absolute; right:12px; bottom:12px; padding:7px 10px; border:2px solid; border-radius:50px; background:var(--cream); color:var(--ink); font-size:.58rem; font-weight:900; text-transform:uppercase; }
.flavor-splash { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; opacity:.4; mix-blend-mode:multiply; }
.flavor-taste { max-width:34ch; margin:0 0 8px !important; font-size:.68rem !important; font-weight:700; line-height:1.5; opacity:.92; }
.flavor-pairing { max-width:34ch; margin:0 0 16px !important; font-size:.66rem !important; font-weight:700; line-height:1.4; }
.flavor-pairing strong { font-weight:900; }
.flavor-lineup,.craft-photo,.picnic-photo { border:var(--line); overflow:hidden; }
.flavor-lineup img,.craft-photo img,.picnic-photo img { display:block; width:100%; height:auto; aspect-ratio:1200/670; object-fit:cover; }
.flavor-lineup { margin:0 0 50px; box-shadow:10px 10px 0 var(--ink); }
.craft-photo { margin:0 0 20px; box-shadow:10px 10px 0 var(--blue); }
.flavor-lineup figcaption,.craft-photo figcaption { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; padding:14px 18px; border-top:var(--line); background:var(--yellow); }
.flavor-lineup figcaption strong,.craft-photo figcaption strong { font:900 .78rem Arial,sans-serif; letter-spacing:.04em; }
.flavor-lineup figcaption span,.craft-photo figcaption span { font-size:.72rem; font-weight:700; }
.craft-story { max-width:720px; margin:0 0 45px; font-size:.8rem; font-weight:700; line-height:1.7; }
.picnic-photo { margin:34px 0 0; box-shadow:8px 8px 0 var(--yellow); }
.picnic-photo figcaption { padding:10px 14px; border-top:var(--line); background:#fff; color:var(--ink); font-size:.66rem; font-weight:800; }
.wholesale-note { max-width:560px; margin:14px 0 0; font-size:.66rem; font-weight:700; opacity:.9; }
[data-reveal] { opacity:0; transform:translateY(30px) rotate(-1deg); transition:opacity 550ms ease,transform 550ms cubic-bezier(.2,.8,.2,1); }
[data-reveal][data-visible] { opacity:1; transform:none; }
.about { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; overflow:hidden; padding:clamp(80px,11vw,165px) clamp(20px,7vw,110px); border-block:var(--line); background:var(--yellow); }
.about-sticker { position:absolute; top:30px; right:35px; display:grid; place-items:center; width:125px; aspect-ratio:1; border:var(--line); border-radius:50%; background:var(--red); color:#fff; font:900 1rem/1 Arial,sans-serif; text-align:center; transform:rotate(10deg); }
.about-title>p { margin:0 0 40px; }
.about h2 { margin:0; font:900 clamp(3.4rem,7.5vw,8rem)/.88 Arial,sans-serif; letter-spacing:-.08em; }
.about h2 em { color:var(--blue); font-style:normal; -webkit-text-stroke:1px var(--ink); }
.about-copy { align-self:end; }
.about-copy>p { max-width:520px; margin:0 0 60px; font-weight:700; }
.about ul { margin:0; padding:0; border-top:var(--line); list-style:none; }
.about li { display:grid; grid-template-columns:48px 1fr; gap:20px; padding:18px 0; border-bottom:var(--line); }
.about li strong { font:900 1.4rem Arial,sans-serif; }
.about li span { font-size:.78rem; font-weight:800; }
.craft-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0; margin:0; padding:0; list-style:none; border-top:var(--line); border-left:var(--line); }
.craft-steps li { padding:28px 24px; border-right:var(--line); border-bottom:var(--line); background:#fff; }
.craft-num { display:inline-block; margin-bottom:14px; padding:5px 11px; border:2px solid var(--ink); border-radius:30px; background:var(--yellow); font:900 .78rem Arial,sans-serif; }
.craft-steps h3 { margin:0 0 10px; font:900 1.5rem Arial,sans-serif; letter-spacing:-.03em; }
.craft-steps p { margin:0; font-size:.78rem; font-weight:700; line-height:1.6; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:10px; }
.team-grid article { padding:26px 22px; border:var(--line); border-radius:24px; background:#fff; box-shadow:7px 7px 0 var(--ink); }
.team-photo { display:block; width:100%; height:auto; aspect-ratio:3/4; margin:0 0 16px; border:2px solid var(--ink); border-radius:16px; object-fit:cover; box-shadow:5px 5px 0 var(--ink); }
.team-grid h3 { margin:0 0 4px; font:900 1.2rem Arial,sans-serif; letter-spacing:-.02em; }
.team-role { margin:0 0 12px; font-size:.68rem; font-weight:900; color:var(--red); text-transform:uppercase; letter-spacing:.04em; }
.team-bio { margin:0 0 12px; font-size:.72rem; font-weight:700; line-height:1.55; opacity:.85; }
.team-grid p:last-child { margin:0; font-size:.78rem; font-weight:700; line-height:1.6; }
.picnic { display:grid; grid-template-columns:1fr 1fr; min-height:800px; border-bottom:var(--line); }
.picnic-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(50px,8vw,120px); border-right:var(--line); }
.picnic-copy h2 { margin:30px 0; font:900 clamp(3rem,6vw,6.5rem)/.9 Arial,sans-serif; letter-spacing:-.075em; }
.picnic-copy>p:not(:first-child) { max-width:490px; font-weight:700; }
.square-link { display:flex; justify-content:space-between; width:100%; margin-top:45px; padding:19px 0; border-block:var(--line); font-size:.73rem; font-weight:900; text-decoration:none; }
.tour-block { margin-top:45px; padding-top:35px; border-top:3px dashed var(--ink); }
.tour-block h3 { margin:0 0 12px; font:900 1.6rem Arial,sans-serif; letter-spacing:-.03em; }
.tour-block>p { max-width:490px; margin:0 0 22px; font-size:.78rem; font-weight:700; }
.tour-info { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:0; }
.tour-info dt { margin:0 0 4px; font-size:.6rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }
.tour-info dd { margin:0; font-size:.8rem; font-weight:800; }
.tour-info dd span { display:block; font-size:.66rem; font-weight:700; opacity:.75; }
.tour-block .square-link { margin-top:26px; }
.picnic-poster { display:flex; flex-direction:column; justify-content:space-between; margin:5vw; padding:35px; border:var(--line); background:var(--red); color:#fff; box-shadow:15px 15px 0 var(--blue); transform:rotate(2deg); }
.picnic-poster p { align-self:flex-end; margin:0; padding:7px 10px; border:2px solid; border-radius:50px; font-weight:900; }
.picnic-poster strong { font:900 clamp(4rem,8vw,9rem)/.72 Arial,sans-serif; letter-spacing:-.1em; }
.picnic-poster span { font-size:.76rem; font-weight:900; }
.shops { background:var(--blue); color:#fff; }
.shops .section-head p { border-color:#fff; }
.shop-duo { margin:0 0 45px; }
.shop-duo-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; overflow:hidden; border:2px solid #fff; border-radius:20px; }
.shop-duo-grid img { display:block; width:100%; height:100%; aspect-ratio:1200/670; object-fit:cover; }
.shop-duo figcaption { margin-top:14px; font-size:.68rem; font-weight:800; opacity:.9; }
.shop-list { border-top:3px solid #fff; }
.shop-list article { display:grid; grid-template-columns:.4fr 1.2fr .7fr; gap:20px; align-items:center; padding:27px 0; border-bottom:1px solid rgba(255,255,255,.55); }
.shop-list span,.shop-list p { font-size:.65rem; font-weight:800; }
.shop-list h3,.shop-list p { margin:0; }
.shop-list h3 { font:900 clamp(1.2rem,2.4vw,2.4rem) Arial,sans-serif; letter-spacing:-.04em; }
.wholesale { margin-top:60px; padding-top:45px; border-top:3px dashed #fff; }
.wholesale h3 { margin:0 0 14px; font:900 clamp(1.8rem,3.4vw,2.6rem) Arial,sans-serif; letter-spacing:-.03em; }
.wholesale>p { max-width:560px; margin:0 0 30px; font-size:.82rem; font-weight:700; }
.wholesale-spec { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:20px; margin:0 0 34px; padding:24px; border:2px solid #fff; border-radius:20px; }
.wholesale-spec dt { margin:0 0 4px; font-size:.6rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.wholesale-spec dd { margin:0; font-size:.8rem; font-weight:800; }
.wholesale-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; margin:0 0 34px; padding:0; list-style:none; }
.wholesale-steps li { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; }
.wholesale-steps strong { font:900 1.15rem Arial,sans-serif; }
.wholesale-steps span { font-size:.76rem; font-weight:700; }
.square-link--light { border-color:#fff; color:#fff; }
.news-list { display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none; border-top:var(--line); }
.news-list li { display:grid; grid-template-columns:118px 130px 1fr; gap:20px; align-items:center; padding:22px 0; border-bottom:var(--line); }
.news-list time { font-size:.7rem; font-weight:900; }
.news-tag { justify-self:start; padding:6px 11px; border:2px solid; border-radius:30px; background:var(--yellow); font-size:.6rem; font-weight:900; text-transform:uppercase; }
.news-list p { margin:0; font-size:.82rem; font-weight:700; }
.faq-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin:10px 0 0; }
.faq-list > div { padding:24px 26px; border:var(--line); border-radius:20px; background:#fff; }
.faq-list dt { margin:0 0 10px; font:900 1.05rem Arial,sans-serif; letter-spacing:-.02em; }
.faq-list dt::before { margin-right:8px; color:var(--red); content:"Q."; }
.faq-list dd { margin:0; font-size:.8rem; font-weight:700; line-height:1.65; }
.studio { background:var(--cream); border-top:var(--line); }
.studio-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0; margin:10px 0 0; border-top:var(--line); border-left:var(--line); }
.studio-facts div { padding:24px; border-right:var(--line); border-bottom:var(--line); }
.studio-facts dt { margin:0 0 8px; font-size:.62rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.studio-facts dd { margin:0; font-size:.86rem; font-weight:800; line-height:1.6; }
.final-pop { padding:clamp(90px,13vw,190px) 20px; background:var(--red); color:#fff; text-align:center; }
.final-pop>p:first-child { margin:0 0 40px; }
.final-pop h2 { margin:0 auto 60px; font:900 clamp(4rem,11vw,12rem)/1 Arial,sans-serif; letter-spacing:-.1em; }
.final-pop h2 span { color:var(--yellow); }
.final-pop .bubble-button { color:var(--ink); }
.demo-feedback { max-width:620px; margin:40px auto 0; padding:14px; border:2px solid #fff; font-size:.75rem; }
.pico-footer { padding:35px clamp(20px,4vw,60px); border-top:var(--line); background:var(--yellow); }
.pico-footer-top { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:2px solid var(--ink); }
.footer-nav { display:flex; flex-wrap:wrap; gap:clamp(16px,2.5vw,32px); }
.footer-nav a { font-size:.68rem; font-weight:900; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }
.footer-nav a:hover { text-decoration:underline 3px; text-underline-offset:5px; }
.pico-footer-bottom { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; padding-top:20px; }
.pico-footer-bottom p,.pico-footer-bottom>a { margin:0; font-size:.63rem; font-weight:800; text-decoration:none; }
@keyframes spinBurst { to { transform:rotate(360deg); } }
@keyframes ticker { to { transform:translateX(-50%); } }
@media (max-width:900px) {
  .menu-toggle { display:block; }
  .pico-nav { position:fixed; inset:76px 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:0; overflow:hidden; padding:20px; border-bottom:var(--line); background:var(--yellow); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-140%); transition:transform 300ms ease,opacity 200ms ease,visibility 0s linear 300ms; }
  .pico-nav[data-open] { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
  .pico-nav a { padding:16px 5px; border-bottom:2px solid; font-size:1rem; }
  .hero { grid-template-columns:1fr; }
  .hero-art { min-height:65svh; border-right:0; border-bottom:var(--line); }
  .hero-copy { min-height:68svh; }
  .flavor-grid { grid-template-columns:repeat(2,1fr); }
  .about,.picnic { grid-template-columns:1fr; }
  .about-sticker { width:90px; }
  .picnic-copy { border-right:0; border-bottom:var(--line); }
  .picnic-poster { min-height:650px; }
  .news-list li { grid-template-columns:1fr; gap:8px; }
  .news-tag { justify-self:start; }
}
@media (max-width:520px) {
  .pico-header { min-height:66px; }
  .pico-nav { inset:66px 0 auto; }
  .hero-art { min-height:55svh; }
  .hero-copy { min-height:65svh; padding:45px 20px; }
  .concept-label { margin-bottom:55px; }
  .hero h1 { font-size:4.5rem; }
  .section-head { display:block; }
  .section-head h2 { margin-top:30px; text-align:left; }
  .flavor-grid { grid-template-columns:1fr; }
  .flavor { min-height:640px; padding-bottom:60px; }
  .can { width:46%; }
  .pico-footer-top,.pico-footer-bottom { flex-direction:column; align-items:flex-start; gap:14px; }
  .about { padding-inline:20px; }
  .about h2 { font-size:3.7rem; }
  .about-sticker { top:20px; right:12px; }
  .picnic-copy { padding:80px 20px; }
  [data-reveal] { transform:translateY(30px); }
  .picnic-poster { min-height:520px; margin:22px 22px 38px; padding:24px; box-shadow:9px 9px 0 var(--blue); }
  .picnic-poster strong { font-size:4rem; }
  .shop-list article { grid-template-columns:1fr; gap:8px; }
  .shop-duo-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal] { opacity:1; transform:none; }
}