/* ===== The Lost Sigil — shared styles ===== */
:root{
  --obsidian:#0c0d10;
  --obsidian-2:#14161b;
  --panel:#181b22;
  --panel-2:#1f232c;
  --border:#2c313c;
  --ink:#e9e3d4;        /* parchment text */
  --ink-dim:#a8a293;
  --ink-faint:#76716a;
  --amber:#d9a441;      /* forge gold */
  --amber-bright:#f0c068;
  --teal:#3fb8b0;       /* shard teal */
  --teal-bright:#5fd8d0;
  --danger:#c2563f;
  --maxw:1140px;
  --radius:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --display:"Cinzel",Georgia,serif;
  --body:"EB Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--obsidian);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.125rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--amber-bright);text-decoration:none}
a:hover{color:var(--teal-bright)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.2;letter-spacing:.02em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.1em}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;font-weight:600;color:var(--teal);margin-bottom:1rem}

.container{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.section{padding:5.5rem 0}
.section--tight{padding:3.5rem 0}
.section--alt{background:var(--obsidian-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.center{text-align:center}
.lead{font-size:1.3rem;color:var(--ink-dim);max-width:60ch}
.center .lead{margin-left:auto;margin-right:auto}

/* ===== Buttons ===== */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:.95rem;
  letter-spacing:.03em;padding:.85rem 1.6rem;border-radius:8px;cursor:pointer;
  border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:linear-gradient(180deg,var(--amber-bright),var(--amber));color:#1a1407;box-shadow:0 6px 18px rgba(217,164,65,.3)}
.btn--primary:hover{color:#1a1407;box-shadow:0 10px 26px rgba(217,164,65,.45)}
.btn--ghost{border-color:var(--border);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal-bright)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap}
.center .btn-row{justify-content:center}

/* ===== Header / nav ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(12,13,16,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:var(--display);font-size:1.15rem;letter-spacing:.12em;color:var(--ink);text-transform:uppercase;font-weight:600}
.brand span{color:var(--amber)}
.nav-links{display:flex;gap:1.8rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--sans);font-size:.9rem;letter-spacing:.05em;color:var(--ink-dim);text-transform:uppercase}
.nav-links a:hover,.nav-links a.active{color:var(--amber-bright)}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.6rem;cursor:pointer;line-height:1}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(63,184,176,.12), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(217,164,65,.12), transparent 60%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center;padding:5rem 0}
.hero-cover{justify-self:center;max-width:360px;border-radius:8px;box-shadow:var(--shadow);border:1px solid var(--border)}
.hero h1{margin-bottom:.3em}
.hero .tagline{font-style:italic;color:var(--teal-bright);font-size:1.35rem;margin-bottom:1.2rem}

/* ===== Cards / grids ===== */
.grid{display:grid;gap:1.6rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.card-body{padding:1.4rem}
.card h3{color:var(--amber-bright)}
.card .role{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--teal);margin-bottom:.6rem}
.char-img{aspect-ratio:3/4;object-fit:cover;object-position:center top;width:100%;background:var(--panel-2)}

/* lore feature blocks */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.feature--rev{direction:rtl}
.feature--rev>*{direction:ltr}
.feature img{border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
.feature + .feature{margin-top:4rem}

.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.swatch{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;background:var(--panel)}
.swatch .dot{width:26px;height:26px;border-radius:50%;margin-bottom:.6rem;border:1px solid rgba(255,255,255,.25)}
.swatch b{font-family:var(--sans);letter-spacing:.04em}
.swatch span{display:block;color:var(--ink-dim);font-size:.95rem}

/* ===== Books ===== */
.book{display:grid;grid-template-columns:280px 1fr;gap:2.5rem;align-items:start;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.book + .book{margin-top:2rem}
.book img{border-radius:6px;box-shadow:var(--shadow)}
.badge{display:inline-block;font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;border:1px solid var(--teal);color:var(--teal);margin-bottom:.8rem}
.badge--soon{border-color:var(--amber);color:var(--amber)}

/* ===== Newsletter ===== */
.newsletter{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);
  border-radius:14px;padding:3rem;text-align:center}
.signup{display:flex;gap:.8rem;max-width:480px;margin:1.4rem auto 0;flex-wrap:wrap}
.signup input{flex:1;min-width:200px;padding:.85rem 1rem;border-radius:8px;border:1px solid var(--border);
  background:var(--obsidian);color:var(--ink);font-family:var(--sans);font-size:1rem}
.signup input:focus{outline:none;border-color:var(--teal)}
.form-note{font-size:.85rem;color:var(--ink-faint);margin-top:.9rem;font-family:var(--sans)}

/* ===== Authors ===== */
.author{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start}
.author .initials{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:1.6rem;color:var(--obsidian);background:linear-gradient(135deg,var(--amber-bright),var(--teal))}

/* ===== Footer ===== */
.site-footer{background:var(--obsidian-2);border-top:1px solid var(--border);padding:3rem 0;margin-top:2rem}
.footer-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
.footer-links{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.footer-links a{font-family:var(--sans);font-size:.85rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em}
.copyright{color:var(--ink-faint);font-family:var(--sans);font-size:.85rem}

/* ===== Responsive ===== */
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--obsidian-2);border-bottom:1px solid var(--border);padding:.5rem 0;
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-links.open{max-height:340px}
  .nav-links li{width:100%;text-align:center}
  .nav-links a{display:block;padding:.9rem}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-cover{order:-1;max-width:280px}
  .hero .btn-row{justify-content:center}
  .feature,.feature--rev{grid-template-columns:1fr;direction:ltr}
  .book{grid-template-columns:1fr;justify-items:center;text-align:center}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .section{padding:3.5rem 0}
  .newsletter{padding:2rem 1.2rem}
}