/* ============================================================
   DEVILS OF DIRT HAWKING — EFFECTS
   Hard edges, heavy outlines, blocky offset shadows.
   This brand is stickers, patches & screen prints — NOT soft SaaS.
   ============================================================ */

:root {
  /* --- Radii: mostly sharp. Stickers & patches have hard or
     slightly-cut corners, never pill-soft. ------------------ */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;   /* default for inputs/cards */
  --radius-md: 6px;
  --radius-full: 999px; /* only for round badges/avatars */

  /* --- Border widths: thick die-cut outlines -------------- */
  --border-thin: 1px;
  --border-med: 2px;
  --border-thick: 3px;   /* sticker outline */
  --border-stamp: 4px;

  /* --- Shadows: hard, offset, no soft glow ---------------- */
  --shadow-none: none;
  /* blocky offset "sticker" drop */
  --shadow-hard-sm: 3px 3px 0 var(--ink-950);
  --shadow-hard-md: 5px 5px 0 var(--ink-950);
  --shadow-hard-gold: 4px 4px 0 var(--gold-700);
  /* subtle lift for cards on dark (used sparingly) */
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.45);
  /* inset press */
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5);

  /* --- Motion --------------------------------------------- */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 90ms; /* @kind other */
  --dur-med: 160ms; /* @kind other */

  /* --- Grain / grit overlay --------------------------------
     A reusable feTurbulence noise data-URI. Layer over surfaces
     with low opacity for the distressed print texture. -------- */
  --grit-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */
}

/* Utility: drop this class on a positioned element to add grit. */
.dodh-grit::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grit-noise);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.12;
  pointer-events: none;
}
  .grit{position:relative;}
  .grit::after{content:"";position:absolute;inset:0;background-image:var(--grit-noise);
    background-size:180px 180px; mix-blend-mode:color-burn; opacity:1; pointer-events:none;}
/* ============================================================
   PHOTO-HALFTONE TEXTURE OVERLAYS
   Two real screen-printed halftone scans (riveted plank + stone wall)
   live in assets/, processed into single-ink overlays:

     *-light.png → bone grit, for DARK fields (ink)
     *-dark.png  → ink grit,  for LIGHT fields (gold/bone)

   USAGE — drop an empty layer element inside a position:relative box:
     <div class="panel" style="position:relative;overflow:hidden">
       <div class="dodh-tex dodh-tex--rivet"></div>   // dark panel
       …content (give it position:relative to sit above)…
     </div>
   On gold/bone panels use the *-on-light variants (ink grit, multiply).
   Tune intensity with --tex-opacity. URLs are in the rules so they
   resolve relative to THIS file at any consumer depth.
   ============================================================ */
:root {
  --tex-opacity: 0.3; /* @kind other */
}

.dodh-tex {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: .1;
}
/* DARK panels — pale bone grit */
.dodh-tex--rivet { background-image: url("../assets/texture-rivet-light.png"); }
.dodh-tex--brick { background-image: url("../assets/texture-brick-light.png"); }
/* LIGHT panels — ink grit, multiplied into the field */
.dodh-tex--rivet-on-light {
  background-image: url("../assets/texture-rivet-dark.png");
  mix-blend-mode: multiply;
  opacity: var(--tex-opacity, 0.5);
}
.dodh-tex--brick-on-light {
  background-image: url("../assets/texture-brick-dark.png");
  mix-blend-mode: multiply;
  opacity: var(--tex-opacity, 0.5);
}



.dodh-stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 6px 12px;
    line-height: 1;
    border: var(--border-med) solid currentColor;
    border-radius: var(--radius-xs);
    transform: rotate(-3deg);
    background: transparent;
}
.item-stamp-limited:before {
    content: "limited";
    position: absolute;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 6px 12px;
    line-height: 1;
    border: var(--border-med) solid currentColor;
    border-radius: var(--radius-xs);
    transform: rotate(-3deg);
    background: transparent;
    color:var(--gold-500);
    z-index: 1;
    top: 20px;
    left: 20px;
}
.stamp{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:700;
    font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;line-height:1;
    border:var(--border-med) solid currentColor;border-radius:var(--radius-xs);transform:rotate(-3deg);}
.dodh-stamp--flat {
    transform: none;
}
  .stamp--gold{color:var(--gold-500)}
  .stamp--rust{color:var(--rust-400)}
  .stamp--bone{color:var(--bone-200)}
  .stamp--olive{color:var(--olive-400)}
  .stamp--filled{color:var(--ink-950);background:var(--gold-500);border-color:var(--ink-950)}