/* ============================================================
   CALLI FANG · BLOOD CHRONICLES — Brand Foundation
   Palette + type derived from the cover art.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* — Darks (warm near-black, blood-bank shadow) — */
  --ink:        #0a0807;
  --ink-2:      #110d0b;
  --ink-3:      #1a1411;
  --panel:      #181210;
  --panel-2:    #211915;

  /* — Blood — */
  --oxblood:    #6b1015;
  --oxblood-2:  #4a0c10;
  --blood:      #9c1620;
  --blood-hot:  #c01f2a;   /* the bright drip */
  --blood-glow: #e23b3b;

  /* — Gold (Egyptian regalia) — */
  --gold:       #c39a4e;
  --gold-hi:    #e6cd8a;
  --gold-deep:  #8a6a2f;

  /* — Bone / parchment (text on dark) — */
  --bone:       #ece2d2;
  --bone-soft:  #cfc3b1;
  --bone-dim:   #9a8d7c;
  --bone-faint: #6c6155;

  /* — Weathered silver (the cover title metal) — */
  --silver:     #c5beb2;
  --silver-dim: #8d877d;

  /* — Light reading surface (sepia parchment) — */
  --paper:      #efe7d8;
  --paper-2:    #e4d8c2;
  --paper-ink:  #241c14;
  --paper-dim:  #5b4d3c;

  /* — Type — */
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* — Measure — */
  --maxw: 1180px;
  --read: 38rem;

  /* — Motion — */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
::selection { background: var(--blood); color: var(--bone); }

/* ---------- reusable atoms ---------- */

/* Letterspaced classical caps — the "BLOOD CHRONICLES" treatment */
.kicker {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.74rem;
  color: var(--gold);
}

/* small mono label — diegetic blood-bank stamp */
.stamp {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.66rem;
  color: var(--bone-dim);
}

/* the thin gold rule with a blood node, echoing the cover divider */
.rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}
.rule::before, .rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 40%, var(--gold) 100%);
}
.rule::after { background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 60%, transparent); }
.rule .node {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--blood-hot);
  box-shadow: 0 0 10px 1px rgba(194,31,42,0.6);
  flex: 0 0 auto;
}

/* primary CTA */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 1.05rem 2rem;
  border: none;
  cursor: pointer;
  color: var(--bone);
  background: linear-gradient(180deg, var(--blood) 0%, var(--oxblood) 100%);
  box-shadow: 0 1px 0 rgba(255,200,200,0.18) inset, 0 14px 34px -14px rgba(156,22,32,0.8);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255,200,200,0.25) inset, 0 22px 44px -16px rgba(156,22,32,0.95); }
.btn:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--gold-deep);
  color: var(--gold-hi);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(195,154,78,0.07); filter: none; }

/* film-grain / vignette helpers */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* gilded metallic text (title) */
.metal {
  background: linear-gradient(177deg, #f3ecdd 0%, #b7afa1 22%, #8c857a 48%, #d8cfbd 60%, #6f685e 82%, #b4ab9c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gilt {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

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