/* ============================================================
   BLACK FEATHER WORKS — stylesheet
   Palette: Tyrian purple · black · gold
   Fonts:   Cinzel (display) · EB Garamond (body)
   ============================================================ */

:root{
  --bg:#0a0608;
  --tyrian:#7a0f4e;
  --gold:#d4af37;
  --gold-soft:rgba(212,175,55,.16);

  --ink:#ece3dc;        /* primary text        */
  --ink-2:#d3c7cb;      /* soft text           */
  --ink-3:#c3b6bb;      /* lead text           */
  --ink-4:#b3a6ab;      /* card body           */
  --ink-mute:#8a7c82;   /* muted               */
  --ink-faint:#6f6068;  /* faintest / mono     */
  --head:#f4ecdf;       /* headings            */
  --head-2:#f2e9df;

  --panel:linear-gradient(180deg,#160b12,#100810);
  --panel-solid:#110810;

  --serif:'EB Garamond',Georgia,serif;
  --display:'Cinzel',serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
  min-height:100vh;
}

::selection{background:rgba(212,175,55,.28);color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a1420;border-radius:9px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a1c2c}

/* focus visibility for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- ambient background ---------- */
.ambient-glow{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(122,15,78,.22), transparent 55%),
    radial-gradient(90% 60% at 100% 110%, rgba(122,15,78,.14), transparent 60%);
}
.ambient-grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:3px 3px;
}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:34px;padding-right:34px}
.wrap-narrow{max-width:1040px}
.wrap-read{max-width:820px}
.section-pad{padding-top:80px;padding-bottom:90px}
.section-pad-sm{margin-top:44px}
.center{text-align:center}
main{position:relative;z-index:1}

.gold{color:var(--gold)}
.ink{color:var(--head-2)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--display);font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);
}
.page-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,6vw,64px);margin:14px 0 0;color:var(--head);
}
.lead{max-width:680px;margin:20px 0 0;font-size:20px;color:var(--ink-3)}
.lead-center{margin-left:auto;margin-right:auto;text-align:center;max-width:560px}
.tba{color:var(--ink-mute);font-style:italic;font-family:var(--serif);font-weight:400}
.placeholder-note{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.note-center{text-align:center;margin-top:30px;font-size:15px;color:var(--ink-mute);font-style:italic}
.mono-note{font-family:var(--mono);font-size:12px;color:var(--ink-mute)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:15px 30px;font-family:var(--display);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;border-radius:2px;
  cursor:pointer;text-decoration:none;transition:filter .2s,background .2s,border-color .2s,transform .2s;
}
.btn-solid{
  background:var(--gold);color:#180c04;font-weight:700;border:1px solid var(--gold);
  box-shadow:0 16px 44px -20px rgba(212,175,55,.9);
}
.btn-solid:hover{filter:brightness(1.08)}
.btn-ghost{
  background:transparent;color:var(--gold);font-weight:600;
  border:1px solid rgba(212,175,55,.5);
}
.btn-ghost:hover{border-color:var(--gold);background:rgba(212,175,55,.06)}
.btn-block{width:100%;margin-top:16px;padding:14px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 34px;background:rgba(10,6,8,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.16);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{display:inline-flex;filter:drop-shadow(0 2px 8px rgba(212,175,55,.4))}
.brand-name{
  font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.24em;color:var(--head-2);text-transform:uppercase;
}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;font-family:var(--display);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#c8bcc4;
  padding:9px 15px;text-decoration:none;transition:color .2s;
}
.nav-links a:hover{color:var(--head-2)}
.nav-links a.active{color:var(--head-2)}
.nav-links a.active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;
  height:1.5px;background:var(--gold);
}

/* hamburger */
.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;
}
.nav-toggle span{
  display:block;width:24px;height:2px;background:var(--gold);
  transition:transform .25s,opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- views / transitions ---------- */
.view[hidden]{display:none}
.view{animation:bfwFade .5s ease both}

/* ---------- HOME: hero ---------- */
.hero{
  position:relative;min-height:86vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:90px 24px 70px;overflow:hidden;
}
.hero-glow{
  position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle, rgba(122,15,78,.5), transparent 68%);
  filter:blur(20px);animation:bfwGlow 7s ease-in-out infinite;z-index:0;
}
.hero-feather{position:absolute;top:8%;opacity:.06;z-index:0;animation:bfwFloat 9s ease-in-out infinite}
.hero-inner{position:relative;z-index:1;max-width:840px}
.hero-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(44px,8vw,92px);line-height:1.02;margin:0;
  letter-spacing:.02em;color:var(--head);text-shadow:0 0 60px rgba(122,15,78,.5);
}
.hero-sub{max-width:600px;margin:30px auto 0;font-size:21px;color:var(--ink-2);font-style:italic}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-faint);z-index:1;
}

/* ---------- HOME: explore cards ---------- */
.explore{padding-top:20px;padding-bottom:90px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{
  text-align:left;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid rgba(212,175,55,.14);
  border-radius:4px;padding:34px 30px;transition:border-color .2s,transform .2s;
}
.card:hover{border-color:rgba(212,175,55,.42);transform:translateY(-4px)}
.card-num{font-family:var(--display);font-size:11px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.card-title{font-family:var(--display);font-weight:600;font-size:24px;margin:14px 0 10px;color:var(--head-2)}
.card-body{margin:0;color:var(--ink-4);font-size:17px}
.card-link{margin-top:20px;font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- GAME ---------- */
.keyart{
  margin-top:44px;aspect-ratio:16/9;border:1px solid rgba(212,175,55,.24);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;
  background:repeating-linear-gradient(135deg,#160b12,#160b12 12px,#110810 12px,#110810 24px);
}
.keyart-label{font-family:var(--display);letter-spacing:.2em;color:var(--ink-mute);font-size:14px}
.shot-grid{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.shot{
  aspect-ratio:16/10;border:1px solid rgba(212,175,55,.14);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  background:repeating-linear-gradient(135deg,#150b11,#150b11 9px,#110810 9px,#110810 18px);
}

/* fact bar */
.factbar{
  margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.14);
  border-radius:4px;overflow:hidden;
}
.factbar-3{margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.fact{background:var(--panel-solid);padding:24px 26px}
.factbar-3 .fact{padding:20px 24px}
.fact-k{font-family:var(--display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.fact-v{margin-top:8px;font-size:19px;color:var(--head-2)}
.factbar-3 .fact-v{margin-top:6px;font-size:17px}

/* ---------- DEMO ---------- */
.demo-frame{
  margin-top:44px;position:relative;aspect-ratio:16/9;
  border:1px solid rgba(212,175,55,.28);border-radius:6px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%, rgba(122,15,78,.28), #0c0710 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.9);
}
.demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.demo-grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);background-size:4px 4px;opacity:.6}
.demo-play{
  position:relative;width:78px;height:78px;border-radius:50%;
  border:1px solid rgba(212,175,55,.6);display:flex;align-items:center;justify-content:center;
  background:rgba(212,175,55,.08);
}
.tri{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:24px solid var(--gold);margin-left:6px}
.demo-caption{position:relative;text-align:center}
.demo-caption-title{font-family:var(--display);letter-spacing:.24em;font-size:14px;color:#e9dfe4;text-transform:uppercase;margin-bottom:8px}

/* ---------- NOVEL: landing ---------- */
.novel-top{
  padding-top:80px;padding-bottom:20px;
  display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:50px;align-items:start;
}
.novel-aside{position:sticky;top:96px}
.novel-cover{
  aspect-ratio:2/3;border:1px solid rgba(212,175,55,.3);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;
  background:repeating-linear-gradient(135deg,#170b13,#170b13 11px,#110810 11px,#110810 22px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.novel-cover-title{font-family:var(--display);letter-spacing:.22em;color:#e9dfe4;font-size:17px}
.novel-h1{font-family:var(--display);font-weight:700;font-size:clamp(44px,7vw,76px);margin:12px 0 0;color:var(--head);letter-spacing:.02em}
.novel-meta{margin-top:10px;font-size:18px;color:var(--ink-mute);font-style:italic}
.pullquote{
  margin:26px 0 0;font-size:20px;color:var(--ink-2);font-style:italic;
  border-left:2px solid var(--tyrian);padding-left:20px;
}
.novel-blurb{margin-top:28px;font-size:19px;color:var(--ink-3);line-height:1.75}
.novel-blurb p{margin:0 0 18px}
.novel-blurb p:last-child{margin-bottom:0}
.tag-row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.tag{
  font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid rgba(212,175,55,.24);padding:8px 14px;border-radius:2px;
}

/* chapter list */
.novel-chapters{margin-top:60px;padding-bottom:90px}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid rgba(212,175,55,.16);padding-bottom:14px;margin-bottom:22px;
}
.section-title{font-family:var(--display);font-weight:600;font-size:24px;margin:0;color:var(--head-2)}
.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.chapter{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid rgba(212,175,55,.12);border-radius:3px;background:var(--panel-solid);
  text-decoration:none;transition:border-color .2s,transform .2s;
}
a.chapter:hover{border-color:rgba(212,175,55,.4);transform:translateY(-2px)}
.chapter-num{font-family:var(--display);font-size:20px;color:var(--gold);min-width:34px}
.chapter-name{flex:1;font-size:15px;color:var(--ink-3)}
.chapter-tag{font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.chapter-tag.read{color:var(--gold)}
.chapter-tag.soon{color:var(--ink-faint)}
.chapter.locked{opacity:.65;cursor:default}

/* ---------- NOVEL: reader ---------- */
.reader{padding-top:70px;padding-bottom:90px}
.reader-back{
  font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);text-decoration:none;transition:color .2s;
}
.reader-back:hover{color:var(--gold)}
.reader-eyebrow{margin-top:26px;font-family:var(--display);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.reader-title{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,48px);margin:12px 0 0;color:var(--head)}
.reader-rule{margin:26px 0 34px;display:flex;align-items:center;justify-content:center}
.reader-rule span{width:60px;height:1px;background:var(--gold);position:relative}
.reader-rule span::before,.reader-rule span::after{content:"";position:absolute;top:50%;width:5px;height:5px;background:var(--gold);border-radius:50%;transform:translateY(-50%)}
.reader-rule span::before{left:-12px}
.reader-rule span::after{right:-12px}
.reader-body{font-size:20px;line-height:1.85;color:var(--ink-2)}
.reader-body p{margin:0 0 22px}
.reader-body p:first-child::first-letter{
  font-family:var(--display);font-size:64px;line-height:.8;float:left;
  padding:6px 12px 0 0;color:var(--gold);
}
.reader-body h2,.reader-body h3{font-family:var(--display);color:var(--head-2);margin:40px 0 16px}
.reader-body em{color:var(--ink)}
.reader-body hr{border:0;height:1px;background:rgba(212,175,55,.18);margin:34px auto;width:120px}
.reader-nav{
  margin-top:50px;padding-top:26px;border-top:1px solid rgba(212,175,55,.16);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.reader-nav a{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-3);transition:color .2s}
.reader-nav a:hover{color:var(--gold)}
.reader-discuss{color:var(--gold)!important}
.reader-nav a.disabled{opacity:.3;pointer-events:none}

/* ---------- COMMUNITY / comments ---------- */
.comments{margin-top:36px;min-height:120px}
.comments-fallback{
  text-align:center;padding:50px 24px;border:1px dashed rgba(212,175,55,.18);border-radius:5px;
}
.comments-fallback svg{opacity:.5;margin-bottom:12px}
.fallback-title{margin:0;color:var(--ink);font-size:20px;font-family:var(--display);letter-spacing:.04em}
.fallback-sub{margin:12px auto 0;max-width:520px;color:var(--ink-mute);font-style:italic}
.fallback-sub code{font-family:var(--mono);font-style:normal;color:var(--gold);font-size:.9em}

/* ---------- FOOTER ---------- */
.footer{position:relative;z-index:1;border-top:1px solid rgba(212,175,55,.14);padding:44px 0;margin-top:20px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-name{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:#e9dfe4;text-transform:uppercase}
.footer-url{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.footer-copy{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}

/* ---------- animations ---------- */
@keyframes bfwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bfwGlow{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes bfwFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,6,8,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(212,175,55,.16);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav-links.open{max-height:340px}
  .nav-links a{padding:16px 34px;border-top:1px solid rgba(212,175,55,.08)}
  .nav-links a.active::after{left:34px;right:auto;width:20px}

  .novel-top{grid-template-columns:1fr;gap:34px}
  .novel-aside{position:static;max-width:280px}
  .reader-body{font-size:18px}
  .reader-nav{gap:12px}
  .reader-discuss{order:3;width:100%;text-align:center}
}

@media (max-width:520px){
  body{font-size:17px}
  .wrap{padding-left:22px;padding-right:22px}
  .nav{padding:14px 22px}
  .btn{padding:14px 22px;width:100%}
  .btn-row{flex-direction:column}
  .hero{min-height:78vh}
}