/* ============================================================
   TOKENS — FreeReads
   Our own palette: deep ink, warm paper, one amber accent.
   Type: Fraunces (display) + Inter (text) via Google Fonts.
   ============================================================ */

:root{
  --ink: #191921;              /* deep ink — text & dark surfaces */
  --ink-soft: #2a2a35;
  --paper: #faf6ee;            /* warm paper background */
  --paper-2: #f2ecdf;          /* deeper paper (cards, alt sections) */
  --paper-3: #e9e1cf;          /* deepest paper (hover, wells) */
  --accent: #d97a1e;           /* amber */
  --accent-2: #b95f0d;         /* deep amber (hover) */
  --accent-soft: #f7e3c8;      /* pale amber wash */
  --white: #fff;
  --line: rgba(25,25,33,.1);
  --shadow: 0 10px 30px rgba(25,25,33,.08);

  /* cover art palette (CSS-drawn book covers) */
  --cover-1: #23486b;   /* slate blue */
  --cover-2: #7c3a2d;   /* rust */
  --cover-3: #2f5d50;   /* pine */
  --cover-4: #6b4fa1;   /* plum */
  --cover-5: #a8862c;   /* ochre */
  --cover-6: #31556e;   /* steel */

  --font-display: 'Fraunces', Georgia, serif;
  --font: 'Inter', sans-serif;
  --w: 1240px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:0;font:inherit;cursor:pointer;color:inherit}
ul,ol{list-style:none}

/* ---------- typography ---------- */
.h1{font-family:var(--font-display);font-size:clamp(38px,4.6vw,60px);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.h2{font-family:var(--font-display);font-size:clamp(30px,3.4vw,44px);font-weight:600;line-height:1.14;letter-spacing:-.01em}
.h3{font-family:var(--font-display);font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.22}
.lead{font-size:18px;color:rgba(25,25,33,.72);font-weight:400}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin-bottom:14px;
}

/* ---------- layout shells ---------- */
.padding-global{padding-left:4%;padding-right:4%}
.container{width:100%;max-width:var(--w);margin:0 auto}
.max-width-common{max-width:var(--w);margin:0 auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--accent);color:#fff;
  padding:14px 30px;border-radius:10px;
  font-size:16px;font-weight:600;
  transition:transform .3s ease, background .3s ease;
}
.btn:hover{transform:translateY(-3px);background:var(--accent-2)}
.btn--ghost{border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--white)}
.btn--ghost-light{border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}

/* ---------- CSS-drawn book cover (shared art system) ---------- */
.cover{
  position:relative;
  aspect-ratio:2/3;
  border-radius:6px 12px 12px 6px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:12% 12% 14%;
  color:rgba(255,255,255,.94);
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 14px 28px rgba(25,25,33,.18);
  user-select:none;
}
.cover::before{ /* spine */
  content:"";position:absolute;top:0;bottom:0;left:0;width:7%;
  background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0));
}
.cover::after{ /* sheen */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%);
}
.cover__rule{
  width:34%;height:3px;border-radius:2px;
  background:rgba(255,255,255,.55);
  margin-bottom:8px;
}
.cover__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,1.35vw,21px);line-height:1.18;
  letter-spacing:.01em;
}
.cover__author{
  font-size:clamp(9px,.75vw,11px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.cover--c1{background:linear-gradient(160deg,#2c5a84,var(--cover-1))}
.cover--c2{background:linear-gradient(160deg,#94472f,var(--cover-2))}
.cover--c3{background:linear-gradient(160deg,#3a7364,var(--cover-3))}
.cover--c4{background:linear-gradient(160deg,#7e60b8,var(--cover-4))}
.cover--c5{background:linear-gradient(160deg,#c09c3a,var(--cover-5))}
.cover--c6{background:linear-gradient(160deg,#3c687f,var(--cover-6))}

/* ---------- ad placeholder ---------- */
.ad-slot{
  display:flex;align-items:center;justify-content:center;
  min-height:110px;margin:0 auto;
  border:1.5px dashed rgba(25,25,33,.22);
  border-radius:14px;
  background:repeating-linear-gradient(45deg,transparent,transparent 14px,rgba(25,25,33,.028) 14px,rgba(25,25,33,.028) 28px);
  color:rgba(25,25,33,.4);
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
.ad-slot::before{content:"Advertisement"}

/* ---------- footer (shared) ---------- */
.footer{background:var(--ink);color:#fff;padding:64px 0 36px}
.footer__wrapper{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.footer__left{max-width:400px}
.footer__logo{
  font-family:var(--font-display);font-size:26px;font-weight:600;color:#fff;
  margin-bottom:16px;display:inline-block;
}
.footer__logo em{font-style:normal;color:var(--accent)}
.footer__tagline{color:rgba(255,255,255,.62);font-size:15px;margin-bottom:20px}
.footer__social-list{display:flex;gap:12px}
.footer__social-link{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s, border-color .3s, transform .3s;
}
.footer__social-link:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.footer__social-ic{width:16px;height:16px;fill:currentColor}
.footer__nav{display:flex;gap:26px;flex-wrap:wrap;margin-top:8px}
.footer__link{
  color:rgba(255,255,255,.72);font-size:15px;
  transition:color .3s;
}
.footer__link:hover{color:var(--accent)}
.footer__bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:rgba(255,255,255,.42);font-size:13px;
}

/* ---------- utilities ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- reveal states (JS adds .in; visible when JS off) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(56px)}
.js [data-reveal].in{opacity:1;transform:translateY(0);transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}