/* ─────────────────────────────────────────────────────────────────
   TYNKR DESIGN SYSTEM TOKENS — v1
   Shared 14-token architecture matching the Tynkr Glass Design System.

   Default root = Cosmic Midnight Dark (matches current BBJ site tone).
   Theme switch: set data-theme="light" | "mist" | "dark" on <html>.

   This file is ADDITIVE. Existing per-page CSS variables (e.g.
   --bbj-bg, --tynkr-accent) are untouched and continue to work
   exactly as before. Future glass work and theme switching reference
   the tokens defined here.
   ───────────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* Foundation (1-5) */
  --bg:           #0b0813;
  --surface:      #120f1f;
  --text:         #ede8f5;
  --muted:        #8a7fa8;
  --border:       #2a2040;

  /* Accents (6-7) */
  --accent:       #c9a84c;                           /* warm gold */
  --accent-soft:  rgba(201, 168, 76, 0.15);          /* hover wash */

  /* Semantic (8-9) */
  --positive:     #6fd19a;                           /* mint */
  --negative:     #e88a6a;                           /* coral */

  /* Glass surfaces (10-12) */
  --glass-bg:     rgba(0, 0, 0, 0.20);               /* black 20% */
  --glass-border: rgba(255, 255, 255, 0.08);
  --rim-light:    rgba(255, 215, 128, 0.70);         /* gold rim */

  /* Ambient washes (13-14) */
  --wash-a:       rgba(201, 168, 76, 0.18);          /* gold corner */
  --wash-b:       rgba(123, 79, 166, 0.14);          /* purple corner */

  /* Nav-specific glass (translucent enough for backdrop-filter to show,
     opaque enough to keep the nav legible at a glance) */
  --nav-bg:       rgba(11, 8, 19, 0.72);             /* dark pages */
  --nav-border:   rgba(255, 255, 255, 0.06);

  /* Typography stack */
  --font-display: 'Cinzel', 'Syne', serif;
  --font-body:    'Crimson Pro', 'DM Sans', sans-serif;
  --font-ui:      'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

[data-theme="light"] {
  --bg:           #f7f4f2;
  --surface:      #ffffff;
  --text:         #0c0813;
  --muted:        #6b6170;
  --border:       #e4ddd2;
  --accent:       #e8500a;                           /* vibrant orange */
  --accent-soft:  rgba(232, 80, 10, 0.10);
  --positive:     #1f7a4d;                           /* forest */
  --negative:     #b23a1a;                           /* rust */
  --glass-bg:     rgba(255, 255, 255, 0.15);
  --glass-border: rgba(0, 0, 0, 0.08);
  --rim-light:    rgba(255, 255, 255, 0.95);
  --wash-a:       rgba(232, 80, 10, 0.14);           /* orange corner */
  --wash-b:       rgba(255, 210, 180, 0.20);         /* peach corner */
  --nav-bg:       rgba(247, 246, 242, 0.72);         /* Tynkr cream pages */
  --nav-border:   rgba(0, 0, 0, 0.06);
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-ui:      'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

[data-theme="mist"] {
  --bg:           #3f454c;
  --surface:      #4a5159;
  --text:         #e8ebed;                           /* cool white */
  --muted:        #a3adb6;
  --border:       #55606a;
  --accent:       #8fb1c6;                           /* dusty blue */
  --accent-soft:  rgba(143, 177, 198, 0.15);
  --positive:     #95b8a5;                           /* sage */
  --negative:     #c68888;                           /* dusty brick */
  --glass-bg:     rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.12);
  --rim-light:    rgba(200, 215, 225, 0.65);         /* silver rim */
  --wash-a:       rgba(143, 177, 198, 0.18);         /* dusty blue */
  --wash-b:       rgba(180, 195, 205, 0.14);         /* silver */
  --nav-bg:       rgba(63, 69, 76, 0.72);
  --nav-border:   rgba(255, 255, 255, 0.08);
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-ui:      'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* ─────────────────────────────────────────────────────────────────
   MONOSPACE NUMERIC DISPLAY
   Tabular monospace for prices and financial data — aligns digits
   vertically in sidebars and comparison tables. Uses font-variant-numeric
   to force equal-width digits even when the font isn't strictly monospace.
   ───────────────────────────────────────────────────────────────── */

.sidebar-price,
.sidebar-price-strike,
.sidebar-price-save,
.format-price,
.opt-price,
.price,
.tynkr-price,
.offer-price,
[data-price] {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* "FROM" label sits next to a price — keep its own font but reduce
   the visual weight so the price reads cleanly. */
.from-label {
  font-variant-numeric: tabular-nums;
}

/* Apply tabular-nums to comparison tables in blog posts. Digits align
   in vertical columns without changing the surrounding prose font. */
.article-body table,
.comparison-table,
.feature-table {
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────
   GLASS NAV — Step G1 of the Tynkr Glass Design System rollout.
   Upgrades the existing .site-nav on every page to the design-system
   frosted-acrylic treatment. Background uses --nav-bg (theme-aware)
   so Tynkr pages stay cream-tinted, BBJ pages stay dark-tinted.
   A 1px top rim-light gradient provides the "top sheen" from the
   glass primitive anatomy (PDF p.3).
   ───────────────────────────────────────────────────────────────── */

.site-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.45);
}

/* Top rim-light: a visible bright edge with a soft halo that fades
   into the nav body. Matches the "top sheen" from the PDF (p.3). */
.site-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rim-light) 15%,
    var(--rim-light) 85%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 14px var(--rim-light);
}

/* Safari fallback: if backdrop-filter isn't supported, bump opacity
   so the nav remains legible without the blur effect. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav {
    background: var(--bg);
  }
}

/* ─────────────────────────────────────────────────────────────────
   G2 — AMBIENT COLOR WASHES ON HERO SPLIT
   Replaces the weak existing ::before decorations on .hero-tynkr and
   .hero-bbj with bold corner washes (PDF p.8) that give the glass
   nav something to frost against and create the "premium ambient
   light" signature of the design system.

   Tynkr side (cream):   orange (top-right) + peach (bottom-left)
   BBJ side (dark):      purple (left) + gold (top-right) + coral (bottom-right)

   All washes are heavily blurred (filter: blur(20-28px)) for the
   watercolor-bleed softness from the PDF screenshots. Text elements
   in each hero already carry z-index: 1, so they remain above the
   wash layer at z-index: 0.
   ───────────────────────────────────────────────────────────────── */

.hero-tynkr,
.hero-bbj {
  isolation: isolate;
}

.hero-tynkr::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -20%;
  width: 95%;
  height: 135%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(232, 80, 10, 0.22) 0%,
    rgba(232, 80, 10, 0.10) 35%,
    transparent 70%
  );
  filter: blur(24px);
  pointer-events: none;
}

.hero-tynkr::after {
  content: '';
  position: absolute;
  bottom: -25%;
  left: -15%;
  width: 85%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 180, 120, 0.20) 0%,
    rgba(255, 210, 180, 0.10) 40%,
    transparent 75%
  );
  filter: blur(32px);
  pointer-events: none;
}

.hero-bbj::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 45%, rgba(123, 79, 166, 0.38) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 85% 15%, rgba(201, 168, 76, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 80% 85%, rgba(232, 140, 100, 0.14) 0%, transparent 65%);
  filter: blur(8px);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   G3 — GLASS PROTOTYPE (SCOPED)
   All rules here are gated to [data-glass="prototype"] so they only
   apply to the single page opted in via that attribute on <html>.
   This is the exploratory prototype for full-page glass treatment
   — hero ambient wash, frosted sidebar, and CTA rim-light.
   If the prototype looks right, the pattern rolls out to other
   product pages. If it doesn't, the attribute is removed and zero
   other pages are affected.
   ───────────────────────────────────────────────────────────────── */

/* Hero: contain ambient washes within the hero box */
[data-glass="prototype"] .product-hero {
  overflow: hidden;
  isolation: isolate;
}

/* Bold orange bloom from top-right (replaces the existing weak
   5%-opacity radial gradient) */
[data-glass="prototype"] .product-hero::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -10%;
  bottom: auto;
  left: auto;
  width: 65%;
  height: 130%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(232, 80, 10, 0.18) 0%,
    rgba(232, 80, 10, 0.08) 40%,
    transparent 75%
  );
  filter: blur(24px);
  pointer-events: none;
  inset: auto;
}

/* Peach bloom from bottom-left — new ::after */
[data-glass="prototype"] .product-hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 55%;
  height: 110%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 180, 120, 0.18) 0%,
    rgba(255, 210, 180, 0.08) 40%,
    transparent 75%
  );
  filter: blur(32px);
  pointer-events: none;
}

/* Sticky sidebar: frosted glass primitive.
   Dropped bg opacity 55% -> 42% for a clearer glass signature.
   Brighter rim-light (2px), plus an outer warm glow so the sidebar
   visibly "floats" off the page. */
[data-glass="prototype"] .sticky-sidebar {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 18px 48px -12px rgba(232, 80, 10, 0.18),
    0 10px 36px -12px rgba(0, 0, 0, 0.16);
}

/* Beef up the ::before orange wash on the sidebar so the frosted
   surface has visible color to react to (backdrop-filter needs
   something colorful behind it or the glass effect disappears). */
[data-glass="prototype"] .sticky-sidebar::before {
  background:
    radial-gradient(ellipse at top right, rgba(232, 80, 10, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(255, 180, 120, 0.10) 0%, transparent 60%);
}

/* Sidebar CTA: keep solid orange fill for conversion weight, add a
   subtle top-inner rim-light + warm outer glow so it reads as the
   "lit" primary action without being watered down by glass. */
[data-glass="prototype"] .sidebar-cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 18px -4px rgba(232, 80, 10, 0.40);
}

/* Studio Guarantee nested block: subtle glass so it reads as a
   distinct surface inside the already-frosted sidebar without
   stacking heavy glass on heavy glass. */
[data-glass="prototype"] .studio-guarantee {
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
}

/* ─────────────────────────────────────────────────────────────────
   G5 — TYNKR HOMEPAGE GRID ALIGNMENT (selector-scoped to #tynkr)
   Brings the Tynkr grid on index.html in line with the product
   detail pages. Uses #tynkr-scoped selectors rather than
   data-glass so the dual-brand homepage doesn't imply "all glass"
   — only the Tynkr section gets the treatment.
   ───────────────────────────────────────────────────────────────── */

/* Contain ambient wash inside #tynkr */
#tynkr {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft ambient color wash behind the grid — gives the frosted
   cards and filter pills something colorful to frost against
   instead of the flat cream section bg. */
#tynkr::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 15% 25%, rgba(232, 80, 10, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 80%, rgba(255, 180, 120, 0.12) 0%, transparent 60%);
  filter: blur(28px);
  pointer-events: none;
}
#tynkr > * { position: relative; }  /* keep content above the wash */

/* Filter pills: frosted by default, solid orange when active.
   Matches the product-page chip treatment + preserves the
   conversion-weight hierarchy for the selected filter. */
#tynkr .filter-btn {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.80);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 8px -3px rgba(232, 80, 10, 0.14);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
#tynkr .filter-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 14px -3px rgba(232, 80, 10, 0.22);
}
#tynkr .filter-btn.active {
  background: var(--tynkr-accent);
  border-color: var(--tynkr-accent);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 14px -3px rgba(232, 80, 10, 0.40);
}
#tynkr .filter-btn.active:hover {
  background: var(--tynkr-accent);  /* keep active state fixed */
  transform: translateY(-1px);
}

/* Product cards: frosted text area. The mockup image at the top
   stays full-opacity (it's each card's hero). Border + backdrop-
   filter apply to the whole card so the text panel frosts the
   section wash behind it. Uses .glass-lite pattern (PDF p.10):
   lighter blur (14px), no double pseudo-elements — safer on GPU
   when 12+ cards tile. */
#tynkr .card-tynkr {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 28px -10px rgba(0, 0, 0, 0.10);
  transition: transform 0.25s, box-shadow 0.25s;
}
#tynkr .card-tynkr:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 18px 44px -10px rgba(232, 80, 10, 0.18);
}

/* Safari fallback for #tynkr glass elements */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #tynkr .filter-btn { background: rgba(255, 255, 255, 0.88); }
  #tynkr .card-tynkr { background: rgba(255, 255, 255, 0.94); }
}

/* ─────────────────────────────────────────────────────────────────
   G6 — COSMIC GLASS (BBJ SIDE)
   Applied to 15 zodiac collection pages via data-glass="cosmic" on
   <html>. Kept separate from data-glass="prototype" (Tynkr) so the
   two design families can evolve independently. Uses the PDF's
   Dark theme corner-wash matrix (gold + purple + coral) and dark
   frosted glass surfaces with gold rim-lights.

   Covers:
   - .collection-hero  (14 pages — Western + Chinese + Landscapes)
   - .sticky-sidebar   (14 pages)
   - .chip             (14 pages)
   - .sidebar-cta      (14 pages)
   - .style-card       (12 Western pages)
   - .animal-card      (Chinese zodiac page)
   - .landscape-card   (Landscapes page)
   ───────────────────────────────────────────────────────────────── */

/* Hero: contain washes */
[data-glass="cosmic"] .collection-hero {
  overflow: hidden;
  isolation: isolate;
}

/* Cosmic ambient washes — matches the G2 BBJ homepage hero language
   (purple + gold + coral corner blooms) so the collection page heroes
   feel like extensions of the homepage. */
[data-glass="cosmic"] .collection-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 45%, rgba(123, 79, 166, 0.34) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 85% 15%, rgba(201, 168, 76, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 80% 85%, rgba(232, 140, 100, 0.12) 0%, transparent 65%);
  filter: blur(10px);
  pointer-events: none;
  inset: auto;
}

/* Sticky sidebar: dark frosted glass with gold rim + purple halo lift.
   Mirrors the Tynkr G3 sidebar pattern but in dark-theme values. */
[data-glass="cosmic"] .sticky-sidebar {
  background: rgba(11, 8, 19, 0.48);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow:
    inset 0 2px 0 rgba(255, 215, 128, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 48px -12px rgba(123, 79, 166, 0.28),
    0 10px 36px -12px rgba(0, 0, 0, 0.55);
}

/* Sidebar ::before: dual radial wash behind the frost so the glass
   has visible color to react to. */
[data-glass="cosmic"] .sticky-sidebar::before {
  background:
    radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(123, 79, 166, 0.12) 0%, transparent 60%);
}

/* Sidebar CTA: keep gold fill (conversion weight), add inset rim +
   warm outer glow. */
[data-glass="cosmic"] .sidebar-cta {
  box-shadow:
    inset 0 1px 0 rgba(11, 8, 19, 0.35),
    0 4px 18px -4px rgba(201, 168, 76, 0.45);
}

/* Chip pills — dark frosted with gold accent rim */
[data-glass="cosmic"] .chip {
  background: rgba(11, 8, 19, 0.38);
  border: 1px solid rgba(201, 168, 76, 0.38);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 128, 0.28),
    0 2px 8px -2px rgba(201, 168, 76, 0.16);
  transition: transform 0.2s, box-shadow 0.2s;
}
[data-glass="cosmic"] .chip:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 128, 0.42),
    0 4px 14px -2px rgba(201, 168, 76, 0.30);
}

/* Style cards (Western zodiac, 12 per page), Animal cards (Chinese),
   Landscape cards (Landscapes). All three use the .glass-lite pattern
   (PDF p.10) — lighter blur(10px), no saturate — safer on GPU when
   tiling 12-24 cards per page. The image area is untouched; only the
   card container and text body get the frost treatment. */
[data-glass="cosmic"] .style-card,
[data-glass="cosmic"] .animal-card,
[data-glass="cosmic"] .landscape-card {
  background: rgba(11, 8, 19, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 76, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 215, 128, 0.22);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
[data-glass="cosmic"] .style-card:hover,
[data-glass="cosmic"] .animal-card:hover,
[data-glass="cosmic"] .landscape-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 128, 0.40),
    0 14px 36px -10px rgba(201, 168, 76, 0.20);
}

/* Safari fallback — higher opacity so dark glass elements stay
   readable if backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-glass="cosmic"] .sticky-sidebar { background: rgba(11, 8, 19, 0.92); }
  [data-glass="cosmic"] .chip { background: rgba(11, 8, 19, 0.82); }
  [data-glass="cosmic"] .style-card,
  [data-glass="cosmic"] .animal-card,
  [data-glass="cosmic"] .landscape-card {
    background: rgba(11, 8, 19, 0.88);
  }
}

/* ─────────────────────────────────────────────────────────────────
   G7 — COSMIC GLASS ON HOMEPAGE BBJ SECTIONS
   Brings the three BBJ homepage grids (#builtbyjosh Western zodiac,
   #chinese-zodiac, #landscapes) into the cosmic glass language
   established on the collection pages. Scope is selector-based on
   the three section IDs (not data-glass) because index.html is
   dual-brand and only the BBJ sections opt in.

   Uses the .glass-lite pattern (PDF p.10) — lighter blur(10px), no
   saturate boost — because 36 cards total tile across the three
   grids. GPU-safe for scroll.
   ───────────────────────────────────────────────────────────────── */

/* Boost the existing #builtbyjosh::before wash + add matching
   washes to #chinese-zodiac and #landscapes. Same recipe as the
   collection hero washes so the page reads as one cosmic flow. */
#builtbyjosh::before,
#chinese-zodiac::before,
#landscapes::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 12% 75%, rgba(123, 79, 166, 0.26) 0%, transparent 58%),
    radial-gradient(ellipse 55% 50% at 88% 15%, rgba(201, 168, 76, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 82% 85%, rgba(232, 140, 100, 0.10) 0%, transparent 60%);
  filter: blur(12px);
  pointer-events: none;
}

/* Filter buttons (Fire/Earth/Air/Water on Western zodiac section):
   default = dark frosted pill with gold-accent border, hover/active
   = brighter gold border + gold rim glow. */
#builtbyjosh .filter-btn-bbj {
  background: rgba(11, 8, 19, 0.42);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(201, 168, 76, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 128, 0.28),
    0 2px 8px -3px rgba(201, 168, 76, 0.14);
  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
#builtbyjosh .filter-btn-bbj:hover,
#builtbyjosh .filter-btn-bbj.active {
  background: rgba(201, 168, 76, 0.15);
  border-color: rgba(201, 168, 76, 0.65);
  color: var(--bbj-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 128, 0.45),
    0 4px 14px -3px rgba(201, 168, 76, 0.30);
}

/* BBJ cards across all three homepage grids — glass-lite for GPU
   safety at 36-card scale. Dark frost, gold rim, gold halo lift
   on hover. Works for Western zodiac, Chinese zodiac, and
   Landscapes uniformly (they all use .card-bbj). */
#builtbyjosh .card-bbj,
#chinese-zodiac .card-bbj,
#landscapes .card-bbj {
  background: rgba(11, 8, 19, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 215, 128, 0.25);
}
#builtbyjosh .card-bbj:hover,
#chinese-zodiac .card-bbj:hover,
#landscapes .card-bbj:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 128, 0.45),
    0 16px 42px -10px rgba(201, 168, 76, 0.20);
}

/* Safari fallback for G7 glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #builtbyjosh .filter-btn-bbj { background: rgba(11, 8, 19, 0.85); }
  #builtbyjosh .card-bbj,
  #chinese-zodiac .card-bbj,
  #landscapes .card-bbj {
    background: rgba(11, 8, 19, 0.90);
  }
}

/* ─────────────────────────────────────────────────────────────────
   G8 — BLOG POST 2-COLUMN LAYOUT WITH STICKY PRODUCT SIDEBAR
   Mirrors the Tynkr product page layout on blog posts: main reading
   column (720px max, optimal reading width) + a sticky product
   sidebar that stays visible throughout the read. Completes the
   "echo Tynkr Tools & Co" identity and adds a persistent conversion
   CTA to every long-form post.

   Applied via <div class="article-main"> wrapper around each post's
   existing <article class="article-body">. Sidebar is <aside
   class="article-sidebar">. Layout collapses to single column at
   1024px breakpoint; sidebar becomes static and appears below
   content on mobile.
   ───────────────────────────────────────────────────────────────── */

.article-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 720px) 280px;
  gap: 3rem;
  align-items: start;
}

/* Override the blog posts' inline .article-body max-width/margin/
   padding so the grid handles layout. Compound selector beats the
   single-class inline rule. */
.article-main .article-body {
  max-width: none;
  margin: 0;
  padding: 0;
}

.article-sidebar {
  position: relative;
}

.article-sidebar-sticky {
  position: sticky;
  top: 88px;
  background: #ffffff;
  border: 1px solid var(--bbj-border);
  padding: 1.5rem;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 4px 18px rgba(12, 8, 19, 0.05);
}

.sidebar-thumb {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.1rem;
  border: 1px solid var(--bbj-border);
}

.sidebar-kicker {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bbj-muted);
  margin-bottom: 0.6rem;
}

.sidebar-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--bbj-text);
  margin-bottom: 0.9rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.sidebar-price-block {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bbj-accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 1rem;
}

.sidebar-price-block .from-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--bbj-muted);
  margin-right: 0.4rem;
  vertical-align: top;
  position: relative;
  top: 0.2rem;
}

.sidebar-cta-btn {
  display: block;
  background: var(--bbj-accent);
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  text-align: center;
  text-decoration: none;
  margin-bottom: 1.1rem;
  transition: background 0.2s, transform 0.2s;
}
.sidebar-cta-btn:hover {
  background: #ff6a2a;
  transform: translateY(-1px);
  text-decoration: none;
}

.sidebar-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--bbj-border);
}
.sidebar-checklist li {
  font-size: 0.82rem;
  color: var(--body-read);
  padding: 0.4rem 0 0.4rem 1.3rem !important;
  position: relative;
  line-height: 1.45;
  margin: 0 !important;
  list-style: none !important;
}
.sidebar-checklist li::before {
  content: '✓' !important;
  position: absolute;
  left: 0;
  color: var(--bbj-accent) !important;
  font-weight: 700;
  font-size: 0.88rem;
  top: 0.45rem !important;
}

@media (max-width: 1024px) {
  .article-main {
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: 2rem;
    padding: 2rem 1.5rem 3rem;
  }
  .article-sidebar-sticky {
    position: static;
  }
}

/* Hero meta chips — frosted pills. Previously solid orange-tint
   with plain border. Now they're actual glass elements with a
   bright rim and soft blur so the glass language reads in small
   elements too, not just the big sidebar surface. */
[data-glass="prototype"] .chip {
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 8px -2px rgba(232, 80, 10, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
[data-glass="prototype"] .chip:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 14px -2px rgba(232, 80, 10, 0.22);
}

/* Safari fallback: without backdrop-filter, bump the background
   opacity so the sidebar + guarantee stay readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-glass="prototype"] .sticky-sidebar {
    background: rgba(255, 255, 255, 0.92);
  }
  [data-glass="prototype"] .studio-guarantee {
    background: rgba(255, 255, 255, 0.78);
  }
  [data-glass="prototype"] .chip {
    background: rgba(255, 255, 255, 0.85);
  }
}