/* ==========================================================================
   Leading Small at NuvoYTH — reading-first ebook design
   Palette pulled from brand assets:
     charcoal  #2B2B2B  (logo background)
     cream     #F3F0E7  (page background, lighter tint of logo text E6E6DD)
     ink       #2A2A28  (body text)
     blue      #1D5C86  (accent, sampled from event tees)
     blue-deep #123E5C
     line      #DBD5C4  (hairline rule on cream)
   Type:
     Display — "Anton" (condensed, heavy — echoes the stencil logo mark)
     Body    — "Source Serif 4" (warm, readable, built for long-form reading)
     UI/meta — "Source Serif 4" small-caps-ish handled via letter-spacing (kept to two families)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

:root{
  --charcoal: #2b2b2b;
  --charcoal-soft: #3a3a37;
  --cream: #f4f1e8;
  --cream-deep: #ece6d6;
  --paper: #fbf9f3;
  --ink: #2a2a26;
  --ink-soft: #57544a;
  --blue: #1d5c86;
  --blue-deep: #123e5c;
  --blue-tint: #e4edf2;
  --line: #ddd5bf;
  --line-soft: #e8e2d0;
  --max-measure: 40rem;
  --nav-h: 64px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--blue); color: var(--cream); }

a{ color: var(--blue-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover{ color: var(--blue); }

.display{
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: none;
}

/* ---------- Top nav (chapter pages) ---------- */
.topnav{
  position: sticky; top:0; z-index: 40;
  height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 1.1rem;
  background: rgba(244,241,232,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topnav .brand{
  display:flex; align-items:center; gap:0.6rem;
  text-decoration:none; color:var(--ink);
}
.topnav .brand img{ height: 26px; display:block; border-radius:3px; }
.topnav .brand span{
  font-family:"Anton",sans-serif; font-size:0.95rem; letter-spacing:0.02em; color:var(--charcoal);
  white-space:nowrap;
}
@media (max-width:360px){
  .topnav .brand span{ font-size:0.8rem; }
}
.topnav .chnum{
  font-size:0.85rem; color: var(--ink-soft); font-style:italic; display:none;
}
@media (min-width:640px){ .topnav .chnum{ display:inline; } }

.menu-btn{
  border:1px solid var(--charcoal);
  background:transparent;
  color:var(--charcoal);
  width:42px; height:34px;
  border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer;
  padding:0;
}
.menu-btn span{ width:18px; height:2px; background:var(--charcoal); display:block; }
.menu-btn span + span{ margin-top:4px; }

/* progress bar */
.progress-track{
  height:3px; background:var(--line-soft);
  position: sticky; top: var(--nav-h); z-index: 39;
}
.progress-fill{ height:100%; background:var(--blue); }

/* ---------- Contents drawer ---------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(20,20,18,0.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  z-index:50;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100%;
  width: min(360px, 88vw);
  background: var(--paper);
  box-shadow: -12px 0 30px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index:51;
  display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0); }
.drawer-head{
  padding:1.1rem 1.2rem 0.8rem; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer-head h2{ font-family:"Anton",sans-serif; font-size:1.1rem; margin:0; color:var(--charcoal); font-weight:400; }
.drawer-close{ background:none; border:none; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--ink-soft); padding:0.2rem 0.4rem; }
.drawer-list{ overflow-y:auto; padding: 0.4rem 0; flex:1; }
.drawer-list a{
  display:flex; gap:0.7rem; align-items:baseline;
  padding:0.6rem 1.2rem; text-decoration:none; color:var(--ink);
  border-left:3px solid transparent;
}
.drawer-list a:hover{ background:var(--blue-tint); }
.drawer-list a.current{ border-left-color:var(--blue); background:var(--blue-tint); color:var(--blue-deep); }
.drawer-list .n{ font-family:"Anton",sans-serif; color:var(--ink-soft); font-size:0.85rem; min-width:1.4rem; }
.drawer-list .t{ font-size:0.98rem; }
.drawer-list .divider{
  margin: 0.5rem 1.2rem; padding-top:0.5rem; border-top:1px solid var(--line);
  font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-soft);
}

/* ---------- Chapter hero ---------- */
.ch-hero{ position:relative; }
.ch-hero .photo{
  width:100%; height: clamp(220px, 46vw, 420px);
  object-fit:cover; display:block;
}
.ch-hero .caption-bar{
  position:absolute; left:0; right:0; bottom:0; top:auto;
  background: linear-gradient(to top, rgba(20,20,18,0.72), rgba(20,20,18,0));
  padding: 3rem 1.4rem 1.2rem;
}
.eyebrow{
  color: var(--cream);
  font-size:0.8rem; letter-spacing:0.02em; opacity:0.85; margin:0 0 0.2rem;
}
.ch-hero .ch-title{
  color: var(--cream); font-family:"Anton",sans-serif; font-weight:400;
  font-size: clamp(1.8rem, 5.5vw, 2.6rem); margin:0; line-height:1;
}

.ch-header-plain{ padding: 2.6rem 1.4rem 0.6rem; max-width: var(--max-measure); margin:0 auto; }
.ch-header-plain .eyebrow{ color: var(--ink-soft); }
.ch-header-plain .ch-title{ color:var(--charcoal); font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(1.8rem,5.5vw,2.6rem); margin:0; line-height:1; }

/* ---------- Article body ---------- */
article.book{
  max-width: var(--max-measure);
  margin: 0 auto;
  padding: 2.2rem 1.4rem 1rem;
}
article.book h2{
  font-family:"Anton",sans-serif; font-weight:400;
  color: var(--blue-deep);
  font-size: 1.3rem;
  margin: 2.6rem 0 0.9rem;
  letter-spacing:0.01em;
}
article.book h2:first-child{ margin-top:0.4rem; }
article.book p{
  font-size: 1.09rem;
  line-height: 1.75;
  margin: 0 0 1.15em;
  color: var(--ink);
}
article.book strong.callout{
  display:block;
  font-size:1.2rem;
  line-height:1.5;
  color: var(--blue-deep);
  border-left: 3px solid var(--blue);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1.6rem 0 1.7rem;
  font-weight:600;
}
article.book ul{ padding-left:1.3rem; margin: 0 0 1.3em; }
article.book li{ font-size:1.06rem; line-height:1.65; margin-bottom:0.55em; color:var(--ink); }
article.book li p{ margin:0; }

/* inline mid-chapter photo, used sparingly */
figure.inline-photo{
  margin: 2.1rem -1.4rem 2.1rem;
}
figure.inline-photo img{ width:100%; display:block; }
figure.inline-photo figcaption{
  font-size:0.82rem; color:var(--ink-soft); font-style:italic;
  padding: 0.5rem 1.4rem 0; text-align:center;
}
@media (min-width:640px){
  figure.inline-photo{ margin: 2.4rem 0 2.4rem; border-radius: 4px; overflow:hidden; }
}

/* ---------- Prev/Next footer nav ---------- */
.book-nav{
  max-width: var(--max-measure); margin: 2.2rem auto 0; padding: 1.4rem 1.4rem 3rem;
  border-top: 1px solid var(--line);
  display:grid; grid-template-columns: 1fr 1fr; gap:1rem;
}
.book-nav a{
  text-decoration:none; display:flex; flex-direction:column; gap:0.25rem;
  padding: 0.9rem 1rem; border:1px solid var(--line); border-radius:6px;
  background: var(--paper);
  transition: border-color .15s ease, transform .15s ease;
}
.book-nav a:hover{ border-color: var(--blue); }
.book-nav a.next{ text-align:right; grid-column:2; }
.book-nav .dir{ font-size:0.72rem; letter-spacing:0.05em; color: var(--ink-soft); }
.book-nav .lbl{ font-size:1rem; color:var(--charcoal); font-weight:600; }
.book-nav a.disabled{ opacity:0.35; pointer-events:none; }
@media (max-width:480px){
  .book-nav{ grid-template-columns:1fr; }
  .book-nav a.next{ grid-column:1; text-align:left; }
}

/* ---------- Cover / index page ---------- */
.cover-nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.4rem; background: rgba(244,241,232,0.92); backdrop-filter: blur(8px);
  border-bottom:1px solid transparent;
}
.cover-nav.scrolled{ border-bottom-color: var(--line); }
.cover-nav .brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.cover-nav .brand img{ height:24px; border-radius:3px; }
.cover-nav .brand span{ font-family:"Anton",sans-serif; color:var(--charcoal); font-size:0.9rem; }

.hero{
  background: var(--charcoal);
  color: var(--cream);
  padding: 3.4rem 1.4rem 0;
  position:relative;
  overflow:hidden;
}
.hero-inner{ max-width: 640px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.hero-logo{ width:100%; max-width:280px; margin: 0 auto 1.8rem; display:block; }
.hero-kicker{ font-size:0.92rem; color:#cfcabb; margin:0 0 0.6rem; }
.hero h1{
  font-family:"Anton",sans-serif; font-weight:400;
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  line-height:0.95; margin:0 0 1rem; color: var(--cream);
  text-transform: uppercase;
}
.hero p.sub{ font-size:1.08rem; color:#d8d3c4; max-width:34rem; margin: 0 auto 2.2rem; line-height:1.6; }
.hero .byline{ font-size:0.85rem; color:#a9a495; margin-bottom:2.4rem; }
.hero .cta{
  display:inline-block; background: var(--blue); color:var(--cream);
  padding:0.85rem 1.7rem; border-radius:6px; text-decoration:none;
  font-size:1rem; font-weight:600; letter-spacing:0.01em;
}
.hero .cta:hover{ background:var(--blue-deep); }

.hero-strip{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:2px;
  margin-top: 3rem;
  position:relative; z-index:2;
}
.hero-strip img{ width:100%; aspect-ratio: 1 / 1; object-fit:cover; display:block; filter: saturate(1.02); }

/* Front matter / note box */
.section-block{ max-width: var(--max-measure); margin:0 auto; padding: 3rem 1.4rem; }
.section-block h2.label{
  font-family:"Anton",sans-serif; font-weight:400; color:var(--charcoal);
  font-size:1.5rem; margin: 0 0 1.2rem;
}
.section-block p{ font-size:1.05rem; line-height:1.75; margin:0 0 1.1em; color:var(--ink); }
.note{
  background: var(--blue-tint); border-left:3px solid var(--blue);
  border-radius: 0 6px 6px 0; padding: 1rem 1.2rem; margin: 1.6rem 0;
  font-size:0.98rem; line-height:1.65; color: var(--blue-deep);
}

/* TOC on cover */
.toc{
  max-width: var(--max-measure); margin: 0 auto; padding: 1rem 1.4rem 4rem;
}
.toc h2.label{ font-family:"Anton",sans-serif; font-weight:400; color:var(--charcoal); font-size:1.5rem; margin: 0 0 1.4rem; }
.toc-group{ margin-bottom: 1.8rem; }
.toc-group .group-label{
  font-size:0.75rem; letter-spacing:0.07em; color: var(--ink-soft); margin: 0 0 0.5rem;
  border-bottom:1px solid var(--line); padding-bottom:0.4rem;
}
.toc-list{ list-style:none; margin:0; padding:0; }
.toc-list li{ border-bottom: 1px solid var(--line-soft); }
.toc-list a{
  display:flex; align-items:baseline; gap:0.9rem;
  padding: 0.85rem 0.1rem; text-decoration:none; color:var(--ink);
}
.toc-list a:hover .t{ color: var(--blue-deep); }
.toc-list .n{ font-family:"Anton",sans-serif; color: var(--blue); font-size:1rem; min-width:1.6rem; }
.toc-list .t{ font-size:1.05rem; flex:1; color:var(--ink); }
.toc-list .p{ font-size:0.85rem; color: var(--ink-soft); font-variant-numeric: oldstyle-nums; }

footer.site-footer{
  background: var(--charcoal); color:#bdb8a8;
  padding: 2.6rem 1.4rem; text-align:center; font-size:0.85rem;
}
footer.site-footer img{ height:30px; margin-bottom:0.9rem; border-radius:3px; }
footer.site-footer p{ margin:0.3rem 0; }

/* Sources list */
.sources-list{ padding-left:1.2rem; }
.sources-list li{ margin-bottom:1rem; font-size:0.98rem; line-height:1.6; color:var(--ink); word-break:break-word; }

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

/* print */
@media print{
  .topnav,.progress-track,.drawer,.drawer-overlay,.book-nav,.menu-btn,.hero .cta{ display:none !important; }
  body{ background:white; }
  article.book{ max-width:none; }
}