@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#17130f;
  --ink-2:#211b15;
  --paper:#f7f2e9;
  --paper-2:#efe7d8;
  --card:#fffdf8;
  --accent:#8a1c1c;
  --accent-dark:#5f1212;
  --gold:#c9a25e;
  --muted:#6f6659;
  --line:#e3dac8;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --shadow-sm:0 1px 3px rgba(23,19,15,.08), 0 1px 2px rgba(23,19,15,.05);
  --shadow-md:0 10px 30px -12px rgba(23,19,15,.28), 0 3px 8px rgba(23,19,15,.10);
  --shadow-cover:0 14px 30px -12px rgba(23,19,15,.45), 0 3px 6px rgba(23,19,15,.25);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--paper);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(201,162,94,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(138,28,28,.05), transparent 55%);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}
.wrap{max-width:1000px;margin:0 auto;padding:0 28px;}

/* ===== Header ===== */
header.site{
  position:relative;
  background:
    linear-gradient(180deg, rgba(23,19,15,.92), rgba(33,27,21,.96)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px);
  color:var(--paper);
  padding:64px 0 46px;
  border-bottom:4px solid var(--accent);
}
header.site::after{
  content:"";
  position:absolute; bottom:-4px; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--gold) 40%, var(--accent));
}
header.site .brand{
  font-family:var(--serif);
  font-size:2.4rem;
  letter-spacing:3px;
  font-weight:700;
  text-transform:uppercase;
}
header.site .brand a{color:var(--paper);text-decoration:none;}
header.site .brand span{color:var(--gold);}
header.site .brand::after{
  content:"";
  display:block;
  width:56px; height:3px; margin-top:12px;
  background:var(--gold);
}
header.site p.tag{
  margin-top:14px;
  color:#d9d2c5;
  font-style:italic;
  font-size:1.08rem;
  font-family:var(--body);
  max-width:720px;
}

/* ===== Nav ===== */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(23,19,15,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(201,162,94,.25);
  box-shadow:var(--shadow-sm);
}
nav .wrap{display:flex;gap:6px;overflow-x:auto;}
nav a{
  font-family:var(--sans);
  color:#e8e2d5;text-decoration:none;
  padding:13px 14px;font-size:.76rem;font-weight:500;
  letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
nav a:hover{color:var(--gold);border-bottom-color:var(--gold);}

/* ===== Hero ===== */
.hero{padding:58px 0 26px;position:relative;}
.hero h1{
  font-family:var(--serif);
  font-size:2.35rem;font-weight:600;line-height:1.18;max-width:760px;
  letter-spacing:.2px;
}
.hero p{margin-top:16px;color:var(--muted);max-width:720px;font-size:1.08rem;}
.hero::after{
  content:"";
  display:block;
  width:70px;height:3px;margin-top:26px;
  background:linear-gradient(90deg, var(--accent), var(--gold));
}

/* ===== Category tiles (home) ===== */
.cats{padding:26px 0 52px;}
.section-title{
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;color:var(--accent-dark);
  margin-bottom:8px;
}
.cat{
  padding:24px 2px;
  border-bottom:1px solid var(--line);
}
.cat:last-of-type{border-bottom:none;}
.cat h2{font-family:var(--serif);font-size:1.6rem;font-weight:600;margin:0 0 8px;}
.cat h2 a{color:var(--ink);text-decoration:none;transition:color .15s;}
.cat h2 a:hover{color:var(--accent);}
.cat .intro{color:var(--muted);font-size:1rem;margin:0 0 12px;max-width:720px;}
.cat .readmore{
  display:inline-block;
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;
  color:var(--accent);
}
.cat .readmore:hover{text-decoration:underline;}

/* ===== Book cards ===== */
.books{padding:26px 0 52px;}
.books h2{
  font-family:var(--serif);font-size:1.9rem;font-weight:600;margin-bottom:8px;
}
.books .intro{color:var(--muted);font-size:1rem;margin-bottom:26px;max-width:760px;}
.card{
  display:flex;gap:26px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);
  border-radius:5px;padding:26px;margin-bottom:22px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.card .thumb{
  flex:0 0 124px;height:186px;
  background:var(--ink-2);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--serif);font-size:.74rem;line-height:1.35;
  letter-spacing:1px;padding:12px;border-radius:3px;overflow:hidden;
  box-shadow:var(--shadow-cover);
  border-left:3px solid rgba(201,162,94,.7);
}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.card h3{font-family:var(--serif);font-size:1.45rem;font-weight:600;margin-bottom:5px;line-height:1.2;}
.card h3 a{color:var(--ink);text-decoration:none;transition:color .15s;}
.card h3 a:hover{color:var(--accent);}
.card .by{color:var(--muted);font-style:italic;font-size:.98rem;margin-bottom:10px;font-family:var(--body);}
.card p.desc{font-size:1rem;margin-bottom:12px;color:#3c3429;}
.card .meta{font-size:.85rem;color:var(--muted);margin-bottom:16px;font-family:var(--sans);letter-spacing:.3px;}
.card .readmore{
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;color:var(--accent);
}

/* ===== Book detail ===== */
.book{padding:40px 0 60px;}
.book .back{
  display:inline-block;margin-bottom:26px;text-decoration:none;
  font-family:var(--sans);font-size:.76rem;font-weight:500;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);
}
.book .back:hover{text-decoration:underline;}
.book-layout{display:flex;gap:40px;margin-bottom:34px;align-items:flex-start;}
.cover-large{
  flex:0 0 260px;height:390px;
  background:var(--ink-2);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--serif);font-size:.95rem;line-height:1.4;
  letter-spacing:1px;padding:20px;border-radius:4px;overflow:hidden;
  box-shadow:var(--shadow-cover);border-left:4px solid rgba(201,162,94,.75);
}
.cover-large img{width:100%;height:100%;object-fit:cover;display:block;}
.book-info h1{font-family:var(--serif);font-size:2.4rem;font-weight:600;margin-bottom:10px;line-height:1.15;}
.book-info .by{color:var(--muted);font-style:italic;font-size:1.08rem;margin-bottom:14px;}
.book-info .meta{font-size:.9rem;color:var(--muted);margin-bottom:22px;font-family:var(--sans);letter-spacing:.3px;}
.book-desc{padding:30px 0;border-top:1px solid var(--line);}
.book-desc h2{font-family:var(--serif);font-size:1.3rem;margin-bottom:14px;}
.book-desc p{max-width:780px;font-size:1.06rem;color:#3c3429;margin-bottom:14px;}
.other-titles{padding:30px 0;border-top:1px solid var(--line);}
.other-titles h2{font-family:var(--serif);font-size:1.3rem;margin-bottom:16px;}
.other-titles ul{list-style:none;columns:2;column-gap:40px;}
.other-titles li{margin-bottom:9px;break-inside:avoid;}
.other-titles a{color:var(--accent);text-decoration:none;font-size:1rem;}
.other-titles a:hover{text-decoration:underline;}

/* ===== Services ===== */
.services{padding:26px 0 40px;}
.svc{
  background:var(--card);border:1px solid var(--line);border-radius:5px;
  padding:30px;margin-bottom:24px;box-shadow:var(--shadow-sm);
}
.svc h2{font-family:var(--serif);font-size:1.6rem;margin-bottom:14px;}
.svc p{margin-bottom:16px;color:#3c3429;font-size:1.04rem;}
.svc ul{margin-left:22px;color:#3c3429;}
.svc li{margin-bottom:7px;}
.cta{padding:20px 0 60px;text-align:center;}
.cta h2{font-family:var(--serif);font-size:1.9rem;margin-bottom:10px;}
.cta p{color:var(--muted);margin-bottom:24px;font-size:1.06rem;}

/* ===== Buttons ===== */
.btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:12px 24px;font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;border:0;cursor:pointer;
  border-radius:3px;transition:background .16s ease, transform .12s ease, box-shadow .16s ease;
  box-shadow:0 2px 6px rgba(138,28,28,.25);
}
.btn:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 6px 14px rgba(138,28,28,.32);}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent);box-shadow:none;margin-left:8px;}

/* ===== About ===== */
.about{padding:40px 0;border-top:1px solid var(--line);}
.about h2{font-family:var(--serif);font-size:1.6rem;margin-bottom:16px;}
.about p{max-width:760px;color:#3c3429;font-size:1.05rem;}

/* ===== Newsletter ===== */
.newsletter{
  background:
    linear-gradient(180deg, rgba(23,19,15,.94), rgba(33,27,21,.97)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px);
  color:var(--paper);padding:56px 0;text-align:center;
  border-top:4px solid var(--accent);
}
.newsletter h2{font-family:var(--serif);font-size:1.9rem;margin-bottom:10px;}
.newsletter p{color:#d9d2c5;font-size:.98rem;margin-bottom:22px;}
.newsletter input[type=email]{
  padding:13px 16px;width:300px;max-width:82%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:var(--paper);font-size:1rem;border-radius:3px;
  font-family:var(--body);
}
.newsletter input[type=email]::placeholder{color:#a89f90;}
.newsletter .btn{margin-left:8px;background:var(--gold);color:var(--ink-2);box-shadow:none;}
.newsletter .btn:hover{background:#d9b577;}

/* ===== Footer ===== */
footer{padding:26px 0;text-align:center;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);background:var(--paper-2);}

@media(max-width:640px){
  body{font-size:16px;}
  header.site{padding:48px 0 36px;}
  header.site .brand{font-size:1.9rem;}
  .hero h1{font-size:1.8rem;}
  .card{flex-direction:column;}
  .card .thumb{width:100%;flex-basis:auto;height:210px;}
  .book-layout{flex-direction:column;}
  .cover-large{flex-basis:auto;width:100%;max-width:280px;height:410px;margin:0 auto;}
  .other-titles ul{columns:1;}
  .cat .readmore{margin-left:0;}
}