/* ==========================================================================
   THE INDIE SCHOLAR — design system
   Parchment / olive / terracotta editorial system
   ========================================================================== */

:root{
  --bg:            #F3EFE3;
  --bg-alt:        #EBE4D2;
  --surface:       #FBF9F3;
  --surface-dark:  #221F1A;
  --surface-dark-2:#2B2720;
  --text:          #2A241D;
  --text-soft:     #55503f;
  --text-on-dark:  #F3EFE3;
  --text-on-dark-soft: #cfc7b3;
  --accent:        #3F4A34;
  --accent-strong: #2E3627;
  --accent-tint:   #E4E4D4;
  --accent-2:      #AE5A36;
  --tan:           #A9834F;
  --border:        rgba(42,36,29,0.14);
  --border-strong: rgba(42,36,29,0.28);
  --border-on-dark:rgba(243,239,227,0.18);
  --radius: 2px;
  --max: 1240px;
  --shadow-sm: 0 2px 16px rgba(34,31,26,0.09);
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-weight:500;
  margin:0;
  color:var(--text);
  text-wrap:balance;
}
p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ---------- layout ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 48px; }
.section{ padding:120px 0; }
.section-tight{ padding:80px 0; }
.section-alt{ background:var(--surface); }
.section-dark{ background:var(--surface-dark); color:var(--text-on-dark); }
.section-dark h1,.section-dark h2,.section-dark h3{ color:var(--text-on-dark); }
.rule{ border:none; border-top:1px solid var(--border); margin:0; }
.rule-dark{ border:none; border-top:1px solid var(--border-on-dark); margin:0; }
.col-narrow{ max-width:680px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:"Libre Franklin",sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); display:inline-block; }
.eyebrow.on-dark{ color:var(--tan); }
.eyebrow.on-dark::before{ background:var(--tan); }
.eyebrow.centered{ justify-content:center; }
.eyebrow.centered::before{ display:none; }

.h1{ font-size:64px; line-height:1.05; letter-spacing:-0.01em; }
.h2{ font-size:40px; line-height:1.15; }
.h3{ font-size:24px; line-height:1.3; }
.lede{ font-size:19px; line-height:1.6; color:var(--text-soft); }
.small{ font-size:14px; color:var(--text-soft); }
.serif-italic{ font-style:italic; font-weight:400; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:48px;
  padding:0 28px;
  font-family:"Libre Franklin",sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--text-on-dark); }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-on-dark{ background:transparent; color:var(--text-on-dark); border-color:var(--border-on-dark); }
.btn-on-dark:hover{ border-color:var(--text-on-dark); }
.btn-arrow{ transition:transform .2s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:14px; letter-spacing:0.03em;
  color:var(--accent);
  border-bottom:1px solid var(--border-strong);
  padding-bottom:2px;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.text-link:hover{ border-color:var(--accent); }
.text-link .arrow{ transition:transform .2s var(--ease); }
.text-link:hover .arrow{ transform:translateX(3px); }
.text-link.on-dark{ color:var(--text-on-dark); border-color:var(--border-on-dark); }
.text-link.on-dark:hover{ border-color:var(--text-on-dark); }

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; height:26px; padding:0 10px;
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  border-radius:var(--radius);
}
.badge-free{ background:var(--accent-tint); color:var(--accent-strong); border:1px solid var(--border); }
.badge-new{ background:var(--accent-2); color:#fff; }
.badge-outline{ border:1px solid var(--border-strong); color:var(--text-soft); background:transparent; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(243,239,227,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), padding .25s var(--ease);
}
.site-header.is-scrolled{ border-color:var(--border); box-shadow:var(--shadow-sm); }
.nav{
  max-width:var(--max); margin:0 auto; padding:0 48px;
  height:84px; display:flex; align-items:center; justify-content:space-between; gap:32px;
  transition:height .25s var(--ease);
}
.site-header.is-scrolled .nav{ height:64px; }
.logo{ display:flex; align-items:center; gap:11px; line-height:1; }
.logo-mark{ height:36px; width:auto; flex-shrink:0; transition:height .25s var(--ease); }
.site-header.is-scrolled .logo-mark{ height:30px; }
.logo-text{ display:flex; flex-direction:column; gap:2px; }
.logo .kicker{
  font-family:"Libre Franklin",sans-serif; font-weight:700; font-size:10px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--tan);
}
.logo .mark{ font-family:"Spectral",serif; font-weight:600; font-size:22px; letter-spacing:0.01em; }
.nav-primary{ display:flex; align-items:center; gap:40px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links > li{ position:relative; }
.nav-links a, .nav-links button.nav-toggle{
  background:none; border:none; padding:0; font-family:"Libre Franklin",sans-serif;
  font-weight:500; font-size:15px; letter-spacing:0.01em; color:var(--text);
  display:inline-flex; align-items:center; gap:6px;
  position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); }
.caret{ width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform .2s var(--ease); }
.nav-item.is-open .caret{ transform:rotate(-135deg); margin-top:2px; }
.nav-actions{ display:flex; align-items:center; gap:18px; }
.menu-toggle{ display:none; background:none; border:1px solid var(--border-strong); border-radius:var(--radius); width:44px; height:44px; align-items:center; justify-content:center; }
.menu-toggle span{ display:block; width:18px; height:1px; background:var(--text); position:relative; }
.menu-toggle span::before,.menu-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:1px; background:var(--text); }
.menu-toggle span::before{ top:-6px; }
.menu-toggle span::after{ top:6px; }

/* mega menu */
.mega{
  position:absolute; top:calc(100% + 22px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(880px, 86vw);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(34,31,26,0.14);
  padding:36px;
  display:grid; grid-template-columns:repeat(4,1fr) 1.1fr; gap:28px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-item.is-open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-col h4{ font-family:"Libre Franklin",sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--tan); margin-bottom:14px; }
.mega-col ul{ display:flex; flex-direction:column; gap:11px; }
.mega-col a{ font-size:14.5px; color:var(--text); }
.mega-col a:hover{ color:var(--accent); }
.mega-col .muted{ color:var(--text-soft); font-size:13px; font-style:italic; }
.mega-feature{ background:var(--accent); color:var(--text-on-dark); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:10px; }
.mega-feature .badge-free{ background:rgba(243,239,227,0.16); color:var(--text-on-dark); border-color:var(--border-on-dark); align-self:flex-start; }
.mega-feature h4{ font-family:"Spectral",serif; font-size:18px; font-weight:500; color:var(--text-on-dark); margin:0; }
.mega-feature p{ font-size:13.5px; color:var(--text-on-dark-soft); line-height:1.5; }

/* ---------- hero ---------- */
.hero{ padding:40px 0 0; }
.hero-grid{ display:grid; grid-template-columns:1fr 0.86fr; gap:48px; align-items:center; padding-bottom:52px; }
.hero-copy .h1{ margin:14px 0 18px; font-size:52px; }
.hero-copy .lede{ margin-bottom:28px; max-width:440px; }
.hero-traits{ display:flex; flex-wrap:wrap; gap:9px 22px; margin:0 0 28px; padding:0; list-style:none; }
.hero-traits li{ display:flex; align-items:center; gap:8px; font-family:"Libre Franklin",sans-serif; font-weight:600; font-size:13.5px; letter-spacing:0.02em; color:var(--text-soft); }
.hero-traits li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-2); flex-shrink:0; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-media{ position:relative; }
.hero-media .frame{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media .frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(34,31,26,0) 60%, rgba(34,31,26,0.3) 100%); }
.hero-caption{ position:absolute; left:24px; bottom:24px; right:24px; color:#fff; font-size:12.5px; letter-spacing:0.04em; }

/* ---------- three-up / brand promise ---------- */
.promise{ text-align:center; }
.promise .h2{ max-width:760px; margin:14px auto 0; }
.promise-grid{ margin-top:72px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--border); }
.promise-item{ padding:40px 32px; border-left:1px solid var(--border); text-align:left; }
.promise-item:first-child{ border-left:none; }
.promise-item .num{ font-family:"Spectral",serif; font-style:italic; color:var(--tan); font-size:15px; margin-bottom:16px; display:block; }
.promise-item h3{ font-size:15px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-family:"Libre Franklin",sans-serif; margin-bottom:10px; }
.promise-item p{ color:var(--text-soft); font-size:15px; }

/* ---------- subject cards ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px; flex-wrap:wrap; }
.section-head .h2{ margin-top:14px; max-width:560px; }
.subject-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.subject-card{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; }
.subject-card .frame{ aspect-ratio:16/11; overflow:hidden; position:relative; }
.subject-card img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.25) sepia(0.14) contrast(1.05) brightness(0.92); transition:transform .5s var(--ease); }
.subject-card:hover img{ transform:scale(1.045); }
.subject-card .frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(34,31,26,0) 40%, rgba(34,31,26,0.72) 100%); }
.subject-card .overlay{ position:absolute; left:0; right:0; bottom:0; padding:26px 28px; color:#fff; }
.subject-card .overlay .tag{ font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--tan); font-weight:700; }
.subject-card .overlay h3{ color:#fff; font-size:26px; margin:8px 0 8px; }
.subject-card .overlay p{ color:rgba(255,255,255,0.82); font-size:14px; max-width:340px; margin-bottom:14px; }
.subject-card .overlay .text-link{ color:#fff; border-color:rgba(255,255,255,0.4); }
.subject-card .overlay .text-link:hover{ border-color:#fff; }
.subject-card.is-muted .frame{ background:var(--surface); display:flex; align-items:center; justify-content:center; }
.subject-card.is-muted{ border:1px dashed var(--border-strong); }
.subject-card.is-muted .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(0.9) brightness(1.3); opacity:0.4; }
.subject-card.is-muted .frame::after{ content:""; position:absolute; inset:0; background:var(--surface); opacity:0.6; }
.subject-card.is-muted .placeholder{ position:relative; z-index:1; text-align:center; color:var(--text-soft); }
.subject-card.is-muted .placeholder .h3{ color:var(--text); margin-bottom:6px; }

/* ---------- free curriculum feature ---------- */
.free-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.unit-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.unit-card:hover{ border-color:var(--border-strong); transform:translateY(-3px); }
.unit-card .frame{ aspect-ratio:4/3; overflow:hidden; }
.unit-card .frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.25) sepia(0.14) contrast(1.05); transition:transform .5s var(--ease); }
.unit-card:hover .frame img{ transform:scale(1.05); }
.unit-card .body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.unit-card .meta-row{ display:flex; align-items:center; justify-content:space-between; }
.unit-card .subject-tag{ font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--tan); font-weight:700; }
.unit-card h3{ font-size:20px; }
.unit-card .desc{ font-size:14.5px; color:var(--text-soft); flex:1; }
.unit-card .grade{ font-size:12.5px; color:var(--text-soft); }
.unit-card .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:14px; border-top:1px solid var(--border); }

/* ---------- why section ---------- */
.why-media{ position:relative; }
.why-media .frame{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; }
.why-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.15) sepia(0.08) contrast(1.03); }
.why-copy p + p{ margin-top:18px; }
.why-copy .h2{ margin:14px 0 24px; }
.pull{ margin:28px 0; padding-left:22px; border-left:2px solid var(--accent-2); font-family:"Spectral",serif; font-style:italic; font-size:19px; line-height:1.5; color:var(--text); }
.why-copy .text-link{ margin-top:26px; }

/* ---------- how it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:64px; }
.step .num{ font-family:"Spectral",serif; font-style:italic; font-size:15px; color:var(--tan); }
.step h3{ font-size:20px; margin:14px 0 10px; }
.step p{ color:var(--text-soft); font-size:15px; }
.step-divider{ display:flex; align-items:center; }

/* ---------- featured spotlight ---------- */
.spotlight{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; border:1px solid var(--border-on-dark); border-radius:var(--radius); overflow:hidden; }
.spotlight .frame{ position:relative; min-height:420px; }
.spotlight .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(0.2) sepia(0.12) contrast(1.05) brightness(0.85); }
.spotlight-copy{ padding:56px 52px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.spotlight-copy .h2{ font-size:32px; }
.spotlight-copy p{ color:var(--text-on-dark-soft); font-size:15.5px; }
.spotlight-actions{ display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }

/* ---------- email cta ---------- */
.email-cta{ text-align:center; }
.email-cta .h2{ max-width:600px; margin:14px auto 16px; }
.email-cta p.lede{ max-width:480px; margin:0 auto 34px; }
.email-form{ display:flex; gap:12px; max-width:440px; margin:0 auto; }
.email-form input{
  flex:1; height:50px; padding:0 18px; border:1px solid var(--border-strong); border-radius:var(--radius);
  background:var(--surface); font-family:"Libre Franklin",sans-serif; font-size:15px; color:var(--text);
}
.email-form input::placeholder{ color:var(--text-soft); }
.email-note{ margin-top:16px; font-size:12.5px; color:var(--text-soft); }

/* ---------- footer ---------- */
.site-footer{ padding-top:88px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:64px; }
.footer-brand .mark{ font-family:"Spectral",serif; font-size:24px; color:var(--text-on-dark); }
.footer-logo{ display:flex; align-items:center; gap:12px; }
.footer-logo-mark{ height:38px; width:auto; flex-shrink:0; }
.footer-brand p{ margin-top:16px; color:var(--text-on-dark-soft); font-size:14.5px; max-width:280px; }
.footer-social{ display:flex; gap:14px; margin-top:24px; }
.footer-social a{ width:36px; height:36px; border:1px solid var(--border-on-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--ease); }
.footer-social a:hover{ border-color:var(--text-on-dark); }
.footer-col h4{ font-family:"Libre Franklin",sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--tan); margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ color:var(--text-on-dark-soft); font-size:14.5px; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--text-on-dark); }
.footer-bottom{ border-top:1px solid var(--border-on-dark); padding:26px 0 40px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-bottom p{ font-size:12.5px; color:var(--text-on-dark-soft); }
.footer-legal{ max-width:640px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   Inner page components (curriculum collection / unit detail)
   ========================================================================== */

.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-soft); margin-bottom:28px; }
.breadcrumb a{ color:var(--text-soft); }
.breadcrumb a:hover{ color:var(--accent); }

.page-hero{ padding:64px 0 72px; border-bottom:1px solid var(--border); }
.page-hero .h1{ font-size:52px; margin:14px 0 20px; }
.page-hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start; }
.timeline{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.timeline a{ font-size:14px; color:var(--text-soft); font-weight:500; }
.timeline a:hover{ color:var(--accent); }

.collection-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }

.unit-hero{ padding:64px 0 0; }
.unit-hero-top{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start; margin-bottom:32px; }
.unit-hero .h1{ font-size:48px; margin:14px 0 16px; }
.unit-hero .hook{ font-size:18px; color:var(--text-soft); max-width:620px; }
.grade-pill{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border:1px solid var(--border-strong); border-radius:var(--radius); font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; }
.unit-hero-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:21/9; margin-bottom:0; }
.unit-hero-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.2) sepia(0.1) contrast(1.05); }

.unit-body{ display:grid; grid-template-columns:1fr 320px; gap:72px; padding-top:80px; align-items:start; }
.unit-main > * + *{ margin-top:64px; }
.block-label{ font-family:"Libre Franklin",sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; display:block; }
.explore-list{ display:flex; flex-direction:column; gap:14px; }
.explore-list li{ display:flex; gap:14px; font-size:16px; line-height:1.5; }
.explore-list .bullet{ width:6px; height:6px; margin-top:9px; background:var(--accent-2); border-radius:50%; flex-shrink:0; }
.includes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.includes-item{ padding:20px; border:1px solid var(--border); border-radius:var(--radius); }
.includes-item .top-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.includes-item h4{ font-family:"Spectral",serif; font-weight:500; font-size:17px; }
.includes-item p{ font-size:14px; color:var(--text-soft); }
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.who-item{ padding:22px 0 0; border-top:2px solid var(--accent); }
.who-item h4{ font-family:"Libre Franklin",sans-serif; font-weight:700; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:8px; }
.who-item p{ font-size:14.5px; color:var(--text-soft); }
.how-list{ counter-reset:step; display:flex; flex-direction:column; gap:22px; }
.how-list li{ display:flex; gap:18px; counter-increment:step; }
.how-list li::before{ content:counter(step,decimal-leading-zero); font-family:"Spectral",serif; font-style:italic; color:var(--tan); font-size:16px; flex-shrink:0; }
.sample-box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; display:flex; gap:28px; align-items:center; }
.sample-box .frame{ width:120px; height:150px; flex-shrink:0; border-radius:var(--radius); overflow:hidden; }
.sample-box .frame img{ width:100%; height:100%; object-fit:cover; }
.sample-box p{ color:var(--text-soft); font-size:14.5px; margin-top:8px; }

.sample-intro{ color:var(--text-soft); font-size:14.5px; margin-top:8px; max-width:56ch; }
.sample-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.sample-gallery a{ position:relative; display:block; border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; background:var(--surface); transition:border-color .2s var(--ease), transform .2s var(--ease); }
.sample-gallery a::after{ content:"View full page \2197"; position:absolute; left:0; right:0; bottom:0; padding:7px 10px; font-size:11px; letter-spacing:.02em; color:var(--text-on-dark); background:rgba(42,36,29,0.72); opacity:0; transform:translateY(6px); transition:opacity .2s var(--ease), transform .2s var(--ease); }
.sample-gallery a:hover{ border-color:var(--accent); transform:translateY(-3px); }
.sample-gallery a:hover::after{ opacity:1; transform:translateY(0); }
.sample-gallery img{ width:100%; height:auto; display:block; aspect-ratio:900/1164; object-fit:cover; object-position:top; }
.sample-gallery-note{ font-size:12.5px; color:var(--text-soft); margin-top:10px; }

.book-note{ color:var(--text-soft); font-size:14.5px; margin-bottom:18px; }
.book-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px 28px; padding:0; list-style:none; }
.book-list li{ font-size:14.5px; line-height:1.4; }
.book-list a{ color:var(--text); border-bottom:1px solid var(--border-strong); padding-bottom:1px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.book-list a:hover{ color:var(--accent); border-color:var(--accent); }
.book-list .plain{ color:var(--text-soft); }
.required-text-list{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.required-text-list a{ font-size:14.5px; color:var(--accent); border-bottom:1px solid var(--border-strong); padding-bottom:1px; align-self:flex-start; }
.required-text-list a:hover{ border-color:var(--accent); }
.affiliate-note{ margin-top:44px; padding-top:20px; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-soft); }

.unit-sidebar{ position:sticky; top:104px; display:flex; flex-direction:column; gap:20px; }
.buy-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; }
.buy-card .price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.buy-card .price{ font-family:"Spectral",serif; font-size:28px; }
.buy-card .price-note{ font-size:13px; color:var(--text-soft); margin-bottom:20px; }
.buy-card .btn{ width:100%; margin-bottom:10px; }
.buy-card .includes-mini{ margin-top:20px; padding-top:20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.buy-card .includes-mini li{ display:flex; gap:10px; font-size:13.5px; color:var(--text-soft); }
.buy-card .includes-mini .check{ color:var(--accent); font-weight:700; }
.related-strip{ border-top:1px solid var(--border); }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

.about-hero{ padding:72px 0 88px; text-align:center; }
.about-hero .h1{ max-width:780px; margin:20px auto 0; font-size:46px; }
.about-block{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
.about-block.reverse{ grid-template-columns:1.1fr 0.9fr; }
.about-block.reverse .about-media{ order:2; }
.about-media .frame{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; }
.about-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.15) sepia(0.08) contrast(1.03); }
.credibility{ display:flex; gap:24px; align-items:flex-start; padding:32px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-top:36px; }
.credibility .role{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--tan); font-weight:700; margin-bottom:8px; }
.mission-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--border-on-dark); border-bottom:1px solid var(--border-on-dark); }
.mission-item{ padding:56px; border-left:1px solid var(--border-on-dark); }
.mission-item:first-child{ border-left:none; }
.mission-item .eyebrow{ margin-bottom:18px; }
.mission-item p{ color:var(--text-on-dark-soft); font-size:16px; margin-top:16px; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .mega{ grid-template-columns:repeat(2,1fr); width:min(620px,90vw); }
  .mega-feature{ grid-column:1/-1; }
  .nav-cta{ display:none; }
}
@media (max-width:960px){
  .wrap{ padding:0 28px; }
  .nav{ padding:0 20px; }
  .section{ padding:80px 0; }
  .hero-grid,.grid-2,.about-block,.about-block.reverse{ grid-template-columns:1fr; }
  .about-block.reverse .about-media{ order:0; }
  .promise-grid,.free-grid,.steps,.who-grid,.related-grid{ grid-template-columns:1fr; }
  .promise-item{ border-left:none; border-top:1px solid var(--border); padding:32px 0; }
  .promise-item:first-child{ border-top:none; }
  .subject-grid{ grid-template-columns:1fr; }
  .collection-grid{ grid-template-columns:repeat(2,1fr); }
  .spotlight{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:44px 24px; }
  .unit-body{ grid-template-columns:1fr; gap:56px; }
  .unit-sidebar{ position:static; }
  .includes-grid{ grid-template-columns:1fr; }
  .mission-grid{ grid-template-columns:1fr; }
  .mission-item{ border-left:none; border-top:1px solid var(--border-on-dark); }
  .mission-item:first-child{ border-top:none; }
  .page-hero-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:680px){
  .wrap{ padding:0 20px; }
  .nav{ padding:0 20px; }
  .nav-primary{ display:none; }
  .nav-cta{ display:none; }
  .menu-toggle{ display:flex; }
  .section{ padding:64px 0; }
  .h1{ font-size:36px; }
  .h2{ font-size:28px; }
  .page-hero .h1,.unit-hero .h1{ font-size:32px; }
  .about-hero .h1{ font-size:32px; }
  .hero-copy .h1{ font-size:32px; }
  .hero{ padding-top:32px; }
  .hero-grid{ padding-bottom:48px; gap:32px; }
  .hero-actions .btn{ width:100%; }
  .hero-actions{ flex-direction:column; }
  .collection-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .email-form{ flex-direction:column; }
  .spotlight-copy{ padding:36px 26px; }
  .unit-hero-top{ grid-template-columns:1fr; }
  .sample-box{ flex-direction:column; align-items:flex-start; }
  .book-list{ grid-template-columns:1fr; }
  .sample-gallery{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .sample-gallery a::after{ display:none; }
  .section-head{ flex-direction:column; align-items:flex-start; }
}

/* ---------- mobile nav panel ---------- */
.mobile-panel{
  position:fixed; inset:0; background:var(--bg); z-index:200; padding:24px 20px;
  display:flex; flex-direction:column; gap:4px; transform:translateX(100%);
  transition:transform .3s var(--ease); overflow-y:auto;
}
.mobile-panel.is-open{ transform:translateX(0); }
.mobile-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.mobile-panel a{ display:flex; align-items:center; justify-content:space-between; padding:16px 4px; border-bottom:1px solid var(--border); font-family:"Spectral",serif; font-size:20px; }
.mobile-panel .sub-link{ font-family:"Libre Franklin",sans-serif; font-size:15px; padding:12px 4px 12px 16px; color:var(--text-soft); border-bottom:1px solid var(--border); }
.mobile-panel .btn{ margin-top:24px; }