/* davysh brand tokens v2.0 - A1 Signature Chrome. "Wanted, by design."
   Palette NOIR: obsidian, white, wine, chrome silver. UI only: photos keep their real colours.
   Generated by build/tokens.py. Edit there, not here. */
:root {
  /* colour */
  --dv-void: #000000; /* Pure black. Payhip page base, deepest shadow. */
  --dv-obsidian: #0a0a0a; /* Canvas. davysh.com page background and theme-color. */
  --dv-onyx: #111013; /* Raised surface: plates, cards, image wells. */
  --dv-graphite: #1a191d; /* Second surface: inputs, hover wells. */
  --dv-gunmetal: #2a2930; /* Strong rule, scrollbar thumb, disabled fill. */
  --dv-ash: #77747d; /* Decorative and disabled marks only. Not for body text. */
  --dv-smoke: #aaa7af; /* Secondary text: captions, ledes, meta. */
  --dv-bone: #e9e7eb; /* Body text. */
  --dv-frost: #f5f5f5; /* Headings, the white signature, button labels. */
  --dv-pewter: #8a8e96; /* Chrome shadow tone, inside gradients only. */
  --dv-chrome: #c8ccd4; /* Chrome silver: icons, hairlines, ghost button edge, star. */
  --dv-mirror: #eef0f4; /* Chrome highlight and focus ring. */
  --dv-oxblood: #3a0f18; /* Deepest wine: glows and washes behind panels. */
  --dv-wine: #6b0f1a; /* Brand wine: fills behind white text. */
  --dv-bordeaux: #8e1b2b; /* Primary action fill. */
  --dv-garnet: #b3243a; /* Primary hover, the one accent per view. */
  --dv-rose-wine: #e46a7e; /* Wine-coloured TEXT on black (AA). Error text. */
  /* alpha */
  --dv-line: rgba(222, 226, 234, .14); /* Hairline dividers and card borders. */
  --dv-line-hi: rgba(240, 242, 247, .42); /* Emphasised border, hover edge. */
  --dv-glass: rgba(14, 13, 16, .72); /* Smoked-glass nav fill (with blur). */
  --dv-fade: rgba(0, 0, 0, .78); /* Neutral black edge fade over photos for legibility. Never coloured. */
  --dv-wash-wine: rgba(107, 15, 26, .35); /* Hover wash on dark surfaces (never on photos). */
  --dv-wash-white: rgba(255, 255, 255, .06); /* Neutral hover fill on dark. */
  /* roles (remap these, not the primitives) */
  --dv-c-bg: var(--dv-obsidian);
  --dv-c-bg-deep: var(--dv-void);
  --dv-c-surface: var(--dv-onyx);
  --dv-c-surface-2: var(--dv-graphite);
  --dv-c-text: var(--dv-bone);
  --dv-c-text-strong: var(--dv-frost);
  --dv-c-text-muted: var(--dv-smoke);
  --dv-c-text-faint: var(--dv-ash);
  --dv-c-action: var(--dv-bordeaux);
  --dv-c-action-hover: var(--dv-garnet);
  --dv-c-on-action: var(--dv-frost);
  --dv-c-accent: var(--dv-garnet);
  --dv-c-edge: var(--dv-chrome);
  --dv-c-focus: var(--dv-mirror);
  --dv-c-icon: var(--dv-chrome);
  --dv-c-danger: var(--dv-rose-wine);
  /* gradients */
  --dv-g-chrome: linear-gradient(135deg, #5a5d63 0%, #eceef2 14%, #8a8e96 30%, #3d3f44 46%, #dfe2e8 60%, #74777e 76%, #f6f7f9 90%, #5a5d63 100%);
  --dv-g-chrome-v: linear-gradient(180deg, #f6f7f9 0%, #c8ccd4 22%, #5a5d63 50%, #dfe2e8 74%, #8a8e96 100%);
  --dv-g-chrome-text: linear-gradient(180deg, #ffffff 0%, #e9ebef 30%, #a9adb5 52%, #f2f3f6 70%, #b9bcc3 100%);
  --dv-g-stroke: linear-gradient(90deg, transparent 0%, rgba(170, 174, 182, .35) 8%, #c8ccd4 38%, #ffffff 62%, rgba(170, 174, 182, .35) 92%, transparent 100%);
  --dv-g-obsidian: linear-gradient(160deg, #17161a 0%, #0a0a0a 45%, #000000 100%);
  --dv-g-wine: linear-gradient(180deg, #9b2234 0%, #6b0f1a 55%, #3a0f18 100%);
  --dv-g-sheen: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  --dv-g-glow-wine: radial-gradient(60% 60% at 50% 50%, rgba(142, 27, 43, .32) 0%, rgba(107, 15, 26, .10) 45%, transparent 72%);
  --dv-g-photo-fade: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .78) 100%);
  /* type */
  --dv-font-display: "Dv Dash", "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --dv-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --dv-t-label: .75rem;
  --dv-t-cap: .8125rem;
  --dv-t-small: .9375rem;
  --dv-t-body: 1.0625rem;
  --dv-t-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --dv-t-h4: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --dv-t-h3: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
  --dv-t-h2: clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem);
  --dv-t-display: clamp(3.5rem, 1.4rem + 6.8vw, 6rem);
  --dv-lh-tight: .94;
  --dv-lh-snug: 1.1;
  --dv-lh-base: 1.6;
  --dv-ls-display: -.02em;
  --dv-ls-tight: -.01em;
  --dv-ls-base: 0;
  --dv-ls-label: .18em;
  --dv-fw-regular: 400;
  --dv-fw-medium: 500;
  --dv-fw-semibold: 600;
  /* space (4px base) and layout */
  --dv-s0: 0; --dv-s1: .25rem; --dv-s2: .5rem; --dv-s3: .75rem; --dv-s4: 1rem; --dv-s5: 1.25rem; --dv-s6: 1.5rem; --dv-s8: 2rem; --dv-s10: 2.5rem; --dv-s12: 3rem; --dv-s16: 4rem; --dv-s20: 5rem; --dv-s24: 6rem; --dv-s32: 8rem;
  --dv-section: clamp(6rem, 3.5rem + 8vw, 11rem);
  --dv-max: 1320px;
  --dv-measure: 68ch;
  --dv-gutter: clamp(1.25rem, .55rem + 3vw, 3.5rem);
  --dv-tap: 44px;
  /* radius and strokes (chrome plates are chamfered, not rounded) */
  --dv-r-none: 0; --dv-r-xs: 2px; --dv-r-sm: 4px; --dv-r-md: 6px; --dv-r-pill: 999px; --dv-r-chamfer: 10px; --dv-r-chamfer-sm: 6px;
  --dv-stroke-hair: 1px; --dv-stroke-edge: 1.5px; --dv-stroke-sig: 2px; --dv-stroke-icon: 1.5px;
  /* shadow (neutral, offset + blur; no coloured halos) */
  --dv-shadow-1: 0 10px 28px rgba(0, 0, 0, .45);
  --dv-shadow-2: 0 22px 60px rgba(0, 0, 0, .55);
  --dv-shadow-3: 0 36px 100px rgba(0, 0, 0, .65);
  --dv-shadow-plate: 0 30px 60px -20px rgba(0, 0, 0, .75);
  --dv-shadow-button: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 24px -8px rgba(0, 0, 0, .6);
  --dv-shadow-bevel: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .6);
  /* motion */
  --dv-ease-out: cubic-bezier(.16, 1, .3, 1);
  --dv-ease-in: cubic-bezier(.7, 0, .84, 0);
  --dv-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dv-dur-fast: 150ms;
  --dv-dur-base: 250ms;
  --dv-dur-slow: 500ms;
  --dv-dur-draw: 1400ms;
  --dv-dur-sheen: 1100ms;
}
/* davysh.com v3 — A1 Signature Chrome. Components adapted from davysh-theme.css (brand kit).
   UI palette: obsidian, white, wine, chrome silver. No gold in the UI. Photos are never filtered. */
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(fonts/bodoni-moda-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Dv Dash"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(fonts/dash-italic.woff2) format("woff2"); unicode-range: U+002D, U+2013-2014; }
@font-face { font-family: "Dv Dash"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/dash-roman.woff2) format("woff2"); unicode-range: U+002D, U+2013-2014; }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; scrollbar-color: var(--dv-gunmetal) var(--dv-obsidian); color-scheme: dark; }
body { margin: 0; background: var(--dv-c-bg); color: var(--dv-c-text); font: 400 var(--dv-t-body)/var(--dv-lh-base) var(--dv-font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; caret-color: var(--dv-garnet); accent-color: var(--dv-bordeaux); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: var(--dv-bordeaux); color: #fff; }
:focus-visible { outline: 2px solid var(--dv-c-focus); outline-offset: 4px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; transition: transform var(--dv-dur-base) var(--dv-ease-out); }
.skip { position: absolute; left: var(--dv-s4); top: -100px; z-index: 50; padding: var(--dv-s3) var(--dv-s4); background: var(--dv-frost); color: var(--dv-obsidian); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--dv-s4); }
.kw { margin-right: -.13em; }
:root { --chamfer: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }

/* ---- Starfield ---- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background-color: var(--dv-obsidian);
  background-image:
    radial-gradient(1.2px 1.2px at 23px 41px, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 97px 13px, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 151px 119px, rgba(225,228,236,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 61px 167px, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 189px 73px, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 131px 199px, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(60% 45% at 92% 96%, rgba(58,15,24,.34) 0%, transparent 70%),
    radial-gradient(45% 40% at 4% 62%, rgba(58,15,24,.22) 0%, transparent 72%);
  background-size: 211px 223px, 211px 223px, 211px 223px, 211px 223px, 211px 223px, 211px 223px, 100% 100%, 100% 100%; }
.sky::before, .sky::after { content: ""; position: absolute; inset: -10%; }
.sky::before { background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 260px 30px, rgba(235,238,244,.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 180px 250px, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 220px 140px, #fff 50%, transparent 51%);
  background-size: 337px 331px; }
.sky::after { background-image:
    radial-gradient(2px 2px at 120px 90px, #fff 40%, transparent 75%),
    radial-gradient(1.6px 1.6px at 330px 560px, rgba(255,255,255,.9) 40%, transparent 75%),
    radial-gradient(2.2px 2.2px at 30px 470px, #fff 40%, transparent 75%);
  background-size: 563px 617px; }

/* ---- Signature-stroke dividers ---- */
.divider { display: block; width: min(100%, 520px); aspect-ratio: 640 / 56; background: url(brand/kit/divider-tail.svg) left center / contain no-repeat; }
.divider-center { aspect-ratio: 640 / 48; background-image: url(brand/kit/divider-center.svg); background-position: center; margin-inline: auto; }

/* ---- Buttons ---- */
.btn { --cut: 14px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--dv-s3);
  min-height: 54px; padding: 0 var(--dv-s8); border: 0; background: none; color: var(--dv-c-text-strong);
  font: 600 1rem/1 var(--dv-font-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: color var(--dv-dur-base) ease, transform var(--dv-dur-base) var(--dv-ease-out); }
.btn::before, .btn::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.btn:active { transform: translateY(1px); }
/* Primary: wine pill with a polished chrome rim */
.btn-wine { border: 1.5px solid transparent; border-radius: var(--dv-r-pill); overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #a3263a 0%, var(--dv-wine) 52%, var(--dv-oxblood) 100%) padding-box, var(--dv-g-chrome) border-box;
  box-shadow: var(--dv-shadow-button); }
.btn-wine::after { inset: 0; background: var(--dv-g-sheen); transform: translateX(-120%); }
.btn-wine:hover, .cartel-join:hover .cj-btn { background: linear-gradient(180deg, #b8304a 0%, var(--dv-bordeaux) 52%, var(--dv-wine) 100%) padding-box, var(--dv-g-chrome) border-box; }
/* Ghost: chamfered obsidian plate with a chrome edge */
.btn-ghost::before { inset: 0; background: var(--dv-g-chrome);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }
.btn-ghost::after { inset: 1.5px; background: linear-gradient(180deg, #1d1c21 0%, #0c0b0e 55%, #050506 100%);
  clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% 50%, calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 50%);
  transition: background var(--dv-dur-base) ease; }
.btn-ghost:hover::after { background: linear-gradient(180deg, #2a2930 0%, #121115 55%, #08080a 100%); }
.btn-sm { min-height: 44px; padding: 0 var(--dv-s6); font-size: .9375rem; }
.btn:hover .ico, .card-link:hover .ico, .world:hover .ico, .find-list a:hover .ico, .hero-feature:hover .ico, .cartel-join:hover .ico { transform: translate(3px, -3px); }

/* ---- Badges ---- */
.badges { position: absolute; top: clamp(16px, 5.5%, 26px); left: clamp(18px, 6.5%, 30px); z-index: 3; display: flex; gap: var(--dv-s2); }
.badge { --cut: 6px; position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  font: 600 .6875rem/1 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-frost); }
.badge::before, .badge::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); }
.badge::before { inset: 0; background: var(--dv-g-chrome); }
.badge::after { inset: 1px; background: rgba(10, 10, 10, .9); }

/* ---- Nav: smoked-glass pill with a chrome rail ---- */
.bar { position: fixed; inset: 0 0 auto; z-index: 30; padding: var(--dv-s3) var(--dv-gutter) 0; pointer-events: none; }
.pill { pointer-events: auto; position: relative; max-width: var(--dv-max); margin: 0 auto; display: flex; align-items: center; gap: var(--dv-s2);
  min-height: 58px; padding: 6px 6px 6px var(--dv-s6); border: 1px solid var(--dv-line); border-radius: var(--dv-r-pill);
  background: var(--dv-glass); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: var(--dv-shadow-1); }
.pill::before { content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 1px; background: var(--dv-g-stroke); }
.pill-mark { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.pill-mark img { width: 136px; height: auto; margin: -8px 0 -6px; }
.pill-links { display: flex; gap: var(--dv-s1); }
.pill-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--dv-s4); border-radius: var(--dv-r-pill); font: italic 400 1.125rem/1 var(--dv-font-display); color: var(--dv-c-text); text-decoration: none; transition: background-color var(--dv-dur-base) ease, color var(--dv-dur-base) ease; }
.pill-links a:hover { background: var(--dv-wash-white); color: #fff; }

/* ---- Hero: the signature is the motif ---- */
.hero { position: relative; display: grid; min-height: 100svh; isolation: isolate; }
.hero-media { position: relative; z-index: -1; overflow: clip; }
.hero-media picture { height: 100%; }   /* so the image (and its fade mask) ends exactly where the frame does */
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: relative; display: flex; flex-direction: column; gap: var(--dv-s6); }
.hero-title { display: grid; gap: var(--dv-s4); margin: 0; font-weight: 400; }
.hero-sig { position: relative; display: block; width: clamp(250px, 72vw, 560px); margin-left: -2%; }
/* Wine glow behind the signature: desktop only, where it sits on the obsidian column and never over the photo. */
.hero-sig::before { content: ""; position: absolute; inset: -30% -16%; z-index: -1; background: var(--dv-g-glow-wine); pointer-events: none; display: none; }
.hero-sig img { width: 100%; height: auto; aspect-ratio: 720 / 302; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6)); }
.hero-tag { font: italic 400 var(--dv-t-h2)/.96 var(--dv-font-display); letter-spacing: -.015em; color: var(--dv-frost); text-wrap: balance; }
.hero-tag .ln { display: block; }
.hero-tag .ln + .ln { padding-left: .9em; }
.hero-copy > .divider { width: min(100%, 440px); margin-top: calc(var(--dv-s3) * -1); }
.hero-line { max-width: 34ch; font-size: var(--dv-t-lead); line-height: 1.5; color: var(--dv-c-text); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--dv-s3); margin-top: var(--dv-s2); }
.hero-feature { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: var(--dv-s4); margin-top: var(--dv-s4); padding-top: var(--dv-s4); border-top: 1px solid var(--dv-line); max-width: 30rem; min-height: 44px; text-decoration: none; color: var(--dv-c-text-muted); }
.hf-name { font: italic 400 1.75rem/1 var(--dv-font-display); color: #fff; }
.hf-kind { font-size: .9375rem; line-height: 1.45; }
.hero-feature .ico { align-self: center; color: var(--dv-chrome); }
.hero-feature:hover .hf-kind { color: var(--dv-c-text); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: min(100svh, 1040px); }
  .hero-media { grid-column: 2; grid-row: 1; height: min(100svh, 1040px); }
  .hero-media img { object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%), linear-gradient(to top, transparent 0, #000 16%);
    mask-image: linear-gradient(to right, transparent 0, #000 26%), linear-gradient(to top, transparent 0, #000 16%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero-copy { grid-column: 1; grid-row: 1; align-self: center; justify-self: end; width: min(100%, calc(var(--dv-max) / 2 + 4rem)); padding: 7.5rem var(--dv-s8) var(--dv-s12) var(--dv-gutter); margin-right: -6rem; z-index: 1; }
  .hero-sig { width: clamp(300px, 34vw, 540px); }
  .hero-sig::before { display: block; }
  .hero-tag { font-size: clamp(3rem, 1.2rem + 3.6vw, 5rem); }
}
@media (max-width: 899.98px) {
  .hero { min-height: 0; }
  .hero-media { height: min(62svh, 640px); min-height: 420px; }   /* v3.8: keeps the Shop CTA in the first screen on phones */
  .hero-media img { object-position: 50% 22%;
    -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0,0,0,.35) 18%, #000 44%); mask-image: linear-gradient(to top, transparent 0, rgba(0,0,0,.35) 18%, #000 44%); }
  .hero-copy { margin-top: -9rem; padding: 0 var(--dv-gutter); }
}

/* ---- Section heads ---- */
.wanted, .lines, .about, .cartel { max-width: var(--dv-max); margin: 0 auto; padding: var(--dv-section) var(--dv-gutter) 0; }
.sec-head { display: grid; gap: var(--dv-s4); margin-bottom: var(--dv-s16); }
.sec-head .divider { margin-top: calc(var(--dv-s2) * -1); }
.sec-title { font: italic 400 var(--dv-t-h2)/1 var(--dv-font-display); letter-spacing: -.015em; color: var(--dv-frost); text-wrap: balance; }
.sec-lede { max-width: 42ch; font-size: var(--dv-t-lead); line-height: 1.5; color: var(--dv-c-text-muted); }
.sec-head-center { justify-items: center; text-align: center; }
.sec-head-center .sec-lede { margin-inline: auto; }

/* ---- Product cards 3:4, chrome frame + star ---- */
.gallery { display: grid; gap: var(--dv-s16) var(--dv-s8); grid-template-columns: minmax(0, 1fr); }
.card-link { display: grid; gap: var(--dv-s5); text-decoration: none; color: inherit; }
.card-plate { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--dv-onyx); box-shadow: var(--dv-shadow-plate);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.card-plate picture { height: 100%; }
.card-plate img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dv-dur-slow) var(--dv-ease-out); }
.card-plate::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url(brand/kit/frame-card-3x4.svg) center / 100% 100% no-repeat; }
.card-plate::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.32) 0, transparent 16%, transparent 72%, rgba(0,0,0,.5) 100%); }
.card-body { display: grid; gap: var(--dv-s2); padding: 0 var(--dv-s1); }
.card-name { font: italic 400 var(--dv-t-h3)/1.1 var(--dv-font-display); color: var(--dv-frost); }
.card-kind { font: 600 var(--dv-t-label)/1.3 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-chrome); }
.card-desc { max-width: 44ch; color: var(--dv-c-text-muted); }
.card-cta { display: inline-flex; align-items: center; gap: var(--dv-s2); margin-top: var(--dv-s2); font-weight: 600; font-size: .9375rem; color: var(--dv-c-text); }
.card-link:hover .card-plate img { transform: scale(1.03); }
.card-link:hover .card-name { text-decoration: underline; text-decoration-color: var(--dv-garnet); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.card-link:hover .card-cta { color: #fff; }
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dv-s20) var(--dv-s10); }
  .card:nth-child(3n+2) { margin-top: var(--dv-s16); }
}

/* ---- Worlds ---- */
.worlds { margin-top: var(--dv-section); }
.worlds-band { position: relative; display: grid; align-items: end; min-height: clamp(26rem, 62vw, 46rem); overflow: hidden; isolation: isolate; }
.worlds-bg { position: absolute; inset: 0; z-index: -1; }
.worlds-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.worlds-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--dv-obsidian) 0, rgba(10,10,10,.55) 30%, transparent 62%), linear-gradient(to bottom, var(--dv-obsidian) 0, transparent 14%); }
.worlds-head { width: 100%; max-width: var(--dv-max); margin: 0 auto; padding: 0 var(--dv-gutter) var(--dv-s20); display: grid; gap: var(--dv-s4); }
.worlds-head .divider { margin-top: calc(var(--dv-s2) * -1); }
.worlds-head .sec-lede { color: var(--dv-c-text); }
.world-pair { max-width: var(--dv-max); margin: 0 auto; padding: 0 var(--dv-gutter); display: grid; gap: var(--dv-s12) var(--dv-s10); }
.world { display: grid; align-content: start; gap: var(--dv-s2); text-decoration: none; color: inherit; }
.world-plate { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: var(--dv-s4); background: var(--dv-onyx); box-shadow: var(--dv-shadow-plate);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.world-plate picture { height: 100%; }
.world-plate::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url(brand/kit/frame-16x9.svg) center / 100% 100% no-repeat; }
.world-plate .badges { top: clamp(14px, 7%, 24px); left: clamp(18px, 4.5%, 30px); }
.world img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--dv-ease-out); }
.world:hover img { transform: scale(1.03); }
.world-name { font: italic 400 var(--dv-t-h3)/1.1 var(--dv-font-display); color: var(--dv-frost); }
.world:hover .world-name { text-decoration: underline; text-decoration-color: var(--dv-garnet); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.world-kind { color: var(--dv-c-text-muted); }
@media (min-width: 760px) { .world-pair { grid-template-columns: 1fr 1fr; } .world:nth-child(2) { margin-top: var(--dv-s16); } }

/* ---- Lines ---- */
.line-list { border-bottom: 1px solid var(--dv-line); }
.line { display: grid; gap: var(--dv-s4); padding: var(--dv-s8) 0; border-top: 1px solid var(--dv-line); }
.line-name { display: flex; align-items: center; gap: var(--dv-s4); font: italic 400 clamp(2rem, 1.5rem + 1.8vw, 3rem)/1 var(--dv-font-display); color: var(--dv-frost); }
.line-name .star { flex: none; width: 14px; height: 15px; color: var(--dv-chrome); }
.line-items { display: flex; flex-wrap: wrap; gap: var(--dv-s2) var(--dv-s8); align-content: center; }
.line-items a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.125rem; font-weight: 500; color: var(--dv-c-text); text-decoration: none;
  background: linear-gradient(var(--dv-garnet), var(--dv-garnet)) 0 calc(100% - 8px) / 0 1px no-repeat; transition: background-size .35s var(--dv-ease-out), color .2s ease; }
.line-items a:hover { color: #fff; background-size: 100% 1px; }
.lines-more { margin-top: var(--dv-s8); color: var(--dv-c-text-muted); }
.lines-more a { color: var(--dv-c-text); }
.lines-more a:hover { color: #fff; text-decoration-color: var(--dv-garnet); }
@media (min-width: 900px) { .line { grid-template-columns: 4fr 8fr; align-items: center; padding: var(--dv-s10) 0; } }

/* ---- About: chrome-cornered panel ---- */
.framed { position: relative; display: grid; gap: var(--dv-s10); padding: clamp(2rem, 1rem + 4vw, 4.5rem); border: 1px solid var(--dv-line); background: linear-gradient(180deg, rgba(17,16,19,.72), rgba(10,10,10,.4)); }
.framed::before, .framed::after { content: ""; position: absolute; width: clamp(64px, 8vw, 90px); aspect-ratio: 1; pointer-events: none; background: url(brand/kit/corner-flourish.svg) 0 0 / contain no-repeat; }
.framed::before { top: -6px; left: -6px; }
.framed::after { right: -6px; bottom: -6px; transform: rotate(180deg); }
@media (min-width: 900px) { .framed { grid-template-columns: 7fr 5fr; align-items: end; } }

/* ---- Cartel ---- */
.cartel .sec-head { margin-bottom: var(--dv-s12); }
.tile { --cut: 10px; position: relative; isolation: isolate; display: grid; place-items: center; width: 56px; height: 56px; color: var(--dv-chrome); transition: color var(--dv-dur-base) ease; }
.tile::before, .tile::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); }
.tile::before { inset: 0; background: var(--dv-g-chrome); opacity: .55; transition: opacity var(--dv-dur-base) ease; }
.tile::after { inset: 1px; background: var(--dv-obsidian); }
.tile .pf { width: 26px; height: 26px; }
.tile-lg { --cut: 14px; width: 84px; height: 84px; color: var(--dv-mirror); }
.tile-lg .pf { width: 40px; height: 40px; }
.cartel-join { --cut: 18px; position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--dv-s5) var(--dv-s6); padding: var(--dv-s8); text-decoration: none; color: var(--dv-c-text); }
.cartel-join::before, .cartel-join::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); pointer-events: none; }
.cartel-join::before { inset: 0; background: var(--dv-g-chrome); opacity: .6; transition: opacity var(--dv-dur-base) ease; }
.cartel-join::after { inset: 1px; background: radial-gradient(120% 140% at 0% 0%, rgba(142,27,43,.40), rgba(58,15,24,.16) 50%, rgba(10,10,10,.96) 85%), var(--dv-obsidian); }
.cartel-join:hover::before { opacity: 1; }
.cartel-join:hover .tile, .find-list a:hover .tile, .find-list a:focus-visible .tile { color: #fff; }
.cartel-join:hover .tile::before, .find-list a:hover .tile::before, .find-list a:focus-visible .tile::before { opacity: 1; }
.cj-text { display: grid; gap: var(--dv-s2); }
.cj-name { font: italic 400 clamp(1.875rem, 1.4rem + 1.6vw, 3rem)/1 var(--dv-font-display); color: #fff; }
.cj-line { color: var(--dv-c-text); }
.cj-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .cartel-join { grid-template-columns: auto 1fr auto; padding: var(--dv-s10) var(--dv-s12); } .cj-btn { grid-column: auto; } }
@media (max-width: 599.98px) { .cartel-join { padding: var(--dv-s6); } .tile-lg { --cut: 11px; width: 64px; height: 64px; } .tile-lg .pf { width: 32px; height: 32px; } .cj-btn { justify-self: stretch; } }

.find-list { margin-top: var(--dv-s10); border-bottom: 1px solid var(--dv-line); }
.find-list a { display: grid; grid-template-columns: 56px minmax(7rem, 3fr) 1fr auto; align-items: center; gap: var(--dv-s4) var(--dv-s6); min-height: 88px; padding: var(--dv-s4) var(--dv-s2); border-top: 1px solid var(--dv-line); text-decoration: none; color: var(--dv-c-text);
  background: linear-gradient(90deg, var(--dv-wash-wine), rgba(107,15,26,0)) 0 0 / 0 100% no-repeat; transition: background-size .5s var(--dv-ease-out), color .2s ease; }
.find-list a:hover { background-size: 100% 100%; color: #fff; }
.find-list .ico { color: var(--dv-chrome); }
.fl-where { font: italic 400 clamp(1.625rem, 1.3rem + 1.2vw, 2.5rem)/1 var(--dv-font-display); color: #fff; }
.fl-handle { color: var(--dv-c-text-muted); font-weight: 500; overflow-wrap: anywhere; }
.find-list a:hover .fl-handle { color: var(--dv-c-text); }
@media (max-width: 599.98px) {
  .find-list a { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--dv-s1) var(--dv-s4); padding: 1.125rem var(--dv-s1); }
  .find-list .tile { --cut: 9px; width: 48px; height: 48px; grid-row: 1 / span 2; grid-column: 1; }
  .find-list .tile .pf { width: 22px; height: 22px; }
  .fl-where { grid-column: 2; }
  .fl-handle { grid-row: 2; grid-column: 2; font-size: .9375rem; }
  .find-list .ico { grid-row: 1 / span 2; grid-column: 3; }
}

/* ---- Footer ---- */
.foot { display: grid; justify-items: center; gap: var(--dv-s6); max-width: var(--dv-max); margin: var(--dv-section) auto 0; padding: var(--dv-s20) var(--dv-gutter) var(--dv-s10); text-align: center; border-top: 1px solid var(--dv-line); }
.foot-mark { width: clamp(220px, 30vw, 380px); height: auto; }
.foot .divider { width: min(100%, 420px); }
.foot-tag { font: italic 400 1.375rem/1.2 var(--dv-font-display); color: var(--dv-c-text); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--dv-s6); font-size: var(--dv-t-small); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dv-c-text-muted); text-decoration: none; }
.foot-links a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--dv-garnet); }
.foot-join { display: inline-flex; align-items: center; min-height: 44px; color: var(--dv-c-text); text-decoration: underline; text-decoration-color: var(--dv-garnet); text-underline-offset: 4px; font-size: var(--dv-t-small); }
.foot-join:hover { color: #fff; }
.foot-legal { font-size: var(--dv-t-cap); color: var(--dv-c-text-muted); }

/* ---- Small screens ---- */
@media (max-width: 899.98px) { .hide-sm { display: none; } }
@media (max-width: 479.98px) { .hide-xs { display: none; } }
@media (max-width: 599.98px) {
  .pill { padding-left: var(--dv-s4); }
  .pill-mark img { width: 120px; margin: -8px 0 -6px; }
  .pill-links a { padding: 0 var(--dv-s3); font-size: 1.0625rem; }
  .pill .btn-sm { padding: 0 var(--dv-s4); }
  .hero-ctas .btn { flex: 1 1 100%; }
}

/* ---- Motion: one authored entrance, quiet everywhere else ---- */
@media (prefers-reduced-motion: no-preference) {
  .sky::before { animation: drift 160s linear infinite alternate; }
  .sky::after { animation: twinkle 9s ease-in-out infinite; }
  .hero-media img { animation: settle 1.8s var(--dv-ease-out) both; }
  .hero-sig, .hero-tag .ln, .hero-line, .hero-ctas, .hero-feature { animation: rise 1s var(--dv-ease-out) both; }
  .hero-tag .ln { animation-delay: .12s; }
  .hero-tag .ln + .ln { animation-delay: .2s; }
  .hero-line { animation-delay: .3s; }
  .hero-ctas { animation-delay: .38s; }
  .hero-feature { animation-delay: .48s; }
  .divider-draw { clip-path: inset(0 100% 0 0); animation: write var(--dv-dur-draw) var(--dv-ease-out) .35s forwards; }
  .btn-wine:hover::after, .cartel-join:hover .cj-btn::after { transform: translateX(120%); transition: transform var(--dv-dur-sheen) var(--dv-ease-out); }
  html.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--dv-ease-out), transform 1.1s var(--dv-ease-out); }
  html.js .rv .divider { clip-path: inset(0 100% 0 0); transition: clip-path var(--dv-dur-draw) var(--dv-ease-out) .2s; }
  html.js .rv .divider-center { clip-path: inset(0 50% 0 50%); }
  html.js .rv .card-plate { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 86%, 100% 86%, 0 86%, 0 86%, 0 14px); transition: clip-path 1.3s var(--dv-ease-out); }
  html.js .rv.in { opacity: 1; transform: none; }
  html.js .rv.in .divider { clip-path: inset(0); }
  html.js .rv.in .card-plate { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
  @supports (animation-timeline: view()) {
    .worlds-bg img { animation: drift-y linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes drift { to { transform: translate3d(-60px, -40px, 0); } }
@keyframes twinkle { 50% { opacity: .45; } }
@keyframes settle { from { transform: scale(1.05); } }
@keyframes rise { from { opacity: 0; transform: translateY(.6rem); } }
@keyframes write { to { clip-path: inset(0); } }
@keyframes drift-y { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }

/* ---- Commissions page (v3.3) ---- */
.pill-links a[aria-current="page"] { color: #fff; background: var(--dv-wash-white); }
.cm-hero, .cm-sec { max-width: var(--dv-max); margin: 0 auto; padding: var(--dv-section) var(--dv-gutter) 0; }
.cm-hero { display: grid; gap: var(--dv-s6); padding-top: clamp(8rem, 6rem + 6vw, 12rem); position: relative; isolation: isolate; }
.cm-hero::before { content: ""; position: absolute; left: -10%; top: 0; width: min(900px, 90vw); height: 100%; z-index: -1; background: var(--dv-g-glow-wine); pointer-events: none; }
.eyebrow { font: 600 var(--dv-t-label)/1 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-chrome); }
.cm-title { font: italic 400 var(--dv-t-display)/.95 var(--dv-font-display); letter-spacing: -.02em; color: var(--dv-frost); text-wrap: balance; }
.cm-hero-copy { display: grid; gap: var(--dv-s6); min-width: 0; }
.cm-hero-copy > .divider { width: min(100%, 440px); margin-top: calc(var(--dv-s3) * -1); }
.cm-sub { max-width: 40ch; font-size: var(--dv-t-lead); line-height: 1.5; color: var(--dv-c-text); }
.cm-pitch { max-width: 62ch; color: var(--dv-c-text-muted); }
.cm-hero .hero-ctas, .cm-cta .hero-ctas { margin-top: var(--dv-s2); }
.btn .pf { flex: none; width: 20px; height: 20px; color: var(--dv-chrome); }
.cm-sec .sec-head { margin-bottom: var(--dv-s12); }

.rights { display: grid; gap: var(--dv-s6); }
.right-card { --cut: 14px; position: relative; isolation: isolate; display: grid; gap: var(--dv-s3); padding: var(--dv-s8); color: var(--dv-c-text); }
.right-card::before, .right-card::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); }
.right-card::before { inset: 0; background: var(--dv-g-chrome); opacity: .45; }
.right-card::after { inset: 1px; background: var(--dv-onyx); }
.right-card:first-child::after { background: radial-gradient(120% 140% at 0% 0%, rgba(142,27,43,.34), rgba(58,15,24,.12) 50%, rgba(17,16,19,.98) 85%), var(--dv-onyx); }
.right-name { font: italic 400 var(--dv-t-h3)/1.1 var(--dv-font-display); color: var(--dv-frost); }
.right-card p { max-width: 44ch; }
@media (min-width: 760px) { .rights { grid-template-columns: 1fr 1fr; } }

.tier-grid { display: grid; gap: var(--dv-s8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) and (max-width: 1099.98px) { .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { --cut: 16px; position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--dv-s6); padding: var(--dv-s8); }
@media (min-width: 760px) { @supports (grid-template-rows: subgrid) { .tier { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--dv-s6); } } }
.tier::before, .tier::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); pointer-events: none; }
.tier::before { inset: 0; background: var(--dv-g-chrome); opacity: .5; }
.tier::after { inset: 1px; background: linear-gradient(180deg, rgba(26,25,29,.98), rgba(10,10,10,.98)); }
.tier-head { display: grid; gap: var(--dv-s2); align-content: start; }
.tier-kind { font: 600 var(--dv-t-label)/1.3 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-chrome); }
.tier-name { font: italic 400 clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem)/1 var(--dv-font-display); color: var(--dv-frost); }
.tier-desc { color: var(--dv-c-text-muted); }
.tier-prices { padding: var(--dv-s5) 0; border-block: 1px solid var(--dv-line); }
.tp-label { margin-bottom: var(--dv-s3); font: 600 var(--dv-t-label)/1 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-c-text-muted); }
.tier-prices dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dv-s4); margin: 0; }
.tp { display: grid; gap: var(--dv-s1); align-content: start; }
.tp + .tp { padding-left: var(--dv-s4); border-left: 1px solid var(--dv-line); }
.tp dt { font-size: var(--dv-t-cap); font-weight: 600; color: var(--dv-c-text); }
.tp dd { margin: 0; }
.tp-amt { font: 600 clamp(1.75rem, 1.5rem + .8vw, 2.25rem)/1.1 var(--dv-font-body); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.tp-ex .tp-amt { color: var(--dv-frost); }
.tp-sh .tp-amt { color: var(--dv-c-text); }
.tp-na { display: inline-block; padding-top: .45rem; font-size: var(--dv-t-small); color: var(--dv-c-text-muted); }
.tier-list { display: grid; gap: var(--dv-s3); align-content: start; }
.tier-list li { display: grid; grid-template-columns: 10px 1fr; gap: var(--dv-s3); align-items: start; font-size: var(--dv-t-small); line-height: 1.5; }
.tier-list .star { margin-top: .4em; color: var(--dv-chrome); }
.tier-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dv-s4); margin: 0; padding-top: var(--dv-s4); border-top: 1px solid var(--dv-line); }
.tier-meta div { display: grid; gap: var(--dv-s1); align-content: start; }
.tier-meta dt { font: 600 var(--dv-t-label)/1.2 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-c-text-muted); }
.tier-meta dd { margin: 0; font-size: var(--dv-t-small); font-weight: 600; color: var(--dv-frost); }

.addons-wrap { overflow-x: auto; }
.addons { width: 100%; border-collapse: collapse; font-size: var(--dv-t-small); }
.addons th, .addons td { padding: var(--dv-s4) var(--dv-s3); border-top: 1px solid var(--dv-line); text-align: left; vertical-align: top; }
.addons tbody tr:last-child th, .addons tbody tr:last-child td { border-bottom: 1px solid var(--dv-line); }
.addons thead th { border-top: 0; padding-top: 0; font: 600 var(--dv-t-label)/1.3 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-chrome); }
.addons tbody th { font-weight: 600; color: var(--dv-frost); width: 50%; }
.addons td { color: var(--dv-c-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.addons td.na { color: var(--dv-c-text-faint); }
.ao-note { display: block; margin-top: 2px; font-weight: 400; color: var(--dv-c-text-muted); }
@media (max-width: 599.98px) { .addons th, .addons td { padding-inline: var(--dv-s2); } .addons th:first-child, .addons td:first-child { padding-left: 0; } .addons td { white-space: normal; } .addons tbody th { width: 46%; } }

.steps { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; counter-reset: none; border-bottom: 1px solid var(--dv-line); }
.step { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--dv-s1) var(--dv-s4); padding: var(--dv-s6) 0; border-top: 1px solid var(--dv-line); }
.step-n { grid-row: 1 / span 2; font: italic 400 1.75rem/1 var(--dv-font-display); color: var(--dv-chrome); }
.step-name { font: italic 400 var(--dv-t-h4)/1.1 var(--dv-font-display); color: var(--dv-frost); }
.step p { color: var(--dv-c-text-muted); max-width: 60ch; }
@media (min-width: 900px) { .step { grid-template-columns: 5rem 14rem 1fr; align-items: baseline; } .step-n { grid-row: auto; } }

.terms { gap: var(--dv-s8); }
.terms-title { font: italic 400 var(--dv-t-h2)/1 var(--dv-font-display); letter-spacing: -.015em; color: var(--dv-frost); }
.terms-list { display: grid; gap: var(--dv-s3); max-width: 70ch; }
.terms-list li { position: relative; padding-left: var(--dv-s6); color: var(--dv-c-text); }
.terms-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; background: var(--dv-chrome); transform: rotate(45deg); }
@media (min-width: 900px) { .framed.terms { grid-template-columns: 4fr 8fr; align-items: start; } }

.cm-cta .hero-ctas { justify-content: center; }
@media (max-width: 599.98px) { .cm-hero .hero-ctas .btn, .cm-cta .hero-ctas .btn { flex: 1 1 100%; } }

/* ---- Home: commissions teaser (v3.3) ---- */
.teaser { max-width: var(--dv-max); margin: 0 auto; padding: var(--dv-section) var(--dv-gutter) 0; }
.teaser-panel { --cut: 18px; position: relative; isolation: isolate; display: grid; gap: var(--dv-s6); padding: clamp(2rem, 1rem + 3vw, 3.5rem); }
.teaser-panel::before, .teaser-panel::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); pointer-events: none; }
.teaser-panel::before { inset: 0; background: var(--dv-g-chrome); opacity: .55; }
.teaser-panel::after { inset: 1px; background: radial-gradient(110% 150% at 100% 0%, rgba(142,27,43,.38), rgba(58,15,24,.14) 50%, rgba(10,10,10,.97) 85%), var(--dv-obsidian); }
.teaser-copy { display: grid; gap: var(--dv-s3); }
.teaser-title { font: italic 400 clamp(2.5rem, 1.6rem + 3vw, 4.25rem)/1 var(--dv-font-display); letter-spacing: -.015em; color: var(--dv-frost); }
.teaser-line { max-width: 46ch; font-size: var(--dv-t-lead); line-height: 1.5; color: var(--dv-c-text); }
.teaser-prices { display: flex; flex-wrap: wrap; gap: var(--dv-s2) var(--dv-s8); font-weight: 600; color: var(--dv-c-text-muted); }
.teaser-prices strong { color: #fff; font-weight: 600; }
.teaser .btn { justify-self: start; }
@media (min-width: 900px) { .teaser-panel { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--dv-s12); } }
@media (max-width: 599.98px) { .teaser .btn { justify-self: stretch; } }
@media (min-width: 900px) { .cm-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: center; column-gap: var(--dv-s16, 4rem); } }
.cm-hero-art { margin: 0; }
.tier-grid { row-gap: var(--dv-s8); }

/* v3.4 drops log */
.drops-home { max-width: var(--dv-max); margin: 0 auto; padding: var(--dv-section) var(--dv-gutter) 0; }
.drop-grid { display: grid; gap: var(--dv-s10) var(--dv-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .drop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dv-s12) var(--dv-s6); } }
@media (min-width: 1100px) { .drop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dv-s12) var(--dv-s8); } }
.drop-link { display: grid; gap: var(--dv-s2); text-decoration: none; color: inherit; }
.drop-plate { --cut: 12px; position: relative; display: block; aspect-ratio: 1; margin-bottom: var(--dv-s2); overflow: hidden; background: var(--dv-onyx); clip-path: var(--chamfer); }
.drop-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: var(--chamfer);
  background: var(--dv-g-chrome); opacity: .5; padding: 1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition: opacity var(--dv-dur-base) ease; }
.drop-plate img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dv-dur-slow) var(--dv-ease-out); }
.drop-date { font: 600 var(--dv-t-label)/1.3 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-chrome); }
.drop-name { font: italic 400 var(--dv-t-h4)/1.1 var(--dv-font-display); color: var(--dv-frost); overflow-wrap: anywhere; }
.drop-kind { font-size: var(--dv-t-small); line-height: 1.45; color: var(--dv-c-text-muted); }
.drop-link:hover .drop-plate img { transform: scale(1.04); }
.drop-link:hover .drop-plate::after { opacity: .9; }
.drop-link:hover .drop-name { text-decoration: underline; text-decoration-color: var(--dv-garnet); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.drop-link:focus-visible { outline: 2px solid var(--dv-c-focus); outline-offset: 4px; }
.drops-all { margin-top: var(--dv-s12); }
@media (max-width: 599.98px) { .drops-all { display: flex; } .drop-name { font-size: 1.25rem; } .drop-kind { font-size: .875rem; } }
.drops-hero { padding-bottom: 0; }
.drops-note { color: var(--dv-c-text-muted); font-size: var(--dv-t-small); }
.drops-note a { color: var(--dv-c-text); margin-left: var(--dv-s2); }
.drops-note a:hover { color: #fff; text-decoration-color: var(--dv-garnet); }
.drops-log { max-width: var(--dv-max); margin: 0 auto; padding: var(--dv-s16) var(--dv-gutter) 0; }
.drops-count { margin-bottom: var(--dv-s4); font: 600 var(--dv-t-label)/1.3 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-c-text-muted); }
.drops-count strong { color: #fff; font-weight: 600; }
.drop-month { padding-top: var(--dv-s12); }
.drop-month-title { display: flex; align-items: baseline; gap: var(--dv-s4); margin-bottom: var(--dv-s8); padding-bottom: var(--dv-s4); border-bottom: 1px solid var(--dv-line);
  font: italic 400 var(--dv-t-h3)/1.1 var(--dv-font-display); color: var(--dv-frost); }
.drop-month-count { font: 600 var(--dv-t-label)/1 var(--dv-font-body); letter-spacing: var(--dv-ls-label); color: var(--dv-chrome); }
.drops-more { max-width: var(--dv-max); margin: 0 auto; padding: var(--dv-s16) var(--dv-gutter) 0; }
@media (max-width: 479.98px) {
  .pill { gap: var(--dv-s1); padding-right: var(--dv-s2); }
  .pill-mark img { width: 100px; }
  .pill-links { gap: 0; }
  .pill-links a { padding: 0 .5rem; font-size: 1rem; }
  .pill .btn-sm { padding: 0 var(--dv-s3); }
}
@media (max-width: 599.98px) { .pill-links .hide-xs { display: none; } }
@media (max-width: 359.98px) {
  .pill-mark img { width: 84px; }
  .pill-links a { padding: 0 .375rem; font-size: .9375rem; }
  .pill .btn-sm { padding: 0 var(--dv-s2); }
}

/* ---- v3.5 about: studio statement ---- */
.about { overflow-x: clip; }
.about-panel { position: relative; isolation: isolate; display: grid; gap: var(--dv-s10) var(--dv-s16); padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0; }
.about-panel::before, .about-panel::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--dv-g-stroke); opacity: .7; }
.about-panel::before { top: 0; }
.about-panel::after { bottom: 0; }
.about-head { position: relative; display: grid; gap: var(--dv-s5); align-content: start; }
.about-head::before { content: ""; position: absolute; z-index: -1; inset: -40% -30% -40% -20%; background: var(--dv-g-glow-wine); opacity: .55; pointer-events: none; }
.about-title { font: italic 400 var(--dv-t-display)/.95 var(--dv-font-display); letter-spacing: -.02em; color: var(--dv-frost); }
.about-head .divider { width: min(100%, 360px); margin-top: calc(var(--dv-s2) * -1); }
.about-body { display: grid; gap: var(--dv-s4); align-content: start; max-width: 40ch; color: var(--dv-c-text-muted); font-size: var(--dv-t-body); line-height: 1.65; }
.about-lead { font: italic 400 var(--dv-t-h4)/1.3 var(--dv-font-display); color: var(--dv-frost); margin-bottom: var(--dv-s2); text-wrap: balance; }
.about-body a { color: var(--dv-c-text); text-decoration: underline; text-decoration-color: var(--dv-garnet); text-underline-offset: 4px; }
.about-body a:hover { color: #fff; }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: var(--dv-s8) 0 0; list-style: none; border-top: 1px solid var(--dv-line); }
.about-facts li { display: grid; gap: var(--dv-s2); align-content: start; padding: 0 var(--dv-s4); }
.about-facts li:first-child { padding-left: 0; }
.about-facts li + li { border-left: 1px solid var(--dv-line); }
.fact-num { font: italic 400 clamp(2.5rem, 1.8rem + 2.6vw, 4rem)/1 var(--dv-font-display); background: var(--dv-g-chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fact-label { font: 600 var(--dv-t-label)/1.35 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-chrome); }
@media (min-width: 900px) {
  .about-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .about-body { padding-top: calc(var(--dv-t-label) + var(--dv-s5)); }
  .about-facts { grid-column: 1 / -1; }
  .about-facts li { padding: 0 var(--dv-s8); }
}
@media (max-width: 479.98px) { .about-facts li { padding: 0 var(--dv-s3); } }

/* ---- v3.8 home: hero secondary link, mobile rail for Most wanted ---- */
.hero-alt { font-size: var(--dv-t-small); color: var(--dv-c-text-muted); }
.hero-alt a { color: var(--dv-c-text); text-decoration-color: var(--dv-garnet); }
.hero-alt a:hover { color: #fff; }
@media (max-width: 599.98px) {
  .gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--dv-s5);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--dv-gutter) * -1); padding: 0 var(--dv-gutter) var(--dv-s2); scroll-padding-inline: var(--dv-gutter); }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery > .card { scroll-snap-align: start; }
  /* the rail scrolls sideways, so its cards skip the scroll-in reveal */
  html.js .gallery .rv { opacity: 1; transform: none; }
  html.js .gallery .rv .card-plate { clip-path: none; }
  .rail-hint { display: flex; }
}
.rail-hint { display: none; align-items: center; gap: var(--dv-s2); margin-top: var(--dv-s5); font: 600 var(--dv-t-label)/1 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-c-text-muted); }

/* ---- v3.8 product spotlight pages (/ghost/, /scarlett-room/) ---- */
.pd { max-width: var(--dv-max); margin: 0 auto; padding: 6.5rem var(--dv-gutter) 0; display: grid; gap: var(--dv-s10); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--dv-s2); margin: 0; padding: 0; list-style: none; font-size: var(--dv-t-cap); color: var(--dv-c-text-muted); }
.crumbs a { color: var(--dv-c-text-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--dv-garnet); }
.crumbs li + li::before { content: "/"; margin-right: var(--dv-s2); color: var(--dv-ash); }
.pd-media { display: grid; gap: var(--dv-s5); }
.pd-shot { --cut: 18px; position: relative; overflow: hidden; background: var(--dv-onyx); clip-path: var(--chamfer); box-shadow: var(--dv-shadow-plate); }
.pd-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: var(--chamfer); background: var(--dv-g-chrome); opacity: .55; padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pd-shot img { width: 100%; height: 100%; object-fit: cover; }
.pd-shot.tall { aspect-ratio: 3 / 4; }
.pd-shot.wide { aspect-ratio: 16 / 9; }
.pd-shot.square { aspect-ratio: 1; }
.pd-panel { display: grid; gap: var(--dv-s6); align-content: start; }
.pd-tags { display: flex; flex-wrap: wrap; gap: var(--dv-s2); }
.pd-tags .badge { height: 28px; }
.pd-tags .badge-hot::before { background: linear-gradient(180deg, #c23a52, var(--dv-wine)); }
.pd-title { font: italic 400 var(--dv-t-display)/.95 var(--dv-font-display); letter-spacing: -.02em; color: var(--dv-frost); text-wrap: balance; }
.pd-panel > .divider { width: min(100%, 360px); margin-top: calc(var(--dv-s3) * -1); }
.pd-line { font: italic 400 var(--dv-t-h4)/1.3 var(--dv-font-display); color: var(--dv-frost); text-wrap: balance; }
.pd-desc { max-width: 46ch; color: var(--dv-c-text-muted); line-height: 1.65; }
.pd-buy { --cut: 16px; position: relative; isolation: isolate; display: grid; gap: var(--dv-s5); padding: var(--dv-s6); }
.pd-buy::before, .pd-buy::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); pointer-events: none; }
.pd-buy::before { inset: 0; background: var(--dv-g-chrome); opacity: .45; }
.pd-buy::after { inset: 1px; background: radial-gradient(120% 140% at 100% 0%, rgba(142,27,43,.34), rgba(58,15,24,.12) 50%, rgba(10,10,10,.97) 85%), var(--dv-obsidian); }
.pd-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--dv-s2) var(--dv-s3); }
.pd-from { font: 600 var(--dv-t-label)/1 var(--dv-font-body); letter-spacing: var(--dv-ls-label); text-transform: uppercase; color: var(--dv-chrome); }
.pd-amount { font: italic 400 clamp(3rem, 2.4rem + 2vw, 4rem)/1 var(--dv-font-display); background: var(--dv-g-chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pd-cur { font-size: var(--dv-t-small); color: var(--dv-c-text-muted); }
.pd-ctas { display: grid; gap: var(--dv-s3); }
.pd-ctas .btn { width: 100%; }
.pd-specs { display: grid; gap: 0; border-top: 1px solid var(--dv-line); }
.pd-specs li { display: flex; justify-content: space-between; gap: var(--dv-s4); padding: var(--dv-s3) 0; border-bottom: 1px solid var(--dv-line); font-size: var(--dv-t-small); }
.pd-specs span:first-child { color: var(--dv-c-text-muted); }
.pd-specs span:last-child { color: var(--dv-c-text); text-align: right; }
.pd-help { font-size: var(--dv-t-small); color: var(--dv-c-text-muted); }
.pd-help a { color: var(--dv-c-text); text-decoration-color: var(--dv-garnet); }
.pd-help a:hover { color: #fff; }
.pd-more { max-width: var(--dv-max); margin: 0 auto; padding: var(--dv-section) var(--dv-gutter) 0; }
.pd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: none; align-items: center; justify-content: space-between; gap: var(--dv-s4);
  padding: var(--dv-s3) var(--dv-gutter) calc(var(--dv-s3) + env(safe-area-inset-bottom)); background: var(--dv-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--dv-line); transform: translateY(110%); transition: transform var(--dv-dur-slow) var(--dv-ease-out); }
.pd-bar.on { transform: none; }
.pd-bar-name { display: grid; line-height: 1.2; }
.pd-bar-name strong { font: italic 400 1.375rem/1.1 var(--dv-font-display); color: #fff; }
.pd-bar-name span { font-size: var(--dv-t-cap); color: var(--dv-c-text-muted); }
@media (min-width: 900px) {
  .pd { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 1rem + 4vw, 5rem); padding-top: 8rem; }
  .pd > nav { grid-column: 1 / -1; }
  .pd-panel { position: sticky; top: 6.5rem; }
}
@media (max-width: 899.98px) {
  .pd-media { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--dv-gutter) * -1); padding: 0 var(--dv-gutter); scroll-padding-inline: var(--dv-gutter); }
  .pd-media::-webkit-scrollbar { display: none; }
  .pd-shot { scroll-snap-align: start; align-self: start; }
  .pd-media .pd-shot.wide { align-self: center; }
  .pd-bar { display: flex; }
  .pd-page .foot { padding-bottom: 6rem; }
}
.pd-shot.portrait { aspect-ratio: 4 / 5; }
.pd-sub { display: block; font-size: .5em; letter-spacing: 0; color: var(--dv-chrome); }