@charset "utf-8";
/* ============================================================
   Vinyl Veranda — "Warm Analog" design system
   espresso base · walnut · brass/amber accent · cream
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,700;1,9..144,900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- tokens ---------- */
:root{
  --ink:#14100E; --ink-2:#1B1512; --panel:#221B16; --panel-2:#2C231C;
  --walnut:#3B2A20; --walnut-lite:#513A2C;
  --brass:#C8862B; --amber:#E8A33D; --amber-soft:#F2C572; --oxblood:#8C3B2E;
  --cream:#F4EDE2; --cream-2:#E4D9C8; --dim:#B7A895; --muted:#8A7A69;
  --line:rgba(244,237,226,.12); --line-2:rgba(244,237,226,.07);
  --ff-display:'Fraunces',ui-serif,Georgia,serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px; --wrap:1240px;
  --sh-1:0 2px 8px rgba(0,0,0,.28);
  --sh-2:0 12px 34px rgba(0,0,0,.42);
  --sh-3:0 26px 70px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(200,134,43,.35),0 10px 40px rgba(200,134,43,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:var(--ff-body);font-size:16px;line-height:1.65;color:var(--cream);
  background:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;font-feature-settings:"kern" 1,"liga" 1}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(900px 600px at 78% -8%,rgba(200,134,43,.16),transparent 60%),
    radial-gradient(760px 520px at 6% 4%,rgba(140,59,46,.12),transparent 62%),
    linear-gradient(180deg,#171210 0%,var(--ink) 42%,#100D0B 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(244,237,226,.018) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.12rem,1.8vw,1.4rem)}
p{color:var(--cream-2)}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sec-head{text-align:center;max-width:730px;margin:0 auto 2.8rem}
.sec-kicker{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ff-mono);
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  padding:.4rem .9rem;border:1px solid rgba(200,134,43,.3);border-radius:99px;
  background:rgba(200,134,43,.07);margin-bottom:1rem}
.sec-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 rgba(232,163,61,.7);animation:pulse 2.4s infinite}
.sec-title{margin-bottom:.7rem}
.sec-title em{font-style:italic;color:var(--brass)}
.sec-sub{color:var(--dim);font-size:1.02rem}
.groove{height:66px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(244,237,226,.05) 3px 4px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.groove::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.5}

/* ============================================================ HEADER */
.dz-header{position:sticky;top:0;z-index:120;background:rgba(20,16,14,.72);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line-2);transition:background .3s,border-color .3s,box-shadow .3s}
.dz-header.is-stuck{background:rgba(16,13,11,.94);border-bottom-color:var(--line);
  box-shadow:0 10px 34px rgba(0,0,0,.44)}
.dz-header::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:var(--sp,0%);
  background:linear-gradient(90deg,var(--brass),var(--amber));
  box-shadow:0 0 12px rgba(232,163,61,.6)}
.dz-header-inner{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:1.5rem;height:72px}
.dz-brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.dz-brand-logo{width:38px;height:38px;transition:transform .6s var(--ease)}
.dz-brand:hover .dz-brand-logo{transform:rotate(-8deg) scale(1.08)}
.dz-brand-text{display:flex;flex-direction:column;line-height:1}
.dz-brand-name{font-family:var(--ff-display);font-weight:900;font-size:1.16rem;
  letter-spacing:-.02em;color:var(--cream)}
.dz-brand-tag{font-family:var(--ff-mono);font-size:.53rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-top:3px}
.dz-nav{margin-left:auto}
.dz-nav-list{display:flex;align-items:center;gap:.25rem}
.dz-nav-link{position:relative;display:block;padding:.55rem .85rem;border-radius:99px;
  font-size:.89rem;font-weight:500;color:var(--dim);transition:color .25s,background .25s}
.dz-nav-link:hover,.dz-nav-link[aria-current=page]{color:var(--cream);background:rgba(244,237,226,.06)}
.dz-nav-link::after{content:"";position:absolute;left:50%;bottom:4px;translate:-50% 0;width:0;
  height:2px;border-radius:2px;background:var(--brass);transition:width .3s var(--ease)}
.dz-nav-link:hover::after,.dz-nav-link[aria-current=page]::after{width:16px}
.dz-nav-item{position:relative}
.dz-nav-item.has-sub>.dz-nav-link::before{content:"";display:inline-block;width:5px;height:5px;
  margin-right:.45rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  rotate:45deg;translate:0 -2px;transition:rotate .3s}
.dz-nav-item.has-sub:hover>.dz-nav-link::before{rotate:225deg;translate:0 1px}
.dz-nav-sub{position:absolute;z-index:10;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:250px;
  padding:.5rem;border-radius:var(--r);background:rgba(34,27,22,.97);backdrop-filter:blur(18px);
  border:1px solid var(--line);box-shadow:var(--sh-3);opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:opacity .22s,transform .22s var(--ease),visibility .22s}
.dz-nav-item.has-sub:hover .dz-nav-sub,.dz-nav-item.has-sub:focus-within .dz-nav-sub{
  opacity:1;visibility:visible;transform:translateY(0)}
.dz-nav-sub::before{content:"";position:absolute;top:-5px;left:50%;translate:-50% 0;rotate:45deg;
  width:10px;height:10px;background:rgba(34,27,22,.97);border-left:1px solid var(--line);
  border-top:1px solid var(--line)}
.dz-nav-sub a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.58rem .8rem;border-radius:9px;font-size:.85rem;color:var(--dim);
  transition:background .2s,color .2s,padding-left .2s}
.dz-nav-sub a:hover{background:rgba(200,134,43,.13);color:var(--cream);padding-left:1.05rem}
.dz-nav-sub .n{font-family:var(--ff-mono);font-size:.68rem;color:var(--brass)}
.dz-nav-cta{display:inline-flex;align-items:center;gap:.45rem;padding:.58rem 1.05rem;
  border-radius:99px;font-size:.85rem;font-weight:600;color:var(--ink);
  background:linear-gradient(135deg,var(--amber),var(--brass));
  box-shadow:0 6px 20px rgba(200,134,43,.32);transition:transform .25s var(--ease),box-shadow .25s}
.dz-nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,134,43,.5)}
.dz-nav-toggle-input{display:none}
.dz-nav-toggle-label{display:none;width:42px;height:42px;border-radius:10px;
  border:1px solid var(--line);cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;margin-left:auto}
.dz-nav-toggle-bar{width:18px;height:2px;background:var(--cream);border-radius:2px;
  transition:.3s var(--ease)}

/* ============================================================ HERO */
.dz-hero{position:relative;z-index:20;padding:clamp(2.6rem,6vw,4.8rem) 0 clamp(2.6rem,5vw,4rem)}
.dz-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.dz-hero-bgimg{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  transform:scale(1.08);filter:saturate(.85)}
.dz-hero-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,12,10,.97) 0%,rgba(16,12,10,.86) 44%,rgba(16,12,10,.4) 100%),
    linear-gradient(0deg,var(--ink) 2%,transparent 45%)}
.dz-hero-inner{position:relative;z-index:2;width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.dz-hero-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .85rem .4rem .45rem;
  border-radius:99px;border:1px solid rgba(200,134,43,.28);background:rgba(200,134,43,.08);
  font-size:.77rem;color:var(--cream-2);margin-bottom:1.3rem}
.dz-hero-badge b{font-family:var(--ff-mono);font-size:.64rem;font-weight:600;letter-spacing:.1em;
  padding:.22rem .5rem;border-radius:99px;background:var(--brass);color:var(--ink)}
.dz-hero-h1{margin-bottom:1.05rem;font-weight:900;letter-spacing:-.035em}
.dz-hero-h1 .l1{display:block;color:var(--cream)}
.dz-hero-h1 .l2{display:block;font-style:italic;position:relative;width:fit-content;
  background:linear-gradient(100deg,var(--amber),var(--brass) 55%,#F6D79B);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.dz-hero-h1 .l2::after{content:"";position:absolute;left:0;bottom:-.04em;height:.07em;width:100%;
  background:linear-gradient(90deg,var(--brass),transparent);border-radius:2px;
  transform-origin:left;animation:swipe 1.1s .6s var(--ease) both}
.dz-hero-sub{font-size:1.04rem;color:var(--dim);max-width:52ch;margin-bottom:1.7rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.9rem;margin-top:1.9rem;padding-top:1.4rem;
  border-top:1px solid var(--line-2)}
.hero-trust-i{display:flex;flex-direction:column;gap:.15rem}
.hero-trust-n{font-family:var(--ff-display);font-size:1.5rem;font-weight:900;color:var(--cream);line-height:1}
.hero-trust-n span{color:var(--brass)}
.hero-trust-l{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ---- search ---- */
.hero-search{position:relative;max-width:530px;margin-bottom:1.4rem;z-index:30}
.hero-search-box{display:flex;align-items:center;gap:.7rem;padding:.5rem .5rem .5rem 1.05rem;
  border-radius:99px;background:rgba(34,27,22,.88);backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:var(--sh-2);transition:border-color .25s,box-shadow .25s}
.hero-search-box:focus-within{border-color:rgba(200,134,43,.6);box-shadow:var(--glow),var(--sh-2)}
.hero-search-ic{width:18px;height:18px;flex-shrink:0;stroke:var(--brass);fill:none;stroke-width:2}
#site-search{flex:1;min-width:0;background:none;border:0;outline:0;font-size:.95rem;
  color:var(--cream);padding:.4rem 0}
#site-search::placeholder{color:var(--muted)}
.hero-search-btn{padding:.55rem 1.15rem;border-radius:99px;font-size:.84rem;font-weight:600;
  color:var(--ink);background:linear-gradient(135deg,var(--amber),var(--brass));flex-shrink:0;
  transition:transform .2s var(--ease),box-shadow .2s}
.hero-search-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(200,134,43,.45)}
.hero-search-clear{display:none;width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:rgba(244,237,226,.1);color:var(--dim);font-size:.95rem;line-height:1}
.hero-search-clear:hover{background:rgba(244,237,226,.2);color:var(--cream)}
.hero-search.has-val .hero-search-clear{display:block}
#site-search::-webkit-search-cancel-button,#site-search::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search-results{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
  max-height:390px;overflow-y:auto;padding:.45rem;border-radius:var(--r-lg);
  background:rgba(28,22,18,.98);backdrop-filter:blur(20px);border:1px solid var(--line);
  box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s,transform .2s var(--ease),visibility .2s}
.search-results.open{opacity:1;visibility:visible;transform:translateY(0)}
.sr-item{display:flex;align-items:center;gap:.85rem;padding:.55rem;border-radius:12px;
  transition:background .18s}
.sr-item:hover,.sr-item.sel{background:rgba(200,134,43,.14)}
.sr-item img{width:46px;height:46px;object-fit:contain;border-radius:8px;
  background:rgba(244,237,226,.05);padding:3px;flex-shrink:0}
.sr-meta{min-width:0;flex:1}
.sr-name{font-size:.86rem;font-weight:600;color:var(--cream);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sr-name mark{background:rgba(232,163,61,.28);color:var(--amber);border-radius:3px;padding:0 1px}
.sr-cat{font-family:var(--ff-mono);font-size:.65rem;color:var(--muted);letter-spacing:.06em}
.sr-rate{font-family:var(--ff-mono);font-size:.78rem;font-weight:600;color:var(--brass);flex-shrink:0}
.sr-empty{padding:1.4rem;text-align:center;color:var(--muted);font-size:.87rem}
.sr-head{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);padding:.5rem .6rem .3rem}
.hero-quick{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted)}
.hero-quick a{padding:.3rem .7rem;border-radius:99px;border:1px solid var(--line);
  color:var(--dim);transition:.22s var(--ease)}
.hero-quick a:hover{border-color:var(--brass);color:var(--amber);background:rgba(200,134,43,.1);
  transform:translateY(-1px)}

/* ---- hero deck visual ---- */
.hero-deck{position:relative;aspect-ratio:1;max-width:430px;margin-inline:auto;width:100%}
.deck-glow{position:absolute;inset:-14%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,rgba(200,134,43,.3),transparent 62%);
  filter:blur(30px);animation:breathe 5s ease-in-out infinite}
.deck-plinth{position:absolute;inset:5%;border-radius:26px;z-index:1;
  background:linear-gradient(145deg,var(--walnut-lite),var(--walnut) 45%,#241810);
  box-shadow:var(--sh-3),inset 0 1px 0 rgba(244,237,226,.14);
  border:1px solid rgba(244,237,226,.08)}
.deck-plinth::after{content:"";position:absolute;inset:0;border-radius:26px;opacity:.5;
  background:repeating-linear-gradient(92deg,transparent 0 6px,rgba(0,0,0,.14) 6px 7px)}
.deck-record{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:72%;aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#0B0908 0 2px,#171310 2px 3.4px),
    radial-gradient(circle at 50% 50%,#141110 0 30%,#0A0807 100%);
  box-shadow:0 18px 46px rgba(0,0,0,.6),inset 0 0 60px rgba(0,0,0,.7);
  animation:spin 3.6s linear infinite}
.deck-record::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(244,237,226,.14) 26deg,transparent 62deg,transparent 180deg,rgba(200,134,43,.1) 210deg,transparent 250deg)}
.deck-record::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:33%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--amber),var(--brass) 70%,#8A5B1C);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.deck-spindle{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;
  width:2.6%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,#E9E2D6,#9A9186);box-shadow:0 0 8px rgba(0,0,0,.7)}
.deck-arm{position:absolute;right:9%;top:11%;width:46%;height:46%;z-index:5;
  transform-origin:92% 8%;animation:armdrop 2.4s 1s var(--ease) both}
.deck-arm-base{position:absolute;right:0;top:0;width:22%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(145deg,#D8D0C4,#8E8478);box-shadow:var(--sh-1)}
.deck-arm-tube{position:absolute;right:9%;top:9%;width:7px;height:88%;border-radius:6px;
  transform-origin:top center;rotate:34deg;
  background:linear-gradient(180deg,#E4DCD0,#9C9286);box-shadow:0 3px 10px rgba(0,0,0,.6)}
.deck-arm-head{position:absolute;bottom:-9px;left:50%;translate:-50% 0;width:17px;height:15px;
  border-radius:3px;background:linear-gradient(145deg,var(--amber),var(--brass));box-shadow:var(--sh-1)}
.deck-chip{position:absolute;z-index:6;display:flex;align-items:center;gap:.55rem;
  padding:.5rem .85rem;border-radius:99px;background:rgba(28,22,18,.92);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--sh-2);font-size:.75rem;font-weight:600;white-space:nowrap}
.deck-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 rgba(232,163,61,.7);animation:pulse 2.2s infinite}
.deck-chip-1{top:4%;left:-5%;animation:float 6s ease-in-out infinite}
.deck-chip-2{bottom:16%;right:-7%;animation:float 6s 1.6s ease-in-out infinite}
.deck-chip-3{bottom:-1%;left:6%;animation:float 6s 3.2s ease-in-out infinite}
.eq{display:flex;align-items:flex-end;gap:3px;height:14px}
.eq i{width:3px;background:var(--brass);border-radius:2px;animation:eqb .9s ease-in-out infinite;
  transform-origin:bottom}
.eq i:nth-child(1){height:40%;animation-delay:0s}
.eq i:nth-child(2){height:80%;animation-delay:.15s}
.eq i:nth-child(3){height:55%;animation-delay:.3s}
.eq i:nth-child(4){height:95%;animation-delay:.45s}
.eq i:nth-child(5){height:65%;animation-delay:.6s}

/* ============================================================ AFF DISCLOSURE */
.aff-disc{display:flex;align-items:center;gap:.7rem;width:min(100% - 2.5rem,var(--wrap));
  margin:0 auto;padding:.72rem 1.1rem;border-radius:var(--r);
  background:rgba(200,134,43,.07);border:1px solid rgba(200,134,43,.18);
  font-size:.78rem;color:var(--dim)}
.aff-ic{color:var(--brass);flex-shrink:0;font-size:.95rem}

/* ============================================================ EDITOR'S PICKS */
.dz-editors-pick{padding:clamp(3.2rem,6vw,5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.picks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:end}
.pick{position:relative;display:flex;flex-direction:column;border-radius:var(--r-xl);
  overflow:hidden;background:linear-gradient(170deg,var(--panel-2),var(--panel) 60%,var(--ink-2));
  border:1px solid var(--line);box-shadow:var(--sh-2);
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.pick::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;opacity:0;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);transition:opacity .4s}
.pick:hover{transform:translateY(-10px);box-shadow:var(--sh-3);border-color:rgba(200,134,43,.4)}
.pick:hover::before{opacity:1}
.pick--1{order:2;background:linear-gradient(170deg,#3A2A1C,var(--panel) 55%,var(--ink-2));
  border-color:rgba(200,134,43,.42);
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(200,134,43,.2)}
.pick--2{order:1}
.pick--3{order:3}
@media (min-width:861px){
  .pick--1{transform:scale(1.045);z-index:2}
  .pick--1:hover{transform:scale(1.045) translateY(-10px)}
}
.pick-ribbon{position:absolute;top:1rem;left:1rem;z-index:4;display:inline-flex;align-items:center;
  gap:.4rem;padding:.34rem .7rem;border-radius:99px;font-family:var(--ff-mono);font-size:.58rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:rgba(20,16,14,.8);
  backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--dim)}
.pick--1 .pick-ribbon{background:linear-gradient(135deg,var(--amber),var(--brass));color:var(--ink);
  border-color:transparent;box-shadow:0 6px 18px rgba(200,134,43,.5)}
.pick-medal{position:absolute;top:1rem;right:1rem;z-index:4;width:46px;height:46px;display:grid;
  place-items:center;border-radius:50%;background:rgba(20,16,14,.78);backdrop-filter:blur(8px);
  border:1px solid var(--line);font-family:var(--ff-display);font-weight:900;font-size:1.02rem;
  color:var(--brass)}
.pick--1 .pick-medal{border-color:var(--brass);color:var(--amber);box-shadow:0 0 0 4px rgba(200,134,43,.12)}
.pick-media{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  padding:2.4rem 1.6rem 1.2rem;overflow:hidden;
  background:radial-gradient(circle at 50% 60%,rgba(200,134,43,.13),transparent 66%)}
.pick-media::before{content:"";position:absolute;left:50%;top:52%;translate:-50% -50%;width:56%;
  aspect-ratio:1;border-radius:50%;z-index:0;opacity:0;
  background:repeating-radial-gradient(circle at 50% 50%,#100D0B 0 2px,#1D1815 2px 3.2px);
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .6s var(--ease),opacity .6s}
.pick:hover .pick-media::before{transform:translate(-6%,-50%) rotate(28deg);opacity:1}
.pick-img{position:relative;z-index:1;max-height:200px;width:auto;object-fit:contain;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.55));transition:transform .55s var(--ease)}
.pick:hover .pick-img{transform:translateY(-8px) scale(1.05)}
.pick-body{padding:0 1.6rem 1.6rem;display:flex;flex-direction:column;flex:1}
.pick-brand{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.4rem}
.pick-name{font-size:1.14rem;margin-bottom:.6rem;line-height:1.25}
.pick-why{font-size:.84rem;color:var(--dim);margin-bottom:1rem}
.vu{margin-bottom:1rem}
.vu-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.vu-label{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.vu-val{font-family:var(--ff-display);font-size:1.45rem;font-weight:900;color:var(--amber);line-height:1}
.vu-val small{font-size:.68rem;color:var(--muted);font-weight:600}
.vu-track{height:5px;border-radius:99px;background:rgba(244,237,226,.09);overflow:hidden}
.vu-fill{height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--oxblood),var(--brass) 45%,var(--amber));
  box-shadow:0 0 12px rgba(232,163,61,.55);transition:width 1.3s var(--ease)}
.pick-feats{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem;flex:1}
.pick-feats li{display:flex;gap:.5rem;font-size:.79rem;color:var(--dim)}
.pick-feats li::before{content:"\25B8";color:var(--brass);flex-shrink:0}
.pick-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.2rem;
  border-radius:99px;font-size:.85rem;font-weight:600;border:1px solid rgba(200,134,43,.4);
  color:var(--amber);transition:.3s var(--ease)}
.pick-cta:hover{background:var(--brass);color:var(--ink);border-color:var(--brass);gap:.8rem}
.pick--1 .pick-cta{background:linear-gradient(135deg,var(--amber),var(--brass));color:var(--ink);
  border-color:transparent;box-shadow:0 8px 24px rgba(200,134,43,.35)}
.pick--1 .pick-cta:hover{box-shadow:0 12px 32px rgba(200,134,43,.6)}
.pick-link{position:absolute;inset:0;z-index:5}

/* ============================================================ MARQUEE */
.brand-cloud-section{padding:1.2rem 0 2.6rem}
.brand-cloud-label{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:1rem}
.marquee{position:relative;overflow:hidden;padding:1rem 0;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{font-family:var(--ff-display);font-size:1.12rem;font-weight:700;color:var(--muted);
  white-space:nowrap;letter-spacing:-.01em;transition:color .25s;cursor:pointer;background:none;border:0}
.marquee-item:hover{color:var(--amber)}

/* ============================================================ ANIMATIONS */
@keyframes spin{to{rotate:360deg}}
@keyframes armdrop{0%{rotate:-17deg}55%{rotate:2deg}75%{rotate:-1deg}100%{rotate:0deg}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,163,61,.65)}70%{box-shadow:0 0 0 9px rgba(232,163,61,0)}100%{box-shadow:0 0 0 0 rgba(232,163,61,0)}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes eqb{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes swipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* reveal-on-scroll: only hide when JS is present, so no-JS still sees everything */
html.js [data-rv]{opacity:0;transform:translateY(28px)}
html.js [data-rv]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-rv].rv-in{opacity:1;transform:none}
html.js [data-rv=zoom]{transform:scale(.94)}
html.js [data-rv=zoom].rv-in{transform:none}
html.js [data-rv=left]{transform:translateX(-32px)}
html.js [data-rv=left].rv-in{transform:none}
html.js [data-rv=right]{transform:translateX(32px)}
html.js [data-rv=right].rv-in{transform:none}
html.js [data-rv=tilt]{transform:perspective(900px) rotateX(9deg) translateY(28px);transform-origin:top}
html.js [data-rv=tilt].rv-in{transform:none}

/* ============================================================ LISTING LAYOUT */
.dz-listing{padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,4.5rem)}
.content-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(1.5rem,2.5vw,2.4rem);align-items:start}
.content-with-sidebar>aside{align-self:stretch}

/* ---- filter bar ---- */
.filter-panel{position:relative;padding:1.2rem;margin-bottom:1.6rem;border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  box-shadow:var(--sh-1)}
.filter-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.filter-row+.filter-row{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line-2)}
.filter-legend{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-right:.3rem;flex-shrink:0}
/* category pills */
.cat-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.cat-tag{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .85rem;border-radius:99px;
  font-size:.82rem;font-weight:500;color:var(--dim);cursor:pointer;
  border:1px solid var(--line);background:rgba(244,237,226,.03);
  transition:.25s var(--ease)}
.cat-tag .n{font-family:var(--ff-mono);font-size:.64rem;padding:.1rem .38rem;border-radius:99px;
  background:rgba(244,237,226,.08);color:var(--muted);transition:.25s}
.cat-tag:hover{border-color:rgba(200,134,43,.5);color:var(--cream);transform:translateY(-2px)}
.cat-tag.active{background:linear-gradient(135deg,var(--amber),var(--brass));color:var(--ink);
  border-color:transparent;font-weight:600;box-shadow:0 6px 18px rgba(200,134,43,.35)}
.cat-tag.active .n{background:rgba(20,16,14,.24);color:var(--ink)}
/* brand pills */
.brand-cloud{display:flex;flex-wrap:wrap;gap:.4rem}
.brand-tag{padding:.36rem .72rem;border-radius:99px;font-size:.76rem;color:var(--muted);
  cursor:pointer;border:1px solid var(--line-2);background:rgba(244,237,226,.02);transition:.22s var(--ease)}
.brand-tag:hover{border-color:rgba(200,134,43,.45);color:var(--cream)}
.brand-tag.active{background:rgba(200,134,43,.18);border-color:var(--brass);color:var(--amber);font-weight:600}
/* selects */
.filter-select{appearance:none;padding:.5rem 2.1rem .5rem .85rem;border-radius:99px;
  font-size:.8rem;color:var(--cream);cursor:pointer;
  border:1px solid var(--line);background:rgba(244,237,226,.04);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23C8862B' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:10px;
  transition:border-color .22s}
.filter-select:hover{border-color:rgba(200,134,43,.5)}
.filter-select option{background:var(--panel);color:var(--cream)}
.filter-reset{padding:.5rem .9rem;border-radius:99px;font-size:.78rem;font-weight:500;
  color:var(--muted);border:1px solid var(--line-2);transition:.22s var(--ease)}
.filter-reset:hover{border-color:var(--oxblood);color:#E9A08F;background:rgba(140,59,46,.14)}
.filter-results{margin-left:auto;font-family:var(--ff-mono);font-size:.74rem;color:var(--brass);
  white-space:nowrap}
.filter-results b{color:var(--amber)}

/* ---- product grid ---- */
.pg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.dz-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);
  overflow:hidden;background:linear-gradient(170deg,var(--panel-2),var(--panel) 62%,var(--ink-2));
  border:1px solid var(--line-2);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.dz-card::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(244,237,226,.06)}
.dz-card:hover{transform:translateY(-7px);box-shadow:var(--sh-2);border-color:rgba(200,134,43,.38)}
.dz-card-media{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:1.15rem;
  overflow:hidden;background:radial-gradient(circle at 50% 55%,rgba(200,134,43,.09),transparent 68%)}
/* record peeks out on hover */
.dz-card-media::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:58%;
  aspect-ratio:1;border-radius:50%;z-index:0;opacity:0;
  background:repeating-radial-gradient(circle at 50% 50%,#0E0B0A 0 2px,#1B1613 2px 3.2px);
  transition:transform .55s var(--ease),opacity .45s}
.dz-card:hover .dz-card-media::before{transform:translate(-8%,-50%) rotate(22deg);opacity:1}
.dz-card-img{position:relative;z-index:1;max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.45));transition:transform .5s var(--ease)}
.dz-card:hover .dz-card-img{transform:scale(1.07) translateY(-4px)}
.dz-card-rate{position:absolute;top:.7rem;right:.7rem;z-index:2;display:flex;align-items:center;
  gap:.25rem;padding:.24rem .55rem;border-radius:99px;font-family:var(--ff-mono);font-size:.72rem;
  font-weight:600;color:var(--amber);background:rgba(20,16,14,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(200,134,43,.3)}
.dz-card-rate::before{content:"\2605";font-size:.66rem}
.dz-card-cat{position:absolute;top:.7rem;left:.7rem;z-index:2;padding:.24rem .55rem;
  border-radius:99px;font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);background:rgba(20,16,14,.75);backdrop-filter:blur(8px);
  border:1px solid var(--line-2)}
.dz-card-body{padding:.1rem 1rem 1rem;display:flex;flex-direction:column;flex:1}
.dz-card-brand{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin-bottom:.3rem}
.dz-card-title{font-size:.96rem;line-height:1.3;margin-bottom:.7rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s}
.dz-card:hover .dz-card-title{color:var(--amber)}
/* key features */
.dz-card-feats{display:flex;flex-direction:column;gap:.28rem;margin-bottom:.85rem;flex:1}
.dz-card-feats li{position:relative;padding-left:.95rem;font-size:.735rem;line-height:1.4;
  color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dz-card-feats li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:var(--brass);opacity:.75}
.dz-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding-top:.7rem;border-top:1px solid var(--line-2)}
.dz-card-spec{font-family:var(--ff-mono);font-size:.62rem;color:var(--muted);letter-spacing:.04em}
.dz-card-go{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;
  color:var(--brass);transition:gap .25s var(--ease),color .25s}
.dz-card:hover .dz-card-go{gap:.55rem;color:var(--amber)}
.pg-item[hidden]{display:none!important}

/* no results */
.no-results{grid-column:1/-1;padding:3.5rem 1rem;text-align:center;border-radius:var(--r-lg);
  border:1px dashed var(--line);background:rgba(244,237,226,.02)}
.no-results h3{color:var(--cream);margin-bottom:.5rem}
.no-results p{color:var(--muted);font-size:.9rem;margin-bottom:1.2rem}

/* ---- pagination ---- */
#pagination{display:flex;justify-content:center;align-items:center;gap:.4rem;
  margin-top:2.4rem;flex-wrap:wrap}
.page-btn{min-width:40px;height:40px;padding:0 .7rem;border-radius:11px;
  font-family:var(--ff-mono);font-size:.82rem;font-weight:500;color:var(--dim);
  border:1px solid var(--line);background:rgba(244,237,226,.03);transition:.22s var(--ease)}
.page-btn:hover:not(.disabled){border-color:var(--brass);color:var(--amber);
  background:rgba(200,134,43,.12);transform:translateY(-2px)}
.page-btn.active{background:linear-gradient(135deg,var(--amber),var(--brass));color:var(--ink);
  border-color:transparent;font-weight:700;box-shadow:0 6px 18px rgba(200,134,43,.35)}
.page-btn.disabled{opacity:.32;cursor:not-allowed}
.page-nav{font-family:var(--ff-body);font-size:.78rem}

/* ============================================================ SIDEBAR: TOP 10 */
.dz-sticky{position:sticky;top:88px}
.dz-top10{border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(170deg,var(--panel-2),var(--panel) 70%,var(--ink-2));
  border:1px solid var(--line);box-shadow:var(--sh-2)}
.dz-top10-head{position:relative;padding:1.15rem 1.15rem 1rem;border-bottom:1px solid var(--line-2);
  background:radial-gradient(circle at 88% 0%,rgba(200,134,43,.2),transparent 60%)}
.dz-top10-kicker{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:.25rem}
.dz-top10-title{font-size:1.32rem;line-height:1.1}
.dz-top10-title em{font-style:italic;color:var(--brass)}
.dz-top10-sub{font-size:.72rem;color:var(--muted);margin-top:.3rem}
.dz-top10-list{padding:.5rem}
.dz-top10-item{border-radius:12px;transition:background .22s}
.dz-top10-item:hover{background:rgba(200,134,43,.1)}
.dz-top10-link{display:flex;align-items:center;gap:.7rem;padding:.6rem .65rem}
.dz-top10-rank{flex-shrink:0;width:24px;font-family:var(--ff-display);font-size:1.02rem;
  font-weight:900;color:var(--muted);text-align:center;transition:color .22s}
.dz-top10-item:hover .dz-top10-rank{color:var(--brass)}
.dz-top10-item:nth-child(1) .dz-top10-rank{color:var(--amber)}
.dz-top10-item:nth-child(2) .dz-top10-rank,.dz-top10-item:nth-child(3) .dz-top10-rank{color:var(--brass)}
.dz-top10-thumb{flex-shrink:0;width:40px;height:40px;border-radius:9px;object-fit:contain;padding:3px;
  background:rgba(244,237,226,.05);transition:transform .3s var(--ease)}
.dz-top10-item:hover .dz-top10-thumb{transform:scale(1.1) rotate(-4deg)}
.dz-top10-meta{min-width:0;flex:1}
.dz-top10-name{font-size:.79rem;font-weight:500;color:var(--cream-2);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .22s}
.dz-top10-item:hover .dz-top10-name{color:var(--amber)}
.dz-top10-cat{font-family:var(--ff-mono);font-size:.58rem;color:var(--muted);margin-top:.1rem}
.dz-top10-score{flex-shrink:0;font-family:var(--ff-mono);font-size:.76rem;font-weight:600;
  color:var(--brass)}
.dz-top10-foot{padding:.85rem 1.15rem;border-top:1px solid var(--line-2);text-align:center}
.dz-top10-foot a{font-size:.76rem;font-weight:600;color:var(--brass);
  display:inline-flex;align-items:center;gap:.35rem;transition:gap .25s var(--ease),color .25s}
.dz-top10-foot a:hover{gap:.6rem;color:var(--amber)}
/* sidebar ad */
.side-ad{margin-top:1.2rem}

/* ============================================================ COMPARE TABLE */
.dz-compare{padding:clamp(3rem,5vw,4.5rem) 0}
.cmp-shell{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(170deg,var(--panel-2),var(--panel) 65%,var(--ink-2));
  box-shadow:var(--sh-2)}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cmp-scroll::-webkit-scrollbar{height:8px}
.cmp-scroll::-webkit-scrollbar-thumb{background:rgba(200,134,43,.55);border-radius:99px}
.cmp-scroll::-webkit-scrollbar-track{background:rgba(244,237,226,.06)}
.cmp-table{min-width:880px}
.cmp-table thead th{position:sticky;top:0;z-index:2;padding:.85rem 1rem;text-align:left;
  font-family:var(--ff-mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  background:rgba(20,16,14,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.cmp-table thead th:first-child{padding-left:1.4rem}
.cmp-table tbody tr{cursor:pointer;transition:background .25s,box-shadow .25s;
  border-bottom:1px solid var(--line-2)}
.cmp-table tbody tr:last-child{border-bottom:0}
.cmp-table tbody tr:hover{background:rgba(200,134,43,.09);
  box-shadow:inset 3px 0 0 var(--brass)}
.cmp-table td{padding:.85rem 1rem;font-size:.84rem;color:var(--cream-2);vertical-align:middle}
.cmp-table td:first-child{padding-left:1.4rem}
.cmp-rank{font-family:var(--ff-display);font-size:1.05rem;font-weight:900;color:var(--brass);width:1%}
.cmp-prod{display:flex;align-items:center;gap:.8rem;min-width:250px}
.cmp-prod img{width:44px;height:44px;object-fit:contain;border-radius:9px;padding:3px;
  background:rgba(244,237,226,.05);flex-shrink:0;transition:transform .3s var(--ease)}
.cmp-table tbody tr:hover .cmp-prod img{transform:scale(1.1) rotate(-4deg)}
.cmp-prod-name{font-weight:600;color:var(--cream);font-size:.87rem;line-height:1.25}
.cmp-prod-brand{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass)}
.cmp-num{font-family:var(--ff-mono);font-size:.82rem;color:var(--cream)}
.cmp-num small{color:var(--muted);font-size:.66rem}
/* mini bar */
.cmp-bar{display:flex;align-items:center;gap:.55rem}
.cmp-bar-track{flex:1;min-width:52px;height:4px;border-radius:99px;background:rgba(244,237,226,.09);
  overflow:hidden}
.cmp-bar-fill{height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--brass),var(--amber));transition:width 1.1s var(--ease)}
.cmp-tick{color:#7FB069;font-weight:700}
.cmp-cross{color:var(--muted);opacity:.5}
.cmp-badge{display:inline-block;padding:.2rem .5rem;border-radius:99px;font-family:var(--ff-mono);
  font-size:.6rem;letter-spacing:.06em;border:1px solid var(--line);color:var(--dim);
  background:rgba(244,237,226,.04);white-space:nowrap}
.cmp-go{color:var(--brass);font-size:1rem;transition:transform .25s var(--ease)}
.cmp-table tbody tr:hover .cmp-go{transform:translateX(4px);color:var(--amber)}
.cmp-note{padding:.75rem 1.4rem;font-size:.7rem;color:var(--muted);border-top:1px solid var(--line-2);
  background:rgba(0,0,0,.16)}

/* ============================================================ ANATOMY */
.anatomy{padding:clamp(3.5rem,6vw,5.5rem) 0;position:relative}
.anatomy-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:center}
.anatomy-stage{position:relative;aspect-ratio:1.15;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#2A2019,#14100E 72%);border:1px solid var(--line);
  box-shadow:var(--sh-2)}
.anatomy-stage::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(244,237,226,.022) 22px 23px),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(244,237,226,.022) 22px 23px)}
/* hotspots */
.hs{position:absolute;z-index:5;width:26px;height:26px;translate:-50% -50%;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(20,16,14,.7);border:1.5px solid var(--brass);
  backdrop-filter:blur(4px);transition:.3s var(--ease)}
.hs::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 rgba(232,163,61,.7);animation:pulse 2.4s infinite}
.hs::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(200,134,43,.28)}
.hs:hover,.hs.on{background:var(--brass);transform:scale(1.28);box-shadow:0 0 24px rgba(232,163,61,.7)}
.hs:hover::before,.hs.on::before{background:var(--ink);animation:none}
.hs-1{left:36%;top:50%}   /* platter */
.hs-2{right:16%;top:26%}  /* tonearm */
.hs-3{right:23%;bottom:24%} /* cartridge */
.hs-4{left:16%;bottom:17%}  /* plinth */
.hs-5{left:20%;top:22%}     /* motor */
.hs-6{right:12%;bottom:12%} /* preamp */
/* info panel */
.anatomy-info{display:flex;flex-direction:column;gap:.55rem}
.an-item{border-radius:var(--r);border:1px solid var(--line-2);background:rgba(244,237,226,.025);
  overflow:hidden;transition:border-color .3s,background .3s}
.an-item.on{border-color:rgba(200,134,43,.45);background:rgba(200,134,43,.08)}
.an-btn{display:flex;align-items:center;gap:.85rem;width:100%;padding:.85rem 1rem;text-align:left}
.an-num{flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--ff-mono);font-size:.66rem;font-weight:600;color:var(--brass);
  border:1px solid rgba(200,134,43,.35);background:rgba(200,134,43,.08);transition:.3s}
.an-item.on .an-num{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.an-name{font-family:var(--ff-display);font-size:1rem;font-weight:700;color:var(--cream);flex:1}
.an-chev{color:var(--muted);font-size:.7rem;transition:transform .3s var(--ease)}
.an-item.on .an-chev{transform:rotate(90deg);color:var(--brass)}
.an-panel{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.an-item.on .an-panel{max-height:220px}
.an-panel-in{padding:0 1rem 1rem 3.5rem}
.an-panel-in p{font-size:.85rem;color:var(--dim);margin-bottom:.6rem}
.an-why{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ff-mono);font-size:.63rem;
  letter-spacing:.08em;color:var(--brass);padding:.25rem .55rem;border-radius:99px;
  background:rgba(200,134,43,.1);border:1px solid rgba(200,134,43,.22)}

/* ============================================================ STATS */
.dz-stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-2);border-block:1px solid var(--line-2);margin:0}
.dz-stat-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:clamp(1.6rem,3vw,2.4rem) 1rem;background:var(--ink);position:relative;overflow:hidden;
  transition:background .3s}
.dz-stat-item:hover{background:var(--ink-2)}
.dz-stat-item::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);transition:width .5s var(--ease)}
.dz-stat-item:hover::before{width:70%}
.dz-stat-number{font-family:var(--ff-display);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:900;
  color:var(--cream);line-height:1}
.dz-stat-number span{color:var(--brass)}
.dz-stat-label{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:center}

/* ============================================================ FAQ */
.dz-faq{padding:clamp(3.5rem,6vw,5.5rem) 0}
.faq-list{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:.6rem}
.faq-item{border-radius:var(--r);border:1px solid var(--line-2);background:rgba(244,237,226,.025);
  overflow:hidden;transition:border-color .3s,background .3s}
.faq-item[open]{border-color:rgba(200,134,43,.4);background:rgba(200,134,43,.06)}
.faq-q{display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;cursor:pointer;
  font-family:var(--ff-display);font-size:1rem;font-weight:700;color:var(--cream);
  list-style:none;transition:color .25s}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--amber)}
.faq-ic{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(200,134,43,.35);background:rgba(200,134,43,.08);color:var(--brass);
  font-size:.9rem;line-height:1;transition:transform .35s var(--ease),background .3s,color .3s}
.faq-item[open] .faq-ic{transform:rotate(135deg);background:var(--brass);color:var(--ink)}
.faq-a{padding:0 1.2rem 1.2rem 3.3rem;font-size:.89rem;color:var(--dim);animation:fadeIn .4s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================ FOOTER */
.dz-footer{position:relative;margin-top:clamp(3rem,6vw,5rem);padding:clamp(3rem,5vw,4rem) 0 0;
  background:linear-gradient(180deg,var(--ink-2),#0D0A09);border-top:1px solid var(--line-2)}
.dz-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.55}
.dz-footer-inner{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.5rem,3vw,3rem);
  padding-bottom:2.5rem}
.dz-footer-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.dz-footer-logo{width:40px;height:40px}
.dz-footer-brandname{font-family:var(--ff-display);font-weight:900;font-size:1.2rem;color:var(--cream)}
.dz-footer-tag{font-family:var(--ff-mono);font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin-top:3px}
.dz-footer-desc{font-size:.84rem;color:var(--muted);max-width:38ch;margin-bottom:1.2rem}
.dz-footer-eq{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dz-footer-col h4{font-family:var(--ff-mono);font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);margin-bottom:1rem}
.dz-footer-links{display:flex;flex-direction:column;gap:.5rem}
.dz-footer-link{font-size:.84rem;color:var(--muted);width:fit-content;position:relative;
  transition:color .25s,padding-left .25s}
.dz-footer-link::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:0;height:1px;
  background:var(--brass);transition:width .25s var(--ease)}
.dz-footer-link:hover{color:var(--amber);padding-left:.85rem}
.dz-footer-link:hover::before{width:.6rem}
.dz-footer-note{font-size:.78rem;color:var(--muted);padding:.8rem .9rem;border-radius:var(--r-sm);
  background:rgba(200,134,43,.06);border:1px solid rgba(200,134,43,.16)}
.dz-footer-bottom{border-top:1px solid var(--line-2);background:rgba(0,0,0,.28)}
.dz-footer-bottom-in{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.2rem 0}
.dz-footer-copy{font-size:.76rem;color:var(--muted)}
.dz-footer-mini{display:flex;gap:1.2rem}
.dz-footer-mini a{font-size:.76rem;color:var(--muted);transition:color .25s}
.dz-footer-mini a:hover{color:var(--brass)}

/* ============================================================ ADS */
.ad-placement{margin:1.5rem 0}
.ad-placement-inner{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.ad-unit{min-height:1px}
.side-ad .ad-placement-inner{flex-direction:column;align-items:center}

/* ============================================================ COOKIE BANNER */
#cookie-banner{position:fixed;left:50%;bottom:1.2rem;translate:-50% 0;z-index:200;display:none;
  width:min(100% - 2rem,640px);padding:1.1rem 1.3rem;border-radius:var(--r-lg);
  background:rgba(28,22,18,.97);backdrop-filter:blur(20px);border:1px solid var(--line);
  box-shadow:var(--sh-3);align-items:center;gap:1.2rem;flex-wrap:wrap}
html.cookie-ask #cookie-banner{display:flex;animation:cbIn .5s var(--ease) both}
@keyframes cbIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
#cookie-banner p{flex:1;min-width:220px;font-size:.8rem;color:var(--dim)}
#cookie-banner a{color:var(--brass);text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:flex;gap:.5rem}
.cookie-btns button{padding:.5rem 1rem;border-radius:99px;font-size:.8rem;font-weight:600;
  transition:.22s var(--ease)}
#cookie-accept{color:var(--ink);background:linear-gradient(135deg,var(--amber),var(--brass))}
#cookie-accept:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,134,43,.45)}
#cookie-decline{color:var(--muted);border:1px solid var(--line)}
#cookie-decline:hover{color:var(--cream);border-color:var(--dim)}

/* ============================================================ BREADCRUMB */
.crumbs{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:1.2rem 0;
  font-family:var(--ff-mono);font-size:.68rem;color:var(--muted)}
.crumbs a{color:var(--muted);transition:color .22s}
.crumbs a:hover{color:var(--brass)}
.crumbs .sep{opacity:.4}
.crumbs [aria-current]{color:var(--dim)}

/* ============================================================ PRODUCT PAGE */
.pdp{padding-bottom:clamp(2.5rem,5vw,4rem)}
.pdp-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start}

/* ---- gallery ---- */
.pdp-gallery{position:sticky;top:88px}
.pdp-stage{position:relative;aspect-ratio:1;border-radius:var(--r-xl);overflow:hidden;
  display:grid;place-items:center;padding:2.2rem;
  background:radial-gradient(circle at 50% 55%,rgba(200,134,43,.14),transparent 68%),
    linear-gradient(170deg,var(--panel-2),var(--panel) 70%,var(--ink-2));
  border:1px solid var(--line);box-shadow:var(--sh-2)}
.pdp-stage::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:78%;
  aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(244,237,226,.028) 0 2px,transparent 2px 10px);
  animation:spin 34s linear infinite}
.pdp-stage-img{position:relative;z-index:1;max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.6));transition:opacity .3s,transform .5s var(--ease)}
.pdp-stage:hover .pdp-stage-img{transform:scale(1.04)}
.pdp-stage-badge{position:absolute;top:1rem;left:1rem;z-index:2;padding:.32rem .7rem;border-radius:99px;
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:linear-gradient(135deg,var(--amber),var(--brass));font-weight:600}
.pdp-thumbs{display:flex;gap:.6rem;margin-top:.8rem}
.pdp-thumb{flex:1;aspect-ratio:1;border-radius:var(--r);overflow:hidden;padding:.5rem;
  display:grid;place-items:center;background:rgba(244,237,226,.035);
  border:1px solid var(--line-2);cursor:pointer;transition:.25s var(--ease)}
.pdp-thumb img{max-height:100%;width:auto;object-fit:contain}
.pdp-thumb:hover{border-color:rgba(200,134,43,.5);transform:translateY(-3px)}
.pdp-thumb.on{border-color:var(--brass);background:rgba(200,134,43,.12);
  box-shadow:0 0 0 1px var(--brass)}

/* ---- headline / buybox ---- */
.pdp-head{margin-bottom:1.4rem}
.pdp-brand{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-mono);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  padding:.3rem .7rem;border-radius:99px;border:1px solid rgba(200,134,43,.28);
  background:rgba(200,134,43,.07);margin-bottom:.9rem}
.pdp-title{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:900;letter-spacing:-.03em;
  margin-bottom:.7rem;line-height:1.08}
.pdp-tagline{font-size:.96rem;color:var(--dim);margin-bottom:1.2rem}
.pdp-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.pdp-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border-radius:99px;
  font-family:var(--ff-mono);font-size:.66rem;color:var(--dim);
  border:1px solid var(--line);background:rgba(244,237,226,.035)}
.pdp-chip b{color:var(--cream);font-weight:600}
.pdp-chip.is-on{border-color:rgba(200,134,43,.4);color:var(--amber);background:rgba(200,134,43,.1)}

/* score panel */
.pdp-score{position:relative;display:flex;align-items:center;gap:1.3rem;padding:1.2rem;
  border-radius:var(--r-lg);margin-bottom:1.3rem;overflow:hidden;
  background:linear-gradient(135deg,rgba(200,134,43,.14),rgba(244,237,226,.03));
  border:1px solid rgba(200,134,43,.28)}
.pdp-score::before{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;
  border-radius:50%;background:radial-gradient(circle,rgba(232,163,61,.22),transparent 70%)}
.dial{position:relative;flex-shrink:0;width:92px;height:92px}
.dial svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.dial-track{fill:none;stroke:rgba(244,237,226,.1);stroke-width:6}
.dial-fill{fill:none;stroke:url(#dialgrad);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:100 100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.5s var(--ease)}
.dial-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0}
.dial-value{font-family:var(--ff-display);font-size:1.6rem;font-weight:900;color:var(--cream);line-height:1}
.dial-max{font-family:var(--ff-mono);font-size:.56rem;color:var(--muted)}
.pdp-score-meta{position:relative;z-index:1}
.pdp-score-title{font-family:var(--ff-display);font-size:1.15rem;font-weight:700;color:var(--cream);
  margin-bottom:.25rem}
.pdp-score-stars{display:flex;align-items:center;gap:.3rem;margin-bottom:.4rem}
.pdp-score-stars .s{color:var(--brass);font-size:.85rem}
.pdp-score-stars .s.off{color:rgba(244,237,226,.18)}
.pdp-score-txt{font-size:.79rem;color:var(--dim)}

/* buybox */
.pdp-buy{padding:1.2rem;border-radius:var(--r-lg);margin-bottom:1.3rem;
  background:linear-gradient(170deg,var(--panel-2),var(--panel));border:1px solid var(--line)}
.pdp-buy-trust{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.1rem}
.pdp-buy-trust li{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--dim)}
.pdp-buy-trust li::before{content:"\2713";flex-shrink:0;width:18px;height:18px;display:grid;
  place-items:center;border-radius:50%;font-size:.6rem;font-weight:700;
  background:rgba(200,134,43,.16);color:var(--brass)}
.btn-buy{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  padding:.95rem 1.4rem;border-radius:99px;font-size:.94rem;font-weight:700;color:var(--ink);
  background:linear-gradient(135deg,var(--amber),var(--brass));
  box-shadow:0 10px 30px rgba(200,134,43,.35);position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s}
.btn-buy::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-22deg);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%{left:-60%}45%,100%{left:130%}}
.btn-buy:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(200,134,43,.6)}
.pdp-buy-note{font-size:.68rem;color:var(--muted);text-align:center;margin-top:.7rem}

/* verdict */
.verdict-box{position:relative;padding:1.3rem 1.3rem 1.3rem 1.5rem;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(140,59,46,.14),rgba(244,237,226,.03));
  border:1px solid rgba(200,134,43,.24);overflow:hidden}
.verdict-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--amber),var(--oxblood))}
.verdict-box::after{content:"\201C";position:absolute;right:.6rem;top:-.6rem;
  font-family:var(--ff-display);font-size:5.5rem;color:rgba(200,134,43,.14);line-height:1}
.verdict-label{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-mono);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem}
.verdict-text{position:relative;z-index:1;font-size:.9rem;color:var(--cream-2);line-height:1.7}

/* ---- section blocks ---- */
.pdp-sec{margin-top:clamp(2.5rem,4vw,3.5rem)}
.pdp-sec-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem}
.pdp-sec-ic{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:rgba(200,134,43,.12);border:1px solid rgba(200,134,43,.28);color:var(--brass);
  font-size:.9rem}
.pdp-sec-title{font-size:1.35rem}
.pdp-sec-line{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* specs */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.8rem}
.spec-card{position:relative;padding:1rem 1.1rem;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);
  transition:transform .3s var(--ease),border-color .3s}
.spec-card:hover{transform:translateY(-4px);border-color:rgba(200,134,43,.4)}
.spec-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brass);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.spec-card:hover::before{transform:scaleY(1)}
.spec-k{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem}
.spec-v{font-size:.9rem;font-weight:500;color:var(--cream);line-height:1.4}

/* pros / cons */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pc-card{padding:1.2rem;border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:rgba(244,237,226,.025)}
.pc-card.pros{border-color:rgba(127,176,105,.24);background:rgba(127,176,105,.05)}
.pc-card.cons{border-color:rgba(140,59,46,.28);background:rgba(140,59,46,.05)}
.pc-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;
  font-family:var(--ff-display);font-size:1.05rem;font-weight:700}
.pc-head .ic{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  font-size:.7rem;font-weight:700}
.pros .pc-head{color:#9CC77F}
.pros .ic{background:rgba(127,176,105,.18);color:#9CC77F}
.cons .pc-head{color:#DB9483}
.cons .ic{background:rgba(140,59,46,.24);color:#DB9483}
.pc-list{display:flex;flex-direction:column;gap:.55rem}
.pc-list li{display:flex;gap:.6rem;font-size:.85rem;color:var(--dim);line-height:1.5}
.pros .pc-list li::before{content:"\2713";color:#7FB069;flex-shrink:0;font-weight:700}
.cons .pc-list li::before{content:"\2715";color:#B5654F;flex-shrink:0;font-weight:700}

/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem}
.review{position:relative;padding:1.15rem;border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);
  transition:transform .3s var(--ease),border-color .3s}
.review:hover{transform:translateY(-4px);border-color:rgba(200,134,43,.32)}
.rev-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.rev-av{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--ff-display);font-weight:900;font-size:.85rem;color:var(--ink);
  background:linear-gradient(135deg,var(--amber),var(--brass))}
.rev-who{flex:1;min-width:0}
.rev-name{font-size:.82rem;font-weight:600;color:var(--cream)}
.rev-date{font-family:var(--ff-mono);font-size:.6rem;color:var(--muted)}
.rev-stars{font-size:.7rem;color:var(--brass);letter-spacing:1px}
.rev-title{font-family:var(--ff-display);font-size:.94rem;font-weight:700;color:var(--cream);
  margin-bottom:.4rem}
.rev-text{font-size:.82rem;color:var(--dim);line-height:1.6}

/* related */
.rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}

/* back to top */
#to-top{position:fixed;right:1.4rem;bottom:1.4rem;z-index:110;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;color:var(--brass);
  background:rgba(28,22,18,.9);backdrop-filter:blur(10px);border:1px solid var(--line);
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:.3s var(--ease)}
#to-top.on{opacity:1;visibility:visible;transform:none}
#to-top:hover{background:var(--brass);color:var(--ink);transform:translateY(-3px)}

/* ============================================================ RESPONSIVE */
@media (max-width:1180px){
  .pg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .content-with-sidebar{grid-template-columns:1fr}
  .dz-top10{margin-top:1rem}
  .dz-sticky{position:static}
  .dz-top10-list{display:grid;grid-template-columns:1fr 1fr;gap:.2rem}
}
@media (max-width:960px){
  .dz-hero-inner{grid-template-columns:1fr;text-align:center}
  .dz-hero-sub{margin-inline:auto}
  .hero-search{margin-inline:auto}
  .hero-quick{justify-content:center}
  .hero-trust{justify-content:center}
  .dz-hero-h1 .l2{margin-inline:auto}
  .hero-deck{order:-1;max-width:330px;margin-bottom:1rem}
  .deck-chip-1{left:-2%}
  .deck-chip-2{right:-3%}
  .anatomy-layout{grid-template-columns:1fr}
  .pdp-top{grid-template-columns:1fr}
  .pdp-gallery{position:static}
  .dz-footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .dz-nav-toggle-label{display:flex}
  .dz-nav{position:fixed;top:72px;left:0;right:0;bottom:0;margin:0;z-index:119;
    background:rgba(18,14,12,.985);backdrop-filter:blur(20px);
    padding:1.5rem;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .3s,transform .3s var(--ease),visibility .3s}
  .dz-nav-toggle-input:checked~.dz-nav{opacity:1;visibility:visible;transform:none}
  .dz-nav-toggle-input:checked~.dz-nav-toggle-label .dz-nav-toggle-bar:nth-child(1){
    transform:translateY(7px) rotate(45deg)}
  .dz-nav-toggle-input:checked~.dz-nav-toggle-label .dz-nav-toggle-bar:nth-child(2){opacity:0}
  .dz-nav-toggle-input:checked~.dz-nav-toggle-label .dz-nav-toggle-bar:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)}
  .dz-nav-list{flex-direction:column;align-items:stretch;gap:.2rem}
  .dz-nav-link{padding:.9rem 1rem;font-size:1rem;border-radius:12px;
    border-bottom:1px solid var(--line-2)}
  .dz-nav-link::after{display:none}
  .dz-nav-sub{position:static;translate:none;opacity:1;visibility:inherit;transform:none;
    box-shadow:none;border:0;background:none;padding:.2rem 0 .4rem 1rem;min-width:0;
    display:grid;grid-template-columns:1fr 1fr;gap:.2rem}
  .dz-nav-sub::before{display:none}
  .dz-nav-item.has-sub>.dz-nav-link::before{display:none}
  .dz-nav-cta{justify-content:center;margin-top:.8rem;padding:.85rem}
}
@media (max-width:860px){
  .picks-grid{grid-template-columns:1fr;gap:1.2rem}
  .pick--1{order:-1}
  .pick--2{order:0}
  .pick--3{order:1}
  .dz-stats-strip{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dz-footer-inner{grid-template-columns:1fr;gap:2rem}
  .dz-top10-list{grid-template-columns:1fr}
  .hero-trust{gap:1.2rem}
  .dz-card-feats li:nth-child(3){display:none}
  .filter-results{margin-left:0;width:100%}
}
@media (max-width:480px){
  .dz-card-media{padding:.8rem}
  .dz-card-body{padding:.1rem .75rem .8rem}
  .dz-card-title{font-size:.86rem}
  .pdp-thumbs{gap:.4rem}
  .rev-grid{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr}
  #cookie-banner{bottom:.6rem;padding:.9rem}
  .cookie-btns{width:100%}
  .cookie-btns button{flex:1}
  .dz-footer-bottom-in{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js [data-rv]{opacity:1!important;transform:none!important}
}

/* ============================================================
   PRODUCT PHOTO TILES
   Source photography sits on a light studio backdrop. Rather than cutting
   it out (destructive on these gradients), we place each shot on a warm
   light tile and multiply-blend it — the grey backdrop melts into the tile
   while the product keeps its shadows.
   ============================================================ */
.tile{
  position:relative;z-index:1;display:grid;place-items:center;
  width:100%;height:100%;overflow:hidden;border-radius:var(--r);
  background:linear-gradient(158deg,#FBF9F5 0%,#F2EDE4 46%,#E2DACD 100%);
  box-shadow:inset 0 0 0 1px rgba(20,16,14,.1),0 8px 22px rgba(0,0,0,.36);
}
.tile::after{ /* warm vignette so the tile reads as a lit studio sweep */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 50% 42%,transparent 44%,rgba(59,42,32,.14) 100%);
}
.tile img{mix-blend-mode:multiply;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;filter:none}

/* card media: dark stage + record peeking from behind the tile */
.dz-card-media{padding:.4rem;background:linear-gradient(170deg,#2A2119,#1D1713)}
.dz-card-media::before{width:62%;z-index:0}
.dz-card:hover .dz-card-media::before{transform:translate(24%,-50%) rotate(22deg);opacity:1}
.dz-card .tile{aspect-ratio:1}
.dz-card-img{filter:none!important}
.dz-card:hover .dz-card-img{transform:scale(1.06)}
.dz-card:hover .tile{box-shadow:inset 0 0 0 1px rgba(200,134,43,.5),0 12px 30px rgba(0,0,0,.5)}
.tile{transition:box-shadow .4s var(--ease)}

/* pick media */
.pick-media{padding:2.6rem 1.6rem 1.2rem;background:linear-gradient(170deg,#2E2419,#201913)}
.pick-media::before{width:62%;z-index:0}
.pick:hover .pick-media::before{transform:translate(26%,-50%) rotate(26deg);opacity:1}
.pick-media .tile{aspect-ratio:4/3;border-radius:var(--r-lg)}
.pick-img{max-height:none;filter:none!important}
.pick:hover .pick-img{transform:scale(1.05)}
.pick:hover .tile{box-shadow:inset 0 0 0 1px rgba(200,134,43,.5),0 16px 38px rgba(0,0,0,.5)}

/* pdp stage */
.pdp-stage{padding:0}
.pdp-stage .tile{aspect-ratio:1;border-radius:inherit;background:none;box-shadow:none;width:100%;height:100%}
.pdp-stage .tile::after{display:none}
.pdp-stage .tile img,.pdp-thumb img{mix-blend-mode:normal}
.pdp-stage .tile img,.pdp-stage-img{width:100%;height:100%;max-height:none;object-fit:cover}
.pdp-stage-img{filter:none!important}
.pdp-thumb{background:none;padding:0}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}

/* small thumbs elsewhere */
.dz-top10-thumb,.cmp-prod img,.sr-item img{
  background:linear-gradient(158deg,#FBF9F5,#E4DDD1);mix-blend-mode:normal}
.dz-top10-thumb,.cmp-prod img,.sr-item img{padding:2px}

/* meter fills are spans — blockify so width/height apply */
.vu-fill,.cmp-bar-fill,.vu-track,.cmp-bar-track{display:block}

/* card footer must not wrap the CTA */
.dz-card-go{white-space:nowrap;flex-shrink:0}
.dz-card-spec{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-card-feats li{-webkit-line-clamp:2}

/* ============================================================ LEGAL / ABOUT */
.legal{max-width:860px;margin-inline:auto}
.ab-sec{margin-bottom:2.6rem}
.ab-sec h2{font-size:1.5rem;margin-bottom:.9rem;position:relative;padding-left:1rem}
.ab-sec h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:3px;
  border-radius:2px;background:linear-gradient(180deg,var(--amber),var(--oxblood))}
.ab-sec p{margin-bottom:.9rem;font-size:.95rem;line-height:1.75}
.ab-sec p a,.ab-sec li a{color:var(--brass);text-decoration:underline;text-underline-offset:2px;
  transition:color .2s}
.ab-sec p a:hover,.ab-sec li a:hover{color:var(--amber)}
.ab-sec em{color:var(--dim);font-style:italic}
.ab-sec code{font-family:var(--ff-mono);font-size:.82em;padding:.1rem .35rem;border-radius:5px;
  background:rgba(200,134,43,.12);color:var(--amber)}
.ab-list{display:flex;flex-direction:column;gap:.7rem}
.ab-list li{position:relative;padding-left:1.4rem;font-size:.93rem;color:var(--cream-2);line-height:1.7}
.ab-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--brass)}
.ab-list b{color:var(--cream);font-weight:600}
.ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-top:1.1rem}
.ab-card{padding:1.2rem;border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  transition:transform .3s var(--ease),border-color .3s}
.ab-card:hover{transform:translateY(-4px);border-color:rgba(200,134,43,.38)}
.ab-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;margin-bottom:.7rem;
  background:rgba(200,134,43,.12);border:1px solid rgba(200,134,43,.28);color:var(--brass)}
.ab-card h3{font-size:1rem;margin-bottom:.4rem}
.ab-card p{font-size:.84rem;color:var(--dim);margin:0}
.ab-cats{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem}
.ab-cat{display:grid;grid-template-columns:auto 160px 1fr auto;align-items:center;gap:1rem;
  padding:.85rem 1rem;border-radius:var(--r);border:1px solid var(--line-2);
  background:rgba(244,237,226,.025);transition:border-color .3s,background .3s}
.ab-cat:hover{border-color:rgba(200,134,43,.4);background:rgba(200,134,43,.07)}
.ab-cat-n{font-family:var(--ff-display);font-size:1.3rem;font-weight:900;color:var(--brass);
  min-width:2ch;text-align:right}
.ab-cat-name{font-weight:600;color:var(--cream);font-size:.92rem}
.ab-cat-blurb{font-size:.82rem;color:var(--muted)}
.ab-cat-go{font-size:.78rem;font-weight:600;color:var(--brass);white-space:nowrap;
  transition:color .2s}
.ab-cat:hover .ab-cat-go{color:var(--amber)}
.ab-cta{padding:1.4rem;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(200,134,43,.14),rgba(244,237,226,.03));
  border:1px solid rgba(200,134,43,.26)}
.ab-cta h2{margin-bottom:.5rem}
.ab-cta p{margin:0}
@media (max-width:760px){
  .ab-cat{grid-template-columns:auto 1fr;gap:.5rem 1rem}
  .ab-cat-blurb{grid-column:1/-1;padding-left:3rem}
  .ab-cat-go{grid-column:2;justify-self:end}
}

/* dial: value and caption must not collide */
.dial-center{gap:1px;line-height:1}
.dial-value{font-size:1.45rem;line-height:1.05}
.dial-max{line-height:1;letter-spacing:.04em}

/* half star */
.pdp-score-stars .s.half{
  background:linear-gradient(90deg,var(--brass) 50%,rgba(244,237,226,.18) 50%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* review byline: name and date are spans inside a span — stack them */
.rev-who{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.rev-name,.rev-date{display:block}
.rev-stars{flex-shrink:0;white-space:nowrap}
.dz-top10-meta{display:flex;flex-direction:column}

/* anatomy stage: SVG diagram */
.an-svg{position:absolute;inset:0;width:100%;height:100%}
.an-rec{transform-box:view-box;transform-origin:190px 200px;animation:spin 7s linear infinite}
.anatomy-stage{padding:0}

/* ---------------------------------------------------------------
   Mobile nav panel.
   .dz-header uses backdrop-filter, which makes it the containing block
   for position:fixed descendants — so a fixed panel with top:72px;bottom:0
   resolves against the 72px header and collapses. Position it absolutely
   against the header instead and give it an explicit viewport height.
   --------------------------------------------------------------- */
@media (max-width:900px){
  .dz-nav{
    position:absolute;top:100%;left:0;right:0;bottom:auto;
    height:calc(100vh - 72px);height:calc(100dvh - 72px);
  }
}
@media (max-width:900px){
  .dz-nav-cta{display:flex}
}

/* narrow cards: keep all 3 features, drop the rpm tail so the spec never ellipsizes */
@media (max-width:820px){ .dz-card-spec .rpm{display:none} }
@media (max-width:720px){ .dz-card-feats li:nth-child(3){display:list-item} }