/* ================================================================
   GRACE M. STEELE
   index.css - Homepage Stylesheet
   TIMBUKTU LLC, 2026
   ================================================================

   Contents
   --------
   01. Design Tokens
   02. Reset
   03. Text Selection
   04. Typography
   05. Buttons
   06. Layout Utilities
   07. Grain Overlay
   08. Gem Band
   09. Site Header and Nav
   10. Hero
   11. Animation System
   12. Section Shared
   13. Statement
   14. Works Cards
   15. About Preview
   16. Connect
   17. Footer
   18. Keyframes
   19. Scroll-Driven (header only)
   20. Responsive

   ================================================================ */


/* 01. Design Tokens
   ================================================================ */

:root {
  --color-wine:    #8A2C3B;
  --color-sienna:  #B5592F;
  --color-mustard: #C9960E;
  --color-jade:    #1D8A68;
  --color-navy:    #1C3A6E;
  --color-plum:    #7A3661;

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

  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-body:    'Crimson Pro', Georgia, serif;
  --font-ui:      'Jost', 'Helvetica Neue', sans-serif;
  --font-mono:    'Courier Prime', 'Courier New', monospace;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

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

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t:           0.25s cubic-bezier(0.4, 0, 0.2, 1);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
}


/* 02. Reset
   ================================================================ */

*, *::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; }

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


/* 03. Text Selection
   ================================================================ */

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


/* 04. Typography
   ================================================================ */

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   { font-style: italic; }
cite { font-style: normal; }


/* 05. 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),
    border-color     var(--t),
    color            var(--t),
    transform        var(--t);
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%);
  transform: translateX(-150%);
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}

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

.btn--primary {
  background-color: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-white);
}
.btn--primary:hover {
  background-color: #9e3344;
  border-color: #9e3344;
}

.btn--outline {
  background-color: transparent;
  border-color: rgba(250, 245, 238, 0.36);
  color: var(--color-white);
}
.btn--outline:hover {
  background-color: rgba(250, 245, 238, 0.06);
  border-color: var(--color-white);
}

.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.04);
}

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


/* 06. Layout Utilities
   ================================================================ */

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Top padding clears the fixed header; bottom reserves space for next-section btn */
  padding: calc(var(--header-offset) + var(--space-lg)) 0 5.5rem;
}

.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;
  position: relative;
}

/* Ink-stroke underline drawn by .is-in class (via JS) */
.section__eyebrow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-wine), var(--color-mustard));
  border-radius: 1px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}

.section__eyebrow.is-in::after {
  transform: translateX(-50%) scaleX(1);
}

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

/* Small ink-stroke decoration under section titles */
.section__title::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-wine), transparent);
  border-radius: 1px;
  transition: width 0.9s var(--ease-out);
}

/* Centered titles need the line centered too */
.section__header .section__title::after {
  left: 50%;
  transform: translateX(-50%);
}

.section__title.is-in::after {
  width: 3.5rem;
}

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

/* Decorative watermark chapter numeral */
.section__chapter {
  position: absolute;
  top: calc(var(--header-offset) + 1rem);
  right: var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 9rem);
  font-style: italic;
  font-weight: 600;
  color: var(--color-wine);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}

/* Next-section navigation button */
.section__next-btn {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  transition: color var(--t);
  z-index: 5;
}

.section__next-btn:hover {
  color: var(--color-white);
}

.section__next-btn:hover .section__next-icon {
  transform: translateY(4px);
}

.section__next-label {
  display: block;
}

.section__next-icon {
  display: block;
  transition: transform 0.3s var(--ease-out);
  animation: next-bounce 2.4s ease-in-out infinite;
}

@keyframes next-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}


/* 07. 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)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.025;
  animation: grain-shift 0.2s steps(1) infinite;
}

@keyframes grain-shift {
  0%   { background-position:   0px   0px; }
  12%  { background-position: -48px -76px; }
  25%  { background-position:  38px -28px; }
  37%  { background-position: -26px  58px; }
  50%  { background-position:  64px  38px; }
  62%  { background-position: -54px  18px; }
  75%  { background-position:  28px -66px; }
  87%  { background-position: -18px  78px; }
}


/* 08. 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;
}

.site-gem-band__stripe {
  display: block;
  flex: 1 1 0;
  height: 100%;
  animation: stripe-pulse 6s ease-in-out infinite;
}

.site-gem-band__stripe--wine    { background-color: var(--color-wine);    animation-delay: 0.0s; }
.site-gem-band__stripe--sienna  { background-color: var(--color-sienna);  animation-delay: 1.0s; }
.site-gem-band__stripe--mustard { background-color: var(--color-mustard); animation-delay: 2.0s; }
.site-gem-band__stripe--jade    { background-color: var(--color-jade);    animation-delay: 3.0s; }
.site-gem-band__stripe--navy    { background-color: var(--color-navy);    animation-delay: 4.0s; }
.site-gem-band__stripe--plum    { background-color: var(--color-plum);    animation-delay: 5.0s; }

@keyframes stripe-pulse {
  0%, 50%, 100% { opacity: 0.75; }
  25%            { opacity: 1;    }
}


/* 09. Site Header and Nav
   ================================================================ */

.site-header {
  position: fixed;
  top: var(--gem-band-h);
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--header-height);
  background-color: rgba(15, 10, 12, 0.60);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color 0.4s var(--ease-in-out), border-color 0.4s var(--ease-in-out);
  animation: header-hue-drift 20s ease-in-out infinite;
}

/* Sweeping gem-color line at bottom of header, always faintly visible */
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--color-wine)    0%,
    var(--color-sienna)  18%,
    var(--color-mustard) 36%,
    var(--color-jade)    54%,
    var(--color-navy)    72%,
    var(--color-plum)    90%,
    var(--color-wine)    100%
  );
  background-size: 200% 100%;
  opacity: 0.35;
  animation: header-line-slide 8s linear infinite;
  transition: opacity 0.6s var(--ease-out);
}

@keyframes header-line-slide {
  from { background-position: 0%   center; }
  to   { background-position: 200% center; }
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  gap: var(--space-md);
}

.nav__logo { flex-shrink: 0; }

.nav__logo-link {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  transition: opacity var(--t);
}
.nav__logo-link:hover { opacity: 0.75; }

.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);
}
.nav__logo-last {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-white);
}

.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);
}

.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;
  transition: transform 0.28s var(--ease-out);
}

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

.nav__dropdown-caret {
  font-size: 0.55rem;
  transition: transform 0.22s var(--ease-in-out);
}
.nav__item--has-dropdown:hover .nav__dropdown-caret { transform: scaleY(-1); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 165px;
  background-color: rgba(26, 18, 22, 0.97);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  transition: opacity 0.22s var(--ease-in-out), visibility 0.22s, transform 0.22s var(--ease-out);
}

.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.97);
  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;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white-dim);
  transition: color var(--t), background-color var(--t);
}
.nav__dropdown-link:hover {
  color: var(--color-white);
  background-color: rgba(250, 245, 238, 0.05);
}

.nav__utility { justify-self: end; }

.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);
}
.nav__social-link:hover { color: var(--color-white); }


/* 10. Hero
   ================================================================ */

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

/* Static radial gradient mesh background */
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 60% at 85% 10%, rgba(138,44,59,0.40)  0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 10% 85%, rgba(28,58,110,0.35)  0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 40% 55%, rgba(122,54,97,0.18)  0%, transparent 65%),
    radial-gradient(ellipse 30% 30% at 72% 70%, rgba(201,150,14,0.10) 0%, transparent 60%);
  pointer-events: none;
}

.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)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.045;
  pointer-events: none;
}

/* Slow-spinning decorative ring, transform-only animation */
.hero__ring {
  position: absolute;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  border: 1px solid rgba(250, 245, 238, 0.05);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring-spin 70s linear infinite;
  pointer-events: none;
  will-change: transform;
}
.hero__ring::before {
  content: '';
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  border: 1px solid rgba(250, 245, 238, 0.03);
}
.hero__ring::after {
  content: '';
  position: absolute;
  inset: -80px;
  border-radius: 50%;
  border: 1px solid rgba(138, 44, 59, 0.07);
}

.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 element writes in left to right */
.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;
  clip-path: inset(0 100% 0 0);
  animation: line-write 0.8s var(--ease-out) 0.15s 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);
  clip-path: inset(0 100% 0 0);
  animation: line-write 1.1s var(--ease-out) 0.55s forwards;
}

.hero__title-initials {
  display: block;
  color: var(--color-white-dim);
  clip-path: inset(0 100% 0 0);
  animation: line-write 1.0s var(--ease-out) 1.35s forwards;
}

.hero__rule {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin: var(--space-md) auto;
  opacity: 0;
  animation: fade-in 0.7s var(--ease-out) 2.3s forwards;
}

.hero__rule-line {
  display: block;
  width: 55px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--color-wine), transparent);
  border-radius: 99px;
}

.hero__rule-gem {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-wine);
  flex-shrink: 0;
  animation: gem-pulse 3s ease-in-out 2.8s infinite;
}

.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);
  clip-path: inset(0 100% 0 0);
  animation: line-write 1.0s var(--ease-out) 2.7s forwards;
  position: relative;
}

/* Blinking cursor after tagline, fades out after 5 blinks */
.hero__tagline::after {
  content: '|';
  position: absolute;
  margin-left: 3px;
  color: var(--color-wine);
  font-style: normal;
  font-weight: 300;
  opacity: 0;
  animation:
    cursor-appear 0s    3.7s   forwards,
    cursor-blink  0.75s 3.7s   5,
    cursor-fade   0.4s  7.45s  forwards;
}

.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.8s var(--ease-out) 3.8s forwards;
}

/* Hero next-section button appears after intro sequence */
.hero__next-btn {
  opacity: 0;
  animation: fade-in 0.8s ease 4.2s forwards;
}


/* 11. Animation System
   ================================================================

   .anim-write elements start hidden via clip-path.
   JavaScript adds .is-in (types in) or .is-out (erases) based on
   IntersectionObserver viewport detection and button-click navigation.
   Animation delay is set per-element via the --write-delay custom property.

   ================================================================ */

.anim-write {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.anim-write.is-in {
  animation: line-write 0.75s var(--ease-out) var(--write-delay, 0s) both;
}

.anim-write.is-out {
  animation: line-erase 0.45s ease-in var(--write-delay, 0s) both;
}


/* 12. Section Shared
   ================================================================ */

/* Statement section background */
.section--statement {
  background-color: var(--color-surface);
  border-top:    1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-image: linear-gradient(
    135deg,
    rgba(138, 44,  59, 0.07) 0%,
    transparent               40%,
    rgba(28,  58, 110, 0.07) 100%
  );
  /* Faint manuscript-line texture */
  background-image:
    linear-gradient(135deg, rgba(138,44,59,0.07) 0%, transparent 40%, rgba(28,58,110,0.07) 100%),
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 2.6rem,
      rgba(250, 245, 238, 0.012) 2.6rem,
      rgba(250, 245, 238, 0.012) calc(2.6rem + 1px)
    );
}


/* 13. Statement
   ================================================================ */

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

.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 3.6s ease-in-out infinite;
}

.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 {
  0%, 70%, 100% { transform: scale(1) translateY(0);        opacity: 0.7; }
  35%            { transform: scale(1.55) translateY(-3px);  opacity: 1;   }
}

/* Pull-quote block with large decorative opening mark */
.statement__quote {
  max-width: 700px;
  position: relative;
  padding-top: 1.5rem;
}

.statement__quote::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--color-wine);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

.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;
  position: relative;
  z-index: 1;
}

.statement__quote-cite {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mustard);
  opacity: 0.75;
}


/* 14. Works Cards
   ================================================================ */

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

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

.works__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  position: relative;
  transition: border-color 0.28s var(--ease-out);
}

/* Page-corner fold decoration */
.works__card::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 18px 18px;
  border-color: transparent transparent rgba(250, 245, 238, 0.06) transparent;
  transition: border-width 0.28s var(--ease-out), border-color 0.28s var(--ease-out);
  z-index: 2;
}

.works__card:hover { border-color: rgba(250, 245, 238, 0.14); }

.works__card:hover::before {
  border-width: 0 0 28px 28px;
  border-color: transparent transparent rgba(250, 245, 238, 0.1) transparent;
}

.works__card-color-bar {
  height: 4px;
  flex-shrink: 0;
  transition: opacity 0.28s var(--ease-out);
}
.works__card--fiction    .works__card-color-bar { background-color: var(--color-wine); }
.works__card--nonfiction .works__card-color-bar { background-color: var(--color-navy); }
.works__card:hover .works__card-color-bar       { opacity: 0.75; }

.works__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md);
}

.works__card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.works__card--fiction    .works__card-eyebrow { color: var(--color-wine); }
.works__card--nonfiction .works__card-eyebrow { color: #3c6db5;           }

.works__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  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;
}

.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;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition:
    border-color     var(--t),
    color            var(--t),
    background-color var(--t);
}
.works__card-cta:hover {
  border-color:     var(--color-muted);
  color:            var(--color-white);
  background-color: rgba(250, 245, 238, 0.04);
}

.works__card-arrow {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}
.works__card-cta:hover .works__card-arrow { transform: translateX(4px); }

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


/* 15. About Preview
   ================================================================ */

.section--about-preview {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  background-image: linear-gradient(
    225deg,
    rgba(122, 54,  97, 0.08) 0%,
    transparent               50%,
    rgba(28,  58, 110, 0.06) 100%
  );
}

.about-preview__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  flex: 1 1 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;
}

.about-preview__portrait-wrap {
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-frame {
  position: relative;
  width: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow:
    0 0 0 1px rgba(138, 44,  59, 0.25),
    0 24px 60px rgba(138, 44,  59, 0.30),
    0  8px 24px rgba(122, 54,  97, 0.25);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  will-change: transform;
}
.portrait-frame:hover {
  transform: scale(1.02) translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(138, 44,  59, 0.35),
    0 32px 72px rgba(138, 44,  59, 0.38),
    0 10px 30px rgba(122, 54,  97, 0.30);
}

.portrait-frame__gem-bar {
  display: flex;
  flex-direction: row;
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}
.portrait-frame__gem-stripe {
  display: block;
  flex: 1 1 0;
  height: 100%;
}
.portrait-frame__gem-stripe--wine { background-color: var(--color-wine); }
.portrait-frame__gem-stripe--plum { background-color: var(--color-plum); }
.portrait-frame__gem-stripe--navy { background-color: var(--color-navy); }

.portrait-frame__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.portrait-frame__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(138,44,59,0.35) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Italic caption below portrait image, styled like a book caption */
.portrait-frame__caption {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-muted);
  text-align: center;
  padding: 0.6rem var(--space-sm) 0.75rem;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}


/* 16. Connect
   ================================================================ */

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

.connect__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 20% 50%,  rgba(138, 44,  59, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 45% 75% at 80% 50%,  rgba(122, 54,  97, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 35% 50% at 50% 100%, rgba(28,  58, 110, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

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

/* Decorative gradient bar above the eyebrow label */
.section--connect .section__eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--color-wine), var(--color-plum), transparent);
  margin: 0 auto var(--space-sm);
}

/* Suppress the drawn underline in this section; the bar above serves instead */
.section--connect .section__eyebrow::after {
  display: none;
}

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


/* 17. Footer
   ================================================================ */

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

.footer__gem-band {
  display: flex;
  flex-direction: row;
  height: 2px;
}
.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);    }

.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-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

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

/* Color-only transition, no sizing properties that shift layout */
.footer__nav-link {
  display: inline-block;
  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);
}
.footer__nav-link:hover { color: var(--color-white); }

.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);
}
.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 0.28s var(--ease-out);
}
.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;
}

/* Colophon-style copyright line */
.footer__copyright {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}


/* 18. Keyframes
   ================================================================ */

/* Typing reveal: left to right */
@keyframes line-write {
  from { clip-path: inset(0 100% 0 0); opacity: 1; }
  to   { clip-path: inset(0 0%   0 0); opacity: 1; }
}

/* Erase: right to left (backspace effect) */
@keyframes line-erase {
  from { clip-path: inset(0 0%   0 0); opacity: 1; }
  to   { clip-path: inset(0 100% 0 0); opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

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

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

@keyframes gem-pulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.4; }
}

/* Cursor keyframes for the hero tagline */
@keyframes cursor-appear {
  to { opacity: 1; }
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes cursor-fade {
  to { opacity: 0; }
}

/* Scroll thumb travel */
@keyframes scroll-travel {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(250%);  opacity: 0; }
}

/* Header ambient hue drift */
@keyframes header-hue-drift {
  0%   { background-color: rgba(15, 10, 12, 0.82); }
  25%  { background-color: rgba(18, 10, 13, 0.82); }
  50%  { background-color: rgba(12, 10, 15, 0.82); }
  75%  { background-color: rgba(14, 11, 12, 0.82); }
  100% { background-color: rgba(15, 10, 12, 0.82); }
}


/* 19. Scroll-Driven Animations (header only)
   ================================================================ */

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

  .site-header {
    animation:
      header-hue-drift 20s ease-in-out infinite,
      header-fill      linear both;
    animation-timeline: auto, scroll(root);
    animation-range:    auto, 0px 140px;
  }

  @keyframes header-fill {
    from {
      background-color: rgba(15, 10, 12, 0.30);
      border-bottom-color: transparent;
    }
    to {
      background-color: rgba(15, 10, 12, 0.94);
      border-bottom-color: var(--color-border);
    }
  }

  /* Gem line brightens as user scrolls down */
  .site-header::after {
    animation:
      header-line-slide 8s linear infinite,
      header-line-fade  linear both;
    animation-timeline: auto, scroll(root);
    animation-range:    auto, 60px 160px;
  }

  @keyframes header-line-fade {
    from { opacity: 0.35; }
    to   { opacity: 1;    }
  }

}


/* 20. Responsive
   ================================================================ */

/* Works cards: stack at 740px */
@media (max-width: 740px) {
  .works__grid {
    flex-direction: column;
    align-items: stretch;
  }
  .works__card {
    flex: 0 0 auto;
    width: 100%;
  }
}

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

  .nav__social-label { display: none; }

  .section__inner--split {
    flex-direction: column-reverse;
    gap: var(--space-md);
  }
  .about-preview__portrait-wrap {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }
  .portrait-frame { width: min(300px, 80vw); }

  .about-preview__text {
    align-items: center;
    text-align: center;
  }
  .about-preview__body { text-align: center; max-width: 60ch; }

  /* Left-aligned ink stroke becomes centered on mobile */
  .about-preview__text .section__title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .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;
  }

  .section { padding-bottom: 5rem; }

  .nav         { padding: 0 var(--space-sm); gap: var(--space-sm); }
  .nav__menu   { gap: var(--space-sm); }
  .section__inner { padding: 0 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;
  }

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

  .portrait-frame { width: min(260px, 85vw); }
}