/*
  ============================================================
  SEED: 847263

  A — Layout:      digit 3 → Single-column editorial
                   Ultra-narrow 560px column; all content stacked;
                   full-bleed accents (images, dividers, CTA) break out of column.

  B — Color:       digit 6 → Lavender (#e8e0f0) base, deep violet primary,
                   sharp lime accent.

  C — Typography:  digit 2 → Display: Fraunces (optical serif)
                              Body: Outfit (geometric sans)

  D — Visual lang: digit 7 → Hard geometric cutouts —
                   sections use clip-path polygon borders.

  E — Navigation:  digit 4 → Hidden until hover —
                   nav appears on mouse move to top edge.

  F — Tone:        digit 8 → Luxury restrained —
                   evocative but sparse, never explains, implies.

  These choices were determined by the seed and must not be changed
  for reasons of "appropriateness" or "better fit for the content".
  Tension between content and form is intentional.
  ============================================================

  BRAND ARCHETYPE:    Luminary
  LAYOUT PARADIGM:    Single-column editorial, 560px column max,
                      full-bleed clip-path sections; reading pattern:
                      contemplative vertical descent.
  SECTION ORDER:      TopBar → GhostNav → Hero → Intro → 5×ContentBlock
                      → Connector → ProductReveal → Reviews → CTA → Footer
  DISPLAY FONT:       Fraunces — https://fonts.google.com/specimen/Fraunces
  BODY FONT:          Outfit — https://fonts.google.com/specimen/Outfit
  PRIMARY COLOR:      #3b0764 deep violet — a commitment to shadow and depth
  SHAPE LANGUAGE:     Sharp geometric — clip-path polygons, no border-radius
  SIGNATURE MOMENT:   Ghost nav that materialises on hover to the top edge;
                      full-bleed violet CTA section with 18vw display type;
                      images that break 40px outside the editorial column on
                      both sides via negative margin.
  TONE OF VOICE:      Restrained. Evocative. Certain.
  ============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,300;1,9..144,700&family=Outfit:wght@300;400;500;700&display=swap');

/* =====================================================
   COLOUR TOKENS
   ===================================================== */

:root {
  /* Core brand palette */
  --brand-primary:    #3b0764;   /* Deep violet — dominant, immersive */
  --brand-secondary:  #6b21a8;   /* Mid-violet — panels, raised surfaces */
  --brand-accent:     #b8ff00;   /* Sharp lime — CTAs, active, highlight */

  /* Surfaces */
  --surface-base:     #ede8f5;   /* Soft lavender — main page background */
  --surface-raised:   #f5f2fb;   /* Near-white lavender — cards, panels */
  --surface-inverse:  #3b0764;   /* Deep violet — brand-bg sections */
  --surface-mid:      #d4c9e8;   /* Muted lavender — subtle dividers & hovers */

  /* Text */
  --text-primary:     #1a0a2e;   /* Near-black violet — body text on light */
  --text-secondary:   #6b5c8a;   /* Muted violet — captions, meta, labels */
  --text-inverse:     #f5f2fb;   /* Pale lavender — text on dark backgrounds */
  --text-accent:      #b8ff00;   /* Lime — CTA text on violet backgrounds */

  /* Borders */
  --border-subtle:    #c9bfe0;
  --border-strong:    #3b0764;

  /* Accent tints */
  --lime-muted:       #d4ff66;   /* softer lime for hover states */
  --violet-glow:      rgba(59, 7, 100, 0.08);

  /* =====================================================
     TYPOGRAPHY TOKENS
     ===================================================== */

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Outfit', 'Helvetica Neue', sans-serif;

  /* Fluid type scale */
  --text-hero:    clamp(3.5rem, 10vw, 8.5rem);
  --text-h1:      clamp(2.25rem, 6vw, 4.5rem);
  --text-h2:      clamp(1.5rem, 3.5vw, 2.5rem);
  --text-h3:      clamp(1.125rem, 2vw, 1.5rem);
  --text-body:    clamp(1rem, 1.4vw, 1.125rem);
  --text-sm:      clamp(0.75rem, 0.9vw, 0.875rem);
  --text-xs:      0.6875rem;

  /* Font feature settings */
  --ff-display:   "liga" 1, "onum" 1, "kern" 1;
  --ff-body:      "kern" 1, "liga" 1;

  /* =====================================================
     SPACING TOKENS (8pt grid)
     ===================================================== */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-9:   6rem;      /* 96px */
  --space-10:  8rem;      /* 128px */

  /* =====================================================
     LAYOUT TOKENS
     ===================================================== */

  --col-editorial:   560px;  /* Single-column article max-width */
  --col-wide:        900px;  /* Full-bleed break-out max-width */
  --col-max:         1400px; /* Outer container for header/footer */

  --page-gutter:     clamp(1.25rem, 5vw, 2rem); /* Horizontal page inset */
  --breakout-x:      -3rem;  /* Negative margin for full-bleed images */

  /* =====================================================
     EFFECTS TOKENS
     ===================================================== */

  --radius-none:    0px;    /* Sharp — no radius on structural elements */
  --radius-sm:      2px;    /* Minimal radius only on inline elements */

  --shadow-sm:      0 1px 4px rgba(59, 7, 100, 0.12);
  --shadow-md:      0 4px 24px rgba(59, 7, 100, 0.18);
  --shadow-lg:      0 12px 60px rgba(59, 7, 100, 0.28);

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* =====================================================
     CLIP-PATH TOKENS (D=7 — hard geometric cutouts)
     ===================================================== */

  /* Diagonal bottom cut — section exits via angled polygon */
  --clip-exit-down:   polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%);
  --clip-exit-up:     polygon(0 4rem, 100% 0, 100% 100%, 0 100%);
  --clip-banner:      polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%);
  --clip-wedge-right: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 0 100%);
  --clip-wedge-left:  polygon(3rem 0, 100% 0, 100% 100%, 0 100%, 0 3rem);

  /* =====================================================
     Z-INDEX SCALE
     ===================================================== */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-overlay:   100;
  --z-nav:       200;
  --z-modal:     300;
}

/* =====================================================
   GLOBAL RESET & BASE
   ===================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-primary);
  background-color: var(--surface-base);
  font-feature-settings: var(--ff-body);
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-primary);
}

ul, ol {
  list-style: none;
}

/* =====================================================
   REDUCED MOTION — ACCESSIBILITY
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}