/* ===========================================================
   Stefanie Santer — Autorenseite
   Design tokens
=========================================================== */
:root{
  --paper:#F8F6F2;
  --card:#FFFFFF;
  --ink:#332F2F;
  --ink-soft:#726C62;
  --accent:#2A2A28;
  --line:#E4DFD0;
  --teal:#2F8C8A;
  --teal-dark:#1F6664;
  --periwinkle:#6E71A6;
  --periwinkle-dark:#4F5280;
  --radius:2px;
  --max:1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body > footer{ margin-top:auto; }
::selection{ background:var(--teal); color:#fff; }

h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  margin:0 0 .5em;
  color:var(--ink);
}
em{ font-style:italic; color:var(--accent); }

a{ color:inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.wrap{ max-width:1200px; width:90%; margin:0 auto; }

.eyebrow{
  font-family:'Montserrat', sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  color:var(--ink-soft);
  display:block;
  margin-bottom:.9rem;
}

/* ---------- HEADER / NAV ---------- */
header{
  position:sticky; top:0; z-index:30;
  background:#FFFFFF;
}
.nav-inner{
  display:flex; align-items:center; justify-content:flex-end;
  height:70px;
  flex-wrap:wrap; gap:1.5rem;
}
.logo{
  font-family:'Cormorant Garamond', serif;
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
}
nav ul{
  list-style:none; display:flex; gap:1.9rem; margin:0; padding:0;
  font-size:13px; font-weight:400; color:#4E4E4E; letter-spacing:.6px; text-transform:capitalize; flex-wrap:wrap;
}
nav a{ text-decoration:none; position:relative; padding:0 .3em; color:#4E4E4E; line-height:74px; transition:color .2s ease; }
nav a:hover{ color:#000000; }
nav a::before{
  content:"["; position:absolute; left:-.65em; opacity:0; color:#555;
  transition:opacity .25s ease-out, left .25s ease-out;
}
nav a::after{
  content:"]"; position:absolute; right:-.65em; opacity:0; color:#555;
  transition:opacity .25s ease-out, right .25s ease-out;
}
nav a:hover::before{ opacity:1; left:-.75em; }
nav a:hover::after{ opacity:1; right:-.75em; }
.ig-icon{ display:inline-flex; align-items:center; color:#555; font-size:13px; }
.ig-icon svg{ width:13px; height:13px; }

/* ---------- MOBILE NAV TOGGLE ---------- */
.nav-toggle{ display:none; }
.nav-toggle-label{
  display:none; flex-direction:column; justify-content:center; gap:3px;
  width:18px; height:13px; cursor:pointer; order:1; color:#555;
}
.nav-toggle-label span{ display:block; height:1.5px; width:100%; background:#555; transition:transform .2s ease, opacity .2s ease; }
@media (max-width:700px){
  .nav-inner{ justify-content:space-between; position:relative; }
  .nav-toggle-label{ display:flex; }
  nav ul{
    display:none; flex-direction:column; align-items:center; text-align:center; gap:1.2rem;
    position:absolute; top:70px; left:0; right:0; z-index:40;
    background:#FFFFFF; padding:1.5rem; border-top:0.5px solid #eee;
  }
  .nav-toggle:checked ~ nav ul{ display:flex; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Montserrat', sans-serif;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  padding:.95rem 1.9rem;
  border:1px solid var(--ink);
  color:var(--ink); background:transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.on-band{ border-color:#fff; color:#fff; }
.btn.on-band:hover{ background:#fff; color:var(--ink); }

/* ---------- TROPE TAG ---------- */
.trope-tag{
  display:inline-block;
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  font-size:.7rem;
  letter-spacing:.06em;
  padding:.4rem .9rem;
  margin-top:.9rem;
}

/* ---------- COLOR BANDS (signature element, matches each book's palette) ---------- */
.band-teal{ background:var(--teal); color:#fff; }
.band-teal .eyebrow{ color:#CFEDEB; }
.band-periwinkle{ background:var(--periwinkle); color:#fff; }
.band-periwinkle .eyebrow{ color:#DCDDF0; }
.band-plum{ background:#4A3B5C; color:#fff; }
.band-plum .eyebrow{ color:#D9CCE6; }
.band-peach{ background:#EAA57C; color:#3A241A; }
.band-peach .trope-tag, .band-peach .btn.on-band{ border-color:#3A241A; color:#3A241A; }
.band-peach .btn.on-band:hover{ background:#3A241A; color:#EAA57C; }
.band-skyblue{ background:#8FBBCB; color:#20343C; }
.band-skyblue .trope-tag, .band-skyblue .btn.on-band{ border-color:#20343C; color:#20343C; }
.band-skyblue .btn.on-band:hover{ background:#20343C; color:#8FBBCB; }
.band-paleblue{ background:#D3E2E3; color:#243838; }
.band-paleblue .trope-tag, .band-paleblue .btn.on-band{ border-color:#243838; color:#243838; }
.band-paleblue .btn.on-band:hover{ background:#243838; color:#D3E2E3; }

/* compact secondary band (for the 4 backlist titles) */
.band-slim{ padding:2.75rem 0; }
.band-slim .wrap{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.75rem; align-items:center;
}
.band-slim .band-cover{ width:90px; box-shadow:0 16px 30px -14px rgba(0,0,0,.35); display:block; }
.band-slim h3{ font-size:1.3rem; margin:0 0 .3rem; }
.band-slim p{ margin:0; font-size:.88rem; opacity:.9; max-width:44ch; }
.band-slim .btn{ white-space:nowrap; }
@media (max-width:700px){
  .band-slim .wrap{ grid-template-columns:auto 1fr; }
  .band-slim .btn{ grid-column:1 / -1; justify-self:start; margin-top:.5rem; }
}

/* ---------- SECTIONS ---------- */
section{ padding:5.5rem 0; }
section.alt{ background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:58ch; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
.section-head p{ color:var(--ink-soft); margin:0; }

/* ---------- FOOTER ---------- */
footer{ padding:1.25rem 0; min-height:70px; box-sizing:border-box; display:flex; align-items:center; font-size:12px; letter-spacing:1px; color:#000000; background:#FFFFFF; }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; margin-bottom:2rem; }
.footer-nav ul{ list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; flex-wrap:wrap; }
.footer-nav a{ text-decoration:none; }
.footer-nav a:hover{ color:var(--ink); }
.footer-social a{
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; border:1px solid var(--line); padding:.5rem 1rem;
  transition:border-color .18s ease;
}
.footer-social a:hover{ border-color:var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding-top:1.5rem; }
.footer-bottom a{ text-decoration:none; color:#000000; }

/* ---------- cover hover ---------- */
.book-card img{
  transition:transform .3s ease, box-shadow .3s ease;
}
.book-card:hover img{
  transform:translateY(-6px);
  box-shadow:0 40px 80px -28px rgba(26,26,26,.4);
}

/* ---------- animation ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.animate{ animation:fadeUp .7s ease both; }
.animate.d1{ animation-delay:.08s; }
.animate.d2{ animation-delay:.16s; }
.animate.d3{ animation-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

@media (max-width:900px){
  section{ padding:3.75rem 0; }
}