/* ============================================================
   Snehal Rana — Author site
   Design tokens
   ============================================================ */
:root{
  --ink:        #14121a;   /* near-black plum (from cover art)   */
  --ink-2:      #1d1a25;   /* raised surface                     */
  --ink-3:      #262232;   /* card on dark                       */
  --plum:       #2a1f4a;   /* deep purple accent panel           */
  --paper:      #f6f2ec;   /* warm cream page bg                 */
  --paper-2:    #ffffff;   /* card bg on light                   */
  --gold:       #c9a24b;   /* primary accent                     */
  --gold-2:     #e0c073;   /* lighter gold for text on dark      */
  --ink-text:   #26222c;   /* body text on light                 */
  --muted:      #6a6472;   /* secondary text on light            */
  --muted-d:    #b7afc4;   /* secondary text on dark             */
  --line:       #e5ddd2;   /* hairline on light                  */
  --line-d:     rgba(255,255,255,.12);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1140px;
  --radius: 14px;
  --shadow: 0 18px 50px -22px rgba(20,18,26,.45);
  --shadow-sm: 0 8px 24px -14px rgba(20,18,26,.4);
  --ease: cubic-bezier(.4,.14,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:78px; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-text);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.01em; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px); }

/* ---------- Buttons ---------- */
.btn{
  --pad-y:.85em; --pad-x:1.6em;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  padding:var(--pad-y) var(--pad-x); border-radius:999px; cursor:pointer;
  border:1.5px solid transparent; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{ background:var(--gold); color:#241c07; box-shadow:0 10px 24px -12px rgba(201,162,75,.9); }
.btn--gold:hover{ background:var(--gold-2); }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--sm{ --pad-y:.6em; --pad-x:1.1em; font-size:.86rem; }
.btn--lg{ --pad-y:1em; --pad-x:2.2em; font-size:1.05rem; }

/* ---------- Section scaffolding ---------- */
.section{ padding:clamp(64px,9vw,120px) 0; }
.kicker{
  font-family:var(--sans); font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; font-size:.76rem; color:var(--gold);
  margin:0 0 .6rem;
}
.kicker--light{ color:var(--gold-2); }
.section__title{ font-size:clamp(1.9rem,4vw,3rem); margin-bottom:.4em; }
.section__title--light{ color:#fff; }
.section__lead{ max-width:60ch; color:var(--muted); font-size:1.08rem; margin:0 0 2.4rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,18,26,.82);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line-d);
}
.nav__inner{
  max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px);
  height:66px; display:flex; align-items:center; gap:1.5rem;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; color:#fff; font-family:var(--serif); font-size:1.15rem; font-weight:600; }
.brand__mark{
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:linear-gradient(150deg,var(--gold),#9c7a2e); color:#1a1405;
  font-family:var(--serif); font-weight:700; font-size:.9rem; letter-spacing:.02em;
}
.nav__links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a{
  color:var(--muted-d); font-size:.94rem; font-weight:500; position:relative; padding:.2em 0;
  transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--gold);
  transition:width .25s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ margin-left:.4rem; }

/* hamburger (mobile only) */
.nav__toggle{
  display:none; margin-left:auto; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:10px;
}
.nav__toggle span{ height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__links-cta{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% -10%, #3a2a63 0%, transparent 55%),
    linear-gradient(160deg,#1b1626 0%, #14121a 60%, #100e15 100%);
  color:#fff;
}
.hero__glow{
  position:absolute; inset:0;
  background:radial-gradient(60% 55% at 20% 110%, rgba(201,162,75,.16), transparent 60%);
  pointer-events:none;
}
.hero__inner{
  position:relative; max-width:var(--wrap); margin:0 auto;
  padding:clamp(56px,8vw,96px) clamp(20px,5vw,40px);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center;
}
.eyebrow{
  font-weight:600; text-transform:uppercase; letter-spacing:.24em;
  font-size:.78rem; color:var(--gold-2); margin:0 0 1rem;
}
.hero__name{ font-size:clamp(3rem,8vw,5.4rem); line-height:.98; margin:0; }
.hero__pen{ font-family:var(--serif); font-style:italic; color:var(--muted-d); font-size:1.2rem; margin:.5rem 0 0; }
.hero__pen em{ color:var(--gold-2); font-style:italic; }
.hero__tagline{ max-width:46ch; color:#d9d3e0; font-size:1.14rem; margin:1.6rem 0 2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero__stats{
  list-style:none; display:flex; gap:2.4rem; margin:2.8rem 0 0; padding:2rem 0 0;
  border-top:1px solid var(--line-d);
}
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats strong{ font-family:var(--serif); font-size:2rem; color:var(--gold-2); line-height:1; }
.hero__stats span{ font-size:.82rem; color:var(--muted-d); text-transform:uppercase; letter-spacing:.08em; margin-top:.35rem; }

.hero__portrait{ display:flex; justify-content:center; }
.portrait__frame{
  position:relative; width:min(330px,80vw); aspect-ratio:3/3.4; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
}
.portrait__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%, rgba(20,18,26,.55));
}
.portrait__frame img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background:var(--paper); }
.about__grid{ display:grid; grid-template-columns:1.6fr .9fr; gap:clamp(32px,5vw,64px); align-items:start; }
.about__body p{ font-size:1.06rem; color:#3d3844; margin:0 0 1.3rem; }
.about__body em{ color:var(--ink-text); font-style:italic; }

.pullquote{
  margin:2rem 0; padding:1.6rem 1.8rem; border-left:4px solid var(--gold);
  background:linear-gradient(90deg, rgba(201,162,75,.08), transparent);
  border-radius:0 12px 12px 0;
}
.pullquote p{ font-family:var(--serif); font-style:italic; font-size:1.25rem; line-height:1.5; color:var(--ink); margin:0 0 .6rem; }
.pullquote cite{ font-style:normal; font-weight:600; color:var(--muted); font-size:.95rem; }

.about__cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:2rem; }
.minicard{
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:1.3rem 1.4rem;
  box-shadow:var(--shadow-sm);
}
.minicard h3{ font-size:1.05rem; color:var(--ink); margin-bottom:.7rem; }
.minicard ul{ margin:0; padding-left:1.1rem; color:var(--muted); font-size:.95rem; }
.minicard li{ margin:.3rem 0; }
.minicard a{ color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--gold); transition:color .18s; }
.minicard a:hover{ color:var(--gold); }

.about__aside{ position:sticky; top:96px; }
.about__photo{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.about__photo img{ width:100%; aspect-ratio:3/3.4; object-fit:cover; object-position:center 20%; }
.about__nameplate{ text-align:center; margin:1rem 0 0; display:flex; flex-direction:column; }
.about__nameplate strong{ font-family:var(--serif); font-size:1.3rem; color:var(--ink); }
.about__nameplate span{ color:var(--gold); font-size:.9rem; letter-spacing:.05em; }

/* ============================================================
   BOOKS
   ============================================================ */
.books{ background:linear-gradient(180deg,#efe9df,#f6f2ec); }
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin:-.6rem 0 2.6rem; }
.filter{
  font-family:var(--sans); font-weight:600; font-size:.9rem;
  padding:.5em 1.15em; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--muted); border:1.5px solid var(--line);
  transition:all .18s var(--ease);
}
.filter:hover{ border-color:var(--gold); color:var(--ink); }
.filter.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.book-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.8rem;
}
.book{
  display:flex; flex-direction:column; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.book:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }

.book__cover{ position:relative; aspect-ratio:1024/1536; overflow:hidden; background:var(--ink); }
.book__cover img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.book:hover .book__cover img{ transform:scale(1.04); }

/* typographic placeholder cover */
.cover--placeholder{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.5rem 1.3rem; text-align:center; color:#efe7d3;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    var(--ph-bg, linear-gradient(160deg,#2a2140,#14111d));
  border:1px solid rgba(255,255,255,.08);
}
.cover--placeholder .ph__top{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2); }
.cover--placeholder .ph__title{
  font-family:var(--serif); font-weight:600; font-size:1.55rem; line-height:1.12;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.cover--placeholder .ph__rule{ width:38px; height:2px; background:var(--gold); margin:.8rem auto; }
.cover--placeholder .ph__foot{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6); }

.book__body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.book__series{ font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem; }
.book__title{ font-size:1.28rem; color:var(--ink); margin-bottom:.5rem; }
.book__desc{ font-size:.93rem; color:var(--muted); margin:0 0 1.1rem; flex:1; }
.book__foot{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:auto; }
.tag{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.35em .8em; border-radius:999px; color:#fff;
}
.tag--mystery{ background:#6d3b5d; }
.tag--thriller{ background:#7a4326; }
.tag--horror{ background:#8a2f2f; }
.tag--philosophy{ background:#3c5a6e; }

.book__buy{
  font-weight:600; font-size:.88rem; color:var(--ink);
  display:inline-flex; align-items:center; gap:.35em; padding:.4em .2em;
  border-bottom:2px solid var(--gold); transition:color .18s, gap .18s;
}
.book__buy:hover{ color:var(--gold); gap:.6em; }

/* ============================================================
   SERIES SPOTLIGHT
   ============================================================ */
.series{
  background:
    radial-gradient(90% 120% at 100% 0%, #38265f 0%, transparent 55%),
    linear-gradient(150deg,#1d1730,#14121a);
  color:#e7e2ee;
}
.series__inner{ display:grid; grid-template-columns:1.5fr .8fr; gap:clamp(30px,5vw,60px); align-items:center; }
.series__text p{ max-width:56ch; color:#cfc8db; font-size:1.08rem; margin:0 0 1.8rem; }
.series__count{ text-align:center; border-left:1px solid var(--line-d); padding-left:clamp(20px,4vw,50px); }
.series__big{ display:block; font-family:var(--serif); font-size:clamp(5rem,14vw,9rem); line-height:.9; color:var(--gold-2); }
.series__label{ text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; color:var(--muted-d); }

/* ============================================================
   RESORT
   ============================================================ */
.resort{ background:linear-gradient(180deg,#f6f2ec,#efe9df); }
.resort__inner{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,64px); align-items:center; }
.resort__photo{
  position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.resort__photo img{ width:100%; height:100%; object-fit:cover; }
/* placeholder styling until a real photo is added */
.resort__photo[data-placeholder="true"]{
  display:grid; place-items:center; text-align:center;
  background:
    repeating-linear-gradient(45deg, rgba(201,162,75,.06) 0 12px, transparent 12px 24px),
    linear-gradient(160deg,#2a2140,#14111d);
  color:var(--muted-d); border:1px dashed rgba(201,162,75,.4);
}
.resort__photo[data-placeholder="true"] span{ font-size:.9rem; letter-spacing:.05em; }
.resort__text p{ font-size:1.08rem; color:#3d3844; margin:0 0 1.8rem; max-width:52ch; }
.resort__rating{ font-weight:600; color:var(--gold); letter-spacing:.02em; margin:-1rem 0 1.6rem !important; }

/* ============================================================
   CONNECT
   ============================================================ */
.connect{ background:var(--paper); text-align:center; }
.connect__inner{ max-width:640px; }
.connect .kicker,.connect .section__lead{ margin-left:auto; margin-right:auto; }
.connect__actions{ margin:2rem 0 1.4rem; }
.connect__socials{ display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; margin:0; }
.connect__socials a{ color:var(--muted); font-weight:600; border-bottom:2px solid transparent; padding-bottom:2px; transition:color .18s,border-color .18s; }
.connect__socials a:hover{ color:var(--gold); border-color:var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--muted-d); padding:2.4rem 0; }
.footer__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; justify-content:space-between; }
.brand--footer{ color:#fff; font-size:1rem; }
.footer__links{ display:flex; gap:1.4rem; }
.footer__links a{ color:var(--muted-d); font-size:.92rem; transition:color .18s; }
.footer__links a:hover{ color:var(--gold-2); }
.footer__copy{ font-size:.86rem; margin:0; color:#7a7387; width:100%; text-align:center; border-top:1px solid var(--line-d); padding-top:1.4rem; margin-top:.4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; text-align:left; }
  .hero__portrait{ order:-1; justify-content:flex-start; }
  .portrait__frame{ width:min(240px,60vw); }
  .about__grid{ grid-template-columns:1fr; }
  .about__aside{ position:static; max-width:320px; }
  .series__inner{ grid-template-columns:1fr; }
  .resort__inner{ grid-template-columns:1fr; }
  .series__count{ border-left:0; border-top:1px solid var(--line-d); padding:1.5rem 0 0; padding-left:0; }

  /* mobile dropdown nav */
  .nav__toggle{ display:flex; }
  .nav__cta{ display:none; }
  .nav__links{
    position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(17,15,22,.98); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line-d); padding:.5rem 0;
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .nav__links.is-open{ max-height:340px; }
  .nav__links a{ padding:.9rem clamp(20px,5vw,40px); font-size:1rem; }
  .nav__links a::after{ display:none; }
  .nav__links-cta{ display:inline-flex; margin:.7rem clamp(20px,5vw,40px); }
}
@media (max-width:560px){
  .about__cards{ grid-template-columns:1fr; }
  .hero__stats{ gap:1.6rem; }
  .filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; }
  .filter{ flex:0 0 auto; }
}

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