/* =============================================================
   ELLE ABBOTT - AUTHOR SITE
   Global Stylesheet
   Architecture: Design tokens -> Reset -> Base -> Layout -> Components -> Utilities -> Responsive
   ============================================================= */

/* === 1. DESIGN TOKENS ========================================= */
:root {
  /* -- Color Palette -- */
  --color-bg:              #161310;
  --color-bg-alt:          #1c1712;
  --color-surface:         #211b15;
  --color-surface-raised:  #2a221a;
  --color-border:          #352a1f;
  --color-border-warm:     #4a3528;

  --color-gold:            #c6a15a;
  --color-gold-light:      #e0c083;
  --color-gold-dim:        #8f7038;
  --color-copper:          #5d2432;

  --color-text-primary:    #f5f1e8;
  --color-text-secondary:  #c3b79e;
  --color-text-muted:      #6f6450;
  --color-text-gold:       #e0c083;

  --color-link:            var(--color-gold-light);
  --color-link-hover:      #f0daa6;

  /* -- Typography -- */
  --font-display:  'Cinzel', 'Playfair Display', Georgia, serif;
  --font-script:   'Lora', Georgia, serif;
  --font-body:     'Lora', Georgia, serif;
  --font-ui:       'Jost', system-ui, sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1.0625rem;
  --text-lg:    1.1875rem;
  --text-xl:    1.375rem;
  --text-2xl:   clamp(1.5rem,   2.5vw, 1.875rem);
  --text-3xl:   clamp(1.875rem, 3.5vw, 2.5rem);
  --text-4xl:   clamp(2.25rem,  5vw,   3.5rem);
  --text-5xl:   clamp(3rem,     7vw,   5rem);
  --text-hero:  clamp(3.5rem,   9vw,   7rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-base:   1.65;
  --leading-loose:  1.85;

  --tracking-tight:   -0.02em;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.16em;
  --tracking-widest:   0.28em;

  /* -- 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;

  --section-pad: clamp(4rem, 10vw, 8rem);

  /* -- Layout -- */
  --max-width:      1240px;
  --content-width:  720px;
  --gutter:         clamp(1.5rem, 5vw, 3rem);

  /* -- Effects -- */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;

  --transition-fast:  120ms ease;
  --transition-base:  240ms ease;
  --transition-slow:  400ms ease;

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 24px rgba(198,161,90,0.18);

  --gradient-gold: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  --gradient-hero: radial-gradient(ellipse at 60% 40%, rgba(198,161,90,0.10) 0%, transparent 65%),
                   radial-gradient(ellipse at 20% 80%, rgba(93,36,50,0.16) 0%, transparent 55%),
                   linear-gradient(180deg, #161310 0%, #1b1611 100%);
}


/* === 2. RESET ================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}


/* === 3. BASE TYPOGRAPHY ======================================= */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
}

.display-script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-gold-light);
}

p {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-base);
  color: var(--color-text-primary);
}

.ornament {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) auto;
  max-width: 320px;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gradient-gold);
}
.ornament-diamond {
  width: 54px;
  height: 16px;
  background: none;
  transform: none;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2754%27%20height%3D%2716%27%20viewBox%3D%270%200%2054%2016%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23c6a15a%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%208%20C%2012%202.5%2C%2018%202.5%2C%2023%208%27%2F%3E%3Cpath%20d%3D%27M51%208%20C%2042%202.5%2C%2036%202.5%2C%2031%208%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M27%203.2%20L30.6%208%20L27%2012.8%20L23.4%208%20Z%27%20fill%3D%27%23c6a15a%27%2F%3E%3Ccircle%20cx%3D%2727%27%20cy%3D%278%27%20r%3D%271.1%27%20fill%3D%27%2317130f%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 6px rgba(198,161,90,0.3));
}


/* === 4. LAYOUT ================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section-pad); }

.section-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-6);
}


/* === 5. COMPONENTS ============================================ */

/* -- NAV -- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-5) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(14,12,9,0.95) 0%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--transition-slow);
}
.site-nav.scrolled {
  background: rgba(14,12,9,0.97);
  border-bottom: 1px solid var(--color-border);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-primary);
  text-transform: uppercase;
}
.nav-logo span { color: var(--color-gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.nav-links a:hover { color: var(--color-gold-light); }

.nav-cta {
  color: var(--color-gold) !important;
  border: 1px solid var(--color-gold-dim);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast) !important;
}
.nav-cta:hover {
  background: rgba(198,161,90,0.12);
  border-color: var(--color-gold);
  color: var(--color-gold-light) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-text-secondary);
  transition: all var(--transition-base);
}


/* -- HERO -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px;
}


.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  opacity: 0.15;
  filter: saturate(0.8) blur(8px);
  background-repeat: no-repeat;
}


.hero-portrait {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45%;
  height: 50%;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 70%, transparent 100%), linear-gradient(to right, transparent 0%, black 20%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 70%, transparent 100%), linear-gradient(to right, transparent 0%, black 20%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0.85;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(14,12,9,0.95) 0%,
    rgba(14,12,9,0.80) 45%,
    rgba(14,12,9,0.35) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 52%;
}

.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-gold);
}

.hero-name {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: 0.95;
  margin-bottom: var(--space-6);
}

.hero-tagline {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold-light);
  margin-bottom: var(--space-8);
  letter-spacing: 0.02em;
}

.hero-desc {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-base);
  margin-bottom: var(--space-10);
  max-width: 520px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}


/* -- BUTTONS -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-gold);
  color: #161310;
  border: 1px solid var(--color-gold);
}
.btn-primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: #161310;
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-warm);
}
.btn-outline:hover {
  border-color: var(--color-gold-dim);
  color: var(--color-gold-light);
  transform: translateY(-1px);
}


/* -- ABOUT -- */
.about {
  background: var(--color-bg-alt);
  position: relative;
}
.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-gold);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.about-image-wrap { position: relative; }

.about-image-frame {
  aspect-ratio: 2/3;
  background: var(--color-surface);
  border: 1px solid var(--color-border-warm);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1a1508 0%, #0e1015 100%);
}

.about-image-placeholder {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.about-image-placeholder .placeholder-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.about-image-wrap::before,
.about-image-wrap::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--color-gold-dim);
  border-style: solid;
  z-index: 2;
}
.about-image-wrap::before {
  top: -8px;
  left: -8px;
  border-width: 1px 0 0 1px;
}
.about-image-wrap::after {
  bottom: -8px;
  right: -8px;
  border-width: 0 1px 1px 0;
}

.about-text h2 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-6);
}
.about-text .display-script {
  font-size: var(--text-3xl);
  display: block;
  margin-bottom: var(--space-8);
}
.about-text p + p { margin-top: var(--space-5); }

.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold-dim);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(198,161,90,0.06);
}


/* -- WORKS -- */
.works { background: var(--color-bg); }

.works-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.book-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}
.book-card:hover {
  border-color: var(--color-gold-dim);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.book-card-cover {
  aspect-ratio: 2/3;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}
.cover-bg-1 { background: linear-gradient(145deg, #1a1020 0%, #2a1a0e 100%); }
.cover-bg-2 { background: linear-gradient(145deg, #0e1a1a 0%, #1a1508 100%); }
.cover-bg-3 { background: linear-gradient(145deg, #1a0e15 0%, #0e1520 100%); }
.cover-bg-4 { background: linear-gradient(145deg, #12100a 0%, #1e150a 100%); }
.cover-bg-5 { background: linear-gradient(145deg, #0e1018 0%, #1a1018 100%); }
.cover-bg-6 { background: linear-gradient(145deg, #0a100e 0%, #141a0e 100%); }

.cover-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}
.cover-sub {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-gold-light);
  margin-top: var(--space-3);
}
.cover-rule {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--gradient-gold);
}

.book-card-body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.book-genre {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.book-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.book-card-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--color-text-secondary);
  flex: 1;
  margin-bottom: var(--space-5);
}
.book-card-link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.book-card-link:hover {
  color: var(--color-gold-light);
  gap: var(--space-3);
}
.book-card-link::after { content: '\2192'; }


/* -- PODCAST -- */
.podcast {
  background: var(--color-bg-alt);
  position: relative;
}
.podcast::before,
.podcast::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--gradient-gold);
}
.podcast::before { top: 0; }
.podcast::after  { bottom: 0; }

.podcast-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.podcast-art-frame {
  aspect-ratio: 1;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1508 0%, #161310 50%, #1a1015 100%);
  overflow: hidden;
}
.podcast-art-inner {
  text-align: center;
  padding: var(--space-8);
}
.podcast-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}
.podcast-art-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
}
.podcast-art-sub {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-gold-light);
  margin-top: var(--space-2);
  font-size: var(--text-lg);
}

.podcast-text h2 { font-size: var(--text-4xl); margin-bottom: var(--space-3); }
.podcast-text .display-script { font-size: var(--text-2xl); display: block; margin-bottom: var(--space-6); }
.podcast-text p { margin-bottom: var(--space-6); }

.podcast-platforms {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.platform-badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.platform-badge:hover {
  color: var(--color-gold-light);
  border-color: var(--color-gold-dim);
  background: rgba(198,161,90,0.06);
}


/* -- NEWSLETTER -- */
.newsletter {
  background: var(--color-bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(198,161,90,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.newsletter-inner {
  position: relative;
  max-width: 600px;
  margin-inline: auto;
}
.newsletter h2 { font-size: var(--text-4xl); margin-bottom: var(--space-3); }
.newsletter .display-script { font-size: var(--text-3xl); display: block; margin-bottom: var(--space-6); }
.newsletter p { margin-bottom: var(--space-10); }

.newsletter-form {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
}
.newsletter-input {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}
.newsletter-input::placeholder {
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  text-transform: uppercase;
}
.newsletter-input:focus { border-color: var(--color-gold-dim); }
.newsletter-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  letter-spacing: var(--tracking-wide);
}


/* -- FOOTER -- */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-12);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.footer-logo {
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.footer-logo span { color: var(--color-gold); }

.footer-links { display: flex; gap: var(--space-6); }
.footer-links a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--color-gold-light); }

.footer-copy {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}


/* === 6. UTILITIES ============================================= */
.text-center { text-align: center; }
.text-gold    { color: var(--color-gold-light); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* === 7. RESPONSIVE ============================================ */
@media (max-width: 1024px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-10); }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14,12,9,0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: var(--text-xl); letter-spacing: var(--tracking-widest); }
  .nav-toggle { display: flex; z-index: 101; }

  .about-grid,
  .podcast-inner { grid-template-columns: 1fr; gap: var(--space-10); }

  .about-image-wrap { max-width: 320px; margin-inline: auto; }

  .works-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }

  .newsletter-form { flex-direction: column; }

  .footer-inner { flex-direction: column; text-align: center; }

  .hero-content { text-align: center; }
  .hero-eyebrow { justify-content: center; }
  .hero-eyebrow::before { display: none; }
  .hero-desc { margin-inline: auto; }
  .hero-actions { justify-content: center; }
}

@media (max-width: 480px) {
  .works-grid { max-width: 100%; }
}


/* === 8. ARCHIVE ATMOSPHERE ==================================== */
/* Turns the flat dark canvas into a candlelit, aged-vellum archive room. */

/* Warm "wood-panelled room" wash behind everything transparent */
body {
  background-image:
    radial-gradient(ellipse 130% 90% at 50% -15%, rgba(198,161,90,0.06), transparent 55%),
    radial-gradient(ellipse 120% 75% at 50% 118%, rgba(74,53,40,0.30), transparent 72%);
  background-attachment: fixed;
}

/* Bookplate hairline frame around the whole page (like an archival page edge) */
html::before {
  content: "";
  position: fixed;
  inset: 15px;
  border: 1px solid rgba(198,161,90,0.15);
  pointer-events: none;
  z-index: 9996;
}

/* Candlelight vignette: darkens the edges of the viewport, lamplit-room feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(ellipse 92% 78% at 50% 36%, transparent 58%, rgba(8,6,4,0.58) 100%);
}

/* Aged paper / film grain over the whole surface */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Illuminated drop cap - opens a passage like an old manuscript */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  margin: 0.06em 0.1em 0 0;
  color: var(--color-gold);
  font-weight: 500;
  text-shadow: 0 0 14px rgba(198,161,90,0.3);
}

/* Section labels prefixed with a small archival key-tick */
.section-label { position: relative; }

/* Reduce the frame inset on small screens */
@media (max-width: 640px) {
  html::before { inset: 9px; }
}


/* === 9. FIXED ARCHIVE BACKDROP =============================== */
/* One image, fixed to the viewport, stays put while content scrolls over it.
   Element lives as <div class="archive-bg"> right after <body>. */
.archive-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18,15,11,0.55) 0%, rgba(13,10,8,0.72) 100%),
    url("../images/archive-bg.jpg") center center / cover no-repeat;
}

/* Section bands go translucent so the archive reads behind them while scrolling.
   Cards / story-entries stay opaque for text contrast. */
.about       { background: rgba(20,16,12,0.82); }
.works       { background: rgba(15,12,9,0.60); }
.world       { background: rgba(15,12,9,0.62); }
.podcast     { background: rgba(20,16,12,0.82); }
.newsletter  { background: rgba(15,12,9,0.60); }
.site-footer { background: rgba(11,9,6,0.88); }

/* Let the backdrop breathe behind the hero (no solid fill there) */
.hero { background: transparent; }