/* ================================================================
   GRACE M. STEELE — index.css
   Enhanced Homepage Stylesheet
   ─────────────────────────────────────────────────────────────────
   Structure:
     1.  Animatable CSS Custom Properties (@property)
     2.  Design Tokens (variables)
     3.  Reset & Base
     4.  Text Selection
     5.  Typography Scale
     6.  Buttons
     7.  Layout Utilities
     8.  Site Grain Overlay
     9.  Site Gem Band
    10.  Site Header & Navigation
    11.  Hero Section
    12.  Statement Section
    13.  Works Section
    14.  About Preview Section
    15.  Gem Mosaic
    16.  Connect Section
    17.  Site Footer
    18.  ── KEYFRAMES ──
    19.  Scroll-Driven Animations (@supports)
    20.  Responsive
   ================================================================ */


/* ================================================================
   1. ANIMATABLE CSS CUSTOM PROPERTIES
   ================================================================ */

@property --shimmer-pos {
  syntax: '<percentage>';
  initial-value: -80%;
  inherits: false;
}

@property --rule-w {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}


/* ================================================================
   2. DESIGN TOKENS
   ================================================================ */

:root {

  /* ── Gem palette ──────────────────────────────── */
  --color-wine:    #8A2C3B;
  --color-sienna:  #B5592F;
  --color-mustard: #C9960E;
  --color-jade:    #1D8A68;
  --color-navy:    #1C3A6E;
  --color-plum:    #7A3661;

  /* Lighter tints for glow/shimmer uses */
  --color-wine-light:    rgba(138, 44,  59, 0.35);
  --color-navy-light:    rgba(28,  58, 110, 0.30);
  --color-plum-light:    rgba(122, 54,  97, 0.20);
  --color-mustard-light: rgba(201,150,  14, 0.18);

  /* ── Neutrals ─────────────────────────────────── */
  --color-bg:         #0F0A0C;
  --color-surface:    #1A1216;
  --color-surface-2:  #231820;
  --color-border:     #2E2028;
  --color-white:      #FAF5EE;
  --color-white-dim:  rgba(250, 245, 238, 0.68);
  --color-muted:      #8E7E85;

  /* ── Typography ───────────────────────────────── */
  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-body:    'Crimson Pro', Georgia, serif;
  --font-ui:      'Jost', 'Helvetica Neue', sans-serif;

  /* ── Spacing ──────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;

  /* ── Layout ───────────────────────────────────── */
  --max-width:       1200px;
  --gem-band-h:      3px;
  --header-height:   72px;
  --header-offset:   calc(var(--header-height) + var(--gem-band-h));

  /* ── Easing ───────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Transitions ──────────────────────────────── */
  --t-fast:   0.18s var(--ease-in-out);
  --t-base:   0.30s var(--ease-in-out);
  --t-slow:   0.50s var(--ease-out-expo);

  /* ── Radius ───────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
}


/* ================================================================
   3. RESET & BASE
   ================================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.72;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a        { color: inherit; text-decoration: none; }
ul, ol   { list-style: none; }

/* Global focus ring */
:focus-visible {
  outline: 2px solid var(--color-mustard);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ================================================================
   4. TEXT SELECTION
   ================================================================ */

::selection {
  background-color: var(--color-wine);
  color: var(--color-white);
}
::-moz-selection {
  background-color: var(--color-wine);
  color: var(--color-white);
}


/* ================================================================
   5. TYPOGRAPHY SCALE
   ================================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

p { font-family: var(--font-body); line-height: 1.78; }
em, i { font-style: italic; }
cite  { font-style: normal; }


/* ================================================================
   6. BUTTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.78rem 2.1rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    background-color var(--t-fast),
    border-color     var(--t-fast),
    color            var(--t-fast),
    transform        var(--t-fast),
    box-shadow       var(--t-base);
}

/* Shimmer sweep on all buttons */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 0.55s var(--ease-out-expo);
}

.btn:hover::after { transform: translateX(100%); }
.btn:hover        { transform: translateY(-2px); }

/* Primary */
.btn--primary {
  background-color: var(--color-wine);
  border-color:     var(--color-wine);
  color:            var(--color-white);
}
.btn--primary:hover {
  background-color: #a0333f;
  border-color:     #a0333f;
  box-shadow: 0 8px 28px rgba(138, 44, 59, 0.55), 0 0 0 1px rgba(138,44,59,0.2);
}

/* Outline */
.btn--outline {
  background-color: transparent;
  border-color:     rgba(250, 245, 238, 0.38);
  color:            var(--color-white);
}
.btn--outline:hover {
  background-color: rgba(250, 245, 238, 0.06);
  border-color:     var(--color-white);
  box-shadow: 0 0 0 1px rgba(250,245,238,0.1);
}

/* Ghost */
.btn--ghost {
  background-color: transparent;
  border-color:     var(--color-border);
  color:            var(--color-white-dim);
}
.btn--ghost:hover {
  border-color:     var(--color-muted);
  color:            var(--color-white);
  background-color: rgba(250, 245, 238, 0.03);
}

.btn--with-icon { gap: 0.6rem; }
.btn__icon      { flex-shrink: 0; }


/* ================================================================
   7. LAYOUT UTILITIES
   ================================================================ */

.section        { padding: var(--space-xl) 0; }
.section__inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section__inner--split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-lg);
}

.section__inner--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 0.85rem;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.section__subtitle {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--color-white-dim);
  max-width: 48ch;
  line-height: 1.7;
}


/* ================================================================
   8. SITE GRAIN OVERLAY
   ================================================================ */

.site-grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.028;
  animation: grain-shift 0.12s steps(1) infinite;
}

@keyframes grain-shift {
  0%  { background-position: 0px   0px;   }
  10% { background-position: -50px -80px; }
  20% { background-position: 40px  -30px; }
  30% { background-position: -30px 60px;  }
  40% { background-position: 70px  40px;  }
  50% { background-position: -60px 20px;  }
  60% { background-position: 30px  -70px; }
  70% { background-position: -20px 80px;  }
  80% { background-position: 50px  -10px; }
  90% { background-position: -40px -50px; }
}


/* ================================================================
   9. SITE GEM BAND
   ================================================================ */

.site-gem-band {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gem-band-h);
  display: flex;
  flex-direction: row;
  z-index: 1000;
  overflow: hidden;
}

.site-gem-band__stripe {
  display: block;
  flex: 1 1 0;
  height: 100%;
  transition: flex var(--t-base);
}

/* Each stripe brightens in turn via staggered animation */
.site-gem-band__stripe--wine    { background-color: var(--color-wine);    animation: stripe-pulse 9s ease-in-out 0.0s infinite; }
.site-gem-band__stripe--sienna  { background-color: var(--color-sienna);  animation: stripe-pulse 9s ease-in-out 1.5s infinite; }
.site-gem-band__stripe--mustard { background-color: var(--color-mustard); animation: stripe-pulse 9s ease-in-out 3.0s infinite; }
.site-gem-band__stripe--jade    { background-color: var(--color-jade);    animation: stripe-pulse 9s ease-in-out 4.5s infinite; }
.site-gem-band__stripe--navy    { background-color: var(--color-navy);    animation: stripe-pulse 9s ease-in-out 6.0s infinite; }
.site-gem-band__stripe--plum    { background-color: var(--color-plum);    animation: stripe-pulse 9s ease-in-out 7.5s infinite; }

@keyframes stripe-pulse {
  0%, 60%, 100% { filter: brightness(1);   flex-grow: 1;   }
  30%            { filter: brightness(1.7); flex-grow: 1.4; }
}


/* ================================================================
   10. SITE HEADER & NAVIGATION
   ================================================================ */

.site-header {
  position: fixed;
  top: var(--gem-band-h);
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--header-height);
  /* Starts transparent — fills in on scroll via scroll-driven animation */
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-base),
    border-color     var(--t-base),
    backdrop-filter  var(--t-base);
}

/* ── Nav flex container ─────────────── */
.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  gap: var(--space-md);
}

/* ── Logo ───────────────────────────── */
.nav__logo      { flex-shrink: 0; }
.nav__logo-link {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.nav__logo-first {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--t-fast);
}

.nav__logo-last {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.02em;
  transition: color var(--t-fast);
}

.nav__logo-link:hover .nav__logo-first,
.nav__logo-link:hover .nav__logo-last {
  color: var(--color-wine);
}

/* ── Menu ───────────────────────────── */
.nav__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.nav__item { position: relative; }

.nav__link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-white-dim);
  padding: 0.3rem 0;
  position: relative;
  transition: color var(--t-fast);
}

/* Animated underline using ::after */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1.5px;
  background-color: var(--color-wine);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out-expo);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-white);
}

.nav__link:hover::after,
.nav__link--active::after {
  transform: scaleX(1);
}

/* Dropdown caret */
.nav__dropdown-caret {
  font-size: 0.55rem;
  line-height: 1;
  transition: transform var(--t-base) var(--ease-out-expo);
}
.nav__item--has-dropdown:hover .nav__dropdown-caret { transform: scaleY(-1); }

/* ── Dropdown panel ─────────────────── */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 165px;
  background-color: rgba(26, 18, 22, 0.96);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(250,245,238,0.04);
  transition:
    opacity    var(--t-base),
    visibility var(--t-base),
    transform  var(--t-base) var(--ease-out-expo);
}

/* Arrow pointer on dropdown */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background-color: rgba(26, 18, 22, 0.96);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: 0.58rem 1.3rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white-dim);
  transition: color var(--t-fast), padding-left var(--t-fast);
}

.nav__dropdown-link:hover {
  color: var(--color-white);
  padding-left: 1.6rem;
}

/* ── Social link ────────────────────── */
.nav__utility   { flex-shrink: 0; }
.nav__social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-muted);
  transition: color var(--t-fast);
}
.nav__social-link:hover { color: var(--color-white); }


/* ================================================================
   11. HERO SECTION
   ================================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: var(--header-offset);
  overflow: hidden;
  background-color: var(--color-bg);
}

/* ── Atmospheric blobs ──────────────── */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  will-change: transform, opacity;
}

.hero__blob--wine {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(138,44,59,0.55) 0%, transparent 70%);
  top: -180px;
  right: -100px;
  animation: blob-float-a 18s ease-in-out infinite;
}

.hero__blob--navy {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(28,58,110,0.45) 0%, transparent 70%);
  bottom: -140px;
  left: -80px;
  animation: blob-float-b 22s ease-in-out infinite;
}

.hero__blob--plum {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(122,54,97,0.35) 0%, transparent 70%);
  top: 40%;
  left: 25%;
  animation: blob-float-c 16s ease-in-out infinite;
}

.hero__blob--mustard {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(201,150,14,0.22) 0%, transparent 70%);
  bottom: 20%;
  right: 15%;
  animation: blob-float-d 14s ease-in-out 4s infinite;
}

/* ── Concentric ring ────────────────── */
.hero__ring {
  position: absolute;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  border: 1px solid rgba(250, 245, 238, 0.045);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring-slow-spin 60s linear infinite;
  pointer-events: none;
}

.hero__ring::before {
  content: '';
  position: absolute;
  inset: 55px;
  border-radius: 50%;
  border: 1px solid rgba(250, 245, 238, 0.03);
}

.hero__ring::after {
  content: '';
  position: absolute;
  inset: -70px;
  border-radius: 50%;
  border: 1px solid rgba(138, 44, 59, 0.08);
  animation: ring-slow-spin 90s linear reverse infinite;
}

/* ── Noise texture ──────────────────── */
.hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  pointer-events: none;
}

/* ── Hero content ───────────────────── */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md);
  max-width: 920px;
}

/* Staggered entrance — each child starts hidden, animates in */
.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-bottom: 1.6rem;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out-expo) 0.2s forwards;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 11rem);
  font-weight: 600;
  line-height: 0.93;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-sm);
}

.hero__title-name {
  display: block;
  color: var(--color-white);
  opacity: 0;
  animation: fade-up 1s var(--ease-out-expo) 0.55s forwards;
}

.hero__title-initials {
  display: block;
  opacity: 0;
  animation: fade-up 1s var(--ease-out-expo) 0.78s forwards;
}

/* Shimmer gradient on italic "M. Steele" */
.hero__title-initials em {
  font-style: italic;
  background: linear-gradient(
    90deg,
    var(--color-white-dim) 0%,
    var(--color-white-dim) 30%,
    var(--color-white) 44%,
    #eedbb8 50%,
    var(--color-white) 56%,
    var(--color-white-dim) 70%,
    var(--color-white-dim) 100%
  );
  background-size: 280% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    fade-up     1s   var(--ease-out-expo) 0.78s forwards,
    text-shimmer 6s  ease-in-out          2.5s  infinite;
}

/* ── Hero rule ──────────────────────── */
.hero__rule {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin: var(--space-md) auto;
  opacity: 0;
  animation: fade-in 0.8s var(--ease-out-expo) 1.1s forwards;
}

.hero__rule-line {
  display: block;
  height: 1.5px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--color-wine), transparent);
  border-radius: 99px;
  animation: rule-expand 0.9s var(--ease-out-expo) 1.2s forwards;
}

.hero__rule-gem {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-wine);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(138,44,59,0.8);
  animation: gem-dot-pulse 3s ease-in-out 2s infinite;
}

/* ── Tagline ────────────────────────── */
.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-white-dim);
  line-height: 1.65;
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out-expo) 1.4s forwards;
}

/* ── CTA group ──────────────────────── */
.hero__cta-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out-expo) 1.7s forwards;
}

/* ── Scroll indicator ───────────────── */
.hero__scroll {
  position: absolute;
  bottom: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
  opacity: 0;
  animation: fade-in 1s ease 2.4s forwards;
}

.hero__scroll-label {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hero__scroll-track {
  width: 1.5px;
  height: 50px;
  background-color: rgba(250, 245, 238, 0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.hero__scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, var(--color-wine), var(--color-plum));
  border-radius: 99px;
  animation: scroll-travel 2.2s var(--ease-in-out) infinite;
}

@keyframes scroll-travel {
  0%   { top: -40%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%;  opacity: 0; }
}


/* ================================================================
   12. STATEMENT SECTION
   ================================================================ */

.section--statement {
  background-color: var(--color-surface);
  border-top:    1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}

.section--statement .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

/* Gem dot row */
.statement__gem-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.statement__gem {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation: gem-wave-pulse 3.6s ease-in-out infinite;
}

/* Staggered wave across all six dots */
.statement__gem:nth-child(1) { background-color: var(--color-wine);    animation-delay: 0.0s; }
.statement__gem:nth-child(2) { background-color: var(--color-sienna);  animation-delay: 0.3s; }
.statement__gem:nth-child(3) { background-color: var(--color-mustard); animation-delay: 0.6s; }
.statement__gem:nth-child(4) { background-color: var(--color-jade);    animation-delay: 0.9s; }
.statement__gem:nth-child(5) { background-color: var(--color-navy);    animation-delay: 1.2s; }
.statement__gem:nth-child(6) { background-color: var(--color-plum);    animation-delay: 1.5s; }

@keyframes gem-wave-pulse {
  0%, 70%, 100% { transform: scale(1) translateY(0); opacity: 0.7; }
  35%            { transform: scale(1.6) translateY(-3px); opacity: 1; box-shadow: 0 0 12px currentColor; }
}

/* Quote */
.statement__quote     { max-width: 700px; }
.statement__quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.42;
  color: var(--color-white);
  margin-bottom: 1.2rem;
}

.statement__quote-cite {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}


/* ================================================================
   13. WORKS SECTION
   ================================================================ */

.section--works { background-color: var(--color-bg); }

/* Cards grid */
.works__grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-md);
  width: 100%;
}

/* ── Single card ─────────────────────── */
.works__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  position: relative;
  isolation: isolate;
  transition:
    transform    var(--t-base) var(--ease-out-expo),
    border-color var(--t-base),
    box-shadow   var(--t-base);
}

/* Gradient glow — fades in on hover */
.works__card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
  z-index: 0;
}

.works__card--fiction    .works__card-glow {
  background: radial-gradient(ellipse at 50% -10%, rgba(138,44,59,0.22) 0%, transparent 65%);
}
.works__card--nonfiction .works__card-glow {
  background: radial-gradient(ellipse at 50% -10%, rgba(28,58,110,0.28) 0%, transparent 65%);
}

.works__card:hover {
  transform: translateY(-6px);
  border-color: rgba(250, 245, 238, 0.1);
}
.works__card:hover .works__card-glow {
  opacity: 1;
}

.works__card--fiction:hover {
  box-shadow: 0 20px 60px rgba(138, 44, 59, 0.35), 0 0 0 1px rgba(138,44,59,0.18);
}
.works__card--nonfiction:hover {
  box-shadow: 0 20px 60px rgba(28, 58, 110, 0.4), 0 0 0 1px rgba(28,58,110,0.18);
}

/* Colour bar with shine sweep */
.works__card-color-bar {
  height: 5px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: height var(--t-base) var(--ease-out-expo);
}

.works__card--fiction    .works__card-color-bar { background-color: var(--color-wine); }
.works__card--nonfiction .works__card-color-bar { background-color: var(--color-navy); }

/* Shine sweep on bar */
.works__card-color-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: translateX(-150%);
  transition: transform 0.7s var(--ease-out-expo);
}

.works__card:hover .works__card-color-bar          { height: 8px; }
.works__card:hover .works__card-color-bar::after    { transform: translateX(150%); }

/* Card body */
.works__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md);
  gap: 0;
  position: relative;
  z-index: 1;
}

.works__card-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.works__card--fiction    .works__card-eyebrow { color: var(--color-wine);   }
.works__card--nonfiction .works__card-eyebrow { color: #3d6eb8;             }

.works__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.works__card-desc {
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--color-white-dim);
  line-height: 1.76;
  margin-bottom: var(--space-md);
  flex: 1;
}

/* CTA link with animated arrow */
.works__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white-dim);
  align-self: flex-start;
  position: relative;
  padding-bottom: 2px;
}

.works__card-cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out-expo);
}

.works__card--fiction    .works__card-cta::after { background-color: var(--color-wine); }
.works__card--nonfiction .works__card-cta::after { background-color: var(--color-navy); }

.works__card:hover .works__card-cta {
  color: var(--color-white);
}
.works__card:hover .works__card-cta::after {
  transform: scaleX(1);
}

.works__card-arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-spring);
}
.works__card:hover .works__card-arrow { transform: translateX(5px); }

.works__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}


/* ================================================================
   14. ABOUT PREVIEW SECTION
   ================================================================ */

.section--about-preview {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.about-preview__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  flex: 1 1 0;
}

.about-preview__text .section__eyebrow,
.about-preview__text .section__title { margin-bottom: 0; }

.about-preview__body {
  font-family: var(--font-body);
  font-size: 1.12rem;
  color: var(--color-white-dim);
  line-height: 1.82;
  max-width: 52ch;
}

/* Visual column */
.about-preview__visual {
  flex: 0 0 370px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ================================================================
   15. GEM MOSAIC
   ================================================================ */

.gem-mosaic {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gem-mosaic__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

/* Base gem tile */
.gem {
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition:
    transform  var(--t-slow) var(--ease-spring),
    box-shadow var(--t-base);
  will-change: transform;
}

/* Inner shine overlay */
.gem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.22) 0%,
    transparent 55%
  );
  border-radius: inherit;
  pointer-events: none;
}

.gem--large { width: 120px; height: 120px; }
.gem--small { width:  72px; height:  72px; }

/* Gem colours */
.gem--wine    { background: radial-gradient(circle at 35% 30%, #c03a4e, var(--color-wine));    box-shadow: 0 6px 28px rgba(138,44,59,0.55),  inset 0 1px 0 rgba(255,255,255,0.12); }
.gem--sienna  { background: radial-gradient(circle at 35% 30%, #d87545, var(--color-sienna));  box-shadow: 0 6px 28px rgba(181,89,47,0.50),  inset 0 1px 0 rgba(255,255,255,0.12); }
.gem--mustard { background: radial-gradient(circle at 35% 30%, #e8b520, var(--color-mustard)); box-shadow: 0 6px 28px rgba(201,150,14,0.55), inset 0 1px 0 rgba(255,255,255,0.15); }
.gem--jade    { background: radial-gradient(circle at 35% 30%, #28a87e, var(--color-jade));    box-shadow: 0 6px 28px rgba(29,138,104,0.50), inset 0 1px 0 rgba(255,255,255,0.12); }
.gem--navy    { background: radial-gradient(circle at 35% 30%, #254f96, var(--color-navy));    box-shadow: 0 6px 28px rgba(28,58,110,0.55),  inset 0 1px 0 rgba(255,255,255,0.1);  }
.gem--plum    { background: radial-gradient(circle at 35% 30%, #a04880, var(--color-plum));    box-shadow: 0 6px 28px rgba(122,54,97,0.55),  inset 0 1px 0 rgba(255,255,255,0.12); }

/* Each gem floats independently — varied duration + delay */
.gem-mosaic__row:nth-child(1) .gem:nth-child(1) { animation: gem-float-a 5.0s ease-in-out 0.0s infinite; }
.gem-mosaic__row:nth-child(1) .gem:nth-child(2) { animation: gem-float-b 4.3s ease-in-out 0.9s infinite; }
.gem-mosaic__row:nth-child(2) .gem:nth-child(1) { animation: gem-float-a 5.6s ease-in-out 1.6s infinite; }
.gem-mosaic__row:nth-child(2) .gem:nth-child(2) { animation: gem-float-b 4.8s ease-in-out 0.4s infinite; }
.gem-mosaic__row:nth-child(3) .gem:nth-child(1) { animation: gem-float-a 4.5s ease-in-out 1.2s infinite; }
.gem-mosaic__row:nth-child(3) .gem:nth-child(2) { animation: gem-float-b 5.3s ease-in-out 2.1s infinite; }

.gem:hover {
  transform: scale(1.1) translateY(-4px) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45) !important;
  animation-play-state: paused !important;
}


/* ================================================================
   16. CONNECT SECTION
   ================================================================ */

.section--connect {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.section--connect .section__inner { gap: var(--space-sm); position: relative; z-index: 1; }

/* Two background glows that breathe back and forth */
.connect__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}

.connect__glow--a {
  width: 500px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(138,44,59,0.22) 0%, transparent 70%);
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  animation: glow-breathe-a 9s ease-in-out infinite;
}

.connect__glow--b {
  width: 400px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(122,54,97,0.2) 0%, transparent 70%);
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  animation: glow-breathe-b 9s ease-in-out infinite;
}

@keyframes glow-breathe-a {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1);    }
  50%       { opacity: 1;   transform: translateY(-55%) scale(1.15); }
}
@keyframes glow-breathe-b {
  0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1);    }
  50%       { opacity: 0.4; transform: translateY(-45%) scale(0.9);  }
}

.connect__body {
  font-family: var(--font-body);
  font-size: 1.12rem;
  color: var(--color-white-dim);
  max-width: 44ch;
  text-align: center;
  margin-bottom: var(--space-md);
}


/* ================================================================
   17. SITE FOOTER
   ================================================================ */

.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

/* Gem band at footer top — mirrors header band, reversed order */
.footer__gem-band {
  display: flex;
  flex-direction: row;
  height: 2px;
  overflow: hidden;
}

.footer__gem-stripe {
  display: block;
  flex: 1 1 0;
  height: 100%;
}
.footer__gem-stripe--wine    { background-color: var(--color-wine);    }
.footer__gem-stripe--sienna  { background-color: var(--color-sienna);  }
.footer__gem-stripe--mustard { background-color: var(--color-mustard); }
.footer__gem-stripe--jade    { background-color: var(--color-jade);    }
.footer__gem-stripe--navy    { background-color: var(--color-navy);    }
.footer__gem-stripe--plum    { background-color: var(--color-plum);    }

/* Inner flex row */
.footer__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.footer__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--color-white);
}
.footer__descriptor {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer__nav-link {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--t-fast), letter-spacing var(--t-base);
}
.footer__nav-link:hover {
  color: var(--color-white);
  letter-spacing: 0.16em;
}

.footer__social-link {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--t-fast);
}
.footer__social-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-wine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out-expo);
}
.footer__social-link:hover {
  color: var(--color-white);
}
.footer__social-link:hover::after { transform: scaleX(1); }

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}
.footer__copyright {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}


/* ================================================================
   18. KEYFRAMES
   ================================================================ */

/* ── Page-load entrance ─────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Rule expand */
@keyframes rule-expand {
  from { width: 0;    }
  to   { width: 55px; }
}

/* ── Hero elements ──────────────────── */
@keyframes text-shimmer {
  0%   { background-position: 180% center;  }
  100% { background-position: -80% center;  }
}

@keyframes gem-dot-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(138,44,59,0.7); }
  50%       { box-shadow: 0 0 18px rgba(138,44,59,1);  }
}

@keyframes ring-slow-spin {
  from { transform: translate(-50%, -50%) rotate(0deg);   }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Hero blob floats ───────────────── */
@keyframes blob-float-a {
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  25%       { transform: translate(40px, -30px) scale(1.06); }
  50%       { transform: translate(20px, 20px)  scale(0.96); }
  75%       { transform: translate(-25px, 10px) scale(1.03); }
}

@keyframes blob-float-b {
  0%, 100% { transform: translate(0px, 0px)   scale(1);    }
  30%       { transform: translate(-35px, 25px) scale(1.08); }
  65%       { transform: translate(30px, -15px) scale(0.94); }
}

@keyframes blob-float-c {
  0%, 100% { transform: translate(0px, 0px)  scale(1);    opacity: 0.35; }
  40%       { transform: translate(20px, -20px) scale(1.1); opacity: 0.5;  }
  70%       { transform: translate(-10px, 15px) scale(0.9); opacity: 0.25; }
}

@keyframes blob-float-d {
  0%, 100% { transform: translate(0px, 0px)   scale(1);    }
  50%       { transform: translate(-20px, -25px) scale(1.12); }
}

/* ── Gem mosaic floats ──────────────── */
@keyframes gem-float-a {
  0%, 100% { transform: translateY(0px)    rotate(0deg);    }
  35%       { transform: translateY(-10px) rotate(1.2deg);  }
  70%       { transform: translateY(-5px)  rotate(-0.6deg); }
}

@keyframes gem-float-b {
  0%, 100% { transform: translateY(0px)   rotate(0deg);    }
  40%       { transform: translateY(-8px) rotate(-1.5deg); }
  75%       { transform: translateY(-4px) rotate(0.8deg);  }
}

/* ── Gem band ───────────────────────── */
@keyframes stripe-pulse {
  0%, 60%, 100% { filter: brightness(1);   flex-grow: 1;   }
  30%            { filter: brightness(1.7); flex-grow: 1.4; }
}

/* ── Grain shift ────────────────────── */
@keyframes grain-shift {
  0%  { background-position: 0px    0px;   }
  10% { background-position: -50px -80px;  }
  20% { background-position: 40px  -30px;  }
  30% { background-position: -30px  60px;  }
  40% { background-position: 70px   40px;  }
  50% { background-position: -60px  20px;  }
  60% { background-position: 30px  -70px;  }
  70% { background-position: -20px  80px;  }
  80% { background-position: 50px  -10px;  }
  90% { background-position: -40px -50px;  }
}


/* ================================================================
   19. SCROLL-DRIVEN ANIMATIONS
       @supports guard ensures clean fallback in Safari / older FF
   ================================================================ */

@supports (animation-timeline: scroll()) {

  /* ── Header fills on scroll ──── */
  .site-header {
    animation: header-fill linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 130px;
  }

  @keyframes header-fill {
    from {
      background-color: transparent;
      border-bottom-color: transparent;
      backdrop-filter: blur(0px);
    }
    to {
      background-color: rgba(15, 10, 12, 0.90);
      border-bottom-color: var(--color-border);
      backdrop-filter: blur(18px);
    }
  }

  /* ── Statement section reveal ─── */
  .statement__quote {
    animation: reveal-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  .statement__gem-row {
    animation: reveal-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /* ── Works cards staggered ────── */
  .works__card--fiction {
    animation: reveal-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }

  .works__card--nonfiction {
    animation: reveal-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 50%;
  }

  /* ── About preview reveal ─────── */
  .about-preview__text {
    animation: reveal-slide-right linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  .about-preview__visual {
    animation: reveal-slide-left linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 50%;
  }

  /* ── Connect heading ──────────── */
  .section--connect .section__title,
  .section--connect .connect__body,
  .section--connect .section__eyebrow {
    animation: reveal-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /* ── Hero parallax blobs ────────
     Blobs move at a slower rate than the viewport scroll,
     creating a parallax depth effect as user scrolls past hero */
  .hero__blob--wine {
    animation:
      blob-float-a 18s ease-in-out infinite,
      hero-blob-parallax linear both;
    animation-timeline: auto, scroll(root);
    animation-range: auto, 0% 60%;
  }

  .hero__blob--navy {
    animation:
      blob-float-b 22s ease-in-out infinite,
      hero-blob-parallax-r linear both;
    animation-timeline: auto, scroll(root);
    animation-range: auto, 0% 60%;
  }

  @keyframes hero-blob-parallax {
    from { transform: translate(0px, 0px);    }
    to   { transform: translate(0px, -100px); }
  }
  @keyframes hero-blob-parallax-r {
    from { transform: translate(0px, 0px);   }
    to   { transform: translate(0px, -70px); }
  }

  /* Shared reveal keyframes */
  @keyframes reveal-fade-up {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  @keyframes reveal-slide-right {
    from { opacity: 0; transform: translateX(-36px); }
    to   { opacity: 1; transform: translateX(0);     }
  }

  @keyframes reveal-slide-left {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0);    }
  }
}


/* ================================================================
   20. RESPONSIVE
   ================================================================ */

/* ── Tablet ≤ 900px ──────────────────── */
@media (max-width: 900px) {

  .nav__social-label { display: none; }

  /* Works: stack vertically */
  .works__grid { flex-direction: column; }

  /* About preview: stack vertically */
  .section__inner--split {
    flex-direction: column;
    gap: var(--space-md);
  }
  .about-preview__visual {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }
  .about-preview__text {
    align-items: center;
    text-align: center;
  }
  .about-preview__body { text-align: center; max-width: 60ch; }

  /* Footer: stack */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
  }
  .footer__nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
  }
}

/* ── Mobile ≤ 600px ─────────────────── */
@media (max-width: 600px) {

  :root {
    --space-xl: 4rem;
    --space-lg: 2.5rem;
  }

  .nav { padding: 0 var(--space-sm); gap: var(--space-sm); }

  .hero__cta-group {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .hero__cta-group .btn {
    width: 100%;
    justify-content: center;
    max-width: 300px;
  }

  .gem--large { width: 88px;  height: 88px; }
  .gem--small { width: 52px;  height: 52px; }

  .section__inner { padding: 0 var(--space-sm); }

  .statement__quote-text { font-size: 1.3rem; }

  .nav__menu { gap: var(--space-sm); }
}