:root{
    --bg:#14110f;
    --bg-alt:#1c1815;
    --bg-raised:#231e19;
    --ink:#e9e1d3;
    --ink-dim:#9a8f7e;
    --ink-faint:#655c50;
    --blood:#7a1f1f;
    --blood-bright:#a4342f;
    --gold:#ad8b46;
    --gold-soft:#8a723d;
    --mood-dark:#a4342f;
    --mood-adventure:#c9863f;
    --mood-dreamy:#d9a3d6;
    --mood-mystery:#6f8ba8;
    --line:rgba(233,225,211,0.12);
    --line-strong:rgba(233,225,211,0.22);

    --vibe-blood:#a4342f;
    --vibe-gold:#c9a227;
    --vibe-ash:#9a8f7e;
    --vibe-eerie:#7295ab;
  }

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

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  html,body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Crimson Pro', serif;
    min-height:100vh;
    overflow-x:hidden;
  }

  body{
    background-image:
      radial-gradient(ellipse at 20% 0%, rgba(122,31,31,0.07), transparent 55%),
      radial-gradient(ellipse at 80% 100%, rgba(173,139,70,0.05), transparent 50%);
  }

  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }

  /* ---------- Ash particles (signature ambient motion) ---------- */
  #ash{
    position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;
  }
  .ember{
    position:absolute;
    bottom:-10px;
    width:3px; height:3px;
    border-radius:50%;
    background:var(--gold);
    opacity:0;
    animation:rise linear infinite;
  }
  @keyframes rise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.5; }
    90%{ opacity:0.25; }
    100%{ transform:translateY(-110vh) translateX(var(--drift,20px)); opacity:0; }
  }

  /* ---------- Layout shell ---------- */
  .view{ display:none; position:relative; z-index:2; min-height:100vh; }
  .view.active{ display:block; }

  .topnav{
    display:flex; align-items:center; justify-content:space-between;
    padding:28px 6vw 0;
    font-family:'Jost',sans-serif;
  }
  .brand{
    font-family:'Cinzel',serif;
    font-size:0.85rem;
    letter-spacing:0.18em;
    color:var(--ink-dim);
  }
  .brand b{ color:var(--ink); font-weight:600; }
  .navlink{
    font-size:0.78rem;
    letter-spacing:0.08em;
    color:var(--ink-dim);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:color 0.25s, border-color 0.25s;
  }
  .navlink:hover, .navlink:focus-visible{ color:var(--gold); border-color:var(--gold); }
  .nav-right{ display:flex; align-items:center; gap:22px; }

  .landing-links{
    position:absolute;
    bottom:64px; left:0; right:0;
    text-align:center;
    font-family:'Jost',sans-serif;
    font-size:0.74rem;
    letter-spacing:0.08em;
    color:var(--ink-faint);
  }
  .landing-links a{
    color:var(--ink-dim);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:color 0.25s, border-color 0.25s;
  }
  .landing-links a:hover{ color:var(--gold); border-color:var(--gold); }
  .landing-links span{ margin:0 10px; opacity:0.5; }

  .eyebrow{
    font-family:'Jost',sans-serif;
    font-size:0.72rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:22px; height:1px;
    background:var(--gold-soft);
    display:inline-block;
  }

  /* ---------- Landing ---------- */
  #view-landing .stage{
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:6vh 6vw;
    position:relative;
  }
  .crownmark{
    width:34px; height:34px;
    margin-bottom:26px;
    opacity:0.85;
    animation:fadeUp 1.1s ease both;
  }
  h1.title{
    font-family:'Cinzel',serif;
    font-weight:600;
    font-size:clamp(2.6rem, 7vw, 5rem);
    letter-spacing:0.03em;
    line-height:1.05;
    color:var(--ink);
    animation:fadeUp 1.1s ease both 0.15s;
  }
  .title .accent{ color:var(--blood-bright); }
  .subtitle{
    max-width:520px;
    margin:22px auto 44px;
    color:var(--ink-dim);
    font-size:1.08rem;
    font-style:italic;
    font-weight:300;
    line-height:1.6;
    animation:fadeUp 1.1s ease both 0.3s;
  }
  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .threshold-btn{
    font-family:'Jost',sans-serif;
    font-size:0.82rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink);
    padding:16px 38px;
    border:1px solid var(--line-strong);
    position:relative;
    animation:fadeUp 1.1s ease both 0.45s;
    transition:border-color 0.35s, color 0.35s, letter-spacing 0.35s;
  }
  .threshold-btn:hover, .threshold-btn:focus-visible{
    border-color:var(--gold);
    color:var(--gold);
    letter-spacing:0.2em;
  }

  .landing-foot{
    position:absolute; bottom:26px; left:0; right:0;
    text-align:center;
    font-family:'Jost',sans-serif;
    font-size:0.7rem;
    letter-spacing:0.1em;
    color:var(--ink-faint);
  }

  /* ---------- Paths ---------- */
  .content-wrap{ padding:56px 6vw 100px; max-width:1100px; margin:0 auto; }
  h2.section-title{
    font-family:'Cinzel',serif;
    font-size:clamp(1.6rem, 4vw, 2.4rem);
    font-weight:500;
    margin-bottom:10px;
  }
  .section-lede{
    color:var(--ink-dim);
    font-style:italic;
    font-weight:300;
    max-width:520px;
    margin-bottom:44px;
  }

  .paths-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .path-card{
    background:var(--bg);
    padding:38px 30px;
    text-align:left;
    display:flex; flex-direction:column; gap:10px;
    min-height:170px;
    position:relative;
    transition:background 0.3s;
  }
  .path-card:hover, .path-card:focus-visible{ background:var(--bg-raised); }
  .path-card-wide{
    grid-column:1 / -1;
    flex-direction:row;
    align-items:center;
    gap:22px;
    min-height:100px;
  }
  .path-card-wide h3{ white-space:nowrap; }
  .path-card-wide p{ margin:0; flex-grow:1; }
  .path-card-wide .arrow{ position:static; }
  .path-card .num{
    font-family:'Jost',sans-serif;
    font-size:0.7rem;
    color:var(--ink-faint);
    letter-spacing:0.1em;
  }
  .path-card h3{
    font-family:'Cinzel',serif;
    font-size:1.3rem;
    font-weight:500;
    color:var(--ink);
  }
  .path-card p{
    color:var(--ink-dim);
    font-size:0.92rem;
    font-weight:300;
    line-height:1.5;
  }
  .path-card .arrow{
    position:absolute; right:26px; bottom:24px;
    color:var(--gold-soft);
    font-size:1.1rem;
    transition:transform 0.3s, color 0.3s;
  }
  .path-card:hover .arrow{ transform:translateX(6px); color:var(--gold); }

  /* ---------- Library ---------- */
  .lib-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
    gap:22px;
  }
  .story-card{
    text-align:left;
    background:var(--bg-alt);
    border:1px solid var(--line);
    padding:26px 24px;
    display:flex; flex-direction:column; gap:12px;
    transition:border-color 0.3s, transform 0.3s;
    min-height:180px;
  }
  .story-card:hover, .story-card:focus-visible{
    border-color:var(--gold-soft);
    transform:translateY(-3px);
  }
  .story-card.dormant{ opacity:0.55; }
  .story-card.dormant:hover{ opacity:0.85; }
  .chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{
    font-family:'Jost',sans-serif;
    font-size:0.66rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:4px 10px;
    border:1px solid var(--line-strong);
    color:var(--ink-dim);
  }
  .chip.status{ color:var(--gold); border-color:var(--gold-soft); }
  .chip.dormant-chip{ color:var(--ink-faint); border-color:var(--line); }
  .story-card h3{
    font-family:'Cinzel',serif;
    font-size:1.2rem;
    font-weight:500;
    color:var(--ink);
  }
  .story-card .blurb{
    color:var(--ink-dim);
    font-size:0.9rem;
    font-weight:300;
    line-height:1.55;
    flex-grow:1;
  }
  .story-card .form-label{
    font-family:'Jost',sans-serif;
    font-size:0.7rem;
    color:var(--ink-faint);
    letter-spacing:0.1em;
  }

  /* ---------- Characters ---------- */
  .char-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:22px;
  }
  .char-card{
    text-align:left;
    background:var(--bg-alt);
    border:1px solid var(--line);
    padding:26px 24px;
    display:flex; flex-direction:column; gap:12px;
    width:100%;
    transition:border-color 0.3s, transform 0.3s;
  }
  .char-card:hover, .char-card:focus-visible{
    border-color:var(--gold-soft);
    transform:translateY(-3px);
  }
  .char-card.dormant{ opacity:0.6; }
  .char-card.dormant:hover{ opacity:0.85; }
  .char-card h3{
    font-family:'Cinzel',serif;
    font-size:1.15rem;
    font-weight:500;
    color:var(--ink);
  }
  .char-card .blurb{
    color:var(--ink-dim);
    font-size:0.88rem;
    font-weight:300;
    line-height:1.6;
  }
  .char-detail-role{
    font-family:'Jost',sans-serif;
    font-size:0.82rem;
    letter-spacing:0.06em;
    color:var(--gold-soft);
    font-style:italic;
    margin-bottom:26px;
  }

  /* ---------- About ---------- */
  .about-wrap{ max-width:640px; }
  .about-body{
    color:var(--ink-dim);
    font-family:'Spectral', serif;
    font-size:1.05rem;
    font-weight:300;
    line-height:1.8;
  }
  .author-logo{
    display:block;
    max-width:280px;
    width:100%;
    height:auto;
    margin:0 auto 40px;
    border-radius:4px;
  }
  .about-body p{ margin-bottom:1.4em; }

  /* ---------- Detail ---------- */
  .back-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Jost',sans-serif;
    font-size:0.78rem;
    letter-spacing:0.06em;
    color:var(--ink-dim);
    margin-bottom:34px;
    transition:color 0.25s;
  }
  .back-link:hover, .back-link:focus-visible{ color:var(--gold); }

  .detail-header h2{
    font-family:'Cinzel',serif;
    font-size:clamp(1.8rem, 4vw, 2.6rem);
    font-weight:500;
    margin-bottom:16px;
  }
  .detail-synopsis{
    max-width:640px;
    color:var(--ink-dim);
    font-size:1.02rem;
    font-weight:300;
    line-height:1.75;
    margin-bottom:26px;
  }
  .detail-synopsis.empty{
    font-style:italic;
    color:var(--ink-faint);
  }

  .chapter-list{
    margin-top:40px;
    border-top:1px solid var(--line);
  }
  .chapter-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 4px;
    border-bottom:1px solid var(--line);
    text-align:left;
    width:100%;
    transition:padding-left 0.3s, color 0.3s;
  }
  .chapter-row:hover, .chapter-row:focus-visible{
    padding-left:14px;
    color:var(--gold);
  }
  .chapter-row .ch-left{ display:flex; align-items:baseline; gap:16px; }
  .chapter-row .ch-num{
    font-family:'Cinzel',serif;
    font-size:0.85rem;
    color:var(--ink-faint);
  }
  .chapter-row .ch-title{
    font-family:'Crimson Pro',serif;
    font-size:1.08rem;
  }
  .chapter-row .ch-arrow{ color:var(--ink-faint); font-size:1rem; }

  .dormant-block{
    margin-top:44px;
    border:1px dashed var(--line-strong);
    padding:40px 30px;
    text-align:center;
    color:var(--ink-faint);
    font-style:italic;
    font-weight:300;
    max-width:480px;
  }

  /* ---------- Reader ---------- */
  .reader-wrap{ max-width:640px; margin:0 auto; padding:60px 6vw 120px; }
  .reader-eyebrow{
    font-family:'Jost',sans-serif;
    font-size:0.7rem;
    letter-spacing:0.14em;
    color:var(--ink-faint);
    text-transform:uppercase;
    margin-bottom:8px;
  }
  .reader-title{
    font-family:'Cinzel',serif;
    font-size:clamp(1.8rem,4vw,2.4rem);
    font-weight:500;
    margin-bottom:6px;
    color:var(--ink);
    transition:color 0.4s;
  }
  .reader-title.mood-dark{
    color:var(--mood-dark);
    text-shadow:0 0 18px rgba(164,52,47,0.55), 0 0 42px rgba(122,31,31,0.3);
  }
  .reader-title.mood-adventure{
    color:var(--mood-adventure);
    text-shadow:0 0 18px rgba(201,134,63,0.55), 0 0 42px rgba(201,134,63,0.28);
  }
  .reader-title.mood-dreamy{
    color:var(--mood-dreamy);
    text-shadow:0 0 18px rgba(217,163,214,0.55), 0 0 40px rgba(217,163,214,0.25);
  }
  .reader-title.mood-mystery{
    color:var(--mood-mystery);
    text-shadow:0 0 18px rgba(111,139,168,0.55), 0 0 42px rgba(111,139,168,0.28);
  }
  .reader-subtitle{
    font-style:italic;
    color:var(--gold-soft);
    font-weight:300;
    margin-bottom:44px;
  }
  .reader-body p{
    font-family:'Spectral', serif;
    font-size:1.02rem;
    line-height:1.6;
    font-weight:300;
    color:var(--ink);
    margin-bottom:1.6em;
  }
  .reader-body p.stanza-break{ margin-bottom:2.4em; }
  .scene-divider{
    text-align:center;
    color:var(--gold-soft);
    letter-spacing:0.4em;
    margin:2.2em 0 !important;
    font-size:0.95rem;
  }
  .spell{
    font-family:'MedievalSharp', cursive;
    color:#e0b34d;
    letter-spacing:0.03em;
    text-shadow:0 0 8px rgba(224,179,77,0.65), 0 0 20px rgba(224,179,77,0.3);
  }
  .spell sup{ font-size:0.62em; }
  .chapter-glossary{
    margin-top:3em;
    padding-top:1.2em;
    border-top:1px solid var(--line);
    font-family:'Jost', sans-serif;
    font-size:0.7rem;
    color:var(--ink-faint);
    line-height:1.9;
  }
  .chapter-glossary .glossary-title{
    display:block;
    font-size:0.66rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:0.6em;
    opacity:0.8;
  }
  .chapter-glossary .g-item{ display:block; }
  .chapter-glossary sup{ font-size:0.85em; }
  .dimension-marker{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:0.4em 0 2.6em !important;
    font-family:'Jost',sans-serif;
    font-size:0.74rem;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .dimension-marker::before,
  .dimension-marker::after{
    content:'';
    height:1px;
    width:36px;
    background:var(--gold-soft);
    opacity:0.6;
  }
  .time-marker{
    font-family:'Crimson Pro',serif;
    font-style:italic;
    font-size:0.92rem;
    letter-spacing:0.02em;
    color:var(--ink-faint);
    margin:0 0 1.4em !important;
  }

  .letter-block{
    margin:0.4em 0 3em;
    padding:36px 34px;
    background:rgba(233,225,211,0.03);
    border:1px solid var(--line-strong);
    position:relative;
  }
  .letter-block::before{
    content:'A NOTE';
    position:absolute;
    top:-11px;
    left:34px;
    background:var(--bg);
    padding:0 10px;
    font-family:'Jost',sans-serif;
    font-size:0.68rem;
    letter-spacing:0.24em;
    color:var(--gold-soft);
  }
  .letter-block p{
    font-family:'Spectral', serif;
    font-style:italic;
    color:var(--gold);
    font-weight:300;
  }
  .letter-block p.letter-sign{
    margin-top:1.6em;
    text-align:right;
    font-style:italic;
    color:var(--gold);
  }
  .end-mark{
    text-align:center;
    color:var(--gold-soft);
    letter-spacing:0.3em;
    margin:50px 0 10px;
    font-size:0.9rem;
  }
  .reader-nav{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:50px;
    border-top:1px solid var(--line);
    padding-top:24px;
  }
  .reader-nav button{
    font-family:'Jost',sans-serif;
    font-size:0.78rem;
    letter-spacing:0.06em;
    color:var(--ink-dim);
    display:flex; align-items:center; gap:8px;
    transition:color 0.25s;
  }
  .reader-nav button:disabled{ opacity:0.25; cursor:default; }
  .reader-nav button:not(:disabled):hover{ color:var(--gold); }

  /* ---------- Responsive ---------- */
  @media (max-width:680px){
    .paths-grid{ grid-template-columns:1fr; }
    .topnav{ padding:22px 6vw 0; }
    .path-card-wide{ flex-direction:column; align-items:flex-start; }
    .path-card-wide h3{ white-space:normal; }
  }

  /* ---------- Focus states ---------- */
  a:focus-visible, button:focus-visible{
    outline:1px solid var(--gold);
    outline-offset:3px;
  }