/* ============================================================
   THE CORRUPTED PARADISE CHRONICLES — C.J. Speaks
   Design system: warm void black + molten ember
   ============================================================ */

:root {
  /* ---- Palette (pulled from the cover art) ---- */
  --void:    #0a0807;   /* warm near-black page */
  --char:    #110d0b;   /* raised surface */
  --ash:     #1a1512;   /* card surface */
  --ash-2:   #241c17;   /* hover / border-light */
  --ember:   #ff5a1f;   /* primary fire-orange (title lettering) */
  --ember-2: #ff7338;   /* lighter ember */
  --gold:    #ffae3d;   /* hot spark highlight */
  --blood:   #8c1c10;   /* deep oxblood */
  --bone:    #e9e3d8;   /* off-white text (author name) */
  --smoke:   #a3978c;   /* muted body / captions */
  --smoke-d: #6f655c;   /* dimmer caption */

  /* ---- Type ---- */
  --display: "Cinzel", "Times New Roman", serif;
  --lead:    "Cormorant Garamond", Georgia, serif;
  --body:    "EB Garamond", Georgia, serif;

  /* ---- Metrics ---- */
  --maxw: 1140px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------- Reset ---------------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.2rem);
  line-height: 1.75;
  letter-spacing: .005em;
  overflow-x: hidden;
  /* faint ember vignette + grain-free smoke at the edges */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,90,31,.10), transparent 55%),
    radial-gradient(90% 60% at 100% 105%, rgba(140,28,16,.16), transparent 60%);
  background-attachment: fixed;
}

/* ---------------- Shared layout ---------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }

.eyebrow {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1.25rem;
  padding-left: .42em; /* offset the tracking */
}

h1,h2,h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; color: var(--bone); }
h2.section-title { font-size: clamp(2rem, 4.5vw, 3.4rem); letter-spacing: .01em; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: .02em; }

.lead {
  font-family: var(--lead);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.5;
  color: var(--smoke);
  font-weight: 400;
}
.lead em { color: var(--bone); font-style: italic; }

p + p { margin-top: 1.1rem; }

/* molten text — the signature treatment */
.molten {
  background: linear-gradient(176deg, var(--gold) 4%, var(--ember-2) 38%, var(--ember) 60%, var(--blood) 105%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 38px rgba(255,90,31,.28);
}

/* thin glowing divider — the "fire seam" */
.seam {
  width: 1px; height: clamp(48px, 7vw, 96px);
  margin: 0 auto;
  background: linear-gradient(var(--ember), transparent);
  box-shadow: 0 0 14px 1px rgba(255,90,31,.5);
}
.rule {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ash-2) 18%, var(--ash-2) 82%, transparent);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  padding: .95em 1.8em; border-radius: var(--radius);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  border: 1px solid transparent;
}
.btn--ember {
  color: #1a0c05;
  background: linear-gradient(180deg, var(--gold), var(--ember));
  box-shadow: 0 0 0 rgba(255,90,31,0), 0 8px 30px -10px rgba(255,90,31,.7);
}
.btn--ember:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(255,90,31,.45), 0 12px 34px -10px rgba(255,90,31,.8); }
.btn--ghost {
  color: var(--bone);
  border-color: var(--ash-2);
  background: rgba(255,255,255,.01);
}
.btn--ghost:hover { border-color: var(--ember); color: var(--ember-2); transform: translateY(-2px); }

/* ---------------- Header / Nav ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,8,7,.92), rgba(10,8,7,.55) 70%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand {
  font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--bone);
}
.brand span { color: var(--ember); }
.nav-links { display: flex; align-items: center; gap: 2.1rem; list-style: none; }
.nav-links a {
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--smoke);
  position: relative; padding-block: .4rem;
  transition: color .25s var(--ease);
}
.nav-links a::after {
  content:""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--ember); transition: width .3s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--bone); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--ember-2); }

.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--ash-2); border-radius: var(--radius); background: transparent; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content:""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 18px; height: 1.5px; background: var(--bone); transition: .3s var(--ease);
}
.nav-toggle span::before { transform: translate(-50%,-7px); }
.nav-toggle span::after  { transform: translate(-50%, 5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translate(-50%,-1px) rotate(45deg); background: var(--ember); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translate(-50%,-1px) rotate(-45deg); background: var(--ember); }

/* ---------------- Hero ---------------- */
.hero { min-height: 86vh; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; }
.ember-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; }
.hero-series {
  font-family: var(--display); font-size: clamp(.7rem,1.6vw,.9rem);
  letter-spacing: .48em; text-transform: uppercase; color: var(--ember);
  margin-bottom: 1.6rem; padding-left: .48em;
}
.hero-title {
  font-size: clamp(2.8rem, 9vw, 7rem);
  letter-spacing: .02em; line-height: .98;
  margin-bottom: 1.4rem;
}
.hero-sub {
  font-family: var(--lead); font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  color: var(--smoke); max-width: 30ch; margin: 0 auto 2.6rem;
}
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--display); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--smoke-d); display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.scroll-hint::after { content:""; width: 1px; height: 34px; background: linear-gradient(var(--smoke-d), transparent); animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0%{transform:scaleY(0);transform-origin:top;opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);transform-origin:top;opacity:0} }

/* ---------------- Intro strip ---------------- */
.intro { text-align: center; }
.intro .lead { max-width: 46ch; margin-inline: auto; }

/* ---------------- Book rows (series) ---------------- */
.book {
  display: grid; grid-template-columns: minmax(0,300px) 1fr; gap: clamp(2rem,5vw,4.5rem);
  align-items: start; padding-block: clamp(3rem,6vw,5rem);
}
.book-cover { /* top-aligned with the text column */ }
.book + .book { border-top: 1px solid rgba(255,255,255,.05); }
/* alternate sides: even rows put the cover on the right, text on the left */
.book:nth-child(even) { grid-template-columns: 1fr minmax(0,300px); }
.book:nth-child(even) .book-cover { order: 2; }
.book:nth-child(even) .book-body  { order: 1; }

.book-cover {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 2/3; background: var(--char);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover::after { /* ember edge glow */
  content:""; position: absolute; inset: 0; border-radius: var(--radius);
  box-shadow: inset 0 0 60px -20px rgba(255,90,31,.5); opacity: 0; transition: opacity .5s var(--ease);
}
.book:hover .book-cover { transform: translateY(-6px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.95), 0 0 40px -10px rgba(255,90,31,.35); }
.book:hover .book-cover::after { opacity: 1; }

/* "coming soon" placeholder cover */
.cover-soon {
  display: grid; place-content: center; text-align: center; gap: .8rem;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(255,90,31,.10), transparent 70%),
    linear-gradient(160deg, #15100d, #0b0807);
  border: 1px solid rgba(255,90,31,.14);
}
.cover-soon .cs-mark { font-family: var(--display); font-size: 2.6rem; color: var(--ash-2); }
.cover-soon .cs-label { font-family: var(--display); font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ember); }

.book-num { font-family: var(--display); font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--smoke-d); margin-bottom: .8rem; }
.book-title { font-size: clamp(2rem,4.5vw,3.1rem); margin-bottom: 1.4rem; }
.book-blurb { color: var(--smoke); }
.book-blurb p { margin-top: .9rem; }
.book-blurb p:first-child { margin-top: 0; }
.book-blurb .punch { font-family: var(--lead); font-style: italic; font-size: 1.25em; color: var(--bone); line-height: 1.4; }
.book-status {
  display: inline-block; margin-top: 1.6rem; font-family: var(--display);
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ember);
  border: 1px solid rgba(255,90,31,.3); padding: .5em 1.1em; border-radius: var(--radius);
}

/* ---------------- About ---------------- */
.about-grid { display: grid; grid-template-columns: minmax(0,340px) 1fr; gap: clamp(2.5rem,6vw,5rem); align-items: start; }
.author-photo {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(255,90,31,.08), transparent 70%),
    linear-gradient(160deg,#15100d,#0b0807);
  border: 1px solid rgba(255,90,31,.16);
  display: grid; place-content: center; text-align: center; gap: .9rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}
.author-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.author-photo .ph-mark { font-family: var(--display); font-size: 2.4rem; color: var(--ash-2); }
.author-photo .ph-label { font-family: var(--display); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--smoke-d); padding-inline:1.5rem;}
.about-body .lead { margin-bottom: 1.6rem; }
.about-body p { color: var(--smoke); }
.signature { font-family: var(--lead); font-style: italic; font-size: 1.8rem; color: var(--ember-2); margin-top: 2rem; }

/* ---------------- Contact / newsletter ---------------- */
.panel {
  background: linear-gradient(160deg, var(--ash), var(--char));
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,2.5rem); }
.contact-card .k { font-family: var(--display); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--smoke-d); margin-bottom: .7rem; }
.contact-card .v { font-family: var(--lead); font-size: 1.5rem; }
.contact-card a.v { color: var(--ember-2); transition: color .25s var(--ease); border-bottom: 1px solid transparent; }
.contact-card a.v:hover { color: var(--gold); border-color: var(--gold); }

/* social links */
.socials { display: flex; gap: 1rem; flex-wrap: wrap; }
.social {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--smoke);
  padding: .7em 1.2em; border: 1px solid var(--ash-2); border-radius: var(--radius);
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.social svg { color: var(--ember); transition: color .25s var(--ease); }
.social:hover {
  color: var(--bone); border-color: var(--ember);
  transform: translateY(-2px); box-shadow: 0 0 22px -6px rgba(255,90,31,.5);
}
.social:hover svg { color: var(--gold); }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--display); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--smoke); margin-bottom: .5rem; }
.field input {
  width: 100%; background: var(--void); color: var(--bone);
  border: 1px solid var(--ash-2); border-radius: var(--radius);
  padding: .9em 1em; font-family: var(--body); font-size: 1rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder { color: var(--smoke-d); }
.field input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,90,31,.14); }
.form-note { font-size: .9rem; color: var(--smoke-d); margin-top: 1rem; font-family: var(--body); }
.form-msg { margin-top: 1rem; font-family: var(--lead); font-style: italic; font-size: 1.2rem; min-height: 1.4em; }
.form-msg.ok { color: var(--ember-2); }
.form-msg.err { color: #ff8a6a; }

/* ---------------- Trigger warnings ---------------- */
.warn-hero { text-align: center; max-width: 60ch; margin-inline: auto; }
.warn-hero .lead em { color: var(--ember-2); }
.warn-list { list-style: none; display: grid; gap: .9rem; max-width: 52rem; margin: 2.5rem auto 0; }
.warn-list li {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--ash); border: 1px solid rgba(255,255,255,.04);
  border-left: 2px solid var(--blood);
  padding: 1rem 1.3rem; border-radius: var(--radius); color: var(--smoke);
}
.warn-list li::before { content:"†"; color: var(--ember); font-size: 1.1rem; line-height: 1.6; }
.warn-callout {
  max-width: 56ch; margin: 3rem auto 0; text-align: center;
  font-family: var(--lead); font-style: italic; font-size: clamp(1.3rem,2.6vw,1.7rem);
  line-height: 1.5; color: var(--bone);
}
.warn-callout span { color: var(--ember-2); }
.warn-meta { text-align: center; color: var(--smoke-d); margin-top: 2.5rem; font-size: .95rem; }

/* ---------------- Footer ---------------- */
.site-footer { border-top: 1px solid rgba(255,255,255,.05); padding-block: 3.5rem; margin-top: 2rem; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.footer-brand { font-family: var(--display); letter-spacing: .24em; text-transform: uppercase; font-size: .9rem; }
.footer-brand span { color: var(--ember); }
.footer-links { display: flex; gap: 1.6rem; list-style: none; flex-wrap: wrap; }
.footer-links a { font-family: var(--display); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--smoke); transition: color .25s var(--ease); }
.footer-links a:hover { color: var(--ember-2); }
.footer-fine { color: var(--smoke-d); font-size: .82rem; margin-top: 1.4rem; }

/* ---------------- Reveal on scroll ---------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------------- Page intro (inner pages) ---------------- */
.page-head { padding-block: clamp(3.5rem,7vw,6rem) clamp(1rem,2vw,2rem); text-align: center; }
.page-head h1 { font-size: clamp(2.4rem,6vw,4.2rem); letter-spacing: .02em; }
.page-head .lead { max-width: 48ch; margin: 1.4rem auto 0; }

/* ---------------- Responsive ---------------- */
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(8,6,5,.98); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: .5rem 0; transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: .3s var(--ease);
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { display: block; width: 100%; padding: 1.1rem var(--gutter); font-size: .9rem; }
  .nav-links a::after { display: none; }

  .book, .book:nth-child(even) { grid-template-columns: 1fr; gap: 2rem; max-width: 30rem; margin-inline: auto; }
  .book:nth-child(even) .book-cover { order: 0; }
  .book:nth-child(even) .book-body { order: 0; }
  .book-cover { max-width: 280px; margin-inline: auto; position: static; }
  .about-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .author-photo { max-width: 300px; margin-inline: auto; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   IMMERSIVE FLARE — kept quiet; boldness spent on the covers
   (Angel Blades, molten fire) — interaction-driven, not ambient
   ============================================================ */

/* ---- Living molten text: a slow, gentle breath (not a strobe) ---- */
.molten {
  background-size: 100% 200%;
  animation: molten-flicker 9s ease-in-out infinite;
}
@keyframes molten-flicker {
  0%, 100% { background-position: 50% 0%;  filter: brightness(1);    text-shadow: 0 0 38px rgba(255,90,31,.28); }
  50%      { background-position: 50% 22%; filter: brightness(1.06); text-shadow: 0 0 46px rgba(255,90,31,.36); }
}

/* ---- Book covers: Angel-Blade glint sweep on hover (the one bold beat) ---- */
.book-cover::before { /* steel glint that sweeps across on hover */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.16) 47%, rgba(255,214,150,.5) 50%, rgba(255,255,255,.16) 53%, transparent 68%);
  transform: translateX(-130%); opacity: 0;
  transition: transform .7s var(--ease), opacity .3s var(--ease);
}
.book:hover .book-cover::before { transform: translateX(130%); opacity: 1; }

/* used by the spark-tipped fire seam below */
@keyframes spark-pulse { 0%,100% { opacity: .75; transform: translateX(-50%) rotate(45deg) scale(1); } 50% { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1.3); } }

/* ---- Drop cap: first line after a punch reads like a grimoire ---- */
.book-blurb p.punch + p::first-letter {
  font-family: var(--display); font-weight: 700;
  font-size: 3.1em; line-height: .72; float: left;
  margin: .04em .12em 0 0; color: var(--ember-2);
  text-shadow: 0 0 20px rgba(255,90,31,.35);
}

/* ---- Spark-tipped fire seam ---- */
.seam { position: relative; }
.seam::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 10px 2px rgba(255,174,61,.8), 0 0 22px 6px rgba(255,90,31,.5);
  animation: spark-pulse 2.2s ease-in-out infinite;
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ember-canvas { display: none; }
}