/* JOIclip — FINAL lilac velvet theme. Load AFTER tokens.css.
   Asset: /img/velvet-lilac-640.webp. Logo (Stiletto magenta/ivory) is NOT recoloured.
   No JS, no blend modes/filters, no animation, no fixed attachment. */
:root{
  --bg:#0A080D;                 /* near-black, also the no-image fallback */
  --surface:#151020; --surface-2:#1E1729; --surface-3:#2A2138;
  --header-bg:#0F0B14;
  --border:#2F2640;             /* decorative dividers */
  --border-strong:#7A6D93;      /* control outlines: 4.11 header, 3.67 surface-2 */
  --text:#F3E9EC; --text-muted:#C9BEDB; --text-subtle:#A79BBD;
  --accent:#BCA7F5;             /* lavender UI accent: active chip, links, primary fills */
  --accent-hover:#CDBDFA;
  --accent-ink:#140E20;         /* text on lavender 8.97:1 */
  --accent-text:#D2C4FB;        /* small lavender text on dark/velvet */
  --brand-magenta:#E0288F;      /* logo only */
  --plum:#3A2A55;               /* complementary, sparing: selected rows, hover tint */
  --focus:#D2C4FB;
  --badge-bg:rgba(10,8,13,.86);
  --velvet-image:url("/img/velvet-lilac-640.webp");
  --velvet-size:640px 640px;
}
[data-velvet="off"]{--velvet-image:none}

/* Page canvas: colour first (fallback), tiled texture over it. Scrolls with page. */
body{background-color:var(--bg);background-image:var(--velvet-image);background-size:var(--velvet-size);background-repeat:repeat;background-attachment:scroll}

/* Content always sits on opaque surfaces */
.site-header,.cat-nav{background:var(--header-bg);backdrop-filter:none}
.site-header__logo img,.site-header__logo svg{height:40px;width:auto}
.content-panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:var(--sp-4);margin-inline:0}
@media (min-width:960px){.content-panel{padding:var(--sp-5);border-radius:22px;margin-inline:0}}
.site-footer{background:var(--header-bg);border-top-color:var(--border)}

/* Editorial intro (only text allowed directly on velvet; contrast measured vs brightest texel) */
.intro{padding-block:var(--sp-6) var(--sp-5)}
.intro__eyebrow{color:var(--accent-text);font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:0 0 var(--sp-2)}
.intro__title{font-size:1.75rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 var(--sp-2)}
.intro__lede{color:var(--text-muted);font-size:var(--fs-sm);margin:0}
@media (min-width:960px){.intro__title{font-size:2.5rem}.intro__lede{font-size:var(--fs-base)}}

/* Section header + sample tag */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.section-head h2{font-size:1.0625rem;font-weight:700;margin:0}
.tag-sample{font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-strong);border-radius:999px;padding:4px 10px}

/* Header controls */
.search input,.lang-select,.icon-btn{background:var(--surface-2);border-color:var(--border-strong)}
.cat-nav{position:relative}
.cat-nav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:48px;pointer-events:none;background:linear-gradient(90deg,rgba(15,11,20,0),var(--header-bg))}
.cat-nav a{background:var(--surface);border-color:var(--border);min-height:var(--tap)}
.cat-nav a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* Cards */
.card__thumb{border:1px solid var(--border);background:var(--surface-2)}
.badge-duration{background:var(--badge-bg)}
.card__title{color:var(--text)}
.card__meta{color:var(--text-subtle)}
.video-grid{row-gap:var(--sp-5)}

/* Age gate: dim + blur is baked in design only; at runtime use flat overlay (no filters) */
.age-gate{background:rgba(8,6,12,.88);backdrop-filter:none}
.age-gate__panel{background:var(--surface);border-color:var(--border-strong);border-radius:22px;overflow:hidden;padding:0 0 var(--sp-5)}
.age-gate__hero{background:var(--bg) var(--velvet-image) center/var(--velvet-size);padding:var(--sp-6) var(--sp-5) var(--sp-5);display:flex;justify-content:center}
.age-gate__hero img{height:76px;width:auto}
.age-gate__body{padding:var(--sp-5) var(--sp-5) 0}
.age-gate__eyebrow{color:var(--accent-text);font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.age-gate__actions .btn{width:100%;min-height:48px;background:var(--surface-2);color:var(--text);border:1px solid rgba(188,167,245,.7)} /* both equal */
.age-gate__actions .btn:hover{background:var(--surface-3)}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px rgba(188,167,245,.35)}
@media (prefers-reduced-data:reduce){:root{--velvet-image:none}}
@media (forced-colors:active){body{background-image:none}}
.cat-nav a:hover{border-color:var(--border-strong);color:var(--text)}
a{color:inherit}
.link{color:var(--accent-text)}
::selection{background:var(--plum);color:var(--text)}