:root{
  --ink:#3a2a1a; --paper:#f3e4c9; --accent:#c84a2f;
  --green:#3a7a3a; --beige:#e8caa1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}
a{color:inherit}

.header{
  position:fixed; z-index:10; inset:0 0 auto 0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:rgba(243,228,201,0.88); backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:2px solid #e2d1b3;
}
.header .brand{font-weight:800; letter-spacing:.04em}
.header nav a{margin-left:14px; padding:.45em .8em; border:2px solid var(--ink); border-radius:10px; text-decoration:none; background:#fff7e7}
.header nav a.primary{border-color:var(--accent); background:#ffe9d9}

.main-hero{position:relative; min-height:100vh; overflow:hidden}
.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.95}
.lantern{position:absolute; top:11vh; width:clamp(48px,8vw,96px); filter:drop-shadow(0 4px 0 rgba(0,0,0,.2))}
.lantern.left{left:7vw; animation:sway 5.2s ease-in-out infinite}
.lantern.right{right:7vw; animation:sway 5.6s ease-in-out infinite reverse}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

.title{position:absolute; top:14vh; left:50%; transform:translateX(-50%);
  font:800 clamp(28px,6vw,64px)/1.05 "Noto Sans JP", system-ui; text-align:center;
  letter-spacing:.06em; text-shadow:0 2px 0 #e7d6b8
}
.subtitle{position:absolute; top:calc(14vh + clamp(28px,6vw,64px) + 10px); left:50%; transform:translateX(-50%);
  font-weight:600; color:#5b4933
}

.tray{position:absolute; left:50%; bottom:7%; transform:translateX(-50%); width:min(84%,800px)}
.tray path{stroke:var(--ink); stroke-width:12; stroke-linejoin:round; fill:url(#trayFill)}
.trayDip{animation:trayDip 1800ms ease-out infinite 400ms}
@keyframes trayDip{0%{transform:translateX(-50%) translateY(0)} 15%{transform:translateX(-50%) translateY(3px)} 35%{transform:translateX(-50%) translateY(-1px)} 100%{transform:translateX(-50%) translateY(0)}}

.shadow{position:absolute; left:50%; bottom:8%; width:54%; height:22px;
  transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,0) 70%); filter:blur(4px);
  animation:shadowScale 1800ms ease-in-out infinite 400ms}
@keyframes shadowScale{0%,100%{transform:translateX(-50%) scale(1); opacity:.55} 40%{transform:translateX(-50%) scale(.55); opacity:.20}}

.tako{position:absolute; left:50%; bottom:12%; width:min(56vw,520px); transform:translateX(-50%);
  filter:drop-shadow(0 12px 0 rgba(0,0,0,.08)); will-change:transform;
  animation:hop 1800ms cubic-bezier(.2,.9,.2,1.0) infinite}
@keyframes hop{
  0%{transform:translate(-50%,0) scale(1,1) rotate(0)}
  10%{transform:translate(-50%,2px) scale(1.06,.94) rotate(0)}
  35%{transform:translate(-50%,-160px) rotate(-8deg) scale(.98,1.02)}
  50%{transform:translate(-50%,-220px) rotate(0)}
  75%{transform:translate(-50%,-40px) rotate(6deg)}
  100%{transform:translate(-50%,0) scale(1,1) rotate(0)}
}

.ctas{position:absolute; left:50%; bottom:6vh; transform:translateX(-50%); display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{padding:.9em 1.2em; border:3px solid var(--ink); border-radius:14px; background:#fff7e7; color:var(--ink); text-decoration:none; font:700 16px/1 "Noto Sans JP", system-ui; letter-spacing:.05em; box-shadow:0 6px 0 #d1b992; transition:transform .05s, box-shadow .05s}
.btn.primary{background:#ffe9d9; border-color:var(--accent); box-shadow:0 6px 0 #d17a63}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.2)}

.confetti{position:absolute; pointer-events:none; inset:0}
.piece{position:absolute; width:10px; height:10px; border-radius:50%; opacity:0; will-change:transform,opacity}
.piece.negi{background:#3aa05b}
.piece.katsu{width:14px; height:8px; background:#d9b58a; border-radius:3px}

@media (prefers-reduced-motion: reduce){
  .lantern,.tako,.shadow,.trayDip{animation:none}
}

/* --- collection page --- */
.container{max-width:1100px; margin:100px auto 64px; padding:0 20px}
.controls{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.filter{padding:.6em 1em; border:2px solid var(--ink); background:#fff7e7; border-radius:10px; cursor:pointer}
.filter.primary{border-color:var(--accent); background:#ffe9d9}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.card{background:#fff9ec; border:3px solid var(--ink); border-radius:18px; padding:12px; box-shadow:0 6px 0 #d1b992; transition:transform .1s ease; transform:translateZ(0)}
.card:hover{transform:translateY(-4px)}
.card img{width:100%; height:220px; object-fit:cover; display:block; border-radius:12px; background:#f1e0c4}
.meta{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.badge{font-weight:800; font-size:12px; padding:.3em .6em; border:2px solid var(--ink); border-radius:999px; background:#fff7e7}
.tag{font-size:12px; opacity:.75}