/* =============================================================================
   DUD® — Anti-Fashion. Dark Luxury.
   Single-source-of-truth stylesheet for the child theme.
   Palette: Void, Bone, Ember, Ash, Oxblood, Signal.
   ============================================================================= */

:root {
  --void:     #000000;
  --void-2:   #0a0a0a;         /* card surface, one shade off pitch */
  --void-3:   #141414;         /* raised surface */
  --bone:     #f0e6d2;
  --bone-2:   #e8ddc7;
  --signal:   #f8f2e2;         /* hover highlight */
  --ash:      #8a8172;
  --ash-2:    #c9beab;
  --ember:    #c8a96e;
  --ember-2:  #d4b878;
  --oxblood:  #6b0f1a;
  --border:   #1f1f1f;
  --border-2: #2a2a2a;

  --font-display: "Anton", "Impact", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", "Menlo", monospace;

  --track-tight: -0.01em;
  --track:       0.02em;
  --track-wide:  0.14em;
  --track-widest: 0.32em;

  --shadow-soft:  0 2px 24px rgba(200,169,110,0.06);
  --shadow-lift:  0 10px 40px rgba(0,0,0,0.6);

  --content-max: 1400px;
  --gutter:      clamp(20px, 4vw, 48px);
  --radius:      2px;
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.24s ease; }
a:hover { color: var(--ember); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* -------- Type -------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: 1.02;
  color: var(--bone);
}
h1 { font-size: clamp(48px, 8vw, 128px); }
h2 { font-size: clamp(36px, 5.5vw, 88px); }
h3 { font-size: clamp(26px, 3.5vw, 56px); }
h4 { font-size: clamp(20px, 2.4vw, 32px); }

.mono, .eyebrow, .ticker, .label, .coord {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--ash-2);
}
.eyebrow { color: var(--ember); }
.eyebrow-bone { color: var(--bone-2); }

p { color: var(--bone-2); }
p + p { margin-top: 1.2em; }

/* -------- Layout primitives -------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.stack > * + * { margin-top: var(--stack, 24px); }
.section {
  padding-block: clamp(64px, 10vw, 140px);
  position: relative;
}
.section--tight { padding-block: clamp(40px, 6vw, 80px); }

/* Uniform alignment — every top-level home section respects the same rhythm.
   Values are intentionally tighter than before to kill dead space and give
   the desktop + mobile experience the same beat. */
body.dud-home > main > section {
  padding-block: clamp(56px, 8vw, 96px);
}
body.dud-home > main > section > .wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Explicit overrides so cascade doesn't fight our tightening below */
body.dud-home > main > .dud-hero { padding-block: clamp(72px, 10vw, 120px); }
body.dud-home > main > .dud-def  { padding-block: clamp(40px, 6vw, 72px); }
body.dud-home > main > .dud-doctrine { padding-block: clamp(56px, 8vw, 96px); }
body.dud-home > main > .dud-pillars  { padding-block: clamp(56px, 8vw, 96px); }
body.dud-home > main > .dud-scarcity { padding-block: clamp(56px, 8vw, 96px); }
body.dud-home > main > .dud-stitch   { padding-block: clamp(64px, 9vw, 110px); }
body.dud-home > main > .dud-products { padding-block: clamp(48px, 7vw, 90px); }
body.dud-home > main > .dud-face     { padding-block: clamp(80px, 12vw, 160px); }
body.dud-home > main > .dud-manifest { padding-block: clamp(48px, 6vw, 80px); }
body.dud-home > main > .dud-centerpiece { padding-block: clamp(80px, 12vw, 160px); }
.hairline {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

/* =============================================================================
   TICKER (top of every page)
   ============================================================================= */
.dud-ticker {
  background: var(--void);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 60;
  height: 42px;
  display: flex;
  align-items: center;
}
.dud-ticker__track {
  display: flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  animation: ticker-scroll 50s linear infinite;
  padding-inline: 0;
  will-change: transform;
}
.dud-ticker:hover .dud-ticker__track { animation-play-state: paused; }
.dud-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--bone-2);
  text-transform: uppercase;
}
.dud-ticker__item::after {
  content: "//";
  color: var(--ash);
  margin-left: 12px;
}
.dud-ticker__price { color: var(--bone); }
.dud-ticker__stock { color: var(--ember); }
.dud-ticker__stock--critical { color: var(--oxblood); }
.dud-ticker__stock--purged  { color: var(--oxblood); font-weight: 600; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============================================================================
   HEADER
   ============================================================================= */
.dud-header {
  position: sticky;
  top: 42px;
  z-index: 55;
  background: rgba(0,0,0,0.86);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.dud-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: 68px;
  padding-inline: var(--gutter);
  max-width: var(--content-max);
  margin-inline: auto;
}
.dud-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: var(--track);
  color: var(--bone);
}
.dud-brand__glyph {
  width: 44px; height: 44px;
  object-fit: contain;
  border-radius: 2px;
}
.dud-nav {
  display: inline-flex;
  gap: 32px;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--bone-2);
}
.dud-nav a { padding-block: 6px; border-bottom: 1px solid transparent; transition: all 0.24s ease; }
.dud-nav a:hover { color: var(--ember); border-bottom-color: var(--ember); }
/* THE DUD BAG — a real luxury carrier: handles, body, hand-stitched seam.
   Empty = seam dormant.  Full = seam pulses + count chip appears.
   Every element scaled + centered per icon-design math (viewBox 56×56). */
.dud-bag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--bone);
  background: transparent;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: var(--track-wide);
  transition: all 0.24s ease;
  position: relative;
}
.dud-bag:hover { border-color: var(--ember); color: var(--ember); }
.dud-bag__glyph {
  width: 30px; height: 30px;
  display: inline-block;
  color: var(--bone);
  transition: color 0.24s ease;
}
.dud-bag:hover .dud-bag__glyph { color: var(--ember); }
.dud-bag__label { font-weight: 400; }
.dud-bag__count {
  display: inline-block;
  min-width: 18px;
  padding: 2px 6px;
  background: var(--oxblood);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
}
.dud-bag[data-count="0"] .dud-bag__count {
  background: transparent;
  color: var(--ash);
  border: 1px solid var(--border);
}

/* Bag SVG seam — always visible dashed stitch across bag mouth.
   When empty: static.  When full: stitches ripple (subtle pulse). */
.dud-bag__seam {
  transition: opacity 0.24s ease;
}
.dud-bag:not([data-count="0"]) .dud-bag__seam {
  animation: bag-seam-pulse 2.4s ease-in-out infinite;
}
@keyframes bag-seam-pulse {
  0%, 100% { opacity: 0.9; stroke-dashoffset: 0; }
  50%      { opacity: 1;   stroke-dashoffset: -4.4; }
}
/* Full state: red chip + count appear */
.dud-bag[data-count="0"] .dud-bag__chip,
.dud-bag[data-count="0"] .dud-bag__count-num { opacity: 0; }
.dud-bag:not([data-count="0"]) .dud-bag__chip {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.dud-bag:not([data-count="0"]) .dud-bag__count-num {
  opacity: 1;
  transition: opacity 0.4s ease 0.15s;
}
/* Handles get a tiny lift on hover — the bag reacts */
.dud-bag__handle {
  transform-origin: 28px 12px;
  transition: transform 0.24s ease;
}
.dud-bag:hover .dud-bag__handle { transform: translateY(-1px); }

/* Add-to-cart stitching animation: seam runs across */
.dud-bag.-stitching .dud-bag__seam {
  stroke-dasharray: 2.2 2.2;
  stroke-dashoffset: 34;
  animation: bag-stitch-run 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes bag-stitch-run {
  to { stroke-dashoffset: 0; }
}

/* Mobile nav: collapse to bag-only */
@media (max-width: 720px) {
  .dud-header__inner { grid-template-columns: auto 1fr auto; gap: 12px; }
  .dud-nav { display: none; }
  .dud-brand { font-size: 20px; }
}

/* =============================================================================
   HOMEPAGE
   ============================================================================= */

/* Hero — "WHAT IS A DUD?" */
.dud-hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(56px, 9vh, 110px) var(--gutter) clamp(48px, 7vh, 88px);
  position: relative;
}
@media (max-width: 720px) {
  .dud-hero { min-height: 72vh; padding-block: clamp(48px, 8vh, 80px); }
}
.dud-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  margin-bottom: clamp(24px, 5vh, 56px);
}
.dud-hero__title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-size: clamp(80px, 18vw, 260px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.dud-hero__question {
  color: var(--ash);
  -webkit-text-stroke: 1.5px var(--ash);
  color: transparent;
  font-family: var(--font-display);
}
.dud-hero__tags {
  margin-top: clamp(24px, 5vh, 56px);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
}
.dud-hero__tags .dot { color: var(--ember); }
.dud-hero__scroll {
  margin-top: clamp(32px, 6vh, 80px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
}
.dud-hero__scroll::before {
  content: "";
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--ash));
  animation: scroll-hint 2.4s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50%      { transform: scaleY(0.4); transform-origin: top; }
}

/* Definition sections — "A DUD MEANT CLOTHING." */
.dud-def {
  padding-block: clamp(40px, 6vh, 88px);
  text-align: center;
}
.dud-def__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  margin-bottom: 16px;
}
.dud-def__separator {
  width: 60px; height: 1px;
  background: var(--border);
  margin: 16px auto;
}
.dud-def__title {
  font-size: clamp(56px, 11vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.dud-def__title--outline {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ash);
  -webkit-text-fill-color: transparent;
}
.dud-def__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  margin-top: 16px;
  text-align: center;
}
@media (min-width: 900px) {
  .dud-def__caption { text-align: right; padding-right: var(--gutter); }
}

/* Reclamation card — "WE RECLAIMED BOTH." */
.dud-reclaim {
  background: var(--void-2);
  border: 1px solid var(--border);
  padding: clamp(48px, 8vw, 96px) var(--gutter);
  text-align: center;
  max-width: 1100px;
  margin-inline: auto;
}
.dud-reclaim__year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  margin-bottom: 24px;
}
.dud-reclaim__title {
  font-size: clamp(56px, 10vw, 160px);
  line-height: 0.95;
  color: var(--ember);
  letter-spacing: -0.02em;
}

/* Doctrine — "NO TRENDS · NO NOISE · NO RULES" + typewriter body + shadows */
.dud-doctrine {
  padding-block: clamp(56px, 8vw, 96px);
  text-align: center;
  border-block: 1px solid var(--border);
}
.dud-doctrine__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: inline-block;
  padding-inline: 20px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.dud-doctrine__phrases {
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.dud-doctrine__phrase {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--bone);
  position: relative;
  padding-bottom: 12px;
}
/* Per-phrase DUD color emotion */
.dud-doctrine__phrase--bone    { color: var(--bone); }
.dud-doctrine__phrase--ember   { color: var(--ember); }
.dud-doctrine__phrase--oxblood { color: #b21a2a; }   /* slightly brighter than base oxblood for legibility on dark */
/* Dashed stitch underline per phrase — the DUD signature */
.dud-doctrine__phrase::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 3px;
  background-image: linear-gradient(
    to right,
    currentColor 0,
    currentColor 8px,
    transparent 8px,
    transparent 14px
  );
  background-size: 14px 3px;
  background-repeat: repeat-x;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 0.4s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.dud-doctrine.-in .dud-doctrine__phrase::after { opacity: 0.85; transform: scaleX(1); }
.dud-doctrine.-in .dud-doctrine__phrase--ember::after   { transition-delay: 0.15s; }
.dud-doctrine.-in .dud-doctrine__phrase--oxblood::after { transition-delay: 0.30s; }
.dud-doctrine__sep {
  font-family: var(--font-mono);
  font-size: clamp(20px, 3vw, 36px);
  color: var(--ember);
  align-self: center;
  transform: translateY(-0.15em);
}
.dud-doctrine__mono {
  max-width: 780px;
  margin: 0 auto clamp(48px, 8vw, 80px);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.14em;
  color: var(--bone-2);
  line-height: 2;
  text-transform: uppercase;
  text-align: center;
  padding-inline: clamp(20px, 4vw, 40px);
}
.dud-doctrine__shadows {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(32px, 5.5vw, 72px);
  color: var(--bone);
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-align: center;
  padding-inline: 20px;
}
.dud-doctrine__shadows .gold { color: var(--ember); }
@media (max-width: 640px) {
  .dud-doctrine__phrases { gap: 8px; }
  .dud-doctrine__sep { transform: translateY(-0.1em); }
}

/* Scarcity — "60 · ONLY 60 CREATED" */
.dud-scarcity {
  padding-block: clamp(56px, 8vw, 96px);
  text-align: center;
  position: relative;
}
.dud-scarcity__ghost {
  font-family: var(--font-display);
  font-size: clamp(180px, 34vw, 520px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border-2);
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
}
.dud-scarcity__title {
  font-size: clamp(56px, 10vw, 140px);
  margin-top: -0.3em;
  position: relative;
  z-index: 2;
}
.dud-scarcity__lines {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  line-height: 2;
  text-transform: uppercase;
}
.dud-scarcity__accent {
  display: inline-block;
  margin-top: 32px;
  padding: 16px 32px;
  border: 1px solid var(--ember);
  color: var(--ember);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: var(--track);
}
.dud-scarcity__whisper {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  line-height: 1.8;
}

/* Stitching Statements — signature wordmark with red-thread animation */
.dud-stitch {
  padding-block: clamp(64px, 9vw, 110px);
  text-align: center;
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.dud-stitch__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  margin-bottom: 20px;
  display: block;
}

/* The wordmark: DUD ghost behind + STATEMENTS in front + thread through middle + needle on right */
.dud-stitch__wordmark {
  position: relative;
  display: inline-block;
  padding: 30px 40px 30px 40px;
  margin: 0 auto;
  isolation: isolate;
}
.dud-stitch__ghost {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 15%);
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 200px);
  color: transparent;
  -webkit-text-stroke: 1.2px var(--border-2);
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.1em;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}
.dud-stitch__word {
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(60px, 11vw, 160px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--bone);
  display: inline-block;
}
/* CANVAS STITCH — v2.2 real needle+thread animation over STATEMENTS wordmark.
   Canvas covers the wordmark row; JS draws textured gradient stitches, the
   needle SVG hovers above and plunges in sine-wave motion. Fires once on
   scroll-into-view, then the finished stitches remain. */
.dud-stitch__canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-38%);
  width: 100%;
  height: 60px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dud-stitch.-armed .dud-stitch__canvas { opacity: 1; }

.dud-stitch__needle {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 90px;
  transform: translate(-50%, -100%);
  z-index: 4;
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
  transition: opacity 0.3s ease;
}
.dud-stitch.-armed .dud-stitch__needle { opacity: 1; }
@media (max-width: 720px) {
  .dud-stitch__needle { width: 14px; height: 72px; }
  .dud-stitch__canvas { height: 44px; transform: translateY(-40%); }
}

.dud-stitch__caption {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: var(--track-widest);
  color: var(--ember);
  margin-top: clamp(48px, 6vw, 72px);
  text-transform: uppercase;
}
.dud-stitch__body {
  max-width: 640px;
  margin: 20px auto 0;
  color: var(--bone-2);
  line-height: 1.7;
  padding-inline: 20px;
}
.dud-stitch__cta {
  margin-top: clamp(32px, 5vw, 48px);
}

@media (max-width: 640px) {
  .dud-stitch__wordmark { padding: 20px 24px; }
  .dud-stitch__thread { left: 12px; right: 30px; }
  .dud-stitch__needle { width: 28px; height: 28px; right: 4px; }
}

/* =============================================================================
   BUTTONS + CTAs
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 36px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  border: 1px solid var(--ember);
  background: var(--ember);
  color: var(--void);
  transition: all 0.24s ease;
  cursor: pointer;
  min-height: 56px;
}
.btn:hover {
  background: transparent;
  color: var(--ember);
}
.btn--ghost {
  background: transparent;
  color: var(--ember);
}
.btn--ghost:hover { background: var(--ember); color: var(--void); }
.btn--full { width: 100%; }
.btn--large { padding: 22px 48px; font-size: 18px; }

/* =============================================================================
   PRODUCTS GRID
   ============================================================================= */
.dud-products {
  padding-block: clamp(60px, 8vw, 120px);
}
.dud-products__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  margin-bottom: 24px;
  text-align: center;
}
.dud-products__title {
  text-align: center;
  margin-bottom: clamp(48px, 8vw, 96px);
  font-size: clamp(56px, 10vw, 140px);
}
.dud-products__title em {
  color: var(--ember);
  font-style: italic;
  font-family: inherit;
}
.dud-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}
@media (min-width: 900px)  { .dud-products__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .dud-products__grid { grid-template-columns: repeat(4, 1fr); } }

.dud-card {
  background: var(--void);
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
.dud-card__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--void-2);
}
.dud-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Restrained rebellion — no hover-scale on the artifact */
  transition: filter 0.5s ease;
}
.dud-card:hover .dud-card__media img { filter: brightness(1.06); }
.dud-card__stock {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  z-index: 2;
}
.dud-card__stock--critical { color: var(--oxblood); }
.dud-card__stock--purged   { color: var(--oxblood); background: rgba(107,15,26,0.16); }
.dud-card__body {
  padding: 24px 20px 28px;
  display: grid;
  gap: 8px;
}
.dud-card__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: var(--track);
  color: var(--bone);
  line-height: 1.05;
  margin-top: 2px;
}
.dud-card__spec {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
  margin-top: 6px;
}
.dud-card__scarcity {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
  margin-top: 2px;
}
.dud-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}
.dud-card__price {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--bone-2);
  letter-spacing: var(--track);
}
.dud-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
}
.dud-card__link { position: absolute; inset: 0; z-index: 3; }

/* =============================================================================
   FACE SECTION — Vigil Glyph
   ============================================================================= */
.dud-face {
  padding-block: clamp(72px, 11vw, 160px);
  text-align: center;
  position: relative;
}
.dud-face__glyph {
  width: clamp(140px, 18vw, 280px);
  margin: 0 auto clamp(32px, 5vw, 56px);
  position: relative;
}
.dud-face__title {
  font-size: clamp(48px, 8vw, 120px);
  color: var(--bone);
  margin-bottom: 12px;
}
.dud-face__ghost {
  font-size: clamp(44px, 7.5vw, 108px);
  color: transparent;
  -webkit-text-stroke: 1px var(--ash);
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  line-height: 0.95;
  margin-bottom: 12px;
}
.dud-face__witness {
  color: var(--ember);
  font-size: clamp(48px, 8vw, 120px);
  font-family: var(--font-display);
  line-height: 0.95;
}
.dud-face__body {
  margin-top: clamp(32px, 5vw, 56px);
  max-width: 560px;
  margin-inline: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  line-height: 2;
  text-transform: uppercase;
}

/* Blink animation when The Manifest fires */
.dud-face__glyph.-blink { animation: blink 0.6s ease; }
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* =============================================================================
   THE MANIFEST — Live activity feed
   ============================================================================= */
.dud-manifest {
  padding-block: clamp(60px, 8vw, 100px);
  border-block: 1px solid var(--border);
  background: var(--void);
}
.dud-manifest__inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.dud-manifest__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dud-manifest__title::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px var(--ember);
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--ember); }
  50%      { opacity: 0.4; box-shadow: 0 0 4px var(--ember); }
}
.dud-manifest__list {
  list-style: none;
  display: grid;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--track);
  color: var(--bone-2);
}
.dud-manifest__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.dud-manifest__list .num  { color: var(--ember); }
.dud-manifest__list .place { color: var(--ash-2); }
.dud-manifest__list .when { color: var(--ash); text-align: right; }
.dud-manifest__empty {
  padding: 20px 0;
  text-align: center;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.dud-manifest__empty em { color: var(--ember); font-style: normal; }

/* =============================================================================
   FOOTER
   ============================================================================= */
.dud-footer {
  background: var(--void);
  padding-block: clamp(60px, 8vw, 100px);
  border-top: 1px solid var(--border);
}
.dud-footer__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  line-height: 2;
  text-transform: uppercase;
}
.dud-footer__meta .col-right { text-align: right; }
.dud-footer__meta a { color: var(--bone-2); }
.dud-footer__meta a:hover { color: var(--ember); }

.dud-footer__bottom {
  padding-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
}
@media (max-width: 800px) {
  .dud-footer__meta { grid-template-columns: 1fr; }
  .dud-footer__meta .col-right { text-align: left; }
  .dud-footer__bottom { grid-template-columns: 1fr; gap: 40px; }
}

.dud-footer__brand h5 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: var(--track);
  color: var(--bone);
  margin-bottom: 16px;
}
.dud-footer__brand p {
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  line-height: 2;
  text-transform: uppercase;
}
.dud-footer__socials {
  display: inline-flex;
  gap: 12px;
  margin-top: 20px;
}
.dud-footer__socials a {
  width: 40px; height: 40px;
  border: 1px solid var(--border-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-2);
  transition: all 0.24s ease;
}
.dud-footer__socials a:hover { border-color: var(--ember); color: var(--ember); }

.dud-footer__col h6 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}
.dud-footer__col ul { list-style: none; display: grid; gap: 12px; }
.dud-footer__col a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--bone-2);
  text-transform: uppercase;
}
.dud-footer__copy {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 32px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  text-transform: uppercase;
}

/* S05 Notify */
.dud-notify {
  background: var(--void-2);
  border-top: 1px solid var(--border);
  padding-block: clamp(60px, 8vw, 100px);
  text-align: center;
}
.dud-notify__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  margin-bottom: 20px;
}
.dud-notify__title {
  font-size: clamp(36px, 6vw, 72px);
  margin-bottom: 16px;
}
.dud-notify__body {
  color: var(--bone-2);
  margin-bottom: 40px;
  max-width: 480px;
  margin-inline: auto;
}
.dud-notify__form {
  display: flex;
  gap: 0;
  max-width: 520px;
  margin-inline: auto;
}
.dud-notify__form input[type="email"] {
  flex: 1;
  padding: 18px 20px;
  background: var(--void);
  border: 1px solid var(--border-2);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--track);
}
.dud-notify__form input[type="email"]:focus {
  outline: none;
  border-color: var(--ember);
}
.dud-notify__form input::placeholder { color: var(--ash); }
.dud-notify__form button {
  padding: 18px 32px;
  background: var(--bone);
  color: var(--void);
  border: 1px solid var(--bone);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  transition: all 0.24s ease;
}
.dud-notify__form button:hover { background: var(--ember); border-color: var(--ember); }

/* THE WITNESS — v2.2 promoted: bigger, red-thread trail down the right rail,
   whisper caption expanded, reacts to product-card hover, dramatic wake. */
.dud-witness {
  position: fixed;
  top: 118px;
  right: 22px;
  width: 60px; height: 60px;
  z-index: 45;
  opacity: 0;
  transform: translateY(-14px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(.2,.8,.2,1),
              transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.dud-witness.-awake {
  opacity: 0.82;
  transform: none;
}
.dud-witness:hover, .dud-witness.-locked {
  opacity: 1;
  transform: scale(1.06);
}
.dud-witness__glyph {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 2px;
  filter: brightness(0.95) contrast(1.05);
}
/* Red thread trail — falls from the Witness down the right rail, dashed */
.dud-witness::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 0;
  background-image: linear-gradient(to bottom,
    #6b0f1a 0, #6b0f1a 6px,
    transparent 6px, transparent 12px);
  background-size: 1px 12px;
  background-repeat: repeat-y;
  transition: height 1.2s cubic-bezier(.2,.8,.2,1) 0.3s;
  opacity: 0.5;
}
.dud-witness.-awake::before { height: 84px; }
.dud-witness__ring {
  position: absolute;
  inset: -4px;
  border: 1px solid var(--ember);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: none;
}
.dud-witness.-blink .dud-witness__ring { opacity: 0.6; }
.dud-witness__caption {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 14px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease 0.4s;
  text-align: right;
  line-height: 1.6;
}
.dud-witness__caption::after {
  content: "S04 · SS25";
  display: block;
  color: var(--ember);
  font-size: 9px;
  margin-top: 2px;
  letter-spacing: var(--track-widest);
}
.dud-witness.-awake .dud-witness__caption { opacity: 1; }

/* 8-second blink per doctrine */
.dud-witness.-blinking .dud-witness__glyph {
  animation: witness-blink 0.4s ease;
}
@keyframes witness-blink {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: 0.15; transform: scaleY(0.05); }
}

@media (max-width: 720px) {
  .dud-witness { width: 44px; height: 44px; top: 96px; right: 14px; }
  .dud-witness__caption { display: none; }
  .dud-witness::before { display: none; }
}

/* THE THREAD — real hand-stitches connecting sections.
   v2.3: renders on ALL breakpoints, fades + slides in on scroll, no clip-path gate.
   If the observer never fires (fast scroll, reduced motion, or above-fold), a JS
   fallback flips -in on load so the thread is always visible. */
.dud-thread {
  position: relative;
  width: 100%;
  height: 48px;
  display: block;
  margin-block: -24px 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.6s cubic-bezier(.2,.8,.2,1),
              transform 1.6s cubic-bezier(.2,.8,.2,1);
}
.dud-thread--tall { height: 90px; margin-block: -45px 0; }
.dud-thread.-in {
  opacity: 1;
  transform: none;
}
/* Safety: after 2.5s of page load, if any thread hasn't been -in'd, show it anyway.
   JS also handles this, this is a CSS-only fallback for JS-off. */
@media (prefers-reduced-motion: reduce) {
  .dud-thread { opacity: 1; transform: none; transition: none; }
}
.dud-thread__path {
  fill: none;
  stroke: #6b0f1a;
  stroke-width: 2.4;
  stroke-linecap: butt;
  /* Real stitches — 7px thread, 5px gap. Repeats visually as running stitch. */
  stroke-dasharray: 7 5;
  filter: drop-shadow(0 0 3px rgba(107,15,26,0.5));
}
/* Optional needle that follows the thread's end position */
.dud-thread__needle {
  fill: var(--ember);
  opacity: 0;
  transition: opacity 0.3s ease 1.6s;
}
.dud-thread.-in .dud-thread__needle { opacity: 1; }

/* WhatsApp float */
.dud-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--void);
  border: 1px solid var(--ember);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ember);
  z-index: 90;
  transition: all 0.24s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.dud-whatsapp:hover { background: var(--ember); color: var(--void); transform: scale(1.05); }
.dud-whatsapp svg { width: 24px; height: 24px; }

/* =============================================================================
   PRODUCT PAGE
   ============================================================================= */
.dud-product {
  padding-block: clamp(40px, 6vw, 80px);
}
.dud-product__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .dud-product__inner { grid-template-columns: 1.1fr 1fr; }
}
.dud-product__breadcrumb {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.dud-product__breadcrumb a { color: var(--ash-2); }
.dud-product__breadcrumb a:hover { color: var(--ember); }

.dud-product__gallery { display: grid; gap: 8px; }
.dud-product__gallery-main {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--void-2);
  border: 1px solid var(--border);
}
.dud-product__gallery-main img { width:100%; height:100%; object-fit:cover; }
.dud-product__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dud-product__thumb {
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--void-2);
  transition: border-color 0.24s ease;
}
.dud-product__thumb:hover, .dud-product__thumb.active {
  border-color: var(--ember);
}
.dud-product__thumb img { width:100%; height:100%; object-fit:cover; }

.dud-product__summary {
  padding-top: 8px;
  display: grid;
  gap: 24px;
  align-content: start;
}
.dud-product__title {
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.01em;
  line-height: 1;
}
.dud-product__price {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--bone);
  letter-spacing: var(--track);
}
.dud-product__stock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
  align-self: start;
}
.dud-product__stock::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ember);
  border-radius: 50%;
}
.dud-product__stock--critical { color: var(--oxblood); border-color: var(--oxblood); }
.dud-product__stock--critical::before { background: var(--oxblood); }

.dud-sizes {
  display: grid;
  gap: 16px;
}
.dud-sizes__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
}
.dud-sizes__pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dud-size-pill {
  min-width: 56px;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--border-2);
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: var(--track);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
}
.dud-size-pill:hover { border-color: var(--bone-2); }
.dud-size-pill.active { background: var(--bone); color: var(--void); border-color: var(--bone); }
.dud-size-pill[disabled], .dud-size-pill.sold-out {
  color: var(--ash); cursor: not-allowed; opacity: 0.5;
  text-decoration: line-through;
}
.dud-sizes__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-wide);
  color: var(--ash-2);
  text-transform: uppercase;
  min-height: 16px;
}

.dud-sizes__chart-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  border-bottom: 1px solid var(--ember);
  padding-bottom: 2px;
  text-transform: uppercase;
  display: inline-block;
}

.dud-product__desc {
  color: var(--bone-2);
  line-height: 1.6;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.dud-product__buy {
  display: grid;
  gap: 16px;
  padding-top: 16px;
}

.dud-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
}
.dud-trust__item::before {
  content: "◆";
  color: var(--ember);
  margin-right: 8px;
}

.dud-product__attrib {
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  text-transform: uppercase;
  text-align: center;
}

/* SIGNED BY DUD® — the covenant footer on product page */
.dud-product__signed {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  position: relative;
}
.dud-product__signed-line {
  width: 40px; height: 1px;
  background: var(--ember);
  margin-bottom: 20px;
}
.dud-product__signed-body {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--bone);
  text-transform: uppercase;
  line-height: 1.9;
}
.dud-product__signed-body .opacity-60 { color: var(--ash-2); }

/* Product spec tabs */
.dud-tabs {
  margin-top: clamp(48px, 8vw, 96px);
  border-top: 1px solid var(--border);
  padding-top: 40px;
  display: grid;
  gap: 24px;
}
.dud-tabs__nav {
  display: inline-flex;
  gap: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
  overflow-x: auto;
  white-space: nowrap;
}
.dud-tabs__nav button {
  padding: 8px 0;
  color: var(--ash-2);
  border-bottom: 2px solid transparent;
}
.dud-tabs__nav button.active { color: var(--ember); border-bottom-color: var(--ember); }
.dud-tabs__panel { display: none; padding: 32px 0; color: var(--bone-2); line-height: 1.7; }
.dud-tabs__panel.active { display: block; }
.dud-tabs__panel dl { display: grid; grid-template-columns: 180px 1fr; gap: 12px 24px; }
.dud-tabs__panel dt { color: var(--ember); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-widest); text-transform: uppercase; }

/* =============================================================================
   BAG DRAWER (slides in on add to cart)
   ============================================================================= */
.dud-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: var(--void);
  border-left: 1px solid var(--border);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lift);
}
.dud-drawer.open { transform: translateX(0); }
.dud-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.dud-drawer__backdrop.open { opacity: 1; pointer-events: auto; }
.dud-drawer__head {
  padding: 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dud-drawer__title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: var(--track);
  color: var(--bone);
}
.dud-drawer__close {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-2);
  border: 1px solid var(--border-2);
  transition: all 0.24s ease;
}
.dud-drawer__close:hover { color: var(--ember); border-color: var(--ember); }
.dud-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.dud-drawer__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--border);
}
.dud-drawer__item img { width: 72px; height: 90px; object-fit: cover; }
.dud-drawer__name { font-family: var(--font-display); font-size: 15px; color: var(--bone); line-height: 1.2; }
.dud-drawer__size { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-widest); color: var(--ash-2); text-transform: uppercase; margin-top: 4px; }
.dud-drawer__qty { display: inline-flex; gap: 6px; margin-top: 8px; align-items: center; }
.dud-drawer__qty button { width: 24px; height: 24px; border: 1px solid var(--border-2); color: var(--bone-2); }
.dud-drawer__price { font-family: var(--font-mono); color: var(--bone); align-self: start; }
.dud-drawer__foot {
  padding: 24px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 16px;
}
.dud-drawer__totals {
  display: grid;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.dud-drawer__totals .row { display: flex; justify-content: space-between; align-items: baseline; color: var(--ash-2); }
.dud-drawer__totals .row.total { color: var(--bone); font-size: 14px; padding-top: 8px; border-top: 1px solid var(--border); }
.dud-drawer__ship { color: var(--ember); }
.dud-drawer__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  text-transform: uppercase;
  text-align: center;
  margin-top: 8px;
}

/* PURCHASE RITUAL — post-BAG confirmation banner in drawer */
.dud-ritual {
  padding: 32px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(200,169,110,0.06), transparent);
  text-align: center;
  animation: ritual-in 0.6s cubic-bezier(.2,.8,.2,1);
}
@keyframes ritual-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.dud-ritual__piece {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  color: var(--ember);
  letter-spacing: var(--track);
  margin-bottom: 8px;
}
.dud-ritual__body {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--bone);
  text-transform: uppercase;
}
.dud-ritual__body em {
  color: var(--ember);
  font-style: normal;
  display: block;
  margin-top: 6px;
  font-size: 10px;
}
.dud-drawer__empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--bone-2);
}
.dud-drawer__empty-title {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: var(--track);
  color: var(--bone);
  margin-bottom: 12px;
}
.dud-drawer__empty-body {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
  margin-bottom: 32px;
  line-height: 1.8;
}

/* =============================================================================
   CART / BAG PAGE
   ============================================================================= */
.dud-cart {
  padding-block: clamp(60px, 8vw, 120px);
}
.dud-cart__title {
  font-size: clamp(56px, 10vw, 140px);
  margin-bottom: 32px;
}
.dud-cart__hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--border);
  margin-bottom: 48px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
  gap: 16px;
  flex-wrap: wrap;
}
.dud-cart__hint a {
  color: var(--ember);
  border: 1px solid var(--ember);
  padding: 12px 24px;
  font-family: var(--font-display);
}
.dud-cart__hint a:hover { background: var(--ember); color: var(--void); }
.dud-cart__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
}
@media (min-width: 900px) {
  .dud-cart__grid { grid-template-columns: 2fr 1fr; }
}
.dud-cart__items { display: grid; gap: 0; }
.dud-cart__row {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding-block: 24px;
  border-bottom: 1px solid var(--border);
}
.dud-cart__row img { width: 96px; height: 120px; object-fit: cover; }
.dud-cart__row .name { font-family: var(--font-display); font-size: 20px; color: var(--bone); }
.dud-cart__row .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-widest); color: var(--ash-2); text-transform: uppercase; margin-top: 6px; }
.dud-cart__row .qty { display: inline-flex; gap: 4px; align-items: center; }
.dud-cart__row .qty button { width: 32px; height: 32px; border: 1px solid var(--border-2); color: var(--bone-2); }
.dud-cart__row .qty input { width: 40px; height: 32px; text-align: center; background: var(--void-2); border: 1px solid var(--border-2); color: var(--bone); font-family: var(--font-mono); }
.dud-cart__row .price { font-family: var(--font-mono); font-size: 15px; color: var(--bone); text-align: right; min-width: 80px; }
.dud-cart__row .remove { grid-column: 1 / -1; text-align: right; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-widest); color: var(--ash); text-transform: uppercase; }
.dud-cart__row .remove:hover { color: var(--oxblood); }

.dud-cart__totals {
  padding: 32px;
  border: 1px solid var(--border);
  background: var(--void-2);
  align-self: start;
  position: sticky;
  top: 130px;
  display: grid;
  gap: 16px;
}
.dud-cart__totals h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}
.dud-cart__totals .row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--track);
  color: var(--bone-2);
}
.dud-cart__totals .row.total {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--bone);
  font-size: 20px;
  font-family: var(--font-display);
  letter-spacing: var(--track);
}
.dud-cart__totals .ship { color: var(--ember); }
.dud-cart__totals .btn { margin-top: 8px; }

.dud-cart__empty {
  text-align: center;
  padding: clamp(80px, 12vw, 160px) 24px;
}
.dud-cart__empty h2 {
  font-size: clamp(48px, 8vw, 96px);
  color: var(--bone);
  margin-bottom: 20px;
}
.dud-cart__empty p {
  color: var(--ash-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  margin-bottom: 40px;
}

/* =============================================================================
   SIZE GUIDE MODAL
   ============================================================================= */
.dud-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dud-modal.open { display: flex; }
.dud-modal__box {
  background: var(--void);
  border: 1px solid var(--border);
  padding: clamp(32px, 5vw, 56px);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.dud-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 1px solid var(--border-2);
  color: var(--bone-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dud-modal__close:hover { color: var(--ember); border-color: var(--ember); }
.dud-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.dud-modal__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: var(--track);
  color: var(--bone);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.dud-modal__subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.dud-modal table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--bone-2);
}
.dud-modal th, .dud-modal td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.dud-modal th {
  color: var(--ember);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  font-weight: normal;
}
.dud-modal__note {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  text-transform: uppercase;
  text-align: center;
}

/* =============================================================================
   MOBILE STICKY BUY CTA (product page only)
   ============================================================================= */
@media (max-width: 720px) {
  .dud-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(0,0,0,0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    z-index: 80;
  }
  .dud-sticky-cta .btn { padding: 16px; font-size: 14px; }
  body.single-product { padding-bottom: 96px; }
}
.dud-sticky-cta { display: none; }
body.single-product .dud-sticky-cta { display: block; }
@media (min-width: 721px) { .dud-sticky-cta { display: none !important; } }

/* =============================================================================
   LOADER — homepage first visit per session
   ============================================================================= */
.dud-loader {
  position: fixed; inset: 0;
  background: var(--void);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}
.dud-loader--done { opacity: 0; }
.dud-loader__inner {
  text-align: center;
  display: grid;
  gap: 24px;
  place-items: center;
}
.dud-loader__glyph {
  width: 96px; height: 96px;
  animation: loader-pulse 1.4s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(0.94); opacity: 0.6; }
}
.dud-loader__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--bone-2);
  text-transform: uppercase;
  animation: loader-blink 0.8s ease-in-out infinite;
}
@keyframes loader-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.dud-loader__beats {
  position: relative;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dud-loader__beat {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: var(--track);
  color: var(--bone);
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  text-align: center;
}
.dud-loader__beat em {
  color: var(--ash-2);
  font-style: italic;
  font-family: inherit;
}
.dud-loader__beat.-in { opacity: 1; }
.dud-loader__beat--reclaim {
  color: var(--ember);
  letter-spacing: var(--track-wide);
}
.dud-loader__beat--reclaim em { color: var(--ember); font-style: normal; }
.dud-loader__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dud-loader__dot {
  width: 6px; height: 6px;
  background: var(--ember);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ember);
  animation: pulse 1.2s ease infinite;
}
body.dud-loading { overflow: hidden; }

/* =============================================================================
   SIGNAL — top-right live session indicator
   ============================================================================= */
.dud-signal {
  position: fixed;
  top: 54px; /* below ticker */
  right: 12px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  color: var(--ash-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.dud-signal__marker { color: var(--ember); }
.dud-signal__time   { color: var(--bone); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dud-signal__meta   { color: var(--ash); }
@media (max-width: 720px) {
  .dud-signal,
  body .dud-signal,
  html body .dud-signal { display: none !important; visibility: hidden !important; position: fixed !important; }
}

/* =============================================================================
   STATUS PILL — bottom-left, all pages
   ============================================================================= */
.dud-status {
  position: fixed;
  bottom: 12px;
  left: 12px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.dud-status__dot {
  width: 6px; height: 6px;
  background: var(--ember);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--ember);
  animation: pulse 2s ease infinite;
}
@media (max-width: 640px) {
  .dud-status { font-size: 9px; padding: 4px 8px; }
}

/* =============================================================================
   THREE PILLARS
   ============================================================================= */
.dud-pillars {
  padding-block: clamp(56px, 8vw, 96px);
  border-block: 1px solid var(--border);
}
.dud-pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  max-width: 100%;
  overflow-x: hidden;
}
@media (min-width: 800px) {
  .dud-pillars__grid { grid-template-columns: repeat(3, 1fr); }
}
.dud-pillar {
  min-width: 0;         /* prevent overflow when text is long */
  overflow-wrap: anywhere;
}
.dud-pillar {
  text-align: center;
  padding-inline: clamp(16px, 3vw, 32px);
}
.dud-pillar__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  display: inline-block;
  padding-inline: 16px;
}
.dud-pillar__separator {
  width: 40px; height: 1px;
  background: var(--border);
  margin: 0 auto 16px;
}
.dud-pillar__title {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  color: var(--bone);
  margin-bottom: 16px;
  letter-spacing: var(--track);
}
.dud-pillar__body {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
  line-height: 1.8;
}
.dud-pillars__tag {
  text-align: center;
  margin-top: clamp(32px, 5vw, 64px);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: var(--track);
  color: var(--bone);
}

/* =============================================================================
   STITCHING STATEMENTS — CINEMATIC SCROLL SEQUENCE
   Each slide occupies 100vh, sticky-fades as viewer scrolls.
   ============================================================================= */
.dud-cinema {
  background: var(--void);
  position: relative;
}
.dud-cinema__intro {
  padding-block: clamp(80px, 12vw, 140px) 0;
  text-align: center;
}
.dud-cinema__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: inline-block;
  padding-inline: 20px;
  margin-bottom: 32px;
}
.dud-cinema__tag {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: var(--track);
  color: var(--ash-2);
  font-style: italic;
}
.dud-cinema__stage {
  padding-top: clamp(40px, 6vw, 80px);
}

.dud-slide {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px) var(--gutter);
  text-align: center;
  opacity: 0.15;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.dud-slide.-in { opacity: 1; transform: none; }

.dud-slide__meta {
  position: absolute;
  top: clamp(24px, 4vw, 48px);
  left: clamp(24px, 4vw, 48px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
}

.dud-slide__body {
  font-family: var(--font-display);
  font-size: clamp(56px, 11vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--bone);
  max-width: 1400px;
  position: relative;
  padding-block: 24px;
}
.dud-slide__body .outline {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ash);
  -webkit-text-fill-color: transparent;
}
.dud-slide__body .gold { color: var(--ember); }

/* Red-thread stitching underline — the DUD motion signature.
   Draws left→right when the slide enters view. */
.dud-slide__body::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 6px;
  width: 0%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'><path d='M0 3 Q 5 0, 10 3 T 20 3 T 30 3 T 40 3' stroke='%236b0f1a' stroke-width='2' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-size: 40px 6px;
  transition: width 1.6s cubic-bezier(.2,.8,.2,1);
  transition-delay: 0.3s;
}
.dud-slide.-in .dud-slide__body::after { width: 100%; }

/* Closer slide gets the biggest breath */
.dud-slide--closer .dud-slide__body {
  font-size: clamp(72px, 14vw, 240px);
}

/* Mobile: shorter viewport slides so scroll doesn't fatigue */
@media (max-width: 640px) {
  .dud-slide { min-height: 80vh; padding: 60px 16px; }
  .dud-slide__body { font-size: clamp(44px, 12vw, 88px); line-height: 0.98; }
  .dud-slide--closer .dud-slide__body { font-size: clamp(56px, 15vw, 120px); }
}

/* =============================================================================
   NUMBERED STITCHING STATEMENTS PANEL (SS25 001-005) [DEPRECATED — kept for backwards compat]
   ============================================================================= */
.dud-statements-panel {
  padding-block: clamp(80px, 12vw, 140px);
  background: var(--void);
}
.dud-statements-panel__eyebrow {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
  display: inline-block;
  padding-inline: 16px;
  margin-inline: auto;
  width: max-content;
  max-width: 100%;
}
.dud-statements-panel .wrap { max-width: 900px; }
.dud-statements-panel__intro {
  display: grid;
  gap: 12px;
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 100px);
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: var(--track);
}
.dud-statements-panel__intro .ember { color: var(--ember); }

.dud-statement {
  padding-block: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 720px) {
  .dud-statement { grid-template-columns: 200px 1fr; gap: 48px; }
}
.dud-statement__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  text-transform: uppercase;
  line-height: 1.8;
}
.dud-statement__meta span { color: var(--ember); }
.dud-statement__body {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: var(--track);
  color: var(--bone);
}
.dud-statement__body .outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--ash);
  -webkit-text-fill-color: transparent;
}
.dud-statement__body .gold { color: var(--ember); }
.dud-statement--closer .dud-statement__body {
  font-size: clamp(36px, 5vw, 64px);
  color: var(--ember);
}

/* =============================================================================
   FOOTER CENTERPIECE — DUD STITCHES ART. DUDS DO NOT.
   The emotional close. Sits above the meta/policy footer.
   ============================================================================= */
.dud-centerpiece {
  padding-block: clamp(120px, 18vw, 220px);
  text-align: center;
  border-block: 1px solid var(--border);
  background: var(--void);
  position: relative;
}
.dud-centerpiece__title {
  display: grid;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 160px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.dud-centerpiece__title .outline {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ash);
  -webkit-text-fill-color: transparent;
}

/* =============================================================================
   DUD OUTRO — "DUD stitches art. Duds do not." (legacy, kept for scroll rhythm)
   ============================================================================= */
.dud-outro {
  padding-block: clamp(80px, 10vw, 120px);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dud-outro__title {
  display: grid;
  gap: 4px;
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: var(--track);
  color: var(--bone);
}
.dud-outro__title .outline {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ash);
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

/* =============================================================================
   FILE_XXX BADGE
   ============================================================================= */
.dud-card__file {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dud-product__file {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(200,169,110,0.12);
  border: 1px solid var(--ember);
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
}
.dud-cart__row-file {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* =============================================================================
   DRAWER — Continue Browsing button
   ============================================================================= */
.dud-drawer__continue {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  color: var(--ash-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.24s ease;
  margin-top: -8px;
}
.dud-drawer__continue:hover { color: var(--ember); }

/* =============================================================================
   LEGACY SNIPPET SUPPRESSION
   If snippet 11 (BAG IT v3.4) is still active, hide its footer/modal output
   until the founder deactivates it via WP Admin → Snippets.
   ============================================================================= */
body.dud .site-footer + .site-footer,
body.dud footer + footer,
body.dud #dud-legacy-footer,
body.dud .dud-legacy-drawer,
body.dud .dud-legacy-size-guide,
body.dud a[href*="instagram.com/dudcloset/"],
body.dud footer a[href*="instagram.com/dudcloset"] {
  /* soft hide — will vanish once real snippet is deactivated */
}

/* =============================================================================
   v2.2 SALES PACK — Related grid, Recently viewed, S05 countdown,
                     low-stock urgency, product trust badges polish.
   ============================================================================= */

/* You may also like — same card structure as homepage grid */
.dud-related {
  padding-block: clamp(56px, 8vw, 100px);
  border-top: 1px solid var(--border);
}
.dud-related__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-align: center;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.dud-related__title {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 56px);
  font-size: clamp(36px, 6vw, 72px);
  color: var(--bone);
}
.dud-related__title em { color: var(--ember); font-style: italic; }
.dud-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
  max-width: var(--content-max);
  margin-inline: auto;
}
@media (min-width: 900px)  { .dud-related__grid { grid-template-columns: repeat(4, 1fr); } }

/* Recently witnessed strip — small horizontal cards, sticky-ish bottom of page */
.dud-recent {
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border);
  background: var(--void-2);
}
.dud-recent__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-align: center;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.dud-recent__strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 800px) { .dud-recent__strip { grid-template-columns: repeat(4, 1fr); } }
.dud-recent__item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--void);
  border: 1px solid var(--border);
  color: var(--bone);
  transition: border-color 0.24s ease;
}
.dud-recent__item:hover { border-color: var(--ember); color: var(--bone); }
.dud-recent__thumb {
  width: 60px; height: 72px;
  overflow: hidden;
  background: var(--void-2);
}
.dud-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dud-recent__name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: var(--track);
  line-height: 1.15;
  color: var(--bone);
}
.dud-recent__price {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ember);
  margin-top: 4px;
}

/* S05 Countdown widget */
.dud-countdown {
  padding-block: clamp(48px, 7vw, 88px);
  text-align: center;
  border-block: 1px solid var(--border);
  background: linear-gradient(180deg, var(--void), var(--void-2), var(--void));
}
.dud-countdown__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  margin-bottom: 24px;
}
.dud-countdown__grid {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 12px;
  padding: 20px 28px;
  border: 1px solid var(--border-2);
  background: var(--void);
}
.dud-countdown__cell {
  display: grid;
  gap: 4px;
  min-width: 72px;
}
.dud-countdown__cell span {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 64px);
  color: var(--bone);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dud-countdown__cell em {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
  font-style: normal;
}
.dud-countdown__body {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ash-2);
  text-transform: uppercase;
}

/* Hero prompt line for curiosity */
.dud-hero__hint {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  color: var(--ember);
  text-transform: uppercase;
  opacity: 0.7;
}

/* Face anchor small tag above THE FACE */
.dud-face__anchor {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  color: var(--ash);
  margin-bottom: 24px;
  text-transform: uppercase;
}

/* Definition panel variants (triptych lineage) */
.dud-def--panel-1 .dud-def__title { color: var(--bone); }
.dud-def--panel-2 .dud-def__title { /* outline already applied via title--outline */ }
.dud-def--panel-3 .dud-reclaim__title { color: var(--ember); }

.dud-def__caption--center { text-align: center; margin-top: 20px; }

/* Low-stock urgency hint (JS fills this on size selection) */
.dud-sizes__hint {
  min-height: 20px;
  transition: color 0.24s ease;
}
.dud-sizes__hint.-critical { color: var(--oxblood); }
.dud-sizes__hint.-critical::before {
  content: "◆ ";
  color: var(--oxblood);
}

/* =============================================================================
   UTILITIES
   ============================================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-ember { color: var(--ember); }
.text-oxblood { color: var(--oxblood); }
.text-ash { color: var(--ash-2); }

/* =========================================================================
   v3.0.0 additions — mobile-first, realistic thread, archive, reviews, GST-clean
   ========================================================================= */

/* Mobile nav toggle */
.dud-nav-toggle{
  background:transparent;border:0;padding:8px;cursor:pointer;
  width:40px;height:40px;display:none;flex-direction:column;gap:4px;
  align-items:center;justify-content:center;
}
.dud-nav-toggle span{
  display:block;width:22px;height:1.5px;background:var(--bone,#f0e6d2);transition:transform .25s,opacity .25s;
}
.dud-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.dud-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.dud-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.dud-header__actions{display:flex;align-items:center;gap:14px;margin-left:auto;}
.dud-search-toggle{
  background:transparent;border:0;color:var(--bone,#f0e6d2);padding:8px;cursor:pointer;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:2px;
}
.dud-search-toggle:hover{background:rgba(255,255,255,0.05);}

/* Search drawer */
.dud-search{
  padding:14px 20px;border-top:1px solid rgba(255,255,255,0.08);
  display:flex;gap:10px;background:#050505;
}
.dud-search input[type="search"]{
  flex:1;padding:12px 16px;background:#0d0d0d;border:1px solid #222;color:var(--bone,#f0e6d2);
  font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:13px;letter-spacing:.12em;
  border-radius:2px;
}
.dud-search input[type="search"]:focus{outline:1px solid #6b0f1a;outline-offset:1px;}
.dud-search button{
  background:#6b0f1a;color:#f8f2e2;border:0;padding:0 18px;cursor:pointer;border-radius:2px;
}

/* Mobile menu drawer */
.dud-mobile-menu{
  display:flex;flex-direction:column;gap:0;padding:20px;
  background:#050505;border-top:1px solid rgba(255,255,255,0.08);
}
.dud-mobile-menu a{
  padding:16px 4px;border-bottom:1px solid rgba(255,255,255,0.06);
  color:var(--bone,#f0e6d2);text-decoration:none;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.dud-mobile-menu a:last-child{border-bottom:0;}
.dud-mobile-menu a:hover{color:#c8272d;}

/* Skip link */
.dud-skip{
  position:absolute;left:-9999px;top:0;background:#c8272d;color:#000;padding:8px 16px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;z-index:9999;
}
.dud-skip:focus{left:20px;top:20px;}

/* Hero CTA row */
.dud-hero__ctas{
  display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;justify-content:center;
}
.dud-hero__ctas .btn{max-width:280px;}
h1.dud-hero__title{
  font-family:inherit;font-weight:inherit;font-size:inherit;margin:inherit;letter-spacing:inherit;
}

/* Product price note (tax/shipping) */
.dud-product__price-note{
  display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  color:#7a7266;margin-top:6px;font-weight:400;
}

/* Product rating (only when reviews > 0) */
.dud-product__rating{display:flex;align-items:center;gap:10px;margin:12px 0 18px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--ash,#8a8578);}
.dud-product__rating .star-rating{color:#c8a96e;}

/* Trust strip — near CTA */
.dud-trust{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;}
.dud-trust__item{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:#8a8578;
  padding-left:16px;position:relative;
}
.dud-trust__item::before{
  content:"";position:absolute;left:0;top:.5em;width:8px;height:1px;background:#6b0f1a;
}

/* Archive page — /shop/ + categories */
.dud-archive{padding:60px 0 100px;background:#000;color:var(--bone,#f0e6d2);}
.dud-archive__breadcrumb{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:#5a5348;margin-bottom:40px;
}
.dud-archive__breadcrumb a{color:#5a5348;text-decoration:none;}
.dud-archive__breadcrumb a:hover{color:#c8272d;}
.dud-archive__head{margin-bottom:50px;text-align:center;}
.dud-archive__eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;color:#6b0f1a;
  margin-bottom:18px;text-transform:uppercase;
}
.dud-archive__title{
  font-family:'Anton',sans-serif;font-size:clamp(48px,7vw,88px);letter-spacing:-.01em;line-height:.95;
  margin:0 0 12px;text-transform:uppercase;
}
.dud-archive__sub{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:#8a8578;margin:0 0 14px;
  text-transform:uppercase;
}
.dud-archive__promise{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:#c8272d;margin:0;
  text-transform:uppercase;
}
.dud-archive__cats{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px;
}
.dud-archive__cats a{
  padding:8px 18px;border:1px solid #222;color:#8a8578;text-decoration:none;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-radius:2px;
}
.dud-archive__cats a.active,.dud-archive__cats a:hover{
  border-color:#6b0f1a;color:#f0e6d2;background:rgba(107,15,26,0.1);
}
.dud-archive__toolbar{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.06);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:#8a8578;
}
.dud-archive__sort select{
  background:#0d0d0d;border:1px solid #222;color:var(--bone);padding:8px 12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:2px;margin-left:8px;
}
.dud-archive__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:36px 24px;
}
.dud-archive__pagination{
  margin-top:60px;text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
}
.dud-archive__pagination .page-numbers{
  display:inline-block;padding:10px 14px;color:#8a8578;text-decoration:none;
  border:1px solid transparent;margin:0 2px;
}
.dud-archive__pagination .page-numbers.current,
.dud-archive__pagination .page-numbers:hover{
  color:#f0e6d2;border-color:#6b0f1a;background:rgba(107,15,26,0.1);
}
.dud-archive__empty{text-align:center;padding:80px 20px;color:#8a8578;}
.dud-archive__empty-title{
  font-family:'Anton',sans-serif;font-size:32px;letter-spacing:.02em;
  color:var(--bone);margin-bottom:16px;text-transform:uppercase;
}

/* Realistic thread — v3 upgrade */
.dud-thread__path{
  stroke:url(#dud-thread-grad);stroke-width:1.6;fill:none;
  stroke-dasharray:7 5;stroke-linecap:butt;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,0.6));
}
.dud-thread--tall .dud-thread__path{stroke-width:1.9;}
.dud-thread{overflow:visible;}
/* Inline gradient defs — added via SVG defs at first thread use */

/* Sticky CTA — v3 (variable state) */
.dud-sticky-cta[data-dud-sticky-cta].is-armed .btn{background:#6b0f1a;}
.dud-sticky-cta[data-dud-sticky-cta]:not(.is-armed) .btn{
  background:#1a1a1a;border:1px solid #333;color:#8a8578;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dud-loader,.dud-witness,.dud-signal,.dud-thread__path,
  .dud-ticker__track,.dud-stitch__canvas,.dud-stitch__needle{
    animation:none !important;transition:none !important;
  }
  .dud-loader{display:none !important;}
}

/* MOBILE (≤700px) — 1-column cards, hide desktop nav, show toggle */
@media (max-width: 700px) {
  .dud-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#050505;padding:20px;border-top:1px solid rgba(255,255,255,0.08);}
  .dud-nav.-open{display:flex;}
  .dud-nav-toggle{display:flex;}
  .dud-archive__grid{grid-template-columns:1fr;gap:40px;}
  .dud-archive__toolbar{flex-direction:column;gap:14px;align-items:flex-start;}
  .dud-trust{grid-template-columns:1fr;}
  .dud-hero__ctas{flex-direction:column;align-items:stretch;}
  .dud-hero__ctas .btn{max-width:none;}
  .dud-related__grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .dud-whatsapp{bottom:80px !important;}  /* clear sticky CTA */
  .dud-sticky-cta{padding:12px 16px;}
}

/* v3.0.2 hotfix — respect [hidden] on drawers, add close affordance */
.dud-mobile-menu[hidden],
.dud-search[hidden]{ display:none !important; }

.dud-mobile-menu{ position:relative; }
.dud-mobile-menu::before{
  content:"✕ CLOSE";
  display:block;padding:14px 4px;color:#8a8578;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.18em;cursor:pointer;text-align:right;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.dud-search{ position:relative; }
.dud-search::after{
  content:"✕";
  position:absolute;top:50%;right:16px;transform:translateY(-50%);
  color:#8a8578;font-size:16px;cursor:pointer;padding:4px 8px;pointer-events:none;
}

/* Desktop: drawers stay hidden by default (only hamburger opens them on mobile) */
@media (min-width: 701px) {
  .dud-mobile-menu,
  .dud-search{ display:none !important; }
  .dud-mobile-menu.is-open,
  .dud-search.is-open{ display:block !important; }
}

/* v3.0.3 — force hero H1 to use the original display sizing (browser h1 defaults were overriding) */
h1.dud-hero__title{
  font-family:'Anton', 'Arial Black', sans-serif !important;
  font-size:clamp(64px, 14vw, 200px) !important;
  font-weight:normal !important;
  line-height:.9 !important;
  letter-spacing:-.02em !important;
  text-transform:uppercase !important;
  margin:0 0 20px !important;
  color:var(--bone, #f0e6d2);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
h1.dud-hero__title .dud-hero__question{
  font-size:1.1em;color:#c8272d;line-height:1;
}
/* On very narrow screens, tighten */
@media (max-width: 480px) {
  h1.dud-hero__title{ font-size:clamp(48px, 18vw, 96px) !important; }
}

/* v3.0.4 — CSS suppression belt for legacy duplicate footer */
body.dud footer.site-footer,
body.dud .dud-legacy-footer,
body.dud #dud-legacy-footer,
body.dud .dud-ft-inner,
body.dud .dud-ft-cols,
body.dud aside.widget_custom_html:has(a[href="#"]),
body.dud footer[role="contentinfo"]:not(.dud-footer):not(#dud-footer){
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* =========================================================================
   v3.1.0 — MOBILE POLISH + SWIPE GALLERY + ZOOM + CERTIFICATE
   ========================================================================= */

/* Kill dead vertical space on mobile — every section gets tight bounds */
@media (max-width: 700px) {
  .dud-hero{padding-block:clamp(40px,10vh,80px) !important;min-height:auto !important;}
  .dud-def{padding-block:clamp(30px,8vh,60px) !important;min-height:auto !important;}
  .dud-doctrine{padding-block:clamp(40px,8vh,70px) !important;}
  .dud-doctrine__phrases{flex-direction:column;gap:14px !important;align-items:center;}
  .dud-doctrine__sep{display:none;}
  .dud-scarcity{padding-block:clamp(40px,10vh,80px) !important;}
  .dud-stitch{padding-block:clamp(40px,8vh,60px) !important;}
  .dud-stitch__wordmark{padding:20px 0 !important;}
  .dud-centerpiece{padding-block:clamp(40px,10vh,80px) !important;}
  .dud-centerpiece__title{font-size:clamp(38px,10vw,72px) !important;line-height:.95;}
  .dud-notify{padding-block:clamp(40px,8vh,60px) !important;}
  .dud-pillars{padding-block:clamp(30px,7vh,50px) !important;}
  .dud-pillars__grid{grid-template-columns:1fr !important;gap:24px !important;}
  .dud-face{padding-block:clamp(60px,12vh,100px) !important;}
  .dud-face__mark{font-size:clamp(56px,14vw,96px) !important;}
  .dud-footer{padding-block:40px 20px !important;}
  .dud-footer__bottom{grid-template-columns:1fr !important;gap:28px !important;}
  section + section{margin-top:0 !important;}
  .wrap{padding-inline:20px !important;}
  h1,h2,h3{margin-block:0 12px !important;}
}

/* Force-remove any injected empty <br>, empty paragraphs, empty divs from post_content */
main.dud-main p:empty,
main.dud-main br:only-child,
main.dud-main div:empty:not([class]){display:none !important;}

/* =========================================================================
   PRODUCT GALLERY — SWIPE + ZOOM
   ========================================================================= */

/* Main image needs relative pos + zoom cursor + tap indicator */
.dud-product__gallery-main{position:relative;cursor:zoom-in;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.dud-product__gallery-main img{width:100%;height:auto;display:block;transition:transform .4s cubic-bezier(.2,0,.2,1);will-change:transform;}
.dud-product__gallery-main::after{
  content:"⤢ TAP TO ZOOM";
  position:absolute;bottom:14px;right:14px;
  padding:6px 12px;background:rgba(0,0,0,.55);color:#f0e6d2;
  font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:10px;letter-spacing:.16em;
  border:1px solid rgba(240,230,210,.15);border-radius:2px;
  pointer-events:none;opacity:.85;
}

/* Mobile: show swipe hint dots */
@media (max-width: 700px) {
  .dud-product__gallery-main::before{
    content:"SWIPE ←→";
    position:absolute;top:14px;left:14px;
    padding:5px 10px;background:rgba(0,0,0,.5);color:#c8a96e;
    font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
    border-radius:2px;pointer-events:none;
    animation:dud-hint-fade 4s ease-out forwards;
  }
  @keyframes dud-hint-fade{
    0%,60%{opacity:1;}
    100%{opacity:0;visibility:hidden;}
  }
  .dud-product__thumbs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;scrollbar-width:none;}
  .dud-product__thumbs::-webkit-scrollbar{display:none;}
  .dud-product__thumb{flex:0 0 72px;}
}

/* Zoom lightbox */
.dud-zoom{
  position:fixed;inset:0;background:rgba(0,0,0,.96);
  z-index:9999;display:none;align-items:center;justify-content:center;
  animation:dud-zoom-fade .28s ease-out;
}
.dud-zoom.is-open{display:flex;}
@keyframes dud-zoom-fade{from{opacity:0}to{opacity:1}}
.dud-zoom__img{
  max-width:96vw;max-height:88vh;object-fit:contain;
  transform:scale(1);transform-origin:center;transition:transform .3s;
  cursor:grab;
}
.dud-zoom__img.is-magnified{transform:scale(2);cursor:grabbing;}
.dud-zoom__close{
  position:absolute;top:24px;right:24px;
  width:48px;height:48px;background:transparent;border:1px solid rgba(240,230,210,.4);
  color:#f0e6d2;font-size:20px;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.dud-zoom__close:hover{border-color:#c8272d;background:rgba(200,39,45,.1);}
.dud-zoom__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;background:transparent;border:1px solid rgba(240,230,210,.3);
  color:#f0e6d2;font-size:26px;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.dud-zoom__nav:hover{border-color:#c8a96e;color:#c8a96e;}
.dud-zoom__nav--prev{left:24px;}
.dud-zoom__nav--next{right:24px;}
.dud-zoom__counter{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  padding:8px 18px;background:rgba(0,0,0,.6);border:1px solid rgba(240,230,210,.2);
  color:#c8a96e;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  border-radius:2px;
}

@media (max-width: 700px) {
  .dud-zoom__close{top:16px;right:16px;width:40px;height:40px;}
  .dud-zoom__nav{width:44px;height:44px;font-size:22px;}
  .dud-zoom__nav--prev{left:12px;}
  .dud-zoom__nav--next{right:12px;}
  .dud-zoom__counter{bottom:16px;font-size:10px;}
}

/* =========================================================================
   THE SURPRISE — CERTIFICATE OF ISSUE
   Rendered on order-received (thank-you) page. Every buyer gets a
   downloadable proof-of-piece certificate — art-collector feeling.
   ========================================================================= */
.dud-certificate{
  max-width:820px;margin:60px auto;padding:56px 44px;
  background:linear-gradient(180deg,#0a0a0a 0%,#000000 100%);
  border:1px solid rgba(200,169,110,.35);
  position:relative;overflow:hidden;
  font-family:var(--font-mono,'JetBrains Mono',monospace);color:#f0e6d2;
}
.dud-certificate::before{
  content:"";position:absolute;inset:16px;
  border:1px dashed rgba(200,169,110,.25);pointer-events:none;
}
.dud-certificate::after{
  content:"DUD® · SIGNED · CHENNAI · SS25 · ANTI-FASHION · SIGNED · DUD®";
  position:absolute;top:50%;left:-20%;right:-20%;transform:translateY(-50%) rotate(-8deg);
  font-size:120px;letter-spacing:0;color:rgba(107,15,26,.05);
  white-space:nowrap;pointer-events:none;font-family:'Anton',sans-serif;
  z-index:0;
}
.dud-certificate > *{position:relative;z-index:1;}
.dud-certificate__eyebrow{
  font-size:11px;letter-spacing:.32em;color:#c8a96e;text-align:center;margin-bottom:12px;
}
.dud-certificate__title{
  font-family:'Anton','Arial Black',sans-serif;font-size:clamp(38px,6vw,64px);
  letter-spacing:.02em;line-height:1;text-align:center;color:#f0e6d2;
  margin:0 0 8px;text-transform:uppercase;
}
.dud-certificate__sub{
  text-align:center;font-size:12px;letter-spacing:.24em;color:#8a8578;
  margin-bottom:36px;text-transform:uppercase;
}
.dud-certificate__piece{
  text-align:center;margin:32px 0;padding:24px 0;
  border-block:1px solid rgba(200,169,110,.3);
}
.dud-certificate__piece-num{
  font-family:'Anton',sans-serif;font-size:clamp(64px,10vw,120px);
  color:#c8272d;letter-spacing:-.02em;line-height:1;margin:0;
}
.dud-certificate__piece-total{
  color:#8a8578;font-size:.5em;
}
.dud-certificate__piece-label{
  font-size:11px;letter-spacing:.28em;color:#c8a96e;margin-top:8px;text-transform:uppercase;
}
.dud-certificate__details{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;margin:32px 0;
  font-size:11px;letter-spacing:.16em;line-height:1.6;
}
.dud-certificate__row{border-bottom:1px dashed rgba(240,230,210,.1);padding-bottom:8px;}
.dud-certificate__label{color:#8a8578;text-transform:uppercase;font-size:10px;letter-spacing:.2em;}
.dud-certificate__value{color:#f0e6d2;font-size:14px;letter-spacing:.08em;margin-top:4px;text-transform:uppercase;}
.dud-certificate__doctrine{
  text-align:center;font-style:italic;color:#c8a96e;letter-spacing:.16em;
  margin:32px 0;line-height:1.7;font-size:12px;
}
.dud-certificate__signature{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:48px;padding-top:20px;border-top:1px dashed rgba(240,230,210,.2);
}
.dud-certificate__sig-block{flex:1;text-align:center;font-size:10px;letter-spacing:.2em;color:#8a8578;text-transform:uppercase;}
.dud-certificate__sig-name{
  font-family:'Anton',sans-serif;font-size:28px;color:#f0e6d2;
  letter-spacing:.04em;margin-bottom:4px;
}
.dud-certificate__cta{
  display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap;
}
.dud-certificate__btn{
  padding:14px 28px;background:transparent;border:1px solid #c8a96e;color:#c8a96e;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;transition:.25s;
}
.dud-certificate__btn:hover{background:#c8a96e;color:#000;}
.dud-certificate__btn--primary{background:#c8272d;border-color:#c8272d;color:#f8f2e2;}
.dud-certificate__btn--primary:hover{background:#6b0f1a;border-color:#6b0f1a;}

@media (max-width: 700px) {
  .dud-certificate{padding:32px 20px;margin:32px 16px;}
  .dud-certificate__details{grid-template-columns:1fr;}
  .dud-certificate__signature{flex-direction:column;gap:24px;}
}
@media print {
  body > *{display:none !important;}
  .dud-certificate{display:block !important;box-shadow:none !important;border:2px solid #000;background:#fff !important;color:#000 !important;}
  .dud-certificate__cta{display:none !important;}
  .dud-certificate *{color:#000 !important;}
  .dud-certificate::after{color:rgba(0,0,0,.05) !important;}
}