:root{
  --bg:#08121b;
  --bg2:#0d1722;
  --panel:rgba(255,255,255,.05);
  --panel-soft:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.11);
  --text:#f4f7fb;
  --muted:#c7d0db;
  --blue:#77d9ff;
  --blue2:#b7efff;
  --red:#ff4150;
  --red2:#ff6e79;
  --green:#95e8a7;
  --gold:#ffe58d;
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --radius:26px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at top, rgba(119,217,255,.08), transparent 18%),
    linear-gradient(180deg,#061019,#0a131d 45%, #08111a 100%);
}
body.wtf-page{
  background:
    radial-gradient(circle at top, rgba(255,65,80,.09), transparent 18%),
    linear-gradient(180deg,#050507,#090a0d 52%, #080b0f 100%);
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max), calc(100% - 2rem));margin:0 auto}

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(6,14,22,.58);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand img{height:40px;width:auto}
.nav-links{display:flex;gap:1rem;flex-wrap:wrap}
.nav-links a{font-size:.95rem;color:var(--muted)}
.nav-links a:hover{color:#fff}

.hero{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.hero.publisher{
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.10) 34%, rgba(0,0,0,.20) 64%, rgba(0,0,0,.54) 100%),
    url('../img/hero-underwater.jpg') center/cover no-repeat;
}
.hero.elijah{
  background:
    linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.26) 68%, rgba(0,0,0,.62) 100%),
    url('../img/hero-underwater.jpg') center/cover no-repeat;
  min-height:92svh;
}
.hero.wtf{
  min-height:88svh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.56)),
    radial-gradient(circle at top, rgba(255,65,80,.12), transparent 22%),
    #050507;
}
.logo-hero{
  display:block;
  width:64px;
  margin:1.8rem auto 0;
  opacity:.75;
}
.hero-content{
  position:relative;z-index:2;
  text-align:center;
  max-width:960px;
  padding:5rem 0 3rem;
}
.eyebrow{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.19em;
  font-weight:800;
  font-size:.79rem;
  margin-bottom:1rem;
}
h1,h2,h3{margin:0 0 1rem;line-height:1.04}
h1{font-size:clamp(3.3rem, 8vw, 6.4rem);letter-spacing:-.05em}
h2{font-size:clamp(2.1rem, 4.4vw, 3.55rem);letter-spacing:-.03em}
h3{font-size:clamp(1.2rem,2vw,1.65rem)}
.lead{
  font-size:clamp(1.08rem,1.7vw,1.35rem);
  line-height:1.65;
  color:#edf6ff;
  margin:0 auto;
  max-width:920px;
}
.section{padding:5.4rem 0}
.section.tight{padding:3.8rem 0}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel-soft));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pad{padding:1.45rem}
.kicker{
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:800;
  font-size:.78rem;
  margin-bottom:.75rem;
}
.muted{color:var(--muted)}
.quote{
  border-left:3px solid var(--blue);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:1rem 1.15rem;
}
.btns{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.9rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 1.28rem;
  border-radius:999px;
  font-weight:800;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.btn.blue{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#051019;border-color:transparent}
.btn.red{background:linear-gradient(135deg,var(--red2),var(--red));color:#fff;border-color:transparent}
.btn.green{background:linear-gradient(135deg,#6ee88a,#95e8a7);color:#041a0a;border-color:transparent}
.btn.purple{background:linear-gradient(135deg,#c084fc,#a855f7);color:#fff;border-color:transparent}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn.gray{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.tagline{margin-top:1rem;color:#d8e4f6;opacity:.85}

.grid{display:grid;gap:1.4rem}
.grid.two{grid-template-columns:1.02fr .98fr}
.grid.books{grid-template-columns:1fr 1fr}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){
  .grid.two,.grid.books,.grid.four{grid-template-columns:1fr}
  .logo-hero{width:52px;margin-top:1.4rem}
  .nav-links{gap:.75rem}
}
.book-card{display:grid;grid-template-columns:190px 1fr;gap:1rem;align-items:center}
.book-thumb{border-radius:18px;overflow:hidden;background:#09131d;box-shadow:var(--shadow)}
.book-thumb.trade{aspect-ratio:.675/1}
.book-thumb.square{aspect-ratio:1/1}
.book-thumb img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.book-card{grid-template-columns:1fr}}

.cover-compare{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.cover-box{padding:1rem;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:22px}
.cover-frame{
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
  background:#08111a;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
}
.cover-frame.trade{aspect-ratio:.675/1}
.cover-frame.square{aspect-ratio:1/1}
@media (max-width:860px){.cover-compare{grid-template-columns:1fr}}

.gallery-tile{
  border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:#08111a;box-shadow:var(--shadow);
}
.gallery-tile img.fullspread{
  width:100%;height:auto;object-fit:contain;background:#08111a;
}
.gallery-tile img.cropped{
  width:100%;height:100%;object-fit:cover;min-height:300px;
}
.caption{padding:.85rem 1rem 1rem;color:#eef4fb;font-weight:700}

.wtf-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:2rem;align-items:center}
@media (max-width:980px){.wtf-grid{grid-template-columns:1fr}}
.wtf-cover{
  max-width:390px;margin-inline:auto;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45)
}
.author-wrap{
  background:
    radial-gradient(circle at top left, rgba(119,217,255,.08), transparent 18%),
    linear-gradient(180deg,#07111a,#0b1420);
}
.author-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:2rem;align-items:center}
@media (max-width:980px){.author-grid{grid-template-columns:1fr}}
.author-photo{border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.stat{padding:1rem;text-align:center;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03)}
.stat .num{font-size:1.8rem;font-weight:900}
@media (max-width:760px){.stats{grid-template-columns:1fr}}

.footer{padding:2rem 0 3rem;border-top:1px solid var(--line);background:#060d14}
.footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1.3rem}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr}}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:.35rem 0;color:var(--muted)}
.small{font-size:.92rem}
.center{text-align:center}

/* Latest News / spotlight section */
.news-spotlight{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:center}
.news-cover{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#08111a}
.news-cover img{width:100%;height:auto;display:block}
.news-badge{
  display:inline-block;
  background:linear-gradient(135deg,#6ee88a,#95e8a7);
  color:#041a0a;
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.35rem .85rem;
  border-radius:999px;
  margin-bottom:.9rem;
}
@media (max-width:760px){.news-spotlight{grid-template-columns:1fr;text-align:center}.news-badge{margin-inline:auto}}

/* Awareness Series grid */
.series-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.series-card{
  display:grid;grid-template-columns:140px 1fr;gap:1.1rem;align-items:start;
  background:linear-gradient(180deg,var(--panel),var(--panel-soft));
  border:1px solid var(--line);border-radius:22px;padding:1.2rem;
  box-shadow:var(--shadow);
}
.series-cover{border-radius:14px;overflow:hidden;background:#08111a;box-shadow:var(--shadow)}
.series-cover img{width:100%;height:auto;display:block}
.series-vol{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.series-subtitle{font-style:italic;color:var(--muted);font-size:.93rem;margin:.2rem 0 .6rem}
@media (max-width:860px){.series-grid{grid-template-columns:1fr}}
@media (max-width:600px){.series-card{grid-template-columns:1fr}}

/* Awareness intro rich-text */
.awareness-intro h3{font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--blue2);margin:1.8rem 0 .5rem}
.awareness-intro strong{color:var(--text)}
.awareness-intro em{color:var(--gold)}
.awareness-intro p{color:var(--muted);line-height:1.7;margin:.5rem 0 1rem}