:root{--paper:#f7f2e8;--ink:#191622;--violet:#4c2acb;--acid:#e0fa52;--line:#d9d2c6;--muted:#514a57}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid #8f6aff;outline-offset:4px}img{display:block;max-width:100%;height:auto}figure{margin:0}.wrap{width:min(1360px,calc(100% - 104px));margin-inline:auto}.announcement{background:var(--ink);color:var(--acid);font-size:.67rem;letter-spacing:.16em;text-align:center;padding:9px;font-weight:850}.header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-block:21px;border-bottom:1px solid var(--line)}.logo{font-size:1.55rem;font-weight:1000;letter-spacing:-.075em;white-space:nowrap}.logo span,.duo h3 span{color:var(--violet)}nav{display:flex;gap:32px;font-size:.85rem;font-weight:750}.basket{border:1px solid var(--ink);font-size:.8rem;font-weight:800;padding:8px 10px 8px 14px;white-space:nowrap;border-radius:99px}.basket span{display:inline-block;background:var(--acid);border-radius:30px;padding:3px 8px;margin-left:5px;color:var(--ink)}.hero{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(24px,4vw,72px);align-items:center;padding-block:48px 64px}.eyebrow{font-size:.73rem;font-weight:850;letter-spacing:.15em;margin:0 0 18px}.eyebrow span{display:inline-block;width:8px;height:8px;background:var(--violet);margin-right:7px;transform:rotate(45deg)}h1,h2,h3{margin:0;font-weight:1000;letter-spacing:-.075em;line-height:.94}h1{font-size:clamp(3.6rem,6.4vw,7.5rem)}h2{font-size:clamp(2.55rem,5.2vw,5.8rem)}h3{font-size:2.4rem}em{font-style:normal;color:var(--violet)}.intro{font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.55;color:var(--muted);max-width:36ch;margin:25px 0 28px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--ink);border-radius:8px;padding:14px 18px;font-size:.94rem;font-weight:850;transition:transform .2s,box-shadow .2s}.button:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:4px 4px var(--ink)}.primary{background:var(--acid);color:var(--ink)}.hero-price{font-size:.85rem;color:var(--muted);margin:17px 0 0}.hero-price strong{color:var(--ink)}.stage{isolation:isolate;overflow:hidden;position:relative;min-height:470px;aspect-ratio:1.12;display:grid;align-content:center;justify-items:center;gap:0;border:2px solid var(--ink);border-radius:16px;background:radial-gradient(circle at 52% 42%,#8056f1,transparent 60%),repeating-conic-gradient(from -16deg at 55% 55%,transparent 0 10deg,#fff1 11deg 11.5deg,transparent 12deg 22deg),#4c2acb;box-shadow:8px 8px var(--ink)}.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(#fff5 1px,transparent 1.3px);background-size:9px 9px;mask-image:linear-gradient(125deg,#000,transparent 40%,transparent 62%,#000)}.stage-label,.stage-bottom{position:absolute;left:19px;right:19px;display:flex;justify-content:space-between;align-items:center;color:white;font-size:.65rem;font-weight:850;letter-spacing:.13em}.stage-label{top:17px}.stage-bottom{bottom:14px}.stage-bottom b{font-size:1.2rem}.shot{width:74%;box-shadow:9px 15px 0 #1c105c85,0 12px 28px #130b3b77;transform:translateX(var(--x)) rotate(var(--angle));animation:enter .85s cubic-bezier(.18,.8,.23,1) both;animation-delay:var(--delay)}.first{--x:-7%;--angle:-8deg;--delay:.08s;z-index:2}.second{--x:8%;--angle:7deg;--delay:.24s;margin-top:-4%}.burst{position:absolute;top:12%;right:10%;color:var(--acid);font-size:4rem;line-height:1;animation:spark 2.6s ease-in-out 3}.sticker{position:absolute;z-index:3;right:5%;bottom:9%;display:grid;place-content:center;width:clamp(72px,9vw,110px);aspect-ratio:1;background:var(--acid);border:2px solid var(--ink);border-radius:50%;text-align:center;font-weight:950;line-height:.95;transform:rotate(12deg);box-shadow:4px 5px var(--ink);animation:stamp .55s .45s both}.sticker strong{font-size:2rem}.ribbon{background:var(--acid);border-block:2px solid var(--ink);padding:11px 0;overflow:hidden}.ribbon div{display:flex;width:max-content;animation:slide 25s linear 2}.ribbon span{font-size:.84rem;font-weight:900;letter-spacing:.14em;white-space:pre}.collection{padding-block:78px;scroll-margin:15px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:33px}.section-head>p,.offer>div>p:not(.eyebrow){line-height:1.55;color:var(--muted);max-width:38ch;margin:0}.catalog{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:28px;align-items:start}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{background:#fffdf8;border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-3px)}.card.selected{border-color:var(--violet)}.photo{display:block;width:100%;padding:13px;border:0;background:var(--wash);overflow:hidden;position:relative}.photo img{width:100%;box-shadow:0 4px 8px #0004;transition:transform .28s}.photo:hover img{transform:scale(1.035)}.photo span{position:absolute;bottom:17px;right:17px;background:var(--paper);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-weight:800}.card-info{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px}.card-info small{display:block;font-size:.65rem;color:var(--muted);font-weight:800;letter-spacing:.08em;margin-bottom:3px}.card-info strong{font-size:1rem}.pick,.remove{color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:.75rem;font-weight:800}.selected .pick{background:var(--acid);border-color:var(--ink)}.duo{position:sticky;top:20px;background:var(--ink);color:white;padding:23px;border-radius:14px;scroll-margin:15px}.duo .eyebrow,.duo h3 span{color:var(--acid)}.duo .button{width:100%;gap:5px;font-size:.84rem}.selection,.small{font-size:.8rem;color:#ddd6e3}.slots{padding:0;list-style:none;display:grid;gap:8px}.slots li{display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:42px;border:1px dashed #746c7d;border-radius:7px;padding:6px 8px;font-size:.84rem}.slots img{width:47px;border-radius:3px}.remove{color:white;padding:4px 8px}.total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #5c5366;padding-top:12px;font-size:.85rem}.total strong{font-size:1.5rem;color:var(--acid)}.shipping{font-size:.73rem}.small{margin-bottom:0}.offer{background:#e7deff;border:1px solid var(--ink);box-shadow:6px 6px var(--ink);border-radius:14px;padding:clamp(24px,5vw,65px);display:grid;grid-template-columns:1fr .7fr;align-items:end;gap:28px}.offer .button{margin-top:20px}.footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-block:48px 24px;font-size:.78rem;color:var(--muted)}dialog{background:var(--paper);color:var(--ink);width:min(690px,calc(100% - 30px));max-height:85vh;padding:24px;border:2px solid var(--ink);border-radius:14px}dialog::backdrop{background:#161022c9}dialog h2{font-size:2.1rem;margin:0 40px 18px 0}dialog img{width:100%;border-radius:5px}.close{position:absolute;top:9px;right:9px;border:1px solid var(--ink);background:white;color:var(--ink);border-radius:50%;width:34px;height:34px;font-size:1.3rem}.modal-note{color:var(--muted)}.reveal{animation:rise .55s both}
@keyframes enter{from{opacity:0;transform:translate(var(--x),35px) rotate(0) scale(.85)}to{opacity:1;transform:translateX(var(--x)) rotate(var(--angle))}}@keyframes stamp{from{opacity:0;transform:rotate(-18deg) scale(.6)}to{opacity:1;transform:rotate(12deg) scale(1)}}@keyframes spark{50%{transform:rotate(18deg) scale(.78)}}@keyframes slide{to{transform:translateX(-50%)}}@keyframes rise{from{opacity:.35;transform:translateY(18px)}}
@media(max-width:950px){.wrap{width:calc(100% - 56px)}.stage{min-height:350px}.catalog{grid-template-columns:minmax(0,1fr) 245px;gap:16px}.duo{padding:17px}}
@media(max-width:700px){.wrap{width:calc(100% - 34px)}.header{padding-block:13px}.header nav{display:none}.hero{grid-template-columns:1fr;padding-block:36px 42px;gap:27px}.stage{min-height:0;aspect-ratio:1.14;box-shadow:5px 5px var(--ink)}h1{font-size:clamp(3.1rem,11vw,5rem)}.intro{margin:18px 0 22px}.hero-price{margin-top:13px}.collection{padding-block:52px}.section-head{display:block;margin-bottom:20px}.section-head>p{margin-top:13px}.catalog{grid-template-columns:1fr}.duo{position:static}.offer{grid-template-columns:1fr}.footer{flex-wrap:wrap}.photo{padding:7px}.photo span{bottom:10px;right:10px;width:23px;height:23px}.grid{gap:9px}.card-info{padding:8px;flex-wrap:wrap}.card-info strong{font-size:.93rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
.offer{align-items:center}.offer-copy h2{margin-bottom:20px}.studio{position:relative;overflow:hidden;border:1px solid var(--ink);border-radius:8px;background:#391384}.studio img{width:100%;aspect-ratio:1.3;object-fit:cover}.studio figcaption{position:absolute;right:8px;bottom:8px;border-radius:5px;padding:4px 7px;background:#191622;color:white;font-size:.65rem}
.order-help{margin-top:16px}.order-help summary{cursor:pointer;font-weight:750}.order-help textarea{display:block;width:100%;margin-bottom:10px;padding:9px;border:1px solid var(--line);border-radius:6px;background:#fffdf8;color:var(--ink);font:inherit;resize:vertical}.order-help [role=status]:empty{display:none}

.studio img{aspect-ratio:auto;max-height:410px;object-fit:contain}.studio{background:var(--ink)}

/* The product frames stay readable against the manga-inspired backdrop. */
:root{--violet:#3624a9;--acid:#f3fc75}
.hero-copy h1 em{background:linear-gradient(105deg,#3624a9 12%,#6843d7 68%);background-clip:text;color:transparent}
.stage{background:radial-gradient(ellipse at 83% 76%,#bd4b36 0%,transparent 40%),radial-gradient(ellipse at 34% 32%,#4c5deb 0%,transparent 54%),repeating-conic-gradient(from -16deg at 55% 55%,transparent 0 10deg,#fff2 11deg 11.5deg,transparent 12deg 22deg),#141143}
.shot{outline:1px solid #fff4;border-radius:5px;overflow:hidden;box-shadow:8px 12px 0 #100b2b80,0 15px 35px #0007}
.shot img,.photo img{filter:brightness(1.045) contrast(1.045)}
.photo{padding:10px;background:linear-gradient(138deg,var(--wash),#f7f2e8)}
.photo img{border-radius:5px}
.card-info{padding:13px}
.card.selected{box-shadow:inset 0 0 0 1px var(--violet)}
.pick{min-height:42px}
.mobile-duo{display:none}
@media(max-width:700px){
  .hero{display:flex;flex-direction:column;align-items:stretch}
  .stage{aspect-ratio:1.48;min-height:225px}
  .shot{width:65%}
  .stage-label,.stage-bottom{font-size:.56rem}
  .hero .intro{margin:15px 0 17px}
  .hero .button{min-height:48px}
  .photo{padding:6px}
  .card-info{padding:9px}
  .pick{min-height:44px;width:100%}
  .mobile-duo:not([hidden]){
    display:flex;align-items:center;justify-content:space-between;gap:9px;
    position:fixed;z-index:5;left:0;right:0;bottom:0;
    padding:9px 13px calc(9px + env(safe-area-inset-bottom));
    border-top:1px solid #fff3;background:var(--ink);color:white;
    box-shadow:0 -5px 25px #18122735
  }
  .mobile-duo strong{font-size:.91rem}
  .mobile-duo strong span{color:var(--acid);margin-left:4px}
  .mobile-duo small{display:block;font-size:.68rem;color:#ddd6e3}
  .mobile-duo .button{min-height:44px;padding:10px 12px;font-size:.84rem;text-align:center}
  body:has(.mobile-duo:not([hidden])){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* Cover and numbered panels */
:root{--paper:#fff6df;--ink:#17151b;--violet:#a82519;--acid:#ffd341;--line:#dacdaf;--muted:#49413b}
.announcement{color:#fff6df}
.header{border-bottom:2px solid var(--ink)}
.header .basket{background:#fffaf0;border:2px solid var(--ink)}
.hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,78px);padding-block:clamp(34px,6vw,90px)}
.cover-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 19px;padding:7px 10px;border:1px solid var(--ink);font-size:.65rem;font-weight:900;letter-spacing:.1em;background:#fffdf7}
.cover-kicker span{display:block;width:5px;height:5px;background:var(--violet);transform:rotate(45deg)}
.hero-copy h1{font-size:clamp(3.7rem,7.3vw,8rem);font-weight:1000;letter-spacing:-.09em;line-height:.88}
.hero-copy h1 em{color:var(--violet);background:none}
.hero-copy .intro{max-width:37ch}
.hero .primary{border:2px solid var(--ink);box-shadow:4px 4px var(--ink)}
.hero-price{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:20px}
.hero-price strong{font-size:1.03rem}
.cover-art{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px;background:var(--ink);border:2px solid var(--ink);border-radius:8px;box-shadow:9px 9px #b62e21;transform:rotate(-1deg)}
.cover-panel{position:relative;margin:0;overflow:hidden;background:var(--panel);padding:12px;animation:panel-in .55s both}
.cover-main{grid-column:1/-1;--panel:#ee5c44;padding:clamp(12px,2vw,26px) clamp(16px,4vw,57px)}
.cover-sanji{--panel:#ffd341;animation-delay:.08s}
.cover-robin{--panel:#92cfc9;animation-delay:.16s}
.cover-panel::before{position:absolute;inset:0;content:"";background:radial-gradient(#17151b55 1px,transparent 1.3px);background-size:7px 7px;mask-image:linear-gradient(120deg,#000,transparent 60%,#000)}
.cover-panel img{position:relative;width:100%;height:auto;box-shadow:4px 5px #17151b66;transition:transform .25s}
@media(hover:hover){.cover-panel:hover img{transform:scale(1.045)}}
.cover-panel figcaption{position:absolute;bottom:6px;left:7px;background:var(--ink);color:white;padding:5px 7px;font-size:clamp(.59rem,1vw,.76rem);font-weight:900;letter-spacing:.06em}
.cover-panel figcaption span{color:var(--acid);margin-right:4px}
.cover-stamp{position:absolute;right:-11px;top:34%;display:grid;place-content:center;width:clamp(53px,8vw,92px);aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;box-shadow:3px 3px var(--ink);background:var(--acid);font-size:clamp(.92rem,2vw,1.5rem);line-height:.92;text-align:center;font-weight:1000;transform:rotate(12deg);animation:stamp .55s .22s both}
.order-steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border:2px solid var(--ink);background:#fffdf7}
.order-steps li{display:flex;align-items:center;gap:11px;padding:12px 14px;font-size:.8rem;font-weight:800;line-height:1.25}
.order-steps li+li{border-left:2px solid var(--ink)}
.order-steps b{display:grid;place-items:center;flex:none;width:32px;height:32px;background:var(--ink);color:var(--acid);font-size:.69rem}
.collection{padding-block:clamp(45px,7vw,100px)}
.card{border:1px solid var(--ink);box-shadow:2px 2px var(--ink);border-radius:8px}
.card.selected{box-shadow:3px 3px var(--violet);border-color:var(--violet)}
.photo{background:linear-gradient(145deg,var(--wash),#fff6df)}
.card-info small{color:var(--violet)}
.duo{border-radius:8px;border:2px solid var(--ink);box-shadow:4px 4px #b62e21}
.offer{background:#ffdf78;border:2px solid var(--ink);border-radius:8px}
@keyframes panel-in{from{opacity:.4;transform:translateY(9px)}}
@media(max-width:700px){
  .hero{gap:24px;padding-block:32px 37px}
  .cover-kicker{margin-bottom:14px}
  .hero-copy h1{font-size:clamp(3.05rem,12vw,5rem)}
  .hero-price{margin-top:15px}
  .cover-art{padding:6px;gap:5px;box-shadow:5px 5px #b62e21}
  .cover-panel{padding:7px}
  .cover-main{padding:9px 22px}
  .cover-stamp{right:-5px}
  .order-steps li{flex-direction:column;align-items:flex-start;padding:7px;gap:5px;font-size:.68rem}
  .order-steps b{width:24px;height:24px;font-size:.6rem}
}

/* Studio photos supply their own color and shadows. */
.cover-panel,.cover-main{padding:0}
.cover-panel::before{content:none}
.cover-panel img{aspect-ratio:2/1;object-fit:contain;box-shadow:none}
.cover-credit{grid-column:1/-1;margin:0 2px 1px;color:var(--paper);text-align:right;font-size:.62rem;letter-spacing:.06em}
.order-actions{display:flex;flex-wrap:wrap;gap:9px}
.order-help p{font-size:.88rem;line-height:1.4}
.order-help textarea{margin-top:10px}
.order-help textarea[hidden]{display:none}
.duo .button[hidden]{display:none}
.order-help-button{border:0;padding:7px 0;margin-top:6px;color:#fff;background:none;text-decoration:underline;text-align:left;font-size:.8rem}
.mobile-duo .button{max-width:54%}
.checkout-total{display:grid;gap:5px;padding:12px 14px;background:#fff2bd;border:1px solid var(--ink);border-radius:8px}
.checkout-total span{font-size:.88rem}
.checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.checkout-fields label{display:grid;gap:5px;font-size:.88rem;font-weight:750}
.checkout-fields label:last-child{grid-column:1/-1}
.checkout-fields input,.checkout-fields textarea{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--ink);border-radius:6px;background:#fffdf7;color:var(--ink);font:inherit;font-size:1rem}
.checkout-status:empty{display:none}
@media(max-width:440px){.checkout-fields{grid-template-columns:1fr;gap:9px}}

.customer-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 6vw, 80px);
  margin-top: clamp(48px, 8vw, 104px);
  scroll-margin-top: 24px;
}
.customer-photo {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 6px 6px var(--violet);
}
.customer-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
}
.customer-photo figcaption {
  padding: 9px 13px;
  font-size: .76rem;
  font-weight: 750;
}
.customer-copy p {
  max-width: 38ch;
  margin: 16px 0 22px;
  color: var(--muted);
  line-height: 1.55;
}
.customer-feedback {
  display: block;
  width: fit-content;
  margin-top: 14px;
  padding-block: 7px;
  color: var(--violet);
  font-size: .88rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: .18em;
}
@media (max-width: 700px) {
  .customer-feature { grid-template-columns: minmax(0, 1fr); }
}