/* =============================================================
   DRXP.SHOP homepage styles
   Lifted verbatim from the approved Claude Design prototype so the
   rendering stays pixel-identical. Only the @font-face URLs were made
   absolute. Edit with care - this file is the design contract.
   ============================================================= */

@font-face{font-family:'Anton';src:url('/assets/fonts/anton.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url('/assets/fonts/Nunito.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Permanent Marker';src:url('/assets/fonts/PermanentMarker.woff2') format('woff2');font-weight:400;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0A0A0A;--bg2:#111110;--panel:#161615;--panel2:#1d1d1b;
  --line:#252523;--line2:#33332f;
  /* Contrast against --bg, measured: --tx 16.8:1, --tx2 8.0:1, --tx3 4.6:1.
     --tx3 was #66635b, which is only 3.30:1 — under the 4.5:1 WCAG AA floor
     for normal text, and it carries the smallest type on the site (form
     hints, captions, the "optional" tags). It read as blending into the
     background because it genuinely was. Don't darken these back below
     4.5:1 for the look; pick a lighter weight or smaller size instead. */
  --tx:#F0ECE0;--tx2:#a8a49a;--tx3:#7d7a71;
  --acc:#FF6B35;--red:#E73843;--grn:#A3E635;--blu:#125EE4;--ylw:#F8CE00;
  --head:'Anton',Impact,sans-serif;--body:'Nunito',system-ui,sans-serif;--mark:'Permanent Marker',cursive;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--body);font-size:1.1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px);mix-blend-mode:overlay;opacity:.45}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc)}
button{cursor:pointer;font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.94}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
.mark{font-family:var(--mark);font-size:1.5rem;color:var(--acc);line-height:1.2}
/* The kickers (.mark, .kick) always sit in front of the Anton heading under
   them, and that heading starts a little lower. Anton's capitals rise above
   its tight line box (line-height .86-.94), so on the big titles the letters
   climbed over the kicker and hid it. The gap is in em of the heading, so it
   grows with it — a 136px title gets ~24px, a 40px one ~7px. */
.mark,.kick{position:relative;z-index:3;padding-bottom:.25em}
:is(.mark,.kick)+:is(h1,h2,h3){margin-top:.18em}
/* margin-bottom lives here rather than on each page: the marker font's
   descenders sit right on top of the Anton heading that always follows,
   and every page that uses a kicker had been patching that gap locally
   (apply/art-info/seller-info/page-head all set their own 8-14px). The
   .sec-head pairing on home and shop never got one, which is where the
   two headings read as colliding. Those local overrides still win. */
.kick{font-family:var(--mark);font-weight:400;font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--grn);opacity:.72;line-height:1.15;margin-bottom:5px}
.btn{font-family:var(--body);font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;padding:14px 24px;border:2px solid var(--line2);background:transparent;color:var(--tx);transition:all .2s;display:inline-block;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(240,236,224,.32),transparent);transform:skewX(-18deg);opacity:0;transition:opacity .15s}
.btn:hover::after{opacity:1;animation:sheen .75s cubic-bezier(.3,.1,.3,1)}
.btn-acc::after,.btn-grn::after{background:linear-gradient(100deg,transparent,rgba(10,10,10,.22),transparent)}
@keyframes sheen{0%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.btn:hover::after{animation:none;opacity:0}}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn-acc{background:var(--acc);color:#0A0A0A;border-color:var(--acc)}
.btn-acc:hover{background:var(--tx);border-color:var(--tx);color:#0A0A0A}
.btn-grn{background:var(--grn);color:#0A0A0A;border-color:var(--grn)}
/* The studio application's accent. Filled like btn-acc and btn-grn — as an
   outline it was blue text on near-black at 3.5:1; white on the fill is 5.6. */
.btn-blu{background:var(--blu);color:#fff;border-color:var(--blu)}
.btn-blu:hover{background:var(--tx);border-color:var(--tx);color:#0A0A0A}
.btn-grn:hover{background:var(--tx);border-color:var(--tx);color:#0A0A0A}


/* ---- BUTTON VARIANTS ---- */
.btn-draw{border-color:transparent;overflow:visible;transition:all .6s ease}
.btn-draw::after{content:none}
.btn-draw svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.btn-draw rect{x:0;y:0;width:100%;height:100%;fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:422,0;transition:all .35s linear}
.btn-draw:hover{color:var(--acc);letter-spacing:1px;font-weight:900;background:transparent}
.btn-draw:hover rect{stroke-width:5;stroke-dasharray:15,310;stroke-dashoffset:48;transition:all 1.35s cubic-bezier(.19,1,.22,1)}
.btn-spread{border-color:transparent;background-image:linear-gradient(var(--acc),var(--acc)),linear-gradient(var(--acc),var(--acc));background-size:0 2px,0 2px;background-position:50% 0,50% 100%;background-repeat:no-repeat;transition:background-size .35s ease-in-out,letter-spacing .3s ease,color .3s ease}
.btn-spread:hover{background-size:70% 2px,70% 2px;letter-spacing:.34em;color:var(--acc);border-color:transparent}
.btn-press{box-shadow:0 4px 0 rgba(0,0,0,.6),0 7px 16px rgba(0,0,0,.5);transition:transform .12s ease,box-shadow .12s ease,background .2s,color .2s}
.btn-press:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.65),0 12px 22px rgba(0,0,0,.55)}
.btn-press:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn-halo{border-color:transparent;outline:2px solid rgba(255,107,53,.5);outline-offset:0;box-shadow:inset 0 0 22px rgba(255,107,53,0);transition:all 1s cubic-bezier(.19,1,.22,1)}
.btn-halo:hover{color:var(--acc);border-color:var(--acc);outline-color:rgba(255,107,53,0);outline-offset:14px;box-shadow:inset 0 0 26px rgba(255,107,53,.32),0 0 24px rgba(255,107,53,.2)}
@media(prefers-reduced-motion:reduce){.btn-draw:hover{letter-spacing:0}.btn-halo:hover{outline-offset:0}}

/* NAV */
/* padding-top rather than a taller .nav-inner: the logo is deliberately
   bigger than the bar and hangs below it (that's why #nav is overflow:visible
   with a drop-shadow on the mark), so it's centred to a negative top — at
   1440px it sat at -5px, i.e. 5px of the crown cut off by the top of the
   window, and -8px once .solid shrinks the bar. Padding shifts the whole
   row down instead of resizing it, which clears the crown in both states
   while leaving the overhang below exactly as designed. */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:14px;background:rgba(10,10,10,.5);backdrop-filter:blur(12px);border-bottom:2px solid transparent;transition:.3s;overflow:visible}
#nav.solid .nav-inner{height:62px}
#nav.solid{background:rgba(10,10,10,.94);border-color:var(--line)}
.nav-inner{max-width:1240px;margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:height .3s}
.nav-logo{position:relative;z-index:2;display:block;line-height:0;flex:none;transform-origin:50% 12%;animation:logoSway 7s ease-in-out infinite}
.nav-logo img{height:86px;width:auto;transform-origin:left center;filter:drop-shadow(0 6px 18px rgba(0,0,0,.9));transition:height .3s,transform .25s}
#nav.solid .nav-logo img{height:78px}
.nav-logo:hover img{transform:scale(1.05) rotate(-1.5deg)}
/* Idle sway. Deliberately on the <a> and not the <img>: an animation on
   transform would outrank the img's hover transform and kill the lift on
   hover, so the parent swings and the child still scales. Pivot sits near
   the top of the mark, so it reads as hanging and swinging rather than
   spinning about its middle, and it lifts as it passes through centre —
   two extremes, one bob each way. Paused on hover so the scale settles. */
@keyframes logoSway{
  0%,100%{transform:rotate(-1.1deg) translateY(0)}
  25%{transform:rotate(0deg) translateY(-3px)}
  50%{transform:rotate(1.1deg) translateY(0)}
  75%{transform:rotate(0deg) translateY(-3px)}
}
.nav-logo:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.nav-logo{animation:none}}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);white-space:nowrap}
.nav-links a:hover{color:var(--acc)}
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-actions .btn{padding:11px 18px}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px}
.nav-burger span{width:26px;height:3px;background:var(--tx);display:block}
.msheet{display:none;position:fixed;inset:0;background:var(--bg);z-index:200;flex-direction:column;padding:28px 32px;transform:translateX(100%);transition:transform .3s ease}
.msheet.open{transform:translateX(0)}
.msheet-close{align-self:flex-end;background:none;border:none;font-size:32px;color:var(--tx);margin-bottom:20px;line-height:1}
.msheet nav a{display:block;font-family:var(--head);font-size:2.4rem;text-transform:uppercase;padding:12px 0;border-bottom:2px solid var(--line);color:var(--tx)}
.msheet-actions{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.msheet-actions .btn{text-align:center;padding:16px}

/* ===== DRIFT WALL HERO ===== */
.drift{position:relative;height:auto;min-height:100svh;overflow:hidden;background:var(--bg);border-bottom:2px solid var(--line)}
.drift-stage{position:absolute;inset:-8%;display:flex;gap:16px;justify-content:center;will-change:transform;transition:transform .6s cubic-bezier(.16,.84,.28,1)}
.dcol{flex:1 1 0;min-width:0;position:relative;overflow:hidden}
.dtrack{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;gap:16px;will-change:transform}
.dcard{position:relative;width:100%;aspect-ratio:5/6;overflow:hidden;background:var(--panel);cursor:pointer;flex:none;border:1px solid rgba(240,236,224,.07)}
.dcard img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) contrast(1.05) brightness(.7);transition:filter .5s ease,transform .8s cubic-bezier(.16,.84,.28,1)}
.dcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,107,53,.2),rgba(231,56,67,.16));opacity:0;transition:opacity .45s}
.dcard:hover img{filter:none;transform:scale(1.06)}
.dcard:hover::after{opacity:1}
.dcard .dlab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;background:linear-gradient(0deg,rgba(10,10,10,.94),transparent);opacity:0;transform:translateY(8px);transition:.35s}
.dcard:hover .dlab{opacity:1;transform:none}
.dlab b{font-family:var(--head);font-weight:400;font-size:1rem;text-transform:uppercase;line-height:1}
.dlab i{font-style:normal;font-family:var(--body);font-weight:800;font-size:.85rem;color:var(--acc)}
.drift-veil{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 68% 62% at 50% 48%,rgba(10,10,10,.95) 0%,rgba(10,10,10,.8) 40%,rgba(10,10,10,.3) 70%,rgba(10,10,10,.88) 100%)}
.drift-veil.off{opacity:.2;transition:opacity .5s}
.drift-copy{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 132px;min-height:100svh;pointer-events:none;transition:opacity .5s,transform .5s}
.drift-copy.hide{opacity:0;transform:scale(.98)}
.drift-copy > *{pointer-events:auto}
.hero-logo-wrap{position:relative;display:flex;justify-content:center;align-items:center}
.hero-logo-wrap::before{content:'';position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1/.72;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,107,53,.30) 0%,rgba(255,107,53,.13) 38%,rgba(255,107,53,0) 68%);filter:blur(22px);pointer-events:none;opacity:0;animation:glowin 1.6s ease .55s forwards,glowbreathe 7s ease-in-out 2.2s infinite;will-change:opacity,transform}
.hero-logo{position:relative;width:min(760px,84vw);max-height:min(34vh,400px);height:auto;object-fit:contain;filter:drop-shadow(0 18px 46px rgba(0,0,0,.85));animation:logoin 1.15s cubic-bezier(.16,.84,.24,1) both,logobreathe 7s ease-in-out 2.2s infinite;transition:transform .5s cubic-bezier(.2,.9,.3,1),filter .5s ease;will-change:transform,opacity}
.hero-logo-wrap:hover .hero-logo{transform:scale(1.035);filter:drop-shadow(0 18px 46px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(255,107,53,.45))}
.hero-logo-wrap:hover::before{opacity:.95}
@keyframes logoin{0%{opacity:0;transform:scale(.9) translateY(26px) rotate(-2.2deg);filter:blur(14px) drop-shadow(0 18px 46px rgba(0,0,0,.85))}55%{opacity:1;filter:blur(0) drop-shadow(0 18px 46px rgba(0,0,0,.85))}100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 18px 46px rgba(0,0,0,.85))}}
@keyframes logobreathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.018) translateY(-5px)}}
@keyframes glowin{to{opacity:.7}}
@keyframes glowbreathe{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}}
.hero-sub{margin-top:8px;font-family:var(--mark);font-size:1.9rem;color:var(--acc);transform:rotate(-1.5deg);display:flex;gap:.4em;flex-wrap:wrap;justify-content:center;line-height:1.15}
.hero-line{margin-top:18px;max-width:620px;color:var(--tx2);font-size:1.1rem;line-height:1.7}
.hero-line b{color:var(--tx);font-weight:800}
.hero-sub .sep{display:inline-flex;align-items:center;color:var(--tx3)}
.hero-sub .sep svg{width:.62em;height:auto;display:block;animation:sep-spin 18s linear infinite;transform-origin:50% 50%}
.hero-sub .sep:nth-of-type(2) svg{animation-direction:reverse}
.hero-sub .sep svg circle{transform-box:fill-box;transform-origin:center;animation:sep-breathe 3.6s ease-in-out infinite}
.hero-sub .sep svg circle:nth-child(2){animation-delay:-1.2s}
.hero-sub .sep svg circle:nth-child(3){animation-delay:-2.4s}
@keyframes sep-spin{to{transform:rotate(360deg)}}
@keyframes sep-breathe{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-sub .sep svg,.hero-sub .sep svg circle{animation:none}}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center}
#drift .hero-cta .btn:not(.btn-draw):not(.btn-spread){border-color:var(--acc)}
#drift .hero-cta .btn:not(.btn-acc):not(.btn-grn):not(.btn-draw):not(.btn-spread):hover{color:var(--acc);border-color:var(--acc)}
.hero-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.pill{font-family:var(--body);font-weight:800;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 13px;border:2px solid var(--line2);background:rgba(10,10,10,.55);color:var(--tx2)}
.pill.hot{color:var(--grn);border-color:var(--grn)}
.pill.hot::before{content:'●';margin-right:6px;animation:blink 1.5s infinite}
@keyframes blink{50%{opacity:.2}}
.dhint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:.7em;max-width:calc(100% - 32px);padding:11px 20px;border-radius:999px;background:rgba(240,236,224,.06);border:1px solid rgba(240,236,224,.14);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 8px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(240,236,224,.12);text-align:center;font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,236,224,.88);pointer-events:none;white-space:nowrap}
.dhint b{color:var(--acc);font-weight:800}
.dhint::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:blink 1.8s ease-in-out infinite}
.dh-m{display:none}
@media (max-width:640px){
  .dhint{white-space:nowrap;font-size:.64rem;letter-spacing:.14em;padding:9px 16px;bottom:16px}
  .dh-d{display:none}.dh-m{display:inline}
  .wall-toggle{display:none}
  #drift .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%;max-width:340px;margin-top:22px}
  #drift .hero-cta .btn{padding:13px 6px;font-size:.64rem;letter-spacing:.04em;text-align:center;white-space:nowrap;line-height:1.2}
  .hero-pills{flex-wrap:wrap;gap:6px;margin-top:14px}
  .hero-pills .pill:nth-child(3){display:none}
  .pill{font-size:.58rem;letter-spacing:.1em;padding:6px 9px;white-space:nowrap}
}
.wall-toggle{position:absolute;z-index:6;bottom:82px;left:50%;transform:translateX(-50%);background:rgba(10,10,10,.72);backdrop-filter:blur(6px)}

/* LIGHTBOX */
.lb{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:40px 24px;background:rgba(5,5,5,.94);opacity:0;transition:opacity .3s}
.lb.on{display:flex}
.lb.show{opacity:1}
.lb-box{display:grid;grid-template-columns:1.1fr .9fr;max-width:1020px;width:100%;background:var(--bg);border:2px solid var(--line2);transform:scale(.96) translateY(10px);transition:transform .4s cubic-bezier(.16,.84,.28,1)}
.lb.show .lb-box{transform:none}
.lb::before{content:'';position:fixed;inset:0;backdrop-filter:blur(8px);z-index:0;pointer-events:none}
.lb-box{margin:auto;position:relative;z-index:1}
.lb-img{background:var(--panel);aspect-ratio:1/1;overflow:hidden;max-height:min(52vh,520px)}
.lb-img img{width:100%;height:100%;object-fit:cover}
.lb-info{padding:40px 36px;display:flex;flex-direction:column;justify-content:center}
.lb-info .k{font-family:var(--body);font-weight:800;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.lb-info h3{font-size:2.4rem;margin:12px 0 12px}
.lb-info p{color:var(--tx2);font-size:1rem;line-height:1.7}
.lb-info .price{font-family:var(--head);font-size:2rem;margin:20px 0 4px}
.lb-meta{list-style:none;margin:16px 0 24px;border-top:1px solid var(--line)}
.lb-meta li{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;padding:10px 0;border-bottom:1px solid var(--line);gap:12px}
.lb-meta span{color:var(--tx3);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:800}
.lb-meta b{font-weight:800}
.lb-close{position:fixed;z-index:2;top:22px;right:26px;background:none;border:2px solid var(--line2);color:var(--tx);width:42px;height:42px;font-size:18px}
.lb-close:hover{border-color:var(--acc);color:var(--acc)}
.lb-nav{position:fixed;z-index:2;bottom:22px;left:26px;display:flex;gap:8px}
.lb-nav button{width:42px;height:42px;background:none;border:2px solid var(--line2);color:var(--tx)}
.lb-nav button:hover{border-color:var(--acc);color:var(--acc)}

.piece-frame{position:relative}
.has-slides .piece-frame::after{content:'⧉';position:absolute;top:10px;right:10px;z-index:3;font-family:var(--body);font-size:.8rem;line-height:1;padding:5px 7px;border-radius:6px;background:rgba(10,10,10,.62);color:#F0ECE0;backdrop-filter:blur(6px);opacity:.75;pointer-events:none}

/* MARQUEE */
.statbar{background:#111010;overflow:hidden;white-space:nowrap;border-top:2px solid var(--acc);border-bottom:2px solid var(--acc);position:relative}
.statbar::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#111010 0%,rgba(17,16,16,0) 9%,rgba(17,16,16,0) 91%,#111010 100%)}
.dxt-wrap{overflow:hidden}
.dxt-track{display:flex;width:max-content;animation:mar 48s linear infinite}
.dxt-track:hover{animation-play-state:paused}
.dxt-set{display:flex;align-items:center}
.dxt-set span{font-family:var(--head);font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;padding:13px 16px;display:inline-block;animation:tickpop 4.2s ease-in-out infinite;will-change:transform}
.dxt-o{color:var(--acc)}
.dxt-w{color:var(--tx)}
.dxt-l{color:#FFD400}
.dxt-sep{color:var(--grn);font-size:.78rem!important;padding:13px 4px!important;opacity:.8}
.dxt-set span:nth-child(6n+1){animation-delay:-.7s}
.dxt-set span:nth-child(6n+2){animation-delay:-1.4s}
.dxt-set span:nth-child(6n+3){animation-delay:-2.1s}
.dxt-set span:nth-child(6n+4){animation-delay:-2.8s}
.dxt-set span:nth-child(6n+5){animation-delay:-3.5s}
@keyframes tickpop{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.09);opacity:1}}
@keyframes mar{to{transform:translateX(-50%)}}
@media(max-width:640px){.dxt-set span{font-size:.86rem;padding:11px 12px}.dxt-track{animation-duration:36s}}

/* SECTIONS */
.sec{padding:84px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;border-bottom:2px solid var(--line);padding-bottom:20px;flex-wrap:wrap}
.sec-title{font-size:clamp(2.4rem,5.6vw,5rem)}
.sec-title em{font-style:normal;color:var(--acc)}
.sec-link{font-family:var(--body);font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);border-bottom:2px solid var(--line2);padding-bottom:3px;white-space:nowrap}
.sec-link:hover{color:var(--acc);border-color:var(--acc)}

/* PRODUCT GRID */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:2px solid var(--line)}
.piece{background:var(--bg)}
.piece-frame{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--panel);cursor:pointer}
.piece-frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,.84,.28,1)}
.piece:hover .piece-frame img{transform:scale(1.07)}
.piece-num{position:absolute;top:10px;left:12px;font-family:var(--head);font-size:.85rem;color:var(--tx2);z-index:2}
.piece-tag{position:absolute;top:10px;right:12px;font-family:var(--body);font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;z-index:2}
.piece-tag.hot{background:var(--acc);color:#0A0A0A}
.piece-tag.new{background:var(--grn);color:#0A0A0A}
.piece-tag.sale{background:var(--red);color:var(--tx)}
/* The bar slides up in brand orange when the card is hovered, then goes
   yellow once the pointer is actually on the bar itself — so the colour
   change marks "you're on the button", not just "you're on the card". */
.piece-buy{position:absolute;left:0;right:0;bottom:0;padding:14px;background:var(--acc);color:#0A0A0A;border:none;font-family:var(--body);font-weight:800;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;transform:translateY(100%);transition:transform .28s,background .2s}
.piece:hover .piece-buy{transform:translateY(0)}
.piece-buy:hover{background:var(--ylw);color:#0A0A0A}
.piece-meta{padding:16px 16px 20px;border-top:2px solid var(--line)}
.piece-name{font-size:1.3rem}
.piece-by{font-family:var(--mark);font-size:1.5rem;color:var(--acc);margin-top:6px;line-height:1}
.piece-price{font-family:var(--head);font-size:1.2rem;margin-top:10px}
.piece-price s{color:var(--tx3);font-family:var(--body);font-weight:400;font-size:.85rem;margin-left:8px}

/* ARTISTS */
.artists{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:2px solid var(--line)}
.art-card{background:var(--bg);position:relative;display:block}
.art-face{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.art-face img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5);transition:filter .5s,transform .7s}
.art-card:hover .art-face img{filter:none;transform:scale(1.05)}
.art-body{padding:18px 18px 22px}
.art-name{font-size:1.5rem}
.art-style{font-family:var(--mark);font-size:1.5rem;color:var(--acc);line-height:1.05;margin-top:4px}
.art-stat{font-size:.85rem;color:var(--tx3);margin-top:10px;font-weight:700}
.art-go{font-family:var(--body);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);margin-top:12px;display:block}
.art-card:hover .art-go{color:var(--acc)}

/* HOW */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:2px solid var(--line)}
.step{background:var(--bg);padding:38px 30px}
.step b{font-family:var(--head);font-size:3.2rem;line-height:1;display:block;color:var(--acc)}
.step:nth-child(2) b{color:var(--grn)}.step:nth-child(3) b{color:var(--blu)}
.step h3{font-size:1.5rem;margin:14px 0 10px}
.step p{color:var(--tx2);font-size:1rem;line-height:1.7}

/* SELL BAND */
.sell{border-top:2px solid var(--line);border-bottom:2px solid var(--line);background:var(--bg2)}
.sell-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:84px 0}
.sell h2{font-size:clamp(2.4rem,5.6vw,5rem);margin:12px 0 18px}
.sell h2 em{font-style:normal;color:var(--acc)}
.sell p{color:var(--tx2);font-size:1.1rem;line-height:1.7;max-width:460px;margin-bottom:26px}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:2px solid var(--line)}
.num{background:var(--bg);padding:30px 26px}
.num b{font-family:var(--head);font-size:2.8rem;line-height:1;display:block;color:var(--acc)}
.num:nth-child(2) b{color:var(--grn)}.num:nth-child(3) b{color:var(--blu)}.num:nth-child(4) b{color:var(--red)}
.num .l{font-size:.85rem;font-weight:700;color:var(--tx3);margin-top:10px;line-height:1.5}

footer{border-top:2px solid var(--line)}
.foot-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:58px 0 36px}
.foot-logo img{height:52px;margin-bottom:16px}
.foot-tag{font-size:.95rem;line-height:1.7;max-width:280px;color:var(--tx3)}
.foot-soc{display:flex;gap:8px;margin-top:20px}
.foot-soc a{width:40px;height:40px;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:var(--tx3);transition:.2s}
.foot-soc a:hover{border-color:var(--acc);color:var(--acc)}
.foot-col h4{font-size:1.1rem;margin-bottom:14px}
.foot-col a{display:block;font-size:.95rem;color:var(--tx3);padding:5px 0}
.foot-col a:hover{color:var(--acc)}
.foot-bot{border-top:2px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);flex-wrap:wrap;gap:10px}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.dxt-track,.dxt-set span{animation:none}.dxt-set span{opacity:1}.hero-logo{animation:none}.hero-logo-wrap::before{animation:none;opacity:.55}}

@media(max-width:1120px){.dcol:nth-child(5){display:none}.artists{grid-template-columns:1fr 1fr}.nav-links{gap:18px}.nav-logo img{height:70px}#nav.solid .nav-logo img{height:64px}}
@media(max-width:1040px){
  .nav-links,.nav-actions .btn.nav-login{display:none}
  .nav-burger{display:flex}.msheet{display:flex}
  .nav-logo img{height:72px}#nav.solid .nav-logo img{height:64px}
}
@media(max-width:960px){
  .gal{grid-template-columns:1fr 1fr}
  .how{grid-template-columns:1fr}
  .sell-in,.lb-box{grid-template-columns:1fr}
  .sell-in{gap:34px;padding:60px 0}
  .dcol:nth-child(4){display:none}
  .lb-img{aspect-ratio:16/10;max-height:min(38vh,340px)}
}
@media(max-width:768px){
  body{font-size:1rem}
  .wrap,.nav-inner{padding:0 20px}
  .nav-links,.nav-actions .btn.nav-login{display:none}
  .nav-burger{display:flex}.msheet{display:flex}
  .nav-logo img{height:60px}
  #nav.solid .nav-logo img{height:56px}
  .foot-main{grid-template-columns:1fr 1fr;gap:26px}
  .dcol:nth-child(3){display:none}
  .lb-info{padding:28px 24px}
  .hero-sub{font-size:1.45rem}
  .drift-copy{padding:104px 20px 92px}
}
@media(max-width:560px){.gal,.artists,.nums{grid-template-columns:1fr}.piece-buy{transform:translateY(0)}}

/* HOUSE LINE — DRXP's own pieces. Not a partner panel: one piece, shown big. */
.house{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(18px,3vw,44px);align-items:center;border:2px solid var(--line);background:linear-gradient(140deg,var(--panel),var(--bg2));padding:clamp(16px,2.4vw,30px)}
.house-art{display:block;overflow:hidden;background:var(--bg);border:2px solid var(--line)}
.house-art img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transform:scale(1.01);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.house-art:hover img{transform:scale(1.06)}
.house-eyebrow{font-family:var(--mark);font-size:1.25rem;color:var(--ylw);opacity:.85;margin-bottom:6px}
.house-name{font-family:var(--head);font-size:clamp(2rem,4.2vw,3.4rem);line-height:.95;letter-spacing:.01em}
.house-price{font-family:var(--head);font-size:1.5rem;color:var(--acc);margin-top:8px}
.house-story{margin-top:14px;max-width:46ch;color:var(--tx2);line-height:1.75}
.house-do{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.house-more{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.house-more a{display:block;width:74px;height:74px;border:2px solid var(--line);background:var(--bg);overflow:hidden}
.house-more a:hover{border-color:var(--acc)}
.house-more img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.house{grid-template-columns:1fr}.house-do .btn{flex:1;text-align:center}}

/* ---------------------------------------------------------------------------
   HOMEPAGE BACKDROP — grain, and a light that follows the cursor.
   Two strengths: the grain at a half and the spotlight at eight tenths. They
   are the two knobs; everything else is worked out from them, so "a bit more
   grain" is one number.
--------------------------------------------------------------------------- */
.hbg{--grain:.5;--spot:.8;--mx:50%;--my:38%;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:layout paint}
.hbg span{position:absolute;display:block;inset:0}

/* Film grain: one tiled 200px tile of fractal noise, drawn once and never
   touched again. No blend mode — the whole layer sits behind the page, so the
   grain only ever falls on the black, and a blend against near-black cancels
   itself out (overlay did exactly that, and the texture never arrived). */
.hbg-grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:calc(.45 * var(--grain))}

/* A glow in two far corners, so the page is not the same black end to end. */
.hbg-corner{background:radial-gradient(ellipse 60% 50% at 8% 0%,rgba(255,107,53,calc(.16 * var(--grain))),transparent 62%),radial-gradient(ellipse 55% 45% at 100% 88%,rgba(18,94,228,calc(.14 * var(--grain))),transparent 60%)}

/* The light. Nothing until the script says there is a pointer to follow. */
.hbg-spot{opacity:0;transition:opacity .6s ease;background:radial-gradient(760px circle at var(--mx) var(--my),rgba(255,107,53,calc(.16 * var(--spot))),rgba(255,107,53,calc(.05 * var(--spot))) 38%,transparent 68%)}
.hbg.is-lit .hbg-spot{opacity:1}

/* ---------------- How it works: pick your path (views/home.php) ----------
   Three ways in, one tab each, in their own colour: Shop (orange), Hire
   (Alley gold), Join (green). The steps of the open path are joined by a
   line that draws itself left to right with a piece riding along it, and
   the steps pop in one after another; home.js rotates the tabs (the thin
   bar under the active tab is its timer) until someone picks one. Without
   the script (no .hw-js) every path shows, one under another. */
.hw { --hw: var(--acc); }
.hw-head { align-items: flex-end; }
.hw-lede { margin: 0; max-width: 40ch; color: var(--tx2); font-size: 1.05rem; line-height: 1.6; }
.hw-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 26px; }
.hw-tab { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 14px; overflow: hidden; border: 2px solid var(--line2); background: var(--panel); color: var(--tx2);
  font-family: var(--head); font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.hw-tab:hover { color: var(--tx); transform: translateY(-2px); }
.hw-tab-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--line2); color: var(--tx); font-size: .95rem; transition: background-color .2s, color .2s; }
.hw-tab--shop { --c: var(--acc); }
.hw-tab--hire { --c: #E8C15A; }
.hw-tab--join { --c: var(--grn); }
.hw-tab[aria-selected="true"] { color: var(--tx); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.hw-tab[aria-selected="true"] .hw-tab-n { background: var(--c); color: #0a0a0a; }
.hw-tab-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--c); }
.hw.is-auto .hw-tab[aria-selected="true"] .hw-tab-timer { animation: hwTimer var(--hw-dwell, 7s) linear forwards; }
@keyframes hwTimer { to { width: 100%; } }
.hw-tab:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }

.hw-path { position: relative; padding: 34px 34px 30px; border: 2px solid var(--line); background: radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%), var(--bg); }
.hw-path + .hw-path { margin-top: 18px; }
.hw-path--shop { --c: var(--acc); }
.hw-path--hire { --c: #E8C15A; }
.hw-path--join { --c: var(--grn); }
.hw-js .hw-stage { display: grid; }
.hw-js .hw-path { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; }
.hw-js .hw-path.is-on { visibility: visible; opacity: 1; animation: hwIn .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hwIn { from { opacity: 0; transform: translateY(14px); } }
.hw-title { margin: 0 0 30px; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.05; }
.hw-title em { font-style: normal; color: var(--c); }

.hw-track { position: relative; }
.hw-steps { position: relative; display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; }
/* The line through the icons, drawing itself; the piece riding it. */
.hw-line { position: absolute; left: 32px; right: 32px; top: 31px; height: 4px; border-radius: 4px; background: var(--line2); overflow: visible; }
.hw-line::before { content: ''; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); transform-origin: left; transform: scaleX(0); }
.hw-path.is-on .hw-line::before { animation: hwDraw 1.4s .2s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes hwDraw { to { transform: scaleX(1); } }
.hw-runner { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 3px var(--c), 0 0 18px var(--c); opacity: 0; }
.hw-path.is-on .hw-runner { animation: hwRun 3.2s 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hwRun { 0% { left: 0; opacity: 0; transform: rotate(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: rotate(360deg); } }

.hw-step { position: relative; opacity: 1; }
.hw-path.is-on .hw-step { animation: hwPop .6s calc(.25s + var(--i) * .32s) cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes hwPop { from { opacity: 0; transform: translateY(18px) scale(.9); } }
.hw-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 18px; border-radius: 18px; border: 2px solid var(--c); background: var(--panel); color: var(--c);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c) 70%, transparent); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, color .2s; }
.hw-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hw-ico b { position: absolute; top: -10px; right: -12px; padding: 2px 7px; background: var(--c); color: #0a0a0a; font-family: var(--head); font-weight: 400; font-size: .85rem; letter-spacing: .04em; }
.hw-step:hover .hw-ico { transform: translateY(-4px) rotate(-6deg) scale(1.06); background: var(--c); color: #0a0a0a; }
.hw-step strong { display: block; margin-bottom: 8px; font-family: var(--head); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; color: var(--tx); }
.hw-step p { margin: 0; color: var(--tx2); font-size: .98rem; line-height: 1.65; }
.hw-do { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hw-path--hire .hw-cta:not(.hw-cta--2) { background: linear-gradient(115deg, #8C6418 0%, #E8C15A 30%, #FFF1B8 48%, #D6A73E 66%, #B8862A 100%); color: #1a1205; border-color: #E8C15A; }
.hw-path--join .hw-cta:not(.hw-cta--2) { background: var(--grn); color: #0a0a0a; border-color: var(--grn); }

@media (max-width: 860px) {
  .hw-path { padding: 26px 20px; }
  .hw-steps { grid-template-columns: 1fr; gap: 22px; padding-left: 0; }
  .hw-line { left: 31px; right: auto; top: 32px; bottom: 32px; width: 4px; height: auto; }
  .hw-line::before { transform-origin: top; transform: scaleY(0); }
  .hw-path.is-on .hw-line::before { animation-name: hwDrawDown; }
  @keyframes hwDrawDown { to { transform: scaleY(1); } }
  .hw-runner { left: 50% !important; top: 0; margin: -8px 0 0 -8px; }
  .hw-path.is-on .hw-runner { animation-name: hwRunDown; }
  @keyframes hwRunDown { 0% { top: 0; opacity: 0; } 8%, 92% { opacity: 1; } 100% { top: 100%; opacity: 0; transform: rotate(360deg); } }
  .hw-step { display: grid; grid-template-columns: 66px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .hw-ico { grid-row: span 2; margin-bottom: 0; }
  .hw-tab { flex: 1 1 auto; justify-content: center; font-size: 1rem; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-path.is-on .hw-step, .hw-js .hw-path.is-on { animation: none; }
  .hw-path.is-on .hw-line::before { animation: none; transform: none; }
  .hw-runner { display: none; }
}
.perf-lite .hw-runner { display: none; }

/* ---------------- Sell band: one glowing glass panel (views/home.php) ------
   A conic border of the site's three colours turns slowly round the panel;
   two soft glows drift behind it. Right side: three real pieces fanned like
   cards (they spread on hover) and the numbers as glass chips around them,
   counting up when they arrive (home.js). */
@property --sl-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sl { position: relative; border: 0; background: transparent; padding: 70px 0; overflow: hidden; }
.sl-panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 28px;
  background: linear-gradient(160deg, rgba(28, 26, 24, .82), rgba(12, 12, 12, .9)); backdrop-filter: blur(14px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sl-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--sl-a), var(--acc), #E8C15A, var(--grn), rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .08) 70%, var(--acc));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: slSpin 9s linear infinite; }
@keyframes slSpin { to { --sl-a: 360deg; } }
.sl-glow { position: absolute; z-index: -2; width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.sl-glow--a { left: -8%; top: -30%; background: var(--acc); animation: slDrift 14s ease-in-out infinite alternate; }
.sl-glow--b { right: -10%; bottom: -36%; background: var(--grn); opacity: .3; animation: slDrift 17s ease-in-out infinite alternate-reverse; }
@keyframes slDrift { to { transform: translate(12%, 10%) scale(1.15); } }

.sl .mark { margin: 0; }
.sl h2 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); margin: 14px 0 18px; line-height: .95; }
.sl h2 em { font-style: normal; color: transparent; background: linear-gradient(100deg, var(--acc) 0%, #FFB27A 30%, #fff 42%, #E8C15A 55%, var(--acc) 80%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; animation: slShimmer 6s ease-in-out infinite; }
@keyframes slShimmer { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.sl p { color: var(--tx2); font-size: 1.1rem; line-height: 1.7; max-width: 480px; margin: 0 0 28px; }
.sl-do { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sl-btn-art, .hw-path--hire .hw-cta:not(.hw-cta--2) { background: linear-gradient(115deg, #8C6418 0%, #E8C15A 30%, #FFF1B8 48%, #D6A73E 66%, #B8862A 100%); color: #1a1205; border-color: #E8C15A; }
/* On hover the gold deepens and the words turn white, so they never sink into the shine. */
.sl-btn-art:hover, .sl-btn-art:focus-visible, .hw-path--hire .hw-cta:not(.hw-cta--2):hover, .hw-path--hire .hw-cta:not(.hw-cta--2):focus-visible {
  background: linear-gradient(115deg, #5E410C 0%, #9C7019 40%, #B8862A 70%, #6E4C0E 100%); color: #fff; border-color: #E8C15A; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: 0 0 22px rgba(232, 193, 90, .45); }
.sl-more { color: var(--tx2); font-weight: 800; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--line2); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.sl-more:hover { color: var(--grn); border-color: var(--grn); }

/* The fanned pieces. */
.sl-show { position: relative; min-height: 420px; }
.sl-stack { position: absolute; left: 50%; top: 50%; width: min(54%, 250px); aspect-ratio: 4 / 5; transform: translate(-50%, -50%); }
.sl-card { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .12); background: #1a1a1a; text-decoration: none;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .85); transition: transform .5s cubic-bezier(.2, 1.2, .4, 1); animation: slFloat 6s ease-in-out infinite; }
.sl-card img { width: 100%; height: 100%; object-fit: cover; }
.sl-card span { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: var(--tx); }
.sl-card b { font-family: var(--head); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
.sl-card small { color: var(--tx2); font-size: .78rem; font-weight: 700; }
.sl-card--0 { z-index: 3; --r: -3deg; }
.sl-card--1 { z-index: 2; --r: 9deg; transform: translate(26%, 4%) rotate(9deg); animation-delay: -2s; }
.sl-card--2 { z-index: 1; --r: -14deg; transform: translate(-26%, 6%) rotate(-14deg); animation-delay: -4s; }
.sl-card--0 { transform: rotate(-3deg); }
@keyframes slFloat { 50% { translate: 0 -10px; } }
.sl-show:hover .sl-card--1 { transform: translate(52%, 2%) rotate(14deg); }
.sl-show:hover .sl-card--2 { transform: translate(-52%, 4%) rotate(-18deg); }
.sl-show:hover .sl-card--0 { transform: rotate(0) scale(1.04); }

/* The numbers as glass chips around the stack. */
.sl-chips { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sl-chip { position: absolute; display: grid; gap: 2px; max-width: 170px; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(16, 16, 16, .72); backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .9); animation: slBob 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s); }
.sl-chip b { font-family: var(--head); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--acc); }
.sl-chip span { font-size: .78rem; font-weight: 700; line-height: 1.35; color: var(--tx2); }
.sl-chip--0 { left: -4%; top: 0; }
.sl-chip--1 { right: -5%; top: 8%; } .sl-chip--1 b { color: var(--grn); }
.sl-chip--2 { left: -10%; bottom: 30%; } .sl-chip--2 b { color: #E8C15A; }
.sl-chip--3 { right: -4%; bottom: 6%; } .sl-chip--3 b { color: #FF5B6E; }
@keyframes slBob { 50% { transform: translateY(-8px); } }

@media (max-width: 960px) {
  .sl-panel { grid-template-columns: 1fr; }
  .sl-show { min-height: 0; display: grid; gap: 18px; }
  .sl-stack { position: relative; left: auto; top: auto; transform: none; margin: 10px auto 30px; width: min(62%, 240px); }
  .sl-chips { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; pointer-events: auto; }
  .sl-chip { position: static; max-width: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-panel::before, .sl-glow, .sl h2 em, .sl-card, .sl-chip { animation: none; }
}
.perf-lite .sl-panel::before, .perf-lite .sl-glow, .perf-lite .sl-card, .perf-lite .sl-chip { animation: none; }
.perf-lite .sl-panel { backdrop-filter: none; }

/* Phones and tablets ------------------------------------------------------
   The announcement bar: each of its 48 words pulsed on its own GPU layer
   (will-change + its own animation) while the bar itself scrolled — 48
   layers to re-composite every frame of a scroll on a phone. The bar keeps
   moving; the words just stop pulsing. The other glass on the page (the
   wall hint, the sell chips and panel) goes solid for the same reason as
   the product cards (glass-cards.css). */
@media (hover: none) and (pointer: coarse) {
  .dxt-set span { animation: none; will-change: auto; opacity: 1; }
  .dhint, .wall-toggle, .has-slides .piece-frame::after, .sl-chip, .sl-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dhint { background: rgba(20, 20, 19, .86); }
  .sl-chip { background: rgba(16, 16, 16, .92); }
}