/* Shanii Williams, author site.
   Palette follows the existing ChatGPT-hosted site: near-black ground,
   warm off-white text, single ember accent. */

:root{
  --ground:#100D0C;
  --raised:#181413;
  --edge:#2A2422;
  --ink:#F4EEE9;
  --body:#CFC4BC;
  --muted:#9A8C83;
  --ember:#C4642A;
  --ember-lift:#E07C3C;
  --rule:#282120;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ground);
  color:var(--body);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--ember-lift);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--ember-lift);outline-offset:3px;}

.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem;}
.narrow{max-width:40rem;margin:0 auto;padding:0 1.5rem;}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;color:var(--ink);
  line-height:1.05;letter-spacing:-.01em;text-wrap:balance;
}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);
}
.kicker{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(16,13,12,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;}
.brand{
  font-family:"Instrument Serif",Georgia,serif;font-size:1.15rem;
  color:var(--ink);letter-spacing:.06em;
}
.brand:hover{text-decoration:none;color:var(--ember-lift);}
.nav-links{display:flex;gap:1.4rem;flex-wrap:wrap;}
.nav-links a{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--body);
}
.nav-links a:hover{color:var(--ember-lift);text-decoration:none;}

/* ---------- hero ---------- */
.hero{padding:6rem 0 5rem;border-bottom:1px solid var(--rule);}
.hero h1{font-size:clamp(2.8rem,8vw,5.2rem);margin:1.4rem 0 1.6rem;}
.hero h1 em{font-style:italic;color:var(--ember-lift);}
.hero p.lede{font-size:1.2rem;max-width:34rem;color:var(--body);}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem;}
.btn{
  display:inline-block;padding:.85rem 1.5rem;border-radius:2px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
}
.btn-solid{background:var(--ember);color:#fff;}
.btn-solid:hover{background:var(--ember-lift);text-decoration:none;}
.btn-ghost{border:1px solid var(--edge);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ember);text-decoration:none;}

/* ---------- sections ---------- */
section.band{padding:5rem 0;border-bottom:1px solid var(--rule);}
.sec-head{margin-bottom:2.5rem;}
.sec-head h2{font-size:clamp(2rem,5vw,3rem);margin:.9rem 0 1rem;}
.sec-head h2 em{font-style:italic;color:var(--ember-lift);}
.sec-head p{max-width:38rem;}

/* ---------- books ---------- */
.books{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));}
.book{
  background:var(--raised);border:1px solid var(--edge);border-radius:3px;
  padding:2rem 1.75rem;display:flex;flex-direction:column;
}
.book .fmt{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.book h3{font-size:1.9rem;margin:.75rem 0 .9rem;}
.book p{font-size:1rem;flex:1;}
.book .btn{margin-top:1.5rem;align-self:flex-start;}

/* ---------- signup ---------- */
.signup{
  background:var(--raised);border:1px solid var(--edge);border-top:2px solid var(--ember);
  border-radius:3px;padding:3rem 2rem;text-align:center;
}
.signup h2{font-size:clamp(1.8rem,4.5vw,2.6rem);margin:1rem auto 1rem;max-width:26rem;}
.signup p{max-width:30rem;margin:0 auto 1.8rem;color:var(--body);}
.signup .ml-embedded{max-width:26rem;margin:0 auto;}
.signup .fallback{
  font-size:.9rem;color:var(--muted);margin-top:1.2rem;
}

/* ---------- journal cards ---------- */
.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));}
.card{
  background:var(--raised);border:1px solid var(--edge);border-radius:3px;
  padding:1.75rem 1.6rem;display:flex;flex-direction:column;
}
.card:hover{border-color:var(--ember);}
.card h3{font-size:1.45rem;margin:.7rem 0 .7rem;}
.card p{font-size:.97rem;flex:1;}
.card .more{
  margin-top:1.2rem;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-lift);
}
a.card{color:var(--body);}
a.card:hover{text-decoration:none;}

/* ---------- about ---------- */
.about p{max-width:38rem;}
.about p + p{margin-top:1.2rem;}
.pull{
  margin:2.5rem 0 0;padding-left:1.5rem;border-left:2px solid var(--ember);
  font-family:"Instrument Serif",Georgia,serif;font-size:1.5rem;
  line-height:1.3;color:var(--ink);font-style:italic;max-width:32rem;
}

/* ---------- article ---------- */
article.post{padding:4rem 0 3rem;}
article.post h1{font-size:clamp(2.2rem,6vw,3.4rem);margin:1.2rem 0 1.4rem;}
article.post .meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--rule);
}
article.post h2{font-size:1.7rem;margin:2.6rem 0 .9rem;}
article.post p{margin-bottom:1.2rem;}
article.post p.standfirst{font-size:1.2rem;color:var(--ink);}
article.post ul{margin:0 0 1.2rem 1.2rem;}
article.post li{margin-bottom:.6rem;}
article.post strong{color:var(--ink);font-weight:600;}
article.post .endnote{
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule);
  font-size:1rem;color:var(--muted);
}

/* ---------- footer ---------- */
footer.site{padding:3.5rem 0;}
.foot-in{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start;}
footer.site p, footer.site a{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
footer.site a:hover{color:var(--ember-lift);}
.foot-links{display:flex;gap:1.3rem;flex-wrap:wrap;}

@media (max-width:640px){
  body{font-size:17px;}
  .hero{padding:4rem 0 3.5rem;}
  section.band{padding:3.5rem 0;}
  .signup{padding:2.25rem 1.25rem;}
}