/* polaris brothers homepage mockup: flat CSS, mobile first.
   Every diagonal is skewX(-30deg) or a polygon with rise/run = tan(60deg) = 1.732, i.e. exactly 60deg from horizontal. */
:root{
  --y:#FFD20A; --b:#1646DC; --r:#E5231B; --ink:#111114; --paper:#FFFBEF; --w:#fff;
  --tan30:.57735; --hdr:60px;
  --dot:radial-gradient(circle at center, rgba(17,17,20,.16) 1.15px, transparent 1.6px);
  --dotw:radial-gradient(circle at center, rgba(255,255,255,.22) 1.15px, transparent 1.6px);
  --display:"Archivo Black", "Arial Black", Impact, system-ui, sans-serif;
  --body:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;margin:0;letter-spacing:-.01em}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--y);padding:10px 14px;font-weight:800}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--b);outline-offset:3px}

/* ---------- buttons, pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font:800 15px/1 var(--body);text-decoration:none;border:3px solid var(--ink);position:relative;transition:transform .15s, box-shadow .15s;white-space:nowrap}
.btn-ink{background:var(--ink);color:var(--y);box-shadow:5px 5px 0 var(--r)}
.btn-ghost{background:var(--w);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn-y{background:var(--y);color:var(--ink);box-shadow:5px 5px 0 var(--r)}
.btn:hover{transform:translate(-2px,-2px)}
.btn-ink:hover,.btn-y:hover{box-shadow:7px 7px 0 var(--r)}
.btn-ghost:hover{box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-sm{min-height:42px;padding:0 16px;font-size:14px}
.pill{display:inline-block;font:800 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border:2px solid var(--ink);background:var(--w);vertical-align:middle}
.pill-low{background:var(--r);color:var(--w);border-color:var(--r)}
.tag-price{display:inline-block;font:400 22px/1 var(--display);background:var(--r);color:var(--w);padding:8px 1.9em 7px;clip-path:polygon(1.68em 0,100% 0,calc(100% - 1.68em) 100%,0 100%)}

/* ---------- mock bar + header ---------- */
.mockbar{background:var(--ink);color:var(--y);font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px 10px}
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--paper);border-bottom:3px solid var(--ink)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand img{width:30px;height:auto}
.brand span{font:400 19px/1 var(--display);letter-spacing:-.02em;text-transform:lowercase}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{font:800 14px/1 var(--body);text-decoration:none;padding:10px 14px;position:relative}
.nav a::after{content:"";position:absolute;inset:6px 4px;background:var(--y);z-index:-1;transform:skewX(-45deg) scaleX(0);transition:transform .2s}
.nav a:hover::after{transform:skewX(-45deg) scaleX(1)}
.nav a{z-index:0;isolation:isolate}
.cart{margin-left:auto;display:grid;place-items:center;width:44px;height:44px;border:3px solid var(--ink);background:var(--y);box-shadow:3px 3px 0 var(--ink)}

/* ---------- pages: stacked like comic pages turning ---------- */
.page{position:sticky;top:var(--stick,var(--hdr));box-shadow:0 -14px 36px rgba(0,0,0,.35)}
.kicker{display:flex;align-items:center;gap:10px;font:800 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.kicker span{font-family:var(--display);background:var(--ink);color:var(--y);padding:6px 12px;letter-spacing:.04em;transform:skewX(-45deg)}
.hero .kicker span{transform:skewX(var(--sk))}

/* ================= HERO ================= */
.hero{--tan:.57735;--sk:-30deg;--lab:-60deg;--ah:330px;--d:calc(var(--ah)*var(--tan)/2);--sl:40px;
  display:grid;grid-template-areas:"copy" "cap" "acc";background:var(--y);box-shadow:none;overflow:hidden}
.hero-45{--tan:1;--sk:-45deg;--lab:-45deg}
.hero-copy{grid-area:copy;position:relative;z-index:3;padding:24px 18px 0;background:var(--y) ;background-image:var(--dot);background-size:9px 9px}
.hero h1{font-size:clamp(34px,9.6vw,46px);margin:14px 0 12px;max-width:14ch}
.sub{font-size:17px;max-width:40ch;font-weight:600}

.acc{grid-area:acc;position:relative;height:var(--ah);overflow:hidden;background:var(--ink);border-block:5px solid var(--ink)}
.track{position:absolute;top:0;bottom:0;left:calc(-1*var(--d));right:calc(-1*var(--d));display:flex;gap:10px;transform:skewX(var(--sk))}
.pnl{position:relative;overflow:hidden;flex:0 0 var(--sl);min-width:0;cursor:pointer;transition:flex .75s cubic-bezier(.75,0,.2,1)}
.pnl.on{flex:1 1 var(--sl);cursor:default}
.pnl-in{position:absolute;top:0;bottom:0;left:50%;width:calc(100% + var(--ah)*var(--tan)*2.1);transform:translateX(-50%) skewX(calc(var(--sk)*-1))}
.c-y .pnl-in{background-color:var(--y);color:var(--ink)}
.c-b .pnl-in{background-color:var(--b);color:var(--w)}
.c-r .pnl-in{background-color:var(--r);color:var(--w)}
.c-ev .pnl-in{background-color:var(--ink);color:var(--y)}
.pnl-in::before{content:"";position:absolute;inset:0;background-image:var(--dot);background-size:9px 9px}
.c-b .pnl-in::before,.c-r .pnl-in::before,.c-ev .pnl-in::before{background-image:var(--dotw)}
/* speed-line burst behind the active card */
.pnl-in::after{content:"";position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;transform:translate(-50%,-50%) scale(.6);opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.28) 0 2.2deg,transparent 2.2deg 9deg);transition:opacity .6s .2s, transform 1.2s .2s cubic-bezier(.2,.7,.2,1);
  -webkit-mask:radial-gradient(circle,transparent 9%,#000 30%);mask:radial-gradient(circle,transparent 9%,#000 30%)}
.c-y .pnl-in::after{background:repeating-conic-gradient(from 0deg,rgba(17,17,20,.13) 0 2.2deg,transparent 2.2deg 9deg)}
.pnl.on .pnl-in::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pnl-num{position:absolute;left:50%;top:10px;transform:translateX(calc(-50% + var(--d)*.88));font:400 30px/1 var(--display);color:transparent;-webkit-text-stroke:1.5px currentColor;z-index:1;transition:opacity .3s}
.pnl-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--lab));white-space:nowrap;font:400 15px/1 var(--display);text-transform:lowercase;letter-spacing:.02em;z-index:1;transition:opacity .25s}
.pnl.on .pnl-label,.pnl.on .pnl-num{opacity:0}
.pnl-card{position:absolute;left:50%;top:50%;margin:0;z-index:2;opacity:0;transform:translate(-50%,-46%) rotate(-4deg) scale(.82);transition:opacity .35s, transform .7s cubic-bezier(.2,.9,.25,1.25)}
.pnl.on .pnl-card{opacity:1;transform:translate(-50%,-50%) rotate(-1.5deg) scale(1);transition-delay:.28s}
.pnl-card img{width:auto;height:auto;max-height:calc(var(--ah)*.94);max-width:min(66vw,300px);filter:drop-shadow(0 16px 18px rgba(0,0,0,.38))}
.burst{position:absolute;right:-14px;top:-10px;width:74px;height:74px;display:grid;place-items:center;background:var(--r);color:var(--y);
  clip-path:polygon(50% 0,61% 22%,85% 9%,79% 35%,100% 43%,80% 59%,93% 82%,67% 78%,58% 100%,45% 80%,22% 95%,22% 70%,0 61%,19% 46%,6% 24%,31% 23%);transform:rotate(-8deg)}
.c-r .burst{background:var(--y);color:var(--r)}
.burst b{font:400 15px/1 var(--display);transform:rotate(-4deg)}
.pnl-price{position:absolute;left:52%;bottom:27%;background:var(--ink);color:var(--y);font:400 18px/1 var(--display);padding:9px calc(1.94em*var(--tan) + 6px) 8px;clip-path:polygon(calc(1.94em*var(--tan)) 0,100% 0,calc(100% - 1.94em*var(--tan)) 100%,0 100%)}
/* event ticket */
.ticket{position:absolute;left:50%;top:50%;z-index:2;width:min(60%,250px);padding:18px 18px 20px;background:var(--y);color:var(--ink);border:4px solid var(--ink);box-shadow:9px 9px 0 var(--r);opacity:0;transform:translate(-50%,-46%) rotate(3deg) scale(.82);transition:opacity .35s, transform .7s cubic-bezier(.2,.9,.25,1.25)}
.pnl.on .ticket{opacity:1;transform:translate(-50%,-50%) rotate(2deg) scale(1);transition-delay:.28s}
@media (max-width:999px){.pnl.on .ticket{transform:translate(-64%,-50%) rotate(2deg) scale(1)}}
.ticket-k{font:800 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.ticket-t{font:400 clamp(20px,5vw,30px)/1 var(--display);margin:8px 0 10px}
.ticket-d,.ticket-b{font-weight:800;font-size:14px}
.ticket-b{margin-top:4px;color:var(--b)}
.stamp{position:absolute;right:10px;top:-18px;background:var(--r);color:var(--w);font:800 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border:3px solid var(--ink);transform:rotate(8deg)}

.hero-cap{grid-area:cap;position:relative;z-index:3;padding:14px 18px 22px;background:var(--y);background-image:var(--dot);background-size:9px 9px;display:flex;flex-direction:column}
.hero .kicker{font-size:15px;letter-spacing:.08em}
.caps{display:grid}
.cap{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(-14px);transition:opacity .35s, transform .45s, visibility 0s .45s}
.cap.on{opacity:1;visibility:visible;transform:none;transition-delay:.15s,.15s,0s}
.cap-tag{font:800 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--r)}
.cap-tag span{color:var(--ink);margin-left:6px}
.cap-line{font-weight:800;font-size:16px;margin:2px 0 12px}
.cap-name{font-size:clamp(42px,12vw,56px);line-height:.95;margin:8px 0 6px;letter-spacing:-.02em}
.cap-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 12px;margin-top:4px}
.cap-price{font:400 28px/1 var(--display)}
.cap-buy .btn{margin-left:4px}
.cap-name a{text-decoration:none}
.pnl-end{display:none}
.cap-note{font-size:14px;max-width:40ch;background:var(--w);border:2px dashed var(--r);padding:9px 11px;margin-bottom:14px}
.cap-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;margin-top:20px;padding-left:10px}
.tab,.play{flex:none}
.tab,.play{appearance:none;border:0;background:none;cursor:pointer;font:800 12px/1 var(--body);text-transform:lowercase;color:var(--ink);padding:10px 11px;position:relative;isolation:isolate;min-height:40px}
.tab::before,.play::before{content:"";position:absolute;inset:0;border:2.5px solid var(--ink);background:var(--w);transform:skewX(var(--sk));z-index:-1;transition:background .2s}
.tab span{font-family:var(--display)}
.tab em{font-style:normal;display:none;margin-left:6px}
.tab.on em{display:inline}
.tab.on{color:var(--y)}
.tab.on::before{background:var(--ink)}
.tab:hover:not(.on)::before{background:var(--y)}
.play{width:42px}
.play span{display:block;width:12px;height:13px;margin:auto;border-inline:4px solid var(--ink)}
.play[aria-pressed="true"] span{border:0;width:0;height:0;border-left:12px solid var(--ink);border-block:7px solid transparent}
.prog{height:5px;margin-top:14px;background:rgba(17,17,20,.12);overflow:hidden}
.prog i{display:block;height:100%;width:100%;background:var(--r);transform-origin:left;transform:scaleX(0)}
.prog.run i{animation:prog var(--dur,6.5s) linear forwards}
.hero.paused .prog i{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:4;background:var(--r);color:var(--w);border-block:4px solid var(--ink);overflow:hidden;white-space:nowrap}
.ticker-in{display:inline-flex;animation:tick 32s linear infinite}
.ticker span{font:400 18px/1 var(--display);text-transform:uppercase;padding:13px 22px;display:inline-flex;align-items:center;gap:44px}
.ticker span::after{content:"";width:16px;height:16px;background:var(--y);transform:skewX(-45deg);margin-left:22px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- section headers ---------- */
.ph{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:34px 18px 22px}
.ph-ch{font:400 58px/.8 var(--display);color:transparent;-webkit-text-stroke:2.5px var(--ink);flex:none}
.ph h2{font-size:clamp(30px,8vw,56px)}
.ph p{margin-top:8px;font-weight:600;max-width:52ch}
.ph-inv{color:var(--w)}
.ph-inv .ph-ch{-webkit-text-stroke-color:var(--y)}

/* ================= GRAILS (comic page) ================= */
.p-grails{background:var(--paper);background-image:var(--dot);background-size:11px 11px;padding-bottom:40px}
.comic{display:grid;gap:14px;padding:0 14px}
.comic{--cr:40px;--cc:40px}
.cp{--cut:polygon(0 0,100% 0,100% 100%,0 100%);background:var(--ink);padding:5px;clip-path:var(--cut);filter:drop-shadow(0 0 0 transparent)}
.cp-in{height:100%;background:var(--w);clip-path:var(--cut);display:grid;grid-template-columns:38% 1fr;gap:14px;align-items:center;padding:14px}
.cp-img{display:block;background:var(--w)}
.cp-img img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .4s}
.cp:hover .cp-img img{transform:scale(1.05) rotate(-1.5deg)}
.cp-line{font:800 11px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--b)}
.cp-name{font-size:20px;margin:6px 0 10px}
.cp-name a{text-decoration:none}
.cp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
/* 60deg cuts: rise 104 / run 60 = tan(60deg) */
.g1{--cut:polygon(0 0,100% 0,100% calc(100% - var(--cr)),calc(100% - var(--cc)) 100%,0 100%)}
.g1 .cp-in{background:var(--y);background-image:var(--dot);background-size:9px 9px}
.g1 .cp-img{border:4px solid var(--ink);box-shadow:7px 7px 0 var(--r)}
.g2{--cut:polygon(var(--cc) 0,100% 0,100% 100%,0 100%,0 var(--cr))}
.g2 .cp-in{padding-left:30px}
.g3 .cp-in{background:var(--b);color:var(--w)}
.g3 .cp-line{color:var(--y)}
.g3 .cp-img{border:4px solid var(--ink)}
.g3 .pill{color:var(--ink)} .g3 .pill-low{color:var(--w)}
.g3 .btn-ink{border-color:var(--y)}
.g4{--cut:polygon(0 0,calc(100% - var(--cc)) 0,100% var(--cr),100% 100%,0 100%)}
.g4 .cp-in{padding-right:28px}
.g5{--cut:polygon(0 0,100% 0,100% 100%,var(--cc) 100%,0 calc(100% - var(--cr)))}
.g5 .cp-in{padding-left:26px}

/* ================= FAVORITES (manga strip) ================= */
.p-fav{background:var(--b);background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 26px);padding-bottom:40px}
.strip{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding:0 14px}
.pc{position:relative;transform:rotate(var(--rot,-.8deg));filter:drop-shadow(7px 7px 0 var(--ink))}
.pc{--pcut:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))}
.pc-b{background:var(--ink);padding:4px;clip-path:var(--pcut);height:100%}
.pc-in{background:var(--w);clip-path:var(--pcut);padding:10px 10px 16px;height:100%}
.pc:nth-child(2n){--rot:.9deg}
.pc:nth-child(3n){--rot:-.4deg}
.pc-img{display:block;margin:0 0 10px;border-bottom:3px solid var(--ink);padding-bottom:8px}
.pc-img img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .35s}
.pc:hover .pc-img img{transform:scale(1.06)}
.pc-line{font:800 10px/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--b)}
.pc-name{font-size:17px;margin:5px 0 10px}
.pc-name a{text-decoration:none}
.pc-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pc .tag-price{font-size:18px}
.more{text-align:center;padding:30px 14px 0}

/* ================= VISIT ================= */
.p-visit{background:var(--r);background-image:var(--dotw);background-size:10px 10px;padding:34px 14px 44px}
.visit{display:grid;border:5px solid var(--ink);background:var(--ink);gap:5px;box-shadow:10px 10px 0 var(--ink)}
.visit-photo img{width:100%;height:100%;min-height:230px;object-fit:cover}
.visit-txt{background:var(--y);padding:24px 20px 28px}
.visit-txt h2{font-size:clamp(32px,8vw,58px);margin:14px 0 10px}
.visit-txt dl{display:grid;gap:12px;margin:20px 0 24px}
.visit-txt dt{font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--r)}
.visit-txt dd{margin:4px 0 0;font-weight:800;font-size:18px}

/* ================= JOIN + FOOTER ================= */
.p-join{background:var(--ink);color:var(--w);padding:48px 18px 28px}
.join{max-width:760px}
.join .kicker span{background:var(--y);color:var(--ink)}
.join h2{font-size:clamp(46px,13vw,104px);color:var(--y);margin:16px 0 10px;text-shadow:5px 5px 0 var(--r)}
.join>p{font-size:18px;font-weight:600}
.join-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.join-form input{flex:1 1 230px;min-height:52px;border:3px solid var(--y);background:var(--w);font:600 17px var(--body);padding:0 16px}
.join-form .btn{min-height:52px}
.join-msg{flex-basis:100%;color:var(--y);font-weight:800}
.ftr{margin-top:56px;padding-top:24px;border-top:2px solid rgba(255,255,255,.2);display:grid;gap:18px}
.brand-ftr{color:var(--w)}
.brand-ftr img{filter:invert(1)}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.ftr nav a{font-weight:600;font-size:14px;text-decoration:none;opacity:.85}
.ftr nav a:hover{opacity:1;color:var(--y)}
.fine{font-size:12px;opacity:.6;max-width:80ch}

/* ---------- reveal (JS adds .js to <html>) ---------- */
.js .reveal{opacity:0;transform:translateY(28px) rotate(-1.2deg);transition:opacity .55s, transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:rotate(var(--rot,0deg))}
.js .comic .reveal:nth-child(2),.js .strip .reveal:nth-child(4n+2){transition-delay:.08s}
.js .comic .reveal:nth-child(3),.js .strip .reveal:nth-child(4n+3){transition-delay:.16s}
.js .comic .reveal:nth-child(4),.js .strip .reveal:nth-child(4n+4){transition-delay:.24s}
.js .comic .reveal:nth-child(5){transition-delay:.32s}

/* ================= ≥ 700px ================= */
@media (min-width:700px){
  .hero{--ah:420px;--sl:64px}
  .strip{grid-template-columns:repeat(3,1fr);gap:22px 18px;padding:0 24px}
  .comic{padding:0 24px}
  .ph{padding:44px 24px 26px}
}
/* ================= desktop ≥ 1000px ================= */
@media (min-width:1000px){
  .nav{display:flex}
  .cart{margin-left:10px}
  .hdr{padding:0 28px}
  .brand img{width:34px}
  .brand span{font-size:21px}
  .hero{--ah:clamp(560px,calc(100svh - var(--hdr) - 27px),800px);--sl:84px;--cw:clamp(440px,38vw,580px);
    grid-template-columns:var(--cw) 1fr;grid-template-rows:1fr auto;grid-template-areas:"copy acc" "cap acc";height:var(--ah);background:none}
  /* yellow copy column with its own 60deg edge, plus an ink gutter */
  .hero::before,.hero::after{content:"";position:absolute;top:0;bottom:0;left:0;pointer-events:none;
    clip-path:polygon(0 0,100% 0,calc(100% - 2*var(--d)) 100%,0 100%)}
  .hero::after{width:calc(var(--cw) + var(--d) + 10px);background:var(--ink);z-index:1}
  .hero::before{width:calc(var(--cw) + var(--d));background:var(--y);background-image:var(--dot);background-size:9px 9px;z-index:2}
  .hero-copy,.hero-cap{background:none;padding-left:clamp(28px,3.4vw,52px);padding-right:0}
  .hero-copy{padding-top:clamp(30px,5vh,60px);padding-bottom:0;padding-right:20px}
  .hero h1{font-size:clamp(40px,3.9vw,60px);max-width:12ch;margin:12px 0 10px}
  .sub{font-size:17px;max-width:31ch}
  .hero{grid-template-rows:auto 1fr}
  .hero .kicker{font-size:17px}
  .hero-cap{justify-content:center;max-width:440px;background:none;padding-bottom:clamp(24px,4vh,44px)}
  .cap-name{font-size:clamp(52px,5.4vw,84px);margin:10px 0 8px}
  .cap-line{margin-top:6px}
  .tabs{margin-top:16px}
  .acc{height:100%;margin-left:calc(-1*var(--d));border:0}
  .track{left:var(--d)}
  .pnl-card img{max-height:calc(var(--ah)*.9);max-width:min(560px,40vw)}
  .hero-45 .pnl-card img{max-height:calc(var(--ah)*.76)}
  .hero-45 .pnl.on .pnl-card{transform:translate(-45%,-47%) rotate(-1.5deg) scale(1)}
  .hero-45{--cw:clamp(520px,42vw,640px)}
  .pnl-end{display:block;position:relative;overflow:hidden;flex:0 0 calc(var(--d) + 24px)}
  .pnl-end .pnl-in{background-color:var(--r)}
  .pnl-end .pnl-in::before{background-image:var(--dotw)}
  .pnl-end .pnl-in::after{display:none}
  .pnl-num{font-size:46px;top:18px}
  .pnl-label{font-size:20px}
  .burst{width:96px;height:96px;right:-20px;top:-14px}
  .burst b{font-size:19px}
  .pnl-price{font-size:24px;padding:11px calc(1.875em*var(--tan) + 8px) 10px;clip-path:polygon(calc(1.875em*var(--tan)) 0,100% 0,calc(100% - 1.875em*var(--tan)) 100%,0 100%)}
  .ticket{width:min(56%,380px);padding:26px 26px 28px}
  .stamp{right:-14px;top:-16px}
  .hero-45 .pnl-price{left:30%;bottom:46%}
  .page.hero{top:var(--hdr)}
  .ph{padding:64px 48px 34px;gap:22px;flex-direction:row;align-items:flex-end}
  .ph-ch{font-size:130px}
  .comic{--cr:84px;--cc:84px;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(300px,auto);gap:16px;padding:0 48px}
  .g1{grid-column:1/8;grid-row:1/3}.g2{grid-column:8/13;grid-row:1}.g3{grid-column:8/13;grid-row:2}.g4{grid-column:1/7;grid-row:3}.g5{grid-column:7/13;grid-row:3}
  .g1 .cp-in{grid-template-columns:1fr;align-content:center;padding:34px 40px 46px;gap:26px}
  .g1 .cp-img{width:min(80%,460px);justify-self:center;transform:rotate(-2deg)}
  .g1 .cp-name{font-size:38px}
  .g1 .tag-price{font-size:30px}
  .cp-in{padding:22px 26px}
  .cp-name{font-size:24px}
  .strip{grid-template-columns:repeat(4,1fr);gap:30px 24px;padding:0 48px}
  .pc-name{font-size:20px}
  .more{padding-top:44px}
  .p-visit{padding:70px 48px 80px}
  .visit{grid-template-columns:1.25fr 1fr;background:none;border:0;box-shadow:none;gap:0;position:relative}
  .visit-photo{clip-path:polygon(0 0,100% 0,calc(100% - 520px) 100%,0 100%);border:5px solid var(--ink);border-right:0;background:var(--ink);margin-right:-420px;min-height:520px}
  .visit-photo img{min-height:520px}
  .visit-txt{border:5px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:44px 44px 48px 44px;position:relative;z-index:1;margin-left:40px;align-self:center}
  .p-join{padding:90px 48px 36px;position:sticky;overflow:hidden}
  .p-join::before{content:"";position:absolute;right:24%;top:90px;width:min(28vw,400px);aspect-ratio:160/126;background:url(../img/pb-mark.png) center/contain no-repeat;filter:invert(1);opacity:.1;transform:rotate(-8deg)}
  .p-join::after{content:"";position:absolute;right:-60px;top:0;width:260px;height:420px;background:var(--y);background-image:var(--dot);background-size:9px 9px;transform:skewX(-45deg);transform-origin:top;opacity:.95;border-left:12px solid var(--r)}
  .join,.ftr{position:relative;z-index:1}
  .ftr{grid-template-columns:auto 1fr;align-items:center}
  .ftr nav{justify-content:flex-end}
  .fine{grid-column:1/-1}
}
@media (min-width:1000px) and (max-width:1180px){ .g1 .cp-name{font-size:32px} .cp-in{grid-template-columns:1fr} }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important;transition-delay:0s !important}
  .js .reveal{opacity:1;transform:none}
  .ticker-in{flex-wrap:wrap}
}

/* ---------- social-proof badge (placeholder data in assets/js/social-proof.js) ---------- */
.sold{display:inline-flex;align-items:center;gap:5px;color:#D3141B;background:#FFECEA;border:1.5px solid #F7B9B4;border-radius:999px;font:800 12.5px/1.2 var(--body);padding:4px 10px 4px 7px;margin:2px 0 10px}
.sold-ic{font-size:14px;line-height:1}
.cap .sold{margin:0 0 10px}
.pc .sold{font-size:11.5px;padding:3px 8px 3px 6px;margin:0 0 8px}

/* ---------- attention wiggle on Add to Cart (scheduled by main.js) ---------- */
@keyframes pb-wiggle{
  0%,100%{transform:translateX(0) rotate(0)}
  15%{transform:translateX(-5px) rotate(-3deg)}
  30%{transform:translateX(5px) rotate(3deg)}
  45%{transform:translateX(-4px) rotate(-2deg)}
  60%{transform:translateX(3px) rotate(1.5deg)}
  75%{transform:translateX(-2px) rotate(-1deg)}
}
.btn.wiggle{animation:pb-wiggle .6s cubic-bezier(.36,.07,.19,.97) both}
.btn.wiggle:hover,.btn.wiggle:focus-visible{animation:none}
@media (prefers-reduced-motion:reduce){.btn.wiggle{animation:none}}