/* ============================================================
   Hollow Echoes — the world of C.T. Rook
   "Ember Ledger" system: indigo-charcoal + ember gold + cold silver
   ============================================================ */

:root{
  --bg:        #0a0d1a;
  --bg-2:      #12142a;
  --bg-panel:  #12152640;
  --ink:       #e9eaf3;
  --muted:     #9aa0bc;
  --silver:    #c9cfe0;
  --silver-dim:#8f97b4;

  --gold-lt:   #f8e6c0;
  --gold:      #e0ae6a;
  --gold-deep: #cf7f38;
  --teal:      #6fc7b0;   /* the Vellum Market accent (the bottled-word green) */
  --line:      rgba(214,184,132,.18);
  --line-soft: rgba(214,184,132,.10);

  --serif:  "Gloock", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:   "EB Garamond", Georgia, "Times New Roman", serif;
  --label:  "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;

  --maxw: 1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #1a1c38 0%, rgba(26,28,56,0) 55%),
    linear-gradient(180deg, #0a0d1a 0%, #0c0f1f 40%, #090b16 100%);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* faint star specks over the whole page, like the author graphic */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 40% 62%, rgba(255,255,255,.20), transparent),
    radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,.22), transparent),
    radial-gradient(1px 1px at 24% 84%, rgba(255,255,255,.18), transparent),
    radial-gradient(1px 1px at 62% 38%, rgba(255,255,255,.16), transparent);
  opacity:.7;
}

a{ color:var(--gold); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--gold-lt); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.82rem;
  font-weight:600;
  color:var(--gold);
  margin:0 0 .9rem;
}
.gold-text{
  background:linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.08; margin:0; }

.rule{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:0 auto 2.6rem; max-width:340px;
}
.rule::before,.rule::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.rule .dot{ width:6px; height:6px; border:1px solid var(--gold); border-radius:50%; transform:rotate(45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:120px 24px 90px;
  overflow:hidden;
}
/* blank coin motif — concentric rings + reeded rim, faint, centered behind the wordmark */
.coin{
  position:absolute; top:48%; left:50%;
  width:min(78vw, 620px); aspect-ratio:1; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; opacity:.55;
}
.coin::before,.coin::after{
  content:""; position:absolute; inset:0; border-radius:50%;
}
.coin::before{
  background:
    radial-gradient(circle at 50% 42%, rgba(224,174,106,.05) 0%, transparent 62%),
    radial-gradient(circle, transparent 66%, rgba(214,184,132,.09) 66.5%, transparent 68%);
  box-shadow:
    inset 0 0 0 1px rgba(214,184,132,.10),
    inset 0 0 120px rgba(20,24,44,.9);
}
/* reeded rim = dashed conic ticks */
.coin::after{
  inset:4%;
  background:repeating-conic-gradient(from 0deg,
      rgba(214,184,132,.16) 0deg .5deg, transparent .5deg 3deg);
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%);
          mask:radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%);
  animation:spin 240s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-inner{ position:relative; z-index:2; }
.hero .eyebrow{
  font-size:clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing:.34em;
  animation:rise .9s ease both;
}
.hero h1{
  font-size:clamp(3.4rem, 12vw, 8.2rem);
  letter-spacing:.02em;
  margin:.1em 0 .28em;
  animation:rise 1s ease .05s both;
}
.hero .tagline{
  font-family:var(--body);
  font-style:italic;
  font-size:clamp(1.05rem, 2.4vw, 1.5rem);
  color:var(--silver);
  letter-spacing:.01em;
  margin:0 auto;
  max-width:30ch;
  animation:rise 1s ease .12s both;
}
.hero .scroll-cue{
  margin-top:3.4rem;
  font-family:var(--label); text-transform:uppercase; letter-spacing:.3em;
  font-size:clamp(.92rem, 1.7vw, 1.15rem); color:var(--muted);
  animation:rise 1s ease .2s both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

/* ============================================================
   SECTIONS
   ============================================================ */
section{ position:relative; padding:88px 0; }
.section-head{ text-align:center; margin-bottom:3.2rem; }
.section-head h2{ font-size:clamp(2rem,5vw,3rem); }
.section-head p{ color:var(--muted); max-width:56ch; margin:.9rem auto 0; }

.divider{ height:1px; max-width:var(--maxw); margin:0 auto;
  background:linear-gradient(90deg, transparent, var(--line-soft), transparent); }

/* ---------- intro / the world ---------- */
.intro{ text-align:center; }
.intro .lede{
  font-size:clamp(1.25rem,2.8vw,1.7rem);
  line-height:1.55; color:var(--ink);
  max-width:38ch; margin:0 auto;
}
.intro .lede em{ color:var(--gold); font-style:normal; }

/* ---------- books ---------- */
.books{ display:flex; flex-direction:column; gap:64px; }
.book{
  display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:center;
}
.book:nth-child(even){ grid-template-columns:1fr 300px; }
.book:nth-child(even) .book-cover{ order:2; }

.book-cover{
  position:relative; border-radius:6px; overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(214,184,132,.10);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.book-cover img{ display:block; width:100%; height:auto; }
.book-cover:hover{
  transform:translateY(-6px);
  box-shadow:0 34px 72px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(214,184,132,.28);
}

.book-body .book-tag{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.34em;
  font-size:.8rem; color:var(--gold); margin:0 0 .5rem;
}
.book-body h3{ font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:.5rem; }
.book-body .hook{
  font-family:var(--body); font-style:italic; font-size:1.16rem;
  color:var(--silver); margin:0 0 1.1rem;
}
.book-body p{ color:var(--muted); margin:0 0 1.5rem; max-width:52ch; }
.book-body p .ink{ color:var(--ink); }

.badge{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--label); text-transform:uppercase; letter-spacing:.18em;
  font-size:.82rem; font-weight:600;
  color:var(--gold-lt);
  padding:.7em 1.4em; border-radius:2px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(224,174,106,.10), rgba(224,174,106,.02));
}
.badge::before{ content:"◆"; font-size:.7em; color:var(--gold); }

/* Book 1 — live buy link: interactive, brighter, lifts on hover */
a.badge-link{
  color:var(--gold-lt);
  background:linear-gradient(180deg, rgba(224,174,106,.18), rgba(224,174,106,.05));
  border-color:rgba(214,184,132,.34);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
a.badge-link:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  box-shadow:0 10px 26px -12px rgba(224,174,106,.5);
  background:linear-gradient(180deg, rgba(224,174,106,.26), rgba(224,174,106,.08));
}
a.badge-link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Book 2 — not yet live: muted, dashed, non-interactive */
.badge-soon{
  color:var(--muted);
  border-style:dashed;
  border-color:var(--line-soft);
  background:none;
}
.badge-soon::before{ content:"◇"; color:var(--muted); }

/* Book Three teaser */
.book-three{
  text-align:center; border:1px solid var(--line-soft); border-radius:8px;
  padding:52px 32px; margin-top:16px;
  background:radial-gradient(120% 140% at 50% 0%, rgba(224,174,106,.05), transparent 70%);
}
.book-three .eyebrow{ text-align:center; }
.book-three h3{ font-size:clamp(1.6rem,3.6vw,2.3rem); margin-bottom:.5rem; }
.book-three p{ color:var(--muted); max-width:46ch; margin:.4rem auto 0; }

/* ---------- the vellum market (spin-off serial) ---------- */
.vellum{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(79,184,160,.06), transparent 60%),
    linear-gradient(180deg, transparent, rgba(14,30,30,.35), transparent);
}
.vellum .section-head h2{ letter-spacing:.01em; }
.vellum-tag{ color:var(--teal) !important; }
.book-cover.vellum-cover{
  box-shadow:0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(79,184,160,.16);
}
.book-cover.vellum-cover:hover{
  box-shadow:0 34px 72px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(79,184,160,.4),
             0 0 40px -8px rgba(79,184,160,.28);
}

/* ---------- about ---------- */
.about{ background:linear-gradient(180deg, transparent, rgba(18,20,42,.5), transparent); }
.about-grid{
  display:grid; grid-template-columns:360px 1fr; gap:56px; align-items:center;
}
.about-mark{
  border-radius:10px; overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(214,184,132,.12);
}
.about-mark img{ display:block; width:100%; height:auto; }
.about-body h2{ font-size:clamp(2rem,4.6vw,2.9rem); margin-bottom:1.2rem; }
.about-body p{ margin:0 0 1.15rem; color:var(--ink); }
.about-body p.dim{ color:var(--muted); }
.about-body .signature{
  font-family:var(--serif); font-size:1.8rem; color:var(--gold);
  margin-top:1.6rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  text-align:center; padding:64px 24px 56px;
  border-top:1px solid var(--line-soft);
  margin-top:40px;
}
footer .foot-mark{
  font-family:var(--serif); font-size:1.5rem; letter-spacing:.04em; margin-bottom:.5rem;
}
footer .foot-line{
  font-family:var(--body); font-style:italic; color:var(--silver-dim);
  max-width:40ch; margin:.4rem auto 1.6rem;
}
footer .foot-meta{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.24em;
  font-size:.74rem; color:var(--muted);
}
footer .foot-meta a{ color:var(--silver); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  body{ font-size:18px; }
  section{ padding:64px 0; }
  .book, .book:nth-child(even){ grid-template-columns:1fr; gap:28px; justify-items:center; text-align:center; }
  .book:nth-child(even) .book-cover{ order:0; }
  .book-cover{ max-width:250px; }
  .book-body p, .book-body .hook{ margin-left:auto; margin-right:auto; }
  .about-grid{ grid-template-columns:1fr; gap:32px; text-align:center; }
  .about-mark{ max-width:300px; margin:0 auto; }
  .about-body .signature{ text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .coin::after{ animation:none; }
  .hero .eyebrow,.hero h1,.hero .tagline,.hero .scroll-cue{ animation:none; }
  html{ scroll-behavior:auto; }
}