/* ===== THE BOY — shared styles ===== */
:root{
  --ink:#050506;
  --pink:#ff2d95;
  --line:rgba(255,255,255,.72);
  --muted:rgba(255,255,255,.55);
  --panel:#0b0b0d;
  --edge:rgba(255,255,255,.12);
  --vh:1vh;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--ink); color:#fff;
  font-family:"Syne",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
body:not(.touch), body:not(.touch) *{cursor:none !important;}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;}

/* ---------- buttons (black, white-outlined lettering) ---------- */
.cta{
  display:inline-block; text-decoration:none; text-align:center;
  background:#000; color:#000;
  -webkit-text-stroke:1.15px #fff; paint-order:stroke fill;
  border:1px solid var(--line);
  font-family:"Syne",sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:17px; padding:15px 40px;
  transition:transform .18s ease, border-color .25s ease, box-shadow .25s ease, opacity .2s;
}
.cta:hover{transform:translateY(-2px); border-color:#fff; box-shadow:0 0 26px rgba(255,255,255,.18);}
.cta:active{transform:translateY(0);}
.cta:focus-visible{outline:2px solid #fff; outline-offset:4px;}
.cta[disabled]{opacity:.4; transform:none; box-shadow:none;}
.cta-sm{font-size:13px; padding:11px 26px; -webkit-text-stroke-width:.9px;}
@media (max-width:600px){
  .cta{font-size:15px; padding:14px 34px; letter-spacing:.16em; -webkit-text-stroke-width:1.05px;}
  .cta-sm{font-size:12px; padding:10px 22px; -webkit-text-stroke-width:.85px;}
}
@media (min-width:1400px){
  .cta{font-size:19px; padding:17px 46px; -webkit-text-stroke-width:1.3px;}
}

/* ---------- landing ---------- */
body.landing{height:100%; overflow:hidden;}
.stage{
  position:fixed; inset:0; height:calc(var(--vh)*100);
  background:var(--ink) center / contain no-repeat;
}
.scrim{position:fixed; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 38%);}
.wrap{
  position:fixed; inset:0; height:calc(var(--vh)*100);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:14px; padding:0 16px calc(var(--vh)*7 + env(safe-area-inset-bottom));
}
.doors{display:flex; gap:12px;}

/* ---------- store pages ---------- */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 16px; background:rgba(5,5,6,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge);
}
.bar .home{color:#fff; text-decoration:none; font-weight:800; letter-spacing:.18em; font-size:15px;}
.bar nav{display:flex; gap:20px;}
.bar nav a{color:var(--muted); text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:13px; padding-bottom:3px; border-bottom:1px solid transparent;}
.bar nav a:hover{color:#fff;}
.bar nav a.on{color:#fff; border-color:var(--pink);}

main.store-main{max-width:1240px; margin:0 auto; padding:28px 16px 80px;}
.pagetitle{margin:0 0 26px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(30px,6vw,56px);
  color:#000; -webkit-text-stroke:1.2px #fff; paint-order:stroke fill;}
.empty{color:var(--muted); letter-spacing:.06em;}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:26px 20px;}
@media (max-width:600px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 12px;} }

.card{display:block; width:100%; padding:0; text-align:left; background:none; border:0;}
.card .art{position:relative; aspect-ratio:1/1; background:#111; border:1px solid var(--edge); overflow:hidden;}
.card .art img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.card:hover .art img{transform:scale(1.035);}
.card:hover .art{border-color:rgba(255,45,149,.6);}
.card.sold .art img{filter:grayscale(.85) brightness(.6);}
.noart{width:100%; height:100%; background:radial-gradient(circle at 50% 40%, #2a0c1c, #070707 70%);}
.tag{position:absolute; top:10px; left:10px; background:#000; border:1px solid var(--line); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:5px 8px;}
.card .meta{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding-top:10px;}
.card .t{font-weight:700; font-size:15px; line-height:1.25; overflow-wrap:anywhere;}
.card .p{font-weight:700; font-size:14px; grid-row:1; grid-column:2;}
.card .k{color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase;}

/* ---------- product detail ---------- */
body.lock{overflow:hidden;}
.modal{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.78);
  display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 16px;}
.modal[hidden]{display:none;}
.panel{position:relative; width:100%; max-width:1000px; background:var(--panel); border:1px solid var(--edge); padding:26px;}
.x{position:absolute; top:8px; right:10px; background:none; border:0; font-size:30px; line-height:1; padding:6px 10px; color:var(--muted);}
.x:hover{color:#fff;}
.detail{display:grid; grid-template-columns:1.1fr 1fr; gap:30px;}
@media (max-width:760px){ .modal{padding:0;} .panel{min-height:100%; border:0; padding:52px 16px 30px;} .detail{grid-template-columns:1fr; gap:20px;} }
.gallery .main{width:100%; aspect-ratio:1/1; object-fit:contain; background:#000; border:1px solid var(--edge);}
.gallery .cap{color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-top:8px; min-height:14px;}
.thumbs{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.th{background:none; border:1px solid var(--edge); padding:0; width:64px; opacity:.6; transition:opacity .2s, border-color .2s;}
.th img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.th span{display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:3px 2px; color:var(--muted); text-align:center; white-space:nowrap; overflow:hidden;}
.th.on, .th:hover{opacity:1; border-color:var(--pink);}
.info .k{margin:0; color:var(--muted); font-size:11px; letter-spacing:.16em; text-transform:uppercase;}
.info h2{margin:6px 0 4px; font-size:clamp(24px,4vw,34px); line-height:1.1; overflow-wrap:anywhere;}
.info .price{margin:0 0 14px; font-weight:700; font-size:18px;}
.desc{color:rgba(255,255,255,.8); line-height:1.6; font-family:system-ui,sans-serif; font-size:15px;}
.tracks{list-style:none; margin:18px 0; padding:0; border-top:1px solid var(--edge);}
.tracks li{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--edge);}
.tracks .n{color:var(--muted); font-size:12px; width:18px; text-align:right;}
.tracks .tt{flex:1; font-size:14px; overflow-wrap:anywhere;}
.play{width:34px; height:34px; flex:none; border-radius:50%; border:1px solid var(--line); background:#000; font-size:12px; display:grid; place-items:center;}
.play:hover, .play.on{border-color:var(--pink); box-shadow:0 0 14px rgba(255,45,149,.45);}
.play[disabled]{opacity:.25;}
.buy-sm{background:#000; border:1px solid var(--line); font-size:12px; font-weight:700; letter-spacing:.06em; padding:7px 12px;}
.buy-sm:hover{border-color:#fff;}
.opt{display:block; margin:16px 0 4px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.sizes{display:flex; flex-wrap:wrap; gap:8px;}
.sizes button{min-width:46px; background:#000; border:1px solid var(--edge); padding:9px 12px; font-weight:700; font-size:13px;}
.sizes button.on{border-color:#fff; box-shadow:inset 0 0 0 1px #fff;}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px;}
.actions .cta{padding:14px 30px; font-size:15px;}
.ghost{background:transparent;}
.note{color:var(--muted); font-size:12px; margin:12px 0 0; font-family:system-ui,sans-serif;}
.msg{min-height:18px; color:#ff8ac4; font-size:13px; margin:12px 0 0; font-family:system-ui,sans-serif;}

/* ---------- success ---------- */
.done{min-height:calc(var(--vh)*100); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; padding:16px;}
.done h1{margin:0; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(28px,6vw,48px); color:#000; -webkit-text-stroke:1.2px #fff; paint-order:stroke fill;}
.done p{max-width:460px; color:rgba(255,255,255,.8); line-height:1.6; font-family:system-ui,sans-serif; margin:0;}

/* ---------- laser pyramid cursor (pointer devices only) ---------- */
.cursor{
  position:fixed; top:0; left:0; width:34px; height:34px;
  pointer-events:none; z-index:9999; opacity:0; will-change:transform;
  filter:drop-shadow(0 0 5px rgba(255,45,149,.9)) drop-shadow(0 0 15px rgba(255,45,149,.45));
  transition:filter .2s ease, opacity .2s ease;
}
.cursor.hot{filter:drop-shadow(0 0 8px rgba(255,140,210,1)) drop-shadow(0 0 24px rgba(255,45,149,.8));}
.cursor .pyr{transform-origin:50% 62%; animation:bob 3.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-1.5px);}}
.cursor .beam{animation:beam 2.2s ease-in-out infinite;}
@keyframes beam{0%,100%{opacity:.3;}50%{opacity:.85;}}
@media (min-width:1400px){ .cursor{width:40px; height:40px;} }
@media (prefers-reduced-motion:reduce){ .cursor .pyr,.cursor .beam{animation:none;} }
body.touch .cursor{display:none;}