/* PLAINLORE — one stylesheet, whole site.
   Navy / cream / gold. Cinzel headings, Lato body. Mobile first.
   Reading pages are cream with navy ink: navy backgrounds are for covers and
   accents, never for 1,500 words of text someone reads at 2 a.m. on a phone. */

@font-face{font-family:Cinzel;font-weight:400;font-display:swap;src:url(fonts/Cinzel-Regular.woff2) format("woff2")}
@font-face{font-family:Cinzel;font-weight:600;font-display:swap;src:url(fonts/Cinzel-SemiBold.woff2) format("woff2")}
@font-face{font-family:Cinzel;font-weight:700;font-display:swap;src:url(fonts/Cinzel-Bold.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Lato-Regular.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:400;font-style:italic;font-display:swap;src:url(fonts/Lato-Italic.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Lato-Bold.woff2) format("woff2")}

:root{
  --navy:#0A192F;
  --deep:#071324;
  --cream:#FDF6E3;
  --warm:#F5EAD0;
  --gold:#E0A800;
  --gold-ink:#8A6410;      /* gold dark enough to read as text on cream */
  --terra:#C13B2E;
  --muted:#5A6472;
  --rule:#DED2B4;
  --measure:34rem;         /* ~640px. one comfortable column, everywhere */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font:400 1.125rem/1.72 Lato,Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--navy)}

.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding:0 1.4rem}

/* ---------------------------------------------------------------- masthead */
.masthead{
  background:var(--navy);
  padding:1.5rem 0;
  text-align:center;
}
.masthead a{
  font:600 1.05rem/1 Cinzel,Georgia,serif;
  letter-spacing:.34em;
  text-indent:.34em;
  color:var(--cream);
  text-decoration:none;
  text-transform:uppercase;
}

/* ------------------------------------------------------------------ typography */
h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:700;line-height:1.18;letter-spacing:.01em}
h1{font-size:clamp(2.05rem,7.4vw,2.9rem);margin:0 0 .5rem}
h2{font-size:clamp(1.35rem,4.6vw,1.62rem);margin:3rem 0 1rem}
h3{font-size:1.12rem;margin:2.2rem 0 .6rem;font-weight:600}
p{margin:0 0 1.35rem}
strong{font-weight:700}
em{font-style:italic}

.standfirst{font-size:1.24rem;line-height:1.6;color:var(--muted);margin:0 0 2rem}
.kicker{
  font:600 .74rem/1 Cinzel,Georgia,serif;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 1rem;
}
.rule{border:0;height:2px;width:3.4rem;background:var(--gold);margin:2.4rem 0}
.rule--mid{margin-left:auto;margin-right:auto}

/* pull-quote: the Truths. these are the screenshot-able lines. */
blockquote{
  margin:2.2rem 0;padding:1.4rem 0 1.4rem 1.4rem;
  border-left:3px solid var(--gold);
  font-family:Cinzel,Georgia,serif;font-weight:600;
  font-size:1.16rem;line-height:1.46;letter-spacing:.005em;
}
blockquote p{margin:0}

ul{margin:0 0 1.35rem;padding:0;list-style:none}
ul li{position:relative;padding-left:1.5rem;margin-bottom:.6rem}
ul li::before{
  content:"◆";position:absolute;left:0;top:-.05em;
  color:var(--gold);font-size:.62em;line-height:2.6;
}

/* ------------------------------------------------------------------ article */
.hero{margin:0;background:var(--navy)}
.hero img{
  width:100%;
  aspect-ratio:4/5;          /* portrait on phones: keeps the face AND the phone glow */
  max-height:74vh;
  object-fit:cover;
  object-position:50% 50%;   /* centered on the face, not the forehead */
}
@media (min-width:44rem){
  .hero img{aspect-ratio:3/2;object-position:50% 46%}
}
article{padding:2.6rem 0 1rem}
article .wrap>p:first-of-type{font-size:1.2rem}

/* ------------------------------------------------------------------- the offer */
.offer{
  background:var(--warm);
  border-top:2px solid var(--gold);
  margin:3.4rem 0 0;padding:2.8rem 0 3rem;
}
.offer-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem}
.offer img{width:190px;box-shadow:0 14px 34px rgba(10,25,47,.28)}
.offer h2{margin:0;font-size:1.5rem}
.offer p{margin:0;font-size:1.05rem}
.offer .meta{font-size:.94rem;color:var(--muted)}

.buy{
  display:inline-block;
  background:var(--gold);color:var(--navy);
  font:700 .84rem/1 Cinzel,Georgia,serif;
  letter-spacing:.17em;text-indent:.17em;text-transform:uppercase;
  padding:1.15rem 2.1rem;border-radius:2px;text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.buy:hover{background:#F2BC1B;color:var(--navy);transform:translateY(-1px)}

/* --------------------------------------------------------------- home shelf */
.home-intro{padding:3.4rem 0 1rem;text-align:center}
.shelf{padding:1rem 0 1rem}
.book{
  display:flex;gap:1.5rem;align-items:flex-start;
  padding:2rem 0;border-top:1px solid var(--rule);
}
.book img{width:112px;flex:0 0 112px;box-shadow:0 8px 22px rgba(10,25,47,.2)}
.book h3{margin:0 0 .35rem;font-size:1.16rem}
.book p{margin:0 0 .7rem;font-size:1rem;line-height:1.6}
.book .meta{font-size:.86rem;color:var(--muted);margin:0}
.book .go{font:700 .78rem/1 Lato,sans-serif;letter-spacing:.11em;text-transform:uppercase}

.reading{padding:1rem 0 2rem}
.reading a{
  display:block;padding:1.4rem 0;border-top:1px solid var(--rule);
  text-decoration:none;color:var(--navy);
}
.reading a:hover h3{color:var(--terra)}
.reading h3{margin:0 0 .25rem;font-size:1.06rem;font-weight:600}
.reading p{margin:0;font-size:.97rem;color:var(--muted);line-height:1.55}

/* ------------------------------------------------------------------- footer */
footer{
  background:var(--navy);color:var(--warm);
  margin-top:3.6rem;padding:2.8rem 0 3rem;
  font-size:.9rem;line-height:1.7;text-align:center;
}
footer a{color:var(--warm)}
footer a:hover{color:var(--gold)}
footer .fnav{margin:0 0 1rem}
footer .fnav a{margin:0 .6rem;text-decoration:none}
footer .fine{color:#8FA0B5;font-size:.82rem;margin:0}

@media (min-width:44rem){
  body{font-size:1.16rem}
  .book img{width:132px;flex:0 0 132px}
  .offer-inner{gap:1.6rem}
}