/* ══════════════════════════════════════════════════════════
   STYLING — you never need to open this file.
   It controls colours, fonts and spacing. Leave it alone
   and everything keeps looking right.

   (The only thing worth touching: the colours below, if you
   ever rebrand. --ice is the blue used on buttons and labels.)
   ══════════════════════════════════════════════════════════ */

:root{
  --paper:#FAF6EF;
  --paper-deep:#F1E9DC;
  --ink:#1C2B33;
  --ink-soft:#4E626D;
  --ice:#2E6C87;
  --ice-pale:#AFCEDC;
  --ice-wash:#E3EFF4;
  --rule:#CFC4B2;
  --display:"Fraunces",Georgia,serif;
  --body:"Karla",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 28px}
.visually-hidden{position:absolute;left:-9999px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,239,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.nav-name{
  font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:.01em;text-decoration:none;
}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--ink-soft);text-decoration:none;
  padding:4px 0;border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--ice);border-bottom-color:var(--ice)}
@media(max-width:600px){.nav-links{gap:16px}.nav-links a{font-size:11px}}

/* ---------- rink-line divider ---------- */
.rinkline{
  position:relative;height:1px;background:var(--rule);
  max-width:1040px;margin:0 auto;
}
.rinkline::after{
  content:"";position:absolute;left:50%;top:50%;
  width:15px;height:15px;transform:translate(-50%,-50%);
  border:1.5px solid var(--ice-pale);border-radius:50%;
  background:var(--paper);
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:104px 0 92px;text-align:center}
.hero-circle{
  position:absolute;left:50%;top:44%;
  width:560px;height:560px;transform:translate(-50%,-50%);
  border:1.5px solid var(--ice-pale);border-radius:50%;
  opacity:.5;pointer-events:none;
}
.hero-circle::after{
  content:"";position:absolute;left:50%;top:50%;
  width:9px;height:9px;transform:translate(-50%,-50%);
  background:var(--ice-pale);border-radius:50%;
}
.hero-in{position:relative}
.eyebrow{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ice);font-weight:600;margin-bottom:22px;
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(52px,11vw,104px);
  font-weight:500;line-height:.94;letter-spacing:-.02em;
}
.hero-tag{
  margin:26px auto 0;max-width:420px;
  font-size:19px;color:var(--ink-soft);line-height:1.5;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--ice);color:var(--paper);
  font-family:var(--body);font-size:14px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:15px 32px;border:none;border-radius:2px;cursor:pointer;
  transition:background .18s ease;
}
.btn:hover{background:var(--ink)}

/* ---------- sections ---------- */
.section{padding:88px 0}
.section-deep{background:var(--paper-deep)}
.section-label{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ice);font-weight:600;margin-bottom:14px;
}
.section h2{
  font-family:var(--display);font-size:clamp(30px,5vw,42px);
  font-weight:500;line-height:1.12;letter-spacing:-.01em;
}

/* ---------- featured book ---------- */
.featured{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
@media(max-width:760px){.featured{grid-template-columns:1fr;gap:36px;text-align:center}}

.cover{
  position:relative;aspect-ratio:2/3;width:100%;
  background:var(--ice-wash);
  box-shadow:0 14px 34px rgba(28,43,51,.16);
  display:flex;align-items:center;justify-content:center;
  padding:22px;overflow:hidden;
}
.cover-fallback{
  font-family:var(--display);font-size:19px;line-height:1.3;
  color:var(--ice);text-align:center;
}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.featured-body h3{
  font-family:var(--display);font-size:clamp(28px,4.4vw,40px);
  font-weight:500;line-height:1.1;margin-bottom:10px;
}
.book-meta{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:22px;
}
.hook{font-size:19px;line-height:1.6;margin-bottom:16px}
.hook-last{color:var(--ink-soft);margin-bottom:30px}

/* ---------- series grid ---------- */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
@media(max-width:760px){.books{grid-template-columns:repeat(2,1fr);gap:26px}}
.book-num{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);font-weight:600;margin:16px 0 5px;
}
.book-title{font-family:var(--display);font-size:20px;font-weight:500;line-height:1.25}
.book-status{font-size:14px;color:var(--ink-soft);margin-top:4px}
.book-link{text-decoration:none;display:block}
.book-link:hover .book-title{color:var(--ice)}
.cover-soon{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ice-pale)}
.cover-soon .cover-fallback{color:var(--ink-soft)}

/* ---------- newsletter ---------- */
.news{text-align:center;max-width:520px;margin:0 auto}
.news p{color:var(--ink-soft);margin:16px 0 30px}
.news-form{display:flex;gap:10px}
@media(max-width:520px){.news-form{flex-direction:column}}
.news-form input{
  flex:1;font-family:var(--body);font-size:16px;
  padding:15px 18px;border:1.5px solid var(--rule);
  background:var(--paper);color:var(--ink);border-radius:2px;
}
.news-form input:focus{outline:none;border-color:var(--ice)}
.news-fine{font-size:13px;color:var(--ink-soft);margin-top:18px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;align-items:start}
@media(max-width:760px){.about{grid-template-columns:1fr;gap:28px}}
.about p{margin-top:18px;color:var(--ink-soft)}
.about p:first-of-type{color:var(--ink);font-size:19px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:56px 0 40px;text-align:center}
.foot-name{font-family:var(--display);font-size:26px;font-weight:500;margin-bottom:22px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;list-style:none;margin-bottom:30px}
.foot-links a{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;text-decoration:none;color:var(--ice-pale);
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.foot-links a:hover{color:var(--paper);border-bottom-color:var(--ice-pale)}
.foot-fine{font-size:13px;color:rgba(250,246,239,.45)}

/* ---------- accessibility + motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--ice);outline-offset:3px;
}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}