/* ============================================================
   Nora Kindly — norakindly.com
   Quiet luxury wellness. Sage, cream, dusty rose, platinum.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.9rem + 6.2vw, 7rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem;
  --radius-xl: 2rem; --radius-full: 9999px;

  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 1040px;
  --content-wide: 1280px;

  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
  --font-body: 'Karla', 'Helvetica Neue', system-ui, sans-serif;
}

/* Light (default) — warm cream & sage */
:root, [data-theme='light'] {
  --color-bg: #f7f4ee;            /* warm cream */
  --color-surface: #fbf9f4;
  --color-surface-2: #ffffff;
  --color-surface-offset: #efeae0;
  --color-sage-soft: #dfe6da;
  --color-border: #e3ddd0;
  --color-divider: #ece7dc;

  --color-text: #3a4038;          /* deep sage-charcoal */
  --color-text-muted: #6f7267;
  --color-text-faint: #a6a89c;
  --color-text-inverse: #f7f4ee;

  --color-primary: #64735a;       /* sage green (AA-safe on white) */
  --color-primary-hover: #4f5c47;
  --color-primary-active: #3d4838;
  --color-primary-soft: #e6ebe0;

  --color-rose: #c8a2a0;          /* dusty rose */
  --color-rose-soft: #f0e3e1;
  --color-rose-deep: #a87e7c;

  --color-platinum: #c9c3b6;      /* platinum accent */
  --color-gold: #b9a67e;

  --shadow-sm: 0 1px 3px rgba(58,64,56,0.06);
  --shadow-md: 0 8px 24px rgba(58,64,56,0.08);
  --shadow-lg: 0 20px 50px rgba(58,64,56,0.12);
  --shadow-glow: 0 0 60px rgba(124,140,114,0.28);
}

[data-theme='dark'] {
  --color-bg: #1e211c;
  --color-surface: #24271f;
  --color-surface-2: #2a2d24;
  --color-surface-offset: #2e3128;
  --color-sage-soft: #303a2c;
  --color-border: #383c30;
  --color-divider: #2f3228;

  --color-text: #e4e2d6;
  --color-text-muted: #a3a598;
  --color-text-faint: #74766a;
  --color-text-inverse: #24271f;

  --color-primary: #a7b89b;
  --color-primary-hover: #bccbb1;
  --color-primary-active: #90a184;
  --color-primary-soft: #2f3a29;

  --color-rose: #cfa9a7;
  --color-rose-soft: #3a2e2d;
  --color-rose-deep: #d9b6b4;

  --color-platinum: #6f6d62;
  --color-gold: #cdb98d;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 60px rgba(167,184,155,0.22);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
body {
  min-height:100dvh; line-height:1.65;
  font-family:var(--font-body); font-size:var(--text-base);
  color:var(--color-text); background:var(--color-bg);
  transition: background .4s ease, color .4s ease;
}
img,svg,video { display:block; max-width:100%; height:auto; }
ul[role='list'] { list-style:none; }
input,button,textarea,select { font:inherit; color:inherit; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:500; line-height:1.1; text-wrap:balance; letter-spacing:-0.01em; }
p,li { text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; background:none; border:none; }
::selection { background:var(--color-primary-soft); color:var(--color-text); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--radius-sm); }
a,button,input,textarea,select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
.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; }

/* ---------- Layout helpers ---------- */
.wrap { width:100%; max-width:var(--content-wide); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem); }
.narrow { max-width:var(--content-narrow); }
.default { max-width:var(--content-default); }
.section { padding-block:clamp(var(--space-16),9vw,var(--space-32)); }
.center { text-align:center; }
.eyebrow {
  font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.28em;
  text-transform:uppercase; color:var(--color-primary); font-weight:600; margin-bottom:var(--space-4);
}
.lead { font-size:var(--text-lg); color:var(--color-text-muted); max-width:60ch; }
.hand { font-family:var(--font-hand); color:var(--color-rose-deep); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-size:var(--text-sm); font-weight:600; letter-spacing:0.02em;
  padding:var(--space-3) var(--space-6); border-radius:var(--radius-full);
  border:1px solid transparent; text-align:center;
}
.btn--primary { background:var(--color-primary); color:#fff; box-shadow:var(--shadow-sm); }
[data-theme='dark'] .btn--primary { color:#1e211c; }
.btn--primary:hover { background:var(--color-primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost { border-color:var(--color-border); color:var(--color-text); background:var(--color-surface-2); }
.btn--ghost:hover { border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); }
.btn--rose { background:var(--color-rose); color:#fff; }
.btn--rose:hover { background:var(--color-rose-deep); transform:translateY(-2px); }
.btn--lg { padding:var(--space-3) var(--space-5); font-size:var(--text-sm); white-space:nowrap; }

/* ---------- Header ---------- */
.header {
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, var(--color-bg) 82%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.header--scrolled { border-color:var(--color-divider); box-shadow:var(--shadow-sm); }
.nav { display:flex; align-items:center; justify-content:space-between; height:4.75rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.4rem; letter-spacing:.02em; color:var(--color-text); }
.brand svg { color:var(--color-primary); flex-shrink:0; }
.nav-links { display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); }
.nav-links a { font-size:var(--text-sm); color:var(--color-text-muted); font-weight:500; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current='page']:not(.btn) { color:var(--color-primary); }
.nav-links a.btn--primary { color:#fff; }
[data-theme='dark'] .nav-links a.btn--primary { color:#1e211c; }
.nav-links a.btn--primary:hover { color:#fff; }
[data-theme='dark'] .nav-links a.btn--primary:hover { color:#1e211c; }
.nav-right { display:flex; align-items:center; gap:var(--space-3); }
.theme-toggle { width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:var(--radius-full); color:var(--color-text-muted); border:1px solid var(--color-border); }
.theme-toggle:hover { color:var(--color-primary); border-color:var(--color-primary); }
.nav-toggle { display:none; width:2.4rem; height:2.4rem; place-items:center; color:var(--color-text); }
.mobile-menu { display:none; }

@media (max-width:860px){
  .nav-links { position:fixed; inset:4.75rem 0 auto 0; flex-direction:column; gap:0;
    background:var(--color-surface); border-bottom:1px solid var(--color-border);
    padding:var(--space-4) clamp(1.25rem,5vw,3rem) var(--space-8); transform:translateY(-120%);
    transition:transform .35s cubic-bezier(0.16,1,0.3,1); box-shadow:var(--shadow-md); }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:var(--space-3) 0; width:100%; border-bottom:1px solid var(--color-divider); font-size:var(--text-base); }
  .nav-links .btn { margin-top:var(--space-3); }
  .nav-toggle { display:grid; }
}

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding-block:clamp(var(--space-16),10vw,var(--space-32)); }
.hero-bg { position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 55% at 78% 18%, var(--color-rose-soft) 0%, transparent 60%),
    radial-gradient(70% 60% at 12% 82%, var(--color-primary-soft) 0%, transparent 62%),
    linear-gradient(160deg, var(--color-bg), var(--color-surface));
}
.hero-inner { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero h1 { font-size:var(--text-hero); font-weight:500; margin-bottom:var(--space-5); }
.hero h1 em { font-style:italic; color:var(--color-primary); }
.hero .lead { margin-bottom:var(--space-8); }
.hero-ctas { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }

/* Avatar orb */
.avatar-orb { position:relative; justify-self:center; width:min(340px,80vw); aspect-ratio:1; }
.avatar-orb .ring { position:absolute; inset:0; border-radius:50%; }
.avatar-orb .ring.outer { border:1px solid var(--color-primary-soft); animation:spin 28s linear infinite; }
.avatar-orb .ring.mid { inset:8%; border:1px dashed var(--color-platinum); opacity:.6; animation:spin 40s linear infinite reverse; }
.avatar-orb .disc {
  position:absolute; inset:14%; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 35% 30%, var(--color-rose-soft), var(--color-primary-soft) 55%, var(--color-sage-soft));
  box-shadow:var(--shadow-glow), inset 0 0 40px rgba(255,255,255,.35);
  display:grid; place-items:center;
  animation:breathe 7s ease-in-out infinite;
}
.avatar-orb .disc svg { width:52%; height:52%; color:var(--color-primary); opacity:.9; }
.avatar-orb .badge {
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  background:var(--color-surface-2); color:var(--color-text-muted);
  font-size:var(--text-xs); padding:.35rem .9rem; border-radius:var(--radius-full);
  box-shadow:var(--shadow-sm); border:1px solid var(--color-border); white-space:nowrap;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes breathe { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.035);} }

@media (max-width:820px){
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero .lead { margin-inline:auto; }
  .hero-ctas { justify-content:center; }
  .avatar-orb { grid-row:1; margin-bottom:var(--space-6); }
}

/* ---------- Cards & grids ---------- */
.grid { display:grid; gap:var(--space-6); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .grid-2,.grid-3 { grid-template-columns:1fr; } }

.card {
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-8);
  box-shadow:var(--shadow-sm); transition:transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card h3 { font-size:var(--text-lg); margin-bottom:var(--space-3); }
.card p { color:var(--color-text-muted); font-size:var(--text-sm); }
.card .icon { width:3rem; height:3rem; border-radius:var(--radius-md); background:var(--color-primary-soft); color:var(--color-primary); display:grid; place-items:center; margin-bottom:var(--space-5); }

/* Section heading block */
.sec-head { max-width:56ch; margin-bottom:var(--space-12); }
.sec-head.center { margin-inline:auto; }
.sec-head h2 { font-size:var(--text-2xl); margin-bottom:var(--space-4); }

/* Feature split */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split .visual { border-radius:var(--radius-lg); aspect-ratio:4/3; min-height:280px; box-shadow:var(--shadow-md); position:relative; overflow:hidden; }
@media (max-width:820px){ .split { grid-template-columns:1fr; } .split .reverse { order:-1; } }

/* gradient visuals */
.g-sage { background:linear-gradient(150deg,var(--color-primary-soft),var(--color-sage-soft),var(--color-rose-soft)); }
.g-rose { background:linear-gradient(150deg,var(--color-rose-soft),var(--color-primary-soft)); }
.g-warm { background:radial-gradient(circle at 30% 25%,var(--color-rose-soft),var(--color-primary-soft) 70%); }

/* ---------- Testimonials ---------- */
.quote { background:var(--color-surface); border-left:3px solid var(--color-rose); border-radius:var(--radius-md); padding:var(--space-8); }
.quote p { font-family:var(--font-display); font-size:var(--text-lg); font-style:italic; color:var(--color-text); margin-bottom:var(--space-4); line-height:1.4; }
.quote cite { font-style:normal; font-size:var(--text-sm); color:var(--color-primary); font-weight:600; }

/* ---------- Program / list ---------- */
.check-list { display:grid; gap:var(--space-3); }
.check-list li { display:flex; gap:var(--space-3); align-items:flex-start; color:var(--color-text-muted); }
.check-list svg { color:var(--color-primary); flex-shrink:0; margin-top:.2rem; }

/* ---------- Podcast episodes ---------- */
.ep { display:flex; gap:var(--space-6); padding:var(--space-6) 0; border-bottom:1px solid var(--color-divider); align-items:flex-start; }
.ep-num { font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-rose); min-width:3rem; }
.ep h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.ep p { color:var(--color-text-muted); font-size:var(--text-sm); }
.ep-meta { font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:.08em; text-transform:uppercase; margin-top:var(--space-2); }
.embed-ph { border:1px dashed var(--color-border); border-radius:var(--radius-lg); padding:var(--space-12); text-align:center; color:var(--color-text-faint); background:var(--color-surface); }

/* ---------- Shop ---------- */
.product { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--transition-interactive),box-shadow var(--transition-interactive); }
.product:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.product .thumb { aspect-ratio:1; display:grid; place-items:center; }
.product .thumb svg { width:42%; height:42%; opacity:.55; color:var(--color-primary); }
.product .body { padding:var(--space-5); }
.product h3 { font-size:var(--text-base); font-family:var(--font-body); font-weight:700; margin-bottom:var(--space-1); }
.product .price { color:var(--color-primary); font-weight:700; }
.product .cat { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--color-text-faint); }
.product p { font-size:var(--text-sm); color:var(--color-text-muted); margin:var(--space-2) 0 var(--space-4); }

/* ---------- Blog ---------- */
.post-card { display:flex; flex-direction:column; height:100%; }
.post-card .thumb { border-radius:var(--radius-md); aspect-ratio:16/10; margin-bottom:var(--space-5); }
.post-card .cat { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.14em; color:var(--color-rose-deep); font-weight:600; }
.post-card h3 { font-size:var(--text-lg); margin:var(--space-2) 0; }
.post-card p { color:var(--color-text-muted); font-size:var(--text-sm); margin-bottom:var(--space-4); }
.post-card .more { margin-top:auto; color:var(--color-primary); font-weight:600; font-size:var(--text-sm); }

/* Article body */
.article { max-width:68ch; margin-inline:auto; }
.article .meta { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--color-text-faint); margin-bottom:var(--space-4); }
.article h1 { font-size:var(--text-2xl); margin-bottom:var(--space-6); }
.article h2 { font-size:var(--text-xl); margin:var(--space-10) 0 var(--space-4); }
.article p { margin-bottom:var(--space-5); font-size:var(--text-lg); line-height:1.75; }
.article blockquote { font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); color:var(--color-primary); border-left:3px solid var(--color-rose); padding-left:var(--space-6); margin:var(--space-8) 0; }
.article .hero-img { aspect-ratio:16/8; border-radius:var(--radius-lg); margin-bottom:var(--space-10); box-shadow:var(--shadow-md); }

/* ---------- Forms ---------- */
.form { display:grid; gap:var(--space-4); }
.field { display:grid; gap:var(--space-2); }
.field label { font-size:var(--text-sm); font-weight:600; }
.field input, .field textarea, .field select {
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:var(--color-surface-2); width:100%;
}
.field input:focus, .field textarea:focus { border-color:var(--color-primary); outline:none; box-shadow:0 0 0 3px var(--color-primary-soft); }

/* ---------- CTA band ---------- */
.cta-band { background:linear-gradient(150deg,var(--color-primary-soft),var(--color-rose-soft)); border-radius:var(--radius-xl); padding:clamp(2.5rem,6vw,5rem); text-align:center; }
.cta-band h2 { font-size:var(--text-2xl); margin-bottom:var(--space-4); }
.cta-band p { color:var(--color-text-muted); max-width:52ch; margin:0 auto var(--space-8); }
.cta-band .hero-ctas { justify-content:center; }

/* ---------- Footer ---------- */
.footer { background:var(--color-surface); border-top:1px solid var(--color-divider); padding-block:var(--space-16) var(--space-8); margin-top:var(--space-16); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--space-8); margin-bottom:var(--space-12); }
.footer h4 { font-family:var(--font-body); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.12em; color:var(--color-text); margin-bottom:var(--space-4); }
.footer a { display:block; color:var(--color-text-muted); font-size:var(--text-sm); padding:var(--space-1) 0; }
.footer a:hover { color:var(--color-primary); }
.footer .about p { color:var(--color-text-muted); font-size:var(--text-sm); max-width:34ch; margin-top:var(--space-3); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); border-top:1px solid var(--color-divider); padding-top:var(--space-6); font-size:var(--text-xs); color:var(--color-text-faint); }
@media (max-width:820px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid { grid-template-columns:1fr; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity:1; transform:none; }

/* Botanical divider */
.leaf-divider { display:flex; justify-content:center; padding:var(--space-8) 0; color:var(--color-platinum); }
.leaf-divider svg { width:120px; }

/* stat row */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); text-align:center; }
.stats .n { font-family:var(--font-display); font-size:var(--text-2xl); color:var(--color-primary); }
.stats .l { font-size:var(--text-sm); color:var(--color-text-muted); }
@media (max-width:620px){ .stats { grid-template-columns:1fr; gap:var(--space-8); } }

/* ============================================================
   COMMERCE LAYER — Boutique, TikTok Shop, Snapchat
   ============================================================ */

/* ---------- Cart icon in nav ---------- */
.cart-link { position:relative; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:var(--radius-full); color:var(--color-text-muted); border:1px solid var(--color-border); }
.cart-link:hover { color:var(--color-primary); border-color:var(--color-primary); }
.cart-link .dot { position:absolute; top:-3px; right:-3px; width:1.05rem; height:1.05rem; font-size:.62rem; font-weight:700; border-radius:var(--radius-full); background:var(--color-rose); color:#fff; display:grid; place-items:center; }

/* ---------- Department headers ---------- */
.dept { padding-block:clamp(var(--space-12),6vw,var(--space-20)); }
.dept-head { text-align:center; max-width:60ch; margin:0 auto var(--space-10); }
.dept-head .eyebrow { justify-content:center; }
.dept-head h2 { font-size:var(--text-2xl); margin-bottom:var(--space-3); }
.dept-head p { color:var(--color-text-muted); font-size:var(--text-base); max-width:52ch; margin-inline:auto; }
.dept-head .dept-note { display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--space-5); font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--color-primary); font-weight:600; background:var(--color-primary-soft); padding:.4rem .95rem; border-radius:var(--radius-full); }

/* botanical divider between departments */
.botanical-divider { display:flex; justify-content:center; align-items:center; gap:var(--space-4); padding:var(--space-10) 0; color:var(--color-platinum); }
.botanical-divider svg { width:180px; max-width:60vw; }

/* ---------- Boutique product grid ---------- */
.boutique-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
@media (min-width:720px){ .boutique-grid { grid-template-columns:repeat(3,1fr); gap:var(--space-6); } }
@media (min-width:1080px){ .boutique-grid.cols-4 { grid-template-columns:repeat(4,1fr); } }

.bcard {
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.bcard:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--color-primary-soft); }
.bcard .thumb { aspect-ratio:1; display:grid; place-items:center; position:relative; overflow:hidden; }
.bcard .thumb svg { width:38%; height:38%; opacity:.6; color:var(--color-primary); transition:transform .5s cubic-bezier(0.16,1,0.3,1); }
.bcard:hover .thumb svg { transform:scale(1.08) rotate(-2deg); }
.bcard .body { padding:var(--space-5); display:flex; flex-direction:column; flex:1; }
.bcard .cat { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.14em; color:var(--color-text-faint); margin-bottom:var(--space-1); }
.bcard h3 { font-size:var(--text-base); font-family:var(--font-body); font-weight:700; line-height:1.3; margin-bottom:var(--space-2); }
.bcard .desc { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.55; margin-bottom:var(--space-4); flex:1; }
.bcard .nora-says { font-family:var(--font-hand); font-size:1.05rem; color:var(--color-rose-deep); line-height:1.3; margin-bottom:var(--space-4); }
.bcard .row { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-top:auto; }
.bcard .price { color:var(--color-primary); font-weight:700; font-size:var(--text-lg); font-family:var(--font-display); }
.bcard .btn { padding:.5rem 1.1rem; font-size:var(--text-xs); }

/* ribbons / badges on cards */
.ribbon { position:absolute; top:var(--space-3); left:var(--space-3); z-index:2; background:var(--color-rose); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.32rem .7rem; border-radius:var(--radius-full); box-shadow:var(--shadow-sm); }
.chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .65rem; border-radius:var(--radius-full); margin-bottom:var(--space-3); align-self:flex-start; }
.chip--ship { background:var(--color-sage-soft); color:var(--color-primary-active); }
.chip--download { background:var(--color-rose-soft); color:var(--color-rose-deep); }
.chip--find { background:var(--color-primary-soft); color:var(--color-primary-active); }

/* trust signal row */
.trust-row { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3) var(--space-6); margin-top:var(--space-8); }
.trust-row span { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--text-xs); color:var(--color-text-muted); font-weight:500; }
.trust-row svg { color:var(--color-primary); }

/* extra product thumb gradients */
.g-blush { background:linear-gradient(150deg,var(--color-rose-soft),#f6ede9,var(--color-primary-soft)); }
.g-platinum { background:linear-gradient(150deg,#eceae2,var(--color-sage-soft)); }
.g-kraft { background:linear-gradient(150deg,#e8ddc9,var(--color-rose-soft)); }

/* ---------- TikTok Shop section ---------- */
.tiktok-band { position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:clamp(2rem,5vw,3.5rem); background:linear-gradient(135deg,#111 0%,#1c1c1e 55%,#0f2b2b 100%); color:#fff; box-shadow:var(--shadow-lg); }
.tiktok-band::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 12% 20%, rgba(37,244,238,0.22), transparent 60%), radial-gradient(55% 75% at 90% 85%, rgba(254,44,85,0.24), transparent 60%); pointer-events:none; }
.tiktok-inner { position:relative; z-index:1; }
.tiktok-badge { display:inline-flex; align-items:center; gap:.55rem; background:#fff; color:#111; font-size:var(--text-xs); font-weight:700; letter-spacing:.04em; padding:.5rem 1rem; border-radius:var(--radius-full); margin-bottom:var(--space-5); }
.tiktok-badge .tt-note { width:1.1rem; height:1.1rem; color:#fe2c55; }
.tiktok-band h2 { color:#fff; font-size:var(--text-2xl); margin-bottom:var(--space-3); }
.tiktok-band p.lead { color:rgba(255,255,255,0.82); }
.btn--tiktok { background:linear-gradient(90deg,#fe2c55,#25f4ee); color:#111; font-weight:700; border:none; }
.btn--tiktok:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(254,44,85,0.35); color:#111; }
.tt-live { display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-6); }
.tt-live .slot { display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:var(--radius-md); padding:.7rem 1.1rem; font-size:var(--text-sm); }
.tt-live .slot .pulse { width:.55rem; height:.55rem; border-radius:50%; background:#fe2c55; box-shadow:0 0 0 0 rgba(254,44,85,0.6); animation:ttpulse 2s infinite; }
@keyframes ttpulse { 0%{box-shadow:0 0 0 0 rgba(254,44,85,0.55);} 70%{box-shadow:0 0 0 8px rgba(254,44,85,0);} 100%{box-shadow:0 0 0 0 rgba(254,44,85,0);} }

/* TikTok product carousel */
.tt-carousel { display:flex; gap:var(--space-4); overflow-x:auto; scroll-snap-type:x mandatory; padding:var(--space-2) 0 var(--space-4); margin-top:var(--space-8); -webkit-overflow-scrolling:touch; }
.tt-carousel::-webkit-scrollbar { height:6px; }
.tt-carousel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.25); border-radius:99px; }
.tt-item { scroll-snap-align:start; flex:0 0 auto; width:150px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-md); overflow:hidden; text-align:left; transition:transform var(--transition-interactive); }
.tt-item:hover { transform:translateY(-4px); }
.tt-item .tt-thumb { aspect-ratio:1; display:grid; place-items:center; }
.tt-item .tt-thumb svg { width:40%; color:rgba(255,255,255,0.7); }
.tt-item .tt-body { padding:.7rem .8rem; }
.tt-item .tt-name { font-size:var(--text-xs); font-weight:600; color:#fff; line-height:1.3; }
.tt-item .tt-price { font-size:var(--text-xs); color:#25f4ee; font-weight:700; margin-top:.25rem; }

/* ---------- Home merch strip ---------- */
.merch-grid { display:grid; grid-template-columns:1fr; gap:var(--space-6); }
@media (min-width:760px){ .merch-grid { grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   SNAPCHAT PAGE
   ============================================================ */
.snap-page { --snap-yellow:#FFFC00; }
.snap-hero { position:relative; overflow:hidden; padding-block:clamp(var(--space-16),9vw,var(--space-24)); background:linear-gradient(160deg, var(--snap-yellow) 0%, #fff7b0 42%, var(--color-bg) 100%); }
[data-theme='dark'] .snap-hero { background:linear-gradient(160deg,#7a7800 0%,#3a3a12 45%,var(--color-bg) 100%); }
.snap-hero-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:820px){ .snap-hero-inner { grid-template-columns:1fr; text-align:center; } }
.snap-hero h1 { font-size:var(--text-3xl); color:#1a1a08; margin-bottom:var(--space-5); }
[data-theme='dark'] .snap-hero h1 { color:var(--color-text); }
.snap-hero .lead { color:#3a3a1a; margin-bottom:var(--space-8); }
[data-theme='dark'] .snap-hero .lead { color:var(--color-text-muted); }
.snap-hero .eyebrow { color:#5a5800; }

.btn--snap { background:var(--snap-yellow); color:#111; font-weight:700; border:1px solid #111; box-shadow:0 4px 0 #111; }
.btn--snap:hover { transform:translateY(-2px); box-shadow:0 6px 0 #111; color:#111; background:var(--snap-yellow); }
.btn--snap svg { color:#111; }

/* snapcode / ghost orb */
.snap-orb { position:relative; justify-self:center; width:min(300px,72vw); aspect-ratio:1; background:var(--snap-yellow); border:3px solid #111; border-radius:38px; display:grid; place-items:center; box-shadow:10px 10px 0 rgba(0,0,0,0.15); }
.snap-orb .ghost { width:48%; color:#111; }
.snap-orb .handle { position:absolute; bottom:-.9rem; left:50%; transform:translateX(-50%); background:#111; color:var(--snap-yellow); font-size:var(--text-sm); font-weight:700; padding:.35rem 1rem; border-radius:var(--radius-full); white-space:nowrap; }

/* snap story grid */
.snap-stories { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
@media (min-width:720px){ .snap-stories { grid-template-columns:repeat(3,1fr); } }
.snap-story { position:relative; aspect-ratio:9/16; border-radius:var(--radius-lg); overflow:hidden; border:2px solid #111; box-shadow:var(--shadow-md); display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-4); color:#fff; transition:transform var(--transition-interactive); }
.snap-story:hover { transform:translateY(-5px) scale(1.01); }
.snap-story::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,0.72)); z-index:1; }
.snap-story .emoji { position:absolute; top:var(--space-3); right:var(--space-4); font-size:1.6rem; z-index:2; }
.snap-story .cap { position:relative; z-index:2; font-weight:600; font-size:var(--text-sm); line-height:1.35; }
.snap-story .swipe { position:relative; z-index:2; margin-top:.5rem; font-size:var(--text-xs); opacity:.9; display:flex; align-items:center; gap:.3rem; }
.ss-1 { background:linear-gradient(155deg,#c8a2a0,#7c8c72); }
.ss-2 { background:linear-gradient(155deg,#7c8c72,#a7b89b); }
.ss-3 { background:linear-gradient(155deg,#e8ddc9,#c8a2a0); }
.ss-4 { background:linear-gradient(155deg,#c8a2a0,#efeae0); }
.ss-5 { background:linear-gradient(155deg,#3a4038,#64735a); }
.ss-6 { background:linear-gradient(155deg,#a87e7c,#c8a2a0); }

/* snap exclusive teaser */
.snap-exclusive { background:#111; color:#fff; border-radius:var(--radius-xl); padding:clamp(2rem,5vw,3.5rem); text-align:center; position:relative; overflow:hidden; }
.snap-exclusive::before { content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 50% 0%, rgba(255,252,0,0.18), transparent 65%); }
.snap-exclusive > * { position:relative; z-index:1; }
.snap-exclusive h2 { color:var(--snap-yellow); font-size:var(--text-2xl); margin-bottom:var(--space-3); }
.snap-exclusive p { color:rgba(255,255,255,0.8); max-width:52ch; margin:0 auto var(--space-6); }
.snap-exclusive .lock { display:inline-grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:var(--radius-full); background:rgba(255,252,0,0.14); color:var(--snap-yellow); margin-bottom:var(--space-5); }

/* lens/filter showcase */
.lens-grid { display:grid; grid-template-columns:1fr; gap:var(--space-6); }
@media (min-width:720px){ .lens-grid { grid-template-columns:repeat(3,1fr); } }
.lens-card { text-align:center; padding:var(--space-8) var(--space-6); border-radius:var(--radius-lg); border:2px solid #111; background:var(--color-surface-2); box-shadow:var(--shadow-sm); transition:transform var(--transition-interactive); }
.lens-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.lens-ring { width:5.5rem; height:5.5rem; margin:0 auto var(--space-5); border-radius:var(--radius-full); display:grid; place-items:center; background:var(--snap-yellow); border:2px solid #111; }
.lens-ring svg { width:52%; color:#111; }
.lens-card h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.lens-card p { font-size:var(--text-sm); color:var(--color-text-muted); }

/* footer 5-col support */
.footer-grid.five { grid-template-columns:1.6fr 1fr 1fr 1fr; }
@media (max-width:820px){ .footer-grid.five { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid.five { grid-template-columns:1fr; } }

/* ============================================================
   WORKSHOP LAYER — 3D Printing · Machinist · Nerd
   Sage/cream palette + industrial steel & copper/brass accents
   ============================================================ */
:root {
  --color-copper: #B87333;       /* brass/copper accent — used sparingly */
  --color-copper-soft: #ecdcca;
  --color-copper-deep: #8f5824;
  --color-steel-1: #3a3d38;
  --color-steel-2: #55584f;
  --color-charcoal: #1C1C1C;
  --color-darksage: #1A2416;
}
[data-theme='dark'] {
  --color-copper: #d4924f;
  --color-copper-soft: #402e1c;
  --color-copper-deep: #e6a768;
}

/* steel texture surface via layered gradients */
.steel-surface {
  background:
    linear-gradient(100deg, rgba(255,255,255,0.04) 0%, transparent 6%, transparent 94%, rgba(0,0,0,0.14) 100%),
    repeating-linear-gradient(92deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--color-steel-1), var(--color-steel-2));
}

/* ---------- Workshop hero ---------- */
.ws-hero { position:relative; overflow:hidden; color:#f2efe7;
  background:
    radial-gradient(60% 70% at 80% 12%, rgba(184,115,51,0.20), transparent 60%),
    repeating-linear-gradient(94deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 6px),
    linear-gradient(158deg, var(--color-charcoal) 0%, #23261f 55%, var(--color-darksage) 100%);
  padding-block:clamp(var(--space-20),12vw,var(--space-32));
}
.ws-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--color-copper) 30%, var(--color-copper) 70%, transparent); }
.ws-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.ws-hero .eyebrow { color:var(--color-copper); }
.ws-hero h1 { font-size:var(--text-hero); color:#f5f2ea; margin-bottom:var(--space-5); }
.ws-hero h1 em { font-style:italic; color:var(--color-copper); }
.ws-hero .lead { color:rgba(242,239,231,0.82); margin-bottom:var(--space-8); }
.ws-hero .btn--ghost { color:#f2efe7; border-color:rgba(242,239,231,0.28); background:rgba(255,255,255,0.05); }
.ws-hero .btn--ghost:hover { border-color:var(--color-copper); color:var(--color-copper); background:rgba(184,115,51,0.08); }
.btn--copper { background:var(--color-copper); color:#1c1408; box-shadow:var(--shadow-sm); font-weight:700; }
.btn--copper:hover { background:var(--color-copper-deep); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
@media (max-width:820px){ .ws-hero-inner { grid-template-columns:1fr; text-align:center; } .ws-hero .lead { margin-inline:auto; } .ws-hero .hero-ctas { justify-content:center; } }

/* bench orb — gear + botanical hybrid */
.bench-orb { position:relative; justify-self:center; width:min(320px,78vw); aspect-ratio:1; }
.bench-orb .gear { position:absolute; inset:0; color:rgba(184,115,51,0.55); animation:spin 44s linear infinite; }
.bench-orb .gear.inner { inset:22%; color:rgba(242,239,231,0.35); animation:spin 30s linear infinite reverse; }
.bench-orb .core { position:absolute; inset:30%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(184,115,51,0.5), rgba(26,36,22,0.9) 70%);
  display:grid; place-items:center; box-shadow:0 0 50px rgba(184,115,51,0.35), inset 0 0 30px rgba(0,0,0,0.4); }
.bench-orb .core svg { width:48%; color:var(--color-copper); }

/* ---------- Workshop section base ---------- */
.ws-section { padding-block:clamp(var(--space-16),9vw,var(--space-24)); }
.ws-head { max-width:60ch; margin-bottom:var(--space-10); }
.ws-head.center { margin-inline:auto; text-align:center; }
.ws-head .eyebrow { color:var(--color-copper); }
.ws-head.center .eyebrow { justify-content:center; }
.ws-head h2 { font-size:var(--text-2xl); margin-bottom:var(--space-4); }
.ws-head p { color:var(--color-text-muted); font-size:var(--text-lg); max-width:56ch; }
.ws-head.center p { margin-inline:auto; }

/* copper accented sub heading */
.ws-subhead { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-lg); color:var(--color-primary); margin:var(--space-10) 0 var(--space-5); font-family:var(--font-display); }
.ws-subhead::before { content:""; width:1.6rem; height:2px; background:var(--color-copper); flex-shrink:0; }

/* what-she-makes chip list */
.make-list { display:flex; flex-wrap:wrap; gap:var(--space-3); margin:var(--space-6) 0; }
.make-list span { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--text-sm); padding:.5rem 1rem; border-radius:var(--radius-full); background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text-muted); }
.make-list span svg { color:var(--color-copper); width:15px; height:15px; }

/* printer/setup callout card */
.setup-card { background:var(--color-surface); border:1px solid var(--color-border); border-left:3px solid var(--color-copper); border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.5rem); }
.setup-card h3 { font-size:var(--text-lg); margin-bottom:var(--space-3); }
.setup-card p { color:var(--color-text-muted); }
.setup-card .kit { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin-top:var(--space-4); font-size:var(--text-sm); color:var(--color-text-muted); }
.setup-card .kit b { color:var(--color-copper); font-weight:700; }

/* STL / download grid gradient */
.g-copper { background:linear-gradient(150deg, var(--color-copper-soft), var(--color-primary-soft)); }
.g-steel { background:linear-gradient(150deg, #d9d6cc, var(--color-sage-soft)); }
.chip--stl { background:var(--color-copper-soft); color:var(--color-copper-deep); }
.chip--made { background:var(--color-sage-soft); color:var(--color-primary-active); }
.btn--copper.btn { }

/* shop rules list */
.rules { counter-reset:rule; display:grid; gap:var(--space-3); max-width:52ch; }
.rules li { list-style:none; display:flex; gap:var(--space-4); align-items:flex-start; color:var(--color-text); font-size:var(--text-base); padding:var(--space-3) 0; border-bottom:1px dashed var(--color-border); }
.rules li::before { counter-increment:rule; content:counter(rule); flex-shrink:0; width:2rem; height:2rem; border-radius:var(--radius-full); background:var(--color-copper); color:#1c1408; font-family:var(--font-display); font-weight:600; display:grid; place-items:center; font-size:var(--text-sm); }

/* machine shop dark band */
.shop-band { position:relative; overflow:hidden; border-radius:var(--radius-xl); color:#f2efe7;
  background:
    radial-gradient(50% 60% at 88% 15%, rgba(184,115,51,0.22), transparent 60%),
    repeating-linear-gradient(93deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 7px),
    linear-gradient(155deg, var(--color-charcoal), #262922 60%, var(--color-darksage));
  padding:clamp(2rem,5vw,3.5rem); }
.shop-band .eyebrow { color:var(--color-copper); }
.shop-band h2 { color:#f5f2ea; font-size:var(--text-2xl); margin-bottom:var(--space-4); }
.shop-band .lead, .shop-band p { color:rgba(242,239,231,0.82); }
.shop-band .ws-subhead { color:#e7d8c4; }
.shop-band .make-list span { background:rgba(255,255,255,0.06); border-color:rgba(242,239,231,0.16); color:rgba(242,239,231,0.85); }
.shop-band .rules li { color:#f2efe7; border-color:rgba(242,239,231,0.14); }
.shop-band blockquote { font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); color:#efe0cd; border-left:3px solid var(--color-copper); padding-left:var(--space-6); margin:var(--space-6) 0; line-height:1.4; }

/* nerd shelf — code block */
.code-block { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); font-family:'Karla', ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-block .code-bar { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; background:var(--color-surface-offset); border-bottom:1px solid var(--color-border); font-size:var(--text-xs); color:var(--color-text-muted); }
.code-block .code-bar .dots { display:flex; gap:.35rem; }
.code-block .code-bar .dots i { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; }
.code-block .code-bar .dots i:nth-child(1){ background:var(--color-rose); }
.code-block .code-bar .dots i:nth-child(2){ background:var(--color-gold); }
.code-block .code-bar .dots i:nth-child(3){ background:var(--color-primary); }
.code-block .code-bar .fname { margin-left:auto; font-family:var(--font-body); letter-spacing:.04em; }
.code-block pre { margin:0; padding:1.25rem 1.4rem; overflow-x:auto; font-size:.85rem; line-height:1.7; color:var(--color-text); }
.code-block .c-kw { color:var(--color-copper-deep); font-weight:700; }
.code-block .c-fn { color:var(--color-primary); }
.code-block .c-str { color:var(--color-rose-deep); }
.code-block .c-com { color:var(--color-text-faint); font-style:italic; }
.code-block .c-num { color:var(--color-gold); }
[data-theme='dark'] .code-block .c-kw { color:var(--color-copper); }

/* nerd project cards */
.nerd-grid { display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:640px){ .nerd-grid { grid-template-columns:repeat(2,1fr); } }
.nerd-card { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm); transition:transform var(--transition-interactive), box-shadow var(--transition-interactive); }
.nerd-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.nerd-card .ic { width:2.6rem; height:2.6rem; border-radius:var(--radius-md); background:var(--color-copper-soft); color:var(--color-copper-deep); display:grid; place-items:center; margin-bottom:var(--space-4); }
.nerd-card h3 { font-size:var(--text-base); font-family:var(--font-body); font-weight:700; margin-bottom:var(--space-2); }
.nerd-card p { font-size:var(--text-sm); color:var(--color-text-muted); }
.nerd-card .stack { margin-top:var(--space-3); font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--color-copper-deep); font-weight:700; }

/* github callout */
.gh-callout { display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-6); align-items:center; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.5rem); }
.gh-callout .gh-ic { width:3.4rem; height:3.4rem; border-radius:var(--radius-md); background:var(--color-primary-soft); color:var(--color-primary); display:grid; place-items:center; }
.gh-callout h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.gh-callout p { color:var(--color-text-muted); font-size:var(--text-sm); max-width:52ch; }
@media (max-width:640px){ .gh-callout { grid-template-columns:1fr; text-align:center; } .gh-callout .gh-ic { margin-inline:auto; } }

/* workshop tiktok cards */
.ws-tt-grid { display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:640px){ .ws-tt-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .ws-tt-grid { grid-template-columns:repeat(3,1fr); } }
.ws-tt-card { position:relative; aspect-ratio:9/13; border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-5); color:#fff; border:1px solid rgba(0,0,0,0.2); box-shadow:var(--shadow-md); transition:transform var(--transition-interactive); }
.ws-tt-card:hover { transform:translateY(-5px) scale(1.01); }
.ws-tt-card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.78)); z-index:1; }
.ws-tt-card .tag { position:absolute; top:var(--space-4); left:var(--space-4); z-index:2; font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--color-copper); color:#1c1408; padding:.28rem .7rem; border-radius:var(--radius-full); }
.ws-tt-card .cap { position:relative; z-index:2; font-weight:600; font-size:var(--text-sm); line-height:1.35; }
.ws-tt-card .sub { position:relative; z-index:2; margin-top:.4rem; font-size:var(--text-xs); opacity:.86; }
.wt-1 { background:linear-gradient(155deg,#1C1C1C,#3a3d38); }
.wt-2 { background:linear-gradient(155deg,#8f5824,#1A2416); }
.wt-3 { background:linear-gradient(155deg,#55584f,#B87333); }
.wt-4 { background:linear-gradient(155deg,#1A2416,#64735a); }
.wt-5 { background:linear-gradient(155deg,#B87333,#3a4038); }
.wt-6 { background:linear-gradient(155deg,#3a4038,#c8a2a0); }

/* collab shelf */
.collab-grid { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:640px){ .collab-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .collab-grid { grid-template-columns:repeat(3,1fr); } }
.collab-card { display:flex; gap:var(--space-4); align-items:flex-start; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-5); transition:transform var(--transition-interactive), border-color var(--transition-interactive); }
.collab-card:hover { transform:translateY(-3px); border-color:var(--color-copper); }
.collab-card .ci { width:2.4rem; height:2.4rem; flex-shrink:0; border-radius:var(--radius-sm); background:var(--color-copper-soft); color:var(--color-copper-deep); display:grid; place-items:center; }
.collab-card h4 { font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; margin-bottom:.2rem; }
.collab-card p { font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.5; }
.collab-card a { color:var(--color-copper-deep); font-weight:700; font-size:var(--text-xs); margin-top:.4rem; display:inline-block; }

/* hex/gear decorative float */
.ws-decor { position:absolute; color:var(--color-copper); opacity:.14; pointer-events:none; }

/* ---------- Home workshop teaser ---------- */
.home-ws-teaser { position:relative; overflow:hidden; color:#f2efe7;
  background:
    radial-gradient(55% 70% at 82% 20%, rgba(184,115,51,0.20), transparent 60%),
    repeating-linear-gradient(93deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 7px),
    linear-gradient(155deg, var(--color-charcoal) 0%, #22261e 55%, var(--color-darksage) 100%);
  padding-block:clamp(var(--space-20),11vw,var(--space-32)); text-align:center; }
.home-ws-teaser::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, var(--color-copper), transparent); }
.home-ws-teaser .inner { position:relative; z-index:1; max-width:60ch; margin-inline:auto; }
.home-ws-teaser .eyebrow { color:var(--color-copper); justify-content:center; }
.home-ws-teaser h2 { color:#f5f2ea; font-size:var(--text-2xl); margin-bottom:var(--space-4); }
.home-ws-teaser p { color:rgba(242,239,231,0.82); max-width:50ch; margin:0 auto var(--space-8); font-size:var(--text-lg); }
.home-ws-teaser .ws-decor.g1 { top:8%; left:6%; width:90px; }
.home-ws-teaser .ws-decor.g2 { bottom:10%; right:8%; width:120px; }