/* ===========================================================
   A. E. Gündüz — author site
   Immersive theme, palette drawn from the When Fate Suffers cover.
   Cinzel (display) + Literata (body). Deep maroon + gold.
   =========================================================== */

:root {
  --ground:      #240509;
  --ground-2:    #380a10;
  --cream:       #f4e7d3;
  --muted:       #c39a86;
  --gold:        #d8a355;
  --gold-2:      #ecc07a;
  --gold-ink:    #241006;
  --line:        rgba(244, 231, 211, 0.14);
  --line-strong: rgba(244, 231, 211, 0.26);

  --radius:      3px;
  --wrap:        1120px;
  --wrap-narrow: 680px;
  --display:     "Cinzel", Georgia, "Times New Roman", serif;
  --serif:       "Literata", Georgia, "Times New Roman", serif;
  --cover:       url('/assets/img/covers/when-fate-suffers.jpg');
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--ground); color: var(--cream);
  font-family: var(--serif); font-size: 18px; line-height: 1.75;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.15; color: var(--cream); }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.site-main { display: block; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--gold-ink); padding: 10px 16px; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ---------- Labels ---------- */
.section-eyebrow, .hero__eyebrow {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.72rem; font-weight: 600; color: var(--gold); margin: 0 0 16px;
}
.section-heading { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 18px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(36, 5, 9, 0.86); backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 66px; flex-wrap: wrap; }
.site-brand { font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.05em; color: var(--cream); text-decoration: none; white-space: nowrap; }
.site-brand:hover { color: var(--gold-2); }
.site-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 8px 12px; transition: color .15s;
}
.site-nav a:hover { color: var(--gold-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.74rem; font-weight: 600; padding: 15px 28px; border-radius: var(--radius);
  text-decoration: none; border: 1px solid var(--gold); cursor: pointer; transition: .15s;
}
.btn-primary { background: var(--gold); color: var(--gold-ink); }
.btn-primary:hover { background: var(--gold-2); color: var(--gold-ink); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-2); }

.badge {
  display: inline-flex; align-items: center; font-family: var(--display);
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.64rem; color: var(--gold);
  border: 1px solid rgba(216, 163, 85, 0.5); border-radius: 999px; padding: 9px 17px;
}

/* ---------- Hero (immersive, cover-forward) ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 110px) 0 clamp(56px, 9vw, 100px); }
.hero::before {
  content: ""; position: absolute; inset: -10%; z-index: 0;
  background-image: var(--cover); background-size: cover; background-position: center;
  filter: blur(42px) saturate(1.25) brightness(0.5); transform: scale(1.18);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 95% at 72% 30%, rgba(216, 163, 85, 0.13), transparent 55%),
    linear-gradient(180deg, rgba(36, 5, 9, 0.5), rgba(36, 5, 9, 0.82) 70%, var(--ground));
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 6vw, 68px); align-items: center; }
.hero__name { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; margin: 0 0 20px; text-shadow: 0 2px 34px rgba(0,0,0,0.5); }
.hero__lede { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--cream); opacity: 0.9; font-style: italic; max-width: 30ch; margin: 0 0 30px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__cover { justify-self: center; }
.hero__cover img { width: min(340px, 74vw); border-radius: var(--radius); box-shadow: 0 46px 90px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(244,231,211,0.12); }

/* ---------- Featured / book ---------- */
.featured { padding: clamp(56px, 8vw, 96px) 0 clamp(24px, 4vw, 40px); }
.book-list { display: grid; gap: 60px; }
.book-card { display: grid; grid-template-columns: 280px 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; max-width: 940px; margin-inline: auto; background: transparent; border: 0; padding: 0; }
.book-card__cover img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 46px 90px -34px rgba(0,0,0,0.85), 0 0 0 1px rgba(244,231,211,0.1); }
.book-card__series { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem; color: var(--gold); margin: 0 0 10px; }
.book-card__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 3.5vw, 2.7rem); margin: 0 0 6px; }
.book-card__tagline { font-family: var(--serif); font-style: italic; color: var(--muted); margin: 0 0 20px; }
.book-card__blurb { color: var(--cream); opacity: 0.94; margin: 0 0 24px; }
.book-card__blurb p { margin: 0 0 1em; }
.book-card__blurb p:first-child { font-family: var(--display); font-weight: 500; font-size: 1.25rem; line-height: 1.4; color: var(--gold-2); }
.book-card__blurb p:last-child { margin-bottom: 0; }
.book-card__blurb em { font-style: italic; }
.book-card__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- Newsletter (ambient band) ---------- */
.newsletter { position: relative; overflow: hidden; margin: clamp(40px, 6vw, 72px) 0; padding: clamp(56px, 8vw, 100px) 0; }
.newsletter::before {
  content: ""; position: absolute; inset: -10%; z-index: 0;
  background-image: var(--cover); background-size: cover; background-position: center 30%;
  filter: blur(46px) brightness(0.4) saturate(1.2); transform: scale(1.2);
}
.newsletter::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(36, 5, 9, 0.82), rgba(36, 5, 9, 0.92));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.newsletter__inner { position: relative; z-index: 1; max-width: var(--wrap-narrow); margin-inline: auto; text-align: center; }
.newsletter__heading { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 0 0 12px; }
.newsletter__cta { color: var(--cream); opacity: 0.9; max-width: 48ch; margin: 0 auto 26px; }
.newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.newsletter__input { flex: 1 1 200px; min-width: 0; padding: 15px 17px; font: inherit; font-size: 1rem; background: rgba(244,231,211,0.06); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--cream); }
.newsletter__input::placeholder { color: var(--muted); }
.newsletter__input:focus { outline: none; border-color: var(--gold); }
.newsletter__button { flex: 0 0 auto; }
.newsletter__fine { color: var(--muted); font-size: 0.82rem; margin: 16px 0 0; }

/* ---------- About teaser ---------- */
.about-teaser { padding: clamp(40px, 6vw, 80px) 0; }
.about-teaser__inner { max-width: var(--wrap-narrow); margin-inline: auto; }
.about-teaser p { color: var(--cream); opacity: 0.9; font-size: 1.1rem; }
.about-teaser p em { color: var(--gold-2); font-style: italic; }
.text-link { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; color: var(--gold); text-decoration: none; }
.text-link:hover { color: var(--gold-2); text-decoration: underline; }

/* ---------- Generic pages / prose ---------- */
.page { padding: clamp(48px, 7vw, 88px) 0; }
.page__header { margin-bottom: clamp(28px, 4vw, 44px); padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page__title { font-family: var(--display); font-weight: 600; font-size: clamp(2.1rem, 5vw, 3rem); margin: 0 0 8px; }
.page__subtitle { color: var(--muted); font-size: 1.1rem; margin: 0; }
.prose { font-size: 1.08rem; color: var(--cream); }
.prose p { margin: 0 0 1.4em; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--gold); font-weight: 500; }
.prose em { font-style: italic; color: var(--gold-2); }
.prose strong { font-weight: 700; }
.prose h2, .prose h3 { margin: 1.6em 0 0.5em; }
.prose blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 2px solid var(--gold); color: var(--muted); font-style: italic; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.25em; }
.prose li { margin: 0 0 0.4em; }

/* ---------- Links page ---------- */
.links-page { padding: clamp(56px, 9vw, 104px) 0; }
.links-page__inner { text-align: center; max-width: 480px; margin-inline: auto; }
.links-page__avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; border: 1px solid var(--line-strong); }
.links-page__name { font-family: var(--display); font-size: 1.7rem; margin: 0 0 4px; }
.links-page__bio { color: var(--muted); margin: 0 0 32px; }
.link-stack { display: flex; flex-direction: column; gap: 12px; }
.link-button {
  display: flex; align-items: center; gap: 12px; justify-content: center; padding: 16px 20px;
  border-radius: var(--radius); background: var(--ground-2); border: 1px solid var(--line-strong);
  color: var(--cream); text-decoration: none; font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.8rem; transition: .15s;
}
.link-button:hover { border-color: var(--gold); color: var(--gold-2); }
.link-button__emoji { font-size: 1.1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ground); border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 60px) 0; }
.site-footer__inner { text-align: center; }
.social-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 18px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--muted); border: 1px solid var(--line); transition: .15s; }
.social-link:hover { color: var(--gold); border-color: var(--gold); }
.footer-note { color: var(--muted); font-size: 0.82rem; margin: 0; }

/* ---------- Free Resources ---------- */
.resource-list { display: grid; gap: 20px; max-width: 800px; margin-inline: auto; }
.resource-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); }
.resource-card__icon { width: 56px; height: 56px; border-radius: var(--radius); display: grid; place-items: center; font-size: 1.6rem; background: rgba(216,163,85,0.12); border: 1px solid var(--line); }
.resource-card__series { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; color: var(--gold); margin: 0 0 4px; }
.resource-card__title { font-family: var(--display); font-size: 1.4rem; margin: 0 0 10px; }
.resource-card__desc { color: var(--muted); margin: 12px 0 20px; }
.resource-card__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.badge--soft { border-color: var(--line); color: var(--muted); text-transform: none; letter-spacing: 0.02em; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__cover { order: -1; max-width: 260px; }
  .hero__lede { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .book-card { grid-template-columns: 1fr; text-align: center; }
  .book-card__cover { max-width: 240px; margin-inline: auto; }
  .book-card__blurb { text-align: left; }
  .book-card__actions { justify-content: center; }
  .site-header__inner { justify-content: center; }
}
@media (max-width: 560px) { .resource-card { grid-template-columns: 1fr; } }