/* ============================================================
   TOKENS  —  smoky warm palette
   ============================================================ */
:root{
  --base:#17141b; --smoke-1:#241f2c; --smoke-2:#322a38; --smoke-3:#3d3340;
  --panel:rgba(18,15,22,0.55);
  --parchment:#e8e1d6; --parchment-dim:#a79f95; --wash:#cbb6a8;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'EB Garamond',Georgia,serif;
  --text-xs:0.75rem; --text-sm:0.9rem; --text-base:1.2rem; --text-lg:1.45rem;
  --text-xl:2rem; --text-2xl:2.6rem; --text-3xl:3.4rem;
  --space-xs:0.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4rem; --space-xl:7rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{background:var(--base);color:var(--parchment);font-family:var(--font-body);
  font-size:var(--text-base);line-height:1.8;-webkit-font-smoothing:antialiased;
  min-height:100vh;position:relative;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}

/* THE SMOKE — drifting atmospheric background, no image files needed */
.smoke{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 20% 30%,var(--smoke-2) 0%,transparent 60%),
    radial-gradient(50% 60% at 80% 20%,var(--smoke-1) 0%,transparent 55%),
    radial-gradient(70% 60% at 65% 80%,var(--smoke-3) 0%,transparent 60%),
    radial-gradient(50% 50% at 30% 75%,var(--smoke-1) 0%,transparent 55%);
  filter:blur(40px);opacity:0.9;animation:drift 38s ease-in-out infinite alternate;}
.smoke::after{content:'';position:absolute;inset:0;
  background:radial-gradient(40% 40% at 50% 50%,var(--smoke-3) 0%,transparent 70%);
  filter:blur(60px);opacity:0.5;animation:drift2 50s ease-in-out infinite alternate;}
@keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(4%,-3%) scale(1.08);}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.1);}100%{transform:translate(-5%,4%) scale(1);}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%,transparent 50%,rgba(10,8,12,0.7) 100%);}
.site-header,main,.site-footer{position:relative;z-index:10;}

/* HEADER */
.site-header{display:flex;align-items:baseline;justify-content:space-between;
  padding:var(--space-md) var(--space-lg);position:fixed;top:0;left:0;right:0;z-index:100;}
.site-name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:300;
  letter-spacing:0.04em;color:var(--parchment);transition:color .25s ease;
  text-shadow:0 1px 20px rgba(0,0,0,.5);}
.site-name:hover{color:var(--wash);}
.story-nav{display:flex;align-items:baseline;gap:var(--space-md);}
.nav-label{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:0.22em;
  text-transform:uppercase;color:var(--parchment-dim);}
.story-nav ul{list-style:none;display:flex;gap:var(--space-md);}
.story-nav a{font-family:var(--font-display);font-size:var(--text-lg);font-weight:300;
  font-style:italic;color:var(--parchment);position:relative;padding-bottom:3px;
  text-shadow:0 1px 20px rgba(0,0,0,.5);transition:color .25s ease;}
.story-nav a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--wash);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.story-nav a:hover{color:var(--wash);}
.story-nav a:hover::after{transform:scaleX(1);}

/* HOMEPAGE */
.home-main{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-xl) var(--space-lg);max-width:760px;}
.home-eyebrow{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:0.3em;
  text-transform:uppercase;color:var(--wash);margin-bottom:var(--space-md);}
.home-intro{display:flex;flex-direction:column;gap:var(--space-md);}
.intro-body{font-family:var(--font-body);font-size:var(--text-lg);line-height:1.85;color:var(--parchment);}
.intro-body:first-of-type::first-letter{font-family:var(--font-display);font-size:3.2em;
  float:left;line-height:0.8;padding:0.08em 0.12em 0 0;color:var(--wash);}
.site-footer{padding:var(--space-md) var(--space-lg);font-family:var(--font-display);
  font-size:var(--text-xs);letter-spacing:0.1em;color:var(--parchment-dim);}

/* STORY PAGES */
.story-bg{position:fixed;inset:0;z-index:2;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1s ease;}
.story-bg.has-image{opacity:1;}
.story-scrim{position:fixed;inset:0;z-index:3;background:rgba(15,12,18,0.35);pointer-events:none;}
.story-content{position:relative;z-index:10;}
.scene{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--space-xl) var(--space-lg);}
.scene-prose{max-width:620px;background:var(--panel);backdrop-filter:blur(2px);
  padding:var(--space-lg);border-radius:2px;}
.scene-prose h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:300;
  font-style:italic;color:var(--wash);margin-bottom:var(--space-md);letter-spacing:0.02em;}
.scene-prose p{font-family:var(--font-body);font-size:var(--text-base);line-height:1.9;
  color:var(--parchment);margin-bottom:1.4em;}
.scene-prose p:last-child{margin-bottom:0;}
.story-title-scene{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:var(--space-lg);position:relative;}
.story-title-scene h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:300;
  letter-spacing:0.03em;color:var(--parchment);text-shadow:0 2px 30px rgba(0,0,0,.6);}
.story-title-scene .byline{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);
  color:var(--wash);margin-top:var(--space-sm);}
.story-title-scene .scroll-cue{position:absolute;bottom:var(--space-lg);font-family:var(--font-display);
  font-size:var(--text-xs);letter-spacing:0.25em;text-transform:uppercase;color:var(--parchment-dim);
  animation:pulse 2.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.4;}50%{opacity:1;}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}
@media (max-width:768px){
  :root{--space-lg:1.5rem;--space-xl:4rem;--text-lg:1.25rem;--text-3xl:2.4rem;--text-2xl:2rem;}
  .site-header{flex-direction:column;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);}
  .story-nav{flex-direction:column;align-items:flex-start;gap:var(--space-xs);}
  .story-nav ul{flex-wrap:wrap;gap:var(--space-sm);}
  .home-main{padding-top:9rem;}
  .scene-prose{padding:var(--space-md);}
}